{"uuid":"bee4e339-6f7b-4533-abc3-7ba7b7319ef2","provider":"wsw-nova","model":"sirius","image_strategy":"ai_self_select","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n#wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--basis {\n background: transparent;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--basis h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 2rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--basis h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-basis-text {\n display: block;\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.08rem, 1.7vw, 1.25rem);\n line-height: 1.75;\n max-width: 780px;\n margin-bottom: 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-basis-text:last-of-type {\n margin-bottom: 2.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-basis-cta {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.95rem;\n font-weight: 600;\n text-decoration: none;\n transition: color 0.25s ease-out, gap 0.25s ease-out;\n cursor: pointer;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-basis-cta:hover {\n color: #fbb95e;\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-basis-cta:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-basis-cta .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-basis-cta:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* Dark theme */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--basis h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--basis h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--basis h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--basis h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-basis-text,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-basis-text,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-basis-text,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-basis-text {\n color: rgba(255,255,255,0.88);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--basis h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-basis-text {\n color: rgba(255,255,255,0.9);\n }\n\n/* ── Section: Warum modernes Webdesign mehr können muss ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--webdesign {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--webdesign::before {\n content: '';\n position: absolute;\n top: -100px;\n left: -100px;\n width: 360px;\n height: 360px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--webdesign h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-webdesign-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 720px;\n margin: 0 0 2.5rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-webdesign-body {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.7;\n max-width: 760px;\n margin: 0 0 2.5rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-webdesign-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 1.25rem;\n }\n\n /* Question checklist */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-webdesign-checklist {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.85rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wd-check-item {\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 10px;\n padding: 1.15rem 1.25rem;\n cursor: default;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wd-check-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: rgba(246,156,30,0.12);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.8rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wd-check-text {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.55;\n }\n\n /* CTA link */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-webdesign-cta {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.92rem;\n font-weight: 600;\n text-decoration: none;\n transition: color 0.25s ease-out, gap 0.25s ease-out;\n cursor: pointer;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-webdesign-cta:hover {\n color: #fbb95e;\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-webdesign-cta:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-webdesign-cta .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-webdesign-cta:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* Light theme override */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--webdesign,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--webdesign,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--webdesign,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--webdesign,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--webdesign {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-webdesign-checklist {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wd-check-item {\n padding: 1rem 1.1rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-webdesign-cta .pp-arrow {\n transition: none;\n }\n }\n\n/* ── Section: Wann ein Website-Relaunch sinnvoll ist ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--relaunch {\n background: transparent;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--relaunch h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--relaunch h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 2.5rem 0;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 0.85rem;\n margin-bottom: 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-item {\n display: flex;\n align-items: flex-start;\n gap: 0.75rem;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46,46,46,0.08);\n border-radius: 10px;\n padding: 1.15rem 1.25rem;\n cursor: default;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ri-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: rgba(246,156,30,0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.75rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ri-text {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.6;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-closing {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin-bottom: 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-cta {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.95rem;\n font-weight: 600;\n text-decoration: none;\n transition: color 0.25s ease-out, gap 0.25s ease-out;\n cursor: pointer;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-cta:hover {\n color: #fbb95e;\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-cta:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-cta .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-cta:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* Dark themes */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--relaunch h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--relaunch h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--relaunch h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--relaunch h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-intro {\n color: rgba(255,255,255,0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-closing,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-closing,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-closing,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-closing {\n color: rgba(255,255,255,0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-item,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-item,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-item,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-item {\n background: rgba(255,255,255,0.06);\n border-color: rgba(255,255,255,0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ri-text,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ri-text,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ri-text,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ri-text {\n color: rgba(255,255,255,0.88);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ri-icon,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ri-icon,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ri-icon,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ri-icon {\n background: rgba(246,156,30,0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--relaunch h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-intro {\n color: rgba(255,255,255,0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-closing {\n color: rgba(255,255,255,0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-item {\n background: rgba(255,255,255,0.12);\n border-color: rgba(255,255,255,0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ri-text {\n color: var(--wsw-color-white, #fff);\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-item {\n padding: 1rem 1.1rem;\n }\n }\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-relaunch-cta .pp-arrow {\n transition: none;\n }\n }\n\n#wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 {\n box-sizing: border-box;\n font-family: inherit;\n background: transparent;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n box-sizing: inherit;\n }\n\n /* ── Hero Section ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n position: relative;\n min-height: 85vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background: linear-gradient(135deg, var(--wsw-color-black, #2e2e2e) 0%, #1a1a1a 100%);\n padding: 4rem 2rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.2;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n background: linear-gradient(180deg, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0.85) 100%);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-content {\n position: relative;\n z-index: 3;\n max-width: 880px;\n text-align: center;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-badge {\n display: inline-block;\n padding: 0.4rem 1.2rem;\n border: 1px solid var(--wsw-color-accent, #f69c1e);\n border-radius: 100px;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n letter-spacing: 0.12rem;\n text-transform: uppercase;\n margin-bottom: 1.5rem;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero h1 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(2rem, 5.5vw, 3.6rem);\n line-height: 1.08;\n margin: 0 0 1.25rem 0;\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.7s ease-out 0.15s, transform 0.7s ease-out 0.15s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-subline {\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2.2vw, 1.35rem);\n line-height: 1.45;\n max-width: 720px;\n margin: 0 auto 1.75rem;\n font-weight: 400;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.7s ease-out 0.3s, transform 0.7s ease-out 0.3s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-intro {\n color: rgba(255,255,255,0.82);\n font-size: clamp(0.95rem, 1.6vw, 1.1rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 auto 2.5rem;\n opacity: 0;\n transform: translateY(18px);\n transition: opacity 0.7s ease-out 0.45s, transform 0.7s ease-out 0.45s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.7s ease-out 0.6s, transform 0.7s ease-out 0.6s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border-radius: 6px;\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.95rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n cursor: pointer;\n border: 2px solid transparent;\n transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary {\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline {\n background: transparent;\n color: var(--wsw-color-white, #fff);\n border-color: rgba(255,255,255,0.4);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline:hover {\n border-color: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n /* ── Scroll indicator ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n position: absolute;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n z-index: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n color: rgba(255,255,255,0.45);\n font-size: 0.75rem;\n letter-spacing: 0.1rem;\n text-transform: uppercase;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-scroll-line {\n width: 1px;\n height: 40px;\n background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);\n animation: ppScrollPulse 2s ease-in-out infinite;\n }\n\n @keyframes ppScrollPulse {\n 0%, 100% { opacity: 0.3; transform: scaleY(1); }\n 50% { opacity: 1; transform: scaleY(1.15); }\n }\n\n /* ── Animate in ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-badge,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible h1,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-subline,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-intro,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-ctas {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n min-height: 70vh;\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n flex-direction: column;\n align-items: stretch;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n justify-content: center;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n display: none;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n/* ── Section: Warum sich Sichtbarkeit verändert hat ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 4.5rem 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section-inner {\n max-width: 960px;\n margin: 0 auto;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 2rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Split layout */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 3rem;\n align-items: start;\n margin-top: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n display: block;\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n margin-bottom: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span:last-child {\n margin-bottom: 0;\n }\n\n /* Highlight box */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2rem 2rem 2.25rem;\n border-left: 4px solid var(--wsw-color-accent, #f69c1e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 120px;\n height: 120px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box .pp-hb-label {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box span.pp-hb-text {\n display: block;\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* Image block */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n aspect-ratio: 4 / 3;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.5s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual:hover img {\n transform: scale(1.03);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual .pp-img-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 50%, rgba(46,46,46,0.35) 100%);\n pointer-events: none;\n }\n\n /* Scroll animations */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d1 { transition-delay: 0.1s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d2 { transition-delay: 0.2s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d3 { transition-delay: 0.35s; }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.88);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: rgba(255,255,255,0.06);\n border-left-color: var(--wsw-color-accent, #f69c1e);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.9);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n order: -1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n padding: 1.5rem 1.5rem 1.5rem 1.75rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 1;\n transform: none;\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n transition: none;\n }\n }\n\n/* ── Section: 5 Bausteine ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars::before {\n content: '';\n position: absolute;\n top: -120px;\n right: -120px;\n width: 400px;\n height: 400px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 0 3rem 0;\n }\n\n /* Pillar cards grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));\n gap: 1.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n --pp-card-radius: 12px;\n --pp-card-transition: 0.3s ease-out;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: var(--pp-card-radius);\n padding: 2rem 1.75rem 1.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n position: relative;\n overflow: hidden;\n transition: transform var(--pp-card-transition), border-color var(--pp-card-transition), box-shadow var(--pp-card-transition);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:hover {\n transform: translateY(-4px);\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 12px 32px rgba(0,0,0,0.25);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:focus-within {\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 0 0 3px rgba(246,156,30,0.25);\n }\n\n /* Number indicator */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n font-weight: 700;\n flex-shrink: 0;\n margin-bottom: 0.25rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card h3 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-desc {\n color: rgba(255,255,255,0.72);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.65;\n }\n\n /* Card link */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.88rem;\n font-weight: 600;\n text-decoration: none;\n margin-top: auto;\n padding-top: 0.5rem;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover {\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* Scroll animation delays for cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d4 { transition-delay: 0.45s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d5 { transition-delay: 0.55s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d6 { transition-delay: 0.65s; }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n transition: none;\n }\n }\n\n/* ── Section: SEO, GEO, KI-Sichtbarkeit erklärt ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 3rem 0;\n }\n\n /* Three-column definition cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n --pp-ec-radius: 12px;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ec-radius);\n padding: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);\n }\n\n /* Card header strip */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header {\n padding: 1.5rem 1.75rem 1.25rem;\n position: relative;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 1.75rem;\n right: 1.75rem;\n height: 1px;\n background: rgba(46, 46, 46, 0.08);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.3rem;\n margin-bottom: 0.75rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-abbr {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n /* Card body */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-body {\n padding: 1.25rem 1.75rem 1.75rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.7;\n }\n\n /* Takeaway note at bottom */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway::before {\n content: '';\n position: absolute;\n bottom: -60px;\n left: -60px;\n width: 180px;\n height: 180px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n background: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 960px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n transition: none;\n }\n }\n\n#wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 {\n box-sizing: border-box;\n font-family: inherit;\n background: transparent;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n box-sizing: inherit;\n }\n\n /* ── Hero Section ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n position: relative;\n min-height: 85vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background: linear-gradient(135deg, var(--wsw-color-black, #2e2e2e) 0%, #1a1a1a 100%);\n padding: 4rem 2rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.2;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n background: linear-gradient(180deg, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0.85) 100%);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-content {\n position: relative;\n z-index: 3;\n max-width: 880px;\n text-align: center;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-badge {\n display: inline-block;\n padding: 0.4rem 1.2rem;\n border: 1px solid var(--wsw-color-accent, #f69c1e);\n border-radius: 100px;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n letter-spacing: 0.12rem;\n text-transform: uppercase;\n margin-bottom: 1.5rem;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero h1 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(2rem, 5.5vw, 3.6rem);\n line-height: 1.08;\n margin: 0 0 1.25rem 0;\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.7s ease-out 0.15s, transform 0.7s ease-out 0.15s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-subline {\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2.2vw, 1.35rem);\n line-height: 1.45;\n max-width: 720px;\n margin: 0 auto 1.75rem;\n font-weight: 400;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.7s ease-out 0.3s, transform 0.7s ease-out 0.3s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-intro {\n color: rgba(255,255,255,0.82);\n font-size: clamp(0.95rem, 1.6vw, 1.1rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 auto 2.5rem;\n opacity: 0;\n transform: translateY(18px);\n transition: opacity 0.7s ease-out 0.45s, transform 0.7s ease-out 0.45s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.7s ease-out 0.6s, transform 0.7s ease-out 0.6s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border-radius: 6px;\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.95rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n cursor: pointer;\n border: 2px solid transparent;\n transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary {\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline {\n background: transparent;\n color: var(--wsw-color-white, #fff);\n border-color: rgba(255,255,255,0.4);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline:hover {\n border-color: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n /* ── Scroll indicator ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n position: absolute;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n z-index: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n color: rgba(255,255,255,0.45);\n font-size: 0.75rem;\n letter-spacing: 0.1rem;\n text-transform: uppercase;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-scroll-line {\n width: 1px;\n height: 40px;\n background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);\n animation: ppScrollPulse 2s ease-in-out infinite;\n }\n\n @keyframes ppScrollPulse {\n 0%, 100% { opacity: 0.3; transform: scaleY(1); }\n 50% { opacity: 1; transform: scaleY(1.15); }\n }\n\n /* ── Animate in ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-badge,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible h1,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-subline,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-intro,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-ctas {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n min-height: 70vh;\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n flex-direction: column;\n align-items: stretch;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n justify-content: center;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n display: none;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n/* ── Section: Warum sich Sichtbarkeit verändert hat ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 4.5rem 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section-inner {\n max-width: 960px;\n margin: 0 auto;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 2rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Split layout */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 3rem;\n align-items: start;\n margin-top: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n display: block;\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n margin-bottom: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span:last-child {\n margin-bottom: 0;\n }\n\n /* Highlight box */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2rem 2rem 2.25rem;\n border-left: 4px solid var(--wsw-color-accent, #f69c1e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 120px;\n height: 120px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box .pp-hb-label {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box span.pp-hb-text {\n display: block;\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* Image block */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n aspect-ratio: 4 / 3;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.5s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual:hover img {\n transform: scale(1.03);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual .pp-img-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 50%, rgba(46,46,46,0.35) 100%);\n pointer-events: none;\n }\n\n /* Scroll animations */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d1 { transition-delay: 0.1s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d2 { transition-delay: 0.2s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d3 { transition-delay: 0.35s; }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.88);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: rgba(255,255,255,0.06);\n border-left-color: var(--wsw-color-accent, #f69c1e);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.9);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n order: -1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n padding: 1.5rem 1.5rem 1.5rem 1.75rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 1;\n transform: none;\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n transition: none;\n }\n }\n\n/* ── Section: 5 Bausteine ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars::before {\n content: '';\n position: absolute;\n top: -120px;\n right: -120px;\n width: 400px;\n height: 400px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 0 3rem 0;\n }\n\n /* Pillar cards grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));\n gap: 1.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n --pp-card-radius: 12px;\n --pp-card-transition: 0.3s ease-out;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: var(--pp-card-radius);\n padding: 2rem 1.75rem 1.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n position: relative;\n overflow: hidden;\n transition: transform var(--pp-card-transition), border-color var(--pp-card-transition), box-shadow var(--pp-card-transition);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:hover {\n transform: translateY(-4px);\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 12px 32px rgba(0,0,0,0.25);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:focus-within {\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 0 0 3px rgba(246,156,30,0.25);\n }\n\n /* Number indicator */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n font-weight: 700;\n flex-shrink: 0;\n margin-bottom: 0.25rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card h3 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-desc {\n color: rgba(255,255,255,0.72);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.65;\n }\n\n /* Card link */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.88rem;\n font-weight: 600;\n text-decoration: none;\n margin-top: auto;\n padding-top: 0.5rem;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover {\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* Scroll animation delays for cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d4 { transition-delay: 0.45s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d5 { transition-delay: 0.55s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d6 { transition-delay: 0.65s; }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n transition: none;\n }\n }\n\n/* ── Section: SEO, GEO, KI-Sichtbarkeit erklärt ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 3rem 0;\n }\n\n /* Three-column definition cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n --pp-ec-radius: 12px;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ec-radius);\n padding: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);\n }\n\n /* Card header strip */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header {\n padding: 1.5rem 1.75rem 1.25rem;\n position: relative;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 1.75rem;\n right: 1.75rem;\n height: 1px;\n background: rgba(46, 46, 46, 0.08);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.3rem;\n margin-bottom: 0.75rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-abbr {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n /* Card body */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-body {\n padding: 1.25rem 1.75rem 1.75rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.7;\n }\n\n /* Takeaway note at bottom */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway::before {\n content: '';\n position: absolute;\n bottom: -60px;\n left: -60px;\n width: 180px;\n height: 180px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n background: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 960px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n transition: none;\n }\n }\n\n/* ── Section 5: Was eine gute Website heute leisten muss ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website::before {\n content: '';\n position: absolute;\n bottom: -100px;\n left: -100px;\n width: 350px;\n height: 350px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2vw, 1.25rem);\n font-style: italic;\n margin-bottom: 2.5rem;\n position: relative;\n padding-left: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0.15em;\n bottom: 0.15em;\n width: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Checklist grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 12px;\n padding: 1.5rem 1.5rem;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item:hover {\n transform: translateY(-3px);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-text {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.6;\n }\n\n /* Google-Hinweis */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note::before {\n content: '';\n position: absolute;\n top: -30px;\n right: -30px;\n width: 100px;\n height: 100px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.7;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n padding: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n transition: none;\n }\n }\n\n#wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 {\n box-sizing: border-box;\n font-family: inherit;\n background: transparent;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n box-sizing: inherit;\n }\n\n /* ── Hero Section ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n position: relative;\n min-height: 85vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background: linear-gradient(135deg, var(--wsw-color-black, #2e2e2e) 0%, #1a1a1a 100%);\n padding: 4rem 2rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.2;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n background: linear-gradient(180deg, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0.85) 100%);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-content {\n position: relative;\n z-index: 3;\n max-width: 880px;\n text-align: center;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-badge {\n display: inline-block;\n padding: 0.4rem 1.2rem;\n border: 1px solid var(--wsw-color-accent, #f69c1e);\n border-radius: 100px;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n letter-spacing: 0.12rem;\n text-transform: uppercase;\n margin-bottom: 1.5rem;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero h1 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(2rem, 5.5vw, 3.6rem);\n line-height: 1.08;\n margin: 0 0 1.25rem 0;\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.7s ease-out 0.15s, transform 0.7s ease-out 0.15s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-subline {\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2.2vw, 1.35rem);\n line-height: 1.45;\n max-width: 720px;\n margin: 0 auto 1.75rem;\n font-weight: 400;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.7s ease-out 0.3s, transform 0.7s ease-out 0.3s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-intro {\n color: rgba(255,255,255,0.82);\n font-size: clamp(0.95rem, 1.6vw, 1.1rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 auto 2.5rem;\n opacity: 0;\n transform: translateY(18px);\n transition: opacity 0.7s ease-out 0.45s, transform 0.7s ease-out 0.45s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.7s ease-out 0.6s, transform 0.7s ease-out 0.6s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border-radius: 6px;\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.95rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n cursor: pointer;\n border: 2px solid transparent;\n transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary {\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline {\n background: transparent;\n color: var(--wsw-color-white, #fff);\n border-color: rgba(255,255,255,0.4);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline:hover {\n border-color: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n /* ── Scroll indicator ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n position: absolute;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n z-index: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n color: rgba(255,255,255,0.45);\n font-size: 0.75rem;\n letter-spacing: 0.1rem;\n text-transform: uppercase;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-scroll-line {\n width: 1px;\n height: 40px;\n background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);\n animation: ppScrollPulse 2s ease-in-out infinite;\n }\n\n @keyframes ppScrollPulse {\n 0%, 100% { opacity: 0.3; transform: scaleY(1); }\n 50% { opacity: 1; transform: scaleY(1.15); }\n }\n\n /* ── Animate in ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-badge,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible h1,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-subline,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-intro,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-ctas {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n min-height: 70vh;\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n flex-direction: column;\n align-items: stretch;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n justify-content: center;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n display: none;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n/* ── Section: Warum sich Sichtbarkeit verändert hat ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 4.5rem 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section-inner {\n max-width: 960px;\n margin: 0 auto;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 2rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Split layout */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 3rem;\n align-items: start;\n margin-top: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n display: block;\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n margin-bottom: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span:last-child {\n margin-bottom: 0;\n }\n\n /* Highlight box */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2rem 2rem 2.25rem;\n border-left: 4px solid var(--wsw-color-accent, #f69c1e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 120px;\n height: 120px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box .pp-hb-label {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box span.pp-hb-text {\n display: block;\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* Image block */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n aspect-ratio: 4 / 3;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.5s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual:hover img {\n transform: scale(1.03);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual .pp-img-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 50%, rgba(46,46,46,0.35) 100%);\n pointer-events: none;\n }\n\n /* Scroll animations */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d1 { transition-delay: 0.1s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d2 { transition-delay: 0.2s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d3 { transition-delay: 0.35s; }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.88);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: rgba(255,255,255,0.06);\n border-left-color: var(--wsw-color-accent, #f69c1e);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.9);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n order: -1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n padding: 1.5rem 1.5rem 1.5rem 1.75rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 1;\n transform: none;\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n transition: none;\n }\n }\n\n/* ── Section: 5 Bausteine ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars::before {\n content: '';\n position: absolute;\n top: -120px;\n right: -120px;\n width: 400px;\n height: 400px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 0 3rem 0;\n }\n\n /* Pillar cards grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));\n gap: 1.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n --pp-card-radius: 12px;\n --pp-card-transition: 0.3s ease-out;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: var(--pp-card-radius);\n padding: 2rem 1.75rem 1.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n position: relative;\n overflow: hidden;\n transition: transform var(--pp-card-transition), border-color var(--pp-card-transition), box-shadow var(--pp-card-transition);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:hover {\n transform: translateY(-4px);\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 12px 32px rgba(0,0,0,0.25);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:focus-within {\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 0 0 3px rgba(246,156,30,0.25);\n }\n\n /* Number indicator */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n font-weight: 700;\n flex-shrink: 0;\n margin-bottom: 0.25rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card h3 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-desc {\n color: rgba(255,255,255,0.72);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.65;\n }\n\n /* Card link */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.88rem;\n font-weight: 600;\n text-decoration: none;\n margin-top: auto;\n padding-top: 0.5rem;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover {\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* Scroll animation delays for cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d4 { transition-delay: 0.45s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d5 { transition-delay: 0.55s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d6 { transition-delay: 0.65s; }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n transition: none;\n }\n }\n\n/* ── Section: SEO, GEO, KI-Sichtbarkeit erklärt ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 3rem 0;\n }\n\n /* Three-column definition cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n --pp-ec-radius: 12px;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ec-radius);\n padding: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);\n }\n\n /* Card header strip */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header {\n padding: 1.5rem 1.75rem 1.25rem;\n position: relative;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 1.75rem;\n right: 1.75rem;\n height: 1px;\n background: rgba(46, 46, 46, 0.08);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.3rem;\n margin-bottom: 0.75rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-abbr {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n /* Card body */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-body {\n padding: 1.25rem 1.75rem 1.75rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.7;\n }\n\n /* Takeaway note at bottom */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway::before {\n content: '';\n position: absolute;\n bottom: -60px;\n left: -60px;\n width: 180px;\n height: 180px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n background: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 960px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n transition: none;\n }\n }\n\n/* ── Section 5: Was eine gute Website heute leisten muss ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website::before {\n content: '';\n position: absolute;\n bottom: -100px;\n left: -100px;\n width: 350px;\n height: 350px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2vw, 1.25rem);\n font-style: italic;\n margin-bottom: 2.5rem;\n position: relative;\n padding-left: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0.15em;\n bottom: 0.15em;\n width: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Checklist grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 12px;\n padding: 1.5rem 1.5rem;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item:hover {\n transform: translateY(-3px);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-text {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.6;\n }\n\n /* Google-Hinweis */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note::before {\n content: '';\n position: absolute;\n top: -30px;\n right: -30px;\n width: 100px;\n height: 100px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.7;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n padding: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n transition: none;\n }\n }\n\n/* ── Section 6: Für wen moderne Sichtbarkeit besonders wichtig ist ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 2.5rem 0;\n }\n\n /* Audience grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n --pp-ac-radius: 12px;\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ac-radius);\n padding: 1.5rem 1.5rem;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 12px;\n background: rgba(246, 156, 30, 0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 1.25rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1rem, 1.8vw, 1.15rem);\n line-height: 1.25;\n margin: 0 0 0.35rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.88rem, 1.2vw, 0.95rem);\n line-height: 1.6;\n }\n\n /* Closing statement */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing::before {\n content: '';\n position: absolute;\n bottom: -50px;\n right: -50px;\n width: 160px;\n height: 160px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-acl-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-acl-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n background: rgba(246, 156, 30, 0.15);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n background: rgba(255, 255, 255, 0.2);\n color: var(--wsw-color-white, #fff);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n padding: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n transition: none;\n }\n }\n\n#wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 {\n box-sizing: border-box;\n font-family: inherit;\n background: transparent;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n box-sizing: inherit;\n }\n\n /* ── Hero Section ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n position: relative;\n min-height: 85vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background: linear-gradient(135deg, var(--wsw-color-black, #2e2e2e) 0%, #1a1a1a 100%);\n padding: 4rem 2rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.2;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n background: linear-gradient(180deg, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0.85) 100%);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-content {\n position: relative;\n z-index: 3;\n max-width: 880px;\n text-align: center;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-badge {\n display: inline-block;\n padding: 0.4rem 1.2rem;\n border: 1px solid var(--wsw-color-accent, #f69c1e);\n border-radius: 100px;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n letter-spacing: 0.12rem;\n text-transform: uppercase;\n margin-bottom: 1.5rem;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero h1 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(2rem, 5.5vw, 3.6rem);\n line-height: 1.08;\n margin: 0 0 1.25rem 0;\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.7s ease-out 0.15s, transform 0.7s ease-out 0.15s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-subline {\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2.2vw, 1.35rem);\n line-height: 1.45;\n max-width: 720px;\n margin: 0 auto 1.75rem;\n font-weight: 400;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.7s ease-out 0.3s, transform 0.7s ease-out 0.3s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-intro {\n color: rgba(255,255,255,0.82);\n font-size: clamp(0.95rem, 1.6vw, 1.1rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 auto 2.5rem;\n opacity: 0;\n transform: translateY(18px);\n transition: opacity 0.7s ease-out 0.45s, transform 0.7s ease-out 0.45s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.7s ease-out 0.6s, transform 0.7s ease-out 0.6s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border-radius: 6px;\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.95rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n cursor: pointer;\n border: 2px solid transparent;\n transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary {\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline {\n background: transparent;\n color: var(--wsw-color-white, #fff);\n border-color: rgba(255,255,255,0.4);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline:hover {\n border-color: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n /* ── Scroll indicator ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n position: absolute;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n z-index: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n color: rgba(255,255,255,0.45);\n font-size: 0.75rem;\n letter-spacing: 0.1rem;\n text-transform: uppercase;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-scroll-line {\n width: 1px;\n height: 40px;\n background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);\n animation: ppScrollPulse 2s ease-in-out infinite;\n }\n\n @keyframes ppScrollPulse {\n 0%, 100% { opacity: 0.3; transform: scaleY(1); }\n 50% { opacity: 1; transform: scaleY(1.15); }\n }\n\n /* ── Animate in ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-badge,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible h1,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-subline,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-intro,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-ctas {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n min-height: 70vh;\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n flex-direction: column;\n align-items: stretch;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n justify-content: center;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n display: none;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n/* ── Section: Warum sich Sichtbarkeit verändert hat ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 4.5rem 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section-inner {\n max-width: 960px;\n margin: 0 auto;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 2rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Split layout */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 3rem;\n align-items: start;\n margin-top: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n display: block;\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n margin-bottom: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span:last-child {\n margin-bottom: 0;\n }\n\n /* Highlight box */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2rem 2rem 2.25rem;\n border-left: 4px solid var(--wsw-color-accent, #f69c1e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 120px;\n height: 120px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box .pp-hb-label {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box span.pp-hb-text {\n display: block;\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* Image block */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n aspect-ratio: 4 / 3;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.5s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual:hover img {\n transform: scale(1.03);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual .pp-img-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 50%, rgba(46,46,46,0.35) 100%);\n pointer-events: none;\n }\n\n /* Scroll animations */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d1 { transition-delay: 0.1s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d2 { transition-delay: 0.2s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d3 { transition-delay: 0.35s; }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.88);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: rgba(255,255,255,0.06);\n border-left-color: var(--wsw-color-accent, #f69c1e);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.9);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n order: -1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n padding: 1.5rem 1.5rem 1.5rem 1.75rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 1;\n transform: none;\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n transition: none;\n }\n }\n\n/* ── Section: 5 Bausteine ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars::before {\n content: '';\n position: absolute;\n top: -120px;\n right: -120px;\n width: 400px;\n height: 400px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 0 3rem 0;\n }\n\n /* Pillar cards grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));\n gap: 1.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n --pp-card-radius: 12px;\n --pp-card-transition: 0.3s ease-out;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: var(--pp-card-radius);\n padding: 2rem 1.75rem 1.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n position: relative;\n overflow: hidden;\n transition: transform var(--pp-card-transition), border-color var(--pp-card-transition), box-shadow var(--pp-card-transition);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:hover {\n transform: translateY(-4px);\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 12px 32px rgba(0,0,0,0.25);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:focus-within {\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 0 0 3px rgba(246,156,30,0.25);\n }\n\n /* Number indicator */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n font-weight: 700;\n flex-shrink: 0;\n margin-bottom: 0.25rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card h3 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-desc {\n color: rgba(255,255,255,0.72);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.65;\n }\n\n /* Card link */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.88rem;\n font-weight: 600;\n text-decoration: none;\n margin-top: auto;\n padding-top: 0.5rem;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover {\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* Scroll animation delays for cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d4 { transition-delay: 0.45s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d5 { transition-delay: 0.55s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d6 { transition-delay: 0.65s; }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n transition: none;\n }\n }\n\n/* ── Section: SEO, GEO, KI-Sichtbarkeit erklärt ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 3rem 0;\n }\n\n /* Three-column definition cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n --pp-ec-radius: 12px;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ec-radius);\n padding: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);\n }\n\n /* Card header strip */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header {\n padding: 1.5rem 1.75rem 1.25rem;\n position: relative;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 1.75rem;\n right: 1.75rem;\n height: 1px;\n background: rgba(46, 46, 46, 0.08);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.3rem;\n margin-bottom: 0.75rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-abbr {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n /* Card body */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-body {\n padding: 1.25rem 1.75rem 1.75rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.7;\n }\n\n /* Takeaway note at bottom */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway::before {\n content: '';\n position: absolute;\n bottom: -60px;\n left: -60px;\n width: 180px;\n height: 180px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n background: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 960px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n transition: none;\n }\n }\n\n/* ── Section 5: Was eine gute Website heute leisten muss ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website::before {\n content: '';\n position: absolute;\n bottom: -100px;\n left: -100px;\n width: 350px;\n height: 350px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2vw, 1.25rem);\n font-style: italic;\n margin-bottom: 2.5rem;\n position: relative;\n padding-left: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0.15em;\n bottom: 0.15em;\n width: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Checklist grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 12px;\n padding: 1.5rem 1.5rem;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item:hover {\n transform: translateY(-3px);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-text {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.6;\n }\n\n /* Google-Hinweis */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note::before {\n content: '';\n position: absolute;\n top: -30px;\n right: -30px;\n width: 100px;\n height: 100px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.7;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n padding: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n transition: none;\n }\n }\n\n/* ── Section 6: Für wen moderne Sichtbarkeit besonders wichtig ist ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 2.5rem 0;\n }\n\n /* Audience grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n --pp-ac-radius: 12px;\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ac-radius);\n padding: 1.5rem 1.5rem;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 12px;\n background: rgba(246, 156, 30, 0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 1.25rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1rem, 1.8vw, 1.15rem);\n line-height: 1.25;\n margin: 0 0 0.35rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.88rem, 1.2vw, 0.95rem);\n line-height: 1.6;\n }\n\n /* Closing statement */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing::before {\n content: '';\n position: absolute;\n bottom: -50px;\n right: -50px;\n width: 160px;\n height: 160px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-acl-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-acl-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n background: rgba(246, 156, 30, 0.15);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n background: rgba(255, 255, 255, 0.2);\n color: var(--wsw-color-white, #fff);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n padding: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n transition: none;\n }\n }\n\n/* ── Section 7: Woran viele Websites heute scheitern ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems::before {\n content: '';\n position: absolute;\n top: -80px;\n left: -80px;\n width: 320px;\n height: 320px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 0 2.5rem 0;\n }\n\n /* Problem list */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n display: flex;\n align-items: flex-start;\n gap: 0.85rem;\n background: rgba(255,255,255,0.04);\n border: 1px solid rgba(255,255,255,0.07);\n border-radius: 10px;\n padding: 1.25rem 1.35rem;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out, background 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item:hover {\n transform: translateY(-3px);\n border-color: rgba(246,156,30,0.4);\n background: rgba(255,255,255,0.06);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pi-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: rgba(246,156,30,0.12);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pi-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.6;\n }\n\n /* CTA bar */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta {\n display: flex;\n align-items: center;\n gap: 2rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 140px;\n height: 140px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-heading {\n display: block;\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.25;\n margin-bottom: 0.4rem;\n font-weight: 600;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-sub {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.88rem, 1.2vw, 0.95rem);\n line-height: 1.5;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border-radius: 6px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.92rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n border: 2px solid var(--wsw-color-accent, #f69c1e);\n flex-shrink: 0;\n transition: background 0.25s ease-out, color 0.25s ease-out, transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n padding: 1rem 1.15rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta {\n flex-direction: column;\n align-items: stretch;\n gap: 1.25rem;\n padding: 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n justify-content: center;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n transition: none;\n }\n }\n\n#wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 {\n box-sizing: border-box;\n font-family: inherit;\n background: transparent;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n box-sizing: inherit;\n }\n\n /* ── Hero Section ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n position: relative;\n min-height: 85vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background: linear-gradient(135deg, var(--wsw-color-black, #2e2e2e) 0%, #1a1a1a 100%);\n padding: 4rem 2rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.2;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n background: linear-gradient(180deg, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0.85) 100%);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-content {\n position: relative;\n z-index: 3;\n max-width: 880px;\n text-align: center;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-badge {\n display: inline-block;\n padding: 0.4rem 1.2rem;\n border: 1px solid var(--wsw-color-accent, #f69c1e);\n border-radius: 100px;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n letter-spacing: 0.12rem;\n text-transform: uppercase;\n margin-bottom: 1.5rem;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero h1 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(2rem, 5.5vw, 3.6rem);\n line-height: 1.08;\n margin: 0 0 1.25rem 0;\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.7s ease-out 0.15s, transform 0.7s ease-out 0.15s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-subline {\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2.2vw, 1.35rem);\n line-height: 1.45;\n max-width: 720px;\n margin: 0 auto 1.75rem;\n font-weight: 400;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.7s ease-out 0.3s, transform 0.7s ease-out 0.3s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-intro {\n color: rgba(255,255,255,0.82);\n font-size: clamp(0.95rem, 1.6vw, 1.1rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 auto 2.5rem;\n opacity: 0;\n transform: translateY(18px);\n transition: opacity 0.7s ease-out 0.45s, transform 0.7s ease-out 0.45s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.7s ease-out 0.6s, transform 0.7s ease-out 0.6s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border-radius: 6px;\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.95rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n cursor: pointer;\n border: 2px solid transparent;\n transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary {\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline {\n background: transparent;\n color: var(--wsw-color-white, #fff);\n border-color: rgba(255,255,255,0.4);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline:hover {\n border-color: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n /* ── Scroll indicator ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n position: absolute;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n z-index: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n color: rgba(255,255,255,0.45);\n font-size: 0.75rem;\n letter-spacing: 0.1rem;\n text-transform: uppercase;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-scroll-line {\n width: 1px;\n height: 40px;\n background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);\n animation: ppScrollPulse 2s ease-in-out infinite;\n }\n\n @keyframes ppScrollPulse {\n 0%, 100% { opacity: 0.3; transform: scaleY(1); }\n 50% { opacity: 1; transform: scaleY(1.15); }\n }\n\n /* ── Animate in ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-badge,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible h1,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-subline,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-intro,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-ctas {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n min-height: 70vh;\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n flex-direction: column;\n align-items: stretch;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n justify-content: center;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n display: none;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n/* ── Section: Warum sich Sichtbarkeit verändert hat ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 4.5rem 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section-inner {\n max-width: 960px;\n margin: 0 auto;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 2rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Split layout */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 3rem;\n align-items: start;\n margin-top: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n display: block;\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n margin-bottom: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span:last-child {\n margin-bottom: 0;\n }\n\n /* Highlight box */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2rem 2rem 2.25rem;\n border-left: 4px solid var(--wsw-color-accent, #f69c1e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 120px;\n height: 120px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box .pp-hb-label {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box span.pp-hb-text {\n display: block;\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* Image block */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n aspect-ratio: 4 / 3;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.5s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual:hover img {\n transform: scale(1.03);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual .pp-img-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 50%, rgba(46,46,46,0.35) 100%);\n pointer-events: none;\n }\n\n /* Scroll animations */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d1 { transition-delay: 0.1s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d2 { transition-delay: 0.2s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d3 { transition-delay: 0.35s; }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.88);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: rgba(255,255,255,0.06);\n border-left-color: var(--wsw-color-accent, #f69c1e);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.9);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n order: -1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n padding: 1.5rem 1.5rem 1.5rem 1.75rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 1;\n transform: none;\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n transition: none;\n }\n }\n\n/* ── Section: 5 Bausteine ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars::before {\n content: '';\n position: absolute;\n top: -120px;\n right: -120px;\n width: 400px;\n height: 400px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 0 3rem 0;\n }\n\n /* Pillar cards grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));\n gap: 1.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n --pp-card-radius: 12px;\n --pp-card-transition: 0.3s ease-out;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: var(--pp-card-radius);\n padding: 2rem 1.75rem 1.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n position: relative;\n overflow: hidden;\n transition: transform var(--pp-card-transition), border-color var(--pp-card-transition), box-shadow var(--pp-card-transition);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:hover {\n transform: translateY(-4px);\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 12px 32px rgba(0,0,0,0.25);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:focus-within {\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 0 0 3px rgba(246,156,30,0.25);\n }\n\n /* Number indicator */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n font-weight: 700;\n flex-shrink: 0;\n margin-bottom: 0.25rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card h3 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-desc {\n color: rgba(255,255,255,0.72);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.65;\n }\n\n /* Card link */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.88rem;\n font-weight: 600;\n text-decoration: none;\n margin-top: auto;\n padding-top: 0.5rem;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover {\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* Scroll animation delays for cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d4 { transition-delay: 0.45s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d5 { transition-delay: 0.55s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d6 { transition-delay: 0.65s; }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n transition: none;\n }\n }\n\n/* ── Section: SEO, GEO, KI-Sichtbarkeit erklärt ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 3rem 0;\n }\n\n /* Three-column definition cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n --pp-ec-radius: 12px;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ec-radius);\n padding: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);\n }\n\n /* Card header strip */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header {\n padding: 1.5rem 1.75rem 1.25rem;\n position: relative;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 1.75rem;\n right: 1.75rem;\n height: 1px;\n background: rgba(46, 46, 46, 0.08);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.3rem;\n margin-bottom: 0.75rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-abbr {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n /* Card body */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-body {\n padding: 1.25rem 1.75rem 1.75rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.7;\n }\n\n /* Takeaway note at bottom */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway::before {\n content: '';\n position: absolute;\n bottom: -60px;\n left: -60px;\n width: 180px;\n height: 180px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n background: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 960px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n transition: none;\n }\n }\n\n/* ── Section 5: Was eine gute Website heute leisten muss ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website::before {\n content: '';\n position: absolute;\n bottom: -100px;\n left: -100px;\n width: 350px;\n height: 350px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2vw, 1.25rem);\n font-style: italic;\n margin-bottom: 2.5rem;\n position: relative;\n padding-left: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0.15em;\n bottom: 0.15em;\n width: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Checklist grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 12px;\n padding: 1.5rem 1.5rem;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item:hover {\n transform: translateY(-3px);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-text {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.6;\n }\n\n /* Google-Hinweis */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note::before {\n content: '';\n position: absolute;\n top: -30px;\n right: -30px;\n width: 100px;\n height: 100px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.7;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n padding: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n transition: none;\n }\n }\n\n/* ── Section 6: Für wen moderne Sichtbarkeit besonders wichtig ist ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 2.5rem 0;\n }\n\n /* Audience grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n --pp-ac-radius: 12px;\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ac-radius);\n padding: 1.5rem 1.5rem;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 12px;\n background: rgba(246, 156, 30, 0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 1.25rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1rem, 1.8vw, 1.15rem);\n line-height: 1.25;\n margin: 0 0 0.35rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.88rem, 1.2vw, 0.95rem);\n line-height: 1.6;\n }\n\n /* Closing statement */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing::before {\n content: '';\n position: absolute;\n bottom: -50px;\n right: -50px;\n width: 160px;\n height: 160px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-acl-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-acl-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n background: rgba(246, 156, 30, 0.15);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n background: rgba(255, 255, 255, 0.2);\n color: var(--wsw-color-white, #fff);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n padding: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n transition: none;\n }\n }\n\n/* ── Section 7: Woran viele Websites heute scheitern ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems::before {\n content: '';\n position: absolute;\n top: -80px;\n left: -80px;\n width: 320px;\n height: 320px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 0 2.5rem 0;\n }\n\n /* Problem list */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n display: flex;\n align-items: flex-start;\n gap: 0.85rem;\n background: rgba(255,255,255,0.04);\n border: 1px solid rgba(255,255,255,0.07);\n border-radius: 10px;\n padding: 1.25rem 1.35rem;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out, background 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item:hover {\n transform: translateY(-3px);\n border-color: rgba(246,156,30,0.4);\n background: rgba(255,255,255,0.06);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pi-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: rgba(246,156,30,0.12);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pi-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.6;\n }\n\n /* CTA bar */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta {\n display: flex;\n align-items: center;\n gap: 2rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 140px;\n height: 140px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-heading {\n display: block;\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.25;\n margin-bottom: 0.4rem;\n font-weight: 600;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-sub {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.88rem, 1.2vw, 0.95rem);\n line-height: 1.5;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border-radius: 6px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.92rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n border: 2px solid var(--wsw-color-accent, #f69c1e);\n flex-shrink: 0;\n transition: background 0.25s ease-out, color 0.25s ease-out, transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n padding: 1rem 1.15rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta {\n flex-direction: column;\n align-items: stretch;\n gap: 1.25rem;\n padding: 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n justify-content: center;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n transition: none;\n }\n }\n\n/* ── Section 8: Wie ich Websites sichtbarer mache ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 3rem 0;\n }\n\n /* Timeline layout */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0;\n padding-left: 3rem;\n }\n\n /* Vertical line */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline::before {\n content: '';\n position: absolute;\n left: 19px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: linear-gradient(180deg, var(--wsw-color-accent, #f69c1e) 0%, rgba(246,156,30,0.15) 100%);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step {\n position: relative;\n padding: 0 0 3rem 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step:last-child {\n padding-bottom: 0;\n }\n\n /* Step number dot */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n position: absolute;\n left: -3rem;\n top: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n font-weight: 700;\n z-index: 2;\n box-shadow: 0 0 0 6px var(--wsw-color-white, #fff);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.15rem, 2.2vw, 1.35rem);\n line-height: 1.2;\n margin: 0 0 0.6rem 0;\n padding-top: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.92rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n max-width: 640px;\n }\n\n /* Step card background on hover */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46,46,46,0.06);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card:hover {\n transform: translateX(6px);\n box-shadow: 0 8px 28px rgba(0,0,0,0.08);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* Step keyword tag */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-top: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag {\n display: inline-block;\n padding: 0.25rem 0.75rem;\n border-radius: 100px;\n background: rgba(246,156,30,0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n letter-spacing: 0.04rem;\n }\n\n /* Closing note */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n margin-top: 3rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing::before {\n content: '';\n position: absolute;\n bottom: -50px;\n right: -50px;\n width: 160px;\n height: 160px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-mc-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-mc-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro {\n color: rgba(255,255,255,0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc {\n color: rgba(255,255,255,0.72);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n background: rgba(255,255,255,0.06);\n border-color: rgba(255,255,255,0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n box-shadow: 0 0 0 6px var(--wsw-color-black, #2e2e2e);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag {\n background: rgba(246,156,30,0.15);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing {\n background: rgba(255,255,255,0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro {\n color: rgba(255,255,255,0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc {\n color: rgba(255,255,255,0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n background: rgba(255,255,255,0.12);\n border-color: rgba(255,255,255,0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n box-shadow: 0 0 0 6px var(--wsw-color-accent, #f69c1e);\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline {\n padding-left: 2.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline::before {\n left: 15px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n left: -2.5rem;\n width: 32px;\n height: 32px;\n font-size: 0.85rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n padding: 1.25rem 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step {\n padding-left: 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n transition: none;\n }\n }\n\n#wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 {\n box-sizing: border-box;\n font-family: inherit;\n background: transparent;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n box-sizing: inherit;\n }\n\n /* ── Hero Section ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n position: relative;\n min-height: 85vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background: linear-gradient(135deg, var(--wsw-color-black, #2e2e2e) 0%, #1a1a1a 100%);\n padding: 4rem 2rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.2;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n background: linear-gradient(180deg, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0.85) 100%);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-content {\n position: relative;\n z-index: 3;\n max-width: 880px;\n text-align: center;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-badge {\n display: inline-block;\n padding: 0.4rem 1.2rem;\n border: 1px solid var(--wsw-color-accent, #f69c1e);\n border-radius: 100px;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n letter-spacing: 0.12rem;\n text-transform: uppercase;\n margin-bottom: 1.5rem;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero h1 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(2rem, 5.5vw, 3.6rem);\n line-height: 1.08;\n margin: 0 0 1.25rem 0;\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.7s ease-out 0.15s, transform 0.7s ease-out 0.15s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-subline {\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2.2vw, 1.35rem);\n line-height: 1.45;\n max-width: 720px;\n margin: 0 auto 1.75rem;\n font-weight: 400;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.7s ease-out 0.3s, transform 0.7s ease-out 0.3s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-intro {\n color: rgba(255,255,255,0.82);\n font-size: clamp(0.95rem, 1.6vw, 1.1rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 auto 2.5rem;\n opacity: 0;\n transform: translateY(18px);\n transition: opacity 0.7s ease-out 0.45s, transform 0.7s ease-out 0.45s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.7s ease-out 0.6s, transform 0.7s ease-out 0.6s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border-radius: 6px;\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.95rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n cursor: pointer;\n border: 2px solid transparent;\n transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary {\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline {\n background: transparent;\n color: var(--wsw-color-white, #fff);\n border-color: rgba(255,255,255,0.4);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline:hover {\n border-color: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n /* ── Scroll indicator ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n position: absolute;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n z-index: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n color: rgba(255,255,255,0.45);\n font-size: 0.75rem;\n letter-spacing: 0.1rem;\n text-transform: uppercase;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-scroll-line {\n width: 1px;\n height: 40px;\n background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);\n animation: ppScrollPulse 2s ease-in-out infinite;\n }\n\n @keyframes ppScrollPulse {\n 0%, 100% { opacity: 0.3; transform: scaleY(1); }\n 50% { opacity: 1; transform: scaleY(1.15); }\n }\n\n /* ── Animate in ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-badge,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible h1,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-subline,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-intro,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-ctas {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n min-height: 70vh;\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n flex-direction: column;\n align-items: stretch;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n justify-content: center;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n display: none;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n/* ── Section: Warum sich Sichtbarkeit verändert hat ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 4.5rem 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section-inner {\n max-width: 960px;\n margin: 0 auto;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 2rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Split layout */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 3rem;\n align-items: start;\n margin-top: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n display: block;\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n margin-bottom: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span:last-child {\n margin-bottom: 0;\n }\n\n /* Highlight box */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2rem 2rem 2.25rem;\n border-left: 4px solid var(--wsw-color-accent, #f69c1e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 120px;\n height: 120px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box .pp-hb-label {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box span.pp-hb-text {\n display: block;\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* Image block */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n aspect-ratio: 4 / 3;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.5s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual:hover img {\n transform: scale(1.03);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual .pp-img-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 50%, rgba(46,46,46,0.35) 100%);\n pointer-events: none;\n }\n\n /* Scroll animations */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d1 { transition-delay: 0.1s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d2 { transition-delay: 0.2s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d3 { transition-delay: 0.35s; }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.88);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: rgba(255,255,255,0.06);\n border-left-color: var(--wsw-color-accent, #f69c1e);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.9);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n order: -1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n padding: 1.5rem 1.5rem 1.5rem 1.75rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 1;\n transform: none;\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n transition: none;\n }\n }\n\n/* ── Section: 5 Bausteine ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars::before {\n content: '';\n position: absolute;\n top: -120px;\n right: -120px;\n width: 400px;\n height: 400px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 0 3rem 0;\n }\n\n /* Pillar cards grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));\n gap: 1.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n --pp-card-radius: 12px;\n --pp-card-transition: 0.3s ease-out;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: var(--pp-card-radius);\n padding: 2rem 1.75rem 1.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n position: relative;\n overflow: hidden;\n transition: transform var(--pp-card-transition), border-color var(--pp-card-transition), box-shadow var(--pp-card-transition);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:hover {\n transform: translateY(-4px);\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 12px 32px rgba(0,0,0,0.25);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:focus-within {\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 0 0 3px rgba(246,156,30,0.25);\n }\n\n /* Number indicator */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n font-weight: 700;\n flex-shrink: 0;\n margin-bottom: 0.25rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card h3 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-desc {\n color: rgba(255,255,255,0.72);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.65;\n }\n\n /* Card link */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.88rem;\n font-weight: 600;\n text-decoration: none;\n margin-top: auto;\n padding-top: 0.5rem;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover {\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* Scroll animation delays for cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d4 { transition-delay: 0.45s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d5 { transition-delay: 0.55s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d6 { transition-delay: 0.65s; }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n transition: none;\n }\n }\n\n/* ── Section: SEO, GEO, KI-Sichtbarkeit erklärt ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 3rem 0;\n }\n\n /* Three-column definition cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n --pp-ec-radius: 12px;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ec-radius);\n padding: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);\n }\n\n /* Card header strip */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header {\n padding: 1.5rem 1.75rem 1.25rem;\n position: relative;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 1.75rem;\n right: 1.75rem;\n height: 1px;\n background: rgba(46, 46, 46, 0.08);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.3rem;\n margin-bottom: 0.75rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-abbr {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n /* Card body */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-body {\n padding: 1.25rem 1.75rem 1.75rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.7;\n }\n\n /* Takeaway note at bottom */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway::before {\n content: '';\n position: absolute;\n bottom: -60px;\n left: -60px;\n width: 180px;\n height: 180px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n background: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 960px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n transition: none;\n }\n }\n\n/* ── Section 5: Was eine gute Website heute leisten muss ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website::before {\n content: '';\n position: absolute;\n bottom: -100px;\n left: -100px;\n width: 350px;\n height: 350px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2vw, 1.25rem);\n font-style: italic;\n margin-bottom: 2.5rem;\n position: relative;\n padding-left: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0.15em;\n bottom: 0.15em;\n width: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Checklist grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 12px;\n padding: 1.5rem 1.5rem;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item:hover {\n transform: translateY(-3px);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-text {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.6;\n }\n\n /* Google-Hinweis */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note::before {\n content: '';\n position: absolute;\n top: -30px;\n right: -30px;\n width: 100px;\n height: 100px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.7;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n padding: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n transition: none;\n }\n }\n\n/* ── Section 6: Für wen moderne Sichtbarkeit besonders wichtig ist ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 2.5rem 0;\n }\n\n /* Audience grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n --pp-ac-radius: 12px;\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ac-radius);\n padding: 1.5rem 1.5rem;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 12px;\n background: rgba(246, 156, 30, 0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 1.25rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1rem, 1.8vw, 1.15rem);\n line-height: 1.25;\n margin: 0 0 0.35rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.88rem, 1.2vw, 0.95rem);\n line-height: 1.6;\n }\n\n /* Closing statement */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing::before {\n content: '';\n position: absolute;\n bottom: -50px;\n right: -50px;\n width: 160px;\n height: 160px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-acl-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-acl-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n background: rgba(246, 156, 30, 0.15);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n background: rgba(255, 255, 255, 0.2);\n color: var(--wsw-color-white, #fff);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n padding: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n transition: none;\n }\n }\n\n/* ── Section 7: Woran viele Websites heute scheitern ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems::before {\n content: '';\n position: absolute;\n top: -80px;\n left: -80px;\n width: 320px;\n height: 320px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 0 2.5rem 0;\n }\n\n /* Problem list */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n display: flex;\n align-items: flex-start;\n gap: 0.85rem;\n background: rgba(255,255,255,0.04);\n border: 1px solid rgba(255,255,255,0.07);\n border-radius: 10px;\n padding: 1.25rem 1.35rem;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out, background 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item:hover {\n transform: translateY(-3px);\n border-color: rgba(246,156,30,0.4);\n background: rgba(255,255,255,0.06);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pi-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: rgba(246,156,30,0.12);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pi-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.6;\n }\n\n /* CTA bar */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta {\n display: flex;\n align-items: center;\n gap: 2rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 140px;\n height: 140px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-heading {\n display: block;\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.25;\n margin-bottom: 0.4rem;\n font-weight: 600;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-sub {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.88rem, 1.2vw, 0.95rem);\n line-height: 1.5;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border-radius: 6px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.92rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n border: 2px solid var(--wsw-color-accent, #f69c1e);\n flex-shrink: 0;\n transition: background 0.25s ease-out, color 0.25s ease-out, transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n padding: 1rem 1.15rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta {\n flex-direction: column;\n align-items: stretch;\n gap: 1.25rem;\n padding: 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n justify-content: center;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n transition: none;\n }\n }\n\n/* ── Section 8: Wie ich Websites sichtbarer mache ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 3rem 0;\n }\n\n /* Timeline layout */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0;\n padding-left: 3rem;\n }\n\n /* Vertical line */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline::before {\n content: '';\n position: absolute;\n left: 19px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: linear-gradient(180deg, var(--wsw-color-accent, #f69c1e) 0%, rgba(246,156,30,0.15) 100%);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step {\n position: relative;\n padding: 0 0 3rem 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step:last-child {\n padding-bottom: 0;\n }\n\n /* Step number dot */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n position: absolute;\n left: -3rem;\n top: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n font-weight: 700;\n z-index: 2;\n box-shadow: 0 0 0 6px var(--wsw-color-white, #fff);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.15rem, 2.2vw, 1.35rem);\n line-height: 1.2;\n margin: 0 0 0.6rem 0;\n padding-top: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.92rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n max-width: 640px;\n }\n\n /* Step card background on hover */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46,46,46,0.06);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card:hover {\n transform: translateX(6px);\n box-shadow: 0 8px 28px rgba(0,0,0,0.08);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* Step keyword tag */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-top: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag {\n display: inline-block;\n padding: 0.25rem 0.75rem;\n border-radius: 100px;\n background: rgba(246,156,30,0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n letter-spacing: 0.04rem;\n }\n\n /* Closing note */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n margin-top: 3rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing::before {\n content: '';\n position: absolute;\n bottom: -50px;\n right: -50px;\n width: 160px;\n height: 160px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-mc-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-mc-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro {\n color: rgba(255,255,255,0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc {\n color: rgba(255,255,255,0.72);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n background: rgba(255,255,255,0.06);\n border-color: rgba(255,255,255,0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n box-shadow: 0 0 0 6px var(--wsw-color-black, #2e2e2e);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag {\n background: rgba(246,156,30,0.15);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing {\n background: rgba(255,255,255,0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro {\n color: rgba(255,255,255,0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc {\n color: rgba(255,255,255,0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n background: rgba(255,255,255,0.12);\n border-color: rgba(255,255,255,0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n box-shadow: 0 0 0 6px var(--wsw-color-accent, #f69c1e);\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline {\n padding-left: 2.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline::before {\n left: 15px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n left: -2.5rem;\n width: 32px;\n height: 32px;\n font-size: 0.85rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n padding: 1.25rem 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step {\n padding-left: 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n transition: none;\n }\n }\n\n/* ── Section 9: Welche Leistungen dabei helfen ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services::before {\n content: '';\n position: absolute;\n top: -100px;\n right: -100px;\n width: 380px;\n height: 380px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 700px;\n margin: 0 0 3rem 0;\n }\n\n /* Services grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));\n gap: 1.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card {\n --pp-sc-radius: 12px;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: var(--pp-sc-radius);\n padding: 2rem 1.75rem 1.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.6rem;\n position: relative;\n overflow: hidden;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card:hover {\n transform: translateY(-4px);\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 12px 32px rgba(0,0,0,0.25);\n }\n\n /* Card accent line top */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0;\n transition: opacity 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card:hover::before {\n opacity: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: rgba(246,156,30,0.12);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 1.35rem;\n flex-shrink: 0;\n margin-bottom: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card h3 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-desc {\n color: rgba(255,255,255,0.72);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.65;\n }\n\n /* Card link */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.88rem;\n font-weight: 600;\n text-decoration: none;\n margin-top: auto;\n padding-top: 0.75rem;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link:hover {\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* Upcoming services note */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-upcoming {\n margin-top: 2.5rem;\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-upcoming::before {\n content: '';\n position: absolute;\n bottom: -40px;\n left: -40px;\n width: 120px;\n height: 120px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.7;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-links {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-top: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-link {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n font-weight: 600;\n text-decoration: none;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-link:hover {\n gap: 0.6rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-upcoming {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card::before {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link .pp-arrow {\n transition: none;\n }\n }\n\n#wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 {\n box-sizing: border-box;\n font-family: inherit;\n background: transparent;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n box-sizing: inherit;\n }\n\n /* ── Hero Section ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n position: relative;\n min-height: 85vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background: linear-gradient(135deg, var(--wsw-color-black, #2e2e2e) 0%, #1a1a1a 100%);\n padding: 4rem 2rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.2;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n background: linear-gradient(180deg, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0.85) 100%);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-content {\n position: relative;\n z-index: 3;\n max-width: 880px;\n text-align: center;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-badge {\n display: inline-block;\n padding: 0.4rem 1.2rem;\n border: 1px solid var(--wsw-color-accent, #f69c1e);\n border-radius: 100px;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n letter-spacing: 0.12rem;\n text-transform: uppercase;\n margin-bottom: 1.5rem;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero h1 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(2rem, 5.5vw, 3.6rem);\n line-height: 1.08;\n margin: 0 0 1.25rem 0;\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.7s ease-out 0.15s, transform 0.7s ease-out 0.15s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-subline {\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2.2vw, 1.35rem);\n line-height: 1.45;\n max-width: 720px;\n margin: 0 auto 1.75rem;\n font-weight: 400;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.7s ease-out 0.3s, transform 0.7s ease-out 0.3s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-intro {\n color: rgba(255,255,255,0.82);\n font-size: clamp(0.95rem, 1.6vw, 1.1rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 auto 2.5rem;\n opacity: 0;\n transform: translateY(18px);\n transition: opacity 0.7s ease-out 0.45s, transform 0.7s ease-out 0.45s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.7s ease-out 0.6s, transform 0.7s ease-out 0.6s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border-radius: 6px;\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.95rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n cursor: pointer;\n border: 2px solid transparent;\n transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary {\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline {\n background: transparent;\n color: var(--wsw-color-white, #fff);\n border-color: rgba(255,255,255,0.4);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline:hover {\n border-color: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n /* ── Scroll indicator ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n position: absolute;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n z-index: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n color: rgba(255,255,255,0.45);\n font-size: 0.75rem;\n letter-spacing: 0.1rem;\n text-transform: uppercase;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-scroll-line {\n width: 1px;\n height: 40px;\n background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);\n animation: ppScrollPulse 2s ease-in-out infinite;\n }\n\n @keyframes ppScrollPulse {\n 0%, 100% { opacity: 0.3; transform: scaleY(1); }\n 50% { opacity: 1; transform: scaleY(1.15); }\n }\n\n /* ── Animate in ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-badge,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible h1,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-subline,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-intro,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-ctas {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n min-height: 70vh;\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n flex-direction: column;\n align-items: stretch;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n justify-content: center;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n display: none;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n/* ── Section: Warum sich Sichtbarkeit verändert hat ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 4.5rem 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section-inner {\n max-width: 960px;\n margin: 0 auto;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 2rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Split layout */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 3rem;\n align-items: start;\n margin-top: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n display: block;\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n margin-bottom: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span:last-child {\n margin-bottom: 0;\n }\n\n /* Highlight box */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2rem 2rem 2.25rem;\n border-left: 4px solid var(--wsw-color-accent, #f69c1e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 120px;\n height: 120px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box .pp-hb-label {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box span.pp-hb-text {\n display: block;\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* Image block */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n aspect-ratio: 4 / 3;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.5s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual:hover img {\n transform: scale(1.03);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual .pp-img-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 50%, rgba(46,46,46,0.35) 100%);\n pointer-events: none;\n }\n\n /* Scroll animations */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d1 { transition-delay: 0.1s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d2 { transition-delay: 0.2s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d3 { transition-delay: 0.35s; }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.88);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: rgba(255,255,255,0.06);\n border-left-color: var(--wsw-color-accent, #f69c1e);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.9);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n order: -1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n padding: 1.5rem 1.5rem 1.5rem 1.75rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 1;\n transform: none;\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n transition: none;\n }\n }\n\n/* ── Section: 5 Bausteine ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars::before {\n content: '';\n position: absolute;\n top: -120px;\n right: -120px;\n width: 400px;\n height: 400px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 0 3rem 0;\n }\n\n /* Pillar cards grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));\n gap: 1.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n --pp-card-radius: 12px;\n --pp-card-transition: 0.3s ease-out;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: var(--pp-card-radius);\n padding: 2rem 1.75rem 1.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n position: relative;\n overflow: hidden;\n transition: transform var(--pp-card-transition), border-color var(--pp-card-transition), box-shadow var(--pp-card-transition);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:hover {\n transform: translateY(-4px);\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 12px 32px rgba(0,0,0,0.25);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:focus-within {\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 0 0 3px rgba(246,156,30,0.25);\n }\n\n /* Number indicator */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n font-weight: 700;\n flex-shrink: 0;\n margin-bottom: 0.25rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card h3 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-desc {\n color: rgba(255,255,255,0.72);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.65;\n }\n\n /* Card link */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.88rem;\n font-weight: 600;\n text-decoration: none;\n margin-top: auto;\n padding-top: 0.5rem;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover {\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* Scroll animation delays for cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d4 { transition-delay: 0.45s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d5 { transition-delay: 0.55s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d6 { transition-delay: 0.65s; }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n transition: none;\n }\n }\n\n/* ── Section: SEO, GEO, KI-Sichtbarkeit erklärt ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 3rem 0;\n }\n\n /* Three-column definition cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n --pp-ec-radius: 12px;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ec-radius);\n padding: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);\n }\n\n /* Card header strip */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header {\n padding: 1.5rem 1.75rem 1.25rem;\n position: relative;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 1.75rem;\n right: 1.75rem;\n height: 1px;\n background: rgba(46, 46, 46, 0.08);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.3rem;\n margin-bottom: 0.75rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-abbr {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n /* Card body */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-body {\n padding: 1.25rem 1.75rem 1.75rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.7;\n }\n\n /* Takeaway note at bottom */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway::before {\n content: '';\n position: absolute;\n bottom: -60px;\n left: -60px;\n width: 180px;\n height: 180px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n background: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 960px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n transition: none;\n }\n }\n\n/* ── Section 5: Was eine gute Website heute leisten muss ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website::before {\n content: '';\n position: absolute;\n bottom: -100px;\n left: -100px;\n width: 350px;\n height: 350px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2vw, 1.25rem);\n font-style: italic;\n margin-bottom: 2.5rem;\n position: relative;\n padding-left: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0.15em;\n bottom: 0.15em;\n width: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Checklist grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 12px;\n padding: 1.5rem 1.5rem;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item:hover {\n transform: translateY(-3px);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-text {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.6;\n }\n\n /* Google-Hinweis */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note::before {\n content: '';\n position: absolute;\n top: -30px;\n right: -30px;\n width: 100px;\n height: 100px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.7;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n padding: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n transition: none;\n }\n }\n\n/* ── Section 6: Für wen moderne Sichtbarkeit besonders wichtig ist ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 2.5rem 0;\n }\n\n /* Audience grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n --pp-ac-radius: 12px;\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ac-radius);\n padding: 1.5rem 1.5rem;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 12px;\n background: rgba(246, 156, 30, 0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 1.25rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1rem, 1.8vw, 1.15rem);\n line-height: 1.25;\n margin: 0 0 0.35rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.88rem, 1.2vw, 0.95rem);\n line-height: 1.6;\n }\n\n /* Closing statement */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing::before {\n content: '';\n position: absolute;\n bottom: -50px;\n right: -50px;\n width: 160px;\n height: 160px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-acl-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-acl-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n background: rgba(246, 156, 30, 0.15);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n background: rgba(255, 255, 255, 0.2);\n color: var(--wsw-color-white, #fff);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n padding: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n transition: none;\n }\n }\n\n/* ── Section 7: Woran viele Websites heute scheitern ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems::before {\n content: '';\n position: absolute;\n top: -80px;\n left: -80px;\n width: 320px;\n height: 320px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 0 2.5rem 0;\n }\n\n /* Problem list */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n display: flex;\n align-items: flex-start;\n gap: 0.85rem;\n background: rgba(255,255,255,0.04);\n border: 1px solid rgba(255,255,255,0.07);\n border-radius: 10px;\n padding: 1.25rem 1.35rem;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out, background 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item:hover {\n transform: translateY(-3px);\n border-color: rgba(246,156,30,0.4);\n background: rgba(255,255,255,0.06);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pi-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: rgba(246,156,30,0.12);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pi-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.6;\n }\n\n /* CTA bar */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta {\n display: flex;\n align-items: center;\n gap: 2rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 140px;\n height: 140px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-heading {\n display: block;\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.25;\n margin-bottom: 0.4rem;\n font-weight: 600;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-sub {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.88rem, 1.2vw, 0.95rem);\n line-height: 1.5;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border-radius: 6px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.92rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n border: 2px solid var(--wsw-color-accent, #f69c1e);\n flex-shrink: 0;\n transition: background 0.25s ease-out, color 0.25s ease-out, transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n padding: 1rem 1.15rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta {\n flex-direction: column;\n align-items: stretch;\n gap: 1.25rem;\n padding: 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n justify-content: center;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n transition: none;\n }\n }\n\n/* ── Section 8: Wie ich Websites sichtbarer mache ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 3rem 0;\n }\n\n /* Timeline layout */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0;\n padding-left: 3rem;\n }\n\n /* Vertical line */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline::before {\n content: '';\n position: absolute;\n left: 19px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: linear-gradient(180deg, var(--wsw-color-accent, #f69c1e) 0%, rgba(246,156,30,0.15) 100%);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step {\n position: relative;\n padding: 0 0 3rem 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step:last-child {\n padding-bottom: 0;\n }\n\n /* Step number dot */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n position: absolute;\n left: -3rem;\n top: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n font-weight: 700;\n z-index: 2;\n box-shadow: 0 0 0 6px var(--wsw-color-white, #fff);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.15rem, 2.2vw, 1.35rem);\n line-height: 1.2;\n margin: 0 0 0.6rem 0;\n padding-top: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.92rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n max-width: 640px;\n }\n\n /* Step card background on hover */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46,46,46,0.06);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card:hover {\n transform: translateX(6px);\n box-shadow: 0 8px 28px rgba(0,0,0,0.08);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* Step keyword tag */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-top: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag {\n display: inline-block;\n padding: 0.25rem 0.75rem;\n border-radius: 100px;\n background: rgba(246,156,30,0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n letter-spacing: 0.04rem;\n }\n\n /* Closing note */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n margin-top: 3rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing::before {\n content: '';\n position: absolute;\n bottom: -50px;\n right: -50px;\n width: 160px;\n height: 160px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-mc-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-mc-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro {\n color: rgba(255,255,255,0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc {\n color: rgba(255,255,255,0.72);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n background: rgba(255,255,255,0.06);\n border-color: rgba(255,255,255,0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n box-shadow: 0 0 0 6px var(--wsw-color-black, #2e2e2e);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag {\n background: rgba(246,156,30,0.15);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing {\n background: rgba(255,255,255,0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro {\n color: rgba(255,255,255,0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc {\n color: rgba(255,255,255,0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n background: rgba(255,255,255,0.12);\n border-color: rgba(255,255,255,0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n box-shadow: 0 0 0 6px var(--wsw-color-accent, #f69c1e);\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline {\n padding-left: 2.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline::before {\n left: 15px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n left: -2.5rem;\n width: 32px;\n height: 32px;\n font-size: 0.85rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n padding: 1.25rem 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step {\n padding-left: 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n transition: none;\n }\n }\n\n/* ── Section 9: Welche Leistungen dabei helfen ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services::before {\n content: '';\n position: absolute;\n top: -100px;\n right: -100px;\n width: 380px;\n height: 380px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 700px;\n margin: 0 0 3rem 0;\n }\n\n /* Services grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));\n gap: 1.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card {\n --pp-sc-radius: 12px;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: var(--pp-sc-radius);\n padding: 2rem 1.75rem 1.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.6rem;\n position: relative;\n overflow: hidden;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card:hover {\n transform: translateY(-4px);\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 12px 32px rgba(0,0,0,0.25);\n }\n\n /* Card accent line top */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0;\n transition: opacity 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card:hover::before {\n opacity: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: rgba(246,156,30,0.12);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 1.35rem;\n flex-shrink: 0;\n margin-bottom: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card h3 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-desc {\n color: rgba(255,255,255,0.72);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.65;\n }\n\n /* Card link */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.88rem;\n font-weight: 600;\n text-decoration: none;\n margin-top: auto;\n padding-top: 0.75rem;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link:hover {\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* Upcoming services note */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-upcoming {\n margin-top: 2.5rem;\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-upcoming::before {\n content: '';\n position: absolute;\n bottom: -40px;\n left: -40px;\n width: 120px;\n height: 120px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.7;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-links {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-top: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-link {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n font-weight: 600;\n text-decoration: none;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-link:hover {\n gap: 0.6rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-upcoming {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card::before {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link .pp-arrow {\n transition: none;\n }\n }\n\n/* ── Section 10: FAQ ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 2.5rem 0;\n }\n\n /* Accordion container */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-list {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n max-width: 840px;\n }\n\n /* Accordion item */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item {\n --pp-faq-radius: 12px;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-faq-radius);\n overflow: hidden;\n transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open {\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);\n }\n\n /* Question button */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question {\n display: flex;\n align-items: center;\n gap: 1rem;\n width: 100%;\n padding: 1.35rem 1.75rem;\n background: transparent;\n border: none;\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n transition: background 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question:hover {\n background: rgba(246, 156, 30, 0.04);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: -2px;\n border-radius: var(--pp-faq-radius);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 10px;\n background: rgba(246, 156, 30, 0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.95rem;\n flex-shrink: 0;\n transition: background 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open .pp-faq-icon {\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-q-text {\n flex: 1;\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1rem, 1.8vw, 1.15rem);\n font-weight: 600;\n line-height: 1.35;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-chevron {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n color: var(--wsw-color-dark, #626262);\n font-size: 1.1rem;\n transition: transform 0.35s ease-out, color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open .pp-faq-chevron {\n transform: rotate(180deg);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* Answer panel */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-answer {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.4s ease-out;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-answer-inner {\n padding: 0 1.75rem 1.5rem 4.75rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-a-text {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.92rem, 1.4vw, 1.02rem);\n line-height: 1.75;\n }\n\n /* Separator line inside answer */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-answer-inner::before {\n content: '';\n display: block;\n width: 48px;\n height: 2px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n margin-bottom: 1rem;\n opacity: 0.5;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open {\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-q-text,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-q-text,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-q-text,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-q-text {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-a-text,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-a-text,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-a-text,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-a-text {\n color: rgba(255, 255, 255, 0.72);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-chevron,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-chevron,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-chevron,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-chevron {\n color: rgba(255, 255, 255, 0.5);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question:hover,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question:hover,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question:hover,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question:hover {\n background: rgba(255, 255, 255, 0.04);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon {\n background: rgba(246, 156, 30, 0.15);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-q-text {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-a-text {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon {\n background: rgba(255, 255, 255, 0.2);\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open .pp-faq-icon {\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question {\n padding: 1.15rem 1.25rem;\n gap: 0.75rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-answer-inner {\n padding: 0 1.25rem 1.25rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon {\n width: 32px;\n height: 32px;\n font-size: 0.85rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-chevron {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-answer {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item {\n transition: none;\n }\n }\n\n#wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 {\n box-sizing: border-box;\n font-family: inherit;\n background: transparent;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n box-sizing: inherit;\n }\n\n /* ── Hero Section ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n position: relative;\n min-height: 85vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n background: linear-gradient(135deg, var(--wsw-color-black, #2e2e2e) 0%, #1a1a1a 100%);\n padding: 4rem 2rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg {\n position: absolute;\n inset: 0;\n z-index: 1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-bg img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n opacity: 0.2;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-overlay {\n position: absolute;\n inset: 0;\n z-index: 2;\n background: linear-gradient(180deg, rgba(26,26,26,0.6) 0%, rgba(26,26,26,0.85) 100%);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-content {\n position: relative;\n z-index: 3;\n max-width: 880px;\n text-align: center;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-badge {\n display: inline-block;\n padding: 0.4rem 1.2rem;\n border: 1px solid var(--wsw-color-accent, #f69c1e);\n border-radius: 100px;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n letter-spacing: 0.12rem;\n text-transform: uppercase;\n margin-bottom: 1.5rem;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero h1 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(2rem, 5.5vw, 3.6rem);\n line-height: 1.08;\n margin: 0 0 1.25rem 0;\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.7s ease-out 0.15s, transform 0.7s ease-out 0.15s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-subline {\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2.2vw, 1.35rem);\n line-height: 1.45;\n max-width: 720px;\n margin: 0 auto 1.75rem;\n font-weight: 400;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.7s ease-out 0.3s, transform 0.7s ease-out 0.3s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-intro {\n color: rgba(255,255,255,0.82);\n font-size: clamp(0.95rem, 1.6vw, 1.1rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 auto 2.5rem;\n opacity: 0;\n transform: translateY(18px);\n transition: opacity 0.7s ease-out 0.45s, transform 0.7s ease-out 0.45s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n opacity: 0;\n transform: translateY(16px);\n transition: opacity 0.7s ease-out 0.6s, transform 0.7s ease-out 0.6s;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border-radius: 6px;\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.95rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n cursor: pointer;\n border: 2px solid transparent;\n transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary {\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--primary:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline {\n background: transparent;\n color: var(--wsw-color-white, #fff);\n border-color: rgba(255,255,255,0.4);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn--outline:hover {\n border-color: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n /* ── Scroll indicator ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n position: absolute;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n z-index: 3;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n color: rgba(255,255,255,0.45);\n font-size: 0.75rem;\n letter-spacing: 0.1rem;\n text-transform: uppercase;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-scroll-line {\n width: 1px;\n height: 40px;\n background: linear-gradient(180deg, rgba(255,255,255,0.4) 0%, transparent 100%);\n animation: ppScrollPulse 2s ease-in-out infinite;\n }\n\n @keyframes ppScrollPulse {\n 0%, 100% { opacity: 0.3; transform: scaleY(1); }\n 50% { opacity: 1; transform: scaleY(1.15); }\n }\n\n /* ── Animate in ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-badge,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible h1,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-subline,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-intro,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero.is-visible .pp-hero-ctas {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero {\n min-height: 70vh;\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-ctas {\n flex-direction: column;\n align-items: stretch;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-btn {\n justify-content: center;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-hero-scroll {\n display: none;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::before,\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n/* ── Section: Warum sich Sichtbarkeit verändert hat ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 4.5rem 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section-inner {\n max-width: 960px;\n margin: 0 auto;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 2rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Split layout */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 3rem;\n align-items: start;\n margin-top: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n display: block;\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n margin-bottom: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span:last-child {\n margin-bottom: 0;\n }\n\n /* Highlight box */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2rem 2rem 2.25rem;\n border-left: 4px solid var(--wsw-color-accent, #f69c1e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 120px;\n height: 120px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box .pp-hb-label {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box span.pp-hb-text {\n display: block;\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* Image block */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n position: relative;\n border-radius: 12px;\n overflow: hidden;\n aspect-ratio: 4 / 3;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n transition: transform 0.5s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual:hover img {\n transform: scale(1.03);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual .pp-img-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, transparent 50%, rgba(46,46,46,0.35) 100%);\n pointer-events: none;\n }\n\n /* Scroll animations */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d1 { transition-delay: 0.1s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d2 { transition-delay: 0.2s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d3 { transition-delay: 0.35s; }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.88);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n background: rgba(255,255,255,0.06);\n border-left-color: var(--wsw-color-accent, #f69c1e);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--change h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-text span {\n color: rgba(255,255,255,0.9);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section {\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split {\n grid-template-columns: 1fr;\n gap: 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual {\n order: -1;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-highlight-box {\n padding: 1.5rem 1.5rem 1.5rem 1.75rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim {\n opacity: 1;\n transform: none;\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-split-visual img {\n transition: none;\n }\n }\n\n/* ── Section: 5 Bausteine ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars::before {\n content: '';\n position: absolute;\n top: -120px;\n right: -120px;\n width: 400px;\n height: 400px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 0 3rem 0;\n }\n\n /* Pillar cards grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));\n gap: 1.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n --pp-card-radius: 12px;\n --pp-card-transition: 0.3s ease-out;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: var(--pp-card-radius);\n padding: 2rem 1.75rem 1.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n position: relative;\n overflow: hidden;\n transition: transform var(--pp-card-transition), border-color var(--pp-card-transition), box-shadow var(--pp-card-transition);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:hover {\n transform: translateY(-4px);\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 12px 32px rgba(0,0,0,0.25);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card:focus-within {\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 0 0 3px rgba(246,156,30,0.25);\n }\n\n /* Number indicator */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-num {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n font-weight: 700;\n flex-shrink: 0;\n margin-bottom: 0.25rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card h3 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-desc {\n color: rgba(255,255,255,0.72);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.65;\n }\n\n /* Card link */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.88rem;\n font-weight: 600;\n text-decoration: none;\n margin-top: auto;\n padding-top: 0.5rem;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover {\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--pillars {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* Scroll animation delays for cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d4 { transition-delay: 0.45s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d5 { transition-delay: 0.55s; }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-anim-d6 { transition-delay: 0.65s; }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillars-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-card {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pillar-link .pp-arrow {\n transition: none;\n }\n }\n\n/* ── Section: SEO, GEO, KI-Sichtbarkeit erklärt ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 3rem 0;\n }\n\n /* Three-column definition cards */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 2rem;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n --pp-ec-radius: 12px;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ec-radius);\n padding: 0;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);\n }\n\n /* Card header strip */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header {\n padding: 1.5rem 1.75rem 1.25rem;\n position: relative;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 1.75rem;\n right: 1.75rem;\n height: 1px;\n background: rgba(46, 46, 46, 0.08);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.3rem;\n margin-bottom: 0.75rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-abbr {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n /* Card body */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-body {\n padding: 1.25rem 1.75rem 1.75rem;\n flex: 1;\n display: flex;\n flex-direction: column;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.7;\n }\n\n /* Takeaway note at bottom */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway::before {\n content: '';\n position: absolute;\n bottom: -60px;\n left: -60px;\n width: 180px;\n height: 180px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-et-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-header::after {\n background: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--explain h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ec-icon {\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 960px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-takeaway {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-explain-card {\n transition: none;\n }\n }\n\n/* ── Section 5: Was eine gute Website heute leisten muss ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website::before {\n content: '';\n position: absolute;\n bottom: -100px;\n left: -100px;\n width: 350px;\n height: 350px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto {\n display: inline-block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: clamp(1.05rem, 2vw, 1.25rem);\n font-style: italic;\n margin-bottom: 2.5rem;\n position: relative;\n padding-left: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-motto::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0.15em;\n bottom: 0.15em;\n width: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n /* Checklist grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: 12px;\n padding: 1.5rem 1.5rem;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item:hover {\n transform: translateY(-3px);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wi-text {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.6;\n }\n\n /* Google-Hinweis */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note::before {\n content: '';\n position: absolute;\n top: -30px;\n right: -30px;\n width: 100px;\n height: 100px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-wn-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.7;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--website {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n padding: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-note {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-website-item {\n transition: none;\n }\n }\n\n/* ── Section 6: Für wen moderne Sichtbarkeit besonders wichtig ist ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 2.5rem 0;\n }\n\n /* Audience grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n --pp-ac-radius: 12px;\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-ac-radius);\n padding: 1.5rem 1.5rem;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 44px;\n height: 44px;\n border-radius: 12px;\n background: rgba(246, 156, 30, 0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 1.25rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1rem, 1.8vw, 1.15rem);\n line-height: 1.25;\n margin: 0 0 0.35rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.88rem, 1.2vw, 0.95rem);\n line-height: 1.6;\n }\n\n /* Closing statement */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing::before {\n content: '';\n position: absolute;\n bottom: -50px;\n right: -50px;\n width: 160px;\n height: 160px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-acl-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-acl-text {\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: rgba(255, 255, 255, 0.72);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n background: rgba(246, 156, 30, 0.15);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n background: rgba(255, 255, 255, 0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--audience h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-content h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-desc {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ac-icon {\n background: rgba(255, 255, 255, 0.2);\n color: var(--wsw-color-white, #fff);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n padding: 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-closing {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-audience-card {\n transition: none;\n }\n }\n\n/* ── Section 7: Woran viele Websites heute scheitern ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems::before {\n content: '';\n position: absolute;\n top: -80px;\n left: -80px;\n width: 320px;\n height: 320px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 680px;\n margin: 0 0 2.5rem 0;\n }\n\n /* Problem list */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n display: flex;\n align-items: flex-start;\n gap: 0.85rem;\n background: rgba(255,255,255,0.04);\n border: 1px solid rgba(255,255,255,0.07);\n border-radius: 10px;\n padding: 1.25rem 1.35rem;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out, background 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item:hover {\n transform: translateY(-3px);\n border-color: rgba(246,156,30,0.4);\n background: rgba(255,255,255,0.06);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pi-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 32px;\n height: 32px;\n border-radius: 50%;\n background: rgba(246,156,30,0.12);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n flex-shrink: 0;\n margin-top: 0.1rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pi-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.6;\n }\n\n /* CTA bar */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta {\n display: flex;\n align-items: center;\n gap: 2rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta::before {\n content: '';\n position: absolute;\n top: -40px;\n right: -40px;\n width: 140px;\n height: 140px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-heading {\n display: block;\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.25;\n margin-bottom: 0.4rem;\n font-weight: 600;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-sub {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.88rem, 1.2vw, 0.95rem);\n line-height: 1.5;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.9rem 2rem;\n border-radius: 6px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.92rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n border: 2px solid var(--wsw-color-accent, #f69c1e);\n flex-shrink: 0;\n transition: background 0.25s ease-out, color 0.25s ease-out, transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--problems {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n padding: 1rem 1.15rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problems-cta {\n flex-direction: column;\n align-items: stretch;\n gap: 1.25rem;\n padding: 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n justify-content: center;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-problem-item {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-pcta-btn {\n transition: none;\n }\n }\n\n/* ── Section 8: Wie ich Websites sichtbarer mache ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 3rem 0;\n }\n\n /* Timeline layout */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline {\n position: relative;\n display: flex;\n flex-direction: column;\n gap: 0;\n padding-left: 3rem;\n }\n\n /* Vertical line */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline::before {\n content: '';\n position: absolute;\n left: 19px;\n top: 0;\n bottom: 0;\n width: 2px;\n background: linear-gradient(180deg, var(--wsw-color-accent, #f69c1e) 0%, rgba(246,156,30,0.15) 100%);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step {\n position: relative;\n padding: 0 0 3rem 2rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step:last-child {\n padding-bottom: 0;\n }\n\n /* Step number dot */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n position: absolute;\n left: -3rem;\n top: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1rem;\n font-weight: 700;\n z-index: 2;\n box-shadow: 0 0 0 6px var(--wsw-color-white, #fff);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.15rem, 2.2vw, 1.35rem);\n line-height: 1.2;\n margin: 0 0 0.6rem 0;\n padding-top: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.92rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n max-width: 640px;\n }\n\n /* Step card background on hover */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46,46,46,0.06);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card:hover {\n transform: translateX(6px);\n box-shadow: 0 8px 28px rgba(0,0,0,0.08);\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* Step keyword tag */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tags {\n display: flex;\n flex-wrap: wrap;\n gap: 0.5rem;\n margin-top: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag {\n display: inline-block;\n padding: 0.25rem 0.75rem;\n border-radius: 100px;\n background: rgba(246,156,30,0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n letter-spacing: 0.04rem;\n }\n\n /* Closing note */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing {\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: var(--wsw-color-black, #2e2e2e);\n border-radius: 12px;\n padding: 2rem 2.25rem;\n margin-top: 3rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing::before {\n content: '';\n position: absolute;\n bottom: -50px;\n right: -50px;\n width: 160px;\n height: 160px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-mc-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-mc-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.95rem, 1.4vw, 1.05rem);\n line-height: 1.7;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro {\n color: rgba(255,255,255,0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc {\n color: rgba(255,255,255,0.72);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n background: rgba(255,255,255,0.06);\n border-color: rgba(255,255,255,0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n box-shadow: 0 0 0 6px var(--wsw-color-black, #2e2e2e);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-tag {\n background: rgba(246,156,30,0.15);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing {\n background: rgba(255,255,255,0.06);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--method h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-intro {\n color: rgba(255,255,255,0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step h3 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-desc {\n color: rgba(255,255,255,0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n background: rgba(255,255,255,0.12);\n border-color: rgba(255,255,255,0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n box-shadow: 0 0 0 6px var(--wsw-color-accent, #f69c1e);\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline {\n padding-left: 2.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-timeline::before {\n left: 15px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-dot {\n left: -2.5rem;\n width: 32px;\n height: 32px;\n font-size: 0.85rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n padding: 1.25rem 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-step {\n padding-left: 1.5rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-method-closing {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-ms-card {\n transition: none;\n }\n }\n\n/* ── Section 9: Welche Leistungen dabei helfen ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services::before {\n content: '';\n position: absolute;\n top: -100px;\n right: -100px;\n width: 380px;\n height: 380px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-intro {\n color: rgba(255,255,255,0.7);\n font-size: clamp(0.95rem, 1.4vw, 1.08rem);\n line-height: 1.65;\n max-width: 700px;\n margin: 0 0 3rem 0;\n }\n\n /* Services grid */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-grid {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));\n gap: 1.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card {\n --pp-sc-radius: 12px;\n background: rgba(255,255,255,0.05);\n border: 1px solid rgba(255,255,255,0.08);\n border-radius: var(--pp-sc-radius);\n padding: 2rem 1.75rem 1.75rem;\n display: flex;\n flex-direction: column;\n gap: 0.6rem;\n position: relative;\n overflow: hidden;\n transition: transform 0.3s ease-out, border-color 0.3s ease-out, box-shadow 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card:hover {\n transform: translateY(-4px);\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 12px 32px rgba(0,0,0,0.25);\n }\n\n /* Card accent line top */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card::before {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0;\n transition: opacity 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card:hover::before {\n opacity: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 48px;\n height: 48px;\n border-radius: 12px;\n background: rgba(246,156,30,0.12);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 1.35rem;\n flex-shrink: 0;\n margin-bottom: 0.35rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card h3 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.1rem, 2vw, 1.3rem);\n line-height: 1.2;\n margin: 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-desc {\n color: rgba(255,255,255,0.72);\n font-size: clamp(0.9rem, 1.3vw, 1rem);\n line-height: 1.65;\n }\n\n /* Card link */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link {\n display: inline-flex;\n align-items: center;\n gap: 0.4rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.88rem;\n font-weight: 600;\n text-decoration: none;\n margin-top: auto;\n padding-top: 0.75rem;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link:hover {\n gap: 0.7rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link .pp-arrow {\n display: inline-block;\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link:hover .pp-arrow {\n transform: translateX(3px);\n }\n\n /* Upcoming services note */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-upcoming {\n margin-top: 2.5rem;\n display: flex;\n align-items: flex-start;\n gap: 1.25rem;\n background: rgba(246,156,30,0.08);\n border: 1px solid rgba(246,156,30,0.2);\n border-radius: 12px;\n padding: 1.75rem 2rem;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-upcoming::before {\n content: '';\n position: absolute;\n bottom: -40px;\n left: -40px;\n width: 120px;\n height: 120px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.06;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.15rem;\n flex-shrink: 0;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-content {\n flex: 1;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-label {\n display: block;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.78rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.1rem;\n margin-bottom: 0.5rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-text {\n color: rgba(255,255,255,0.88);\n font-size: clamp(0.92rem, 1.3vw, 1.02rem);\n line-height: 1.7;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-links {\n display: flex;\n flex-wrap: wrap;\n gap: 0.75rem;\n margin-top: 0.85rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-link {\n display: inline-flex;\n align-items: center;\n gap: 0.35rem;\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.85rem;\n font-weight: 600;\n text-decoration: none;\n transition: gap 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-link:hover {\n gap: 0.6rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-su-link:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n border-radius: 3px;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--services {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-grid {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card {\n padding: 1.5rem 1.25rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-services-upcoming {\n flex-direction: column;\n gap: 1rem;\n padding: 1.5rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-service-card::before {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-sc-link .pp-arrow {\n transition: none;\n }\n }\n\n/* ── Section 10: FAQ ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq {\n background: transparent;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2 {\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1.5rem, 3.5vw, 2.2rem);\n line-height: 1.12;\n margin: 0 0 1rem 0;\n position: relative;\n padding-bottom: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-intro {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.95rem, 1.5vw, 1.08rem);\n line-height: 1.7;\n max-width: 720px;\n margin: 0 0 2.5rem 0;\n }\n\n /* Accordion container */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-list {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n max-width: 840px;\n }\n\n /* Accordion item */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item {\n --pp-faq-radius: 12px;\n background: var(--wsw-color-white, #fff);\n border: 1px solid rgba(46, 46, 46, 0.08);\n border-radius: var(--pp-faq-radius);\n overflow: hidden;\n transition: border-color 0.3s ease-out, box-shadow 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open {\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);\n }\n\n /* Question button */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question {\n display: flex;\n align-items: center;\n gap: 1rem;\n width: 100%;\n padding: 1.35rem 1.75rem;\n background: transparent;\n border: none;\n cursor: pointer;\n text-align: left;\n font-family: inherit;\n transition: background 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question:hover {\n background: rgba(246, 156, 30, 0.04);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: -2px;\n border-radius: var(--pp-faq-radius);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 36px;\n height: 36px;\n border-radius: 10px;\n background: rgba(246, 156, 30, 0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.95rem;\n flex-shrink: 0;\n transition: background 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open .pp-faq-icon {\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-q-text {\n flex: 1;\n color: var(--wsw-color-black, #2e2e2e);\n font-size: clamp(1rem, 1.8vw, 1.15rem);\n font-weight: 600;\n line-height: 1.35;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-chevron {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n flex-shrink: 0;\n color: var(--wsw-color-dark, #626262);\n font-size: 1.1rem;\n transition: transform 0.35s ease-out, color 0.3s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open .pp-faq-chevron {\n transform: rotate(180deg);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* Answer panel */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-answer {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.4s ease-out;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-answer-inner {\n padding: 0 1.75rem 1.5rem 4.75rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-a-text {\n color: var(--wsw-color-dark, #626262);\n font-size: clamp(0.92rem, 1.4vw, 1.02rem);\n line-height: 1.75;\n }\n\n /* Separator line inside answer */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-answer-inner::before {\n content: '';\n display: block;\n width: 48px;\n height: 2px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n margin-bottom: 1rem;\n opacity: 0.5;\n }\n\n /* ── Dark theme overrides ── */\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-intro,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-intro,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-intro,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-intro {\n color: rgba(255, 255, 255, 0.75);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item {\n background: rgba(255, 255, 255, 0.06);\n border-color: rgba(255, 255, 255, 0.08);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open {\n border-color: var(--wsw-color-accent, #f69c1e);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-q-text,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-q-text,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-q-text,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-q-text {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-a-text,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-a-text,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-a-text,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-a-text {\n color: rgba(255, 255, 255, 0.72);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-chevron,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-chevron,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-chevron,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-chevron {\n color: rgba(255, 255, 255, 0.5);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question:hover,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question:hover,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question:hover,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question:hover {\n background: rgba(255, 255, 255, 0.04);\n }\n section.wsw-theme-d #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon,\n section.wsw-theme-db #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon,\n section.wsw-theme-b #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon,\n section.wsw-theme-bb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon {\n background: rgba(246, 156, 30, 0.15);\n }\n\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--faq h2 {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-intro {\n color: rgba(255, 255, 255, 0.85);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item {\n background: rgba(255, 255, 255, 0.12);\n border-color: rgba(255, 255, 255, 0.15);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-q-text {\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-a-text {\n color: rgba(255, 255, 255, 0.8);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon {\n background: rgba(255, 255, 255, 0.2);\n color: var(--wsw-color-white, #fff);\n }\n section.wsw-theme-a #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item.is-open .pp-faq-icon {\n background: var(--wsw-color-white, #fff);\n color: var(--wsw-color-accent, #f69c1e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-question {\n padding: 1.15rem 1.25rem;\n gap: 0.75rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-answer-inner {\n padding: 0 1.25rem 1.25rem 1.25rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon {\n width: 32px;\n height: 32px;\n font-size: 0.85rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-chevron {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-answer {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-icon {\n transition: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-faq-item {\n transition: none;\n }\n }\n\n/* ── Section 11: Schluss-CTA ── */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--cta {\n background: var(--wsw-color-black, #2e2e2e);\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--cta::before {\n content: '';\n position: absolute;\n top: -150px;\n left: 50%;\n transform: translateX(-50%);\n width: 600px;\n height: 600px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.05;\n border-radius: 50%;\n pointer-events: none;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--cta::after {\n content: '';\n position: absolute;\n bottom: -80px;\n right: -80px;\n width: 280px;\n height: 280px;\n background: var(--wsw-color-accent, #f69c1e);\n opacity: 0.04;\n border-radius: 50%;\n pointer-events: none;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-inner {\n max-width: 800px;\n margin: 0 auto;\n text-align: center;\n position: relative;\n z-index: 2;\n }\n\n /* Decorative top accent */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-accent {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 64px;\n height: 64px;\n border-radius: 50%;\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n font-size: 1.65rem;\n margin-bottom: 2rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--cta h2 {\n color: var(--wsw-color-white, #fff);\n font-size: clamp(1.5rem, 3.8vw, 2.4rem);\n line-height: 1.12;\n margin: 0 0 1.5rem 0;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-text {\n color: rgba(255, 255, 255, 0.82);\n font-size: clamp(0.95rem, 1.5vw, 1.12rem);\n line-height: 1.75;\n max-width: 680px;\n margin: 0 auto 2.5rem;\n }\n\n /* Divider line */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-divider {\n width: 64px;\n height: 3px;\n background: var(--wsw-color-accent, #f69c1e);\n border-radius: 2px;\n margin: 0 auto 2.5rem;\n opacity: 0.6;\n }\n\n /* Button group */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-buttons {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n justify-content: center;\n margin-bottom: 3rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 1rem 2.25rem;\n border-radius: 6px;\n font-family: 'Josefin Sans', sans-serif;\n font-weight: 500;\n font-size: 0.95rem;\n text-transform: uppercase;\n letter-spacing: 0.06rem;\n text-decoration: none;\n cursor: pointer;\n border: 2px solid transparent;\n transition: background 0.25s ease-out, color 0.25s ease-out, border-color 0.25s ease-out, transform 0.25s ease-out, box-shadow 0.25s ease-out;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-btn:focus-visible {\n outline: 2px solid var(--wsw-color-accent, #f69c1e);\n outline-offset: 3px;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-btn--primary {\n background: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-white, #fff);\n border-color: var(--wsw-color-accent, #f69c1e);\n box-shadow: 0 4px 20px rgba(246, 156, 30, 0.25);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-btn--primary:hover {\n background: transparent;\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n box-shadow: 0 6px 28px rgba(246, 156, 30, 0.3);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-btn--outline {\n background: transparent;\n color: var(--wsw-color-white, #fff);\n border-color: rgba(255, 255, 255, 0.35);\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-btn--outline:hover {\n border-color: var(--wsw-color-accent, #f69c1e);\n color: var(--wsw-color-accent, #f69c1e);\n transform: translateY(-2px);\n }\n\n /* Trust signals */\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-trust {\n display: flex;\n flex-wrap: wrap;\n justify-content: center;\n gap: 2rem;\n padding-top: 2rem;\n border-top: 1px solid rgba(255, 255, 255, 0.08);\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-trust-item {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n color: rgba(255, 255, 255, 0.55);\n font-size: 0.85rem;\n letter-spacing: 0.02rem;\n }\n\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-trust-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 28px;\n height: 28px;\n border-radius: 50%;\n background: rgba(246, 156, 30, 0.1);\n color: var(--wsw-color-accent, #f69c1e);\n font-size: 0.8rem;\n flex-shrink: 0;\n }\n\n /* ── Light theme overrides ── */\n section.wsw-theme-w #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--cta,\n section.wsw-theme-wb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--cta,\n section.wsw-theme-l #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--cta,\n section.wsw-theme-lb #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--cta,\n section.wsw-theme-al #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-section--cta {\n background: var(--wsw-color-black, #2e2e2e);\n }\n\n /* ── Responsive ── */\n @media (max-width: 768px) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-buttons {\n flex-direction: column;\n align-items: stretch;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-btn {\n justify-content: center;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-trust {\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n }\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-accent {\n width: 56px;\n height: 56px;\n font-size: 1.4rem;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2 .pp-cta-btn {\n transition: none;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2\">\n<div class=\"pp-section pp-section--basis\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim is-visible\">Eine moderne Website&nbsp;<span style=\"font-size: clamp(1.5rem, 3.5vw, 2.2rem); letter-spacing: 0.6px;\">ist die Basis jeder Online-Sichtbarkeit</span></h2>\n\n <span class=\"pp-basis-text pp-anim pp-anim-d1 is-visible\">Sie ist der Ort, an dem Leistungen erklärt, Vertrauen aufgebaut, Fragen beantwortet und Anfragen ausgelöst werden. Genau deshalb reicht es heute nicht mehr, „irgendeine Website\" zu haben.</span>\n\n <span class=\"pp-basis-text pp-anim pp-anim-d2 is-visible\">Eine Website sollte klar aufgebaut, mobil optimiert, suchmaschinenfreundlich, verständlich formuliert und regelmäßig weiterentwickelt werden. Erst dann kann sie als Grundlage für SEO, Google Profil, Blog, KI-Sichtbarkeit und neue Kundenanfragen funktionieren.</span>\n\n <!-- 🔗 LINK SETZEN: Webdesign / Website erstellen -->\n <a href=\"#\" class=\"pp-basis-cta pp-anim pp-anim-d3 is-visible\" title=\"Link zur Webdesign-Seite setzen\" draggable=\"false\">Mehr zu Webdesign &amp; Website-Erstellung erfahren <span class=\"pp-arrow\">→</span></a>\n\n </div>\n </div>\n\n<div class=\"pp-section pp-section--webdesign\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim is-visible\">Warum modernes Webdesign heute mehr können muss</h2>\n\n <span class=\"pp-webdesign-intro pp-anim pp-anim-d1 is-visible\">Früher wurde eine Website oft erstellt, damit ein Unternehmen „online ist\". Heute muss sie deutlich mehr leisten.</span>\n\n <span class=\"pp-webdesign-body pp-anim pp-anim-d2 is-visible\">Besucher möchten schnell verstehen, ob ein Angebot zu ihnen passt. Google braucht klare Strukturen und hilfreiche Inhalte. Und KI-gestützte Suchsysteme können Informationen nur dann gut einordnen, wenn sie verständlich, vollständig und logisch aufgebaut sind.</span>\n\n <span class=\"pp-webdesign-body pp-anim pp-anim-d2 is-visible\">Modernes Webdesign bedeutet deshalb nicht nur schöne Farben, Bilder und Layouts. Es geht um Struktur, Nutzerführung, Vertrauen, Inhalte, Technik und Auffindbarkeit.<br><br></span>\n\n <span class=\"pp-webdesign-label pp-anim pp-anim-d3 is-visible\">Eine gute Website beantwortet diese Fragen</span>\n\n <div class=\"pp-webdesign-checklist\">\n <div class=\"pp-wd-check-item pp-anim pp-anim-d3 is-visible\">\n <span class=\"pp-wd-check-icon\">?</span>\n <span class=\"pp-wd-check-text\">Was bietet das Unternehmen an?</span>\n </div>\n <div class=\"pp-wd-check-item pp-anim pp-anim-d3 is-visible\">\n <span class=\"pp-wd-check-icon\">?</span>\n <span class=\"pp-wd-check-text\">Für wen ist das Angebot geeignet?</span>\n </div>\n <div class=\"pp-wd-check-item pp-anim pp-anim-d4 is-visible\">\n <span class=\"pp-wd-check-icon\">?</span>\n <span class=\"pp-wd-check-text\">Warum ist dieses Unternehmen vertrauenswürdig?</span>\n </div>\n <div class=\"pp-wd-check-item pp-anim pp-anim-d4 is-visible\">\n <span class=\"pp-wd-check-icon\">?</span>\n <span class=\"pp-wd-check-text\">Wo ist der Betrieb tätig?</span>\n </div>\n <div class=\"pp-wd-check-item pp-anim pp-anim-d5 is-visible\">\n <span class=\"pp-wd-check-icon\">?</span>\n <span class=\"pp-wd-check-text\">Wie kann ich Kontakt aufnehmen, buchen oder anfragen?</span>\n </div>\n <div class=\"pp-wd-check-item pp-anim pp-anim-d5 is-visible\">\n <span class=\"pp-wd-check-icon\">?</span>\n <span class=\"pp-wd-check-text\">Welche Fragen werden vorab beantwortet?</span>\n </div>\n </div>\n\n <a href=\"#\" class=\"pp-webdesign-cta pp-anim pp-anim-d6 is-visible\" title=\"Link zur Webdesign-Seite setzen\" draggable=\"false\">Website erstellen lassen – klar, sichtbar und alltagstauglich <span class=\"pp-arrow\">→</span></a>\n\n </div>\n </div>\n\n<div class=\"pp-section pp-section--relaunch\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim is-visible\">Wann ein Website-Relaunch sinnvoll ist</h2>\n\n <span class=\"pp-relaunch-intro pp-anim pp-anim-d1 is-visible\">Nicht immer muss eine Website komplett neu gedacht werden. Manchmal reicht eine gezielte Überarbeitung. In vielen Fällen ist ein Relaunch jedoch sinnvoll, wenn die Website nicht mehr zum Unternehmen, zur Zielgruppe oder zum heutigen Suchverhalten passt.<br><br></span>\n\n <span class=\"pp-relaunch-label pp-anim pp-anim-d2 is-visible\">Typische Anzeichen für einen Relaunch</span>\n\n <div class=\"pp-relaunch-grid\">\n <div class=\"pp-relaunch-item pp-anim pp-anim-d2 is-visible\">\n <span class=\"pp-ri-icon\">⚠</span>\n <span class=\"pp-ri-text\">Die Website wirkt optisch veraltet.</span>\n </div>\n <div class=\"pp-relaunch-item pp-anim pp-anim-d2 is-visible\">\n <span class=\"pp-ri-icon\">⚠</span>\n <span class=\"pp-ri-text\">Die Inhalte sind zu knapp oder nicht mehr aktuell.</span>\n </div>\n <div class=\"pp-relaunch-item pp-anim pp-anim-d3 is-visible\">\n <span class=\"pp-ri-icon\">⚠</span>\n <span class=\"pp-ri-text\">Leistungen werden nicht klar genug erklärt.</span>\n </div>\n <div class=\"pp-relaunch-item pp-anim pp-anim-d3 is-visible\">\n <span class=\"pp-ri-icon\">⚠</span>\n <span class=\"pp-ri-text\">Die Seite ist mobil nicht angenehm nutzbar.</span>\n </div>\n <div class=\"pp-relaunch-item pp-anim pp-anim-d4 is-visible\">\n <span class=\"pp-ri-icon\">⚠</span>\n <span class=\"pp-ri-text\">Es fehlen klare Kontaktwege und Handlungsaufforderungen.</span>\n </div>\n <div class=\"pp-relaunch-item pp-anim pp-anim-d4 is-visible\">\n <span class=\"pp-ri-icon\">⚠</span>\n <span class=\"pp-ri-text\">Die Website wird bei Google kaum gefunden.</span>\n </div>\n <div class=\"pp-relaunch-item pp-anim pp-anim-d5 is-visible\">\n <span class=\"pp-ri-icon\">⚠</span>\n <span class=\"pp-ri-text\">Google Profil und Website passen nicht zusammen.</span>\n </div>\n <div class=\"pp-relaunch-item pp-anim pp-anim-d5 is-visible\">\n <span class=\"pp-ri-icon\">⚠</span>\n <span class=\"pp-ri-text\">FAQ, Blog oder hilfreiche Inhalte fehlen komplett.</span>\n </div>\n <div class=\"pp-relaunch-item pp-anim pp-anim-d6 is-visible\">\n <span class=\"pp-ri-icon\">⚠</span>\n <span class=\"pp-ri-text\">Die Seite lässt sich nur schwer pflegen.</span>\n </div>\n <div class=\"pp-relaunch-item pp-anim pp-anim-d6 is-visible\">\n <span class=\"pp-ri-icon\">⚠</span>\n <span class=\"pp-ri-text\">Es kommen zu wenig Anfragen über die Website.</span>\n </div>\n </div>\n\n <span class=\"pp-relaunch-closing pp-anim pp-anim-d6 is-visible\">Dann kann ein Website-Relaunch helfen, Struktur, Inhalte, Design und Sichtbarkeit neu auszurichten — und die Website wieder zu dem zu machen, was sie sein sollte: ein Werkzeug für neue Kunden.</span>\n\n <a href=\"#\" class=\"pp-relaunch-cta pp-anim pp-anim-d6 is-visible\" title=\"Link zum Website-Check oder zur Webdesign-Seite setzen\" draggable=\"false\">Website-Relaunch prüfen lassen <span class=\"pp-arrow\">→</span></a>\n\n </div>\n </div>\n\n<!-- ════════ PART 1: HERO ════════ -->\n <div class=\"pp-hero is-visible\">\n <div class=\"pp-hero-bg\">\n <img src=\"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1600&amp;q=80\" alt=\"Digitaler Arbeitsplatz mit Bildschirmen und Datenvisualisierung\" draggable=\"false\">\n </div>\n <div class=\"pp-hero-overlay\"></div>\n\n <div class=\"pp-hero-content\">\n <span class=\"pp-hero-badge\">Pillar Page · Sichtbarkeit</span>\n <h1>Sichtbar werden im KI-Zeitalter</h1>\n <span class=\"pp-hero-subline\">Google verändert sich. KI-Antworten, Sprachsuche und neue Suchgewohnheiten sorgen dafür, dass Websites heute klarer, hilfreicher und besser strukturiert sein müssen als früher.</span>\n <span class=\"pp-hero-intro\">Viele Unternehmen haben eine Website – und trotzdem werden sie online nicht so gefunden, wie sie es sich wünschen. Früher reichte es oft, mit ein paar Suchbegriffen bei Google sichtbar zu sein. Heute suchen Menschen anders: Sie stellen ganze Fragen, vergleichen schneller, nutzen Google, Karten, KI-Tools und Empfehlungen. Genau deshalb braucht Sichtbarkeit heute mehr als klassische SEO.<br><br></span>\n <div class=\"pp-hero-ctas\">\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-btn pp-btn--primary\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Sichtbarkeit prüfen lassen →</a>\n <!-- 🔗 LINK SETZEN: Kontakt / Termine / Webinare -->\n <a href=\"#\" class=\"pp-btn pp-btn--outline\" title=\"Link zu Kontakt oder Termine/Webinare setzen\" draggable=\"false\">Beratungstermin vereinbaren</a>\n </div>\n </div>\n\n <div class=\"pp-hero-scroll\">\n <span>Mehr erfahren</span>\n <div class=\"pp-scroll-line\"></div>\n </div>\n </div>\n\n<!-- ════════ PART 2: WARUM SICH SICHTBARKEIT VERÄNDERT HAT ════════ -->\n <div class=\"pp-section pp-section--change\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim is-visible\">Warum „bei Google gefunden werden\" heute anders funktioniert</h2>\n\n <div class=\"pp-split\">\n <!-- Text-Spalte -->\n <div class=\"pp-split-text pp-anim pp-anim-d1 is-visible\">\n <span>Google zeigt nicht mehr nur zehn blaue Links. Antworten werden zunehmend direkt zusammengefasst, Suchanfragen werden länger und konkreter, und Nutzer erwarten schnelle Orientierung. KI-Systeme greifen bevorzugt auf klar strukturierte, vertrauenswürdige Informationen zurück.</span>\n <span>Studien aus 2026 zeigen, dass AI Overviews bei vielen Suchanfragen erscheinen können und teilweise andere Quellen nutzen als klassische organische Google-Ergebnisse. Für Unternehmen bedeutet das: Wer nur auf herkömmliche Rankings setzt, verschenkt zunehmend Reichweite.</span>\n </div>\n\n <!-- Bild-Spalte -->\n <div class=\"pp-split-visual pp-anim pp-anim-d2 is-visible\">\n <img src=\"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&amp;q=80\" alt=\"Datenanalyse-Dashboard mit Diagrammen und Statistiken\" loading=\"lazy\" draggable=\"false\">\n <div class=\"pp-img-overlay\"></div>\n </div>\n </div>\n\n <!-- Highlight-Box -->\n <div class=\"pp-highlight-box pp-anim pp-anim-d3 is-visible\" style=\"margin-top: 2.5rem;\">\n <span class=\"pp-hb-label\">Wichtig für Ihr Unternehmen</span>\n <span class=\"pp-hb-text\">Eine Website darf heute nicht nur schön aussehen. Sie muss Antworten geben, Vertrauen aufbauen, Leistungen klar erklären und technisch sowie inhaltlich so strukturiert sein, dass Google, KI-Systeme und Menschen sie verstehen.</span>\n </div>\n\n </div>\n </div>\n\n<!-- ════════ PART 3: DIE 5 BAUSTEINE MODERNER SICHTBARKEIT ════════ -->\n <div class=\"pp-section pp-section--pillars\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim is-visible\">Die 5 Bausteine moderner Sichtbarkeit</h2>\n <span class=\"pp-pillars-intro pp-anim pp-anim-d1 is-visible\">Sichtbarkeit entsteht heute nicht durch eine einzelne Maßnahme — sondern durch das Zusammenspiel mehrerer Faktoren. Diese fünf Bausteine bilden die Grundlage.</span>\n\n <div class=\"pp-pillars-grid\">\n\n <!-- Baustein 1 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d1 is-visible\">\n <span class=\"pp-pillar-num\">1</span>\n <h3>Eine klare Website-Struktur</h3>\n <span class=\"pp-pillar-desc\">Besucher müssen sofort verstehen, was angeboten wird, für wen es passt und wie sie Kontakt aufnehmen können.</span>\n <!-- 🔗 LINK SETZEN: Webdesign / Website & Sichtbarkeit -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zu Website &amp; Sichtbarkeit setzen\" draggable=\"false\">Website klar strukturieren und sichtbar aufbauen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 2 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d2 is-visible\">\n <span class=\"pp-pillar-num\">2</span>\n <h3>SEO-Grundlagen</h3>\n <span class=\"pp-pillar-desc\">Seitentitel, Überschriften, Suchbegriffe, Ladezeit, interne Links und mobilfreundliche Darstellung bleiben wichtig.</span>\n <!-- 🔗 LINK SETZEN: SEO-Seite -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur SEO-Seite setzen\" draggable=\"false\">SEO für kleine Unternehmen verständlich erklärt <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 3 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d3 is-visible\">\n <span class=\"pp-pillar-num\">3</span>\n <h3>Inhalte, die echte Fragen beantworten</h3>\n <span class=\"pp-pillar-desc\">FAQ, Blogbeiträge, Ratgeberseiten und gut aufgebaute Leistungsseiten helfen Nutzern – und liefern Suchmaschinen bessere Signale.</span>\n <!-- 🔗 LINK SETZEN: Blog / Impulse -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zum Blog / Impulse setzen\" draggable=\"false\">Tipps zu SEO, Google, KI und Online-Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 4 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d4 is-visible\">\n <span class=\"pp-pillar-num\">4</span>\n <h3>Google Unternehmensprofil</h3>\n <span class=\"pp-pillar-desc\">Für lokale Unternehmen ist das Google Profil oft der erste Kontaktpunkt – noch vor der Website.</span>\n <!-- 🔗 LINK SETZEN: Google Profil -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Google-Profil-Seite setzen\" draggable=\"false\">Google Unternehmensprofil optimieren <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 5 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d5 is-visible\">\n <span class=\"pp-pillar-num\">5</span>\n <h3>KI- und GEO-Sichtbarkeit</h3>\n <span class=\"pp-pillar-desc\">Inhalte müssen so klar, hilfreich und zitierfähig sein, dass sie auch in KI-gestützten Suchumgebungen verstanden werden.</span>\n <!-- 🔗 LINK SETZEN: Grounding Page / Pillar Page Angebot -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Grounding Page / Pillar Page Angebot setzen\" draggable=\"false\">Grounding Page für KI-Sichtbarkeit erstellen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n </div>\n </div>\n </div>\n\n<div class=\"pp-section pp-section--explain\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim is-visible\">SEO, GEO, KI-Sichtbarkeit – was bedeutet das eigentlich?</h2>\n <span class=\"pp-explain-intro pp-anim pp-anim-d1 is-visible\">Diese drei Begriffe tauchen immer häufiger auf. Hier eine klare Einordnung – ohne Fachchinesisch.</span>\n\n <div class=\"pp-explain-grid\">\n\n <!-- SEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d1 is-visible\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🔍</div>\n <span class=\"pp-ec-abbr\">SEO</span>\n <h3>Suchmaschinen-optimierung</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">SEO sorgt dafür, dass Ihre Website in klassischen Suchmaschinen besser gefunden wird – durch passende Suchbegriffe, klare Seitenstruktur, gute Ladezeiten und hilfreiche Inhalte.</span>\n </div>\n </div>\n\n <!-- GEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d2 is-visible\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">⚙️</div>\n <span class=\"pp-ec-abbr\">GEO</span>\n <h3>Generative Engine Optimization</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">GEO bedeutet, Inhalte so aufzubereiten, dass sie auch von KI-gestützten Suchsystemen verstanden, eingeordnet und möglichst als Quelle berücksichtigt werden können.</span>\n </div>\n </div>\n\n <!-- KI-Sichtbarkeit -->\n <div class=\"pp-explain-card pp-anim pp-anim-d3 is-visible\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🤖</div>\n <span class=\"pp-ec-abbr\">KI-Sichtbarkeit</span>\n <h3>Im digitalen Raum erkennbar sein</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">KI-Sichtbarkeit meint, dass Ihr Unternehmen nicht nur in Suchergebnissen auftaucht, sondern mit klaren Informationen, Antworten, Leistungen, Standorten und Vertrauenssignalen im digitalen Raum erkennbar ist.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Takeaway -->\n <div class=\"pp-explain-takeaway pp-anim pp-anim-d3 is-visible\">\n <div class=\"pp-et-icon\">💡</div>\n <div class=\"pp-et-content\">\n <span class=\"pp-et-label\">Das Wichtigste</span>\n <span class=\"pp-et-text\">Sie müssen kein Technik-Experte sein. Entscheidend ist: Ihre Website braucht bessere Inhalte und eine klarere Struktur – dann profitieren Sie sowohl von klassischem SEO als auch von der neuen KI-Sichtbarkeit.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<!-- ════════ PART 1: HERO ════════ -->\n <div class=\"pp-hero\">\n <div class=\"pp-hero-bg\">\n <img src=\"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1600&amp;q=80\" alt=\"Digitaler Arbeitsplatz mit Bildschirmen und Datenvisualisierung\" draggable=\"false\">\n </div>\n <div class=\"pp-hero-overlay\"></div>\n\n <div class=\"pp-hero-content\">\n <span class=\"pp-hero-badge\">Pillar Page · Sichtbarkeit</span>\n <h1>Sichtbar werden im KI-Zeitalter</h1>\n <span class=\"pp-hero-subline\">Google verändert sich. KI-Antworten, Sprachsuche und neue Suchgewohnheiten sorgen dafür, dass Websites heute klarer, hilfreicher und besser strukturiert sein müssen als früher.</span>\n <span class=\"pp-hero-intro\">Viele Unternehmen haben eine Website – und trotzdem werden sie online nicht so gefunden, wie sie es sich wünschen. Früher reichte es oft, mit ein paar Suchbegriffen bei Google sichtbar zu sein. Heute suchen Menschen anders: Sie stellen ganze Fragen, vergleichen schneller, nutzen Google, Karten, KI-Tools und Empfehlungen. Genau deshalb braucht Sichtbarkeit heute mehr als klassische SEO.</span>\n <div class=\"pp-hero-ctas\">\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-btn pp-btn--primary\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Sichtbarkeit prüfen lassen →</a>\n <!-- 🔗 LINK SETZEN: Kontakt / Termine / Webinare -->\n <a href=\"#\" class=\"pp-btn pp-btn--outline\" title=\"Link zu Kontakt oder Termine/Webinare setzen\" draggable=\"false\">Beratungstermin vereinbaren</a>\n </div>\n </div>\n\n <div class=\"pp-hero-scroll\">\n <span>Mehr erfahren</span>\n <div class=\"pp-scroll-line\"></div>\n </div>\n </div>\n\n<!-- ════════ PART 2: WARUM SICH SICHTBARKEIT VERÄNDERT HAT ════════ -->\n <div class=\"pp-section pp-section--change\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim is-visible\">Warum „bei Google gefunden werden\" heute anders funktioniert</h2>\n\n <div class=\"pp-split\">\n <!-- Text-Spalte -->\n <div class=\"pp-split-text pp-anim pp-anim-d1 is-visible\">\n <span>Google zeigt nicht mehr nur zehn blaue Links. Antworten werden zunehmend direkt zusammengefasst, Suchanfragen werden länger und konkreter, und Nutzer erwarten schnelle Orientierung. KI-Systeme greifen bevorzugt auf klar strukturierte, vertrauenswürdige Informationen zurück.</span>\n <span>Studien aus 2026 zeigen, dass AI Overviews bei vielen Suchanfragen erscheinen können und teilweise andere Quellen nutzen als klassische organische Google-Ergebnisse. Für Unternehmen bedeutet das: Wer nur auf herkömmliche Rankings setzt, verschenkt zunehmend Reichweite.</span>\n </div>\n\n <!-- Bild-Spalte -->\n <div class=\"pp-split-visual pp-anim pp-anim-d2 is-visible\">\n <img src=\"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&amp;q=80\" alt=\"Datenanalyse-Dashboard mit Diagrammen und Statistiken\" loading=\"lazy\" draggable=\"false\">\n <div class=\"pp-img-overlay\"></div>\n </div>\n </div>\n\n <!-- Highlight-Box -->\n <div class=\"pp-highlight-box pp-anim pp-anim-d3 is-visible\" style=\"margin-top: 2.5rem;\">\n <span class=\"pp-hb-label\">Wichtig für Ihr Unternehmen</span>\n <span class=\"pp-hb-text\">Eine Website darf heute nicht nur schön aussehen. Sie muss Antworten geben, Vertrauen aufbauen, Leistungen klar erklären und technisch sowie inhaltlich so strukturiert sein, dass Google, KI-Systeme und Menschen sie verstehen.</span>\n </div>\n\n </div>\n </div>\n\n<!-- ════════ PART 3: DIE 5 BAUSTEINE MODERNER SICHTBARKEIT ════════ -->\n <div class=\"pp-section pp-section--pillars\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim is-visible\">Die 5 Bausteine moderner Sichtbarkeit</h2>\n <span class=\"pp-pillars-intro pp-anim pp-anim-d1 is-visible\">Sichtbarkeit entsteht heute nicht durch eine einzelne Maßnahme — sondern durch das Zusammenspiel mehrerer Faktoren. Diese fünf Bausteine bilden die Grundlage.</span>\n\n <div class=\"pp-pillars-grid\">\n\n <!-- Baustein 1 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d1\">\n <span class=\"pp-pillar-num\">1</span>\n <h3>Eine klare Website-Struktur</h3>\n <span class=\"pp-pillar-desc\">Besucher müssen sofort verstehen, was angeboten wird, für wen es passt und wie sie Kontakt aufnehmen können.</span>\n <!-- 🔗 LINK SETZEN: Webdesign / Website & Sichtbarkeit -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zu Website &amp; Sichtbarkeit setzen\" draggable=\"false\">Website klar strukturieren und sichtbar aufbauen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 2 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d2\">\n <span class=\"pp-pillar-num\">2</span>\n <h3>SEO-Grundlagen</h3>\n <span class=\"pp-pillar-desc\">Seitentitel, Überschriften, Suchbegriffe, Ladezeit, interne Links und mobilfreundliche Darstellung bleiben wichtig.</span>\n <!-- 🔗 LINK SETZEN: SEO-Seite -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur SEO-Seite setzen\" draggable=\"false\">SEO für kleine Unternehmen verständlich erklärt <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 3 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d3\">\n <span class=\"pp-pillar-num\">3</span>\n <h3>Inhalte, die echte Fragen beantworten</h3>\n <span class=\"pp-pillar-desc\">FAQ, Blogbeiträge, Ratgeberseiten und gut aufgebaute Leistungsseiten helfen Nutzern – und liefern Suchmaschinen bessere Signale.</span>\n <!-- 🔗 LINK SETZEN: Blog / Impulse -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zum Blog / Impulse setzen\" draggable=\"false\">Tipps zu SEO, Google, KI und Online-Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 4 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d4\">\n <span class=\"pp-pillar-num\">4</span>\n <h3>Google Unternehmensprofil</h3>\n <span class=\"pp-pillar-desc\">Für lokale Unternehmen ist das Google Profil oft der erste Kontaktpunkt – noch vor der Website.</span>\n <!-- 🔗 LINK SETZEN: Google Profil -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Google-Profil-Seite setzen\" draggable=\"false\">Google Unternehmensprofil optimieren <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 5 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d5\">\n <span class=\"pp-pillar-num\">5</span>\n <h3>KI- und GEO-Sichtbarkeit</h3>\n <span class=\"pp-pillar-desc\">Inhalte müssen so klar, hilfreich und zitierfähig sein, dass sie auch in KI-gestützten Suchumgebungen verstanden werden.</span>\n <!-- 🔗 LINK SETZEN: Grounding Page / Pillar Page Angebot -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Grounding Page / Pillar Page Angebot setzen\" draggable=\"false\">Grounding Page für KI-Sichtbarkeit erstellen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n </div>\n </div>\n </div>\n\n<div class=\"pp-section pp-section--explain\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">SEO, GEO, KI-Sichtbarkeit – was bedeutet das eigentlich?</h2>\n <span class=\"pp-explain-intro pp-anim pp-anim-d1\">Diese drei Begriffe tauchen immer häufiger auf. Hier eine klare Einordnung – ohne Fachchinesisch.</span>\n\n <div class=\"pp-explain-grid\">\n\n <!-- SEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d1\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🔍</div>\n <span class=\"pp-ec-abbr\">SEO</span>\n <h3>Suchmaschinen-optimierung</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">SEO sorgt dafür, dass Ihre Website in klassischen Suchmaschinen besser gefunden wird – durch passende Suchbegriffe, klare Seitenstruktur, gute Ladezeiten und hilfreiche Inhalte.</span>\n </div>\n </div>\n\n <!-- GEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d2\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">⚙️</div>\n <span class=\"pp-ec-abbr\">GEO</span>\n <h3>Generative Engine Optimization</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">GEO bedeutet, Inhalte so aufzubereiten, dass sie auch von KI-gestützten Suchsystemen verstanden, eingeordnet und möglichst als Quelle berücksichtigt werden können.</span>\n </div>\n </div>\n\n <!-- KI-Sichtbarkeit -->\n <div class=\"pp-explain-card pp-anim pp-anim-d3\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🤖</div>\n <span class=\"pp-ec-abbr\">KI-Sichtbarkeit</span>\n <h3>Im digitalen Raum erkennbar sein</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">KI-Sichtbarkeit meint, dass Ihr Unternehmen nicht nur in Suchergebnissen auftaucht, sondern mit klaren Informationen, Antworten, Leistungen, Standorten und Vertrauenssignalen im digitalen Raum erkennbar ist.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Takeaway -->\n <div class=\"pp-explain-takeaway pp-anim pp-anim-d3\">\n <div class=\"pp-et-icon\">💡</div>\n <div class=\"pp-et-content\">\n <span class=\"pp-et-label\">Das Wichtigste</span>\n <span class=\"pp-et-text\">Sie müssen kein Technik-Experte sein. Entscheidend ist: Ihre Website braucht bessere Inhalte und eine klarere Struktur – dann profitieren Sie sowohl von klassischem SEO als auch von der neuen KI-Sichtbarkeit.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--website\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Ihre Website muss heute mehr können als gut aussehen</h2>\n <span class=\"pp-website-motto pp-anim pp-anim-d1\">Nicht nur online sein – sichtbar überzeugen.</span>\n\n <div class=\"pp-website-grid\">\n\n <div class=\"pp-website-item pp-anim pp-anim-d1\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Eine gute Website beantwortet Fragen, bevor sie gestellt werden.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d2\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie zeigt, warum ein Unternehmen vertrauenswürdig ist.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d3\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie führt Besucher klar zum nächsten Schritt.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d4\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie verbindet Leistungen, Blog, FAQ, Google Profil und Kontaktmöglichkeiten miteinander.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d5\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie wird regelmäßig gepflegt, erweitert und aktualisiert.</span>\n </div>\n\n </div>\n\n <!-- Google-Empfehlung -->\n <div class=\"pp-website-note pp-anim pp-anim-d6\">\n <div class=\"pp-wn-icon\">🔗</div>\n <div class=\"pp-wn-content\">\n <span class=\"pp-wn-label\">Google empfiehlt</span>\n <span class=\"pp-wn-text\">Links so einzusetzen, dass Nutzer und Google besser verstehen, wohin eine Seite führt und welche Inhalte zusammengehören. Das spricht klar für eine Strategie mit interner Verlinkung, Pillar Pages, Blogbeiträgen und FAQ-Bereichen.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<!-- ════════ PART 1: HERO ════════ -->\n <div class=\"pp-hero\">\n <div class=\"pp-hero-bg\">\n <img src=\"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1600&amp;q=80\" alt=\"Digitaler Arbeitsplatz mit Bildschirmen und Datenvisualisierung\" draggable=\"false\">\n </div>\n <div class=\"pp-hero-overlay\"></div>\n\n <div class=\"pp-hero-content\">\n <span class=\"pp-hero-badge\">Pillar Page · Sichtbarkeit</span>\n <h1>Sichtbar werden im KI-Zeitalter</h1>\n <span class=\"pp-hero-subline\">Google verändert sich. KI-Antworten, Sprachsuche und neue Suchgewohnheiten sorgen dafür, dass Websites heute klarer, hilfreicher und besser strukturiert sein müssen als früher.</span>\n <span class=\"pp-hero-intro\">Viele Unternehmen haben eine Website – und trotzdem werden sie online nicht so gefunden, wie sie es sich wünschen. Früher reichte es oft, mit ein paar Suchbegriffen bei Google sichtbar zu sein. Heute suchen Menschen anders: Sie stellen ganze Fragen, vergleichen schneller, nutzen Google, Karten, KI-Tools und Empfehlungen. Genau deshalb braucht Sichtbarkeit heute mehr als klassische SEO.</span>\n <div class=\"pp-hero-ctas\">\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-btn pp-btn--primary\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Sichtbarkeit prüfen lassen →</a>\n <!-- 🔗 LINK SETZEN: Kontakt / Termine / Webinare -->\n <a href=\"#\" class=\"pp-btn pp-btn--outline\" title=\"Link zu Kontakt oder Termine/Webinare setzen\" draggable=\"false\">Beratungstermin vereinbaren</a>\n </div>\n </div>\n\n <div class=\"pp-hero-scroll\">\n <span>Mehr erfahren</span>\n <div class=\"pp-scroll-line\"></div>\n </div>\n </div>\n\n<!-- ════════ PART 2: WARUM SICH SICHTBARKEIT VERÄNDERT HAT ════════ -->\n <div class=\"pp-section pp-section--change\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Warum „bei Google gefunden werden\" heute anders funktioniert</h2>\n\n <div class=\"pp-split\">\n <!-- Text-Spalte -->\n <div class=\"pp-split-text pp-anim pp-anim-d1\">\n <span>Google zeigt nicht mehr nur zehn blaue Links. Antworten werden zunehmend direkt zusammengefasst, Suchanfragen werden länger und konkreter, und Nutzer erwarten schnelle Orientierung. KI-Systeme greifen bevorzugt auf klar strukturierte, vertrauenswürdige Informationen zurück.</span>\n <span>Studien aus 2026 zeigen, dass AI Overviews bei vielen Suchanfragen erscheinen können und teilweise andere Quellen nutzen als klassische organische Google-Ergebnisse. Für Unternehmen bedeutet das: Wer nur auf herkömmliche Rankings setzt, verschenkt zunehmend Reichweite.</span>\n </div>\n\n <!-- Bild-Spalte -->\n <div class=\"pp-split-visual pp-anim pp-anim-d2\">\n <img src=\"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&amp;q=80\" alt=\"Datenanalyse-Dashboard mit Diagrammen und Statistiken\" loading=\"lazy\" draggable=\"false\">\n <div class=\"pp-img-overlay\"></div>\n </div>\n </div>\n\n <!-- Highlight-Box -->\n <div class=\"pp-highlight-box pp-anim pp-anim-d3\" style=\"margin-top: 2.5rem;\">\n <span class=\"pp-hb-label\">Wichtig für Ihr Unternehmen</span>\n <span class=\"pp-hb-text\">Eine Website darf heute nicht nur schön aussehen. Sie muss Antworten geben, Vertrauen aufbauen, Leistungen klar erklären und technisch sowie inhaltlich so strukturiert sein, dass Google, KI-Systeme und Menschen sie verstehen.</span>\n </div>\n\n </div>\n </div>\n\n<!-- ════════ PART 3: DIE 5 BAUSTEINE MODERNER SICHTBARKEIT ════════ -->\n <div class=\"pp-section pp-section--pillars\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Die 5 Bausteine moderner Sichtbarkeit</h2>\n <span class=\"pp-pillars-intro pp-anim pp-anim-d1\">Sichtbarkeit entsteht heute nicht durch eine einzelne Maßnahme — sondern durch das Zusammenspiel mehrerer Faktoren. Diese fünf Bausteine bilden die Grundlage.</span>\n\n <div class=\"pp-pillars-grid\">\n\n <!-- Baustein 1 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d1\">\n <span class=\"pp-pillar-num\">1</span>\n <h3>Eine klare Website-Struktur</h3>\n <span class=\"pp-pillar-desc\">Besucher müssen sofort verstehen, was angeboten wird, für wen es passt und wie sie Kontakt aufnehmen können.</span>\n <!-- 🔗 LINK SETZEN: Webdesign / Website & Sichtbarkeit -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zu Website &amp; Sichtbarkeit setzen\" draggable=\"false\">Website klar strukturieren und sichtbar aufbauen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 2 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d2\">\n <span class=\"pp-pillar-num\">2</span>\n <h3>SEO-Grundlagen</h3>\n <span class=\"pp-pillar-desc\">Seitentitel, Überschriften, Suchbegriffe, Ladezeit, interne Links und mobilfreundliche Darstellung bleiben wichtig.</span>\n <!-- 🔗 LINK SETZEN: SEO-Seite -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur SEO-Seite setzen\" draggable=\"false\">SEO für kleine Unternehmen verständlich erklärt <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 3 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d3\">\n <span class=\"pp-pillar-num\">3</span>\n <h3>Inhalte, die echte Fragen beantworten</h3>\n <span class=\"pp-pillar-desc\">FAQ, Blogbeiträge, Ratgeberseiten und gut aufgebaute Leistungsseiten helfen Nutzern – und liefern Suchmaschinen bessere Signale.</span>\n <!-- 🔗 LINK SETZEN: Blog / Impulse -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zum Blog / Impulse setzen\" draggable=\"false\">Tipps zu SEO, Google, KI und Online-Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 4 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d4\">\n <span class=\"pp-pillar-num\">4</span>\n <h3>Google Unternehmensprofil</h3>\n <span class=\"pp-pillar-desc\">Für lokale Unternehmen ist das Google Profil oft der erste Kontaktpunkt – noch vor der Website.</span>\n <!-- 🔗 LINK SETZEN: Google Profil -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Google-Profil-Seite setzen\" draggable=\"false\">Google Unternehmensprofil optimieren <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 5 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d5\">\n <span class=\"pp-pillar-num\">5</span>\n <h3>KI- und GEO-Sichtbarkeit</h3>\n <span class=\"pp-pillar-desc\">Inhalte müssen so klar, hilfreich und zitierfähig sein, dass sie auch in KI-gestützten Suchumgebungen verstanden werden.</span>\n <!-- 🔗 LINK SETZEN: Grounding Page / Pillar Page Angebot -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Grounding Page / Pillar Page Angebot setzen\" draggable=\"false\">Grounding Page für KI-Sichtbarkeit erstellen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n </div>\n </div>\n </div>\n\n<div class=\"pp-section pp-section--explain\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">SEO, GEO, KI-Sichtbarkeit – was bedeutet das eigentlich?</h2>\n <span class=\"pp-explain-intro pp-anim pp-anim-d1\">Diese drei Begriffe tauchen immer häufiger auf. Hier eine klare Einordnung – ohne Fachchinesisch.</span>\n\n <div class=\"pp-explain-grid\">\n\n <!-- SEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d1\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🔍</div>\n <span class=\"pp-ec-abbr\">SEO</span>\n <h3>Suchmaschinen-optimierung</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">SEO sorgt dafür, dass Ihre Website in klassischen Suchmaschinen besser gefunden wird – durch passende Suchbegriffe, klare Seitenstruktur, gute Ladezeiten und hilfreiche Inhalte.</span>\n </div>\n </div>\n\n <!-- GEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d2\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">⚙️</div>\n <span class=\"pp-ec-abbr\">GEO</span>\n <h3>Generative Engine Optimization</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">GEO bedeutet, Inhalte so aufzubereiten, dass sie auch von KI-gestützten Suchsystemen verstanden, eingeordnet und möglichst als Quelle berücksichtigt werden können.</span>\n </div>\n </div>\n\n <!-- KI-Sichtbarkeit -->\n <div class=\"pp-explain-card pp-anim pp-anim-d3\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🤖</div>\n <span class=\"pp-ec-abbr\">KI-Sichtbarkeit</span>\n <h3>Im digitalen Raum erkennbar sein</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">KI-Sichtbarkeit meint, dass Ihr Unternehmen nicht nur in Suchergebnissen auftaucht, sondern mit klaren Informationen, Antworten, Leistungen, Standorten und Vertrauenssignalen im digitalen Raum erkennbar ist.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Takeaway -->\n <div class=\"pp-explain-takeaway pp-anim pp-anim-d3\">\n <div class=\"pp-et-icon\">💡</div>\n <div class=\"pp-et-content\">\n <span class=\"pp-et-label\">Das Wichtigste</span>\n <span class=\"pp-et-text\">Sie müssen kein Technik-Experte sein. Entscheidend ist: Ihre Website braucht bessere Inhalte und eine klarere Struktur – dann profitieren Sie sowohl von klassischem SEO als auch von der neuen KI-Sichtbarkeit.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--website\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Ihre Website muss heute mehr können als gut aussehen</h2>\n <span class=\"pp-website-motto pp-anim pp-anim-d1\">Nicht nur online sein – sichtbar überzeugen.</span>\n\n <div class=\"pp-website-grid\">\n\n <div class=\"pp-website-item pp-anim pp-anim-d1\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Eine gute Website beantwortet Fragen, bevor sie gestellt werden.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d2\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie zeigt, warum ein Unternehmen vertrauenswürdig ist.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d3\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie führt Besucher klar zum nächsten Schritt.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d4\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie verbindet Leistungen, Blog, FAQ, Google Profil und Kontaktmöglichkeiten miteinander.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d5\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie wird regelmäßig gepflegt, erweitert und aktualisiert.</span>\n </div>\n\n </div>\n\n <!-- Google-Empfehlung -->\n <div class=\"pp-website-note pp-anim pp-anim-d6\">\n <div class=\"pp-wn-icon\">🔗</div>\n <div class=\"pp-wn-content\">\n <span class=\"pp-wn-label\">Google empfiehlt</span>\n <span class=\"pp-wn-text\">Links so einzusetzen, dass Nutzer und Google besser verstehen, wohin eine Seite führt und welche Inhalte zusammengehören. Das spricht klar für eine Strategie mit interner Verlinkung, Pillar Pages, Blogbeiträgen und FAQ-Bereichen.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--audience\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Für wen moderne Sichtbarkeit besonders wichtig ist</h2>\n <span class=\"pp-audience-intro pp-anim pp-anim-d1\">Diese Seite richtet sich an Unternehmen, die spüren, dass eine Website allein nicht mehr ausreicht – und die verstehen möchten, was heute wirklich zählt.</span>\n\n <div class=\"pp-audience-grid\">\n\n <!-- Zielgruppe 1 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d1\">\n <div class=\"pp-ac-icon\">🏡</div>\n <div class=\"pp-ac-content\">\n <h3>Unterkünfte &amp; Tourismus</h3>\n <span class=\"pp-ac-desc\">Ferienwohnungen, Pensionen und touristische Anbieter, die direkt gefunden werden möchten – nicht nur über Buchungsportale.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 2 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d2\">\n <div class=\"pp-ac-icon\">🔧</div>\n <div class=\"pp-ac-content\">\n <h3>Handwerksbetriebe</h3>\n <span class=\"pp-ac-desc\">Betriebe, die regional sichtbar sein wollen und neue Aufträge über eine professionelle Online-Präsenz gewinnen möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 3 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d3\">\n <div class=\"pp-ac-icon\">💆</div>\n <div class=\"pp-ac-content\">\n <h3>Kosmetikstudios, Praxen &amp; Dienstleister</h3>\n <span class=\"pp-ac-desc\">Anbieter persönlicher Dienstleistungen, bei denen Vertrauen und ein guter erster Eindruck online entscheidend sind.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 4 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d4\">\n <div class=\"pp-ac-icon\">📍</div>\n <div class=\"pp-ac-content\">\n <h3>Regionale Unternehmen</h3>\n <span class=\"pp-ac-desc\">Kleine Unternehmen mit lokalem Einzugsgebiet, die bei Google Maps, in der lokalen Suche und in KI-Antworten präsent sein möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 5 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d5\">\n <div class=\"pp-ac-icon\">💼</div>\n <div class=\"pp-ac-content\">\n <h3>Selbstständige</h3>\n <span class=\"pp-ac-desc\">Freiberufler und Solo-Selbstständige, die online professioneller auftreten und gezielt Anfragen generieren möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 6 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d5\">\n <div class=\"pp-ac-icon\">🔄</div>\n <div class=\"pp-ac-content\">\n <h3>Websites, die in die Jahre gekommen sind</h3>\n <span class=\"pp-ac-desc\">Unternehmen, deren Website schon einige Jahre alt ist und die merken, dass weniger Anfragen über die Website kommen als früher.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Closing statement -->\n <div class=\"pp-audience-closing pp-anim pp-anim-d6\">\n <div class=\"pp-acl-icon\">🎯</div>\n <span class=\"pp-acl-text\">Gemeinsam haben all diese Unternehmen eines: Sie sind gut in dem, was sie tun – aber online werden sie noch nicht so gefunden, wie sie es verdienen. Genau hier setzt moderne Sichtbarkeit an.</span>\n </div>\n\n </div>\n </div>\n\n<!-- ════════ PART 1: HERO ════════ -->\n <div class=\"pp-hero\">\n <div class=\"pp-hero-bg\">\n <img src=\"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1600&amp;q=80\" alt=\"Digitaler Arbeitsplatz mit Bildschirmen und Datenvisualisierung\" draggable=\"false\">\n </div>\n <div class=\"pp-hero-overlay\"></div>\n\n <div class=\"pp-hero-content\">\n <span class=\"pp-hero-badge\">Pillar Page · Sichtbarkeit</span>\n <h1>Sichtbar werden im KI-Zeitalter</h1>\n <span class=\"pp-hero-subline\">Google verändert sich. KI-Antworten, Sprachsuche und neue Suchgewohnheiten sorgen dafür, dass Websites heute klarer, hilfreicher und besser strukturiert sein müssen als früher.</span>\n <span class=\"pp-hero-intro\">Viele Unternehmen haben eine Website – und trotzdem werden sie online nicht so gefunden, wie sie es sich wünschen. Früher reichte es oft, mit ein paar Suchbegriffen bei Google sichtbar zu sein. Heute suchen Menschen anders: Sie stellen ganze Fragen, vergleichen schneller, nutzen Google, Karten, KI-Tools und Empfehlungen. Genau deshalb braucht Sichtbarkeit heute mehr als klassische SEO.</span>\n <div class=\"pp-hero-ctas\">\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-btn pp-btn--primary\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Sichtbarkeit prüfen lassen →</a>\n <!-- 🔗 LINK SETZEN: Kontakt / Termine / Webinare -->\n <a href=\"#\" class=\"pp-btn pp-btn--outline\" title=\"Link zu Kontakt oder Termine/Webinare setzen\" draggable=\"false\">Beratungstermin vereinbaren</a>\n </div>\n </div>\n\n <div class=\"pp-hero-scroll\">\n <span>Mehr erfahren</span>\n <div class=\"pp-scroll-line\"></div>\n </div>\n </div>\n\n<!-- ════════ PART 2: WARUM SICH SICHTBARKEIT VERÄNDERT HAT ════════ -->\n <div class=\"pp-section pp-section--change\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Warum „bei Google gefunden werden\" heute anders funktioniert</h2>\n\n <div class=\"pp-split\">\n <!-- Text-Spalte -->\n <div class=\"pp-split-text pp-anim pp-anim-d1\">\n <span>Google zeigt nicht mehr nur zehn blaue Links. Antworten werden zunehmend direkt zusammengefasst, Suchanfragen werden länger und konkreter, und Nutzer erwarten schnelle Orientierung. KI-Systeme greifen bevorzugt auf klar strukturierte, vertrauenswürdige Informationen zurück.</span>\n <span>Studien aus 2026 zeigen, dass AI Overviews bei vielen Suchanfragen erscheinen können und teilweise andere Quellen nutzen als klassische organische Google-Ergebnisse. Für Unternehmen bedeutet das: Wer nur auf herkömmliche Rankings setzt, verschenkt zunehmend Reichweite.</span>\n </div>\n\n <!-- Bild-Spalte -->\n <div class=\"pp-split-visual pp-anim pp-anim-d2\">\n <img src=\"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&amp;q=80\" alt=\"Datenanalyse-Dashboard mit Diagrammen und Statistiken\" loading=\"lazy\" draggable=\"false\">\n <div class=\"pp-img-overlay\"></div>\n </div>\n </div>\n\n <!-- Highlight-Box -->\n <div class=\"pp-highlight-box pp-anim pp-anim-d3\" style=\"margin-top: 2.5rem;\">\n <span class=\"pp-hb-label\">Wichtig für Ihr Unternehmen</span>\n <span class=\"pp-hb-text\">Eine Website darf heute nicht nur schön aussehen. Sie muss Antworten geben, Vertrauen aufbauen, Leistungen klar erklären und technisch sowie inhaltlich so strukturiert sein, dass Google, KI-Systeme und Menschen sie verstehen.</span>\n </div>\n\n </div>\n </div>\n\n<!-- ════════ PART 3: DIE 5 BAUSTEINE MODERNER SICHTBARKEIT ════════ -->\n <div class=\"pp-section pp-section--pillars\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Die 5 Bausteine moderner Sichtbarkeit</h2>\n <span class=\"pp-pillars-intro pp-anim pp-anim-d1\">Sichtbarkeit entsteht heute nicht durch eine einzelne Maßnahme — sondern durch das Zusammenspiel mehrerer Faktoren. Diese fünf Bausteine bilden die Grundlage.</span>\n\n <div class=\"pp-pillars-grid\">\n\n <!-- Baustein 1 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d1\">\n <span class=\"pp-pillar-num\">1</span>\n <h3>Eine klare Website-Struktur</h3>\n <span class=\"pp-pillar-desc\">Besucher müssen sofort verstehen, was angeboten wird, für wen es passt und wie sie Kontakt aufnehmen können.</span>\n <!-- 🔗 LINK SETZEN: Webdesign / Website & Sichtbarkeit -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zu Website &amp; Sichtbarkeit setzen\" draggable=\"false\">Website klar strukturieren und sichtbar aufbauen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 2 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d2\">\n <span class=\"pp-pillar-num\">2</span>\n <h3>SEO-Grundlagen</h3>\n <span class=\"pp-pillar-desc\">Seitentitel, Überschriften, Suchbegriffe, Ladezeit, interne Links und mobilfreundliche Darstellung bleiben wichtig.</span>\n <!-- 🔗 LINK SETZEN: SEO-Seite -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur SEO-Seite setzen\" draggable=\"false\">SEO für kleine Unternehmen verständlich erklärt <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 3 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d3\">\n <span class=\"pp-pillar-num\">3</span>\n <h3>Inhalte, die echte Fragen beantworten</h3>\n <span class=\"pp-pillar-desc\">FAQ, Blogbeiträge, Ratgeberseiten und gut aufgebaute Leistungsseiten helfen Nutzern – und liefern Suchmaschinen bessere Signale.</span>\n <!-- 🔗 LINK SETZEN: Blog / Impulse -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zum Blog / Impulse setzen\" draggable=\"false\">Tipps zu SEO, Google, KI und Online-Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 4 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d4\">\n <span class=\"pp-pillar-num\">4</span>\n <h3>Google Unternehmensprofil</h3>\n <span class=\"pp-pillar-desc\">Für lokale Unternehmen ist das Google Profil oft der erste Kontaktpunkt – noch vor der Website.</span>\n <!-- 🔗 LINK SETZEN: Google Profil -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Google-Profil-Seite setzen\" draggable=\"false\">Google Unternehmensprofil optimieren <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 5 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d5\">\n <span class=\"pp-pillar-num\">5</span>\n <h3>KI- und GEO-Sichtbarkeit</h3>\n <span class=\"pp-pillar-desc\">Inhalte müssen so klar, hilfreich und zitierfähig sein, dass sie auch in KI-gestützten Suchumgebungen verstanden werden.</span>\n <!-- 🔗 LINK SETZEN: Grounding Page / Pillar Page Angebot -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Grounding Page / Pillar Page Angebot setzen\" draggable=\"false\">Grounding Page für KI-Sichtbarkeit erstellen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n </div>\n </div>\n </div>\n\n<div class=\"pp-section pp-section--explain\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">SEO, GEO, KI-Sichtbarkeit – was bedeutet das eigentlich?</h2>\n <span class=\"pp-explain-intro pp-anim pp-anim-d1\">Diese drei Begriffe tauchen immer häufiger auf. Hier eine klare Einordnung – ohne Fachchinesisch.</span>\n\n <div class=\"pp-explain-grid\">\n\n <!-- SEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d1\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🔍</div>\n <span class=\"pp-ec-abbr\">SEO</span>\n <h3>Suchmaschinen-optimierung</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">SEO sorgt dafür, dass Ihre Website in klassischen Suchmaschinen besser gefunden wird – durch passende Suchbegriffe, klare Seitenstruktur, gute Ladezeiten und hilfreiche Inhalte.</span>\n </div>\n </div>\n\n <!-- GEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d2\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">⚙️</div>\n <span class=\"pp-ec-abbr\">GEO</span>\n <h3>Generative Engine Optimization</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">GEO bedeutet, Inhalte so aufzubereiten, dass sie auch von KI-gestützten Suchsystemen verstanden, eingeordnet und möglichst als Quelle berücksichtigt werden können.</span>\n </div>\n </div>\n\n <!-- KI-Sichtbarkeit -->\n <div class=\"pp-explain-card pp-anim pp-anim-d3\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🤖</div>\n <span class=\"pp-ec-abbr\">KI-Sichtbarkeit</span>\n <h3>Im digitalen Raum erkennbar sein</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">KI-Sichtbarkeit meint, dass Ihr Unternehmen nicht nur in Suchergebnissen auftaucht, sondern mit klaren Informationen, Antworten, Leistungen, Standorten und Vertrauenssignalen im digitalen Raum erkennbar ist.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Takeaway -->\n <div class=\"pp-explain-takeaway pp-anim pp-anim-d3\">\n <div class=\"pp-et-icon\">💡</div>\n <div class=\"pp-et-content\">\n <span class=\"pp-et-label\">Das Wichtigste</span>\n <span class=\"pp-et-text\">Sie müssen kein Technik-Experte sein. Entscheidend ist: Ihre Website braucht bessere Inhalte und eine klarere Struktur – dann profitieren Sie sowohl von klassischem SEO als auch von der neuen KI-Sichtbarkeit.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--website\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Ihre Website muss heute mehr können als gut aussehen</h2>\n <span class=\"pp-website-motto pp-anim pp-anim-d1\">Nicht nur online sein – sichtbar überzeugen.</span>\n\n <div class=\"pp-website-grid\">\n\n <div class=\"pp-website-item pp-anim pp-anim-d1\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Eine gute Website beantwortet Fragen, bevor sie gestellt werden.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d2\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie zeigt, warum ein Unternehmen vertrauenswürdig ist.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d3\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie führt Besucher klar zum nächsten Schritt.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d4\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie verbindet Leistungen, Blog, FAQ, Google Profil und Kontaktmöglichkeiten miteinander.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d5\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie wird regelmäßig gepflegt, erweitert und aktualisiert.</span>\n </div>\n\n </div>\n\n <!-- Google-Empfehlung -->\n <div class=\"pp-website-note pp-anim pp-anim-d6\">\n <div class=\"pp-wn-icon\">🔗</div>\n <div class=\"pp-wn-content\">\n <span class=\"pp-wn-label\">Google empfiehlt</span>\n <span class=\"pp-wn-text\">Links so einzusetzen, dass Nutzer und Google besser verstehen, wohin eine Seite führt und welche Inhalte zusammengehören. Das spricht klar für eine Strategie mit interner Verlinkung, Pillar Pages, Blogbeiträgen und FAQ-Bereichen.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--audience\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Für wen moderne Sichtbarkeit besonders wichtig ist</h2>\n <span class=\"pp-audience-intro pp-anim pp-anim-d1\">Diese Seite richtet sich an Unternehmen, die spüren, dass eine Website allein nicht mehr ausreicht – und die verstehen möchten, was heute wirklich zählt.</span>\n\n <div class=\"pp-audience-grid\">\n\n <!-- Zielgruppe 1 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d1\">\n <div class=\"pp-ac-icon\">🏡</div>\n <div class=\"pp-ac-content\">\n <h3>Unterkünfte &amp; Tourismus</h3>\n <span class=\"pp-ac-desc\">Ferienwohnungen, Pensionen und touristische Anbieter, die direkt gefunden werden möchten – nicht nur über Buchungsportale.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 2 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d2\">\n <div class=\"pp-ac-icon\">🔧</div>\n <div class=\"pp-ac-content\">\n <h3>Handwerksbetriebe</h3>\n <span class=\"pp-ac-desc\">Betriebe, die regional sichtbar sein wollen und neue Aufträge über eine professionelle Online-Präsenz gewinnen möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 3 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d3\">\n <div class=\"pp-ac-icon\">💆</div>\n <div class=\"pp-ac-content\">\n <h3>Kosmetikstudios, Praxen &amp; Dienstleister</h3>\n <span class=\"pp-ac-desc\">Anbieter persönlicher Dienstleistungen, bei denen Vertrauen und ein guter erster Eindruck online entscheidend sind.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 4 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d4\">\n <div class=\"pp-ac-icon\">📍</div>\n <div class=\"pp-ac-content\">\n <h3>Regionale Unternehmen</h3>\n <span class=\"pp-ac-desc\">Kleine Unternehmen mit lokalem Einzugsgebiet, die bei Google Maps, in der lokalen Suche und in KI-Antworten präsent sein möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 5 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d5\">\n <div class=\"pp-ac-icon\">💼</div>\n <div class=\"pp-ac-content\">\n <h3>Selbstständige</h3>\n <span class=\"pp-ac-desc\">Freiberufler und Solo-Selbstständige, die online professioneller auftreten und gezielt Anfragen generieren möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 6 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d5\">\n <div class=\"pp-ac-icon\">🔄</div>\n <div class=\"pp-ac-content\">\n <h3>Websites, die in die Jahre gekommen sind</h3>\n <span class=\"pp-ac-desc\">Unternehmen, deren Website schon einige Jahre alt ist und die merken, dass weniger Anfragen über die Website kommen als früher.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Closing statement -->\n <div class=\"pp-audience-closing pp-anim pp-anim-d6\">\n <div class=\"pp-acl-icon\">🎯</div>\n <span class=\"pp-acl-text\">Gemeinsam haben all diese Unternehmen eines: Sie sind gut in dem, was sie tun – aber online werden sie noch nicht so gefunden, wie sie es verdienen. Genau hier setzt moderne Sichtbarkeit an.</span>\n </div>\n\n </div>\n </div>\n\n<div class=\"pp-section pp-section--problems\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Woran viele Websites heute scheitern</h2>\n <span class=\"pp-problems-intro pp-anim pp-anim-d1\">Diese Punkte begegnen mir regelmäßig. Vielleicht erkennen Sie Ihre eigene Website in einigen davon wieder.</span>\n\n <div class=\"pp-problems-grid\">\n\n <div class=\"pp-problem-item pp-anim pp-anim-d1\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Die Website ist online, aber kaum sichtbar.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d1\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Leistungen sind nicht klar genug erklärt.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d2\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Es fehlen Antworten auf wichtige Kundenfragen.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d2\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Das Google Unternehmensprofil ist unvollständig.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d3\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Es gibt keinen aktuellen Blog oder FAQ-Bereich.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d3\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Bilder heißen noch „IMG_1234.jpg\".</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d4\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Interne Verlinkungen fehlen.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d4\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Die Seite wirkt hübsch, aber führt nicht zur Anfrage.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d5\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">SEO wurde einmal gemacht, aber nie weiterentwickelt.</span>\n </div>\n\n </div>\n\n <!-- CTA zum Website-Check -->\n <div class=\"pp-problems-cta pp-anim pp-anim-d6\">\n <div class=\"pp-pcta-content\">\n <span class=\"pp-pcta-heading\">Erkennen Sie, wo Ihre Website Potenzial verschenkt?</span>\n <span class=\"pp-pcta-sub\">Ein Website-Check zeigt Ihnen konkret, was Sie verbessern können.</span>\n </div>\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-pcta-btn\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Check anfragen →</a>\n </div>\n\n </div>\n</div>\n\n<!-- ════════ PART 1: HERO ════════ -->\n <div class=\"pp-hero\">\n <div class=\"pp-hero-bg\">\n <img src=\"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1600&amp;q=80\" alt=\"Digitaler Arbeitsplatz mit Bildschirmen und Datenvisualisierung\" draggable=\"false\">\n </div>\n <div class=\"pp-hero-overlay\"></div>\n\n <div class=\"pp-hero-content\">\n <span class=\"pp-hero-badge\">Pillar Page · Sichtbarkeit</span>\n <h1>Sichtbar werden im KI-Zeitalter</h1>\n <span class=\"pp-hero-subline\">Google verändert sich. KI-Antworten, Sprachsuche und neue Suchgewohnheiten sorgen dafür, dass Websites heute klarer, hilfreicher und besser strukturiert sein müssen als früher.</span>\n <span class=\"pp-hero-intro\">Viele Unternehmen haben eine Website – und trotzdem werden sie online nicht so gefunden, wie sie es sich wünschen. Früher reichte es oft, mit ein paar Suchbegriffen bei Google sichtbar zu sein. Heute suchen Menschen anders: Sie stellen ganze Fragen, vergleichen schneller, nutzen Google, Karten, KI-Tools und Empfehlungen. Genau deshalb braucht Sichtbarkeit heute mehr als klassische SEO.</span>\n <div class=\"pp-hero-ctas\">\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-btn pp-btn--primary\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Sichtbarkeit prüfen lassen →</a>\n <!-- 🔗 LINK SETZEN: Kontakt / Termine / Webinare -->\n <a href=\"#\" class=\"pp-btn pp-btn--outline\" title=\"Link zu Kontakt oder Termine/Webinare setzen\" draggable=\"false\">Beratungstermin vereinbaren</a>\n </div>\n </div>\n\n <div class=\"pp-hero-scroll\">\n <span>Mehr erfahren</span>\n <div class=\"pp-scroll-line\"></div>\n </div>\n </div>\n\n<!-- ════════ PART 2: WARUM SICH SICHTBARKEIT VERÄNDERT HAT ════════ -->\n <div class=\"pp-section pp-section--change\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Warum „bei Google gefunden werden\" heute anders funktioniert</h2>\n\n <div class=\"pp-split\">\n <!-- Text-Spalte -->\n <div class=\"pp-split-text pp-anim pp-anim-d1\">\n <span>Google zeigt nicht mehr nur zehn blaue Links. Antworten werden zunehmend direkt zusammengefasst, Suchanfragen werden länger und konkreter, und Nutzer erwarten schnelle Orientierung. KI-Systeme greifen bevorzugt auf klar strukturierte, vertrauenswürdige Informationen zurück.</span>\n <span>Studien aus 2026 zeigen, dass AI Overviews bei vielen Suchanfragen erscheinen können und teilweise andere Quellen nutzen als klassische organische Google-Ergebnisse. Für Unternehmen bedeutet das: Wer nur auf herkömmliche Rankings setzt, verschenkt zunehmend Reichweite.</span>\n </div>\n\n <!-- Bild-Spalte -->\n <div class=\"pp-split-visual pp-anim pp-anim-d2\">\n <img src=\"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&amp;q=80\" alt=\"Datenanalyse-Dashboard mit Diagrammen und Statistiken\" loading=\"lazy\" draggable=\"false\">\n <div class=\"pp-img-overlay\"></div>\n </div>\n </div>\n\n <!-- Highlight-Box -->\n <div class=\"pp-highlight-box pp-anim pp-anim-d3\" style=\"margin-top: 2.5rem;\">\n <span class=\"pp-hb-label\">Wichtig für Ihr Unternehmen</span>\n <span class=\"pp-hb-text\">Eine Website darf heute nicht nur schön aussehen. Sie muss Antworten geben, Vertrauen aufbauen, Leistungen klar erklären und technisch sowie inhaltlich so strukturiert sein, dass Google, KI-Systeme und Menschen sie verstehen.</span>\n </div>\n\n </div>\n </div>\n\n<!-- ════════ PART 3: DIE 5 BAUSTEINE MODERNER SICHTBARKEIT ════════ -->\n <div class=\"pp-section pp-section--pillars\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Die 5 Bausteine moderner Sichtbarkeit</h2>\n <span class=\"pp-pillars-intro pp-anim pp-anim-d1\">Sichtbarkeit entsteht heute nicht durch eine einzelne Maßnahme — sondern durch das Zusammenspiel mehrerer Faktoren. Diese fünf Bausteine bilden die Grundlage.</span>\n\n <div class=\"pp-pillars-grid\">\n\n <!-- Baustein 1 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d1\">\n <span class=\"pp-pillar-num\">1</span>\n <h3>Eine klare Website-Struktur</h3>\n <span class=\"pp-pillar-desc\">Besucher müssen sofort verstehen, was angeboten wird, für wen es passt und wie sie Kontakt aufnehmen können.</span>\n <!-- 🔗 LINK SETZEN: Webdesign / Website & Sichtbarkeit -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zu Website &amp; Sichtbarkeit setzen\" draggable=\"false\">Website klar strukturieren und sichtbar aufbauen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 2 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d2\">\n <span class=\"pp-pillar-num\">2</span>\n <h3>SEO-Grundlagen</h3>\n <span class=\"pp-pillar-desc\">Seitentitel, Überschriften, Suchbegriffe, Ladezeit, interne Links und mobilfreundliche Darstellung bleiben wichtig.</span>\n <!-- 🔗 LINK SETZEN: SEO-Seite -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur SEO-Seite setzen\" draggable=\"false\">SEO für kleine Unternehmen verständlich erklärt <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 3 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d3\">\n <span class=\"pp-pillar-num\">3</span>\n <h3>Inhalte, die echte Fragen beantworten</h3>\n <span class=\"pp-pillar-desc\">FAQ, Blogbeiträge, Ratgeberseiten und gut aufgebaute Leistungsseiten helfen Nutzern – und liefern Suchmaschinen bessere Signale.</span>\n <!-- 🔗 LINK SETZEN: Blog / Impulse -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zum Blog / Impulse setzen\" draggable=\"false\">Tipps zu SEO, Google, KI und Online-Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 4 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d4\">\n <span class=\"pp-pillar-num\">4</span>\n <h3>Google Unternehmensprofil</h3>\n <span class=\"pp-pillar-desc\">Für lokale Unternehmen ist das Google Profil oft der erste Kontaktpunkt – noch vor der Website.</span>\n <!-- 🔗 LINK SETZEN: Google Profil -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Google-Profil-Seite setzen\" draggable=\"false\">Google Unternehmensprofil optimieren <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 5 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d5\">\n <span class=\"pp-pillar-num\">5</span>\n <h3>KI- und GEO-Sichtbarkeit</h3>\n <span class=\"pp-pillar-desc\">Inhalte müssen so klar, hilfreich und zitierfähig sein, dass sie auch in KI-gestützten Suchumgebungen verstanden werden.</span>\n <!-- 🔗 LINK SETZEN: Grounding Page / Pillar Page Angebot -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Grounding Page / Pillar Page Angebot setzen\" draggable=\"false\">Grounding Page für KI-Sichtbarkeit erstellen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n </div>\n </div>\n </div>\n\n<div class=\"pp-section pp-section--explain\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">SEO, GEO, KI-Sichtbarkeit – was bedeutet das eigentlich?</h2>\n <span class=\"pp-explain-intro pp-anim pp-anim-d1\">Diese drei Begriffe tauchen immer häufiger auf. Hier eine klare Einordnung – ohne Fachchinesisch.</span>\n\n <div class=\"pp-explain-grid\">\n\n <!-- SEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d1\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🔍</div>\n <span class=\"pp-ec-abbr\">SEO</span>\n <h3>Suchmaschinen-optimierung</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">SEO sorgt dafür, dass Ihre Website in klassischen Suchmaschinen besser gefunden wird – durch passende Suchbegriffe, klare Seitenstruktur, gute Ladezeiten und hilfreiche Inhalte.</span>\n </div>\n </div>\n\n <!-- GEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d2\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">⚙️</div>\n <span class=\"pp-ec-abbr\">GEO</span>\n <h3>Generative Engine Optimization</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">GEO bedeutet, Inhalte so aufzubereiten, dass sie auch von KI-gestützten Suchsystemen verstanden, eingeordnet und möglichst als Quelle berücksichtigt werden können.</span>\n </div>\n </div>\n\n <!-- KI-Sichtbarkeit -->\n <div class=\"pp-explain-card pp-anim pp-anim-d3\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🤖</div>\n <span class=\"pp-ec-abbr\">KI-Sichtbarkeit</span>\n <h3>Im digitalen Raum erkennbar sein</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">KI-Sichtbarkeit meint, dass Ihr Unternehmen nicht nur in Suchergebnissen auftaucht, sondern mit klaren Informationen, Antworten, Leistungen, Standorten und Vertrauenssignalen im digitalen Raum erkennbar ist.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Takeaway -->\n <div class=\"pp-explain-takeaway pp-anim pp-anim-d3\">\n <div class=\"pp-et-icon\">💡</div>\n <div class=\"pp-et-content\">\n <span class=\"pp-et-label\">Das Wichtigste</span>\n <span class=\"pp-et-text\">Sie müssen kein Technik-Experte sein. Entscheidend ist: Ihre Website braucht bessere Inhalte und eine klarere Struktur – dann profitieren Sie sowohl von klassischem SEO als auch von der neuen KI-Sichtbarkeit.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--website\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Ihre Website muss heute mehr können als gut aussehen</h2>\n <span class=\"pp-website-motto pp-anim pp-anim-d1\">Nicht nur online sein – sichtbar überzeugen.</span>\n\n <div class=\"pp-website-grid\">\n\n <div class=\"pp-website-item pp-anim pp-anim-d1\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Eine gute Website beantwortet Fragen, bevor sie gestellt werden.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d2\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie zeigt, warum ein Unternehmen vertrauenswürdig ist.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d3\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie führt Besucher klar zum nächsten Schritt.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d4\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie verbindet Leistungen, Blog, FAQ, Google Profil und Kontaktmöglichkeiten miteinander.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d5\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie wird regelmäßig gepflegt, erweitert und aktualisiert.</span>\n </div>\n\n </div>\n\n <!-- Google-Empfehlung -->\n <div class=\"pp-website-note pp-anim pp-anim-d6\">\n <div class=\"pp-wn-icon\">🔗</div>\n <div class=\"pp-wn-content\">\n <span class=\"pp-wn-label\">Google empfiehlt</span>\n <span class=\"pp-wn-text\">Links so einzusetzen, dass Nutzer und Google besser verstehen, wohin eine Seite führt und welche Inhalte zusammengehören. Das spricht klar für eine Strategie mit interner Verlinkung, Pillar Pages, Blogbeiträgen und FAQ-Bereichen.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--audience\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Für wen moderne Sichtbarkeit besonders wichtig ist</h2>\n <span class=\"pp-audience-intro pp-anim pp-anim-d1\">Diese Seite richtet sich an Unternehmen, die spüren, dass eine Website allein nicht mehr ausreicht – und die verstehen möchten, was heute wirklich zählt.</span>\n\n <div class=\"pp-audience-grid\">\n\n <!-- Zielgruppe 1 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d1\">\n <div class=\"pp-ac-icon\">🏡</div>\n <div class=\"pp-ac-content\">\n <h3>Unterkünfte &amp; Tourismus</h3>\n <span class=\"pp-ac-desc\">Ferienwohnungen, Pensionen und touristische Anbieter, die direkt gefunden werden möchten – nicht nur über Buchungsportale.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 2 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d2\">\n <div class=\"pp-ac-icon\">🔧</div>\n <div class=\"pp-ac-content\">\n <h3>Handwerksbetriebe</h3>\n <span class=\"pp-ac-desc\">Betriebe, die regional sichtbar sein wollen und neue Aufträge über eine professionelle Online-Präsenz gewinnen möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 3 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d3\">\n <div class=\"pp-ac-icon\">💆</div>\n <div class=\"pp-ac-content\">\n <h3>Kosmetikstudios, Praxen &amp; Dienstleister</h3>\n <span class=\"pp-ac-desc\">Anbieter persönlicher Dienstleistungen, bei denen Vertrauen und ein guter erster Eindruck online entscheidend sind.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 4 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d4\">\n <div class=\"pp-ac-icon\">📍</div>\n <div class=\"pp-ac-content\">\n <h3>Regionale Unternehmen</h3>\n <span class=\"pp-ac-desc\">Kleine Unternehmen mit lokalem Einzugsgebiet, die bei Google Maps, in der lokalen Suche und in KI-Antworten präsent sein möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 5 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d5\">\n <div class=\"pp-ac-icon\">💼</div>\n <div class=\"pp-ac-content\">\n <h3>Selbstständige</h3>\n <span class=\"pp-ac-desc\">Freiberufler und Solo-Selbstständige, die online professioneller auftreten und gezielt Anfragen generieren möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 6 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d5\">\n <div class=\"pp-ac-icon\">🔄</div>\n <div class=\"pp-ac-content\">\n <h3>Websites, die in die Jahre gekommen sind</h3>\n <span class=\"pp-ac-desc\">Unternehmen, deren Website schon einige Jahre alt ist und die merken, dass weniger Anfragen über die Website kommen als früher.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Closing statement -->\n <div class=\"pp-audience-closing pp-anim pp-anim-d6\">\n <div class=\"pp-acl-icon\">🎯</div>\n <span class=\"pp-acl-text\">Gemeinsam haben all diese Unternehmen eines: Sie sind gut in dem, was sie tun – aber online werden sie noch nicht so gefunden, wie sie es verdienen. Genau hier setzt moderne Sichtbarkeit an.</span>\n </div>\n\n </div>\n </div>\n\n<div class=\"pp-section pp-section--problems\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Woran viele Websites heute scheitern</h2>\n <span class=\"pp-problems-intro pp-anim pp-anim-d1\">Diese Punkte begegnen mir regelmäßig. Vielleicht erkennen Sie Ihre eigene Website in einigen davon wieder.</span>\n\n <div class=\"pp-problems-grid\">\n\n <div class=\"pp-problem-item pp-anim pp-anim-d1\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Die Website ist online, aber kaum sichtbar.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d1\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Leistungen sind nicht klar genug erklärt.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d2\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Es fehlen Antworten auf wichtige Kundenfragen.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d2\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Das Google Unternehmensprofil ist unvollständig.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d3\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Es gibt keinen aktuellen Blog oder FAQ-Bereich.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d3\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Bilder heißen noch „IMG_1234.jpg\".</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d4\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Interne Verlinkungen fehlen.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d4\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Die Seite wirkt hübsch, aber führt nicht zur Anfrage.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d5\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">SEO wurde einmal gemacht, aber nie weiterentwickelt.</span>\n </div>\n\n </div>\n\n <!-- CTA zum Website-Check -->\n <div class=\"pp-problems-cta pp-anim pp-anim-d6\">\n <div class=\"pp-pcta-content\">\n <span class=\"pp-pcta-heading\">Erkennen Sie, wo Ihre Website Potenzial verschenkt?</span>\n <span class=\"pp-pcta-sub\">Ein Website-Check zeigt Ihnen konkret, was Sie verbessern können.</span>\n </div>\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-pcta-btn\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Check anfragen →</a>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--method\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Wie ich Websites sichtbarer mache</h2>\n <span class=\"pp-method-intro pp-anim pp-anim-d1\">Mein Ansatz ist klar, praxisnah und ohne Agentur-Blabla. In vier Schritten bringe ich Struktur, Inhalte und Sichtbarkeit zusammen.</span>\n\n <div class=\"pp-method-timeline\">\n\n <!-- Schritt 1: Analyse -->\n <div class=\"pp-method-step pp-anim pp-anim-d1\">\n <span class=\"pp-ms-dot\">1</span>\n <div class=\"pp-ms-card\">\n <h3>Analyse</h3>\n <span class=\"pp-ms-desc\">Was ist vorhanden? Was funktioniert? Wo fehlen Inhalte, Struktur, Sichtbarkeit oder Vertrauen? Ich schaue mir Ihre Website, Ihr Google-Profil und Ihre Online-Präsenz genau an.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Website-Check</span>\n <span class=\"pp-ms-tag\">Google Profil</span>\n <span class=\"pp-ms-tag\">Inhaltsanalyse</span>\n </div>\n </div>\n </div>\n\n <!-- Schritt 2: Strategie -->\n <div class=\"pp-method-step pp-anim pp-anim-d2\">\n <span class=\"pp-ms-dot\">2</span>\n <div class=\"pp-ms-card\">\n <h3>Strategie</h3>\n <span class=\"pp-ms-desc\">Welche Seiten, Inhalte, Fragen und Verlinkungen braucht die Website? Gemeinsam legen wir fest, wie Ihre Sichtbarkeit Schritt für Schritt wachsen kann.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Seitenstruktur</span>\n <span class=\"pp-ms-tag\">Suchbegriffe</span>\n <span class=\"pp-ms-tag\">Verlinkung</span>\n </div>\n </div>\n </div>\n\n <!-- Schritt 3: Umsetzung -->\n <div class=\"pp-method-step pp-anim pp-anim-d3\">\n <span class=\"pp-ms-dot\">3</span>\n <div class=\"pp-ms-card\">\n <h3>Umsetzung</h3>\n <span class=\"pp-ms-desc\">Texte, Struktur, SEO-Grundlagen, Google Profil, Blog, FAQ, Landingpages — alles wird professionell aufgebaut, optimiert und miteinander verbunden.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Texte &amp; SEO</span>\n <span class=\"pp-ms-tag\">Blog &amp; FAQ</span>\n <span class=\"pp-ms-tag\">Pillar Pages</span>\n </div>\n </div>\n </div>\n\n <!-- Schritt 4: Weiterentwicklung -->\n <div class=\"pp-method-step pp-anim pp-anim-d4\">\n <span class=\"pp-ms-dot\">4</span>\n <div class=\"pp-ms-card\">\n <h3>Weiterentwicklung</h3>\n <span class=\"pp-ms-desc\">Sichtbarkeit ist kein einmaliges Projekt. Inhalte sollten regelmäßig ergänzt, aktualisiert und verbunden werden — damit Ihre Website langfristig gefunden wird.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Pflege</span>\n <span class=\"pp-ms-tag\">Neue Inhalte</span>\n <span class=\"pp-ms-tag\">Coaching</span>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- Closing note -->\n <div class=\"pp-method-closing pp-anim pp-anim-d5\">\n <div class=\"pp-mc-icon\">🤝</div>\n <span class=\"pp-mc-text\">Ob ich die Umsetzung komplett übernehme oder Sie dabei begleite, Ihre Website selbst zu pflegen — der Weg zur besseren Sichtbarkeit beginnt immer mit einem klaren ersten Schritt.</span>\n </div>\n\n </div>\n</div>\n\n<!-- ════════ PART 1: HERO ════════ -->\n <div class=\"pp-hero\">\n <div class=\"pp-hero-bg\">\n <img src=\"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1600&amp;q=80\" alt=\"Digitaler Arbeitsplatz mit Bildschirmen und Datenvisualisierung\" draggable=\"false\">\n </div>\n <div class=\"pp-hero-overlay\"></div>\n\n <div class=\"pp-hero-content\">\n <span class=\"pp-hero-badge\">Pillar Page · Sichtbarkeit</span>\n <h1>Sichtbar werden im KI-Zeitalter</h1>\n <span class=\"pp-hero-subline\">Google verändert sich. KI-Antworten, Sprachsuche und neue Suchgewohnheiten sorgen dafür, dass Websites heute klarer, hilfreicher und besser strukturiert sein müssen als früher.</span>\n <span class=\"pp-hero-intro\">Viele Unternehmen haben eine Website – und trotzdem werden sie online nicht so gefunden, wie sie es sich wünschen. Früher reichte es oft, mit ein paar Suchbegriffen bei Google sichtbar zu sein. Heute suchen Menschen anders: Sie stellen ganze Fragen, vergleichen schneller, nutzen Google, Karten, KI-Tools und Empfehlungen. Genau deshalb braucht Sichtbarkeit heute mehr als klassische SEO.</span>\n <div class=\"pp-hero-ctas\">\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-btn pp-btn--primary\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Sichtbarkeit prüfen lassen →</a>\n <!-- 🔗 LINK SETZEN: Kontakt / Termine / Webinare -->\n <a href=\"#\" class=\"pp-btn pp-btn--outline\" title=\"Link zu Kontakt oder Termine/Webinare setzen\" draggable=\"false\">Beratungstermin vereinbaren</a>\n </div>\n </div>\n\n <div class=\"pp-hero-scroll\">\n <span>Mehr erfahren</span>\n <div class=\"pp-scroll-line\"></div>\n </div>\n </div>\n\n<!-- ════════ PART 2: WARUM SICH SICHTBARKEIT VERÄNDERT HAT ════════ -->\n <div class=\"pp-section pp-section--change\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Warum „bei Google gefunden werden\" heute anders funktioniert</h2>\n\n <div class=\"pp-split\">\n <!-- Text-Spalte -->\n <div class=\"pp-split-text pp-anim pp-anim-d1\">\n <span>Google zeigt nicht mehr nur zehn blaue Links. Antworten werden zunehmend direkt zusammengefasst, Suchanfragen werden länger und konkreter, und Nutzer erwarten schnelle Orientierung. KI-Systeme greifen bevorzugt auf klar strukturierte, vertrauenswürdige Informationen zurück.</span>\n <span>Studien aus 2026 zeigen, dass AI Overviews bei vielen Suchanfragen erscheinen können und teilweise andere Quellen nutzen als klassische organische Google-Ergebnisse. Für Unternehmen bedeutet das: Wer nur auf herkömmliche Rankings setzt, verschenkt zunehmend Reichweite.</span>\n </div>\n\n <!-- Bild-Spalte -->\n <div class=\"pp-split-visual pp-anim pp-anim-d2\">\n <img src=\"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&amp;q=80\" alt=\"Datenanalyse-Dashboard mit Diagrammen und Statistiken\" loading=\"lazy\" draggable=\"false\">\n <div class=\"pp-img-overlay\"></div>\n </div>\n </div>\n\n <!-- Highlight-Box -->\n <div class=\"pp-highlight-box pp-anim pp-anim-d3\" style=\"margin-top: 2.5rem;\">\n <span class=\"pp-hb-label\">Wichtig für Ihr Unternehmen</span>\n <span class=\"pp-hb-text\">Eine Website darf heute nicht nur schön aussehen. Sie muss Antworten geben, Vertrauen aufbauen, Leistungen klar erklären und technisch sowie inhaltlich so strukturiert sein, dass Google, KI-Systeme und Menschen sie verstehen.</span>\n </div>\n\n </div>\n </div>\n\n<!-- ════════ PART 3: DIE 5 BAUSTEINE MODERNER SICHTBARKEIT ════════ -->\n <div class=\"pp-section pp-section--pillars\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Die 5 Bausteine moderner Sichtbarkeit</h2>\n <span class=\"pp-pillars-intro pp-anim pp-anim-d1\">Sichtbarkeit entsteht heute nicht durch eine einzelne Maßnahme — sondern durch das Zusammenspiel mehrerer Faktoren. Diese fünf Bausteine bilden die Grundlage.</span>\n\n <div class=\"pp-pillars-grid\">\n\n <!-- Baustein 1 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d1\">\n <span class=\"pp-pillar-num\">1</span>\n <h3>Eine klare Website-Struktur</h3>\n <span class=\"pp-pillar-desc\">Besucher müssen sofort verstehen, was angeboten wird, für wen es passt und wie sie Kontakt aufnehmen können.</span>\n <!-- 🔗 LINK SETZEN: Webdesign / Website & Sichtbarkeit -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zu Website &amp; Sichtbarkeit setzen\" draggable=\"false\">Website klar strukturieren und sichtbar aufbauen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 2 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d2\">\n <span class=\"pp-pillar-num\">2</span>\n <h3>SEO-Grundlagen</h3>\n <span class=\"pp-pillar-desc\">Seitentitel, Überschriften, Suchbegriffe, Ladezeit, interne Links und mobilfreundliche Darstellung bleiben wichtig.</span>\n <!-- 🔗 LINK SETZEN: SEO-Seite -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur SEO-Seite setzen\" draggable=\"false\">SEO für kleine Unternehmen verständlich erklärt <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 3 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d3\">\n <span class=\"pp-pillar-num\">3</span>\n <h3>Inhalte, die echte Fragen beantworten</h3>\n <span class=\"pp-pillar-desc\">FAQ, Blogbeiträge, Ratgeberseiten und gut aufgebaute Leistungsseiten helfen Nutzern – und liefern Suchmaschinen bessere Signale.</span>\n <!-- 🔗 LINK SETZEN: Blog / Impulse -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zum Blog / Impulse setzen\" draggable=\"false\">Tipps zu SEO, Google, KI und Online-Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 4 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d4\">\n <span class=\"pp-pillar-num\">4</span>\n <h3>Google Unternehmensprofil</h3>\n <span class=\"pp-pillar-desc\">Für lokale Unternehmen ist das Google Profil oft der erste Kontaktpunkt – noch vor der Website.</span>\n <!-- 🔗 LINK SETZEN: Google Profil -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Google-Profil-Seite setzen\" draggable=\"false\">Google Unternehmensprofil optimieren <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 5 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d5\">\n <span class=\"pp-pillar-num\">5</span>\n <h3>KI- und GEO-Sichtbarkeit</h3>\n <span class=\"pp-pillar-desc\">Inhalte müssen so klar, hilfreich und zitierfähig sein, dass sie auch in KI-gestützten Suchumgebungen verstanden werden.</span>\n <!-- 🔗 LINK SETZEN: Grounding Page / Pillar Page Angebot -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Grounding Page / Pillar Page Angebot setzen\" draggable=\"false\">Grounding Page für KI-Sichtbarkeit erstellen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n </div>\n </div>\n </div>\n\n<div class=\"pp-section pp-section--explain\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">SEO, GEO, KI-Sichtbarkeit – was bedeutet das eigentlich?</h2>\n <span class=\"pp-explain-intro pp-anim pp-anim-d1\">Diese drei Begriffe tauchen immer häufiger auf. Hier eine klare Einordnung – ohne Fachchinesisch.</span>\n\n <div class=\"pp-explain-grid\">\n\n <!-- SEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d1\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🔍</div>\n <span class=\"pp-ec-abbr\">SEO</span>\n <h3>Suchmaschinen-optimierung</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">SEO sorgt dafür, dass Ihre Website in klassischen Suchmaschinen besser gefunden wird – durch passende Suchbegriffe, klare Seitenstruktur, gute Ladezeiten und hilfreiche Inhalte.</span>\n </div>\n </div>\n\n <!-- GEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d2\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">⚙️</div>\n <span class=\"pp-ec-abbr\">GEO</span>\n <h3>Generative Engine Optimization</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">GEO bedeutet, Inhalte so aufzubereiten, dass sie auch von KI-gestützten Suchsystemen verstanden, eingeordnet und möglichst als Quelle berücksichtigt werden können.</span>\n </div>\n </div>\n\n <!-- KI-Sichtbarkeit -->\n <div class=\"pp-explain-card pp-anim pp-anim-d3\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🤖</div>\n <span class=\"pp-ec-abbr\">KI-Sichtbarkeit</span>\n <h3>Im digitalen Raum erkennbar sein</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">KI-Sichtbarkeit meint, dass Ihr Unternehmen nicht nur in Suchergebnissen auftaucht, sondern mit klaren Informationen, Antworten, Leistungen, Standorten und Vertrauenssignalen im digitalen Raum erkennbar ist.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Takeaway -->\n <div class=\"pp-explain-takeaway pp-anim pp-anim-d3\">\n <div class=\"pp-et-icon\">💡</div>\n <div class=\"pp-et-content\">\n <span class=\"pp-et-label\">Das Wichtigste</span>\n <span class=\"pp-et-text\">Sie müssen kein Technik-Experte sein. Entscheidend ist: Ihre Website braucht bessere Inhalte und eine klarere Struktur – dann profitieren Sie sowohl von klassischem SEO als auch von der neuen KI-Sichtbarkeit.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--website\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Ihre Website muss heute mehr können als gut aussehen</h2>\n <span class=\"pp-website-motto pp-anim pp-anim-d1\">Nicht nur online sein – sichtbar überzeugen.</span>\n\n <div class=\"pp-website-grid\">\n\n <div class=\"pp-website-item pp-anim pp-anim-d1\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Eine gute Website beantwortet Fragen, bevor sie gestellt werden.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d2\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie zeigt, warum ein Unternehmen vertrauenswürdig ist.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d3\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie führt Besucher klar zum nächsten Schritt.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d4\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie verbindet Leistungen, Blog, FAQ, Google Profil und Kontaktmöglichkeiten miteinander.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d5\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie wird regelmäßig gepflegt, erweitert und aktualisiert.</span>\n </div>\n\n </div>\n\n <!-- Google-Empfehlung -->\n <div class=\"pp-website-note pp-anim pp-anim-d6\">\n <div class=\"pp-wn-icon\">🔗</div>\n <div class=\"pp-wn-content\">\n <span class=\"pp-wn-label\">Google empfiehlt</span>\n <span class=\"pp-wn-text\">Links so einzusetzen, dass Nutzer und Google besser verstehen, wohin eine Seite führt und welche Inhalte zusammengehören. Das spricht klar für eine Strategie mit interner Verlinkung, Pillar Pages, Blogbeiträgen und FAQ-Bereichen.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--audience\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Für wen moderne Sichtbarkeit besonders wichtig ist</h2>\n <span class=\"pp-audience-intro pp-anim pp-anim-d1\">Diese Seite richtet sich an Unternehmen, die spüren, dass eine Website allein nicht mehr ausreicht – und die verstehen möchten, was heute wirklich zählt.</span>\n\n <div class=\"pp-audience-grid\">\n\n <!-- Zielgruppe 1 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d1\">\n <div class=\"pp-ac-icon\">🏡</div>\n <div class=\"pp-ac-content\">\n <h3>Unterkünfte &amp; Tourismus</h3>\n <span class=\"pp-ac-desc\">Ferienwohnungen, Pensionen und touristische Anbieter, die direkt gefunden werden möchten – nicht nur über Buchungsportale.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 2 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d2\">\n <div class=\"pp-ac-icon\">🔧</div>\n <div class=\"pp-ac-content\">\n <h3>Handwerksbetriebe</h3>\n <span class=\"pp-ac-desc\">Betriebe, die regional sichtbar sein wollen und neue Aufträge über eine professionelle Online-Präsenz gewinnen möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 3 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d3\">\n <div class=\"pp-ac-icon\">💆</div>\n <div class=\"pp-ac-content\">\n <h3>Kosmetikstudios, Praxen &amp; Dienstleister</h3>\n <span class=\"pp-ac-desc\">Anbieter persönlicher Dienstleistungen, bei denen Vertrauen und ein guter erster Eindruck online entscheidend sind.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 4 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d4\">\n <div class=\"pp-ac-icon\">📍</div>\n <div class=\"pp-ac-content\">\n <h3>Regionale Unternehmen</h3>\n <span class=\"pp-ac-desc\">Kleine Unternehmen mit lokalem Einzugsgebiet, die bei Google Maps, in der lokalen Suche und in KI-Antworten präsent sein möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 5 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d5\">\n <div class=\"pp-ac-icon\">💼</div>\n <div class=\"pp-ac-content\">\n <h3>Selbstständige</h3>\n <span class=\"pp-ac-desc\">Freiberufler und Solo-Selbstständige, die online professioneller auftreten und gezielt Anfragen generieren möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 6 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d5\">\n <div class=\"pp-ac-icon\">🔄</div>\n <div class=\"pp-ac-content\">\n <h3>Websites, die in die Jahre gekommen sind</h3>\n <span class=\"pp-ac-desc\">Unternehmen, deren Website schon einige Jahre alt ist und die merken, dass weniger Anfragen über die Website kommen als früher.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Closing statement -->\n <div class=\"pp-audience-closing pp-anim pp-anim-d6\">\n <div class=\"pp-acl-icon\">🎯</div>\n <span class=\"pp-acl-text\">Gemeinsam haben all diese Unternehmen eines: Sie sind gut in dem, was sie tun – aber online werden sie noch nicht so gefunden, wie sie es verdienen. Genau hier setzt moderne Sichtbarkeit an.</span>\n </div>\n\n </div>\n </div>\n\n<div class=\"pp-section pp-section--problems\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Woran viele Websites heute scheitern</h2>\n <span class=\"pp-problems-intro pp-anim pp-anim-d1\">Diese Punkte begegnen mir regelmäßig. Vielleicht erkennen Sie Ihre eigene Website in einigen davon wieder.</span>\n\n <div class=\"pp-problems-grid\">\n\n <div class=\"pp-problem-item pp-anim pp-anim-d1\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Die Website ist online, aber kaum sichtbar.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d1\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Leistungen sind nicht klar genug erklärt.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d2\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Es fehlen Antworten auf wichtige Kundenfragen.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d2\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Das Google Unternehmensprofil ist unvollständig.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d3\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Es gibt keinen aktuellen Blog oder FAQ-Bereich.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d3\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Bilder heißen noch „IMG_1234.jpg\".</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d4\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Interne Verlinkungen fehlen.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d4\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Die Seite wirkt hübsch, aber führt nicht zur Anfrage.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d5\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">SEO wurde einmal gemacht, aber nie weiterentwickelt.</span>\n </div>\n\n </div>\n\n <!-- CTA zum Website-Check -->\n <div class=\"pp-problems-cta pp-anim pp-anim-d6\">\n <div class=\"pp-pcta-content\">\n <span class=\"pp-pcta-heading\">Erkennen Sie, wo Ihre Website Potenzial verschenkt?</span>\n <span class=\"pp-pcta-sub\">Ein Website-Check zeigt Ihnen konkret, was Sie verbessern können.</span>\n </div>\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-pcta-btn\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Check anfragen →</a>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--method\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Wie ich Websites sichtbarer mache</h2>\n <span class=\"pp-method-intro pp-anim pp-anim-d1\">Mein Ansatz ist klar, praxisnah und ohne Agentur-Blabla. In vier Schritten bringe ich Struktur, Inhalte und Sichtbarkeit zusammen.</span>\n\n <div class=\"pp-method-timeline\">\n\n <!-- Schritt 1: Analyse -->\n <div class=\"pp-method-step pp-anim pp-anim-d1\">\n <span class=\"pp-ms-dot\">1</span>\n <div class=\"pp-ms-card\">\n <h3>Analyse</h3>\n <span class=\"pp-ms-desc\">Was ist vorhanden? Was funktioniert? Wo fehlen Inhalte, Struktur, Sichtbarkeit oder Vertrauen? Ich schaue mir Ihre Website, Ihr Google-Profil und Ihre Online-Präsenz genau an.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Website-Check</span>\n <span class=\"pp-ms-tag\">Google Profil</span>\n <span class=\"pp-ms-tag\">Inhaltsanalyse</span>\n </div>\n </div>\n </div>\n\n <!-- Schritt 2: Strategie -->\n <div class=\"pp-method-step pp-anim pp-anim-d2\">\n <span class=\"pp-ms-dot\">2</span>\n <div class=\"pp-ms-card\">\n <h3>Strategie</h3>\n <span class=\"pp-ms-desc\">Welche Seiten, Inhalte, Fragen und Verlinkungen braucht die Website? Gemeinsam legen wir fest, wie Ihre Sichtbarkeit Schritt für Schritt wachsen kann.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Seitenstruktur</span>\n <span class=\"pp-ms-tag\">Suchbegriffe</span>\n <span class=\"pp-ms-tag\">Verlinkung</span>\n </div>\n </div>\n </div>\n\n <!-- Schritt 3: Umsetzung -->\n <div class=\"pp-method-step pp-anim pp-anim-d3\">\n <span class=\"pp-ms-dot\">3</span>\n <div class=\"pp-ms-card\">\n <h3>Umsetzung</h3>\n <span class=\"pp-ms-desc\">Texte, Struktur, SEO-Grundlagen, Google Profil, Blog, FAQ, Landingpages — alles wird professionell aufgebaut, optimiert und miteinander verbunden.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Texte &amp; SEO</span>\n <span class=\"pp-ms-tag\">Blog &amp; FAQ</span>\n <span class=\"pp-ms-tag\">Pillar Pages</span>\n </div>\n </div>\n </div>\n\n <!-- Schritt 4: Weiterentwicklung -->\n <div class=\"pp-method-step pp-anim pp-anim-d4\">\n <span class=\"pp-ms-dot\">4</span>\n <div class=\"pp-ms-card\">\n <h3>Weiterentwicklung</h3>\n <span class=\"pp-ms-desc\">Sichtbarkeit ist kein einmaliges Projekt. Inhalte sollten regelmäßig ergänzt, aktualisiert und verbunden werden — damit Ihre Website langfristig gefunden wird.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Pflege</span>\n <span class=\"pp-ms-tag\">Neue Inhalte</span>\n <span class=\"pp-ms-tag\">Coaching</span>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- Closing note -->\n <div class=\"pp-method-closing pp-anim pp-anim-d5\">\n <div class=\"pp-mc-icon\">🤝</div>\n <span class=\"pp-mc-text\">Ob ich die Umsetzung komplett übernehme oder Sie dabei begleite, Ihre Website selbst zu pflegen — der Weg zur besseren Sichtbarkeit beginnt immer mit einem klaren ersten Schritt.</span>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--services\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Welche Leistungen dabei helfen</h2>\n <span class=\"pp-services-intro pp-anim pp-anim-d1\">Sichtbarkeit entsteht durch das Zusammenspiel verschiedener Bausteine. Hier finden Sie die passenden Leistungen — je nachdem, wo Sie gerade stehen.</span>\n\n <div class=\"pp-services-grid\">\n\n <!-- Website & Sichtbarkeit -->\n <div class=\"pp-service-card pp-anim pp-anim-d1\">\n <div class=\"pp-sc-icon\">🌐</div>\n <h3>Website &amp; Sichtbarkeit</h3>\n <span class=\"pp-sc-desc\">Für neue Websites, Relaunches und klare Strukturen, die Besucher überzeugen und von Suchmaschinen verstanden werden.</span>\n <!-- 🔗 LINK SETZEN: Website & Sichtbarkeit -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur Seite Website &amp; Sichtbarkeit setzen\" draggable=\"false\">Website klar strukturieren und sichtbar aufbauen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- SEO -->\n <div class=\"pp-service-card pp-anim pp-anim-d2\">\n <div class=\"pp-sc-icon\">🔍</div>\n <h3>SEO</h3>\n <span class=\"pp-sc-desc\">Für bessere Auffindbarkeit, passende Suchbegriffe, hilfreiche Inhalte und solide technische Grundlagen.</span>\n <!-- 🔗 LINK SETZEN: SEO-Seite -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur SEO-Seite setzen\" draggable=\"false\">SEO für kleine Unternehmen verständlich erklärt <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Google Unternehmensprofil -->\n <div class=\"pp-service-card pp-anim pp-anim-d3\">\n <div class=\"pp-sc-icon\">📍</div>\n <h3>Google Unternehmensprofil</h3>\n <span class=\"pp-sc-desc\">Für lokale Sichtbarkeit, Vertrauen und mehr Kontaktpunkte — direkt in der Google-Suche und auf Google Maps.</span>\n <!-- 🔗 LINK SETZEN: Google Profil -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur Google-Profil-Seite setzen\" draggable=\"false\">Google Unternehmensprofil optimieren <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Website-Check -->\n <div class=\"pp-service-card pp-anim pp-anim-d4\">\n <div class=\"pp-sc-icon\">✅</div>\n <h3>Website-Check</h3>\n <span class=\"pp-sc-desc\">Für Unternehmen, die wissen möchten, wo sie aktuell stehen — und was konkret verbessert werden kann.</span>\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website auf Sichtbarkeit, Struktur und Vertrauen prüfen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Website-Coaching -->\n <div class=\"pp-service-card pp-anim pp-anim-d5\">\n <div class=\"pp-sc-icon\">🎓</div>\n <h3>Website-Coaching</h3>\n <span class=\"pp-sc-desc\">Für Unternehmen, die ihre Website selbst pflegen und besser verstehen möchten — mit professioneller Begleitung.</span>\n <!-- 🔗 LINK SETZEN: Website-Coaching -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur Website-Coaching-Seite setzen\" draggable=\"false\">Website selbst pflegen und besser verstehen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Pillar Page & Grounding Page -->\n <div class=\"pp-service-card pp-anim pp-anim-d6\">\n <div class=\"pp-sc-icon\">📄</div>\n <h3>Pillar Page &amp; Grounding Page</h3>\n <span class=\"pp-sc-desc\">Für Unternehmen, die ein Thema umfassend besetzen und für Google, KI und Nutzer klarer sichtbar werden möchten.</span>\n <!-- 🔗 LINK SETZEN: Grounding Page / Pillar Page Angebot -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur Grounding Page / Pillar Page Angebot setzen\" draggable=\"false\">Pillar Page als zentrale Themenseite erstellen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n </div>\n\n <!-- Upcoming: Blog & Webinare -->\n <div class=\"pp-services-upcoming pp-anim pp-anim-d6\">\n <div class=\"pp-su-icon\">💡</div>\n <div class=\"pp-su-content\">\n <span class=\"pp-su-label\">Wissen &amp; Impulse</span>\n <span class=\"pp-su-text\">In meinem Blog und in Webinaren teile ich regelmäßig Tipps, Einblicke und praktische Anleitungen rund um Website, SEO, Google und KI-Sichtbarkeit.</span>\n <div class=\"pp-su-links\">\n <!-- 🔗 LINK SETZEN: Blog / Impulse -->\n <a href=\"#\" class=\"pp-su-link\" title=\"Link zum Blog / Impulse setzen\" draggable=\"false\">Tipps zu SEO, Google, KI und Online-Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n <!-- 🔗 LINK SETZEN: Termine / Webinare -->\n <a href=\"#\" class=\"pp-su-link\" title=\"Link zu Termine / Webinare setzen\" draggable=\"false\">Aktuelle Webinare zu Website, SEO und Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n<!-- ════════ PART 1: HERO ════════ -->\n <div class=\"pp-hero\">\n <div class=\"pp-hero-bg\">\n <img src=\"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1600&amp;q=80\" alt=\"Digitaler Arbeitsplatz mit Bildschirmen und Datenvisualisierung\" draggable=\"false\">\n </div>\n <div class=\"pp-hero-overlay\"></div>\n\n <div class=\"pp-hero-content\">\n <span class=\"pp-hero-badge\">Pillar Page · Sichtbarkeit</span>\n <h1>Sichtbar werden im KI-Zeitalter</h1>\n <span class=\"pp-hero-subline\">Google verändert sich. KI-Antworten, Sprachsuche und neue Suchgewohnheiten sorgen dafür, dass Websites heute klarer, hilfreicher und besser strukturiert sein müssen als früher.</span>\n <span class=\"pp-hero-intro\">Viele Unternehmen haben eine Website – und trotzdem werden sie online nicht so gefunden, wie sie es sich wünschen. Früher reichte es oft, mit ein paar Suchbegriffen bei Google sichtbar zu sein. Heute suchen Menschen anders: Sie stellen ganze Fragen, vergleichen schneller, nutzen Google, Karten, KI-Tools und Empfehlungen. Genau deshalb braucht Sichtbarkeit heute mehr als klassische SEO.</span>\n <div class=\"pp-hero-ctas\">\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-btn pp-btn--primary\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Sichtbarkeit prüfen lassen →</a>\n <!-- 🔗 LINK SETZEN: Kontakt / Termine / Webinare -->\n <a href=\"#\" class=\"pp-btn pp-btn--outline\" title=\"Link zu Kontakt oder Termine/Webinare setzen\" draggable=\"false\">Beratungstermin vereinbaren</a>\n </div>\n </div>\n\n <div class=\"pp-hero-scroll\">\n <span>Mehr erfahren</span>\n <div class=\"pp-scroll-line\"></div>\n </div>\n </div>\n\n<!-- ════════ PART 2: WARUM SICH SICHTBARKEIT VERÄNDERT HAT ════════ -->\n <div class=\"pp-section pp-section--change\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Warum „bei Google gefunden werden\" heute anders funktioniert</h2>\n\n <div class=\"pp-split\">\n <!-- Text-Spalte -->\n <div class=\"pp-split-text pp-anim pp-anim-d1\">\n <span>Google zeigt nicht mehr nur zehn blaue Links. Antworten werden zunehmend direkt zusammengefasst, Suchanfragen werden länger und konkreter, und Nutzer erwarten schnelle Orientierung. KI-Systeme greifen bevorzugt auf klar strukturierte, vertrauenswürdige Informationen zurück.</span>\n <span>Studien aus 2026 zeigen, dass AI Overviews bei vielen Suchanfragen erscheinen können und teilweise andere Quellen nutzen als klassische organische Google-Ergebnisse. Für Unternehmen bedeutet das: Wer nur auf herkömmliche Rankings setzt, verschenkt zunehmend Reichweite.</span>\n </div>\n\n <!-- Bild-Spalte -->\n <div class=\"pp-split-visual pp-anim pp-anim-d2\">\n <img src=\"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&amp;q=80\" alt=\"Datenanalyse-Dashboard mit Diagrammen und Statistiken\" loading=\"lazy\" draggable=\"false\">\n <div class=\"pp-img-overlay\"></div>\n </div>\n </div>\n\n <!-- Highlight-Box -->\n <div class=\"pp-highlight-box pp-anim pp-anim-d3\" style=\"margin-top: 2.5rem;\">\n <span class=\"pp-hb-label\">Wichtig für Ihr Unternehmen</span>\n <span class=\"pp-hb-text\">Eine Website darf heute nicht nur schön aussehen. Sie muss Antworten geben, Vertrauen aufbauen, Leistungen klar erklären und technisch sowie inhaltlich so strukturiert sein, dass Google, KI-Systeme und Menschen sie verstehen.</span>\n </div>\n\n </div>\n </div>\n\n<!-- ════════ PART 3: DIE 5 BAUSTEINE MODERNER SICHTBARKEIT ════════ -->\n <div class=\"pp-section pp-section--pillars\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Die 5 Bausteine moderner Sichtbarkeit</h2>\n <span class=\"pp-pillars-intro pp-anim pp-anim-d1\">Sichtbarkeit entsteht heute nicht durch eine einzelne Maßnahme — sondern durch das Zusammenspiel mehrerer Faktoren. Diese fünf Bausteine bilden die Grundlage.</span>\n\n <div class=\"pp-pillars-grid\">\n\n <!-- Baustein 1 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d1\">\n <span class=\"pp-pillar-num\">1</span>\n <h3>Eine klare Website-Struktur</h3>\n <span class=\"pp-pillar-desc\">Besucher müssen sofort verstehen, was angeboten wird, für wen es passt und wie sie Kontakt aufnehmen können.</span>\n <!-- 🔗 LINK SETZEN: Webdesign / Website & Sichtbarkeit -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zu Website &amp; Sichtbarkeit setzen\" draggable=\"false\">Website klar strukturieren und sichtbar aufbauen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 2 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d2\">\n <span class=\"pp-pillar-num\">2</span>\n <h3>SEO-Grundlagen</h3>\n <span class=\"pp-pillar-desc\">Seitentitel, Überschriften, Suchbegriffe, Ladezeit, interne Links und mobilfreundliche Darstellung bleiben wichtig.</span>\n <!-- 🔗 LINK SETZEN: SEO-Seite -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur SEO-Seite setzen\" draggable=\"false\">SEO für kleine Unternehmen verständlich erklärt <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 3 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d3\">\n <span class=\"pp-pillar-num\">3</span>\n <h3>Inhalte, die echte Fragen beantworten</h3>\n <span class=\"pp-pillar-desc\">FAQ, Blogbeiträge, Ratgeberseiten und gut aufgebaute Leistungsseiten helfen Nutzern – und liefern Suchmaschinen bessere Signale.</span>\n <!-- 🔗 LINK SETZEN: Blog / Impulse -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zum Blog / Impulse setzen\" draggable=\"false\">Tipps zu SEO, Google, KI und Online-Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 4 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d4\">\n <span class=\"pp-pillar-num\">4</span>\n <h3>Google Unternehmensprofil</h3>\n <span class=\"pp-pillar-desc\">Für lokale Unternehmen ist das Google Profil oft der erste Kontaktpunkt – noch vor der Website.</span>\n <!-- 🔗 LINK SETZEN: Google Profil -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Google-Profil-Seite setzen\" draggable=\"false\">Google Unternehmensprofil optimieren <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 5 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d5\">\n <span class=\"pp-pillar-num\">5</span>\n <h3>KI- und GEO-Sichtbarkeit</h3>\n <span class=\"pp-pillar-desc\">Inhalte müssen so klar, hilfreich und zitierfähig sein, dass sie auch in KI-gestützten Suchumgebungen verstanden werden.</span>\n <!-- 🔗 LINK SETZEN: Grounding Page / Pillar Page Angebot -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Grounding Page / Pillar Page Angebot setzen\" draggable=\"false\">Grounding Page für KI-Sichtbarkeit erstellen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n </div>\n </div>\n </div>\n\n<div class=\"pp-section pp-section--explain\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">SEO, GEO, KI-Sichtbarkeit – was bedeutet das eigentlich?</h2>\n <span class=\"pp-explain-intro pp-anim pp-anim-d1\">Diese drei Begriffe tauchen immer häufiger auf. Hier eine klare Einordnung – ohne Fachchinesisch.</span>\n\n <div class=\"pp-explain-grid\">\n\n <!-- SEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d1\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🔍</div>\n <span class=\"pp-ec-abbr\">SEO</span>\n <h3>Suchmaschinen-optimierung</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">SEO sorgt dafür, dass Ihre Website in klassischen Suchmaschinen besser gefunden wird – durch passende Suchbegriffe, klare Seitenstruktur, gute Ladezeiten und hilfreiche Inhalte.</span>\n </div>\n </div>\n\n <!-- GEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d2\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">⚙️</div>\n <span class=\"pp-ec-abbr\">GEO</span>\n <h3>Generative Engine Optimization</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">GEO bedeutet, Inhalte so aufzubereiten, dass sie auch von KI-gestützten Suchsystemen verstanden, eingeordnet und möglichst als Quelle berücksichtigt werden können.</span>\n </div>\n </div>\n\n <!-- KI-Sichtbarkeit -->\n <div class=\"pp-explain-card pp-anim pp-anim-d3\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🤖</div>\n <span class=\"pp-ec-abbr\">KI-Sichtbarkeit</span>\n <h3>Im digitalen Raum erkennbar sein</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">KI-Sichtbarkeit meint, dass Ihr Unternehmen nicht nur in Suchergebnissen auftaucht, sondern mit klaren Informationen, Antworten, Leistungen, Standorten und Vertrauenssignalen im digitalen Raum erkennbar ist.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Takeaway -->\n <div class=\"pp-explain-takeaway pp-anim pp-anim-d3\">\n <div class=\"pp-et-icon\">💡</div>\n <div class=\"pp-et-content\">\n <span class=\"pp-et-label\">Das Wichtigste</span>\n <span class=\"pp-et-text\">Sie müssen kein Technik-Experte sein. Entscheidend ist: Ihre Website braucht bessere Inhalte und eine klarere Struktur – dann profitieren Sie sowohl von klassischem SEO als auch von der neuen KI-Sichtbarkeit.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--website\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Ihre Website muss heute mehr können als gut aussehen</h2>\n <span class=\"pp-website-motto pp-anim pp-anim-d1\">Nicht nur online sein – sichtbar überzeugen.</span>\n\n <div class=\"pp-website-grid\">\n\n <div class=\"pp-website-item pp-anim pp-anim-d1\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Eine gute Website beantwortet Fragen, bevor sie gestellt werden.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d2\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie zeigt, warum ein Unternehmen vertrauenswürdig ist.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d3\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie führt Besucher klar zum nächsten Schritt.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d4\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie verbindet Leistungen, Blog, FAQ, Google Profil und Kontaktmöglichkeiten miteinander.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d5\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie wird regelmäßig gepflegt, erweitert und aktualisiert.</span>\n </div>\n\n </div>\n\n <!-- Google-Empfehlung -->\n <div class=\"pp-website-note pp-anim pp-anim-d6\">\n <div class=\"pp-wn-icon\">🔗</div>\n <div class=\"pp-wn-content\">\n <span class=\"pp-wn-label\">Google empfiehlt</span>\n <span class=\"pp-wn-text\">Links so einzusetzen, dass Nutzer und Google besser verstehen, wohin eine Seite führt und welche Inhalte zusammengehören. Das spricht klar für eine Strategie mit interner Verlinkung, Pillar Pages, Blogbeiträgen und FAQ-Bereichen.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--audience\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Für wen moderne Sichtbarkeit besonders wichtig ist</h2>\n <span class=\"pp-audience-intro pp-anim pp-anim-d1\">Diese Seite richtet sich an Unternehmen, die spüren, dass eine Website allein nicht mehr ausreicht – und die verstehen möchten, was heute wirklich zählt.</span>\n\n <div class=\"pp-audience-grid\">\n\n <!-- Zielgruppe 1 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d1\">\n <div class=\"pp-ac-icon\">🏡</div>\n <div class=\"pp-ac-content\">\n <h3>Unterkünfte &amp; Tourismus</h3>\n <span class=\"pp-ac-desc\">Ferienwohnungen, Pensionen und touristische Anbieter, die direkt gefunden werden möchten – nicht nur über Buchungsportale.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 2 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d2\">\n <div class=\"pp-ac-icon\">🔧</div>\n <div class=\"pp-ac-content\">\n <h3>Handwerksbetriebe</h3>\n <span class=\"pp-ac-desc\">Betriebe, die regional sichtbar sein wollen und neue Aufträge über eine professionelle Online-Präsenz gewinnen möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 3 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d3\">\n <div class=\"pp-ac-icon\">💆</div>\n <div class=\"pp-ac-content\">\n <h3>Kosmetikstudios, Praxen &amp; Dienstleister</h3>\n <span class=\"pp-ac-desc\">Anbieter persönlicher Dienstleistungen, bei denen Vertrauen und ein guter erster Eindruck online entscheidend sind.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 4 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d4\">\n <div class=\"pp-ac-icon\">📍</div>\n <div class=\"pp-ac-content\">\n <h3>Regionale Unternehmen</h3>\n <span class=\"pp-ac-desc\">Kleine Unternehmen mit lokalem Einzugsgebiet, die bei Google Maps, in der lokalen Suche und in KI-Antworten präsent sein möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 5 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d5\">\n <div class=\"pp-ac-icon\">💼</div>\n <div class=\"pp-ac-content\">\n <h3>Selbstständige</h3>\n <span class=\"pp-ac-desc\">Freiberufler und Solo-Selbstständige, die online professioneller auftreten und gezielt Anfragen generieren möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 6 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d5\">\n <div class=\"pp-ac-icon\">🔄</div>\n <div class=\"pp-ac-content\">\n <h3>Websites, die in die Jahre gekommen sind</h3>\n <span class=\"pp-ac-desc\">Unternehmen, deren Website schon einige Jahre alt ist und die merken, dass weniger Anfragen über die Website kommen als früher.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Closing statement -->\n <div class=\"pp-audience-closing pp-anim pp-anim-d6\">\n <div class=\"pp-acl-icon\">🎯</div>\n <span class=\"pp-acl-text\">Gemeinsam haben all diese Unternehmen eines: Sie sind gut in dem, was sie tun – aber online werden sie noch nicht so gefunden, wie sie es verdienen. Genau hier setzt moderne Sichtbarkeit an.</span>\n </div>\n\n </div>\n </div>\n\n<div class=\"pp-section pp-section--problems\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Woran viele Websites heute scheitern</h2>\n <span class=\"pp-problems-intro pp-anim pp-anim-d1\">Diese Punkte begegnen mir regelmäßig. Vielleicht erkennen Sie Ihre eigene Website in einigen davon wieder.</span>\n\n <div class=\"pp-problems-grid\">\n\n <div class=\"pp-problem-item pp-anim pp-anim-d1\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Die Website ist online, aber kaum sichtbar.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d1\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Leistungen sind nicht klar genug erklärt.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d2\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Es fehlen Antworten auf wichtige Kundenfragen.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d2\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Das Google Unternehmensprofil ist unvollständig.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d3\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Es gibt keinen aktuellen Blog oder FAQ-Bereich.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d3\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Bilder heißen noch „IMG_1234.jpg\".</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d4\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Interne Verlinkungen fehlen.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d4\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Die Seite wirkt hübsch, aber führt nicht zur Anfrage.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d5\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">SEO wurde einmal gemacht, aber nie weiterentwickelt.</span>\n </div>\n\n </div>\n\n <!-- CTA zum Website-Check -->\n <div class=\"pp-problems-cta pp-anim pp-anim-d6\">\n <div class=\"pp-pcta-content\">\n <span class=\"pp-pcta-heading\">Erkennen Sie, wo Ihre Website Potenzial verschenkt?</span>\n <span class=\"pp-pcta-sub\">Ein Website-Check zeigt Ihnen konkret, was Sie verbessern können.</span>\n </div>\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-pcta-btn\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Check anfragen →</a>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--method\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Wie ich Websites sichtbarer mache</h2>\n <span class=\"pp-method-intro pp-anim pp-anim-d1\">Mein Ansatz ist klar, praxisnah und ohne Agentur-Blabla. In vier Schritten bringe ich Struktur, Inhalte und Sichtbarkeit zusammen.</span>\n\n <div class=\"pp-method-timeline\">\n\n <!-- Schritt 1: Analyse -->\n <div class=\"pp-method-step pp-anim pp-anim-d1\">\n <span class=\"pp-ms-dot\">1</span>\n <div class=\"pp-ms-card\">\n <h3>Analyse</h3>\n <span class=\"pp-ms-desc\">Was ist vorhanden? Was funktioniert? Wo fehlen Inhalte, Struktur, Sichtbarkeit oder Vertrauen? Ich schaue mir Ihre Website, Ihr Google-Profil und Ihre Online-Präsenz genau an.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Website-Check</span>\n <span class=\"pp-ms-tag\">Google Profil</span>\n <span class=\"pp-ms-tag\">Inhaltsanalyse</span>\n </div>\n </div>\n </div>\n\n <!-- Schritt 2: Strategie -->\n <div class=\"pp-method-step pp-anim pp-anim-d2\">\n <span class=\"pp-ms-dot\">2</span>\n <div class=\"pp-ms-card\">\n <h3>Strategie</h3>\n <span class=\"pp-ms-desc\">Welche Seiten, Inhalte, Fragen und Verlinkungen braucht die Website? Gemeinsam legen wir fest, wie Ihre Sichtbarkeit Schritt für Schritt wachsen kann.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Seitenstruktur</span>\n <span class=\"pp-ms-tag\">Suchbegriffe</span>\n <span class=\"pp-ms-tag\">Verlinkung</span>\n </div>\n </div>\n </div>\n\n <!-- Schritt 3: Umsetzung -->\n <div class=\"pp-method-step pp-anim pp-anim-d3\">\n <span class=\"pp-ms-dot\">3</span>\n <div class=\"pp-ms-card\">\n <h3>Umsetzung</h3>\n <span class=\"pp-ms-desc\">Texte, Struktur, SEO-Grundlagen, Google Profil, Blog, FAQ, Landingpages — alles wird professionell aufgebaut, optimiert und miteinander verbunden.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Texte &amp; SEO</span>\n <span class=\"pp-ms-tag\">Blog &amp; FAQ</span>\n <span class=\"pp-ms-tag\">Pillar Pages</span>\n </div>\n </div>\n </div>\n\n <!-- Schritt 4: Weiterentwicklung -->\n <div class=\"pp-method-step pp-anim pp-anim-d4\">\n <span class=\"pp-ms-dot\">4</span>\n <div class=\"pp-ms-card\">\n <h3>Weiterentwicklung</h3>\n <span class=\"pp-ms-desc\">Sichtbarkeit ist kein einmaliges Projekt. Inhalte sollten regelmäßig ergänzt, aktualisiert und verbunden werden — damit Ihre Website langfristig gefunden wird.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Pflege</span>\n <span class=\"pp-ms-tag\">Neue Inhalte</span>\n <span class=\"pp-ms-tag\">Coaching</span>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- Closing note -->\n <div class=\"pp-method-closing pp-anim pp-anim-d5\">\n <div class=\"pp-mc-icon\">🤝</div>\n <span class=\"pp-mc-text\">Ob ich die Umsetzung komplett übernehme oder Sie dabei begleite, Ihre Website selbst zu pflegen — der Weg zur besseren Sichtbarkeit beginnt immer mit einem klaren ersten Schritt.</span>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--services\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Welche Leistungen dabei helfen</h2>\n <span class=\"pp-services-intro pp-anim pp-anim-d1\">Sichtbarkeit entsteht durch das Zusammenspiel verschiedener Bausteine. Hier finden Sie die passenden Leistungen — je nachdem, wo Sie gerade stehen.</span>\n\n <div class=\"pp-services-grid\">\n\n <!-- Website & Sichtbarkeit -->\n <div class=\"pp-service-card pp-anim pp-anim-d1\">\n <div class=\"pp-sc-icon\">🌐</div>\n <h3>Website &amp; Sichtbarkeit</h3>\n <span class=\"pp-sc-desc\">Für neue Websites, Relaunches und klare Strukturen, die Besucher überzeugen und von Suchmaschinen verstanden werden.</span>\n <!-- 🔗 LINK SETZEN: Website & Sichtbarkeit -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur Seite Website &amp; Sichtbarkeit setzen\" draggable=\"false\">Website klar strukturieren und sichtbar aufbauen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- SEO -->\n <div class=\"pp-service-card pp-anim pp-anim-d2\">\n <div class=\"pp-sc-icon\">🔍</div>\n <h3>SEO</h3>\n <span class=\"pp-sc-desc\">Für bessere Auffindbarkeit, passende Suchbegriffe, hilfreiche Inhalte und solide technische Grundlagen.</span>\n <!-- 🔗 LINK SETZEN: SEO-Seite -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur SEO-Seite setzen\" draggable=\"false\">SEO für kleine Unternehmen verständlich erklärt <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Google Unternehmensprofil -->\n <div class=\"pp-service-card pp-anim pp-anim-d3\">\n <div class=\"pp-sc-icon\">📍</div>\n <h3>Google Unternehmensprofil</h3>\n <span class=\"pp-sc-desc\">Für lokale Sichtbarkeit, Vertrauen und mehr Kontaktpunkte — direkt in der Google-Suche und auf Google Maps.</span>\n <!-- 🔗 LINK SETZEN: Google Profil -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur Google-Profil-Seite setzen\" draggable=\"false\">Google Unternehmensprofil optimieren <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Website-Check -->\n <div class=\"pp-service-card pp-anim pp-anim-d4\">\n <div class=\"pp-sc-icon\">✅</div>\n <h3>Website-Check</h3>\n <span class=\"pp-sc-desc\">Für Unternehmen, die wissen möchten, wo sie aktuell stehen — und was konkret verbessert werden kann.</span>\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website auf Sichtbarkeit, Struktur und Vertrauen prüfen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Website-Coaching -->\n <div class=\"pp-service-card pp-anim pp-anim-d5\">\n <div class=\"pp-sc-icon\">🎓</div>\n <h3>Website-Coaching</h3>\n <span class=\"pp-sc-desc\">Für Unternehmen, die ihre Website selbst pflegen und besser verstehen möchten — mit professioneller Begleitung.</span>\n <!-- 🔗 LINK SETZEN: Website-Coaching -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur Website-Coaching-Seite setzen\" draggable=\"false\">Website selbst pflegen und besser verstehen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Pillar Page & Grounding Page -->\n <div class=\"pp-service-card pp-anim pp-anim-d6\">\n <div class=\"pp-sc-icon\">📄</div>\n <h3>Pillar Page &amp; Grounding Page</h3>\n <span class=\"pp-sc-desc\">Für Unternehmen, die ein Thema umfassend besetzen und für Google, KI und Nutzer klarer sichtbar werden möchten.</span>\n <!-- 🔗 LINK SETZEN: Grounding Page / Pillar Page Angebot -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur Grounding Page / Pillar Page Angebot setzen\" draggable=\"false\">Pillar Page als zentrale Themenseite erstellen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n </div>\n\n <!-- Upcoming: Blog & Webinare -->\n <div class=\"pp-services-upcoming pp-anim pp-anim-d6\">\n <div class=\"pp-su-icon\">💡</div>\n <div class=\"pp-su-content\">\n <span class=\"pp-su-label\">Wissen &amp; Impulse</span>\n <span class=\"pp-su-text\">In meinem Blog und in Webinaren teile ich regelmäßig Tipps, Einblicke und praktische Anleitungen rund um Website, SEO, Google und KI-Sichtbarkeit.</span>\n <div class=\"pp-su-links\">\n <!-- 🔗 LINK SETZEN: Blog / Impulse -->\n <a href=\"#\" class=\"pp-su-link\" title=\"Link zum Blog / Impulse setzen\" draggable=\"false\">Tipps zu SEO, Google, KI und Online-Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n <!-- 🔗 LINK SETZEN: Termine / Webinare -->\n <a href=\"#\" class=\"pp-su-link\" title=\"Link zu Termine / Webinare setzen\" draggable=\"false\">Aktuelle Webinare zu Website, SEO und Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n<div class=\"pp-section pp-section--faq\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Häufige Fragen zur Online-Sichtbarkeit</h2>\n <span class=\"pp-faq-intro pp-anim pp-anim-d1\">Hier finden Sie Antworten auf die wichtigsten Fragen rund um SEO, KI-Sichtbarkeit, Pillar Pages und Website-Struktur.</span>\n\n <div class=\"pp-faq-list\">\n\n <!-- FAQ 1 -->\n <div class=\"pp-faq-item pp-anim pp-anim-d1\">\n <button class=\"pp-faq-question\" aria-expanded=\"false\" aria-controls=\"pp-faq-a1\">\n <span class=\"pp-faq-icon\">?</span>\n <span class=\"pp-faq-q-text\">Was ist eine Pillar Page?</span>\n <span class=\"pp-faq-chevron\">▾</span>\n </button>\n <div class=\"pp-faq-answer\" id=\"pp-faq-a1\" role=\"region\">\n <div class=\"pp-faq-answer-inner\">\n <span class=\"pp-faq-a-text\">Eine Pillar Page ist eine zentrale Übersichtsseite zu einem wichtigen Thema. Sie erklärt das Thema umfassend und verlinkt auf passende Detailseiten, Blogbeiträge oder Angebote. Damit hilft sie sowohl Nutzern als auch Suchmaschinen, die Zusammenhänge Ihrer Inhalte zu verstehen.</span>\n </div>\n </div>\n </div>\n\n <!-- FAQ 2 -->\n <div class=\"pp-faq-item pp-anim pp-anim-d2\">\n <button class=\"pp-faq-question\" aria-expanded=\"false\" aria-controls=\"pp-faq-a2\">\n <span class=\"pp-faq-icon\">?</span>\n <span class=\"pp-faq-q-text\">Was ist der Unterschied zwischen SEO und KI-Sichtbarkeit?</span>\n <span class=\"pp-faq-chevron\">▾</span>\n </button>\n <div class=\"pp-faq-answer\" id=\"pp-faq-a2\" role=\"region\">\n <div class=\"pp-faq-answer-inner\">\n <span class=\"pp-faq-a-text\">SEO konzentriert sich auf klassische Suchmaschinenoptimierung — also darauf, in den Google-Ergebnissen besser platziert zu werden. KI-Sichtbarkeit geht einen Schritt weiter und fragt: Sind die Inhalte so klar, hilfreich und strukturiert, dass sie auch in KI-gestützten Suchsystemen wie Google AI Overviews oder ChatGPT verstanden und als Quelle berücksichtigt werden können?</span>\n </div>\n </div>\n </div>\n\n <!-- FAQ 3 -->\n <div class=\"pp-faq-item pp-anim pp-anim-d2\">\n <button class=\"pp-faq-question\" aria-expanded=\"false\" aria-controls=\"pp-faq-a3\">\n <span class=\"pp-faq-icon\">?</span>\n <span class=\"pp-faq-q-text\">Braucht jedes Unternehmen eine Pillar Page?</span>\n <span class=\"pp-faq-chevron\">▾</span>\n </button>\n <div class=\"pp-faq-answer\" id=\"pp-faq-a3\" role=\"region\">\n <div class=\"pp-faq-answer-inner\">\n <span class=\"pp-faq-a-text\">Nicht jedes Unternehmen braucht sofort eine Pillar Page. Sinnvoll ist sie besonders dann, wenn ein Thema zentral für die eigene Sichtbarkeit ist — zum Beispiel Website, Google Profil, Ferienwohnung buchen, Kosmetikbehandlungen oder Handwerksleistungen. Eine Pillar Page stärkt Ihre thematische Autorität und macht Ihre Inhalte besser auffindbar.</span>\n </div>\n </div>\n </div>\n\n <!-- FAQ 4 -->\n <div class=\"pp-faq-item pp-anim pp-anim-d3\">\n <button class=\"pp-faq-question\" aria-expanded=\"false\" aria-controls=\"pp-faq-a4\">\n <span class=\"pp-faq-icon\">?</span>\n <span class=\"pp-faq-q-text\">Warum reichen einzelne Leistungsseiten nicht mehr aus?</span>\n <span class=\"pp-faq-chevron\">▾</span>\n </button>\n <div class=\"pp-faq-answer\" id=\"pp-faq-a4\" role=\"region\">\n <div class=\"pp-faq-answer-inner\">\n <span class=\"pp-faq-a-text\">Einzelne Leistungsseiten erklären oft nur ein Angebot. Eine Pillar Page verbindet die wichtigsten Informationen, beantwortet typische Fragen und zeigt Suchmaschinen besser, wofür eine Website fachlich steht. So entsteht ein zusammenhängendes Bild — statt isolierter Einzelseiten.</span>\n </div>\n </div>\n </div>\n\n <!-- FAQ 5 -->\n <div class=\"pp-faq-item pp-anim pp-anim-d3\">\n <button class=\"pp-faq-question\" aria-expanded=\"false\" aria-controls=\"pp-faq-a5\">\n <span class=\"pp-faq-icon\">?</span>\n <span class=\"pp-faq-q-text\">Wie lange dauert es, bis bessere Inhalte Wirkung zeigen?</span>\n <span class=\"pp-faq-chevron\">▾</span>\n </button>\n <div class=\"pp-faq-answer\" id=\"pp-faq-a5\" role=\"region\">\n <div class=\"pp-faq-answer-inner\">\n <span class=\"pp-faq-a-text\">Das hängt von der Ausgangslage, dem Wettbewerb, der Technik, den Inhalten und der Pflege ab. Wichtig ist: Sichtbarkeit entsteht heute meist nicht durch eine einzelne Maßnahme, sondern durch eine klare Struktur und regelmäßige Weiterentwicklung. Erste Verbesserungen können nach wenigen Wochen sichtbar sein, nachhaltige Ergebnisse brauchen oft einige Monate.</span>\n </div>\n </div>\n </div>\n\n </div>\n\n </div>\n</div>\n\n<!-- ════════ PART 1: HERO ════════ -->\n <div class=\"pp-hero\">\n <div class=\"pp-hero-bg\">\n <img src=\"https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=1600&amp;q=80\" alt=\"Digitaler Arbeitsplatz mit Bildschirmen und Datenvisualisierung\" draggable=\"false\">\n </div>\n <div class=\"pp-hero-overlay\"></div>\n\n <div class=\"pp-hero-content\">\n <span class=\"pp-hero-badge\">Pillar Page · Sichtbarkeit</span>\n <h1>Sichtbar werden im KI-Zeitalter</h1>\n <span class=\"pp-hero-subline\">Google verändert sich. KI-Antworten, Sprachsuche und neue Suchgewohnheiten sorgen dafür, dass Websites heute klarer, hilfreicher und besser strukturiert sein müssen als früher.</span>\n <span class=\"pp-hero-intro\">Viele Unternehmen haben eine Website – und trotzdem werden sie online nicht so gefunden, wie sie es sich wünschen. Früher reichte es oft, mit ein paar Suchbegriffen bei Google sichtbar zu sein. Heute suchen Menschen anders: Sie stellen ganze Fragen, vergleichen schneller, nutzen Google, Karten, KI-Tools und Empfehlungen. Genau deshalb braucht Sichtbarkeit heute mehr als klassische SEO.</span>\n <div class=\"pp-hero-ctas\">\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-btn pp-btn--primary\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Sichtbarkeit prüfen lassen →</a>\n <!-- 🔗 LINK SETZEN: Kontakt / Termine / Webinare -->\n <a href=\"#\" class=\"pp-btn pp-btn--outline\" title=\"Link zu Kontakt oder Termine/Webinare setzen\" draggable=\"false\">Beratungstermin vereinbaren</a>\n </div>\n </div>\n\n <div class=\"pp-hero-scroll\">\n <span>Mehr erfahren</span>\n <div class=\"pp-scroll-line\"></div>\n </div>\n </div>\n\n<!-- ════════ PART 2: WARUM SICH SICHTBARKEIT VERÄNDERT HAT ════════ -->\n <div class=\"pp-section pp-section--change\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Warum „bei Google gefunden werden\" heute anders funktioniert</h2>\n\n <div class=\"pp-split\">\n <!-- Text-Spalte -->\n <div class=\"pp-split-text pp-anim pp-anim-d1\">\n <span>Google zeigt nicht mehr nur zehn blaue Links. Antworten werden zunehmend direkt zusammengefasst, Suchanfragen werden länger und konkreter, und Nutzer erwarten schnelle Orientierung. KI-Systeme greifen bevorzugt auf klar strukturierte, vertrauenswürdige Informationen zurück.</span>\n <span>Studien aus 2026 zeigen, dass AI Overviews bei vielen Suchanfragen erscheinen können und teilweise andere Quellen nutzen als klassische organische Google-Ergebnisse. Für Unternehmen bedeutet das: Wer nur auf herkömmliche Rankings setzt, verschenkt zunehmend Reichweite.</span>\n </div>\n\n <!-- Bild-Spalte -->\n <div class=\"pp-split-visual pp-anim pp-anim-d2\">\n <img src=\"https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=800&amp;q=80\" alt=\"Datenanalyse-Dashboard mit Diagrammen und Statistiken\" loading=\"lazy\" draggable=\"false\">\n <div class=\"pp-img-overlay\"></div>\n </div>\n </div>\n\n <!-- Highlight-Box -->\n <div class=\"pp-highlight-box pp-anim pp-anim-d3\" style=\"margin-top: 2.5rem;\">\n <span class=\"pp-hb-label\">Wichtig für Ihr Unternehmen</span>\n <span class=\"pp-hb-text\">Eine Website darf heute nicht nur schön aussehen. Sie muss Antworten geben, Vertrauen aufbauen, Leistungen klar erklären und technisch sowie inhaltlich so strukturiert sein, dass Google, KI-Systeme und Menschen sie verstehen.</span>\n </div>\n\n </div>\n </div>\n\n<!-- ════════ PART 3: DIE 5 BAUSTEINE MODERNER SICHTBARKEIT ════════ -->\n <div class=\"pp-section pp-section--pillars\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Die 5 Bausteine moderner Sichtbarkeit</h2>\n <span class=\"pp-pillars-intro pp-anim pp-anim-d1\">Sichtbarkeit entsteht heute nicht durch eine einzelne Maßnahme — sondern durch das Zusammenspiel mehrerer Faktoren. Diese fünf Bausteine bilden die Grundlage.</span>\n\n <div class=\"pp-pillars-grid\">\n\n <!-- Baustein 1 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d1\">\n <span class=\"pp-pillar-num\">1</span>\n <h3>Eine klare Website-Struktur</h3>\n <span class=\"pp-pillar-desc\">Besucher müssen sofort verstehen, was angeboten wird, für wen es passt und wie sie Kontakt aufnehmen können.</span>\n <!-- 🔗 LINK SETZEN: Webdesign / Website & Sichtbarkeit -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zu Website &amp; Sichtbarkeit setzen\" draggable=\"false\">Website klar strukturieren und sichtbar aufbauen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 2 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d2\">\n <span class=\"pp-pillar-num\">2</span>\n <h3>SEO-Grundlagen</h3>\n <span class=\"pp-pillar-desc\">Seitentitel, Überschriften, Suchbegriffe, Ladezeit, interne Links und mobilfreundliche Darstellung bleiben wichtig.</span>\n <!-- 🔗 LINK SETZEN: SEO-Seite -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur SEO-Seite setzen\" draggable=\"false\">SEO für kleine Unternehmen verständlich erklärt <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 3 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d3\">\n <span class=\"pp-pillar-num\">3</span>\n <h3>Inhalte, die echte Fragen beantworten</h3>\n <span class=\"pp-pillar-desc\">FAQ, Blogbeiträge, Ratgeberseiten und gut aufgebaute Leistungsseiten helfen Nutzern – und liefern Suchmaschinen bessere Signale.</span>\n <!-- 🔗 LINK SETZEN: Blog / Impulse -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zum Blog / Impulse setzen\" draggable=\"false\">Tipps zu SEO, Google, KI und Online-Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 4 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d4\">\n <span class=\"pp-pillar-num\">4</span>\n <h3>Google Unternehmensprofil</h3>\n <span class=\"pp-pillar-desc\">Für lokale Unternehmen ist das Google Profil oft der erste Kontaktpunkt – noch vor der Website.</span>\n <!-- 🔗 LINK SETZEN: Google Profil -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Google-Profil-Seite setzen\" draggable=\"false\">Google Unternehmensprofil optimieren <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Baustein 5 -->\n <div class=\"pp-pillar-card pp-anim pp-anim-d5\">\n <span class=\"pp-pillar-num\">5</span>\n <h3>KI- und GEO-Sichtbarkeit</h3>\n <span class=\"pp-pillar-desc\">Inhalte müssen so klar, hilfreich und zitierfähig sein, dass sie auch in KI-gestützten Suchumgebungen verstanden werden.</span>\n <!-- 🔗 LINK SETZEN: Grounding Page / Pillar Page Angebot -->\n <a href=\"#\" class=\"pp-pillar-link\" title=\"Link zur Grounding Page / Pillar Page Angebot setzen\" draggable=\"false\">Grounding Page für KI-Sichtbarkeit erstellen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n </div>\n </div>\n </div>\n\n<div class=\"pp-section pp-section--explain\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">SEO, GEO, KI-Sichtbarkeit – was bedeutet das eigentlich?</h2>\n <span class=\"pp-explain-intro pp-anim pp-anim-d1\">Diese drei Begriffe tauchen immer häufiger auf. Hier eine klare Einordnung – ohne Fachchinesisch.</span>\n\n <div class=\"pp-explain-grid\">\n\n <!-- SEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d1\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🔍</div>\n <span class=\"pp-ec-abbr\">SEO</span>\n <h3>Suchmaschinen-optimierung</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">SEO sorgt dafür, dass Ihre Website in klassischen Suchmaschinen besser gefunden wird – durch passende Suchbegriffe, klare Seitenstruktur, gute Ladezeiten und hilfreiche Inhalte.</span>\n </div>\n </div>\n\n <!-- GEO -->\n <div class=\"pp-explain-card pp-anim pp-anim-d2\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">⚙️</div>\n <span class=\"pp-ec-abbr\">GEO</span>\n <h3>Generative Engine Optimization</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">GEO bedeutet, Inhalte so aufzubereiten, dass sie auch von KI-gestützten Suchsystemen verstanden, eingeordnet und möglichst als Quelle berücksichtigt werden können.</span>\n </div>\n </div>\n\n <!-- KI-Sichtbarkeit -->\n <div class=\"pp-explain-card pp-anim pp-anim-d3\">\n <div class=\"pp-ec-header\">\n <div class=\"pp-ec-icon\">🤖</div>\n <span class=\"pp-ec-abbr\">KI-Sichtbarkeit</span>\n <h3>Im digitalen Raum erkennbar sein</h3>\n </div>\n <div class=\"pp-ec-body\">\n <span class=\"pp-ec-desc\">KI-Sichtbarkeit meint, dass Ihr Unternehmen nicht nur in Suchergebnissen auftaucht, sondern mit klaren Informationen, Antworten, Leistungen, Standorten und Vertrauenssignalen im digitalen Raum erkennbar ist.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Takeaway -->\n <div class=\"pp-explain-takeaway pp-anim pp-anim-d3\">\n <div class=\"pp-et-icon\">💡</div>\n <div class=\"pp-et-content\">\n <span class=\"pp-et-label\">Das Wichtigste</span>\n <span class=\"pp-et-text\">Sie müssen kein Technik-Experte sein. Entscheidend ist: Ihre Website braucht bessere Inhalte und eine klarere Struktur – dann profitieren Sie sowohl von klassischem SEO als auch von der neuen KI-Sichtbarkeit.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--website\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Ihre Website muss heute mehr können als gut aussehen</h2>\n <span class=\"pp-website-motto pp-anim pp-anim-d1\">Nicht nur online sein – sichtbar überzeugen.</span>\n\n <div class=\"pp-website-grid\">\n\n <div class=\"pp-website-item pp-anim pp-anim-d1\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Eine gute Website beantwortet Fragen, bevor sie gestellt werden.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d2\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie zeigt, warum ein Unternehmen vertrauenswürdig ist.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d3\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie führt Besucher klar zum nächsten Schritt.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d4\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie verbindet Leistungen, Blog, FAQ, Google Profil und Kontaktmöglichkeiten miteinander.</span>\n </div>\n\n <div class=\"pp-website-item pp-anim pp-anim-d5\">\n <span class=\"pp-wi-check\">✓</span>\n <span class=\"pp-wi-text\">Sie wird regelmäßig gepflegt, erweitert und aktualisiert.</span>\n </div>\n\n </div>\n\n <!-- Google-Empfehlung -->\n <div class=\"pp-website-note pp-anim pp-anim-d6\">\n <div class=\"pp-wn-icon\">🔗</div>\n <div class=\"pp-wn-content\">\n <span class=\"pp-wn-label\">Google empfiehlt</span>\n <span class=\"pp-wn-text\">Links so einzusetzen, dass Nutzer und Google besser verstehen, wohin eine Seite führt und welche Inhalte zusammengehören. Das spricht klar für eine Strategie mit interner Verlinkung, Pillar Pages, Blogbeiträgen und FAQ-Bereichen.</span>\n </div>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--audience\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Für wen moderne Sichtbarkeit besonders wichtig ist</h2>\n <span class=\"pp-audience-intro pp-anim pp-anim-d1\">Diese Seite richtet sich an Unternehmen, die spüren, dass eine Website allein nicht mehr ausreicht – und die verstehen möchten, was heute wirklich zählt.</span>\n\n <div class=\"pp-audience-grid\">\n\n <!-- Zielgruppe 1 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d1\">\n <div class=\"pp-ac-icon\">🏡</div>\n <div class=\"pp-ac-content\">\n <h3>Unterkünfte &amp; Tourismus</h3>\n <span class=\"pp-ac-desc\">Ferienwohnungen, Pensionen und touristische Anbieter, die direkt gefunden werden möchten – nicht nur über Buchungsportale.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 2 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d2\">\n <div class=\"pp-ac-icon\">🔧</div>\n <div class=\"pp-ac-content\">\n <h3>Handwerksbetriebe</h3>\n <span class=\"pp-ac-desc\">Betriebe, die regional sichtbar sein wollen und neue Aufträge über eine professionelle Online-Präsenz gewinnen möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 3 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d3\">\n <div class=\"pp-ac-icon\">💆</div>\n <div class=\"pp-ac-content\">\n <h3>Kosmetikstudios, Praxen &amp; Dienstleister</h3>\n <span class=\"pp-ac-desc\">Anbieter persönlicher Dienstleistungen, bei denen Vertrauen und ein guter erster Eindruck online entscheidend sind.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 4 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d4\">\n <div class=\"pp-ac-icon\">📍</div>\n <div class=\"pp-ac-content\">\n <h3>Regionale Unternehmen</h3>\n <span class=\"pp-ac-desc\">Kleine Unternehmen mit lokalem Einzugsgebiet, die bei Google Maps, in der lokalen Suche und in KI-Antworten präsent sein möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 5 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d5\">\n <div class=\"pp-ac-icon\">💼</div>\n <div class=\"pp-ac-content\">\n <h3>Selbstständige</h3>\n <span class=\"pp-ac-desc\">Freiberufler und Solo-Selbstständige, die online professioneller auftreten und gezielt Anfragen generieren möchten.</span>\n </div>\n </div>\n\n <!-- Zielgruppe 6 -->\n <div class=\"pp-audience-card pp-anim pp-anim-d5\">\n <div class=\"pp-ac-icon\">🔄</div>\n <div class=\"pp-ac-content\">\n <h3>Websites, die in die Jahre gekommen sind</h3>\n <span class=\"pp-ac-desc\">Unternehmen, deren Website schon einige Jahre alt ist und die merken, dass weniger Anfragen über die Website kommen als früher.</span>\n </div>\n </div>\n\n </div>\n\n <!-- Closing statement -->\n <div class=\"pp-audience-closing pp-anim pp-anim-d6\">\n <div class=\"pp-acl-icon\">🎯</div>\n <span class=\"pp-acl-text\">Gemeinsam haben all diese Unternehmen eines: Sie sind gut in dem, was sie tun – aber online werden sie noch nicht so gefunden, wie sie es verdienen. Genau hier setzt moderne Sichtbarkeit an.</span>\n </div>\n\n </div>\n </div>\n\n<div class=\"pp-section pp-section--problems\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Woran viele Websites heute scheitern</h2>\n <span class=\"pp-problems-intro pp-anim pp-anim-d1\">Diese Punkte begegnen mir regelmäßig. Vielleicht erkennen Sie Ihre eigene Website in einigen davon wieder.</span>\n\n <div class=\"pp-problems-grid\">\n\n <div class=\"pp-problem-item pp-anim pp-anim-d1\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Die Website ist online, aber kaum sichtbar.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d1\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Leistungen sind nicht klar genug erklärt.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d2\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Es fehlen Antworten auf wichtige Kundenfragen.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d2\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Das Google Unternehmensprofil ist unvollständig.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d3\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Es gibt keinen aktuellen Blog oder FAQ-Bereich.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d3\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Bilder heißen noch „IMG_1234.jpg\".</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d4\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Interne Verlinkungen fehlen.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d4\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">Die Seite wirkt hübsch, aber führt nicht zur Anfrage.</span>\n </div>\n\n <div class=\"pp-problem-item pp-anim pp-anim-d5\">\n <span class=\"pp-pi-icon\">✕</span>\n <span class=\"pp-pi-text\">SEO wurde einmal gemacht, aber nie weiterentwickelt.</span>\n </div>\n\n </div>\n\n <!-- CTA zum Website-Check -->\n <div class=\"pp-problems-cta pp-anim pp-anim-d6\">\n <div class=\"pp-pcta-content\">\n <span class=\"pp-pcta-heading\">Erkennen Sie, wo Ihre Website Potenzial verschenkt?</span>\n <span class=\"pp-pcta-sub\">Ein Website-Check zeigt Ihnen konkret, was Sie verbessern können.</span>\n </div>\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-pcta-btn\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Check anfragen →</a>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--method\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Wie ich Websites sichtbarer mache</h2>\n <span class=\"pp-method-intro pp-anim pp-anim-d1\">Mein Ansatz ist klar, praxisnah und ohne Agentur-Blabla. In vier Schritten bringe ich Struktur, Inhalte und Sichtbarkeit zusammen.</span>\n\n <div class=\"pp-method-timeline\">\n\n <!-- Schritt 1: Analyse -->\n <div class=\"pp-method-step pp-anim pp-anim-d1\">\n <span class=\"pp-ms-dot\">1</span>\n <div class=\"pp-ms-card\">\n <h3>Analyse</h3>\n <span class=\"pp-ms-desc\">Was ist vorhanden? Was funktioniert? Wo fehlen Inhalte, Struktur, Sichtbarkeit oder Vertrauen? Ich schaue mir Ihre Website, Ihr Google-Profil und Ihre Online-Präsenz genau an.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Website-Check</span>\n <span class=\"pp-ms-tag\">Google Profil</span>\n <span class=\"pp-ms-tag\">Inhaltsanalyse</span>\n </div>\n </div>\n </div>\n\n <!-- Schritt 2: Strategie -->\n <div class=\"pp-method-step pp-anim pp-anim-d2\">\n <span class=\"pp-ms-dot\">2</span>\n <div class=\"pp-ms-card\">\n <h3>Strategie</h3>\n <span class=\"pp-ms-desc\">Welche Seiten, Inhalte, Fragen und Verlinkungen braucht die Website? Gemeinsam legen wir fest, wie Ihre Sichtbarkeit Schritt für Schritt wachsen kann.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Seitenstruktur</span>\n <span class=\"pp-ms-tag\">Suchbegriffe</span>\n <span class=\"pp-ms-tag\">Verlinkung</span>\n </div>\n </div>\n </div>\n\n <!-- Schritt 3: Umsetzung -->\n <div class=\"pp-method-step pp-anim pp-anim-d3\">\n <span class=\"pp-ms-dot\">3</span>\n <div class=\"pp-ms-card\">\n <h3>Umsetzung</h3>\n <span class=\"pp-ms-desc\">Texte, Struktur, SEO-Grundlagen, Google Profil, Blog, FAQ, Landingpages — alles wird professionell aufgebaut, optimiert und miteinander verbunden.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Texte &amp; SEO</span>\n <span class=\"pp-ms-tag\">Blog &amp; FAQ</span>\n <span class=\"pp-ms-tag\">Pillar Pages</span>\n </div>\n </div>\n </div>\n\n <!-- Schritt 4: Weiterentwicklung -->\n <div class=\"pp-method-step pp-anim pp-anim-d4\">\n <span class=\"pp-ms-dot\">4</span>\n <div class=\"pp-ms-card\">\n <h3>Weiterentwicklung</h3>\n <span class=\"pp-ms-desc\">Sichtbarkeit ist kein einmaliges Projekt. Inhalte sollten regelmäßig ergänzt, aktualisiert und verbunden werden — damit Ihre Website langfristig gefunden wird.</span>\n <div class=\"pp-ms-tags\">\n <span class=\"pp-ms-tag\">Pflege</span>\n <span class=\"pp-ms-tag\">Neue Inhalte</span>\n <span class=\"pp-ms-tag\">Coaching</span>\n </div>\n </div>\n </div>\n\n </div>\n\n <!-- Closing note -->\n <div class=\"pp-method-closing pp-anim pp-anim-d5\">\n <div class=\"pp-mc-icon\">🤝</div>\n <span class=\"pp-mc-text\">Ob ich die Umsetzung komplett übernehme oder Sie dabei begleite, Ihre Website selbst zu pflegen — der Weg zur besseren Sichtbarkeit beginnt immer mit einem klaren ersten Schritt.</span>\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--services\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Welche Leistungen dabei helfen</h2>\n <span class=\"pp-services-intro pp-anim pp-anim-d1\">Sichtbarkeit entsteht durch das Zusammenspiel verschiedener Bausteine. Hier finden Sie die passenden Leistungen — je nachdem, wo Sie gerade stehen.</span>\n\n <div class=\"pp-services-grid\">\n\n <!-- Website & Sichtbarkeit -->\n <div class=\"pp-service-card pp-anim pp-anim-d1\">\n <div class=\"pp-sc-icon\">🌐</div>\n <h3>Website &amp; Sichtbarkeit</h3>\n <span class=\"pp-sc-desc\">Für neue Websites, Relaunches und klare Strukturen, die Besucher überzeugen und von Suchmaschinen verstanden werden.</span>\n <!-- 🔗 LINK SETZEN: Website & Sichtbarkeit -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur Seite Website &amp; Sichtbarkeit setzen\" draggable=\"false\">Website klar strukturieren und sichtbar aufbauen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- SEO -->\n <div class=\"pp-service-card pp-anim pp-anim-d2\">\n <div class=\"pp-sc-icon\">🔍</div>\n <h3>SEO</h3>\n <span class=\"pp-sc-desc\">Für bessere Auffindbarkeit, passende Suchbegriffe, hilfreiche Inhalte und solide technische Grundlagen.</span>\n <!-- 🔗 LINK SETZEN: SEO-Seite -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur SEO-Seite setzen\" draggable=\"false\">SEO für kleine Unternehmen verständlich erklärt <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Google Unternehmensprofil -->\n <div class=\"pp-service-card pp-anim pp-anim-d3\">\n <div class=\"pp-sc-icon\">📍</div>\n <h3>Google Unternehmensprofil</h3>\n <span class=\"pp-sc-desc\">Für lokale Sichtbarkeit, Vertrauen und mehr Kontaktpunkte — direkt in der Google-Suche und auf Google Maps.</span>\n <!-- 🔗 LINK SETZEN: Google Profil -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur Google-Profil-Seite setzen\" draggable=\"false\">Google Unternehmensprofil optimieren <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Website-Check -->\n <div class=\"pp-service-card pp-anim pp-anim-d4\">\n <div class=\"pp-sc-icon\">✅</div>\n <h3>Website-Check</h3>\n <span class=\"pp-sc-desc\">Für Unternehmen, die wissen möchten, wo sie aktuell stehen — und was konkret verbessert werden kann.</span>\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website auf Sichtbarkeit, Struktur und Vertrauen prüfen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Website-Coaching -->\n <div class=\"pp-service-card pp-anim pp-anim-d5\">\n <div class=\"pp-sc-icon\">🎓</div>\n <h3>Website-Coaching</h3>\n <span class=\"pp-sc-desc\">Für Unternehmen, die ihre Website selbst pflegen und besser verstehen möchten — mit professioneller Begleitung.</span>\n <!-- 🔗 LINK SETZEN: Website-Coaching -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur Website-Coaching-Seite setzen\" draggable=\"false\">Website selbst pflegen und besser verstehen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n <!-- Pillar Page & Grounding Page -->\n <div class=\"pp-service-card pp-anim pp-anim-d6\">\n <div class=\"pp-sc-icon\">📄</div>\n <h3>Pillar Page &amp; Grounding Page</h3>\n <span class=\"pp-sc-desc\">Für Unternehmen, die ein Thema umfassend besetzen und für Google, KI und Nutzer klarer sichtbar werden möchten.</span>\n <!-- 🔗 LINK SETZEN: Grounding Page / Pillar Page Angebot -->\n <a href=\"#\" class=\"pp-sc-link\" title=\"Link zur Grounding Page / Pillar Page Angebot setzen\" draggable=\"false\">Pillar Page als zentrale Themenseite erstellen lassen <span class=\"pp-arrow\">→</span></a>\n </div>\n\n </div>\n\n <!-- Upcoming: Blog & Webinare -->\n <div class=\"pp-services-upcoming pp-anim pp-anim-d6\">\n <div class=\"pp-su-icon\">💡</div>\n <div class=\"pp-su-content\">\n <span class=\"pp-su-label\">Wissen &amp; Impulse</span>\n <span class=\"pp-su-text\">In meinem Blog und in Webinaren teile ich regelmäßig Tipps, Einblicke und praktische Anleitungen rund um Website, SEO, Google und KI-Sichtbarkeit.</span>\n <div class=\"pp-su-links\">\n <!-- 🔗 LINK SETZEN: Blog / Impulse -->\n <a href=\"#\" class=\"pp-su-link\" title=\"Link zum Blog / Impulse setzen\" draggable=\"false\">Tipps zu SEO, Google, KI und Online-Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n <!-- 🔗 LINK SETZEN: Termine / Webinare -->\n <a href=\"#\" class=\"pp-su-link\" title=\"Link zu Termine / Webinare setzen\" draggable=\"false\">Aktuelle Webinare zu Website, SEO und Sichtbarkeit <span class=\"pp-arrow\">→</span></a>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n\n<div class=\"pp-section pp-section--faq\">\n <div class=\"pp-section-inner\">\n\n <h2 class=\"pp-anim\">Häufige Fragen zur Online-Sichtbarkeit</h2>\n <span class=\"pp-faq-intro pp-anim pp-anim-d1\">Hier finden Sie Antworten auf die wichtigsten Fragen rund um SEO, KI-Sichtbarkeit, Pillar Pages und Website-Struktur.</span>\n\n <div class=\"pp-faq-list\">\n\n <!-- FAQ 1 -->\n <div class=\"pp-faq-item pp-anim pp-anim-d1\">\n <button class=\"pp-faq-question\" aria-expanded=\"false\" aria-controls=\"pp-faq-a1\">\n <span class=\"pp-faq-icon\">?</span>\n <span class=\"pp-faq-q-text\">Was ist eine Pillar Page?</span>\n <span class=\"pp-faq-chevron\">▾</span>\n </button>\n <div class=\"pp-faq-answer\" id=\"pp-faq-a1\" role=\"region\">\n <div class=\"pp-faq-answer-inner\">\n <span class=\"pp-faq-a-text\">Eine Pillar Page ist eine zentrale Übersichtsseite zu einem wichtigen Thema. Sie erklärt das Thema umfassend und verlinkt auf passende Detailseiten, Blogbeiträge oder Angebote. Damit hilft sie sowohl Nutzern als auch Suchmaschinen, die Zusammenhänge Ihrer Inhalte zu verstehen.</span>\n </div>\n </div>\n </div>\n\n <!-- FAQ 2 -->\n <div class=\"pp-faq-item pp-anim pp-anim-d2\">\n <button class=\"pp-faq-question\" aria-expanded=\"false\" aria-controls=\"pp-faq-a2\">\n <span class=\"pp-faq-icon\">?</span>\n <span class=\"pp-faq-q-text\">Was ist der Unterschied zwischen SEO und KI-Sichtbarkeit?</span>\n <span class=\"pp-faq-chevron\">▾</span>\n </button>\n <div class=\"pp-faq-answer\" id=\"pp-faq-a2\" role=\"region\">\n <div class=\"pp-faq-answer-inner\">\n <span class=\"pp-faq-a-text\">SEO konzentriert sich auf klassische Suchmaschinenoptimierung — also darauf, in den Google-Ergebnissen besser platziert zu werden. KI-Sichtbarkeit geht einen Schritt weiter und fragt: Sind die Inhalte so klar, hilfreich und strukturiert, dass sie auch in KI-gestützten Suchsystemen wie Google AI Overviews oder ChatGPT verstanden und als Quelle berücksichtigt werden können?</span>\n </div>\n </div>\n </div>\n\n <!-- FAQ 3 -->\n <div class=\"pp-faq-item pp-anim pp-anim-d2\">\n <button class=\"pp-faq-question\" aria-expanded=\"false\" aria-controls=\"pp-faq-a3\">\n <span class=\"pp-faq-icon\">?</span>\n <span class=\"pp-faq-q-text\">Braucht jedes Unternehmen eine Pillar Page?</span>\n <span class=\"pp-faq-chevron\">▾</span>\n </button>\n <div class=\"pp-faq-answer\" id=\"pp-faq-a3\" role=\"region\">\n <div class=\"pp-faq-answer-inner\">\n <span class=\"pp-faq-a-text\">Nicht jedes Unternehmen braucht sofort eine Pillar Page. Sinnvoll ist sie besonders dann, wenn ein Thema zentral für die eigene Sichtbarkeit ist — zum Beispiel Website, Google Profil, Ferienwohnung buchen, Kosmetikbehandlungen oder Handwerksleistungen. Eine Pillar Page stärkt Ihre thematische Autorität und macht Ihre Inhalte besser auffindbar.</span>\n </div>\n </div>\n </div>\n\n <!-- FAQ 4 -->\n <div class=\"pp-faq-item pp-anim pp-anim-d3\">\n <button class=\"pp-faq-question\" aria-expanded=\"false\" aria-controls=\"pp-faq-a4\">\n <span class=\"pp-faq-icon\">?</span>\n <span class=\"pp-faq-q-text\">Warum reichen einzelne Leistungsseiten nicht mehr aus?</span>\n <span class=\"pp-faq-chevron\">▾</span>\n </button>\n <div class=\"pp-faq-answer\" id=\"pp-faq-a4\" role=\"region\">\n <div class=\"pp-faq-answer-inner\">\n <span class=\"pp-faq-a-text\">Einzelne Leistungsseiten erklären oft nur ein Angebot. Eine Pillar Page verbindet die wichtigsten Informationen, beantwortet typische Fragen und zeigt Suchmaschinen besser, wofür eine Website fachlich steht. So entsteht ein zusammenhängendes Bild — statt isolierter Einzelseiten.</span>\n </div>\n </div>\n </div>\n\n <!-- FAQ 5 -->\n <div class=\"pp-faq-item pp-anim pp-anim-d3\">\n <button class=\"pp-faq-question\" aria-expanded=\"false\" aria-controls=\"pp-faq-a5\">\n <span class=\"pp-faq-icon\">?</span>\n <span class=\"pp-faq-q-text\">Wie lange dauert es, bis bessere Inhalte Wirkung zeigen?</span>\n <span class=\"pp-faq-chevron\">▾</span>\n </button>\n <div class=\"pp-faq-answer\" id=\"pp-faq-a5\" role=\"region\">\n <div class=\"pp-faq-answer-inner\">\n <span class=\"pp-faq-a-text\">Das hängt von der Ausgangslage, dem Wettbewerb, der Technik, den Inhalten und der Pflege ab. Wichtig ist: Sichtbarkeit entsteht heute meist nicht durch eine einzelne Maßnahme, sondern durch eine klare Struktur und regelmäßige Weiterentwicklung. Erste Verbesserungen können nach wenigen Wochen sichtbar sein, nachhaltige Ergebnisse brauchen oft einige Monate.</span>\n </div>\n </div>\n </div>\n\n </div>\n\n </div>\n</div>\n\n<div class=\"pp-section pp-section--cta\">\n <div class=\"pp-section-inner\">\n <div class=\"pp-cta-inner\">\n\n <div class=\"pp-cta-accent pp-anim\">🚀</div>\n\n <h2 class=\"pp-anim pp-anim-d1\">Möchten Sie wissen, wie sichtbar Ihre Website heute wirklich ist?</h2>\n\n <div class=\"pp-cta-divider pp-anim pp-anim-d2\"></div>\n\n <span class=\"pp-cta-text pp-anim pp-anim-d2\">Dann ist ein Website-Check ein guter erster Schritt. Ich prüfe, ob Ihre Website klar aufgebaut ist, ob wichtige Inhalte fehlen, wie gut Nutzer geführt werden und wo Potenzial für SEO, Google und KI-Sichtbarkeit liegt.</span>\n\n <div class=\"pp-cta-buttons pp-anim pp-anim-d3\">\n <!-- 🔗 LINK SETZEN: Website-Check -->\n <a href=\"#\" class=\"pp-cta-btn pp-cta-btn--primary\" title=\"Link zum Website-Check setzen\" draggable=\"false\">Website-Check anfragen →</a>\n <!-- 🔗 LINK SETZEN: Kontakt / Termin -->\n <a href=\"#\" class=\"pp-cta-btn pp-cta-btn--outline\" title=\"Link zu Kontakt / Termin setzen\" draggable=\"false\">Kostenloses Erstgespräch vereinbaren</a>\n </div>\n\n <div class=\"pp-cta-trust pp-anim pp-anim-d4\">\n <div class=\"pp-cta-trust-item\">\n <span class=\"pp-cta-trust-icon\">✓</span>\n <span>Unverbindlich &amp; kostenlos</span>\n </div>\n <div class=\"pp-cta-trust-item\">\n <span class=\"pp-cta-trust-icon\">✓</span>\n <span>Persönliche Beratung</span>\n </div>\n <div class=\"pp-cta-trust-item\">\n <span class=\"pp-cta-trust-icon\">✓</span>\n <span>Klar &amp; verständlich</span>\n </div>\n </div>\n\n </div>\n </div>\n</div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n var animEls = el.querySelectorAll('.pp-section--webdesign .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n animEls.forEach(function(item) { observer.observe(item); });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n var animEls = el.querySelectorAll('.pp-section--relaunch .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n animEls.forEach(function(item) { observer.observe(item); });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var hero = el.querySelector('.pp-hero');\n if (!hero) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n\n observer.observe(hero);\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--pillars .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var hero = el.querySelector('.pp-hero');\n if (!hero) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n\n observer.observe(hero);\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--pillars .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var hero = el.querySelector('.pp-hero');\n if (!hero) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n\n observer.observe(hero);\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--pillars .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--audience .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var hero = el.querySelector('.pp-hero');\n if (!hero) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n\n observer.observe(hero);\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--pillars .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--audience .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--problems .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var hero = el.querySelector('.pp-hero');\n if (!hero) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n\n observer.observe(hero);\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--pillars .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--audience .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--problems .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--method .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var hero = el.querySelector('.pp-hero');\n if (!hero) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n\n observer.observe(hero);\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--pillars .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--audience .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--problems .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--method .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--services .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var hero = el.querySelector('.pp-hero');\n if (!hero) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n\n observer.observe(hero);\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--pillars .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--audience .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--problems .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--method .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--services .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var faqItems = el.querySelectorAll('.pp-faq-item');\n if (!faqItems.length) return;\n\n faqItems.forEach(function(item) {\n var btn = item.querySelector('.pp-faq-question');\n var answer = item.querySelector('.pp-faq-answer');\n if (!btn || !answer) return;\n\n btn.addEventListener('click', function() {\n var isOpen = item.classList.contains('is-open');\n\n // Close all other items\n faqItems.forEach(function(other) {\n if (other !== item && other.classList.contains('is-open')) {\n other.classList.remove('is-open');\n var otherBtn = other.querySelector('.pp-faq-question');\n var otherAnswer = other.querySelector('.pp-faq-answer');\n if (otherBtn) otherBtn.setAttribute('aria-expanded', 'false');\n if (otherAnswer) otherAnswer.style.maxHeight = '0';\n }\n });\n\n // Toggle current item\n if (isOpen) {\n item.classList.remove('is-open');\n btn.setAttribute('aria-expanded', 'false');\n answer.style.maxHeight = '0';\n } else {\n item.classList.add('is-open');\n btn.setAttribute('aria-expanded', 'true');\n answer.style.maxHeight = answer.scrollHeight + 'px';\n }\n });\n\n btn.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n btn.click();\n }\n });\n });\n\n // Scroll animations for FAQ section\n var animEls = el.querySelectorAll('.pp-section--faq .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var hero = el.querySelector('.pp-hero');\n if (!hero) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n\n observer.observe(hero);\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--pillars .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--audience .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--problems .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--method .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--services .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var faqItems = el.querySelectorAll('.pp-faq-item');\n if (!faqItems.length) return;\n\n faqItems.forEach(function(item) {\n var btn = item.querySelector('.pp-faq-question');\n var answer = item.querySelector('.pp-faq-answer');\n if (!btn || !answer) return;\n\n btn.addEventListener('click', function() {\n var isOpen = item.classList.contains('is-open');\n\n // Close all other items\n faqItems.forEach(function(other) {\n if (other !== item && other.classList.contains('is-open')) {\n other.classList.remove('is-open');\n var otherBtn = other.querySelector('.pp-faq-question');\n var otherAnswer = other.querySelector('.pp-faq-answer');\n if (otherBtn) otherBtn.setAttribute('aria-expanded', 'false');\n if (otherAnswer) otherAnswer.style.maxHeight = '0';\n }\n });\n\n // Toggle current item\n if (isOpen) {\n item.classList.remove('is-open');\n btn.setAttribute('aria-expanded', 'false');\n answer.style.maxHeight = '0';\n } else {\n item.classList.add('is-open');\n btn.setAttribute('aria-expanded', 'true');\n answer.style.maxHeight = answer.scrollHeight + 'px';\n }\n });\n\n btn.addEventListener('keydown', function(e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n btn.click();\n }\n });\n });\n\n // Scroll animations for FAQ section\n var animEls = el.querySelectorAll('.pp-section--faq .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.1, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-bee4e339-6f7b-4533-abc3-7ba7b7319ef2');\n if (!el) return;\n\n var animEls = el.querySelectorAll('.pp-section--cta .pp-anim:not(.is-visible)');\n if (!animEls.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15, rootMargin: '0px 0px -40px 0px' });\n\n animEls.forEach(function(item) {\n observer.observe(item);\n });\n})();\n</script>","summary":"The user requested a comprehensive Pillar Page titled \"Sichtbar werden im KI-Zeitalter\" (Visible in the AI era) for a web design/SEO consultancy targeting small businesses, built section-by-section using their existing color palette (orange accent #f69c1e, dark #2e2e2e, white #fff) with Unsplash stock photos and placeholder links marked with 🔗 title attributes. The page has been built through 10 parts so far: (1) cinematic hero with badge, H1, subline, intro text, dual CTAs and scroll indicator; (2) text-image split explaining changing search landscape with highlight box; (3) five numbered pillar cards on dark background for website structure, SEO, content, Google profile, and AI/GEO visibility; (4) three-column definition cards for SEO/GEO/KI-Sichtbarkeit with takeaway box; (5) checklist grid with motto quote and Google recommendation note on dark background; (6) six target audience cards with emoji icons on light background; (7) nine problem items with ✕ icons in two-column grid plus CTA bar linking to website check; (8) four-step vertical timeline (Analyse→Strategie→Umsetzung→Weiterentwicklung) with keyword tags; (9) six service cards with links plus \"Wissen & Impulse\" box for blog/webinars. All sections alternate between light and dark backgrounds, feature IntersectionObserver scroll-in animations with staggered delays, hover effects (translateY, border-color changes), 12px border-radius cards, and full responsiveness including dark/light theme overrides. The user has now requested Abschnitt 10 (FAQ accordion) and Abschnitt 11 (closing CTA) still remains to be built.","version":1,"inserted_version":1,"total_cost":48.948416054999996,"total_messages_sent":33,"summarized_at_total":24}