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&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&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&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&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&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&me Startseite"> 664 <img src="/assets/images/logo/logo.svg" alt="ocd&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&me Startseite"> 713 <img src="/assets/images/logo/logo.svg" alt="ocd&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 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 ⬠/ 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 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 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 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 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 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 ⬠/ 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- & 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 & 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 â¬</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 â¬</s> nur 69 â¬</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 â¬</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 ⬠einmalig für 4 Monate</span> 1964 <span class="save-pill">31 % 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 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 ⬠gegenüber 4 à 24,90 ⬠bei monatlicher 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 ⬠im Monat, monatlich 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 â¬</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 ⬠einmalig für 12 Monate</span> 2004 <span class="save-pill">40 % 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 â¬</strong> gegenüber 12 à 24,90 ⬠bei monatlicher 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 ⬠im Monat, monatlich 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 â¬. 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 ⬠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
2091⬠pro Monat, 69 ⬠für vier Monate (17,25 ⬠im Monat) oder 179 ⬠für zwölf Monate (14,92 ⬠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 â¬. 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">© 2026 ocd&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.