PageSourceSearch

https://ocdandme.com/

html ocdandme.com collected 2026-10-07 21:35:24 UTC 147,644 bytes, 2,511 lines download raw bytes

1
2<!DOCTYPE html>
3<html lang="de">
4
5<head>
6    <!-- Meta - Setup -->
7    <meta charset="UTF-8">
8    <meta http-equiv="X-UA-Compatible" content="IE=edge">
9    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
10    
11    <!-- SEO Meta Tags -->
12        <meta name="description" content="Verstehe den Kreislauf hinter deinen Zwangsgedanken und arbeite mit konkreten, angeleiteten Übungen nach wissenschaftlich fundiertem Prinzip Schritt für Schritt daran. ocd&amp;me ist deine App für strukturierte Selbsthilfe, im Browser und als iPhone-App im App Store: sofort startbar, privat, in deinem Tempo. Ab 14,92 € im Monat, je nach Laufzeit, monatlich kündbar.">
13        
14    <meta name="robots" content="index, follow">
15    
16    <!-- Canonical URL (self-referential by default) -->
17    <link rel="canonical" href="https://ocdandme.com/">
18
19    <!-- hreflang Tags für Mehrsprachigkeit -->
20            <link rel="alternate" hreflang="de" href="https://ocdandme.com/">
21        <link rel="alternate" hreflang="x-default" href="https://ocdandme.com/">
22    
23    <!-- Open Graph Meta Tags -->
24    <meta property="og:title" content="Seite">
25        <meta property="og:description" content="Verstehe den Kreislauf hinter deinen Zwangsgedanken und arbeite mit konkreten, angeleiteten Übungen nach wissenschaftlich fundiertem Prinzip Schritt für Schritt daran. ocd&amp;me ist deine App für strukturierte Selbsthilfe, im Browser und als iPhone-App im Ap
25p Store: sofort startbar, privat, in deinem Tempo. Ab 14,92 € im Monat, je nach Laufzeit, monatlich kündbar.">
26        <meta property="og:type" content="website">
27    <meta property="og:url" content="https://ocdandme.com/">
28    <meta property="og:site_name" content="ocd&amp;me">
29    <meta property="og:locale" content="de_DE">
30                            <meta property="og:image" content="https://ocdandme.com/assets/images/og-default.jpg">
31            
32    <!-- Twitter Card Meta Tags -->
33    <meta name="twitter:card" content="summary_large_image">
34    <meta name="twitter:title" content="Seite">
35        <meta name="twitter:description" content="Verstehe den Kreislauf hinter deinen Zwangsgedanken und arbeite mit konkreten, angeleiteten Übungen nach wissenschaftlich fundiertem Prinzip Schritt für Schritt daran. ocd&amp;me ist deine App für strukturierte Selbsthilfe, im Browser und als iPhone-App im App Store: sofort startbar, privat, in deinem Tempo. Ab 14,92 € im Monat, je nach Laufzeit, monatlich kündbar.">
36            <meta name="twitter:image" content="https://ocdandme.com/assets/images/og-default.jpg">
37    
38    <!-- Performance: early connection hints -->
39    <link rel="dns-prefetch" href="https://app.ocdandme.com">
40    <link rel="preconnect" href="https://app.ocdandme.com" crossorigin>
41    <link rel="dns-prefetch" href="https://magical-health-144b2fbb34.strapiapp.com">
42    <link rel="preconnect" href="https://magical-health-144b2fbb34.strapiapp.com" crossorigin>
43
44    <!-- Title -->
45    <title>ocd&amp;me: Selbsthilfe-App bei Zwangsgedanken</title>
46
47    <!-- Fav - icon -->
48    <link rel="shortcut icon" href="/assets/images/favicon/favicon.ico" type="image/x-icon" />
49
50    <!-- KRITISCHES CSS INLINE - Nur die wichtigsten Styles -->
51    <style>
52        /* Reset & Base */
53        * { box-sizing: border-box; }
54        body { 
55            margin: 0; 
56            padding: 0;
57            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 
58            line-height: 1.6;
59        }
60        
61        /* Container */
62        .container { 
63            max-width: 1200px; 
64            margin: 0 auto; 
65            padding: 0 15px; 
66        }
67        
68        /* Container Wide (for Job Pages) */
69        .container-wide {
70            max-width: 1400px;
71            margin: 0 auto;
72            padding: 0 40px;
73        }
74        
75        @media (min-width: 992px) {
76            .container-wide {
77                padding: 0 60px;
78            }
79        }
80        
81        @media (min-width: 1400px) {
82            .container-wide {
83                max-width: 1600px;
84                padding: 0 80px;
85            }
86        }
87        
88        /* Bootstrap-compatible utilities (used by page content) */
89        .d-flex { display: flex !important; }
90        .align-items-center { align-items: center !important; }
91        .justify-content-between { justify-content: space-between !important; }
92        .d-none { display: none !important; }
93        .d-md-block { display: none !important; }
94        .d-md-none { display: block !important; }
95        @media (min-width: 768px) {
96            .d-md-block { display: block !important; }
97            .d-md-none { display: none !important; }
98        }
99
100        .btn-shape {
101            padding: 12px 24px;
102            background: var(--color-primary-500);
103            color: white;
104            text-decoration: none;
105            border-radius: 100px;
106            font-weight: 600;
107        }
108
109        .btn-shape:hover {
110            background: var(--color-primary-600);
111            color: white;
112        }
113
114        /* Translation Notice Banner */
115        .translation-notice {
116            background: #fff3cd;
117            border-bottom: 1px solid var(--color-warning);
118            padding: 12px 0;
119        }
120
121        .translation-notice p {
122            margin: 0;
123            color: var(--color-warning);
124            text-align: center;
125            font-size: 0.9rem;
126        }
127
128        .translation-notice a {
129            color: var(--color-warning);
130            text-decoration: underline;
131            font-weight: 500;
132        }
133
134        .translation-notice a:hover {
135            color: var(--color-warning);
136        }
137
138        /* =============================
139           Legal Pages – CSS (wenn Legal Page)
140           ============================= */
141                
142        /* Clinic Directory CSS: ausgelagert nach /assets/css/clinic-directory.css (analog Therapeuten) */
143
144    </style>
145
146    <!-- Bootstrap - Synchron laden für kritische Display-Klassen -->
147    <link rel="stylesheet" href="/assets/css/bootstrap.css">
148    
149    <!-- Bootstrap Icons (local) -->
150    <link rel="stylesheet" href="/assets/bootstrap-icons/bootstrap-icons.css">
151
152    <!-- Design System Tokens -->
153    <link rel="stylesheet" href="/design-system/design-system.css">
154
155    <!-- Main Styles -->
156    <link rel="stylesheet" href="/assets/css/style.css">
157
158    <!-- Content & Responsive - -->
159    <link rel="stylesheet" href="/assets/css/content.css">
160    <link rel="stylesheet" href="/assets/css/responsive.css">
161
162    <!-- FontAwesome (synchron laden für sofortige Icon-Darstellung) -->
163    <link rel="stylesheet" href="/assets/css/fontawesome.min.css">
164
165    
166    
167        <!-- Noch kein Consent gespeichert: Banner erscheint sofort, CSS muss direkt da sein
168         (sonst blockiert ein ungestylter/verzögerter Banner den Erstbesuch) -->
169    <link rel="stylesheet" href="/assets/cookieconsent/cookieconsent.css">
170    
171    <!-- VERZÖGERT LADEN - Nach Page Load -->
172    
172<script nonce="94573f3eac17a88549eb6449e61b2bc3">
173    // CSS nach dem ersten Rendering laden
174    window.addEventListener('load', function() {
175        var cssFiles = [
176            '/assets/animate/animate.min.css',
177            '/assets/aos/aos.css',
178            '/assets/css/owl.carousel.min.css'        ];
179
180        cssFiles.forEach(function(href) {
181            var link = document.createElement('link');
182            link.rel = 'stylesheet';
183            link.href = href;
184            document.head.appendChild(link);
185        });
186    });
187    </script>
187
188
189    <!-- Consent Mode v2 (advanced): Defaults MÜSSEN vor GTM laufen.
190         Standard = alles "denied"; wiederkehrende Besucher mit gespeichertem
191         CookieConsent (cc_cookie) bekommen direkt den korrekten Zustand,
192         damit es kein denied→granted-Flackern gibt. -->
193    
193<script nonce="94573f3eac17a88549eb6449e61b2bc3">
194    (function () {
195        window.dataLayer = window.dataLayer || [];
196        function gtag() { dataLayer.push(arguments); }
197        window.gtag = gtag;
198
199        // CSP-Nonce über den dataLayer für GTM verfügbar machen, damit Custom-HTML-Tags
200        // (z. B. Meta-Pixel) ihre injizierten Inline-Scripts mit 
200<script nonce="..."> versehen
201        // können und die nonce-strenge CSP passieren.
202        window.dataLayer.push({ 'page_nonce': '94573f3eac17a88549eb6449e61b2bc3' });
203
204        var consent = {
205            ad_storage: 'denied',
206            ad_user_data: 'denied',
207            ad_personalization: 'denied',
208            analytics_storage: 'denied',
209            functionality_storage: 'denied',
210            personalization_storage: 'denied',
211            security_storage: 'granted',
212            wait_for_update: 500
213        };
214
215        try {
216            var m = document.cookie.match(/(?:^|;\s*)cc_cookie=([^;]+)/);
217            if (m) {
218                var cats = (JSON.parse(decodeURIComponent(m[1])).categories) || [];
219                if (cats.indexOf('analytics') > -1) consent.analytics_storage = 'granted';
220                if (cats.indexOf('marketing') > -1) {
221                    consent.ad_storage = 'granted';
222                    consent.ad_user_data = 'granted';
223                    consent.ad_personalization = 'granted';
224                }
225                if (cats.indexOf('functionality') > -1) {
226                    consent.functionality_storage = 'granted';
227                    consent.personalization_storage = 'granted';
228                }
229            }
230        } catch (e) { /* defensiv: bei Parse-Fehler bleibt alles denied */ }
231
232        gtag('consent', 'default', consent);
233        gtag('set', 'ads_data_redaction', true);
234        gtag('set', 'url_passthrough', true);
235    })();
236    </script>
236
237
238    <!-- Google Tag Manager (Consent Mode advanced: lädt immer, Tags respektieren den Consent-Status) -->
239    
239<script nonce="94573f3eac17a88549eb6449e61b2bc3">
240    (function (w, d, s, l, i, n) {
241        w[l] = w[l] || [];
242        w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
243        var f = d.getElementsByTagName(s)[0],
244            j = d.createElement(s),
245            dl = l != 'dataLayer' ? '&l=' + l : '';
246        j.async = true;
247        // CSP-Nonce an gtm.js -> GTM propagiert ihn an injizierte Inline-Scripts
248        // (z. B. Meta-Pixel Custom HTML), damit die strenge nonce-CSP nicht blockt.
249        if (n) j.nonce = n;
250        j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
251        f.parentNode.insertBefore(j, f);
252    })(window, document, 'script', 'dataLayer', 'GTM-WLJJH86Z', '94573f3eac17a88549eb6449e61b2bc3');
253    </script>
253
254    <!-- End Google Tag Manager -->
255
256    <!-- Schema.org JSON-LD für SEO & LLM-Grounding -->
257            
257<script nonce="94573f3eac17a88549eb6449e61b2bc3" type="application/ld+json">
258{
259    "@context": "https://schema.org",
260    "@type": "WebApplication",
261    "name": "ocd&me",
262    "description": "Web-App für strukturierte Selbsthilfe bei Zwangsgedanken: Psychoedukation, Muster-Tagebuch, angeleitete Übungen nach wissenschaftlich fundiertem Prinzip und Verlaufstracking.",
263    "applicationCategory": "HealthApplication",
264    "operatingSystem": "Web",
265    "url": "https://app.ocdandme.com",
266    "inLanguage": "de",
267    "publisher": {
268        "@type": "Organization",
269        "name": "ocd&me",
270        "url": "https://ocdandme.com",
271        "founder": [
272            {
273                "@type": "Person",
274                "name": "Justin"
275            },
276            {
277                "@type": "Person",
278                "name": "Nadine Stievermann",
279                "jobTitle": "Systemische Therapeutin",
280                "url": "https://www.nadine-stievermann.de/ueber-mich/"
281            }
282        ]
283    },
284    "offers": [
285        {
286            "@type": "Offer",
287            "name": "Monatlich",
288            "price": "24.90",
289            "priceCurrency": "EUR",
290            "category": "subscription",
291            "url": "https://app.ocdandme.com/register?plan=monthly"
292        },
293        {
294            "@type": "Offer",
295            "name": "4 Monate",
296            "price": "69.00",
297            "priceCurrency": "EUR",
298            "category": "subscription",
299            "url": "https://app.ocdandme.com/register?plan=fourmonth"
300        },
301        {
302            "@type": "Offer",
303            "name": "12 Monate",
304            "price": "179.00",
305            "priceCurrency": "EUR",
306            "category": "subscription",
307            "url": "https://app.ocdandme.com/register?plan=annual"
308        }
309    ]
310}    </script>
310
311        
311<script nonce="94573f3eac17a88549eb6449e61b2bc3" type="application/ld+json">
312{
313    "@context": "https://schema.org",
314    "@type": "MobileApplication",
315    "name": "ocd&me",
316    "description": "iPhone-App für strukturierte Selbsthilfe bei Zwangsgedanken: Psychoedukation, Muster-Tagebuch, angeleitete Übungen nach wissenschaftlich fundiertem Prinzip und Verlaufstracking.",
317    "applicationCategory": "HealthApplication",
318    "operatingSystem": "iOS",
319    "url": "https://apps.apple.com/de/app/ocd-me/id6792472196",
320    "installUrl": "https://apps.apple.com/de/app/ocd-me/id6792472196",
321    "inLanguage": "de"
322}    </script>
322
323        
324        <!-- Fonts -->
325    <link rel="preconnect" href="https://fonts.googleapis.com">
326    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
327    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
328    <!-- Tailwind CSS (lokal, vorkompiliert via `npm run build:css`) -->
329    <link rel="stylesheet" href="/assets/css/tailwind.css">
330    <!-- iOS Smart App Banner (Safari zeigt Hinweis auf die App im App Store) -->
331    <meta name="apple-itunes-app" content="app-id=6792472196">
332
333</head>
334
335<body>
336
337    <!-- Google Tag Manager (noscript) -->
vendor: 72 bytes, lines 337-338
337
338    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=
338GTM-WLJJH86Z
vendor: 87 bytes, lines 338-339
338" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
339    
339<!-- End Google Tag Manager (noscript) -->
340
341    <style>
342/* ── Floating Navbar ── */
343.fn-wrapper {
344    display: flex;
345    justify-content: center;
346    padding: 16px;
347    position: relative;
348    z-index: 100;
349}
350.fn-bar {
351    background: rgba(255, 255, 255, 0.9);
352    backdrop-filter: blur(12px);
353    -webkit-backdrop-filter: blur(12px);
354    border-radius: 9999px;
355    padding: 12px 32px;
356    display: flex;
357    align-items: center;
358    justify-content: space-between;
359    width: 100%;
360    max-width: 1024px;
361    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
362    gap: 16px;
363}
364.fn-bar .fn-logo { flex-shrink: 0; line-height: 0; text-decoration: none; }
365.fn-bar .fn-logo img { height: 44px; width: auto; display: block; }
366.fn-nav { display: flex; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
367.fn-nav a {
368    font-size: 14px;
369    font-weight: 500;
370    color: var(--color-text-secondary);
371    text-decoration: none;
372    transition: color 0.15s;
373    white-space: nowrap;
374}
375.fn-nav a:hover { color: var(--color-primary-500); }
376
377/* Dropdown für Nav-Items mit Unterpunkten */
378.fn-has-sub { position: relative; }
379.fn-has-sub > a { display: inline-flex; align-items: center; gap: 4px; }
380.fn-has-sub > a svg {
381    width: 12px; height: 12px; fill: currentColor;
382    transition: transform 0.15s ease;
383}
384.fn-has-sub:hover > a svg,
385.fn-has-sub:focus-within > a svg { transform: rotate(180deg); }
386.fn-sub {
387    display: none;
388    position: absolute;
389    top: 100%;
390    left: 50%;
391    transform: translateX(-50%);
392    padding: 12px;
393    margin: 0;
394    list-style: none;
395    background: rgba(255, 255, 255, 0.97);
396    backdrop-filter: blur(12px);
397    -webkit-backdrop-filter: blur(12px);
398    border-radius: 16px;
399    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
400    min-width: 150px;
401}
402.fn-has-sub:hover .fn-sub,
403.fn-has-sub:focus-within .fn-sub { display: block; }
404.fn-sub::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
405.fn-sub li a { display: block; padding: 8px 14px; border-radius: 10px; }
406.fn-sub li a:hover { background: var(--color-neutral-warm-200); }
407
408/* Städte-Mega-Menü: mehrspaltig statt einer langen Spalte */
409.fn-sub--cities { min-width: 360px; }
410.fn-sub-head {
411    display: flex;
412    align-items: baseline;
413    justify-content: space-between;
414    gap: 16px;
415    padding: 4px 10px 10px;
416    margin-bottom: 6px;
417    border-bottom: 1px solid var(--color-border-light);
418}
419.fn-sub-eyebrow {
420    font-size: 11px;
421    font-weight: 600;
422    text-transform: uppercase;
423    letter-spacing: 0.06em;
424    color: var(--color-text-tertiary);
425}
426.fn-sub-head a.fn-sub-all {
427    display: inline-flex;
428    align-items: center;
429    gap: 4px;
430    padding: 0;
431    font-size: 13px;
432    font-weight: 600;
433    color: var(--color-primary-500);
434    white-space: nowrap;
435}
436.fn-sub-head a.fn-sub-all:hover { color: var(--color-primary-600); background: none; }
437.fn-sub-grid {
438    display: grid;
439    grid-template-columns: repeat(2, minmax(0, 1fr));
440    gap: 2px 8px;
441    list-style: none;
442    margin: 0;
443    padding: 0;
444}
445
446/* Language switcher in navbar */
447.fn-lang { display: flex; gap: 4px; align-items: center; margin-left: 8px; }
448.fn-lang a {
449    padding: 4px 8px;
450    border-radius: 6px;
451    text-decoration: none;
452    color: var(--color-text-secondary);
453    font-weight: 500;
454    font-size: 13px;
455    transition: all 0.15s;
456    border: 1px solid transparent;
457}
458.fn-lang a.active {
459    background: var(--color-primary-500);
460    color: var(--color-text-inverse);
461    border-color: var(--color-primary-500);
462}
463.fn-lang a:hover:not(.active) {
464    background: var(--color-border-light);
465    border-color: var(--color-border-default);
466}
467
468/* Login link in navbar */
469.fn-login {
470    padding: 6px 14px;
471    border-radius: 8px;
472    text-decoration: none;
473    color: var(--color-text-secondary);
474    font-weight: 500;
475    font-size: 13px;
476    transition: all 0.15s;
477    border: 1px solid var(--color-border-default);
478    margin-left: 8px;
479}
480.fn-login:hover {
481    background: var(--color-border-light);
482    border-color: var(--color-border-default);
483    color: var(--color-text-secondary);
484}
485
486/* Burger button */
487.fn-burger {
488    display: none;
489    flex-shrink: 0;
490    background: none;
491    border: none;
492    padding: 4px;
493    cursor: pointer;
494    color: var(--color-text-secondary);
495    line-height: 0;
496    -webkit-tap-highlight-color: transparent;
497}
498.fn-burger svg { width: 24px; height: 24px; }
499
500/* ── Mobile Menu Overlay ── */
501.fn-mobile {
502    display: none;
503    position: fixed;
504    inset: 0;
505    z-index: 200;
506}
507.fn-mobile.is-open { display: block; }
508.fn-mobile-backdrop {
509    position: absolute;
510    inset: 0;
511    background: rgba(0,0,0,0.4);
512    backdrop-filter: blur(4px);
513    -webkit-backdrop-filter: blur(4px);
514}
515.fn-mobile-card {
516    position: absolute;
517    top: 16px;
518    left: 16px;
519    right: 16px;
520    background: var(--color-bg-surface);
521    border-radius: 24px;
522    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
523    padding: 24px;
524}
525.fn-mobile-header {
526    display: flex;
527    align-items: center;
528    justify-content: space-between;
529    margin-bottom: 24px;
530}
531.fn-mobile-header .fn-logo img { height: 32px; width: auto; }
532.fn-mobile-close {
533    background: none;
534    border: none;
535    padding: 4px;
536    cursor: pointer;
537    color: var(--color-text-tertiary);
538    line-height: 0;
539    -webkit-tap-highlight-color: transparent;
540}
541.fn-mobile-close:hover { color: var(--color-text-secondary); }
542.fn-mobile-close svg { width: 24px; height: 24px; }
543.fn-mobile-nav {
544    list-style: none;
545    margin: 0;
546    padding: 0;
547}
548.fn-mobile-nav li + li { margin-top: 4px; }
549.fn-mobile-nav a {
550    display: block;
551    font-size: 16px;
552    font-weight: 500;
553    color: var(--color-text-secondary);
554    text-decoration: none;
555    padding: 10px 0;
556    transition: color 0.15s;
557}
558.fn-mobile-nav a:hover { color: var(--color-primary-500); }
559.fn-mobile-nav .fn-mobile-separator {
560    margin-top: 12px;
561    padding-top: 12px;
562    border-top: 1px solid var(--color-border-light);
563}
564
565/* Aufklappbare Gruppe (z. B. Therapeuten-Städte) im Mobile-Menü */
566.fn-mobile-group-head {
567    display: flex;
568    align-items: center;
569    justify-content: space-between;
570    gap: 8px;
571}
572.fn-mobile-group-head > a { flex: 1; }
573.fn-mobile-toggle {
574    flex-shrink: 0;
575    background: none;
576    border: none;
577    padding: 10px 4px;
578    margin: 0;
579    cursor: pointer;
580    color: var(--color-text-tertiary);
581    line-height: 0;
582    -webkit-tap-highlight-color: transparent;
583}
584.fn-mobile-toggle svg {
585    width: 20px; height: 20px; fill: currentColor;
586    transition: transform 0.2s ease;
587}
588.fn-mobile-group.is-open .fn-mobile-toggle svg { transform: rotate(180deg); }
589.fn-mobile-sublist {
590    list-style: none;
591    margin: 0;
592    padding: 0;
593    overflow: hidden;
594    max-height: 0;
595    transition: max-height 0.25s ease;
596}
597.fn-mobile-group.is-open .fn-mobile-sublist { max-height: 640px; }
598.fn-mobile-subgrid {
599    display: grid;
600    grid-template-columns: 1fr 1fr;
601    gap: 0 12px;
602    list-style: none;
603    margin: 0;
604    padding: 4px 0 8px;
605}
606.fn-mobile-subgrid a {
607    padding: 8px 0;
608    font-size: 15px;
609    opacity: 0.9;
610}
611.fn-mobile-sub-all a {
612    color: var(--color-primary-500);
613    font-weight: 600;
614}
615
616/* Mobile language switcher */
617.fn-mobile-lang {
618    display: flex;
619    gap: 8px;
620    justify-content: center;
621    margin-top: 16px;
622    padding-top: 16px;
623    border-top: 1px solid var(--color-border-light);
624}
625.fn-mobile-lang a {
626    display: inline-block;
627    padding: 8px 16px;
628    border-radius: 8px;
629    text-decoration: none;
630    color: var(--color-text-secondary);
631    font-weight: 500;
632    font-size: 14px;
633    border: 1px solid var(--color-border-default);
634    transition: all 0.15s;
635}
636.fn-mobile-lang a.active {
637    background: var(--color-primary-500);
638    color: var(--color-text-inverse);
639    border-color: var(--color-primary-500);
640}
641.fn-mobile-lang a:hover:not(.active) {
642    background: var(--color-neutral-50);
643    border-color: var(--color-gray-200);
644}
645
646/* ── Responsive ── */
647@media (max-width: 767px) {
648    .fn-wrapper { padding: 16px; }
649    .fn-bar { padding: 12px 20px; }
650    .fn-bar .fn-logo img { height: 32px; }
651    .fn-nav, .fn-lang, .fn-login { display: none; }
652    .fn-burger { display: inline-flex; }
653}
654@media (min-width: 768px) {
655    .fn-wrapper { padding: 16px 32px; }
656    .fn-mobile { display: none !important; }
657}
658</style>
659
660<!-- Floating Navbar -->
661<nav class="fn-wrapper" aria-label="Hauptnavigation">
662    <div class="fn-bar">
663        <a href="/" class="fn-logo" aria-label="ocd&amp;me Startseite">
664                            <img src="/assets/images/logo/logo.svg" alt="ocd&amp;me Logo">
665                    </a>
666
667                <ul class="fn-nav">
668                                    <li><a href="/">Home</a></li>
669                                                <li><a href="/wissen/">Wissen</a></li>
670                                                <li><a href="/zwangsarten/">Zwangsarten</a></li>
671                                                <li><a href="/test/">Selbsttests</a></li>
672                                                            <li class="fn-has-sub">
673                <a href="/therapeuten/">Therapeuten<svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5z"/></svg></a>
674                                <div class="fn-sub fn-sub--cities">
675                    <div class="fn-sub-head">
676                        <span class="fn-sub-eyebrow">Nach Stadt</span>
677                        <a href="/therapeuten/" class="fn-sub-all">Alle ansehen
678                            <svg viewBox="0 0 24 24" width="12" height="12" aria-hidden="true" fill="currentColor"><path d="M8.5 5l7 7-7 7z"/></svg>
679                        </a>
680                    </div>
681                    <ul class="fn-sub-grid">
682                                                <li><a href="/therapeuten/bielefeld/">Bielefeld</a></li>
683                                                <li><a href="/therapeuten/bochum/">Bochum</a></li>
684                                                <li><a href="/therapeuten/bonn/">Bonn</a></li>
685                                                <li><a href="/therapeuten/dortmund/">Dortmund</a></li>
686                                                <li><a href="/therapeuten/duisburg/">Duisburg</a></li>
687                                                <li><a href="/therapeuten/duesseldorf/">Düsseldorf</a></li>
688                                                <li><a href="/therapeuten/essen/">Essen</a></li>
689                                                <li><a href="/therapeuten/hamburg/">Hamburg</a></li>
690                                                <li><a href="/therapeuten/koeln/">Köln</a></li>
691                                                <li><a href="/therapeuten/muenster/">Münster</a></li>
692                                                <li><a href="/therapeuten/stuttgart/">Stuttgart</a></li>
693                                                <li><a href="/therapeuten/wuppertal/">Wuppertal</a></li>
694                                            </ul>
695                </div>
696                            </li>
697                                </ul>
698        
699                <a href="https://app.ocdandme.com/login" class="fn-login">Login</a>
700        
701        <button class="fn-burger" id="fn-menu-btn" type="button" aria-label="Menü öffnen" aria-expanded="false" aria-controls="fn-mobile-menu">
702            <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
702<path stroke-linecap="round" stroke-linejoin="round" d="M4 6h16M4 12h16M4 18h16"/></svg>
703        </button>
704    </div>
705</nav>
706
707<!-- Mobile Menu Overlay -->
708<div id="fn-mobile-menu" class="fn-mobile" role="dialog" aria-modal="true" aria-label="Navigation">
709    <div class="fn-mobile-backdrop" id="fn-mobile-backdrop"></div>
710    <div class="fn-mobile-card">
711        <div class="fn-mobile-header">
712            <a href="/" class="fn-logo" aria-label="ocd&amp;me Startseite">
713                <img src="/assets/images/logo/logo.svg" alt="ocd&amp;me Logo">
714            </a>
715            <button class="fn-mobile-close" id="fn-menu-close" type="button" aria-label="Menü schließen">
716                <svg fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
717            </button>
718        </div>
719        <ul class="fn-mobile-nav">
720                                                            <li><a href="/">Home</a></li>
721                                                                <li><a href="/wissen/">Wissen</a></li>
722                                                                <li><a href="/zwangsarten/">Zwangsarten</a></li>
723                                                                <li><a href="/test/">Selbsttests</a></li>
724                                                                <li class="fn-mobile-group">
725                    <div class="fn-mobile-group-head">
726                        <a href="/therapeuten/">Therapeuten</a>
727                        <button type="button" class="fn-mobile-toggle" aria-expanded="false" aria-label="Therapeuten aufklappen">
728                            <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M7 10l5 5 5-5z"/></svg>
729                        </button>
730                    </div>
731                    <div class="fn-mobile-sublist">
732                        <ul class="fn-mobile-subgrid">
733                                                        <li><a href="/therapeuten/bielefeld/">Bielefeld</a></li>
734                                                        <li><a href="/therapeuten/bochum/">Bochum</a></li>
735                                                        <li><a href="/therapeuten/bonn/">Bonn</a></li>
736                                                        <li><a href="/therapeuten/dortmund/">Dortmund</a></li>
737                                                        <li><a href="/therapeuten/duisburg/">Duisburg</a></li>
738                                                        <li><a href="/therapeuten/duesseldorf/">Düsseldorf</a></li>
739                                                        <li><a href="/therapeuten/essen/">Essen</a></li>
740                                                        <li><a href="/therapeuten/hamburg/">Hamburg</a></li>
741                                                        <li><a href="/therapeuten/koeln/">Köln</a></li>
742                                                        <li><a href="/therapeuten/muenster/">Münster</a></li>
743                                                        <li><a href="/therapeuten/stuttgart/">Stuttgart</a></li>
744                                                        <li><a href="/therapeuten/wuppertal/">Wuppertal</a></li>
745                                                        <li class="fn-mobile-sub-all"><a href="/therapeuten/">Alle ansehen →</a></li>
746                        </ul>
747                    </div>
748                </li>
749                                                        <li class="fn-mobile-separator"><a href="https://app.ocdandme.com/login">Login</a></li>
750        </ul>
751
752            </div>
753</div>
754
755<script nonce="94573f3eac17a88549eb6449e61b2bc3">
756(function(){
757    var b=document.getElementById('fn-menu-btn'),m=document.getElementById('fn-mobile-menu'),
758        c=document.getElementById('fn-menu-close'),o=document.getElementById('fn-mobile-backdrop');
759    if(!b||!m)return;
760    function open(){m.classList.add('is-open');b.setAttribute('aria-expanded','true');document.body.style.overflow='hidden';}
761    function shut(){m.classList.remove('is-open');b.setAttribute('aria-expanded','false');document.body.style.overflow='';}
762    b.addEventListener('click',open);
763    if(c)c.addEventListener('click',shut);
764    if(o)o.addEventListener('click',shut);
765    m.querySelectorAll('a').forEach(function(a){a.addEventListener('click',shut);});
766    // Aufklappbare Gruppen (Städte-Accordion) umschalten
767    m.querySelectorAll('.fn-mobile-toggle').forEach(function(t){
768        t.addEventListener('click',function(){
769            var g=t.closest('.fn-mobile-group'),open=g.classList.toggle('is-open');
770            t.setAttribute('aria-expanded',open?'true':'false');
771        });
772    });
773})();
774</script>
774
775
776
777    <style>
778        /* Local token: lavender text has no DS equivalent */
779        :root {
780            --color-accent-lavender-text: #3b4f8a;
781            /* Tints: Tailwind kann den /10-Modifier nicht auf var()-Hexwerte
782               anwenden, deshalb liegen die 10%-Toene hier als eigene Tokens. */
783            --tint-primary: color-mix(in srgb, var(--color-primary-500) 10%, transparent);
784            --tint-teal: color-mix(in srgb, var(--color-accent-teal-text) 10%, transparent);
785            --tint-lavender: color-mix(in srgb, var(--color-accent-lavender-text) 10%, transparent);
786            --ghost-primary: color-mix(in srgb, var(--color-primary-500) 28%, transparent);
787            --ghost-teal: color-mix(in srgb, var(--color-accent-teal-text) 28%, transparent);
788            /* AA-sicherer Muted-Ton (DS-Wert #9ca3af faellt unter 4.5:1) */
789            --color-text-muted: #5c6470;
790        }
791
792        body {
793            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
794            background-color: var(--color-bg-surface);
795            color: var(--color-text-primary);
796        }
797        .btn-primary {
798            background-color: var(--color-primary-500);
799            color: white;
800            border-radius: 9999px;
801            padding: 0.875rem 2rem;
802            font-weight: 600;
803            font-size: 1rem;
804            transition: background-color 0.3s, transform 0.1s;
805            display: inline-flex;
806            align-items: center;
807            justify-content: center;
808            text-decoration: none;
809            border: none;
810            cursor: pointer;
811        }
812        .btn-primary:hover {
813            background-color: var(--color-primary-600);
814            color: white;
815            text-decoration: none;
816        }
817        .btn-primary:active {
818            transform: scale(0.98);
819        }
820        .btn-primary:focus-visible {
821            outline: 2px solid var(--color-primary-500);
822            outline-offset: 2px;
823        }
824        .badge {
825            background-color: var(--color-neutral-warm-150);
826            color: var(--color-primary-500);
827            padding: 0.375rem 0.75rem;
828            border-radius: 9999px;
829            font-size: 0.75rem;
830            font-weight: 600;
831            text-transform: uppercase;
832            letter-spacing: 0.05em;
833            display: inline-block;
834            margin-bottom: 0.25rem;
835        }
836        /* Ersparnis-Pille, gleiches Muster wie auf der Register-Seite der App,
837           hier mit den Website-Tokens statt dem App-Gruen */
838        .save-pill {
839            display: inline-flex;
840            align-items: center;
841            gap: 0.25rem;
842            border: 1px solid var(--color-primary-500);
843            color: var(--color-primary-500);
844            border-radius: 999px;
845            font-size: 0.75rem;
846            font-weight: 600;
847            line-height: 1.4;
848            padding: 0.125rem 0.5rem;
849            white-space: nowrap;
850        }
851        /* CTA-Reihe im Hero: Button und App-Store-Badge auf gleicher Hoehe */
852        .hero-cta-row .btn-primary,
853        .hero-cta-row .app-store-badge {
854            height: 3.5rem;
855        }
856        .hero-cta-row .btn-primary {
857            padding-top: 0;
858            padding-bottom: 0;
859        }
860        .hero-cta-row .app-store-badge {
861            width: auto;
862            display: block;
863        }
864        /* Subtyp-Chip-Links */
865        .chip-link {
866            transition: box-shadow 0.2s, transform 0.2s;
867        }
868        @media (hover: hover) and (pointer: fine) {
869            .chip-link:hover {
870                box-shadow: 0 6px 18px rgba(17, 24, 39, 0.08);
871                transform: translateY(-2px);
872            }
873        }
874        .chip-link:active {
875            transform: translateY(0) scale(0.99);
876        }
877        .chip-link:focus-visible {
878            outline: 2px solid var(--color-primary-500);
879            outline-offset: 2px;
880        }
881        /* FAQ with native details/summary */
882        /* Padding liegt auf dem summary, nicht auf dem details: so klappt die
883           ganze Zeile auf, nicht nur Text und Plus-Zeichen. */
884        .faq-item {
885            padding: 0;
886        }
887        .faq-item summary {
888            list-style: none;
889            cursor: pointer;
890            padding: var(--space-6, 1.5rem);
891            border-radius: var(--radius-2xl, 1rem);
892            user-select: none;
893            -webkit-tap-highlight-color: transparent;
894            transition: background-color 160ms cubic-bezier(0.23, 1, 0.32, 1);
895        }
896        @media (hover: hover) and (pointer: fine) {
897            .faq-item:not([open]) summary:hover {
898                background-color: var(--color-neutral-warm-150);
899            }
900        }
901        .faq-item summary:active {
902            background-color: var(--color-neutral-warm-200);
903        }
904        /* Oeffnen/Schliessen animieren, wo der Browser es kann.
905           Ohne ::details-content-Support bleibt das bisherige Verhalten. */
906        @supports selector(details::details-content) {
907            :root { interpolate-size: allow-keywords; }
908            .faq-item::details-content {
909                block-size: 0;
910                overflow: hidden;
911                transition: block-size 220ms cubic-bezier(0.23, 1, 0.32, 1), content-visibility 220ms allow-discrete;
912            }
913            .faq-item[open]::details-content {
914                block-size: auto;
915            }
916        }
917        .faq-item summary::-webkit-details-marker {
918            display: none;
919        }
920        .faq-item summary::after {
921            content: '+';
922            font-size: 1.25rem;
923            font-weight: 300;
924            color: var(--color-text-muted);
925            flex-shrink: 0;
926            transition: transform 0.2s ease;
927        }
928        .faq-item[open] summary::after {
929            content: '\2212';
930        }
931        .faq-item[open] {
932            background-color: white;
933            border: 1px solid var(--color-border-default);
934            box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
935        }
936        .faq-item[open] summary {
937            font-weight: 700;
938        }
939        .faq-item:not([open]) {
940            background-color: var(--color-neutral-100);
941        }
942        .faq-item summary:focus-visible {
943            outline: 2px solid var(--color-primary-500);
944            outline-offset: 2px;
945            border-radius: 4px;
946        }
947        /* Nav inside hero box */
948        .fn-wrapper {
949            position: relative;
950            z-index: 100;
951            margin-bottom: 0;
952        }
953        .hero-box {
954            margin-top: -76px;
955            padding-top: 76px;
956        }
957        @media (min-width: 768px) {
958            .hero-box {
959                margin-top: -80px;
960                padding-top: 80px;
961            }
962        }
963        /* Smooth scroll */
964        html {
965            scroll-behavior: smooth;
966        }
967        /* Arbeitsblatt preview */
968        .arbeitsblatt-preview {
969            border-radius: 12px;
970            overflow: hidden;
971            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
972            background: var(--color-bg-surface);
973            transition: transform 0.2s, box-shadow 0.2s;
974        }
975        @media (hover: hover) and (pointer: fine) {
976            .arbeitsblatt-preview:hover {
977                transform: translateY(-4px);
978                box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
979            }
980        }
981        .arbeitsblatt-preview img {
982            display: block;
983            width: 100%;
984            height: auto;
985        }
986        /* iPhone mockup */
987        .iphone-frame {
988            position: relative;
989            width: 280px;
990            margin: 0 auto;
991            background: #111;
992            border-radius: 46px;
993            padding: 12px;
994            box-shadow:
995                inset 0 0 0 1px rgba(255, 255, 255, 0.1),
996                0 30px 60px -15px rgba(0, 0, 0, 0.4),
997                0 0 40px rgba(0, 0, 0, 0.08);
998        }
999        .iphone-notch { display: none; }
1000        .iphone-screen {
1001            position: relative;
1002            border-radius: 34px;
1003            overflow: hidden;
1004            background: var(--color-bg-surface);
1005            padding-top: 48px;
1006            padding-bottom: 24px;
1007        }
1008        .iphone-screen img {
1009            display: block;
1010            width: 100%;
1011            height: auto;
1012            margin: 0;
1013        }
1014        .iphone-screen::after {
1015            content: '';
1016            position: absolute;
1017            top: 12px;
1018            left: 50%;
1019            transform: translateX(-50%);
1020            width: 90px;
1021            height: 28px;
1022            background: #000;
1023            border-radius: 14px;
1024            z-index: 5;
1025        }
1026        .iphone-home {
1027            position: absolute;
1028            bottom: 20px;
1029            left: 50%;
1030            transform: translateX(-50%);
1031            width: 100px;
1032            height: 4px;
1033            background: #000;
1034            border-radius: 2px;
1035            z-index: 10;
1036        }
1037        .iphone-frame::before {
1038            content: '';
1039            position: absolute;
1040            right: -2px;
1041            top: 110px;
1042            width: 2px;
1043            height: 50px;
1044            background: #333;
1045            border-radius: 0 2px 2px 0;
1046            z-index: -1;
1047        }
1048        .iphone-frame::after {
1049            content: '';
1050            position: absolute;
1051            left: -2px;
1052            top: 90px;
1053            width: 2px;
1054            height: 25px;
1055            background: #333;
1056            border-radius: 2px 0 0 2px;
1057            box-shadow: 0 45px 0 #333, 0 95px 0 #333;
1058            z-index: -1;
1059        }
1060        .slide-caption {
1061            text-align: center;
1062            padding: 32px 4px 0;
1063        }
1064        .slide-caption .caption-title {
1065            font-size: 0.8125rem;
1066            font-weight: 600;
1067            color: var(--color-primary-500);
1068            text-transform: uppercase;
1069            letter-spacing: 0.04em;
1070        }
1071        .slide-caption .caption-desc {
1072            font-size: 0.8125rem;
1073            color: var(--color-text-muted);
1074            margin-top: 4px;
1075        }
1076        /* Carousel */
1077        .carousel-slide {
1078            transition: opacity 0.3s ease;
1079        }
1080        .carousel-slide.hidden {
1081            display: none;
1082        }
1083        .carousel-btn {
1084            width: 44px;
1085            height: 44px;
1086            border-radius: 50%;
1087            background: transparent;
1088            border: 1.5px solid var(--color-gray-200);
1089            color: var(--color-text-tertiary);
1090            display: flex;
1091            align-items: center;
1092            justify-content: center;
1093            cursor: pointer;
1094            transition: border-color 0.2s, color 0.2s;
1095            flex-shrink: 0;
1096        }
1097        @media (hover: hover) and (pointer: fine) {
1098            .carousel-btn:hover {
1099                border-color: var(--color-primary-500);
1100                color: var(--color-primary-500);
1101            }
1102        }
1103        .carousel-btn:active {
1104            transform: scale(0.96);
1105        }
1106        .carousel-btn:focus-visible {
1107            outline: 2px solid var(--color-primary-500);
1108            outline-offset: 2px;
1109        }
1110        /* Punkt bleibt optisch 10px, die Trefferflaeche ist 24px gross */
1111        .carousel-dot {
1112            width: 24px;
1113            height: 24px;
1114            border: none;
1115            background: none;
1116            padding: 0;
1117            cursor: pointer;
1118            display: flex;
1119            align-items: center;
1120            justify-content: center;
1121        }
1122        .carousel-dot::before {
1123            content: '';
1124            width: 10px;
1125            height: 10px;
1126            border-radius: 50%;
1127            background: var(--color-gray-200);
1128            transition: background 0.2s, transform 0.2s;
1129        }
1130        @media (hover: hover) and (pointer: fine) {
1131            .carousel-dot:hover::before {
1132                background: var(--color-text-muted);
1133            }
1134        }
1135        .carousel-dot.active::before {
1136            background: var(--color-primary-500);
1137            transform: scale(1.2);
1138        }
1139        .carousel-dot:focus-visible {
1140            outline: 2px solid var(--color-primary-500);
1141            outline-offset: 2px;
1142            border-radius: 50%;
1143        }
1144        /* Hero-Vorstellungsvideo (9:16) */
1145        .hero-video-play { cursor: pointer; transition: opacity 0.25s ease; }
1146        .hero-video-play-circle { transition: transform 0.2s ease, background 0.2s ease; }
1147        @media (hover: hover) and (pointer: fine) {
1148            .hero-video-play:hover .hero-video-play-circle { transform: scale(1.06); background: rgba(0, 0, 0, 0.6); }
1149        }
1150        .hero-video-play:active .hero-video-play-circle { transform: scale(0.97); }
1151        .hero-video-play:focus-visible { outline: 2px solid #fff; outline-offset: -4px; border-radius: 1.75rem; }
1152        .hero-video.is-playing .hero-video-play { opacity: 0; pointer-events: none; }
1153        /* Auf Touch bleibt der Hover-Zustand nach dem Tap sonst 
1153kleben */
1154        @media (hover: none) {
1155            .hover\:shadow-md:hover { box-shadow: none; }
1156        }
1157        @media (prefers-reduced-motion: reduce) {
1158            html { scroll-behavior: auto; }
1159            .carousel-slide,
1160            .arbeitsblatt-preview,
1161            .chip-link,
1162            .carousel-btn,
1163            .carousel-dot::before,
1164            .btn-primary,
1165            .hero-video-play,
1166            .hero-video-play-circle { transition: none; }
1167            .faq-item::details-content { transition: none; }
1168        }
1169    </style>
1170
1171    <!-- =============================================
1172         HERO SECTION
1173         ============================================= -->
1174    <div class="bg-white px-4 md:px-6 pt-4 md:pt-6">
1175        <section class="hero-box relative min-h-[85vh] md:min-h-[80vh] flex flex-col bg-cover bg-center rounded-[2.5rem] overflow-hidden bg-[var(--color-neutral-warm-300)]" aria-label="App-Überblick">
1176
1177            <!-- Hero Content -->
1178            <div class="flex-grow w-full max-w-6xl mx-auto flex flex-col lg:flex-row items-center justify-center gap-10 lg:gap-20 px-6 pt-2 md:pt-6 pb-10 relative z-0">
1179
1180                <!-- Text -->
1181                <div class="w-full lg:max-w-[40rem] text-center">
1182                    <span class="badge bg-white/80 backdrop-blur-sm text-[var(--color-primary-500)] py-1.5 px-3 text-[0.7rem]">Selbsthilfe-App bei Zwangsgedanken</span>
1183                    <h1 class="text-[2rem] sm:text-4xl md:text-5xl font-bold tracking-tight mt-4 mb-5 text-[var(--color-primary-900)] leading-[1.1] text-balance">Nicht allein mit deinen<br class="hidden lg:block"> Zwangsgedanken.</h1>
1184                    <p class="text-base sm:text-lg lg:text-xl text-[var(--color-text-secondary)] max-w-xl mx-auto leading-relaxed">Verstehe den Kreislauf hinter den Gedanken und arbeite mit konkreten, angeleiteten Übungen Schritt für Schritt daran, vom <strong>Muster-Tagebuch bis zu Übungen nach wissenschaftlich fundiertem Prinzip.</strong> Sofort startbar, in deinem Tempo, ganz für&nbsp;dich.</p>
1185
1186                    <!-- CTA + App Store Badge nebeneinander -->
1187                    <div class="hero-cta-row flex flex-wrap items-center justify-center gap-x-5 gap-y-4 mt-8">
1188                        <a href="https://app.ocdandme.com/register" data-cta="hero" class="btn-primary text-lg px-10 whitespace-nowrap">Jetzt starten</a>
1189                        <a href="https://apps.apple.com/de/app/ocd-me/id6792472196" data-appstore="hero" target="_blank" rel="noopener noreferrer" class="inline-flex" aria-label="ocd&me im App Store laden">
1190                            <img src="/assets/images/badges/app-store-badge-de.svg" alt="Laden im App Store" width="120" height="40" class="app-store-badge">
1191                        </a>
1192                    </div>
1193
1194                    <!-- Risiko-Umkehr direkt am CTA -->
1195                    <div class="flex justify-center items-center gap-2 mt-4 text-sm text-[var(--color-text-secondary)]">
1196                        <svg class="hidden sm:block w-4 h-4 text-[var(--color-accent-teal-text)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.7" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path></svg>
1197                        <span class="text-center"><strong class="font-semibold text-[var(--color-text-primary)]">Monatlich kündbar</strong><span class="hidden sm:inline"> · </span><br class="sm:hidden">
1197jederzeit zum Monatsende</span>
1198                    </div>
1199                    <p class="text-sm text-[var(--color-text-secondary)] mt-1.5">24,90&nbsp;€ / Monat</p>
1200
1201                    <!-- Credibility-Row -->
1202                    <div class="flex justify-center mt-7">
1203                        <ul class="inline-flex flex-col sm:flex-row sm:flex-wrap items-start sm:items-center justify-center gap-2.5 sm:gap-x-6">
1204                            <li class="flex items-center gap-2.5 text-sm font-medium text-[var(--color-text-primary)]">
1205                                <span class="w-5 h-5 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0"><svg class="w-3 h-3 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg></span>
1206                                Mit Betroffenen entwickelt
1207                            </li>
1208                            <li class="flex items-center gap-2.5 text-sm font-medium text-[var(--color-text-primary)]">
1209                                <span class="w-5 h-5 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0"><svg class="w-3 h-3 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg></span>
1210                                Wissenschaftlich fundiert
1211                            </li>
1212                            <li class="flex items-center gap-2.5 text-sm font-medium text-[var(--color-text-primary)]">
1213                                <span class="w-5 h-5 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0"><svg class="w-3 h-3 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg></span>
1214                                Als Web- & iPhone-App
1215                            </li>
1216                        </ul>
1217                    </div>
1218                </div>
1219
1220                <!-- 9:16 Vorstellungsvideo -->
1221                <div class="w-full max-w-[300px] sm:max-w-[340px] flex-shrink-0">
1222                    <div class="hero-video relative aspect-[9/16] rounded-[1.75rem] overflow-hidden bg-black shadow-2xl ring-1 ring-black/5">
1223                        <video id="hero-welcome-video" class="absolute inset-0 w-full h-full object-cover" playsinline webkit-playsinline preload="none" poster="/assets/video/welcome-poster.jpg">
1224                            <source src="/assets/video/welcome.mp4" type="video/mp4">
1225                        </video>
1226                        <button type="button" class="hero-video-play absolute inset-0 flex items-center justify-center text-white" aria-label="Vorstellungsvideo abspielen">
1227                            <span class="hero-video-play-circle w-16 h-16 rounded-full bg-black/45 backdrop-blur-sm flex items-center justify-center">
1228                                <svg class="w-7 h-7 ml-1" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
1229                            </span>
1230                        </button>
1231                    </div>
1232                </div>
1233
1234            </div>
1235        </section>
1236    </div>
1237
1238    <main id="main-content" style="background-color: var(--color-bg-page);">
1239
1240    <!-- =============================================
1241         TRUST BAR (4 Werkzeuge)
1242         ============================================= -->
1243    <section class="py-12 px-4 bg-white" aria-label="Deine Werkzeuge im Überblick">
1244        <div class="max-w-5xl mx-auto grid grid-cols-2 md:grid-cols-4 gap-6 text-center">
1245            <div class="flex flex-col items-center gap-2">
1246                <div class="w-12 h-12 rounded-full bg-[var(--color-bg-warm)] flex items-center justify-center">
1247                    <svg class="w-6 h-6 text-[var(--color-primary-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
1248                </div>
1249                <div class="text-sm font-bold text-[var(--color-text-primary)]">Muster-Tagebuch</div>
1250                <div class="text-xs text-[var(--color-text-tertiary)]">Auslöser & Reaktionen festhalten</div>
1251            </div>
1252            <div class="flex flex-col items-center gap-2">
1253                <div class="w-12 h-12 rounded-full bg-[var(--color-bg-warm)] flex items-center justify-center">
1254                    <svg class="w-6 h-6 text-[var(--color-primary-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
1255                </div>
1256                <div class="text-sm font-bold text-[var(--color-text-primary)]">Angeleitete Übungen</div>
1257                <div class="text-xs text-[var(--color-text-tertiary)]">Wissenschaftlich fundiert</div>
1258            </div>
1259            <div class="flex flex-col items-center gap-2">
1260                <div class="w-12 h-12 rounded-full bg-[var(--color-bg-warm)] flex items-center justify-center">
1261                    <svg class="w-6 h-6 text-[var(--color-primary-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
1262                </div>
1263                <div class="text-sm font-bold text-[var(--color-text-primary)]">Fortschritt sehen</div>
1264                <div class="text-xs text-[var(--color-text-tertiary)]">Dein Verlauf über Wochen</div>
1265            </div>
1266            <div class="flex flex-col items-center gap-2">
1267                <div class="w-12 h-12 rounded-full bg-[#e8f0eb] flex items-center justify-center">
1268                    <svg class="w-6 h-6 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
1269                </div>
1270                <div class="text-sm font-bold text-[var(--color-text-primary)]">Privat & verschlüsselt</div>
1271                <div class="text-xs text-[var(--color-text-tertiary)]">Deine Daten bleiben bei dir</div>
1272            </div>
1273        </div>
1274        <p class="text-center text-xs text-[var(--color-text-muted)] mt-8 max-w-xl mx-auto">
1274Strukturierte Selbsthilfe, kein Ersatz für eine Psychotherapie.</p>
1275    </section>
1276
1277    <!-- =============================================
1278         PROBLEM VALIDATION (Empathie)
1279         ============================================= -->
1280    <section class="py-24 px-4 bg-white" aria-label="Ausgangssituation">
1281        <div class="max-w-2xl mx-auto">
1282            <div class="text-center">
1283                <span class="badge">Wir verstehen dich</span>
1284                <h2 class="text-3xl md:text-4xl font-semibold leading-tight text-[var(--color-text-primary)] mt-4">
1285                    Du weißt, wie es sich anfühlt, wenn die Gedanken nicht aufhören.
1286                </h2>
1287                <p class="text-lg text-[var(--color-text-secondary)] leading-relaxed mt-5">
1288                    Und du erkennst dich wahrscheinlich in mehr als einem dieser Sätze wieder:
1289                </p>
1290            </div>
1291
1292            <!-- Wiedererkennungs-Momente -->
1293            <ul class="mt-8 space-y-3 text-left">
1294                <li class="flex items-start gap-3.5 bg-[var(--color-bg-warm)] rounded-2xl px-5 py-4">
1295                    <span class="mt-2 w-2 h-2 rounded-full bg-[var(--color-accent-teal-text)] flex-shrink-0" aria-hidden="true"></span>
1296                    <p class="text-base md:text-lg text-[var(--color-text-primary)] leading-snug">Du prüfst lieber noch ein zweites Mal nach, <span class="text-[var(--color-text-secondary)]">nur um ganz sicherzugehen.</span></p>
1297                </li>
1298                <li class="flex items-start gap-3.5 bg-[var(--color-bg-warm)] rounded-2xl px-5 py-4">
1299                    <span class="mt-2 w-2 h-2 rounded-full bg-[var(--color-accent-teal-text)] flex-shrink-0" aria-hidden="true"></span>
1300                    <p class="text-base md:text-lg text-[var(--color-text-primary)] leading-snug">Du suchst nach Bestätigung, <span class="text-[var(--color-text-secondary)]">und die Erleichterung hält nie lange.</span></p>
1301                </li>
1302                <li class="flex items-start gap-3.5 bg-[var(--color-bg-warm)] rounded-2xl px-5 py-4">
1303                    <span class="mt-2 w-2 h-2 rounded-full bg-[var(--color-accent-teal-text)] flex-shrink-0" aria-hidden="true"></span>
1304                    <p class="text-base md:text-lg text-[var(--color-text-primary)] leading-snug">Du grübelst dich durch den Tag, <span class="text-[var(--color-text-secondary)]">und kommst trotzdem nicht zur Ruhe.</span></p>
1305                </li>
1306                <li class="flex items-start gap-3.5 bg-[var(--color-bg-warm)] rounded-2xl px-5 py-4">
1307                    <span class="mt-2 w-2 h-2 rounded-full bg-[var(--color-accent-teal-text)] flex-shrink-0" aria-hidden="true"></span>
1308                    <p class="text-base md:text-lg text-[var(--color-text-primary)] leading-snug">Nach außen funktionierst du, <span class="text-[var(--color-text-secondary)]">während innen längst alles auf Hochtouren läuft.</span></p>
1309                </li>
1310            </ul>
1311
1312            <!-- Wendung / Entlastung -->
1313            <p class="text-xl md:text-2xl font-medium leading-snug text-[var(--color-text-primary)] text-center mt-10">
1314                Das ist keine Schwäche und kein Kontrollverlust. Es ist ein Muster, das sich erschöpfend anfühlt und das du verstehen und Schritt für Schritt durchbrechen kannst.
1315            </p>
1316            <p class="text-base text-[var(--color-text-secondary)] leading-relaxed text-center mt-4 max-w-xl mx-auto">
1317                Vielleicht wartest du seit Monaten auf einen Therapieplatz. Was dir bis dahin fehlt, ist kein weiterer Ratgeber, sondern <span class="font-semibold text-[var(--color-text-primary)]">konkrete Werkzeuge, mit denen du heute anfangen kannst.</span>
1318            </p>
1319        </div>
1320    </section>
1321
1322    <!-- =============================================
1323         DER ZWANGSKREISLAUF (Psychoedukation)
1324         ============================================= -->
1325    <section class="py-24 px-4 bg-[var(--color-bg-page)]" aria-label="Der Zwangskreislauf">
1326        <div class="max-w-6xl mx-auto text-center mb-16">
1327            <span class="badge">Was im Kopf passiert</span>
1328            <h2 class="text-4xl md:text-5xl font-bold mt-1.5">Der Zwangskreislauf <br>und wo du ihn unterbrichst.</h2>
1329            <p class="text-gray-600 max-w-2xl mx-auto mt-4">Zwangsgedanken folgen fast immer demselben Muster. Wer das Muster kennt, kann anfangen, anders damit umzugehen.</p>
1330        </div>
1331
1332        <div class="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
1333            <div class="bg-[var(--color-bg-warm)] p-8 rounded-3xl flex flex-col h-full">
1334                <div class="mb-6">
1335                    <svg class="w-8 h-8 text-[var(--color-primary-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
1336                </div>
1337                <h3 class="text-xl font-bold mb-2">Der Gedanke kommt.</h3>
1338                <p class="text-gray-600 text-sm">Aufdringlich, ungewollt, oft genau gegen das, was dir wichtig ist. Er sagt nichts darüber aus, wer du bist.</p>
1339            </div>
1340
1341            <div class="bg-[var(--color-accent-teal-bg)] p-8 rounded-3xl flex flex-col h-full">
1342                <div class="mb-6">
1343                    <svg class="w-8 h-8 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
1344                </div>
1345                <h3 class="text-xl font-bold mb-2">Die Angst steigt.</h3>
1346                <p class="text-gray-600 text-sm">Der Gedanke fühlt sich plötzlich bedeutsam und gefährlich an. Dein Kopf verlangt nach Gewissheit, sofort.</p>
1347            </div>
1348
1349            <div class="bg-[var(--color-accent-lavender-bg)] p-8 rounded-3xl flex flex-col h-full">
1350                <div class="mb-6">
1351                    <svg class="w-8 h-8 text-[var(--color-accent-lavender-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path></svg>
1352                </div>
1353                <h3 class="text-xl font-bold mb-2">Du reagierst.</h3>
1354                <p class="text-gray-600 text-sm">Vermeiden, kontrollieren, rückversichern, durchspielen. Kurz wird es leichter, und genau diese Erleichterung hält den Kreislauf am Laufen. Hier setzen deine Übungen an.</p>
1355            </div>
1356        </div>
1357
1358        <p class="text-center text-gray-600 max-w-3xl mx-auto mt-10 leading-relaxed">Was den Kreislauf mit der Zeit schwächt, ist das Gegenteil von Wegrennen: dem Unbehagen Raum geben, ohne sofort zu reagieren, in kleinen, machbaren&nbsp;Schritten.</p>
1359    </section>
1360
1361    <!-- =============================================
1362         FORMEN VON ZWANGSGEDANKEN (Subtypen)
1363         ============================================= -->
1364    <section class="py-24 px-4 bg-white" aria-label="Formen von Zwangsgedanken">
1365        <div class="max-w-5xl mx-auto text-center mb-10">
1366            <span class="badge">Du bist nicht falsch hier</span>
1367            <h2 class="text-4xl md:text-5xl font-bold mt-1.5 mb-5">Zwänge zeigen sich<br class="sm:hidden"> in vielen Formen.</h2>
1368            <p class="text-gray-600 max-w-2xl mx-auto mb-4 leading-relaxed">Egal, um welche Inhalte deine Gedanken kreisen: der Mechanismus dahinter ist derselbe. Du brauchst kein Etikett, nur einen Anfang.</p>
1369            <p class="text-gray-600 text-sm max-w-2xl mx-auto leading-relaxed">Oft zielen Zwangsgedanken genau auf das, was dir am wichtigsten ist. In den Übungen geht es nicht um Beweise, sondern um einen anderen Umgang damit.</p>
1370        </div>
1371
1372        <div class="max-w-5xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-5">
1373            <a href="/zwangsarten/aggressive-zwangsgedanken/" class="chip-link flex items-center justify-between gap-3 bg-[var(--color-bg-warm)] rounded-2xl px-5 py-4">
1374                <span class="font-semibold text-sm text-[var(--color-text-primary)]">Aggressive Zwangsgedanken</span>
1375                <svg class="w-4 h-4 text-[var(--color-text-muted)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
1376            </a>
1377            <a href="/wissen/sexuelle-zwangsgedanken/" class="chip-link flex items-center justify-between gap-3 bg-[var(--color-accent-teal-bg)] rounded-2xl px-5 py-4">
1378                <span class="font-semibold text-sm text-[var(--color-text-primary)]">Sexuelle Zwangsgedanken</span>
1379                <svg class="w-4 h-4 text-[var(--color-text-muted)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
1380            </a>
1381            <a href="/wissen/religioese-zwangsgedanken/" class="chip-link flex items-center justify-between gap-3 bg-[var(--color-accent-lavender-bg)] rounded-2xl px-5 py-4">
1382                <span class="font-semibold text-sm text-[var(--color-text-primary)]">Religiöse Zwangsgedanken</span>
1383                <svg class="w-4 h-4 text-[var(--color-text-muted)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
1384            </a>
1385            <a href="/wissen/moralische-zwangsgedanken/" class="chip-link flex items-center justify-between gap-3 bg-[var(--color-accent-lavender-bg)] rounded-2xl px-5 py-4">
1386                <span class="font-semibold text-sm text-[var(--color-text-primary)]">Moralische Zwangsgedanken</span>
1387                <svg class="w-4 h-4 text-[var(--color-text-muted)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
1388            </a>
1389            <a href="/zwangsarten/rocd/" class="chip-link flex items-center justify-between gap-3 bg-[var(--color-bg-warm)] rounded-2xl px-5 py-4">
1390                <span class="font-semibold text-sm text-[var(--color-text-primary)]">Beziehungszwänge (ROCD)</span>
1391                <svg class="w-4 h-4 text-[var(--color-text-muted)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
1392            </a>
1393            <a href="/zwangsarten/false-memory-ocd/" class="chip-link flex items-center justify-between gap-3 bg-[var(--color-accent-teal-bg)] rounded-2xl px-5 py-4">
1394                <span class="font-semibold text-sm text-[var(--color-text-primary)]">False-Memory-OCD</span>
1395                <svg class="w-4 h-4 text-[var(--color-text-muted)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
1396            </a>
1397            <a href="/zwangsarten/just-right-ocd/" class="chip-link flex items-center justify-between gap-3 bg-[var(--color-bg-warm)] rounded-2xl px-5 py-4">
1398                <span class="font-semibold text-sm text-[var(--color-text-primary)]">Just-Right-Gefühl</span>
1399                <svg class="w-4 h-4 text-[var(--color-text-muted)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
1400            </a>
1401            <a href="/zwangsarten/waschzwang/" class="chip-link flex items-center justify-between gap-3 bg-[var(--color-accent-teal-bg)] rounded-2xl px-5 py-4">
1402                <span class="font-semibold text-sm text-[var(--color-text-primary)]">Wasch- & Putzzwang</span>
1403                <svg class="w-4 h-4 text-[var(--color-text-muted)] flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path></svg>
1404            </a>
1405            <a href="/wissen/zwangsgedanken/" class="chip-link flex items-center justify-center gap-2 bg-[var(--color-bg-warm)] border border-dashed border-[var(--color-border-default)] rounded-2xl px-5 py-4">
1406                <span class="font-semibold text-sm text-[var(--color-text-secondary)]">… und mehr</span>
1407            </a>
1408        </div>
1409
1410        <div class="max-w-2xl mx-auto text-center mt-12">
1411            <p class="text-gray-600 mb-4">Du musst dich nicht festlegen. Du kannst einfach anfangen zu&nbsp;verstehen.</p>
1412            <a href="https://app.ocdandme.com/register" data-cta="subtypes" class="btn-primary text-base px-8 py-4">Einfach ausprobieren</a>
1413        </div>
1414    </section>
1415
1416    <!-- =============================================
1417         DEINE WERKZEUGE (App-Showcase)
1418         ============================================= -->
1419    <section class="py-24 px-4 bg-[var(--color-bg-page)]" aria-label="Deine Werkzeuge in der App">
1420        <div class="max-w-6xl mx-auto text-center">
1421            <span class="badge">Deine Werkzeuge</span>
1422            <h2 class="text-4xl md:text-5xl font-bold mt-1.5 mb-6">Womit du ab heute<br class="sm:hidden"> arbeitest.</h2>
1423            <p class="text-gray-600 max-w-2xl mx-auto mb-16">ocd&me bündelt die Bausteine, die in der Forschung den größten Unterschied machen, in einer App. Jederzeit verfügbar, jederzeit pausierbar.</p>
1424
1425            <!-- Top row: 2 large cards -->
1426            <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
1427                <div class="bg-[var(--color-bg-warm)] p-10 rounded-3xl text-left">
1428                    <div class="w-12 h-12 rounded-2xl bg-[var(--tint-primary)] flex items-center justify-center mb-6">
1429                        <svg class="w-6 h-6 text-[var(--color-primary-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path></svg>
1430                    </div>
1431                    <h3 class="text-xl font-bold mb-3 text-[var(--color-text-primary)]">Muster dokumentieren</h3>
1432                    <p class="text-sm text-gray-600 leading-relaxed">Dein Muster- und Auslöser-Tagebuch. Halte fest, welcher Gedanke kam, wie stark die Angst war und was du getan hast. So werden aus diffusen Schleifen sichtbare Muster.</p>
1433                </div>
1434
1435                <div class="bg-[var(--color-accent-teal-bg)] p-10 rounded-3xl text-left">
1436                    <div class="w-12 h-12 rounded-2xl bg-[var(--tint-teal)] flex items-center justify-center mb-6">
1437                        <svg class="w-6 h-6 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"></path></svg>
1438                    </div>
1439                    <h3 class="text-xl font-bold mb-3 text-[var(--color-text-primary)]">Angeleitet üben</h3>
1440                    <p class="text-sm text-gray-600 leading-relaxed">Übungen nach wissenschaftlich fundiertem Prinzip mit Timer, Angst-Skala und Reflexion. Du tastest dich Schritt für Schritt heran, statt dich zu überfordern. Du bestimmst das Tempo.</p>
1441                </div>
1442            </div>
1443
1444            <!-- Bottom row: 3 smaller cards -->
1445            <div class="max-w-5xl mx-auto grid grid-cols-1 sm:grid-cols-3 gap-6">
1446                <div class="bg-white p-8 rounded-3xl text-left border border-gray-100">
1447                    <div class="w-10 h-10 rounded-xl bg-[var(--tint-primary)] flex items-center justify-center mb-3">
1448                        <svg class="w-5 h-5 text-[var(--color-primary-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path></svg>
1449                    </div>
1450                    <h3 class="text-base font-bold mb-2 text-[var(--color-text-primary)]">Fortschritt sehen</h3>
1451                    <p class="text-sm text-gray-600 leading-relaxed">Dein Verlauf über Wochen. Du siehst, woran du gearbeitet hast, auch an Tagen, an denen es sich nicht so anfühlt.</p>
1452                </div>
1453
1454                <div class="bg-white p-8 rounded-3xl text-left border border-gray-100">
1455                    <div class="w-10 h-10 rounded-xl bg-[var(--tint-primary)] flex items-center justify-center mb-3">
1456                        <svg class="w-5 h-5 text-[var(--color-primary-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
1457                    </div>
1458                    <h3 class="text-base font-bold mb-2 text-[var(--color-text-primary)]">Verstehen</h3>
1459                    <p class="text-sm text-gray-600 leading-relaxed">Wissens-Module zu Zwängen und allen Subtypen. Damit du verstehst, was in deinem Kopf passiert.</p>
1460                </div>
1461
1462                <div class="bg-white p-8 rounded-3xl text-left border border-gray-100">
1463                    <div class="w-10 h-10 rounded-xl bg-[var(--tint-teal)] flex items-center justify-center mb-3">
1464                        <svg class="w-5 h-5 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"></path></svg>
1465                    </div>
1466                    <h3 class="text-base font-bold mb-2 text-[var(--color-text-primary)]">Alles bleibt bei dir</h3>
1467                    <p class="text-sm text-gray-600 leading-relaxed">Verschlüsselt, DSGVO-konform. Was du festhältst, bleibt bei dir.</p>
1468                </div>
1469            </div>
1470
1471            <p class="text-xs text-gray-600 max-w-2xl mx-auto mt-8 leading-relaxed">Wenn dich deine Gedanken stark belasten oder du dich überfordert fühlst, hol dir bitte zusätzlich professionelle Unterstützung. Diese Übungen ersetzen sie nicht.</p>
1472
1473            <!-- iPhone Mockup Carousel -->
1474            <div class="mt-16" id="app-carousel">
1475                <div>
1476                    <div class="carousel-slide" data-slide="0">
1477                        <div class="iphone-frame">
1478                            <div class="iphone-screen">
1479                                <img src="/assets/images/homepage/app-dashboard.png" alt="App: Dashboard mit Fortschrittsübersicht" loading="lazy" width="1206" height="2212">
1480                            </div>
1481                            <div class="iphone-home"></div>
1482                        </div>
1483                        <div class="slide-caption">
1484                            <p class="caption-title">Dashboard</p>
1485                            <p class="caption-desc">Dein Fortschritt auf einen Blick.</p>
1486                        </div>
1487                    </div>
1488
1489                    <div class="carousel-slide hidden" data-slide="1">
1490                        <div class="iphone-frame">
1491                            <div class="iphone-screen">
1492                                <img src="/assets/images/homepage/app-exposition.png" alt="App: Übungen vorbereiten und starten" loading="lazy" width="1206" height="2212">
1493                            </div>
1494                            <div class="iphone-home"></div>
1495                        </div>
1496                        <div class="slide-caption">
1497                            <p class="caption-title">Übungen</p>
1498                            <p class="caption-desc">Schritt für Schritt vorbereiten und angeleitet durchführen.</p>
1499                        </div>
1500                    </div>
1501
1502                    <div class="carousel-slide hidden" data-slide="2">
1503                        <div class="iphone-frame">
1504                            <div class="iphone-screen">
1505                                <img src="/assets/images/homepage/app-wissen.jpg" alt="App: Wissensmodule über Zwangsarten" loading="lazy" width="1206" height="2212">
1506                            </div>
1507                            <div class="iphone-home"></div>
1508                        </div>
1509                        <div class="slide-caption">
1510                            <p class="caption-title">Wissen</p>
1511                            <p class="caption-desc">Verständlich aufbereitetes Fachwissen zu allen Zwangsarten.</p>
1512                        </div>
1513                    </div>
1514
1515                    <div class="carousel-slide hidden" data-slide="3">
1516                        <div class="iphone-frame">
1517                            <div class="iphone-screen">
1518                                <img src="/assets/images/homepage/app-selbstcheck.png" alt="App: Selbstcheck mit Verlaufstracking" loading="lazy" width="1206" height="2212">
1519                            </div>
1520                            <div class="iphone-home"></div>
1521                        </div>
1522                        <div class="slide-caption">
1523                            <p class="caption-title">Selbstcheck</p>
1524                            <p class="caption-desc">Regelmäßig die eigene Intensität messen und den Verlauf verfolgen.</p>
1525                        </div>
1526                    </div>
1527                </div>
1528
1529                <!-- Navigation -->
1530                <div class="flex items-center justify-center gap-4 mt-8">
1531                    <button class="carousel-btn" aria-label="Vorheriger Slide" id="app-carousel-prev">
1532                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/></svg>
1533                    </button>
1534                    <div class="flex gap-2">
1535                        <button class="carousel-dot active" data-goto="0" aria-label="Slide 1"></button>
1536                        <button class="carousel-dot" data-goto="1" aria-label="Slide 2"></button>
1537                        <button class="carousel-dot" data-goto="2" aria-label="Slide 3"></button>
1538                        <button class="carousel-dot" data-goto="3" aria-label="Slide 4"></button>
1539                    </div>
1540                    <button class="carousel-btn" aria-label="Nächster Slide" id="app-carousel-next">
1541                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
1542                    </button>
1543                </div>
1544
1545                <!-- App Store Hinweis -->
1546                <div class="mt-10 flex flex-col items-center gap-3">
1547                    <p class="text-sm text-[var(--color-text-secondary)]">ocd&me gibt es jetzt auch als App fürs iPhone:</p>
1548                    <a href="https://apps.apple.com/de/app/ocd-me/id6792472196" data-appstore="carousel" target="_blank" rel="noopener noreferrer" class="inline-block" aria-label="ocd&me im App Store laden">
1549                        <img src="/assets/images/badges/app-store-badge-de.svg" alt="Laden im Ap
1549p Store" width="120" height="40" class="h-11 w-auto" loading="lazy">
1550                    </a>
1551                </div>
1552            </div>
1553        </div>
1554    </section>
1555
1556    <!-- =============================================
1557         ÜBUNGEN (Bibliothek)
1558         ============================================= -->
1559    <section class="py-24 px-4 bg-white" aria-label="Übungen in der App">
1560        <div class="max-w-6xl mx-auto">
1561            <div class="text-center mb-16">
1562                <span class="badge">Strukturierte Übungen</span>
1563                <h2 class="text-4xl md:text-5xl font-bold mt-1.5 mb-6">Übungen, die dich <br>Schritt für Schritt begleiten.</h2>
1564                <p class="text-gray-600 max-w-2xl mx-auto">Konkrete Mikro-Übungen für den Alltag, von Achtsamkeit bis Selbstmitgefühl. In deinem Tempo, so oft du willst.</p>
1565            </div>
1566
1567            <div class="max-w-5xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3 sm:gap-5">
1568                <div class="group bg-[var(--color-bg-warm)] p-6 rounded-2xl hover:shadow-md transition-shadow">
1569                    <div class="flex items-start gap-4">
1570                        <div class="w-10 h-10 rounded-xl bg-[var(--tint-primary)] flex items-center justify-center flex-shrink-0 mt-0.5">
1571                            <svg class="w-5 h-5 text-[var(--color-primary-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path></svg>
1572                        </div>
1573                        <div>
1574                            <h3 class="font-bold text-[var(--color-text-primary)] text-sm mb-1">Das achtsame Beobachten</h3>
1575                            <p class="text-xs text-gray-600">Gedanken wahrnehmen, ohne zu&nbsp;reagieren</p>
1576                        </div>
1577                    </div>
1578                </div>
1579
1580                <div class="group bg-[var(--color-bg-warm)] p-6 rounded-2xl hover:shadow-md transition-shadow">
1581                    <div class="flex items-start gap-4">
1582                        <div class="w-10 h-10 rounded-xl bg-[var(--tint-primary)] flex items-center justify-center flex-shrink-0 mt-0.5">
1583                            <svg class="w-5 h-5 text-[var(--color-primary-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4"></path></svg>
1584                        </div>
1585                        <div>
1586                            <h3 class="font-bold text-[var(--color-text-primary)] text-sm mb-1">Die innere Realitätsprüfung</h3>
1587                            <p class="text-xs text-gray-600">Zwangsgedanken einordnen statt&nbsp;grübeln</p>
1588                        </div>
1589                    </div>
1590                </div>
1591
1592                <div class="group bg-[var(--color-accent-teal-bg)] p-6 rounded-2xl hover:shadow-md transition-shadow">
1593                    <div class="flex items-start gap-4">
1594                        <div class="w-10 h-10 rounded-xl bg-[var(--tint-teal)] flex items-center justify-center flex-shrink-0 mt-0.5">
1595                            <svg class="w-5 h-5 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"></path></svg>
1596                        </div>
1597                        <div>
1598                            <h3 class="font-bold text-[var(--color-text-primary)] text-sm mb-1">Selbstmitgefühl üben</h3>
1599                            <p class="text-xs text-gray-600">Freundlicher Umgang mit dir selbst</p>
1600                        </div>
1601                    </div>
1602                </div>
1603
1604                <div class="group bg-[var(--color-accent-teal-bg)] p-6 rounded-2xl hover:shadow-md transition-shadow">
1605                    <div class="flex items-start gap-4">
1606                        <div class="w-10 h-10 rounded-xl bg-[var(--tint-teal)] flex items-center justify-center flex-shrink-0 mt-0.5">
1607                            <svg class="w-5 h-5 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
1608                        </div>
1609                        <div>
1610                            <h3 class="font-bold text-[var(--color-text-primary)] text-sm mb-1">Meine Auslöser erkennen</h3>
1611                            <p class="text-xs text-gray-600">
1611Trigger identifizieren und verstehen</p>
1612                        </div>
1613                    </div>
1614                </div>
1615
1616                <div class="group bg-[var(--color-accent-lavender-bg)] p-6 rounded-2xl hover:shadow-md transition-shadow">
1617                    <div class="flex items-start gap-4">
1618                        <div class="w-10 h-10 rounded-xl bg-[var(--tint-lavender)] flex items-center justify-center flex-shrink-0 mt-0.5">
1619                            <svg class="w-5 h-5 text-[var(--color-accent-lavender-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 3v4M3 5h4M6 17v4m-2-2h4m5-16l2.286 6.857L21 12l-5.714 2.143L13 21l-2.286-6.857L5 12l5.714-2.143L13 3z"></path></svg>
1620                        </div>
1621                        <div>
1622                            <h3 class="font-bold text-[var(--color-text-primary)] text-sm mb-1">5-4-3-2-1 Erdungstechnik</h3>
1623                            <p class="text-xs text-gray-600">Sofort-Hilfe bei akuter Angst</p>
1624                        </div>
1625                    </div>
1626                </div>
1627
1628                <div class="group bg-[var(--color-accent-lavender-bg)] p-6 rounded-2xl hover:shadow-md transition-shadow">
1629                    <div class="flex items-start gap-4">
1630                        <div class="w-10 h-10 rounded-xl bg-[var(--tint-lavender)] flex items-center justify-center flex-shrink-0 mt-0.5">
1631                            <svg class="w-5 h-5 text-[var(--color-accent-lavender-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
1632                        </div>
1633                        <div>
1634                            <h3 class="font-bold text-[var(--color-text-primary)] text-sm mb-1">Auslöser-Tagebuch</h3>
1635                            <p class="text-xs text-gray-600">Tägliche Reflexion und <span class="whitespace-nowrap">Muster-Erkennung</span></p>
1636                        </div>
1637                    </div>
1638                </div>
1639
1640                <div class="group bg-[var(--color-bg-warm)] p-6 rounded-2xl hover:shadow-md transition-shadow">
1641                    <div class="flex items-start gap-4">
1642                        <div class="w-10 h-10 rounded-xl bg-[var(--tint-primary)] flex items-center justify-center flex-shrink-0 mt-0.5">
1643                            <svg class="w-5 h-5 text-[var(--color-primary-500)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path></svg>
1644                        </div>
1645                        <div>
1646                            <h3 class="font-bold text-[var(--color-text-primary)] text-sm mb-1">Eine bewusste Pause</h3>
1647                            <p class="text-xs text-gray-600">Unterbreche den Zwangskreislauf</p>
1648                        </div>
1649                    </div>
1650                </div>
1651
1652                <div class="group bg-[var(--color-accent-teal-bg)] p-6 rounded-2xl hover:shadow-md transition-shadow">
1653                    <div class="flex items-start gap-4">
1654                        <div class="w-10 h-10 rounded-xl bg-[var(--tint-teal)] flex items-center justify-center flex-shrink-0 mt-0.5">
1655                            <svg class="w-5 h-5 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"></path></svg>
1656                        </div>
1657                        <div>
1658                            <h3 class="font-bold text-[var(--color-text-primary)] text-sm mb-1">Anker im Alltag</h3>
1659                            <p class="text-xs text-gray-600">Stabilität im täglichen Leben&nbsp;verankern</p>
1660                        </div>
1661                    </div>
1662                </div>
1663
1664                <div class="bg-[var(--color-bg-warm)] p-6 rounded-2xl border border-dashed border-[var(--color-border-default)] flex items-center justify-center">
1665                    <div class="text-center">
1666                        <span class="text-2xl font-bold text-[var(--color-text-muted)] block mb-1">+6</span>
1667                        <span class="text-xs text-[var(--color-text-muted)] font-medium">weitere Übungen</span>
1668                    </div>
1669                </div>
1670            </div>
1671
1672            <!-- Übungs-Vorschau -->
1673            <div class="max-w-5xl mx-auto mt-16">
1674                <p class="text-center text-sm font-semibold text-[var(--color-primary-500)] uppercase tracking-wider mb-8">Einblick in die Übungen</p>
1675                <div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
1676                    <div class="arbeitsblatt-preview">
1677                        <img src="/assets/images/homepage/arbeitsblatt-erdung.png" alt="Übung: 5-4-3-2-1 Erdungstechnik" loading="lazy" width="1206" height="1706">
1678                    </div>
1679                    <div class="arbeitsblatt-preview">
1680                        <img src="/assets/images/homepage/arbeitsblatt-achtsamkeit.png" alt="Übung: Achtsamkeit und Akzeptanz" loading="lazy" width="1206" height="1706">
1681                    </div>
1682                    <div class="arbeitsblatt-preview">
1683                        <img src="/assets/images/homepage/arbeitsblatt-beobachter.png" alt="Übung: Die innere Beobachter-Rolle stärken" loading="lazy" width="1206" height="1706">
1684                    </div>
1685                </div>
1686            </div>
1687        </div>
1688    </section>
1689
1690    <!-- =============================================
1691         SO STARTEST DU (3 Schritte)
1692         ============================================= -->
1693    <section class="py-24 px-4 bg-[var(--color-bg-page)]" aria-label="So startest du">
1694        <div class="max-w-6xl mx-auto text-center mb-16">
1695            <span class="badge">So einfach startest du</span>
1696            <h2 class="text-4xl md:text-5xl font-bold mt-1.5">In drei Schritten startklar.</h2>
1697        </div>
1698
1699        <div class="max-w-5xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-6">
1700            <article class="bg-[var(--color-bg-warm)] p-8 rounded-3xl">
1701                <div class="text-4xl font-bold text-[var(--ghost-primary)] mb-1" aria-hidden="true">01</div>
1702                <h3 class="text-xl font-bold mb-3 text-[var(--color-text-primary)]">Registrieren</h3>
1703                <p class="text-sm text-gray-600 leading-relaxed">In zwei Minuten startklar, direkt im Browser oder in der iPhone-App. Du brauchst nur eine E-Mail-Adresse.</p>
1704            </article>
1705
1706            <article class="bg-[var(--color-bg-warm)] p-8 rounded-3xl">
1707                <div class="text-4xl font-bold text-[var(--ghost-primary)] mb-1" aria-hidden="true">02</div>
1708                <h3 class="text-xl font-bold mb-3 text-[var(--color-text-primary)]">Verstehen & festhalten</h3>
1709                <p class="text-sm text-gray-600 leading-relaxed">Wissens-Module lesen und dein erstes Muster ins Tagebuch eintragen.</p>
1710            </article>
1711
1712            <article class="bg-[var(--color-accent-teal-bg)] p-8 rounded-3xl">
1713                <div class="text-4xl font-bold text-[var(--ghost-teal)] mb-1" aria-hidden="true">03</div>
1714                <h3 class="text-xl font-bold mb-3 text-[var(--color-text-primary)]">Angeleitet üben</h3>
1715                <p class="text-sm text-gray-600 leading-relaxed">Mit kleinen Schritten gegen die Vermeidung arbeiten und deinen Verlauf verfolgen.</p>
1716            </article>
1717        </div>
1718
1719        <div class="text-center mt-12">
1720            <a href="https://app.ocdandme.com/register" data-cta="steps" class="btn-primary text-base px-8 py-4">Jetzt registrieren</a>
1721            <p class="text-xs text-gray-600 mt-3">24,90&nbsp;€ / Monat · monatlich kündbar · sofort verfügbar</p>
1722        </div>
1723    </section>
1724
1725    <!-- =============================================
1726         VERMEIDUNGS-REFRAME (Akzent-Sektion)
1727         ============================================= -->
1728    <div class="px-4 md:px-6 py-4 md:py-12">
1729        <section class="bg-[var(--color-bg-warm)] rounded-[2.5rem] py-12 md:py-20 px-4 md:px-16 text-center" aria-label="Ein kleiner Schritt">
1730            <div class="max-w-2xl mx-auto">
1731                <span class="badge">Ein kleiner Schritt</span>
1732                <h2 class="text-4xl md:text-5xl font-bold mt-1.5 mb-5">Anfangen darf sich klein anfühlen.</h2>
1733                <p class="text-gray-600 text-lg leading-relaxed mb-8">Etwas Unangenehmes aufzuschieben, ist zutiefst menschlich, es verschafft kurz Ruhe. Du musst dich heute zu nichts Großem entscheiden und dich nicht bereit fühlen. Wenn du magst, fang klein an: in deinem Tempo, jederzeit beendbar. Du darfst auch unsicher anfangen.</p>
1734                <a href="https://app.ocdandme.com/register" data-cta="reframe" class="btn-primary text-base px-8 py-4">Den ersten Schritt machen</a>
1735                <p class="text-xs text-gray-600 mt-6 max-w-lg mx-auto leading-relaxed">Wenn es dir gerade akut schlecht geht, ist sofortige Unterstützung wichtiger als jede Übung: Telefonseelsorge <a class="underline" href="tel:08001110111">0800 111 0 111</a> (kostenlos, rund um die Uhr).</p>
1736            </div>
1737        </section>
1738    </div>
1739
1740    <!-- =============================================
1741         DATENSCHUTZ & SICHERHEIT
1742         ============================================= -->
1743    <section class="py-24 px-4 bg-[var(--color-bg-page)]" aria-label="Datenschutz und Sicherheit">
1744        <div class="max-w-6xl mx-auto">
1745            <div class="text-center mb-16">
1746                <span class="badge">Dein sicherer Raum</span>
1747                <h2 class="text-4xl md:text-5xl font-bold mt-1.5 mb-4">Privat. Verschlüsselt. Bei dir.</h2>
1748                <p class="text-gray-600 text-lg max-w-2xl mx-auto">Zwangsgedanken sind oft mit Scham verbunden. Deshalb ist ocd&me so gebaut, dass du dich sicher fühlst, von der ersten Minute an.</p>
1749            </div>
1750
1751            <div class="grid md:grid-cols-2 gap-3 md:gap-5">
1752                <div class="bg-[var(--color-bg-warm)] p-8 rounded-2xl">
1753                    <svg class="w-7 h-7 text-[var(--color-primary-500)] mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 11c-1.5 0-2.7.4-3.6 1a7.5 7.5 0 00-5.4 3h18a7.5 7.5 0 00-5.4-3c-.9-.6-2.1-1-3.6-1z"></path><circle cx="8" cy="15" r="2.5" stroke-width="1.5"></circle><circle cx="16" cy="15" r="2.5" stroke-width="1.5"></circle></svg>
1754                    <h3 class="text-lg font-bold text-[var(--color-text-primary)] mb-2">In der Community bleibst du anonym.</h3>
1755                    <p class="text-sm text-gray-600">Wenn du dich mit anderen austauschst, nur mit Spitznamen oder Pseudonym. Deinen echten Namen muss dort niemand kennen.</p>
1756                </div>
1757
1758                <div class="bg-[var(--color-bg-warm)] p-8 rounded-2xl">
1759                    <svg class="w-7 h-7 text-[var(--color-primary-500)] mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg>
1760                    <h3 class="text-lg font-bold text-[var(--color-text-primary)] mb-2">Du bestimmst, was du teilst.</h3>
1761                    <p class="text-sm text-gray-600">Niemand wird dich auffordern, den Inhalt deiner Gedanken auszusprechen. Viele Übungen funktionieren, ohne dass du jemals sagen musst, was in deinem Kopf vorgeht.</p>
1762                </div>
1763
1764                <div class="bg-[var(--color-accent-teal-bg)] p-8 rounded-2xl">
1765                    <svg class="w-7 h-7 text-[var(--color-accent-teal-text)] mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 3l18 18"></path></svg>
1766                    <h3 class="text-lg font-bold text-[var(--color-text-primary)] mb-2">Keine Weitergabe an Dritte.</h3>
1767                    <p class="text-sm text-gray-600">Deine Daten werden nicht verkauft und nicht mit Werbenetzwerken geteilt. Sie bleiben für deine Arbeit mit ocd&me.</p>
1768                </div>
1769
1770                <div class="bg-[var(--color-accent-teal-bg)] p-8 rounded-2xl">
1771                    <svg class="w-7 h-7 text-[var(--color-accent-teal-text)] mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path></svg>
1772                    <h3 class="text-lg font-bold text-[var(--color-text-primary)] mb-2">Verschlüsselt gespeichert.</h3>
1773                    <p class="text-sm text-gray-600">Deine Einträge sind verschlüsselt und DSGVO-konform. Was du festhältst, bleibt bei dir.</p>
1774                </div>
1775
1776                <div class="bg-white border border-gray-100 p-8 rounded-2xl">
1777                    <svg class="w-7 h-7 text-[var(--color-text-primary)] mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path></svg>
1778                    <h3 class="text-lg font-bold text-[var(--color-text-primary)] mb-2">Jederzeit löschbar.</h3>
1779                    <p class="text-sm text-gray-600">Deine Einträge gehören dir. Du kannst sie jederzeit löschen oder dein Konto beenden.</p>
1780                </div>
1781
1782                <div class="bg-white border border-gray-100 p-8 rounded-2xl">
1783                    <svg class="w-7 h-7 text-[var(--color-text-primary)] mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path></svg>
1784                    <h3 class="text-lg font-bold text-[var(--color-text-primary)] mb-2">Werkzeuge statt Beruhigung.</h3>
1785                    <p class="text-sm text-gray-600">Wir lösen nicht jede Angst für dich auf. Wir zeigen dir, wie du mit der Ungewissheit umgehen kannst, statt sie wegzudrücken.</p>
1786                </div>
1787            </div>
1788        </div>
1789    </section>
1790
1791    <!-- =============================================
1792         TEAM
1793         ============================================= -->
1794    <section class="py-24 px-4 bg-white" aria-label="Team">
1795        <div class="max-w-6xl mx-auto">
1796            <div class="text-center mb-16">
1797                <span class="badge">Das Team hinter ocd&me</span>
1798                <h2 class="text-4xl md:text-5xl font-bold mt-1.5 mb-4">Wer hinter ocd&me steht.</h2>
1799                <p class="text-gray-600 max-w-2xl mx-auto">ocd&me ist aus eigener Betroffenheit entstanden und aus dem Anspruch, Selbsthilfe fachlich fundiert und achtsam aufzubauen.</p>
1800            </div>
1801
1802            <div class="grid grid-cols-1 xl:grid-cols-3 gap-6 max-w-3xl xl:max-w-none mx-auto">
1803                <!-- Nadine Stievermann -->
1804                <div class="bg-[var(--color-accent-teal-bg)] p-8 rounded-3xl flex flex-col md:flex-row xl:flex-col md:gap-8 xl:gap-0 h-full">
1805                    <img src="/assets/images/team/nadine-team.jpg" alt="Nadine, Mitgründerin und Systemische Therapeutin" width="720" height="960" loading="lazy" class="w-full md:w-56 xl:w-full md:shrink-0 md:self-start aspect-[3/4] object-cover object-top rounded-2xl mb-6 md:mb-0 xl:mb-6">
1806                    <div class="flex flex-col">
1807                        <h3 class="text-lg font-bold text-[var(--color-text-primary)]">Nadine</h3>
1808                        <p class="text-sm text-[var(--color-accent-teal-text)] font-medium mb-3">Mitgründerin · Systemische Therapeutin</p>
1809                        <p class="text-sm text-gray-600 leading-relaxed">
1809Nadine ist systemische Therapeutin mit einem Master in Sozialer Arbeit und bringt ihre Erfahrung aus der stationären Klinik sowie ihrer freiberuflichen Praxis als Paar- und Einzeltherapeutin mit Spezialisierung auf Verlustangst in die Inhalte von ocd&me ein. Gerade für unseren Fokus auf Beziehungszwänge (ROCD) ist diese Nähe zu Bindungs- und Verlustangst-Themen wertvoll, und sie achtet darauf, dass die Wissensmodule und Übungen gleichermaßen fachlich fundiert und verständlich gestaltet sind. Ihr Blick für das, was Menschen im Alltag wirklich brauchen, macht ocd&me wertvoll und alltagstauglich.</p>
1810                        <a href="https://www.nadine-stievermann.de/ueber-mich/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1.5 text-sm font-semibold text-[var(--color-accent-teal-text)] mt-4">Mehr über Nadine
1811                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path></svg>
1812                        </a>
1813                    </div>
1814                </div>
1815
1816                <!-- Justin -->
1817                <div class="bg-[var(--color-bg-warm)] p-8 rounded-3xl flex flex-col md:flex-row xl:flex-col md:gap-8 xl:gap-0 h-full">
1818                    <img src="/assets/images/team/justin-ocdandme.jpg" alt="Justin, Mitgründer von ocd&me" width="720" height="960" loading="lazy" class="w-full md:w-56 xl:w-full md:shrink-0 md:self-start aspect-[3/4] object-cover object-top rounded-2xl mb-6 md:mb-0 xl:mb-6">
1819                    <div class="flex flex-col">
1820                        <h3 class="text-lg font-bold text-[var(--color-text-primary)]">Justin</h3>
1821                        <p class="text-sm text-[var(--color-primary-500)] font-medium mb-3">Mitgründer · Entwickler</p>
1822                        <p class="text-sm text-gray-600 leading-relaxed">Justin ist der Umsetzer hinter ocd&me und bringt seine mehrjährige Erfahrung in SEO, Produktentwicklung und E-Commerce ein, unter anderem durch den Aufbau eigener digitaler Produkte und mehrere Jahre in verantwortungsvollen Positionen der Digitalbranche. Als Marketer und Entwickler übersetzt er Nadines inhaltliche Arbeit Schritt für Schritt in ein durchdachtes, alltagstaugliches Werkzeug, von der Struktur über die Übungen bis hin zur finalen App. So entsteht aus Wissen etwas, das man wirklich nutzen kann.</p>
1823                    </div>
1824                </div>
1825
1826                <!-- Isabelle (Foto folgt) -->
1827                <div class="bg-[var(--color-accent-lavender-bg)] p-8 rounded-3xl flex flex-col md:flex-row xl:flex-col md:gap-8 xl:gap-0 h-full">
1828                    <div class="w-full md:w-56 xl:w-full md:shrink-0 md:self-start aspect-[3/4] rounded-2xl mb-6 md:mb-0 xl:mb-6 bg-white/60 flex items-center justify-center" aria-hidden="true">
1829                        <span class="text-sm font-medium text-[var(--color-accent-lavender-text)]">Foto folgt</span>
1830                    </div>
1831                    <div class="flex flex-col">
1832                        <h3 class="text-lg font-bold text-[var(--color-text-primary)]">Isabelle</h3>
1833                        <p class="text-sm text-[var(--color-accent-lavender-text)] font-medium mb-3">Psychologische Psychotherapeutin mit Fachkunde Verhaltenstherapie</p>
1834                        <p class="text-sm text-gray-600 leading-relaxed">Isabelle bringt ihre Erfahrung als approbierte Psychologische Psychotherapeutin mit Fachkunde Verhaltenstherapie in die fachliche Arbeit von ocd&me ein. Sie hat die Zwangsstörungsambulanz der Uniklinik Bonn geleitet und ist als Diagnostikerin im OCDTWIN-Projekt der MSH Medical School Hamburg tätig, wodurch sie Zwangsstörungen aus Behandlung und Diagnostik gleichermaßen kennt. Ihr liegt besonders am Herzen, Betroffenen frühzeitig fundierte Aufklärung und niedrigschwellige Unterstützung zugänglich zu machen.</p>
1835                    </div>
1836                </div>
1837            </div>
1838
1839            <p class="text-xs text-[var(--color-text-muted)] max-w-2xl mx-auto text-center mt-8 leading-relaxed">ocd&me ist ein Selbsthilfe-Angebot und keine Psychotherapie. Die therapeutische und psychotherapeutische Erfahrung im Team fließt in Inhalte und Aufbau ein; eine individuelle Behandlung, Beratung oder Diagnostik findet über ocd&me nicht statt.</p>
1840        </div>
1841    </section>
1842
1843    <!-- =============================================
1844         PRICING (drei Laufzeiten, gleicher Funktionsumfang)
1845         Preisangaben nach PAngV: Gesamtpreis und Monatsbetrag je Tarif.
1846         Verlaengerung nach Erstlaufzeit nur auf unbestimmte Zeit mit
1847         monatlicher Kuendbarkeit (§ 309 Nr. 9 lit. b BGB), steht auf jeder Karte.
1848         iOS-App: dort ist nur der Monatstarif erhaeltlich (In-App-Kauf, AGB § 5a).
1849         ============================================= -->
1850    <div class="px-4 md:px-6 py-4 md:py-12" id="pricing">
1851    <section class="bg-[var(--color-bg-warm)] rounded-[2.5rem] py-8 md:py-20 px-3 md:px-16" aria-label="Preise">
1852        <div class="max-w-6xl mx-auto">
1853
1854            <!-- Kopf -->
1855            <div class="max-w-2xl mb-8 md:mb-12">
1856                <h2 class="text-4xl md:text-5xl font-bold mb-4">Eine App, alles drin!</h2>
1857                <p class="text-gray-600 leading-relaxed">In allen Laufzeiten ist derselbe Funktionsumfang enthalten. Du kaufst nur die Zeit, für die du dich festlegen möchtest. Je länger die Laufzeit, desto günstiger der Monat.</p>
1858            </div>
1859
1860            <!-- Leistungsumfang, in jedem Tarif identisch. Steht vor den Karten:
1861                 erst was drin ist, dann was es kostet.
1862                 Die Liste laeuft ueber CSS-Spalten statt ueber ein Grid. Im Grid
1863                 haetten nebeneinanderliegende Punkte dieselbe Zeilenhoehe, ein
1864                 zweizeiliger Punkt reisst dann eine Luecke in die andere Spalte. -->
1865            <!-- Ab lg mehr Abstand nach unten: die mittlere Karte ragt dort
1866                 24 Pixel nach oben heraus und ihr Badge sitzt noc
1866hmal 12 Pixel
1867                 darueber, sonst klebt es an der Leistungsliste. -->
1868            <div class="mb-10 md:mb-14 lg:mb-24">
1869                <h3 class="text-xl md:text-2xl font-bold mb-6">In jedem Tarif enthalten</h3>
1870                <ul class="sm:columns-2 sm:gap-x-8 -mb-4">
1871                    <li class="flex items-start gap-3 mb-4 break-inside-avoid">
1872                        <div class="w-6 h-6 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
1873                            <svg class="w-3.5 h-3.5 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
1874                        </div>
1875                        <span class="text-gray-700">Psychoedukation zu Zwängen und allen Subtypen</span>
1876                    </li>
1877                    <li class="flex items-start gap-3 mb-4 break-inside-avoid">
1878                        <div class="w-6 h-6 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
1879                            <svg class="w-3.5 h-3.5 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
1880                        </div>
1881                        <span class="text-gray-700">Muster- &amp; Auslöser-Tagebuch</span>
1882                    </li>
1883                    <li class="flex items-start gap-3 mb-4 break-inside-avoid">
1884                        <div class="w-6 h-6 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
1885                            <svg class="w-3.5 h-3.5 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
1886                        </div>
1887                        <span class="text-gray-700">Angeleitete Übungen nach wissenschaftlich fundiertem Prinzip <span class="text-[var(--color-text-muted)]">(Timer, Angst-Skala, Reflexion)</span></span>
1888                    </li>
1889                    <li class="flex items-start gap-3 mb-4 break-inside-avoid">
1890                        <div class="w-6 h-6 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
1891                            <svg class="w-3.5 h-3.5 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
1892                        </div>
1893                        <span class="text-gray-700">Fortschritts-Tracking über Wochen</span>
1894                    </li>
1895                    <li class="flex items-start gap-3 mb-4 break-inside-avoid">
1896                        <div class="w-6 h-6 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
1897                            <svg class="w-3.5 h-3.5 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
1898                        </div>
1899                        <span class="text-gray-700">Verschlüsselt &amp; DSGVO-konform</span>
1900                    </li>
1901                    <li class="flex items-start gap-3 mb-4 break-inside-avoid">
1902                        <div class="w-6 h-6 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
1903                            <svg class="w-3.5 h-3.5 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"></path></svg>
1904                        </div>
1905                        <span class="text-gray-700">Sofort startklar, im Browser oder als iPhone-App</span>
1906                    </li>
1907                </ul>
1908            </div>
1909
1910            <!-- Tarife -->
1911            <!-- Ab lg bekommt die mittlere Spalte mehr Breite, damit das
1912                 Zielangebot nicht nur hoeher, sondern sichtbar groesser ist.
1913                 Nur Hoehe reicht nicht, 2 x 24 Pixel Ueberstand liest niemand
1914                 als "groesser". -->
1915            <div class="grid sm:grid-cols-2 lg:grid-cols-[1fr_1.18fr_1fr] gap-4 md:gap-5 items-stretch">
1916
1917                <!-- Monatlich -->
1918                <div class="bg-white rounded-3xl p-6 md:p-7 shadow-sm flex flex-col" aria-label="Monatstarif: 24,90 Euro pro Monat">
1919                    <h3 class="text-lg font-semibold text-[var(--color-text-primary)]">Monatlich</h3>
1920                    <p class="text-sm text-gray-600 mt-1 mb-5">Volle Flexibilität</p>
1921                    <div class="mb-1">
1922                        <span class="text-4xl font-bold text-[var(--color-text-primary)]">24,90&nbsp;€</span>
1923                        <span class="text-gray-600 text-base"> / Monat</span>
1924                    </div>
1925                    <p class="text-sm text-gray-600 mb-5">Monatlich abgerechnet</p>
1926                    <ul class="space-y-2.5 mb-6 flex-grow">
1927                        <li class="flex items-start gap-2.5">
1928                            <div class="w-5 h-5 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
1929                                <svg class="w-3 h-3 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
1930                            </div>
1931                            <span class="text-sm text-gray-700">Monatlich kündbar</span>
1932                        </li>
1933                        <li class="flex items-start gap-2.5">
1934                            <div class="w-5 h-5 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
1935                                <svg class="w-3 h-3 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
1936                            </div>
1937                            <span class="text-sm text-gray-700">Kündigung direkt in der App, ohne Nachfrage</span>
1938                        </li>
1939                        <li class="flex items-start gap-2.5">
1940                            <div class="w-5 h-5 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
1941                                <svg class="w-3 h-3 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
1942                            </div>
1943                            <span class="text-sm text-gray-700">Auch als iPhone-App erhältlich</span>
1944                        </li>
1945                    </ul>
1946                    <a href="https://app.ocdandme.com/register?plan=monthly" data-cta="pricing_monthly" data-funnel-event="cta_clicked" class="btn-outline w-full text-base text-center">Monatlich starten</a>
1947                </div>
1948
1949                <!-- 4 Monate: Zielangebot, visuell fuehrend.
1950                     Der durchgestrichene Referenzpreis ist KEIN frueherer Preis dieses
1951                     Tarifs, sondern die Summe von vier Monatstarifen. Er muss deshalb
1952                     danebenstehend erklaert werden (siehe erster Listenpunkt), sonst
1953                     waere die Angabe irrefuehrend (§ 5 UWG). -->
1954                <div class="bg-white rounded-3xl p-6 md:p-7 lg:p-9 lg:-my-6 shadow-md lg:shadow-xl ring-2 ring-[var(--color-accent-teal-text)] flex flex-col relative" aria-label="Viermonatstarif: 17,25 Euro pro Monat, 69 Euro einmalig für 4 Monate statt 99,60 Euro bei monatlicher Zahlung">
1955                    <span class="absolute -top-3 left-6 bg-[var(--color-accent-teal-text)] text-white text-xs font-semibold px-3 py-1 rounded-full">Statt <s class="font-normal opacity-80">99,60&nbsp;€</s> nur 69&nbsp;€</span>
1956                    <h3 class="text-lg font-semibold text-[var(--color-text-primary)]">4 Monate</h3>
1957                    <p class="text-sm text-gray-600 mt-1 mb-5">Vier Monate Begleitung am Stück</p>
1958                    <div class="mb-1">
1959                        <span class="text-4xl lg:text-5xl font-bold text-[var(--color-text-primary)]">17,25&nbsp;€</span>
1960                        <span class="text-gray-600 text-base"> / Monat</span>
1961                    </div>
1962                    <p class="text-sm text-gray-600 mb-5 flex items-center flex-wrap gap-x-2 gap-y-1.5">
1963                        <span>69&nbsp;€ einmalig für 4&nbsp;Monate</span>
1964                        <span class="save-pill">31&nbsp;% sparen</span>
1965                    </p>
1966                    <ul class="space-y-2.5 mb-6 flex-grow">
1967                        <!-- Vergleich nennt bewusst die Kategorie statt einer Marke:
1968                             altert nicht mit fremden Preislisten, nicht ueber
1969                             Markenrechte angreifbar. Beleg steht in der Fussnote. -->
1970                        <li class="flex items-start gap-2.5">
1971                            <div class="w-5 h-5 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
1972                                <svg class="w-3 h-3 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
1973                            </div>
1974                            <span class="text-sm text-gray-700"><strong class="font-semibold">Es kostet dich weniger als dein&nbsp;Fitnessstudio</strong></span>
1975                        </li>
1976                        <li class="flex items-start gap-2.5">
1977                            <div class="w-5 h-5 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
1978                                <svg class="w-3 h-3 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
1979                            </div>
1980                            <span class="text-sm text-gray-700">Du sparst 30,60&nbsp;€ gegenüber 4&nbsp;×&nbsp;24,90&nbsp;€ bei monatlicher&nbsp;Zahlung</span>
1981                        </li>
1982                        <li class="flex items-start gap-2.5">
1983                            <div class="w-5 h-5 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
1984                                <svg class="w-3 h-3 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
1985                            </div>
1986                            <span class="text-sm text-gray-700">Danach 24,90&nbsp;€ im Monat, monatlich&nbsp;kündbar</span>
1987                        </li>
1988                    </ul>
1989                    <a href="https://app.ocdandme.com/register?plan=fourmonth" data-cta="pricing_fourmonth" data-funnel-event="cta_clicked" class="btn-primary w-full text-base text-center">4 Monate wählen</a>
1990                </div>
1991
1992                <!-- 12 Monate: sachlich beste Option, aber visuell zurueckgenommen,
1993                     damit nur eine Karte fuehrt. -->
1994                <div class="bg-white rounded-3xl p-6 md:p-7 shadow-sm flex flex-col relative" aria-label="Jahrestarif: 14,92 Euro pro Monat, 179 Euro einmalig für 12 Monate">
1995                    <span class="absolute -top-3 left-6 bg-white border border-[var(--color-accent-teal-text)] text-[var(--color-accent-teal-text)] text-xs font-semibold px-3 py-1 rounded-full">Bester Monatspreis</span>
1996                    <h3 class="text-lg font-semibold text-[var(--color-text-primary)]">12 Monate</h3>
1997                    <p class="text-sm text-gray-600 mt-1 mb-5">Ein ganzes Jahr an deiner Seite</p>
1998                    <div class="mb-1">
1999                        <span class="text-4xl font-bold text-[var(--color-text-primary)]">14,92&nbsp;€</span>
2000                        <span class="text-gray-600 text-base"> / Monat</span>
2001                    </div>
2002                    <p class="text-sm text-gray-600 mb-5 flex items-center flex-wrap gap-x-2 gap-y-1.5">
2003                        <span>179&nbsp;€ einmalig für 12&nbsp;Monate</span>
2004                        <span class="save-pill">40&nbsp;% sparen</span>
2005                    </p>
2006                    <ul class="space-y-2.5 mb-6 flex-grow">
2007                        <li class="flex items-start gap-2.5">
2008                            <div class="w-5 h-5 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
2009                                <svg class="w-3 h-3 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
2010                            </div>
2011                            <span class="text-sm text-gray-700"><strong class="font-semibold">Du sparst 119,80&nbsp;€</strong> gegenüber 12&nbsp;×&nbsp;24,90&nbsp;€ bei monatlicher&nbsp;Zahlung</span>
2012                        </li>
2013                        <li class="flex items-start gap-2.5">
2014                            <div class="w-5 h-5 rounded-full bg-[#e8f0eb] flex items-center justify-center flex-shrink-0 mt-0.5">
2015                                <svg class="w-3 h-3 text-[var(--color-accent-teal-text)]" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 13l4 4L19 7"></path></svg>
2016                            </div>
2017                            <span class="text-sm text-gray-700">Danach 24,90&nbsp;€ im Monat, monatlich&nbsp;kündbar</span>
2018                        </li>
2019                    </ul>
2020                    <a href="https://app.ocdandme.com/register?plan=annual" data-cta="pricing_annual" data-funnel-event="cta_clicked" class="btn-outline w-full text-base text-center">12 Monate wählen</a>
2021                </div>
2022
2023            </div>
2024
2025            <!-- mehr Luft ab lg, weil die mittlere Karte dort 24 Pixel nach unten
2026                 ueber die Reihe hinausragt und sonst fast auf der Fussnote sitzt. -->
2027            <p class="text-xs text-gray-600 mt-5 lg:mt-12 leading-relaxed">Alle Preise inklusive Mehrwertsteuer. Die 4- und die 12-Monats-Laufzeit werden einmalig im Voraus abgerechnet. Nach Ablauf der gewählten Laufzeit läuft der Vertrag auf unbestimmte Zeit weiter und wird monatlich zum dann gültigen Monatspreis abgerechnet, derzeit 24,90&nbsp;€. Kündigen kannst du jederzeit ohne Kündigungsfrist, mit Wirkung zum Ende des laufenden Zeitraums. In der iPhone-App ist nur der Monatstarif erhältlich. Der Vergleich zum Fitnessstudio bezieht sich auf den durchschnittlichen Mitgliedsbeitrag in Deutschland von 52,95&nbsp;€ im Monat (DSSV, Eckdaten 2026).</p>
2028
2029        </div>
2030    </section>
2031    </div>
2032
2033    <!-- =============================================
2034         FAQ
2035         ============================================= -->
2036    <section class="py-24 px-4 bg-[var(--color-bg-page)]" aria-label="Häufige Fragen">
2037        <div class="max-w-6xl mx-auto flex flex-col md:flex-row gap-12">
2038            <div class="md:w-1/3">
2039                <div class="md:sticky md:top-28">
2040                    <span class="badge">FAQ</span>
2041                    <h2 class="text-4xl md:text-5xl font-bold mt-1.5">Häufige <br class="hidden md:block">Fragen</h2>
2042                </div>
2043            </div>
2044
2045            <div class="md:w-2/3 space-y-3">
2046                <details class="faq-item rounded-2xl" name="faq" open>
2047                    <summary class="flex justify-between items-center gap-4 text-lg font-medium">Ist das eine Therapie?</summary>
2048                    <div class="text-sm leading-relaxed text-gray-600 px-6 pb-6">
2049                        <p>Nein. ocd&me ist strukturierte Selbsthilfe und kein Ersatz für eine Psychotherapie. Für die Wartezeit auf einen Therapieplatz ist es eine Brücke, um jetzt aktiv etwas zu tun; wenn du bereits in Therapie bist, eine Ergänzung für den Alltag zwischen den Terminen. Wenn es dir akut schlecht geht: Telefonseelsorge 0800 111 0 111 (kostenlos, rund um die Uhr).</p>
2050                    </div>
2051                </details>
2052
2053                <details class="faq-item rounded-2xl" name="faq">
2054                    <summary class="flex justify-between items-center gap-4 text-lg font-medium">Ich bin unsicher, ob ich überhaupt Zwänge habe. Bin ich hier richtig?</summary>
2055                    <div class="text-sm leading-relaxed text-gray-600 px-6 pb-6">
2056                        <p>Du musst nichts über dich wissen, um anzufangen. ocd&me stellt keine Diagnosen und sagt dir nicht, was du hast. Es hilft dir zu verstehen, was in deinem Kopf passiert, und gibt dir Werkzeuge an die Hand. Für eine fundierte Einschätzung wende dich an eine ärztliche oder psychotherapeutische Fachperson.</p>
2057                    </div>
2058                </details>
2059
2060                <details class="faq-item rounded-2xl" name="faq">
2061                    <summary class="flex justify-between items-center gap-4 text-lg font-medium">Meine Gedanken fühlen sich zu schlimm an, um sie aufzuschreiben.</summary>
2062                    <div class="text-sm leading-relaxed text-gray-600 px-6 pb-6">
2063                        <p>Solche Gedanken kommen bei Zwängen häufig vor, auch zu Tabu-Themen. Du musst sie hier niemandem erzählen und keinen Klarnamen angeben. Viele Übungen funktionieren ganz ohne, dass du Inhalte preisgibst. In der App geht es nicht darum, innerlich zu prüfen, ob sie „wahr“ sind, sondern darum, einen anderen Umgang mit ihnen zu lernen.</p>
2064                    </div>
2065                </details>
2066
2067                <details class="faq-item rounded-2xl" name="faq">
2068                    <summary class="flex justify-between items-center gap-4 text-lg font-medium">Die Übungen klingen nach Konfrontation. Was, wenn es mir schlechter geht?</summary>
2069                    <div class="text-sm leading-relaxed text-gray-600 px-6 pb-6">
2070                        <p>Du bestimmst das Tempo und fängst klein an. Die Übungen arbeiten mit Angst-Skala, Timer und Reflexion, damit du dich Schritt für Schritt herantastest, statt dich zu überfordern. Es gilt immer: erst der Mensch, dann die Übung. Wenn dich deine Gedanken stark belasten, hol dir bitte zusätzlich professionelle Unterstützung. Diese Übungen ersetzen sie nicht.</p>
2071                    </div>
2072                </details>
2073
2074                <details class="faq-item rounded-2xl" name="faq">
2075                    <summary class="flex justify-between items-center gap-4 text-lg font-medium">Wie steht es um meine Daten?</summary>
2076                    <div class="text-sm leading-relaxed text-gray-600 px-6 pb-6">
2077                        <p>Du nutzt ocd&me unter einem Spitznamen oder Pseudonym, einen Klarnamen brauchst du nicht. De
2077ine Einträge sind verschlüsselt und DSGVO-konform. Was du hier festhältst, bleibt bei dir, und du kannst es jederzeit löschen.</p>
2078                    </div>
2079                </details>
2080
2081                <details class="faq-item rounded-2xl" name="faq">
2082                    <summary class="flex justify-between items-center gap-4 text-lg font-medium">Gibt es ocd&me auch als App fürs Handy?</summary>
2083                    <div class="text-sm leading-relaxed text-gray-600 px-6 pb-6">
2084                        <p>Ja. ocd&me gibt es als iPhone-App im <a href="https://apps.apple.com/de/app/ocd-me/id6792472196" data-appstore="faq" target="_blank" rel="noopener noreferrer" class="underline">Apple App Store</a> und weiterhin als Web-App direkt im Browser. Du nutzt beides mit demselben Konto und machst genau da weiter, wo du aufgehört hast.</p>
2085                    </div>
2086                </details>
2087
2088                <details class="faq-item rounded-2xl" name="faq">
2089                    <summary class="flex justify-between items-center gap-4 text-lg font-medium">Was kostet es, und kann ich kündigen?</summary>
2090                    <div class="text-sm leading-relaxed text-gray-600 px-6 pb-6">
2091                        <p>Du hast die Wahl zwischen drei Laufzeiten: 24,90&nbsp;
2091€ pro Monat, 69&nbsp;€ für vier Monate (17,25&nbsp;€ im Monat) oder 179&nbsp;€ für zwölf Monate (14,92&nbsp;€ im Monat). Der Funktionsumfang ist überall derselbe, es gibt keine Stufen und keine versteckten Kosten.</p>
2092                        <p class="mt-3">Nach Ablauf der gewählten Laufzeit läuft der Vertrag auf unbestimmte Zeit weiter und wird monatlich zum dann gültigen Monatspreis abgerechnet, derzeit 24,90&nbsp;€. Eine neue feste Laufzeit entsteht dadurch nicht. Kündigen kannst du jederzeit direkt in der App, ohne Kündigungsfrist, mit Wirkung zum Ende des laufenden Zeitraums. In der iPhone-App gibt es nur den Monatstarif.</p>
2093                    </div>
2094                </details>
2095
2096                <details class="faq-item rounded-2xl" name="faq">
2097                    <summary class="flex justify-between items-center gap-4 text-lg font-medium">Ich habe schon vieles probiert (Bücher, googeln, YouTube) und nichts hat geholfen.</summary>
2098                    <div class="text-sm leading-relaxed text-gray-600 px-6 pb-6">
2099                        <p>Das meiste davon gibt dir Information, aber keine Struktur und keinen Verlauf. Der Unterschied hier ist nicht noch mehr Lesen, sondern ein angeleiteter Ablauf: dein Muster festhalten, üben und über Wochen sehen, woran du gearbeitet hast. Genau das fehlt beim Googeln.</p>
2100                    </div>
2101                </details>
2102
2103                <details class="faq-item rounded-2xl" name="faq">
2104                    <summary class="flex justify-between items-center gap-4 text-lg font-medium">Ich war schon in Therapie. Bringt mir das noch etwas?</summary>
2105                    <div class="text-sm leading-relaxed text-gray-600 px-6 pb-6">
2106                        <p>Ja. Du kannst Gelerntes im Alltag verankern und dranbleiben, und über das Tracking werden frühe Anzeichen sichtbar. Du musst nicht bei null anfangen. Du kommst in Minuten zurück zu deinem Handwerkszeug.</p>
2107                    </div>
2108                </details>
2109            </div>
2110        </div>
2111    </section>
2112
2113    <!-- Rechtlicher Hinweis + Krise -->
2114    <section class="py-8 px-4 bg-[var(--color-bg-page)] border-t border-gray-100">
2115        <div class="max-w-4xl mx-auto text-center">
2116            <p class="text-xs text-gray-600 leading-relaxed">ocd&me ist ein strukturiertes Selbsthilfe-Angebot. Es ist keine Psychotherapie und ersetzt keine ärztliche oder psychotherapeutische Behandlung. Es werden keine Diagnosen gestellt. Wenn es dir gerade akut schlecht geht oder du Gedanken hast, dir etwas anzutun, wende dich bitte an Menschen, die sofort für dich da sind: Telefonseelsorge <a href="tel:08001110111" class="text-gray-600 underline">0800 111 0 111</a> oder <a href="tel:08001110222" class="text-gray-600 underline">0800 111 0 222</a> (kostenlos, rund um die Uhr), im Notfall <a href="tel:112" class="text-gray-600 underline">112</a>.</p>
2117        </div>
2118    </section>
2119
2120    </main>
2121
2122    <!-- Carousel + CTA-Tracking JS -->
2123    
2123<script nonce="94573f3eac17a88549eb6449e61b2bc3">
2124    (function() {
2125        function initCarousel(containerId, prevId, nextId) {
2126            var el = document.getElementById(containerId);
2127            if (!el) return;
2128            var slides = el.querySelectorAll('.carousel-slide');
2129            var dots = el.querySelectorAll('.carousel-dot');
2130            var current = 0;
2131            var total = slides.length;
2132
2133            function goTo(i) {
2134                if (i < 0) i = total - 1;
2135                if (i >= total) i = 0;
2136                slides[current].classList.add('hidden');
2137                dots[current].classList.remove('active');
2138                current = i;
2139                slides[current].classList.remove('hidden');
2140                dots[current].classList.add('active');
2141            }
2142
2143            document.getElementById(prevId).addEventListener('click', function() { goTo(current - 1); });
2144            document.getElementById(nextId).addEventListener('click', function() { goTo(current + 1); });
2145            dots.forEach(function(dot) {
2146                dot.addEventListener('click', function() {
2147                    goTo(parseInt(this.getAttribute('data-goto'), 10));
2148                });
2149            });
2150        }
2151
2152        initCarousel('app-carousel', 'app-carousel-prev', 'app-carousel-next');
2153
2154        // Hero-Vorstellungsvideo: Klick startet mit Ton, native Controls erscheinen
2155        var heroVideo = document.getElementById('hero-welcome-video');
2156        if (heroVideo) {
2157            var heroWrap = heroVideo.closest('.hero-video');
2158            var heroPlay = heroWrap ? heroWrap.querySelector('.hero-video-play') : null;
2159            if (heroPlay) {
2160                heroPlay.addEventListener('click', function() {
2161                    heroVideo.setAttribute('controls', '');
2162                    if (heroWrap) heroWrap.classList.add('is-playing');
2163                    var pr = heroVideo.play();
2164                    if (pr && pr.catch) pr.catch(function() {});
2165                    window.dataLayer = window.dataLayer || [];
2166                    window.dataLayer.push({ 'event': 'hero_video_play' });
2167                });
2168                heroVideo.addEventListener('ended', function() {
2169                    heroVideo.removeAttribute('controls');
2170                    if (heroWrap) heroWrap.classList.remove('is-playing');
2171                    heroVideo.currentTime = 0;
2172                    // Micro-Conversion: Hero-Video komplett geschaut (starkes Engagement-Signal)
2173                    window.dataLayer.push({ 'event': 'hero_video_complete' });
2174                });
2175            }
2176        }
2177
2178        // Funnel: Registrierungs-Klicks ans dataLayer melden (GTM gated per Consent Mode)
2179        window.dataLayer = window.dataLayer || [];
2180        document.querySelectorAll('a[data-cta]').forEach(function(a) {
2181            a.addEventListener('click', function() {
2182                window.dataLayer.push({
2183                    'event': 'begin_registration',
2184                    'cta_location': a.getAttribute('data-cta')
2185                });
2186            });
2187        });
2188
2189        // App-Store-Klicks ans dataLayer melden
2190        document.querySelectorAll('a[data-appstore]').forEach(function(a) {
2191            a.addEventListener('click', function() {
2192                window.dataLayer.push({
2193                    'event': 'app_store_click',
2194                    'cta_location': a.getAttribute('data-appstore')
2195                });
2196            });
2197        });
2198
2199        // Micro-Conversion: Scroll-Tiefe (25/50/75/90 %) — je Schwelle einmal
2200        var scrollMarks = [25, 50, 75, 90], scrollFired = {};
2201        function checkScrollDepth() {
2202            var h = document.documentElement;
2203            var max = h.scrollHeight - h.clientHeight;
2204            if (max <= 0) return;
2205            var pct = ((h.scrollTop || document.body.scrollTop) / max) * 100;
2206            for (var i = 0; i < scrollMarks.length; i++) {
2207                var m = scrollMarks[i];
2208                if (pct >= m && !scrollFired[m]) {
2209                    scrollFired[m] = true;
2210                    window.dataLayer.push({ 'event': 'scroll_depth', 'percent_scrolled': m });
2211                }
2212            }
2213        }
2214        window.addEventListener('scroll', checkScrollDepth, { passive: true });
2215
2216        // Micro-Conversion: Pricing-Section sichtbar (Intent-Signal) — einmal
2217        var pricingEl = document.getElementById('pricing');
2218        if (pricingEl && 'IntersectionObserver' in window) {
2219            var pricingSeen = false;
2220            var pio = new IntersectionObserver(function(entries) {
2221                if (entries[0].isIntersecting && !pricingSeen) {
2222                    pricingSeen = true;
2223                    window.dataLayer.push({ 'event': 'view_pricing' });
2224                    pio.disconnect();
2225                }
2226            }, { threshold: 0.1 });
2227            pio.observe(pricingEl);
2228        }
2229    })();
2230    </script>
2230
2231
2232    
2233<style>
2234/* Footer-specific warm-olive tokens (no DS match) */
2235.site-footer {
2236    --footer-bg: #2a2f12;
2237    --footer-text: #d4d5c8;
2238    --footer-link: #a8a990;
2239    --footer-border: #3d4420;
2240    /* aufgehellt von #7a7b68 auf 4.5:1 gegen --footer-bg (WCAG AA) */
2241    --footer-muted: #939482;
2242}
2243.site-footer { background-color: var(--footer-bg); color: var(--footer-text); width: 100%; }
2244.site-footer-inner { max-width: var(--container-6xl, 72rem); margin: 0 auto; padding: var(--space-16, 4rem) var(--space-6, 1.5rem); }
2245.site-footer-grid { display: grid; grid-template-columns: repeat(4, auto); gap: var(--space-10, 2.5rem); margin-bottom: 3.5rem; justify-content: space-evenly; }
2246@media (max-width: 639px) { .site-footer-grid { grid-template-columns: repeat(2, 1fr); } }
2247.site-footer-col-title { font-size: var(--font-size-sm, 0.875rem); font-weight: var(--font-weight-semibold, 600); color: var(--color-text-inverse, #fff); margin-bottom: var(--space-4, 1rem); display: block; letter-spacing: var(--letter-spacing-wide, 0.05em); }
2248.site-footer-links { list-style: none; padding: 0; margin: 0; }
2249.site-footer-links li { margin-bottom: 0.625rem; }
2250.site-footer-links a { color: var(--footer-link); text-decoration: none; font-size: var(--font-size-sm, 0.875rem); transition: color var(--duration-fast, 0.2s); }
2251.site-footer-links a:hover { color: var(--color-text-inverse, #fff); }
2252.site-footer-cc-link { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; color: var(--footer-link); font-size: var(--font-size-sm, 0.875rem); transition: color var(--duration-fast, 0.2s); }
2253.site-footer-cc-link:hover { color: var(--color-text-inverse, #fff); }
2254.site-footer-bottom { padding-top: var(--space-8, 2rem); border-top: 1px solid var(--footer-border); }
2255.site-footer-copyright { color: var(--footer-muted); font-size: var(--font-size-xs, 0.75rem); margin: 0; text-align: center; }
2256.site-footer-widerruf { text-align: center; margin-bottom: var(--space-6, 1.5rem); }
2257.site-footer-widerruf a {
2258    display: inline-block;
2259    font-family: var(--font-family-sans, 'Inter', sans-serif);
2260    font-size: var(--font-size-sm, 0.875rem);
2261    font-weight: var(--font-weight-semibold, 600);
2262    color: var(--color-text-inverse, #fff);
2263    border: 1px solid var(--footer-link);
2264    border-radius: var(--radius-full, 9999px);
2265    padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
2266    text-decoration: none;
2267    transition: background-color var(--duration-fast, 0.2s), color var(--duration-fast, 0.2s);
2268}
2269.site-footer-widerruf a:hover { background-color: var(--color-text-inverse, #fff); color: var(--footer-bg); }
2270</style>
2271
2272<!-- Footer -->
2273<footer class="site-footer">
2274    <div class="site-footer-inner">
2275        <!-- Columns -->
2276        <div class="site-footer-grid">
2277                        <div>
2278                <span class="site-footer-col-title">Social Media</span>
2279                <ul class="site-footer-links">
2280                                        <li>
2281                                                <a href="https://www.tiktok.com/@ocdandme.com">
2282                            TikTok                        </a>
2283                                            </li>
2284                                    </ul>
2285            </div>
2286                        <div>
2287                <span class="site-footer-col-title">Rechtliches</span>
2288                <ul class="site-footer-links">
2289                                        <li>
2290                                                <a href="https://ocdandme.com/agb/">
2291                            AGB                        </a>
2292                                            </li>
2293                                        <li>
2294                                                <a href="https://ocdandme.com/datenschutz/">
2295                            Datenschutz                        </a>
2296                                            </li>
2297                                        <li>
2298                                                <a href="https://ocdandme.com/impressum/">
2299                            Impressum                        </a>
2300                                            </li>
2301                                        <li>
2302                                                <button type="button" class="site-footer-cc-link" data-cc="show-preferencesModal">
2303                            Cookie-Einstellungen                        </button>
2304                                            </li>
2305                                    </ul>
2306            </div>
2307                        <div>
2308                <span class="site-footer-col-title">Allgemein</span>
2309                <ul class="site-footer-links">
2310                                        <li>
2311                                                <a href="/wissen/">
2312                            Wissen                        </a>
2313                                            </li>
2314                                        <li>
2315                                                <a href="/zwangsarten/">
2316                            Zwangsarten                        </a>
2317                                            </li>
2318                                        <li>
2319                                                <a href="https://app.ocdandme.com">
2320                            Login                        </a>
2321                                            </li>
2322                                        <li>
2323                                                <a href="/karriere/">
2324                            Karriere                        </a>
2325                                            </li>
2326                                    </ul>
2327            </div>
2328                        <div>
2329                <span class="site-footer-col-title">Für Therapeuten</span>
2330                <ul class="site-footer-links">
2331                                        <li>
2332                                                <a href="/therapeuten/eintrag-uebernehmen/">
2333                            Premium-Eintrag                        </a>
2334                                            </li>
2335                                        <li>
2336                                                <a href="/therapeuten/eintrag-verwalten/">
2337                            Login                        </a>
2338                                            </li>
2339                                    </ul>
2340            </div>
2341                    </div>
2342
2343        <!-- Bottom: Widerrufsbutton (§ 356a BGB) + Copyright -->
2344        <div class="site-footer-bottom">
2345            <div class="site-footer-widerruf">
2346                <a href="https://app.ocdandme.com/widerruf">Vertrag widerrufen</a>
2347            </div>
2348            <p class="site-footer-copyright">&copy; 2026 ocd&amp;me. Alle Rechte vorbehalten.</p>
2349        </div>
2350    </div>
2351</footer>
2352
2353
2354<!-- Scripts -->
2355<script src="/assets/js/bootstrap.js" defer></script>
vendor: 1 bytes, line 2355
2355
2356<script src="/assets/js/jquery.js" defer></script>
vendor: 1 bytes, line 2356
2356
2357<script src="/assets/js/scripts.js" defer></script>
vendor: 1 bytes, line 2357
2357
2358<script type="module" src="/cookieconsent-config.js" defer></script>
2358
2359
2360<!-- AOS / Owl lazy load + Dynamic Table of Contents + prefetch -->
2361<script nonce="94573f3eac17a88549eb6449e61b2bc3">
2362// Small helper to load scripts/styles when needed without blocking render
2363const lazyLoadScript = (src) => new Promise((resolve, reject) => {
2364    if (document.querySelector(`script[data-lazy='${src}']`)) return resolve();
2365    const s = document.createElement('script');
2366    s.src = src;
2367    s.dataset.lazy = src;
2368    s.onload = () => resolve();
2369    s.onerror = reject;
2370    document.head.appendChild(s);
2371});
2372
2373const lazyLoadStyle = (href) => {
2374    if (document.querySelector(`link[data-lazy='${href}']`)) return;
2375    const l = document.createElement('link');
2376    l.rel = 'stylesheet';
2377    l.href = href;
2378    l.dataset.lazy = href;
2379    document.head.appendChild(l);
2380};
2381
2382const onIdle = (cb) => {
2383    if ('requestIdleCallback' in window) {
2384        window.requestIdleCallback(cb, { timeout: 1200 });
2385    } else {
2386        setTimeout(cb, 250);
2387    }
2388};
2389
2390// Lazy-init AOS and Owl only when DOM hints they are needed
2391onIdle(() => {
2392    const hasAOS = document.querySelector('[data-aos]');
2393    const hasOwl = document.querySelector('.testimonial-slider');
2394
2395    if (hasAOS) {
2396        lazyLoadStyle('/assets/aos/aos.css');
2397        lazyLoadScript('/assets/aos/aos.js').then(() => {
2398            if (window.AOS) {
2399                window.AOS.init({ duration: 1000, once: false, easing: 'ease-in-out' });
2400            }
2401        });
2402    }
2403
2404    if (hasOwl) {
2405        lazyLoadStyle('/assets/css/owl.carousel.min.css');
2406        lazyLoadScript('/assets/js/owl.carousel.min.js').then(() => {
2407            if (window.jQuery && window.jQuery.fn && window.jQuery.fn.owlCarousel) {
2408                window.jQuery('.testimonial-slider').owlCarousel({
2409                    loop: true,
2410                    margin: 30,
2411                    nav: false,
2412                    dots: true,
2413                    autoplay: true,
2414                    autoplayTimeout: 5000,
2415                    autoplayHoverPause: true,
2416                    responsive: { 0: { items: 1 }, 768: { items: 2 }, 1024: { items: 3 } }
2417                });
2418            }
2419        });
2420    }
2421});
2422
2423// Dynamic Table of Contents
2424document.addEventListener('DOMContentLoaded', function() {
2425    if (window.innerWidth > 991) {
2426        const sections = document.querySelectorAll('h2[id], h3[id]');
2427        const tocLinks = document.querySelectorAll('.table-of-contents a');
2428        if (tocLinks.length > 0) tocLinks[0].classList.add('active');
2429
2430        tocLinks.forEach(link => {
2431            link.addEventListener('click', function(e) {
2432                e.preventDefault();
2433                const target = document.querySelector(this.getAttribute('href'));
2434                if (target) {
2435                    const offset = -100;
2436                    const top = target.getBoundingClientRect().top + window.pageYOffset + offset;
2437                    window.scrollTo({ top, behavior: 'smooth' });
2438                }
2439            });
2440        });
2441
2442        const observer = new IntersectionObserver(entries => {
2443            entries.forEach(entry => {
2444                const id = entry.target.getAttribute('id');
2445                const tocLink = document.querySelector(`.table-of-contents a[href="#${id}"]`);
2446                if (tocLink && entry.isIntersecting) {
2447                    tocLinks.forEach(l => l.classList.remove('active'));
2448                    tocLink.classList.add('active');
2449                }
2450            });
2451        }, { rootMargin: '-20% 0px -70% 0px', threshold: 0 });
2452
2453        sections.forEach(sec => observer.observe(sec));
2454
2455        window.addEventListener('scroll', () => {
2456            if ((window.pageYOffset || document.documentElement.scrollTop) < 100) {
2457                tocLinks.forEach(l => l.classList.remove('active'));
2458                if (tocLinks[0]) tocLinks[0].classList.add('active');
2459            }
2460        });
2461    }
2462});
2463
2464let resizeTimer;
2465window.addEventListener('resize', () => {
2466    clearTimeout(resizeTimer);
2467    resizeTimer = setTimeout(() => {
2468        const toc = document.querySelector('.toc-wrapper');
2469        if (toc) toc.style.display = window.innerWidth <= 991 ? 'none' : 'block';
2470    }, 250);
2471});
2472
2473// Prefetch visible/hovered internal links to speed up next navigation
2474const prefetch = (href) => {
2475    if (!href || !href.startsWith('/') || document.querySelector(`link[data-prefetch='${href}']`)) return;
2476    const l = document.createElement('link');
2477    l.rel = 'prefetch';
2478    l.as = 'document';
2479    l.href = href;
2480    l.dataset.prefetch = href;
2481    document.head.appendChild(l);
2482};
2483
2484const observePrefetchLinks = () => {
2485    const links = document.querySelectorAll('.header-link-list a, .table-of-contents a, .article-card a');
2486    if (!links.length) return;
2487
2488    const io = new IntersectionObserver((entries) => {
2489        entries.forEach(entry => {
2490            if (entry.isIntersecting) {
2491                prefetch(entry.target.href);
2492                io.unobserve(entry.target);
2493            }
2494        });
2495    }, { rootMargin: '200px 0px' });
2496
2497    links.forEach(link => {
2498        io.observe(link);
2499        link.addEventListener('mouseenter', () => prefetch(link.href));
2500    });
2501};
2502
2503if (document.readyState === 'loading') {
2504    document.addEventListener('DOMContentLoaded', observePrefetchLinks);
2505} else {
2506    observePrefetchLinks();
2507}
2508</script>
2508
2509
2510</body>
2511</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.