{"uuid":"55c20d09-7c4d-4a5e-bd23-bddc1898c3b1","provider":"wsw-nova","model":"sirius","image_strategy":"generate_gemini:nano","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 {\n font-family: inherit;\n box-sizing: border-box;\n background: transparent;\n padding: clamp(3rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);\n overflow: hidden;\n position: relative;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 *,\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 *::before,\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: clamp(2rem, 5vw, 5rem);\n align-items: center;\n max-width: 1280px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n }\n\n /* LEFT — Text area */\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-text {\n display: flex;\n flex-direction: column;\n gap: 2rem;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-label {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: #025B13;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-label::before {\n content: '';\n display: inline-block;\n width: 2rem;\n height: 1px;\n background: #025B13;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-heading {\n font-size: clamp(1.8rem, 4vw, 2.8rem);\n line-height: 1.2;\n color: #ffffff;\n font-weight: 700;\n margin: 0;\n letter-spacing: -0.01em;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-heading .highlight {\n color: #2ecc71;\n position: relative;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-heading .highlight::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n width: 100%;\n height: 2px;\n background: linear-gradient(90deg, #025B13, rgba(2, 91, 19, 0));\n border-radius: 1px;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-desc {\n color: rgba(255, 255, 255, 0.6);\n line-height: 1.65;\n max-width: 48ch;\n margin: 0;\n font-size: 1.05rem;\n }\n\n /* Feature list */\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .feature-list {\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n list-style: none;\n padding: 0;\n margin: 0.5rem 0 0 0;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .feature-item {\n display: flex;\n gap: 1rem;\n align-items: flex-start;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .feature-icon {\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n border-radius: 10px;\n background: rgba(2, 91, 19, 0.12);\n border: 1px solid rgba(2, 91, 19, 0.2);\n display: flex;\n align-items: center;\n justify-content: center;\n color: #2ecc71;\n font-size: 1.1rem;\n margin-top: 2px;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .feature-content {\n display: flex;\n flex-direction: column;\n gap: 0.2rem;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .feature-title {\n color: #ffffff;\n font-weight: 600;\n font-size: 0.95rem;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .feature-sub {\n color: rgba(255, 255, 255, 0.45);\n font-size: 0.85rem;\n line-height: 1.5;\n }\n\n /* CTA Button */\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-cta {\n display: inline-flex;\n align-items: center;\n gap: 0.6rem;\n padding: 0.9rem 1.75rem;\n background: #025B13;\n color: #ffffff;\n border: none;\n border-radius: 10px;\n font-size: 0.95rem;\n font-weight: 600;\n cursor: pointer;\n text-decoration: none;\n transition: background 0.25s ease-out, box-shadow 0.25s ease-out, transform 0.2s ease-out;\n align-self: flex-start;\n position: relative;\n overflow: hidden;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-cta::before {\n content: '';\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(255,255,255,0.08), transparent);\n opacity: 0;\n transition: opacity 0.25s ease-out;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-cta:hover {\n background: #037a1a;\n box-shadow: 0 0 24px rgba(2, 91, 19, 0.4), 0 4px 16px rgba(0,0,0,0.3);\n transform: translateY(-2px);\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-cta:hover::before {\n opacity: 1;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-cta:focus-visible {\n outline: 2px solid #2ecc71;\n outline-offset: 3px;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-cta .arrow-icon {\n transition: transform 0.2s ease-out;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-cta:hover .arrow-icon {\n transform: translateX(3px);\n }\n\n /* RIGHT — Dashboard Card */\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-visual {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .dashboard-card {\n width: 100%;\n max-width: 480px;\n background: linear-gradient(160deg, #163328 0%, #112119 100%);\n border-radius: 20px;\n border: 1px solid rgba(2, 91, 19, 0.15);\n padding: clamp(1.5rem, 3vw, 2.25rem);\n position: relative;\n overflow: hidden;\n transition: box-shadow 0.3s ease-out, transform 0.3s ease-out;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .dashboard-card:hover {\n box-shadow: 0 8px 40px rgba(2, 91, 19, 0.15), 0 0 60px rgba(2, 91, 19, 0.05);\n transform: translateY(-4px);\n }\n\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .dashboard-card::before {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n height: 45%;\n background: linear-gradient(to top, rgba(2, 91, 19, 0.04) 0%, transparent 100%);\n pointer-events: none;\n }\n\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .dash-header {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n margin-bottom: 1.5rem;\n position: relative;\n z-index: 1;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .dash-label {\n font-size: 0.65rem;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n color: #2ecc71;\n font-weight: 700;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .dash-text {\n color: rgba(255, 255, 255, 0.75);\n font-size: 0.9rem;\n line-height: 1.6;\n max-width: 38ch;\n }\n\n /* Chart SVG */\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .chart-area {\n position: relative;\n z-index: 1;\n margin-bottom: 1.5rem;\n padding: 0.5rem 0;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .chart-svg {\n width: 100%;\n height: auto;\n display: block;\n }\n\n /* Stats row */\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .stats-row {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1rem;\n position: relative;\n z-index: 1;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .stat-card {\n background: rgba(255, 255, 255, 0.03);\n border: 1px solid rgba(2, 91, 19, 0.12);\n border-radius: 14px;\n padding: 1.15rem 1rem;\n display: flex;\n flex-direction: column;\n gap: 0.35rem;\n transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .stat-card:hover {\n border-color: rgba(2, 91, 19, 0.3);\n box-shadow: 0 0 20px rgba(2, 91, 19, 0.08);\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .stat-label {\n font-size: 0.7rem;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: rgba(255, 255, 255, 0.4);\n font-weight: 500;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .stat-row {\n display: flex;\n align-items: baseline;\n gap: 0.4rem;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .stat-value {\n font-size: 1.6rem;\n font-weight: 700;\n color: #ffffff;\n letter-spacing: -0.02em;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .stat-badge {\n display: inline-flex;\n align-items: center;\n gap: 0.15rem;\n font-size: 0.7rem;\n font-weight: 600;\n color: #2ecc71;\n background: rgba(2, 91, 19, 0.15);\n padding: 0.15rem 0.45rem;\n border-radius: 6px;\n }\n\n /* Scroll animations */\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .anim-fade {\n opacity: 0;\n transform: translateY(28px);\n transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .anim-fade.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .anim-delay-1 { transition-delay: 0.1s; }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .anim-delay-2 { transition-delay: 0.2s; }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .anim-delay-3 { transition-delay: 0.35s; }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .anim-delay-4 { transition-delay: 0.5s; }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .anim-delay-5 { transition-delay: 0.65s; }\n\n /* Reduced motion */\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 *,\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 *::before,\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .anim-fade {\n opacity: 1;\n transform: none;\n }\n }\n\n /* Responsive */\n @media (max-width: 900px) {\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-inner {\n grid-template-columns: 1fr;\n gap: 3rem;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-visual {\n justify-content: stretch;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .dashboard-card {\n max-width: 100%;\n }\n }\n @media (max-width: 480px) {\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 {\n padding: 2.5rem 1.25rem;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .stats-row {\n grid-template-columns: 1fr;\n }\n #wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1 .hero-cta {\n width: 100%;\n justify-content: center;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1\">\n <div class=\"hero-inner\">\n\n <!-- LEFT — Text -->\n <div class=\"hero-text\">\n <span class=\"hero-label anim-fade is-visible\">Unsere ARBEITSWEISE</span>\n\n <h1 class=\"hero-heading anim-fade anim-delay-1 is-visible\">Wir bauen Systeme, die <span class=\"highlight\">Kunden bringen.</span></h1>\n\n <span class=\"hero-desc anim-fade anim-delay-2 is-visible\">Marketing, Technik und Struktur gehören für uns<br>zusammen. Wenn etwas nicht funktioniert, wird es gelöst.</span>\n\n <ul class=\"feature-list anim-fade anim-delay-3 is-visible\">\n <li class=\"feature-item\">\n <div class=\"feature-icon\">◎</div>\n <div class=\"feature-content\">\n <span class=\"feature-title\">Strategie mit Fokus</span>\n <span class=\"feature-sub\">Klare Ziele. Klare Maßnahmen. Klare Ergebnisse.</span>\n </div>\n </li>\n <li class=\"feature-item\">\n <div class=\"feature-icon\">⚙</div>\n <div class=\"feature-content\">\n <span class=\"feature-title\">Technik, die funktioniert</span>\n <span class=\"feature-sub\">Wir baue stabile Systeme, auf die du dich verlassen kannst.</span>\n </div>\n </li>\n <li class=\"feature-item\">\n <div class=\"feature-icon\">▲</div>\n <div class=\"feature-content\">\n <span class=\"feature-title\">Wachstum durch Struktur</span>\n <span class=\"feature-sub\">Mehr Anfragen, bessere Prozesse, nachhaltige Ergebnisse.</span>\n </div>\n </li>\n </ul>\n\n <a href=\"https://somdia.de/Leistungen\" class=\"hero-cta anim-fade anim-delay-4 is-visible\" draggable=\"false\">\n <span>Mehr über unsere Leistungen</span>\n <span class=\"arrow-icon\">→</span>\n </a>\n </div>\n\n <!-- RIGHT — Dashboard Card -->\n <div class=\"hero-visual anim-fade anim-delay-5 is-visible\">\n <div class=\"dashboard-card\">\n <div class=\"dash-header\">\n <span class=\"dash-label\">MESSBARE ERGEBNISSE</span>\n <span class=\"dash-text\">Deine Aufrufe auf Instagram sind im ausgewählten Zeitraum um 772 % gestiegen.</span>\n </div>\n\n <div class=\"chart-area\">\n <svg class=\"chart-svg\" viewBox=\"0 0 400 100\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <defs>\n <linearGradient id=\"chartGrad\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n <stop offset=\"0%\" stop-color=\"#025B13\" stop-opacity=\"0.3\"></stop>\n <stop offset=\"100%\" stop-color=\"#025B13\" stop-opacity=\"0\"></stop>\n </linearGradient>\n <linearGradient id=\"lineGrad\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\">\n <stop offset=\"0%\" stop-color=\"#025B13\"></stop>\n <stop offset=\"100%\" stop-color=\"#2ecc71\"></stop>\n </linearGradient>\n </defs>\n <path d=\"M0 85 Q30 82 60 78 T120 65 T180 50 T240 30 T300 22 T360 12 L400 8 L400 100 L0 100 Z\" fill=\"url(#chartGrad)\"></path>\n <path d=\"M0 85 Q30 82 60 78 T120 65 T180 50 T240 30 T300 22 T360 12 L400 8\" stroke=\"url(#lineGrad)\" stroke-width=\"2.5\" stroke-linecap=\"round\" fill=\"none\"></path>\n <circle cx=\"400\" cy=\"8\" r=\"4\" fill=\"#2ecc71\" opacity=\"0.8\"></circle>\n <circle cx=\"400\" cy=\"8\" r=\"8\" fill=\"#2ecc71\" opacity=\"0.2\"></circle>\n </svg>\n </div>\n\n <div class=\"stats-row\">\n <div class=\"stat-card\">\n <span class=\"stat-label\">Aufrufe</span>\n <div class=\"stat-row\">\n <span class=\"stat-value counter\" data-target=\"772\">772</span>\n <span class=\"stat-badge\">↑ %</span>\n </div>\n </div>\n <div class=\"stat-card\">\n <span class=\"stat-label\">Interaktionen</span>\n <div class=\"stat-row\">\n <span class=\"stat-value\">32,2 Tsd.</span>\n <span class=\"stat-badge\">↑ %</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n\n var el = document.getElementById('wsw-snippet-55c20d09-7c4d-4a5e-bd23-bddc1898c3b1');\n if (!el) return;\n\n /* Scroll-triggered fade-in */\n var animEls = el.querySelectorAll('.anim-fade');\n if ('IntersectionObserver' in window) {\n var obs = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n obs.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n animEls.forEach(function(a) { obs.observe(a); });\n } else {\n animEls.forEach(function(a) { a.classList.add('is-visible'); });\n }\n\n /* Animated counter */\n var counterEl = el.querySelector('.counter');\n if (!counterEl) return;\n var target = parseInt(counterEl.getAttribute('data-target'), 10);\n var counted = false;\n\n function animateCounter() {\n if (counted) return;\n counted = true;\n var duration = 1800;\n var startTime = null;\n function step(ts) {\n if (!startTime) startTime = ts;\n var progress = Math.min((ts - startTime) / duration, 1);\n var eased = 1 - Math.pow(1 - progress, 3);\n counterEl.textContent = Math.floor(eased * target);\n if (progress < 1) {\n requestAnimationFrame(step);\n } else {\n counterEl.textContent = target;\n }\n }\n requestAnimationFrame(step);\n }\n\n if ('IntersectionObserver' in window) {\n var cObs = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n animateCounter();\n cObs.unobserve(entry.target);\n }\n });\n }, { threshold: 0.5 });\n cObs.observe(counterEl);\n } else {\n animateCounter();\n }\n\n})();\n</script>","summary":null,"version":4,"inserted_version":4,"total_cost":2.1871449600000004,"total_messages_sent":5,"summarized_at_total":0}

{"uuid":"d37daba5-a57d-46e1-9c2f-d6a2cb5537d9","provider":"wsw-nova","model":"vega","image_strategy":"ai_self_select","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 {\n font-family: inherit;\n box-sizing: border-box;\n background-color: #112119;\n padding: 0 clamp(1.5rem, 5vw, 4rem);\n overflow: hidden;\n position: relative;\n }\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 *,\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 *::before,\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 *::after {\n box-sizing: inherit;\n }\n\n /* --- Ambient glow --- */\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 500px;\n height: 500px;\n background: radial-gradient(circle, rgba(2, 91, 19, 0.1) 0%, transparent 70%);\n transform: translate(-50%, -50%);\n pointer-events: none;\n z-index: 0;\n }\n\n /* --- Layout --- */\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n max-width: 720px;\n margin: 0 auto;\n position: relative;\n z-index: 1;\n }\n\n /* --- Tag / Kicker --- */\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-tag {\n display: inline-block;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.2em;\n text-transform: uppercase;\n color: #49d66a;\n background: rgba(2, 91, 19, 0.18);\n border: 1px solid rgba(2, 91, 19, 0.35);\n border-radius: 100px;\n padding: 0.4rem 1.1rem;\n margin-bottom: 1.5rem;\n }\n\n /* --- Heading --- */\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-heading {\n color: #ffffff;\n font-size: clamp(1.6rem, 3vw, 2.2rem);\n line-height: 1.3;\n margin: 0 0 1.5rem 0;\n font-weight: 700;\n }\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-heading .highlight {\n color: #49d66a;\n }\n\n /* --- Body text --- */\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-body {\n color: rgba(255, 255, 255, 0.72);\n line-height: 1.7;\n font-size: clamp(1rem, 1.5vw, 1.525rem);\n margin: 0 0 2rem 0;\n max-width: 580px;\n }\n\n /* --- Feature points --- */\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-features {\n display: flex;\n gap: 0.85rem;\n flex-wrap: wrap;\n justify-content: center;\n margin: 0 0 2rem 0;\n list-style: none;\n padding: 0;\n }\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-features li {\n display: flex;\n align-items: center;\n gap: 0.65rem;\n background: #163328;\n border: 1px solid rgba(2, 91, 19, 0.2);\n border-radius: 10px;\n padding: 0.65rem 1.1rem;\n color: rgba(255, 255, 255, 0.88);\n font-size: clamp(0.9rem, 1.2vw, 1.2rem);\n font-weight: 500;\n transition: border-color 0.25s ease-out, box-shadow 0.25s ease-out;\n }\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-features li:hover {\n border-color: rgba(2, 91, 19, 0.5);\n box-shadow: 0 0 16px rgba(2, 91, 19, 0.12);\n }\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-features li .feat-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 30px;\n height: 30px;\n border-radius: 7px;\n background: rgba(2, 91, 19, 0.22);\n color: #49d66a;\n font-size: 0.95rem;\n flex-shrink: 0;\n }\n\n /* --- Button --- */\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-cta {\n display: inline-flex;\n align-items: center;\n gap: 0.6rem;\n padding: 0.85rem 1.75rem;\n background: #025B13;\n color: #ffffff;\n font-size: clamp(0.95rem, 1.2vw, 1.2rem);\n font-weight: 600;\n text-decoration: none;\n border-radius: 10px;\n border: none;\n cursor: pointer;\n transition: background-color 0.25s ease-out, box-shadow 0.25s ease-out, transform 0.2s ease-out;\n }\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-cta:hover {\n background: #03801b;\n box-shadow: 0 0 24px rgba(2, 91, 19, 0.45), 0 0 60px rgba(2, 91, 19, 0.15);\n transform: translateY(-2px);\n }\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-cta:focus-visible {\n outline: 2px solid #49d66a;\n outline-offset: 3px;\n }\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-cta:active {\n transform: translateY(0);\n }\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-cta .arrow-icon {\n transition: transform 0.25s ease-out;\n }\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-cta:hover .arrow-icon {\n transform: translateX(3px);\n }\n\n /* --- Animations --- */\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .anim-fade-up {\n opacity: 0;\n transform: translateY(32px);\n transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);\n }\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .anim-fade-up.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n /* --- Responsive --- */\n @media (max-width: 768px) {\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-features {\n flex-direction: column;\n align-items: center;\n }\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .about-body {\n max-width: 100%;\n }\n }\n\n /* --- Reduced motion --- */\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 *,\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 *::before,\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n #wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9 .anim-fade-up {\n opacity: 1;\n transform: none;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9\">\n <div class=\"about-wrapper anim-fade-up is-visible\">\n\n <span class=\"about-tag\">Wer bin ich</span>\n <h2 class=\"about-heading\">Ich baue <span class=\"highlight\">Systeme</span>, die <span class=\"highlight\">Ergebnisse</span> bringen.</h2>\n <div class=\"about-body\">\n <span>Ich bin Marvin, Gründer von Somdia.</span><br>\n <span>Ich begleite Projekte persönlich und kombiniere Marketing, Technik und Struktur zu einem System, das funktioniert.</span>\n <br><br>\n <span>Du arbeitest direkt mit mir<br>ohne Umwege, ohne leere Versprechen.</span>\n </div>\n\n <ul class=\"about-features\">\n <li>\n <span class=\"feat-icon\" aria-hidden=\"true\">✦</span>\n <span>Persönliche Betreuung</span>\n </li>\n <li>\n <span class=\"feat-icon\" aria-hidden=\"true\">◈</span>\n <span>Klare Strategien</span>\n </li>\n <li>\n <span class=\"feat-icon\" aria-hidden=\"true\">▲</span>\n <span>Messbare Ergebnisse</span>\n </li>\n </ul>\n\n <a href=\"https://somdia.de/%C3%9Cber%20Somdia\" class=\"about-cta\" draggable=\"false\">\n <span>Mehr über Somdia</span>\n <span class=\"arrow-icon\" aria-hidden=\"true\">→</span>\n </a>\n\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-d37daba5-a57d-46e1-9c2f-d6a2cb5537d9');\n if (!el) return;\n\n var targets = el.querySelectorAll('.anim-fade-up');\n if (!targets.length) return;\n\n if (!('IntersectionObserver' in window)) {\n targets.forEach(function(t) { t.classList.add('is-visible'); });\n return;\n }\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 targets.forEach(function(t) { observer.observe(t); });\n})();\n</script>","summary":null,"version":4,"inserted_version":4,"total_cost":1.026171146,"total_messages_sent":4,"summarized_at_total":0}