{"uuid":"d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6","provider":"wsw-nova","model":"sirius","image_strategy":"generate_gemini:nano_pro","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 {\n font-family: inherit;\n box-sizing: border-box;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 *,\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 *::before,\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 *::after {\n box-sizing: inherit;\n }\n\n /* ── Navigation ── */\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-bar {\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n z-index: 10;\n display: flex;\n align-items: center;\n justify-content: space-between;\n max-width: 1640px;\n margin: 0 auto;\n padding: 1.25rem 3rem;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-logo {\n display: flex;\n flex-direction: column;\n text-decoration: none;\n line-height: 1;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-logo-name {\n font-size: 1.6rem;\n font-weight: 800;\n color: #ffffff;\n text-transform: uppercase;\n letter-spacing: 0.08em;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-logo-tagline {\n font-size: 0.7rem;\n font-weight: 600;\n color: #B71723;\n text-transform: uppercase;\n letter-spacing: 0.15em;\n margin-top: 0.15rem;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-links {\n display: flex;\n align-items: center;\n gap: 2rem;\n list-style: none;\n margin: 0;\n padding: 0;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-links a {\n color: #ffffff;\n text-decoration: none;\n font-size: 0.9rem;\n font-weight: 500;\n letter-spacing: 0.02em;\n position: relative;\n padding-bottom: 0.25rem;\n transition: color 0.2s ease-out;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-links a::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 0;\n height: 2px;\n background-color: #B71723;\n transition: width 0.25s ease-out;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-links a:hover::after,\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-links a:focus-visible::after {\n width: 100%;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-links a:focus-visible {\n outline: 2px solid #B71723;\n outline-offset: 4px;\n border-radius: 2px;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-cta-link {\n background-color: #B71723;\n color: #ffffff !important;\n padding: 0.5rem 1.25rem !important;\n border-radius: 3px;\n font-weight: 600 !important;\n transition: background-color 0.2s ease-out, transform 0.2s ease-out !important;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-cta-link::after {\n display: none !important;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-cta-link:hover,\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-cta-link:focus-visible {\n background-color: #9e1420;\n transform: translateY(-1px);\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-mobile-toggle {\n display: none;\n flex-direction: column;\n gap: 5px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0.5rem;\n min-height: 44px;\n min-width: 44px;\n align-items: center;\n justify-content: center;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-mobile-toggle span {\n display: block;\n width: 24px;\n height: 2px;\n background-color: #ffffff;\n border-radius: 2px;\n transition: transform 0.3s ease-out, opacity 0.3s ease-out;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-mobile-toggle.is-open span:nth-child(1) {\n transform: translateY(7px) rotate(45deg);\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-mobile-toggle.is-open span:nth-child(2) {\n opacity: 0;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-mobile-toggle.is-open span:nth-child(3) {\n transform: translateY(-7px) rotate(-45deg);\n }\n\n /* ── Hero ── */\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-wrapper {\n position: relative;\n width: 100%;\n min-height: 100vh;\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-bg {\n position: absolute;\n inset: 0;\n z-index: 0;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-bg img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n display: block;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(135deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 60%, rgba(0,0,0,0.15) 100%);\n z-index: 1;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-content {\n position: relative;\n z-index: 2;\n width: 100%;\n max-width: 1640px;\n margin: 0 auto;\n padding: 6rem 3rem 4rem 3rem;\n opacity: 0;\n transform: translateY(30px);\n transition: opacity 0.8s ease-out, transform 0.8s ease-out;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-content.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-badge {\n display: inline-block;\n padding: 0.3rem 0.875rem;\n background-color: #B71723;\n color: #ffffff;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n border-radius: 2px;\n margin-bottom: 1rem;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-content h1 {\n color: #ffffff;\n font-size: clamp(1.5rem, 4vw, 2.8rem);\n font-weight: 700;\n line-height: 1.15;\n margin: 0 0 0.25rem 0;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-content .hero-company {\n display: block;\n color: #ffffff;\n font-size: clamp(1.5rem, 4vw, 2.8rem);\n font-weight: 700;\n line-height: 1.15;\n margin-bottom: 1rem;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-content .hero-subtitle {\n display: block;\n color: #ffffff;\n font-size: clamp(0.9rem, 1.5vw, 1.1rem);\n line-height: 1.6;\n margin-bottom: 1.5rem;\n max-width: 520px;\n opacity: 0.9;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-stats {\n display: flex;\n gap: 2rem;\n margin-bottom: 2rem;\n flex-wrap: wrap;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-stat-item {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-stat-number {\n display: block;\n font-size: clamp(1.3rem, 2.5vw, 2rem);\n font-weight: 700;\n color: #ffffff;\n line-height: 1.2;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-stat-label {\n display: block;\n font-size: 0.75rem;\n color: #ffffff;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n margin-top: 0.15rem;\n opacity: 0.8;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-cta-group {\n display: flex;\n gap: 0.75rem;\n flex-wrap: wrap;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-cta {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1.75rem;\n font-size: 0.9rem;\n font-weight: 600;\n text-decoration: none;\n border-radius: 3px;\n transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;\n cursor: pointer;\n border: none;\n min-height: 44px;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-cta-primary {\n background-color: #B71723;\n color: #ffffff;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-cta-primary:hover,\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-cta-primary:focus-visible {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(183, 23, 35, 0.45);\n background-color: #9e1420;\n outline: none;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-cta-secondary {\n background-color: transparent;\n color: #ffffff;\n border: 2px solid rgba(255,255,255,0.5);\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-cta-secondary:hover,\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-cta-secondary:focus-visible {\n background-color: rgba(255,255,255,0.1);\n border-color: rgba(255,255,255,0.8);\n transform: translateY(-2px);\n outline: none;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-cta .cta-arrow {\n display: inline-block;\n transition: transform 0.2s ease-out;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-cta:hover .cta-arrow {\n transform: translateX(3px);\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-scroll-indicator {\n position: absolute;\n bottom: 2rem;\n left: 50%;\n transform: translateX(-50%);\n z-index: 2;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 0.5rem;\n opacity: 0.6;\n transition: opacity 0.2s ease-out;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-scroll-indicator:hover {\n opacity: 1;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .scroll-line {\n width: 1px;\n height: 40px;\n background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0.8));\n animation: wswScrollPulse-d5fa4f0a 2s ease-in-out infinite;\n }\n\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .scroll-text {\n color: #ffffff;\n font-size: 0.7rem;\n text-transform: uppercase;\n letter-spacing: 0.15em;\n }\n\n @keyframes wswScrollPulse-d5fa4f0a {\n 0%, 100% { opacity: 0.4; transform: scaleY(1); }\n 50% { opacity: 1; transform: scaleY(1.2); }\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 *,\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 *::before,\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-content {\n opacity: 1;\n transform: none;\n }\n }\n\n /* Tablet */\n @media (max-width: 1024px) {\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-bar {\n padding: 1rem 2rem;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-content {\n padding: 5.5rem 2rem 3.5rem 2rem;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-stats {\n gap: 1.5rem;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-links {\n gap: 1.5rem;\n }\n }\n\n /* Mobil */\n @media (max-width: 768px) {\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-bar {\n padding: 1rem 1.25rem;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-mobile-toggle {\n display: flex;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-links {\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n flex-direction: column;\n background: rgba(0,0,0,0.95);\n padding: 1.5rem 1.25rem;\n gap: 1.25rem;\n align-items: flex-start;\n opacity: 0;\n transform: translateY(-10px);\n pointer-events: none;\n transition: opacity 0.3s ease-out, transform 0.3s ease-out;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-links.is-open {\n opacity: 1;\n transform: translateY(0);\n pointer-events: auto;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-wrapper {\n min-height: 100svh;\n align-items: flex-end;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-overlay {\n background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.8) 65%);\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-content {\n padding: 2rem 1.25rem 5rem 1.25rem;\n max-width: 100%;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-badge {\n font-size: 0.7rem;\n padding: 0.25rem 0.75rem;\n margin-bottom: 0.75rem;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-content .hero-subtitle {\n max-width: 100%;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-stats {\n gap: 1.25rem;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-cta-group {\n flex-direction: column;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-cta {\n justify-content: center;\n width: 100%;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-scroll-indicator {\n bottom: 1rem;\n }\n }\n\n /* Kleine Smartphones */\n @media (max-width: 480px) {\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-content {\n padding: 1.5rem 1rem 4.5rem 1rem;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-stats {\n gap: 1rem;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .hero-cta {\n padding: 0.65rem 1.25rem;\n font-size: 0.85rem;\n }\n #wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6 .nav-logo-name {\n font-size: 1.3rem;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6\">\n <div class=\"hero-wrapper\">\n <div class=\"hero-bg\">\n <img src=\"/s3/b/wsw.website.14978/public/images/pages/img-2050.webp?_36508.700000047684\" alt=\"Seibold Tank Logistik Fuhrpark – Scania Tankfahrzeuge mit rotem Tankboden auf dem Betriebshof\" draggable=\"false\">\n </div>\n <div class=\"hero-overlay\"></div>\n\n <nav class=\"nav-bar\" aria-label=\"Hauptnavigation\">\n <a href=\"/home\" class=\"nav-logo\" draggable=\"false\">\n <span class=\"nav-logo-name\">Seibold</span>\n <span class=\"nav-logo-tagline\">Tank Logistik</span>\n </a>\n <button class=\"nav-mobile-toggle\" aria-label=\"Menü öffnen\" aria-expanded=\"false\">\n <span></span>\n <span></span>\n <span></span>\n </button>\n <ul class=\"nav-links\">\n <li><a href=\"/home\" draggable=\"false\">Home</a></li>\n <li><a href=\"#leistungen\" draggable=\"false\">Leistungen</a></li>\n <li><a href=\"#ueber-uns\" draggable=\"false\">Über uns</a></li>\n <li><a href=\"#fuhrpark\" draggable=\"false\">Fuhrpark</a></li>\n <li><a href=\"#kontakt\" class=\"nav-cta-link\" draggable=\"false\">Kontakt</a></li>\n </ul>\n </nav>\n\n <div class=\"hero-content is-visible\">\n <span class=\"hero-badge\">Spezialisiert seit über 16 Jahren</span>\n <h1>Ihr Partner für Flüssigtransporte</h1>\n <span class=\"hero-company\">Seibold Tank Logistik</span>\n <span class=\"hero-subtitle\">Als kleine, spezialisierte Spedition bieten wir Ihnen persönlichen Service und höchste Zuverlässigkeit im Bereich Transport.</span>\n <div class=\"hero-stats\">\n <div class=\"hero-stat-item\">\n <span class=\"hero-stat-number\">16+</span>\n <span class=\"hero-stat-label\">Jahre Erfahrung</span>\n </div>\n <div class=\"hero-stat-item\">\n <span class=\"hero-stat-number\">4</span>\n <span class=\"hero-stat-label\">Eigene LKW</span>\n </div>\n <div class=\"hero-stat-item\">\n <span class=\"hero-stat-number\">100%</span>\n <span class=\"hero-stat-label\">Zuverlässigkeit</span>\n </div>\n </div>\n <div class=\"hero-cta-group\">\n <a href=\"#leistungen\" class=\"hero-cta hero-cta-primary\" draggable=\"false\">\n <span>Leistungen entdecken</span>\n <span class=\"cta-arrow\">→</span>\n </a>\n <a href=\"#kontakt\" class=\"hero-cta hero-cta-secondary\" draggable=\"false\">\n <span>Kontakt aufnehmen</span>\n </a>\n </div>\n </div>\n\n <div class=\"hero-scroll-indicator\">\n <div class=\"scroll-line\"></div>\n <span class=\"scroll-text\">Mehr erfahren</span>\n </div>\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-d5fa4f0a-2a54-49e4-bf6d-68d04591a7f6');\n if (!el) return;\n\n var content = el.querySelector('.hero-content');\n if (content) {\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 });\n observer.observe(content);\n }\n\n var toggle = el.querySelector('.nav-mobile-toggle');\n var navLinks = el.querySelector('.nav-links');\n if (toggle && navLinks) {\n toggle.addEventListener('click', function() {\n var isOpen = navLinks.classList.toggle('is-open');\n toggle.classList.toggle('is-open');\n toggle.setAttribute('aria-expanded', isOpen ? 'true' : 'false');\n toggle.setAttribute('aria-label', isOpen ? 'Menü schließen' : 'Menü öffnen');\n });\n }\n})();\n</script>","summary":"The user is building a hero section with navigation for \"Seibold Tank Logistik,\" a German tank logistics company website. The snippet features a full-viewport hero with a background photo of their fleet, a dark gradient overlay, and left-aligned white text content including a red #B71723 badge, heading (\"Ihr Partner für Flüssigtransporte\"), company name (\"Seibold Tank Logistik\") at matching size (clamp 1.5rem–2.8rem), subtitle, three stats (16+, 4, 100%), and two CTA buttons (primary red, secondary outlined). A responsive navigation bar sits absolutely positioned at the top with \"SEIBOLD\" as a text logo (white, uppercase) and \"Tank Logistik\" tagline in red, plus six menu links including a red \"Kontakt\" CTA button, collapsing to a hamburger menu on mobile. The content area is centered at max-width 1640px with four responsive breakpoints (1024px, 768px, 480px), all text is white, font sizes were reduced for MacBook compatibility, and the user has been iteratively swapping background images — the current src points to a PNG fleet photo, and they've just requested using a newly uploaded image instead.","version":12,"inserted_version":12,"total_cost":7.76793864,"total_messages_sent":14,"summarized_at_total":12}

{"uuid":"dc07bc98-632a-43a9-911e-0b8afc7c83c8","provider":"wsw-nova","model":"sirius","image_strategy":"generate_gemini:nano_pro","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 {\n font-family: inherit;\n box-sizing: border-box;\n }\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 *,\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 *::before,\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-wrapper {\n width: 100%;\n padding: 5rem 2rem;\n background: transparent;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-inner {\n max-width: 1640px;\n margin: 0 auto;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-header {\n text-align: center;\n margin-bottom: 4rem;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-label {\n display: inline-block;\n font-size: 0.8rem;\n font-weight: 600;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: #B71723;\n margin-bottom: 0.75rem;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-header h2 {\n color: var(--wsw-color-black, #1a1a1a);\n margin: 0 0 1rem 0;\n line-height: 1.2;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-header .services-desc {\n display: block;\n color: var(--wsw-color-black, #1a1a1a);\n line-height: 1.7;\n opacity: 0.6;\n max-width: 580px;\n margin: 0 auto;\n }\n\n section.wsw-theme-d #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-header h2,\n section.wsw-theme-db #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-header h2,\n section.wsw-theme-b #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-header h2,\n section.wsw-theme-bb #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-header h2 {\n color: var(--wsw-color-white, #ffffff);\n }\n\n section.wsw-theme-d #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-header .services-desc,\n section.wsw-theme-db #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-header .services-desc,\n section.wsw-theme-b #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-header .services-desc,\n section.wsw-theme-bb #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-header .services-desc {\n color: var(--wsw-color-white, #ffffff);\n }\n\n /* Grid: 3 columns */\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-grid {\n display: grid;\n grid-template-columns: 1fr 1fr 1fr;\n gap: 1.5rem;\n }\n\n /* Service cards */\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card {\n --card-radius: 12px;\n position: relative;\n padding: 2.5rem;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n border: 1px solid rgba(0,0,0,0.07);\n border-radius: var(--card-radius);\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease-out, border-color 0.3s ease-out;\n overflow: hidden;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card:hover {\n box-shadow: 0 16px 48px rgba(0,0,0,0.07);\n border-color: rgba(183,23,35,0.2);\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card.is-visible:hover {\n transform: translateY(-4px);\n }\n\n section.wsw-theme-d #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card,\n section.wsw-theme-db #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card,\n section.wsw-theme-b #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card,\n section.wsw-theme-bb #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card {\n border-color: rgba(255,255,255,0.1);\n }\n\n section.wsw-theme-d #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card:hover,\n section.wsw-theme-db #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card:hover,\n section.wsw-theme-b #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card:hover,\n section.wsw-theme-bb #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card:hover {\n border-color: rgba(183,23,35,0.35);\n box-shadow: 0 16px 48px rgba(0,0,0,0.3);\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-icon-wrap {\n width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(183,23,35,0.07);\n border-radius: 12px;\n margin-bottom: 1.5rem;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-icon-wrap svg {\n width: 28px;\n height: 28px;\n stroke: #B71723;\n fill: none;\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card h3 {\n color: var(--wsw-color-black, #1a1a1a);\n margin: 0 0 0.75rem 0;\n }\n\n section.wsw-theme-d #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card h3,\n section.wsw-theme-db #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card h3,\n section.wsw-theme-b #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card h3,\n section.wsw-theme-bb #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card h3 {\n color: var(--wsw-color-white, #ffffff);\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card .service-text {\n display: block;\n color: var(--wsw-color-black, #1a1a1a);\n opacity: 0.6;\n line-height: 1.7;\n margin-bottom: 2rem;\n flex-grow: 1;\n }\n\n section.wsw-theme-d #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card .service-text,\n section.wsw-theme-db #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card .service-text,\n section.wsw-theme-b #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card .service-text,\n section.wsw-theme-bb #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card .service-text {\n color: var(--wsw-color-white, #ffffff);\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-features {\n list-style: none;\n margin: 0;\n padding: 0;\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: 0.625rem;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-features li {\n display: flex;\n align-items: center;\n gap: 0.75rem;\n color: var(--wsw-color-black, #1a1a1a);\n opacity: 0.7;\n font-size: 0.95rem;\n }\n\n section.wsw-theme-d #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-features li,\n section.wsw-theme-db #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-features li,\n section.wsw-theme-b #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-features li,\n section.wsw-theme-bb #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-features li {\n color: var(--wsw-color-white, #ffffff);\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-features li .feat-line {\n width: 16px;\n height: 2px;\n background-color: #B71723;\n flex-shrink: 0;\n border-radius: 1px;\n }\n\n /* CTA Card */\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card {\n --card-radius: 12px;\n position: relative;\n padding: 2.5rem;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n justify-content: center;\n background-color: #B71723;\n border-radius: var(--card-radius);\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out, box-shadow 0.3s ease-out;\n overflow: hidden;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card:hover {\n box-shadow: 0 16px 48px rgba(183,23,35,0.3);\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card.is-visible:hover {\n transform: translateY(-4px);\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-icon-wrap {\n width: 56px;\n height: 56px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: rgba(255,255,255,0.15);\n border-radius: 12px;\n margin-bottom: 1.5rem;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-icon-wrap svg {\n width: 28px;\n height: 28px;\n stroke: #ffffff;\n fill: none;\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card h3 {\n color: #ffffff;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card .cta-text {\n display: block;\n color: #ffffff;\n opacity: 0.85;\n line-height: 1.7;\n margin-bottom: 2rem;\n flex-grow: 1;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card .cta-btn {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.75rem 1.75rem;\n background-color: #ffffff;\n color: #B71723;\n font-size: 1rem;\n font-weight: 600;\n text-decoration: none;\n border-radius: 6px;\n transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;\n min-height: 48px;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card .cta-btn:hover,\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card .cta-btn:focus-visible {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(0,0,0,0.2);\n outline: none;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card .cta-btn .cta-arrow {\n display: inline-block;\n transition: transform 0.2s ease-out;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card .cta-btn:hover .cta-arrow {\n transform: translateX(3px);\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card .cta-contact-info {\n display: flex;\n flex-direction: column;\n gap: 0.5rem;\n margin-top: 1.5rem;\n width: 100%;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card .cta-contact-item {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n color: #ffffff;\n opacity: 0.7;\n font-size: 0.9rem;\n text-decoration: none;\n transition: opacity 0.2s ease-out;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card .cta-contact-item:hover {\n opacity: 1;\n }\n\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card .cta-contact-item svg {\n width: 16px;\n height: 16px;\n stroke: #ffffff;\n fill: none;\n stroke-width: 1.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n flex-shrink: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 *,\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 *::before,\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card,\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card {\n opacity: 1;\n transform: none;\n }\n }\n\n @media (max-width: 1024px) {\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-wrapper {\n padding: 4rem 1.5rem;\n }\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card,\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card {\n padding: 2rem;\n }\n }\n\n @media (max-width: 960px) {\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-grid {\n grid-template-columns: 1fr 1fr;\n grid-template-rows: auto auto;\n }\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card {\n grid-column: 1 / -1;\n }\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-wrapper {\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-header {\n margin-bottom: 2.5rem;\n }\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-grid {\n grid-template-columns: 1fr;\n gap: 1.5rem;\n }\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card {\n grid-column: auto;\n }\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card,\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card {\n padding: 2rem 1.5rem;\n }\n }\n\n @media (max-width: 480px) {\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .services-wrapper {\n padding: 2.5rem 1rem;\n }\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .service-card,\n #wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8 .cta-card {\n padding: 1.5rem 1.25rem;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-dc07bc98-632a-43a9-911e-0b8afc7c83c8\">\n <div class=\"services-wrapper\">\n <div class=\"services-inner\">\n <div class=\"services-header\">\n <span class=\"services-label\">Unsere Leistungen</span>\n <h2>Was wir für Sie bewegen</h2>\n <span class=\"services-desc\">Zwei Kernbereiche, ein Versprechen: persönliche Betreuung und höchste Zuverlässigkeit bei jedem einzelnen Transport.</span>\n </div>\n <div class=\"services-grid\">\n\n <div class=\"service-card is-visible\">\n <div class=\"service-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M12 2.69l5.66 5.66a8 8 0 1 1-11.31 0L12 2.69z\"></path>\n </svg>\n </div>\n <h3>Flüssigtransporte</h3>\n <span class=\"service-text\">Professioneller Transport von flüssigen Gütern mit modernsten Tankfahrzeugen und höchsten Sicherheitsstandards.</span>\n <ul class=\"service-features\">\n <li><span class=\"feat-line\"></span> Chemikalien &amp; Industrieflüssigkeiten</li>\n <li><span class=\"feat-line\"></span> ADR-geschultes Personal</li>\n <li><span class=\"feat-line\"></span> Deutschlandweit verfügbar</li>\n </ul>\n </div>\n\n <div class=\"service-card is-visible\">\n <div class=\"service-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M22 12A10 10 0 1 1 12 2\"></path>\n <path d=\"M22 2L12 12\"></path>\n <path d=\"M16 2h6v6\"></path>\n </svg>\n </div>\n <h3>Abfalltransport</h3>\n <span class=\"service-text\">Fachgerechter Transport flüssiger Abfälle unter Einhaltung aller gesetzlichen Vorschriften und Umweltauflagen.</span>\n <ul class=\"service-features\">\n <li><span class=\"feat-line\"></span> Flüssige Industrieabfälle</li>\n <li><span class=\"feat-line\"></span> Gesetzeskonforme Abwicklung</li>\n <li><span class=\"feat-line\"></span> Lückenlose Dokumentation</li>\n </ul>\n </div>\n\n <div class=\"cta-card is-visible\">\n <div class=\"cta-icon-wrap\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"></path>\n </svg>\n </div>\n <h3>Jetzt anfragen</h3>\n <span class=\"cta-text\">Sie benötigen einen zuverlässigen Partner für Ihre Flüssigtransporte? Wir beraten Sie gerne persönlich.</span>\n <a href=\"tel:+4974523682\" class=\"cta-btn\" draggable=\"false\">\n <span>Kontakt aufnehmen</span>\n <span class=\"cta-arrow\">→</span>\n </a>\n <div class=\"cta-contact-info\">\n <a href=\"tel:+4974523682\" class=\"cta-contact-item\" draggable=\"false\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"></path></svg>\n <span>0049 (0) 7452 / 3682</span>\n </a>\n <a href=\"mailto:st.seibold@seibold-tank-logistik.de\" class=\"cta-contact-item\" draggable=\"false\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path><path d=\"M22 6l-10 7L2 6\"></path></svg>\n <span>st.seibold@seibold-tank-logistik.de</span>\n </a>\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-dc07bc98-632a-43a9-911e-0b8afc7c83c8');\n if (!el) return;\n\n var cards = el.querySelectorAll('.service-card, .cta-card');\n if (!cards.length) return;\n\n var observer = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n var delay = Array.prototype.indexOf.call(cards, entry.target) * 200;\n setTimeout(function() {\n entry.target.classList.add('is-visible');\n }, delay);\n observer.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n\n cards.forEach(function(card) {\n observer.observe(card);\n });\n})();\n</script>","summary":"This is a website relaunch project for Seibold Tank Logistik (client Stefan Seibold), a small specialized tank logistics company. The conversation has produced two sections so far: a hero banner and a services/Leistungen section, both using accent color #B71723, all-white text, max-width 1640px centered layout, and full responsive design across four breakpoints (desktop, tablet at 1024px, mobile at 768px, small smartphones at 480px). The hero section features a full-bleed background photo of the company's fleet (PNG uploaded by user), a dark gradient overlay, the heading \"Ihr Partner für Flüssigtransporte\" and company name \"Seibold Tank Logistik\" at equal font sizes (clamp 1.75rem–3.5rem, weight 700), three white stats (16+ years, 4 LKW, 100% reliability), two CTA buttons (primary red, secondary outline), a scroll indicator with pulse animation, and an IntersectionObserver entrance animation. The current snippet being edited is the services section, which is a 3-column grid with numbered cards (01 Flüssigtransporte, 02 Abfalltransport, 03 Entsorgungsfachbetrieb) featuring SVG icons, descriptions, and checkmark feature lists with staggered reveal animations and dark-theme support — the user has now requested removing the third card \"03 Entsorgungsfachbetrieb\" entirely, leaving only two service cards.","version":15,"inserted_version":15,"total_cost":9.289870975000001,"total_messages_sent":23,"summarized_at_total":12}

{"uuid":"7624e6b9-7578-4104-96ae-3f08fe7a56d4","provider":"wsw-nova","model":"sirius","image_strategy":"generate_gemini:nano_pro","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 {\n font-family: inherit;\n box-sizing: border-box;\n }\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 *,\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 *::before,\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-wrapper {\n width: 100%;\n padding: 7rem 2rem;\n background-color: var(--wsw-color-light, #f5f5f5);\n }\n\n section.wsw-theme-d #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-wrapper,\n section.wsw-theme-db #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-wrapper {\n background-color: var(--wsw-color-dark, #2a2a2a);\n }\n\n section.wsw-theme-b #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-wrapper,\n section.wsw-theme-bb #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-wrapper {\n background-color: var(--wsw-color-black, #1a1a1a);\n }\n\n section.wsw-theme-a #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-wrapper {\n background-color: var(--wsw-color-accent, #B71723);\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-inner {\n max-width: 1640px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n align-items: center;\n }\n\n /* Image side */\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-image-block {\n position: relative;\n opacity: 0;\n transform: translateX(-30px);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-image-block.is-visible {\n opacity: 1;\n transform: translateX(0);\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-image-main {\n position: relative;\n border-radius: 4px;\n overflow: hidden;\n aspect-ratio: 4 / 3;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-image-main img {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n object-position: center 40%;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-accent-bar {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 4px;\n background-color: #B71723;\n z-index: 1;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-experience-badge {\n position: absolute;\n bottom: -1.5rem;\n right: 2rem;\n background-color: #B71723;\n color: #ffffff;\n padding: 1.25rem 1.5rem;\n border-radius: 4px;\n display: flex;\n flex-direction: column;\n align-items: center;\n box-shadow: 0 8px 24px rgba(183, 23, 35, 0.3);\n z-index: 2;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-experience-badge .badge-number {\n display: block;\n font-size: 2.5rem;\n font-weight: 700;\n line-height: 1;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-experience-badge .badge-text {\n display: block;\n font-size: 0.75rem;\n text-transform: uppercase;\n letter-spacing: 0.1em;\n margin-top: 0.25rem;\n }\n\n /* Text side */\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block {\n opacity: 0;\n transform: translateX(30px);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n transition-delay: 0.15s;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block.is-visible {\n opacity: 1;\n transform: translateX(0);\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-label {\n display: inline-block;\n font-size: 0.8rem;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: #B71723;\n margin-bottom: 0.75rem;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block h2 {\n color: var(--wsw-color-black, #1a1a1a);\n margin: 0 0 1.25rem 0;\n }\n\n section.wsw-theme-d #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block h2,\n section.wsw-theme-db #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block h2,\n section.wsw-theme-b #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block h2,\n section.wsw-theme-bb #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block h2,\n section.wsw-theme-a #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block h2 {\n color: var(--wsw-color-white, #ffffff);\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block .about-desc {\n display: block;\n color: var(--wsw-color-black, #1a1a1a);\n opacity: 0.7;\n line-height: 1.7;\n margin-bottom: 2rem;\n max-width: 540px;\n }\n\n section.wsw-theme-d #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block .about-desc,\n section.wsw-theme-db #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block .about-desc,\n section.wsw-theme-b #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block .about-desc,\n section.wsw-theme-bb #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block .about-desc,\n section.wsw-theme-a #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block .about-desc {\n color: var(--wsw-color-white, #ffffff);\n }\n\n /* Highlights */\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlights {\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-icon {\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background-color: rgba(183, 23, 35, 0.08);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-icon svg {\n width: 20px;\n height: 20px;\n stroke: #B71723;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-content {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-title {\n display: block;\n font-weight: 600;\n color: var(--wsw-color-black, #1a1a1a);\n }\n\n section.wsw-theme-d #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-title,\n section.wsw-theme-db #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-title,\n section.wsw-theme-b #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-title,\n section.wsw-theme-bb #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-title,\n section.wsw-theme-a #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-title {\n color: var(--wsw-color-white, #ffffff);\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-desc {\n display: block;\n font-size: 0.9rem;\n color: var(--wsw-color-black, #1a1a1a);\n opacity: 0.6;\n line-height: 1.5;\n }\n\n section.wsw-theme-d #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-desc,\n section.wsw-theme-db #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-desc,\n section.wsw-theme-b #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-desc,\n section.wsw-theme-bb #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-desc,\n section.wsw-theme-a #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-highlight-desc {\n color: var(--wsw-color-white, #ffffff);\n }\n\n /* CTA */\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-cta {\n display: inline-flex;\n align-items: center;\n gap: 0.5rem;\n padding: 0.875rem 2rem;\n font-size: 1rem;\n font-weight: 600;\n text-decoration: none;\n border-radius: 3px;\n background-color: #B71723;\n color: #ffffff;\n border: none;\n cursor: pointer;\n min-height: 48px;\n transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-cta:hover,\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-cta:focus-visible {\n transform: translateY(-2px);\n box-shadow: 0 6px 20px rgba(183, 23, 35, 0.4);\n background-color: #9e1420;\n outline: none;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-cta .cta-arrow {\n display: inline-block;\n transition: transform 0.2s ease-out;\n }\n\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-cta:hover .cta-arrow {\n transform: translateX(3px);\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 *,\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 *::before,\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-image-block,\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block {\n opacity: 1;\n transform: none;\n }\n }\n\n /* Tablet */\n @media (max-width: 1024px) {\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-wrapper {\n padding: 5.5rem 1.5rem;\n }\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-inner {\n gap: 3rem;\n }\n }\n\n /* Mobil */\n @media (max-width: 768px) {\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-wrapper {\n padding: 4rem 1.25rem;\n }\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-inner {\n grid-template-columns: 1fr;\n gap: 2.5rem;\n }\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-experience-badge {\n right: 1rem;\n bottom: -1rem;\n padding: 1rem 1.25rem;\n }\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-experience-badge .badge-number {\n font-size: 2rem;\n }\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-text-block .about-desc {\n max-width: 100%;\n }\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-cta {\n width: 100%;\n justify-content: center;\n }\n }\n\n /* Kleine Smartphones */\n @media (max-width: 480px) {\n #wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4 .about-wrapper {\n padding: 3rem 1rem;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4\">\n <div class=\"about-wrapper\">\n <div class=\"about-inner\">\n\n <div class=\"about-image-block is-visible\">\n <div class=\"about-image-main\">\n <img src=\"/s3/b/wsw.website.14978/public/images/pages/img-2048.1.69f07a128c88f.webp?_307873.5\" alt=\"Seibold Scania Tankfahrzeuge aufgereiht auf dem Betriebshof\" loading=\"lazy\" draggable=\"false\">\n <div class=\"about-accent-bar\"></div>\n </div>\n <div class=\"about-experience-badge\">\n <span class=\"badge-number\">16+</span>\n <span class=\"badge-text\">Jahre Erfahrung</span>\n </div>\n </div>\n\n <div class=\"about-text-block is-visible\">\n <span class=\"about-label\">Über uns</span>\n <h2>Erfahren, spezialisiert und persönlich</h2>\n <span class=\"about-desc\">Seit über 16 Jahren sind wir im Bereich Flüssigtransporte tätig. Als inhabergeführte Spedition mit 4 eigenen LKW kennen wir jeden unserer Kunden persönlich – und behandeln jeden Auftrag, als wäre er der wichtigste.</span>\n\n <div class=\"about-highlights\">\n <div class=\"about-highlight\">\n <div class=\"about-highlight-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"></path>\n <circle cx=\"9\" cy=\"7\" r=\"4\"></circle>\n <path d=\"M22 21v-2a4 4 0 0 0-3-3.87\"></path>\n <path d=\"M16 3.13a4 4 0 0 1 0 7.75\"></path>\n </svg>\n </div>\n <div class=\"about-highlight-content\">\n <span class=\"about-highlight-title\">Persönliche Betreuung</span>\n <span class=\"about-highlight-desc\">Direkter Ansprechpartner für jeden Kunden – keine Warteschleifen, keine anonymen Callcenter.</span>\n </div>\n </div>\n\n <div class=\"about-highlight\">\n <div class=\"about-highlight-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"></path>\n </svg>\n </div>\n <div class=\"about-highlight-content\">\n <span class=\"about-highlight-title\">Höchste Sicherheitsstandards</span>\n <span class=\"about-highlight-desc\">ADR-geschultes Personal und regelmäßig gewartete Tankfahrzeuge für maximale Sicherheit.</span>\n </div>\n </div>\n\n <div class=\"about-highlight\">\n <div class=\"about-highlight-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M1 3h15v13H1z\"></path>\n <path d=\"M16 8h4l3 4v5h-7V8z\"></path>\n <circle cx=\"5.5\" cy=\"18.5\" r=\"2.5\"></circle>\n <circle cx=\"18.5\" cy=\"18.5\" r=\"2.5\"></circle>\n </svg>\n </div>\n <div class=\"about-highlight-content\">\n <span class=\"about-highlight-title\">4 eigene Tankfahrzeuge</span>\n <span class=\"about-highlight-desc\">Moderne Scania-Flotte für flexible und zuverlässige Einsätze in ganz Deutschland.</span>\n </div>\n </div>\n </div>\n\n <a href=\"#\" class=\"about-cta\" draggable=\"false\">\n <span>Mehr erfahren</span>\n <span class=\"cta-arrow\">→</span>\n </a>\n </div>\n\n </div>\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-7624e6b9-7578-4104-96ae-3f08fe7a56d4');\n if (!el) return;\n\n var targets = el.querySelectorAll('.about-image-block, .about-text-block');\n if (!targets.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 });\n\n targets.forEach(function(target) {\n observer.observe(target);\n });\n})();\n</script>","summary":"The user is building a website relaunch for Seibold Tank Logistik, a small specialized tank logistics company with 4 trucks and 16+ years of experience, using accent color #B71723. The current snippet is an \"Über uns\" (About Us) section with a 2-column grid layout (max-width 1640px, centered), featuring an image with a red accent bar and \"16+ Jahre Erfahrung\" badge on the left, and text content with section label, heading, description, three icon-highlighted features (Persönliche Betreuung, Sicherheitsstandards, 4 eigene Tankfahrzeuge), and a red CTA button on the right. The user has now uploaded a new image and wants it used as the about section image, with the format adjusted to fit the existing 4:3 aspect ratio container; all text colors adapt to dark/light themes via CSS theme class selectors, and the layout is fully responsive across four breakpoints (desktop, tablet ≤1024px, mobile ≤768px, small phones ≤480px) with entrance animations via IntersectionObserver.","version":16,"inserted_version":16,"total_cost":8.895078885,"total_messages_sent":21,"summarized_at_total":12}

{"uuid":"e0af4dda-a122-4ca4-9c67-9049ae2b4900","provider":"wsw-nova","model":"sirius","image_strategy":"generate_gemini:nano_pro","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 {\n font-family: inherit;\n box-sizing: border-box;\n }\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 *,\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 *::before,\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-wrapper {\n width: 100%;\n padding: 5rem 2rem;\n background: transparent;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-inner {\n max-width: 1640px;\n margin: 0 auto;\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 4rem;\n align-items: center;\n }\n\n /* Text side */\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block {\n opacity: 0;\n transform: translateX(-30px);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block.is-visible {\n opacity: 1;\n transform: translateX(0);\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-label {\n display: inline-block;\n font-size: 0.8rem;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: #B71723;\n margin-bottom: 0.75rem;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block h2 {\n color: var(--wsw-color-black, #1a1a1a);\n margin: 0 0 1.25rem 0;\n }\n\n section.wsw-theme-d #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block h2,\n section.wsw-theme-db #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block h2,\n section.wsw-theme-b #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block h2,\n section.wsw-theme-bb #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block h2 {\n color: var(--wsw-color-white, #ffffff);\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block .pump-desc {\n display: block;\n color: var(--wsw-color-black, #1a1a1a);\n opacity: 0.7;\n line-height: 1.7;\n margin-bottom: 2rem;\n max-width: 540px;\n }\n\n section.wsw-theme-d #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block .pump-desc,\n section.wsw-theme-db #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block .pump-desc,\n section.wsw-theme-b #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block .pump-desc,\n section.wsw-theme-bb #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block .pump-desc {\n color: var(--wsw-color-white, #ffffff);\n }\n\n /* Highlights */\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlights {\n display: flex;\n flex-direction: column;\n gap: 1.25rem;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-icon {\n flex-shrink: 0;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background-color: rgba(183, 23, 35, 0.08);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n section.wsw-theme-d #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-icon,\n section.wsw-theme-db #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-icon,\n section.wsw-theme-b #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-icon,\n section.wsw-theme-bb #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-icon {\n background-color: rgba(183, 23, 35, 0.2);\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-icon svg {\n width: 20px;\n height: 20px;\n stroke: #B71723;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-content {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-title {\n display: block;\n font-weight: 600;\n color: var(--wsw-color-black, #1a1a1a);\n }\n\n section.wsw-theme-d #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-title,\n section.wsw-theme-db #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-title,\n section.wsw-theme-b #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-title,\n section.wsw-theme-bb #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-title {\n color: var(--wsw-color-white, #ffffff);\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-desc {\n display: block;\n font-size: 0.9rem;\n color: var(--wsw-color-black, #1a1a1a);\n opacity: 0.6;\n line-height: 1.5;\n }\n\n section.wsw-theme-d #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-desc,\n section.wsw-theme-db #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-desc,\n section.wsw-theme-b #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-desc,\n section.wsw-theme-bb #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-highlight-desc {\n color: var(--wsw-color-white, #ffffff);\n }\n\n /* Image comparison slider */\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-image-block {\n position: relative;\n opacity: 0;\n transform: translateX(30px);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n transition-delay: 0.15s;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-image-block.is-visible {\n opacity: 1;\n transform: translateX(0);\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-compare {\n position: relative;\n border-radius: 4px;\n overflow: hidden;\n aspect-ratio: 4 / 3;\n cursor: ew-resize;\n user-select: none;\n -webkit-user-select: none;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-compare-layer {\n position: absolute;\n inset: 0;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-compare-layer img {\n width: 100%;\n height: 100%;\n display: block;\n object-fit: cover;\n object-position: center center;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-compare-top {\n z-index: 2;\n clip-path: inset(0 50% 0 0);\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-compare-bottom {\n z-index: 1;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-compare-bottom img {\n transform: rotate(90deg) scale(1.45);\n transform-origin: center center;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-compare-handle {\n position: absolute;\n top: 0;\n left: 50%;\n width: 3px;\n height: 100%;\n background-color: #ffffff;\n z-index: 3;\n transform: translateX(-50%);\n pointer-events: none;\n box-shadow: 0 0 8px rgba(0,0,0,0.3);\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-compare-knob {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n width: 44px;\n height: 44px;\n border-radius: 50%;\n background-color: #ffffff;\n box-shadow: 0 2px 12px rgba(0,0,0,0.25);\n display: flex;\n align-items: center;\n justify-content: center;\n z-index: 4;\n pointer-events: none;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-compare-knob svg {\n width: 20px;\n height: 20px;\n stroke: #B71723;\n fill: none;\n stroke-width: 2.5;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-compare-labels {\n position: absolute;\n bottom: 1rem;\n left: 1rem;\n right: 1rem;\n display: flex;\n justify-content: space-between;\n z-index: 5;\n pointer-events: none;\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-compare-label-tag {\n display: inline-block;\n padding: 0.3rem 0.75rem;\n background-color: rgba(0,0,0,0.55);\n color: #ffffff;\n font-size: 0.7rem;\n font-weight: 600;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n border-radius: 3px;\n backdrop-filter: blur(4px);\n }\n\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-accent-bar {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 4px;\n background-color: #B71723;\n z-index: 6;\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 *,\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 *::before,\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block,\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-image-block {\n opacity: 1;\n transform: none;\n }\n }\n\n /* Tablet */\n @media (max-width: 1024px) {\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-wrapper {\n padding: 4rem 1.5rem;\n }\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-inner {\n gap: 3rem;\n }\n }\n\n /* Mobil */\n @media (max-width: 768px) {\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-wrapper {\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-inner {\n grid-template-columns: 1fr;\n gap: 2.5rem;\n }\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-text-block .pump-desc {\n max-width: 100%;\n }\n }\n\n /* Kleine Smartphones */\n @media (max-width: 480px) {\n #wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900 .pump-wrapper {\n padding: 2.5rem 1rem;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900\">\n <div class=\"pump-wrapper\">\n <div class=\"pump-inner\">\n\n <div class=\"pump-text-block is-visible\">\n <span class=\"pump-label\">Unsere Ausstattung</span>\n <h2>Fahrzeuge mit eigener Beladepumpe</h2>\n <span class=\"pump-desc\">Unsere Tankfahrzeuge sind mit leistungsstarken Beladepumpen ausgestattet – für eigenständiges Be- und Entladen direkt vor Ort, ohne auf externe Technik angewiesen zu sein.</span>\n\n <div class=\"pump-highlights\">\n <div class=\"pump-highlight\">\n <div class=\"pump-highlight-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <path d=\"M12 6v6l4 2\"></path>\n </svg>\n </div>\n <div class=\"pump-highlight-content\">\n <span class=\"pump-highlight-title\">Zeitersparnis</span>\n <span class=\"pump-highlight-desc\">Eigenständiges Be- und Entladen ohne Wartezeiten auf fremde Pumpentechnik vor Ort.</span>\n </div>\n </div>\n\n <div class=\"pump-highlight\">\n <div class=\"pump-highlight-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"></path>\n </svg>\n </div>\n <div class=\"pump-highlight-content\">\n <span class=\"pump-highlight-title\">Maximale Flexibilität</span>\n <span class=\"pump-highlight-desc\">Einsatzbereit auch an Standorten ohne eigene Infrastruktur – unabhängig und sofort startklar.</span>\n </div>\n </div>\n\n <div class=\"pump-highlight\">\n <div class=\"pump-highlight-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"></path>\n <path d=\"M22 4L12 14.01l-3-3\"></path>\n </svg>\n </div>\n <div class=\"pump-highlight-content\">\n <span class=\"pump-highlight-title\">Zuverlässiger Ablauf</span>\n <span class=\"pump-highlight-desc\">Kontrollierte Beladung mit eigener Technik sorgt für sichere und planbare Abläufe bei jedem Auftrag.</span>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"pump-image-block is-visible\">\n <div class=\"pump-compare\" role=\"slider\" aria-label=\"Bildvergleich ziehen\" tabindex=\"0\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-valuenow=\"50\" style=\"cursor: ew-resize;\">\n <!-- Top layer (left side) -->\n <div class=\"pump-compare-layer pump-compare-top\">\n <img src=\"/s3/b/wsw.website.14978/public/images/pages/img-2056.webp?_194488.19999998808\" alt=\"Detailaufnahme der Beladepumpe und Anschlüsse am Seibold Tankfahrzeug\" draggable=\"false\">\n </div>\n <!-- Bottom layer (right side) -->\n <div class=\"pump-compare-layer pump-compare-bottom\">\n <img src=\"/s3/b/wsw.website.14978/public/images/pages/img-2063.webp?_195735\" alt=\"Heckansicht des Seibold Tank Logistik Fahrzeugs mit Magyar-Auflieger und ADR-Kennzeichnung\" draggable=\"false\">\n </div>\n <!-- Handle -->\n <div class=\"pump-compare-handle\">\n <div class=\"pump-compare-knob\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M8 4l-6 8 6 8\"></path>\n <path d=\"M16 4l6 8-6 8\"></path>\n </svg>\n </div>\n </div>\n <!-- Labels -->\n <div class=\"pump-compare-labels\">\n <span class=\"pump-compare-label-tag\">Pumpentechnik</span>\n <span class=\"pump-compare-label-tag\">Tankauflieger</span>\n </div>\n <div class=\"pump-accent-bar\"></div>\n </div>\n </div>\n\n </div>\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-e0af4dda-a122-4ca4-9c67-9049ae2b4900');\n if (!el) return;\n\n /* Entrance animation */\n var animTargets = el.querySelectorAll('.pump-text-block, .pump-image-block');\n if (animTargets.length) {\n var animObs = new IntersectionObserver(function(entries) {\n entries.forEach(function(entry) {\n if (entry.isIntersecting) {\n entry.target.classList.add('is-visible');\n animObs.unobserve(entry.target);\n }\n });\n }, { threshold: 0.15 });\n animTargets.forEach(function(t) { animObs.observe(t); });\n }\n\n /* Comparison slider */\n var compare = el.querySelector('.pump-compare');\n if (!compare) return;\n\n var topLayer = compare.querySelector('.pump-compare-top');\n var handle = compare.querySelector('.pump-compare-handle');\n var knob = compare.querySelector('.pump-compare-knob');\n if (!topLayer || !handle) return;\n\n var isDragging = false;\n\n function setPosition(x) {\n var rect = compare.getBoundingClientRect();\n var pct = ((x - rect.left) / rect.width) * 100;\n pct = Math.max(2, Math.min(98, pct));\n topLayer.style.clipPath = 'inset(0 ' + (100 - pct) + '% 0 0)';\n handle.style.left = pct + '%';\n }\n\n function onStart(e) {\n e.preventDefault();\n isDragging = true;\n compare.style.cursor = 'grabbing';\n }\n\n function onMove(e) {\n if (!isDragging) return;\n var clientX = e.touches ? e.touches[0].clientX : e.clientX;\n setPosition(clientX);\n }\n\n function onEnd() {\n isDragging = false;\n compare.style.cursor = 'ew-resize';\n }\n\n compare.addEventListener('mousedown', onStart);\n compare.addEventListener('touchstart', onStart, { passive: false });\n document.addEventListener('mousemove', onMove);\n document.addEventListener('touchmove', onMove, { passive: true });\n document.addEventListener('mouseup', onEnd);\n document.addEventListener('touchend', onEnd);\n\n /* Keyboard accessibility */\n compare.setAttribute('tabindex', '0');\n compare.setAttribute('role', 'slider');\n compare.setAttribute('aria-valuemin', '0');\n compare.setAttribute('aria-valuemax', '100');\n compare.setAttribute('aria-valuenow', '50');\n compare.setAttribute('aria-label', 'Bildvergleich ziehen');\n\n compare.addEventListener('keydown', function(e) {\n var rect = compare.getBoundingClientRect();\n var currentLeft = parseFloat(handle.style.left) || 50;\n var step = 2;\n if (e.key === 'ArrowLeft' || e.key === 'Left') {\n e.preventDefault();\n var newVal = Math.max(2, currentLeft - step);\n topLayer.style.clipPath = 'inset(0 ' + (100 - newVal) + '% 0 0)';\n handle.style.left = newVal + '%';\n compare.setAttribute('aria-valuenow', Math.round(newVal));\n } else if (e.key === 'ArrowRight' || e.key === 'Right') {\n e.preventDefault();\n var newVal2 = Math.min(98, currentLeft + step);\n topLayer.style.clipPath = 'inset(0 ' + (100 - newVal2) + '% 0 0)';\n handle.style.left = newVal2 + '%';\n compare.setAttribute('aria-valuenow', Math.round(newVal2));\n }\n });\n\n})();\n</script>","summary":"The user is building a website relaunch for Seibold Tank Logistik, a small specialized tank logistics company with 4 trucks and 16+ years of experience, using accent color #B71723. The current snippet is an \"Über uns\" (About Us) section with a 2-column grid layout (max-width 1640px, centered), featuring an image with a red accent bar and \"16+ Jahre Erfahrung\" badge on the left, and text content with section label, heading, description, three icon-highlighted features (Persönliche Betreuung, Sicherheitsstandards, 4 eigene Tankfahrzeuge), and a red CTA button on the right. The user has now uploaded a new image and wants it used as the about section image, with the format adjusted to fit the existing 4:3 aspect ratio container; all text colors adapt to dark/light themes via CSS theme class selectors, and the layout is fully responsive across four breakpoints (desktop, tablet ≤1024px, mobile ≤768px, small phones ≤480px) with entrance animations via IntersectionObserver.","version":18,"inserted_version":18,"total_cost":3.7756811400000005,"total_messages_sent":23,"summarized_at_total":12}

{"uuid":"0a50f40a-72ea-4bed-8d16-d48d03c046ee","provider":"wsw-nova","model":"sirius","image_strategy":"generate_gemini:nano_pro","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee {\n font-family: inherit;\n box-sizing: border-box;\n }\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee *,\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee *::before,\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-wrapper {\n width: 100%;\n padding: 5rem 2rem;\n background-color: #B71723;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-inner {\n max-width: 1640px;\n margin: 0 auto;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 3rem;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-text-block {\n max-width: 700px;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-text-block.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-text-block h2 {\n color: #ffffff;\n margin: 0 0 0.75rem 0;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-text-block .cta-desc {\n display: block;\n color: #ffffff;\n opacity: 0.85;\n line-height: 1.7;\n max-width: 560px;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-actions {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n flex-shrink: 0;\n opacity: 0;\n transform: translateY(20px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n transition-delay: 0.15s;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-actions.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.5rem;\n padding: 0.875rem 2.5rem;\n font-size: 1rem;\n font-weight: 600;\n text-decoration: none;\n border-radius: 3px;\n cursor: pointer;\n min-height: 48px;\n transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out, border-color 0.2s ease-out;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-btn-primary {\n background-color: #ffffff;\n color: #B71723;\n border: none;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-btn-primary:hover,\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-btn-primary:focus-visible {\n transform: translateY(-2px);\n box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);\n background-color: #f0f0f0;\n outline: none;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-btn-secondary {\n background-color: transparent;\n color: #ffffff;\n border: 2px solid rgba(255,255,255,0.5);\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-btn-secondary:hover,\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-btn-secondary:focus-visible {\n border-color: #ffffff;\n background-color: rgba(255,255,255,0.1);\n transform: translateY(-2px);\n outline: none;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-btn .btn-arrow {\n display: inline-block;\n transition: transform 0.2s ease-out;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-btn:hover .btn-arrow {\n transform: translateX(3px);\n }\n\n /* Contact info row */\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-contact-row {\n display: flex;\n gap: 2.5rem;\n margin-top: 1.5rem;\n padding-top: 1.5rem;\n border-top: 1px solid rgba(255,255,255,0.2);\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-contact-item {\n display: flex;\n align-items: center;\n gap: 0.625rem;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-contact-item svg {\n width: 18px;\n height: 18px;\n stroke: #ffffff;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n opacity: 0.7;\n flex-shrink: 0;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-contact-item a {\n color: #ffffff;\n opacity: 0.85;\n font-size: 0.95rem;\n text-decoration: none;\n transition: opacity 0.2s ease-out;\n }\n\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-contact-item a:hover,\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-contact-item a:focus-visible {\n opacity: 1;\n outline: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee *,\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee *::before,\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-text-block,\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-actions {\n opacity: 1;\n transform: none;\n }\n }\n\n /* Tablet */\n @media (max-width: 1024px) {\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-wrapper {\n padding: 4rem 1.5rem;\n }\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-inner {\n gap: 2rem;\n }\n }\n\n /* Mobil */\n @media (max-width: 768px) {\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-wrapper {\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-inner {\n flex-direction: column;\n text-align: center;\n gap: 2rem;\n }\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-text-block .cta-desc {\n max-width: 100%;\n }\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-actions {\n width: 100%;\n }\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-btn {\n width: 100%;\n }\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-contact-row {\n flex-direction: column;\n align-items: center;\n gap: 1rem;\n }\n }\n\n /* Kleine Smartphones */\n @media (max-width: 480px) {\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-wrapper {\n padding: 2.5rem 1rem;\n }\n #wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee .cta-btn {\n padding: 0.75rem 1.5rem;\n font-size: 0.9rem;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee\">\n <div class=\"cta-wrapper\">\n <div class=\"cta-inner\">\n\n <div class=\"cta-text-block is-visible\">\n <h2>Lassen Sie uns über Ihren Transport sprechen</h2>\n <span class=\"cta-desc\">Wir finden die passende Lösung für Ihre Anforderungen. Persönlich, zuverlässig und flexibel.</span>\n <div class=\"cta-contact-row\">\n <div class=\"cta-contact-item\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.12 4.18 2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"></path>\n </svg>\n <a href=\"tel:+4974523682\" draggable=\"false\">0049 (0) 7452 / 3682</a>\n </div>\n <div class=\"cta-contact-item\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path>\n <path d=\"M22 6l-10 7L2 6\"></path>\n </svg>\n <a href=\"mailto:st.seibold@seibold-tank-logistik.de\" draggable=\"false\">st.seibold@seibold-tank-logistik.de</a>\n </div>\n </div>\n </div>\n\n <div class=\"cta-actions is-visible\">\n <a href=\"#\" class=\"cta-btn cta-btn-primary\" draggable=\"false\">\n <span>Jetzt Kontakt aufnehmen</span>\n <span class=\"btn-arrow\">→</span>\n </a>\n <a href=\"#\" class=\"cta-btn cta-btn-secondary\" draggable=\"false\">\n <span>Angebot anfragen</span>\n </a>\n </div>\n\n </div>\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-0a50f40a-72ea-4bed-8d16-d48d03c046ee');\n if (!el) return;\n\n var targets = el.querySelectorAll('.cta-text-block, .cta-actions');\n if (!targets.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 });\n\n targets.forEach(function(target) {\n observer.observe(target);\n });\n})();\n</script>","summary":"This project is a website relaunch for Seibold Tank Logistik (client Stefan Seibold), a small specialized tank logistics company with 16+ years of experience and 4 own trucks, being built section by section as separate snippets. The accent color is #B71723 (Seibold red), all text colors are black (with opacity for hierarchy) on light backgrounds and white on dark/image backgrounds, and max-width is 1640px centered. Three sections have been completed so far: a hero banner (separate snippet) with a real fleet photo background, dark gradient overlay, all-white text, stats, and two CTA buttons; a services section (separate snippet) with a modern 3-column divider-line layout featuring large numbered cards (01/02/03) for Flüssigtransporte, Abfalltransport, and Entsorgungsfachbetrieb; and an \"Über uns\" section (current snippet) with a 2-column grid showing a Scania tank truck photo with red accent bar and \"16+\" experience badge on the left, and text with three icon-highlighted features plus a red CTA button on the right. The user has now requested a CTA (call-to-action) contact section as the next new snippet, and all sections include full responsive breakpoints at 1024px, 768px, and 480px with scroll-triggered entrance animations.","version":10,"inserted_version":10,"total_cost":1.1302410349999998,"total_messages_sent":14,"summarized_at_total":12}

{"uuid":"04736956-eb46-4a17-a11d-cfc9b95bae2c","provider":"wsw-nova","model":"sirius","image_strategy":"generate_gemini:nano_pro","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c {\n font-family: inherit;\n box-sizing: border-box;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *::before,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-wrapper {\n width: 100%;\n padding: 5rem 2rem;\n background: transparent;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-inner {\n max-width: 1640px;\n margin: 0 auto;\n }\n\n /* Header */\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header {\n text-align: center;\n max-width: 680px;\n margin: 0 auto 3.5rem auto;\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-label {\n display: inline-block;\n font-size: 0.8rem;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: #B71723;\n margin-bottom: 0.75rem;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header h2 {\n color: var(--wsw-color-black, #1a1a1a);\n margin: 0 0 1rem 0;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header .fleet-desc {\n display: block;\n color: var(--wsw-color-black, #1a1a1a);\n opacity: 0.7;\n line-height: 1.7;\n }\n\n section.wsw-theme-d #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header h2,\n section.wsw-theme-db #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header h2,\n section.wsw-theme-b #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header h2,\n section.wsw-theme-bb #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header h2 {\n color: var(--wsw-color-white, #ffffff);\n }\n\n section.wsw-theme-d #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header .fleet-desc,\n section.wsw-theme-db #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header .fleet-desc,\n section.wsw-theme-b #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header .fleet-desc,\n section.wsw-theme-bb #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header .fleet-desc {\n color: var(--wsw-color-white, #ffffff);\n }\n\n /* Main image */\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-showcase {\n position: relative;\n border-radius: 6px;\n overflow: hidden;\n margin-bottom: 3rem;\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n transition-delay: 0.1s;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-showcase.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-showcase img {\n width: 100%;\n height: auto;\n display: block;\n aspect-ratio: 21 / 9;\n object-fit: cover;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-showcase-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.6) 100%);\n pointer-events: none;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-showcase-caption {\n position: absolute;\n bottom: 1.5rem;\n left: 2rem;\n right: 2rem;\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: 1.5rem;\n z-index: 1;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-showcase-caption h3 {\n color: #ffffff;\n margin: 0;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-showcase-caption .fleet-type {\n display: inline-block;\n padding: 0.3rem 0.75rem;\n background-color: #B71723;\n color: #ffffff;\n font-size: 0.75rem;\n font-weight: 600;\n letter-spacing: 0.05em;\n text-transform: uppercase;\n border-radius: 2px;\n flex-shrink: 0;\n }\n\n /* Stats row */\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stats {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 0;\n border-top: 1px solid rgba(0,0,0,0.08);\n border-bottom: 1px solid rgba(0,0,0,0.08);\n opacity: 0;\n transform: translateY(24px);\n transition: opacity 0.6s ease-out, transform 0.6s ease-out;\n transition-delay: 0.2s;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stats.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n section.wsw-theme-d #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stats,\n section.wsw-theme-db #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stats,\n section.wsw-theme-b #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stats,\n section.wsw-theme-bb #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stats {\n border-top-color: rgba(255,255,255,0.1);\n border-bottom-color: rgba(255,255,255,0.1);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat {\n padding: 2rem 1.5rem;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n border-right: 1px solid rgba(0,0,0,0.08);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat:last-child {\n border-right: none;\n }\n\n section.wsw-theme-d #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat,\n section.wsw-theme-db #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat,\n section.wsw-theme-b #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat,\n section.wsw-theme-bb #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat {\n border-right-color: rgba(255,255,255,0.1);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat-icon {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n justify-content: center;\n margin-bottom: 1rem;\n border-radius: 50%;\n background-color: rgba(183, 23, 35, 0.08);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat-icon svg {\n width: 22px;\n height: 22px;\n stroke: #B71723;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat-number {\n display: block;\n font-size: clamp(1.5rem, 3vw, 2.2rem);\n font-weight: 700;\n color: var(--wsw-color-black, #1a1a1a);\n line-height: 1.2;\n margin-bottom: 0.25rem;\n }\n\n section.wsw-theme-d #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat-number,\n section.wsw-theme-db #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat-number,\n section.wsw-theme-b #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat-number,\n section.wsw-theme-bb #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat-number {\n color: var(--wsw-color-white, #ffffff);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat-label {\n display: block;\n font-size: 0.85rem;\n color: var(--wsw-color-black, #1a1a1a);\n opacity: 0.6;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n\n section.wsw-theme-d #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat-label,\n section.wsw-theme-db #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat-label,\n section.wsw-theme-b #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat-label,\n section.wsw-theme-bb #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat-label {\n color: var(--wsw-color-white, #ffffff);\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *::before,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-showcase,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stats {\n opacity: 1;\n transform: none;\n }\n }\n\n /* Tablet */\n @media (max-width: 1024px) {\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-wrapper {\n padding: 4rem 1.5rem;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stats {\n grid-template-columns: repeat(2, 1fr);\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat:nth-child(2) {\n border-right: none;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat:nth-child(1),\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat:nth-child(2) {\n border-bottom: 1px solid rgba(0,0,0,0.08);\n }\n }\n\n /* Mobil */\n @media (max-width: 768px) {\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-wrapper {\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-header {\n margin-bottom: 2.5rem;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-showcase img {\n aspect-ratio: 16 / 9;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-showcase-caption {\n bottom: 1rem;\n left: 1.25rem;\n right: 1.25rem;\n flex-direction: column;\n align-items: flex-start;\n gap: 0.5rem;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-showcase {\n margin-bottom: 2rem;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stat {\n padding: 1.5rem 1rem;\n }\n }\n\n /* Kleine Smartphones */\n @media (max-width: 480px) {\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-wrapper {\n padding: 2.5rem 1rem;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .fleet-stats {\n grid-template-columns: 1fr 1fr;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c\">\n <div class=\"fleet-wrapper\">\n <div class=\"fleet-inner\">\n\n <div class=\"fleet-header is-visible\">\n <span class=\"fleet-label\">Unser Fuhrpark</span>\n <h2>Moderne Scania-Flotte</h2>\n <span class=\"fleet-desc\">Vier eigene Tankfahrzeuge – regelmäßig gewartet, ADR-konform ausgestattet und jederzeit bereit für Ihren Auftrag.</span>\n </div>\n\n <div class=\"fleet-showcase is-visible\">\n <img src=\"/s3/b/wsw.website.14978/public/images/pages/img-2050.webp?_860650.399999857\" alt=\"Vier weiße Seibold Scania Tankfahrzeuge mit Tankauflieger aufgereiht auf dem Betriebshof bei Sonnenschein\" loading=\"lazy\" draggable=\"false\">\n <div class=\"fleet-showcase-overlay\"></div>\n <div class=\"fleet-showcase-caption\">\n <h3>Scania Tankfahrzeuge</h3>\n <span class=\"fleet-type\">ADR-zertifiziert</span>\n </div>\n </div>\n\n <div class=\"fleet-stats is-visible\">\n <div class=\"fleet-stat\">\n <div class=\"fleet-stat-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M1 3h15v13H1z\"></path>\n <path d=\"M16 8h4l3 4v5h-7V8z\"></path>\n <circle cx=\"5.5\" cy=\"18.5\" r=\"2.5\"></circle>\n <circle cx=\"18.5\" cy=\"18.5\" r=\"2.5\"></circle>\n </svg>\n </div>\n <span class=\"fleet-stat-number\">4</span>\n <span class=\"fleet-stat-label\">Tankfahrzeuge</span>\n </div>\n <div class=\"fleet-stat\">\n <div class=\"fleet-stat-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"></path>\n </svg>\n </div>\n <span class=\"fleet-stat-number\">100%</span>\n <span class=\"fleet-stat-label\">ADR-konform</span>\n </div>\n <div class=\"fleet-stat\">\n <div class=\"fleet-stat-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <circle cx=\"12\" cy=\"12\" r=\"10\"></circle>\n <path d=\"M12 6v6l4 2\"></path>\n </svg>\n </div>\n <span class=\"fleet-stat-number\">24/7</span>\n <span class=\"fleet-stat-label\">Einsatzbereit</span>\n </div>\n <div class=\"fleet-stat\">\n <div class=\"fleet-stat-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z\"></path>\n </svg>\n </div>\n <span class=\"fleet-stat-number\">Regelmäßig</span>\n <span class=\"fleet-stat-label\">Gewartet</span>\n </div>\n </div>\n\n </div>\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c');\n if (!el) return;\n\n var targets = el.querySelectorAll('.fleet-header, .fleet-showcase, .fleet-stats');\n if (!targets.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 });\n\n targets.forEach(function(target) {\n observer.observe(target);\n });\n})();\n</script>","summary":"This project is a website relaunch for Seibold Tank Logistik (client Stefan Seibold), a small specialized tank logistics/liquid transport company with 4 LKW and 16+ years of experience, being built section by section as a modern landing page. The accent color is #B71723 (Seibold red), all text colors are black (with opacity for hierarchy) on light sections and white on dark/hero sections, and the content area is max-width 1640px centered, fully responsive across four breakpoints (desktop, tablet ≤1024px, mobile ≤768px, small phones ≤480px). Four sections have been created so far: a hero section with a real fleet photo background, dark gradient overlay, white text, entrance animation, stats (16+, 4, 100%), and two CTA buttons; a services section with three columns separated by vertical lines featuring numbered cards (01-03) for Flüssigtransporte, Abfalltransport, and Entsorgungsfachbetrieb; an about-us section with a 2-column grid (image with red accent bar and experience badge on left, text with icon highlights on right); and a fleet/Fuhrpark section with centered header, panoramic showcase image (21:9 aspect) with gradient overlay and caption, and a 4-column stats row. The user's latest request is to generate a new image based on the existing fleet photo currently used in the Fuhrpark section.","version":11,"inserted_version":11,"total_cost":3.41922427,"total_messages_sent":15,"summarized_at_total":12}

{"uuid":"e600dfa6-1df3-4067-987a-f077bb02f369","provider":"wsw-nova","model":"sirius","image_strategy":"generate_gemini:nano_pro","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c {\n font-family: inherit;\n box-sizing: border-box;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *::before,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-wrapper {\n width: 100%;\n padding: 5rem 2rem;\n background: transparent;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-inner {\n max-width: 800px;\n margin: 0 auto;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info {\n opacity: 1;\n transform: translateY(0);\n transition: opacity 0.7s ease-out, transform 0.7s ease-out;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info.animate-in {\n opacity: 0;\n transform: translateY(24px);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info.animate-in.is-visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-label {\n display: inline-block;\n font-size: 0.8rem;\n font-weight: 600;\n letter-spacing: 0.1em;\n text-transform: uppercase;\n color: #B71723;\n margin-bottom: 0.75rem;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info h2 {\n color: var(--wsw-color-black, #1a1a1a);\n margin: 0 0 1rem 0;\n }\n\n section.wsw-theme-d #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info h2,\n section.wsw-theme-db #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info h2,\n section.wsw-theme-b #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info h2,\n section.wsw-theme-bb #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info h2 {\n color: var(--wsw-color-white, #ffffff);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info .contact-desc {\n display: block;\n color: var(--wsw-color-black, #1a1a1a);\n opacity: 0.7;\n line-height: 1.7;\n margin-bottom: 2.5rem;\n max-width: 540px;\n }\n\n section.wsw-theme-d #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info .contact-desc,\n section.wsw-theme-db #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info .contact-desc,\n section.wsw-theme-b #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info .contact-desc,\n section.wsw-theme-bb #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info .contact-desc {\n color: var(--wsw-color-white, #ffffff);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-items {\n display: flex;\n flex-direction: column;\n gap: 1.5rem;\n margin-bottom: 2.5rem;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item {\n display: flex;\n align-items: flex-start;\n gap: 1rem;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-icon {\n flex-shrink: 0;\n width: 44px;\n height: 44px;\n border-radius: 50%;\n background-color: rgba(183, 23, 35, 0.08);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-icon svg {\n width: 20px;\n height: 20px;\n stroke: #B71723;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-content {\n display: flex;\n flex-direction: column;\n gap: 0.125rem;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-title {\n display: block;\n font-weight: 600;\n color: var(--wsw-color-black, #1a1a1a);\n }\n\n section.wsw-theme-d #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-title,\n section.wsw-theme-db #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-title,\n section.wsw-theme-b #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-title,\n section.wsw-theme-bb #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-title {\n color: var(--wsw-color-white, #ffffff);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-value {\n display: block;\n color: var(--wsw-color-black, #1a1a1a);\n opacity: 0.7;\n font-size: 0.95rem;\n line-height: 1.5;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-value a {\n color: inherit;\n text-decoration: none;\n transition: color 0.2s ease-out;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-value a:hover,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-value a:focus-visible {\n color: #B71723;\n opacity: 1;\n }\n\n section.wsw-theme-d #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-value,\n section.wsw-theme-db #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-value,\n section.wsw-theme-b #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-value,\n section.wsw-theme-bb #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-item-value {\n color: var(--wsw-color-white, #ffffff);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours {\n padding: 1.5rem;\n border: 1px solid rgba(0,0,0,0.08);\n border-radius: 4px;\n }\n\n section.wsw-theme-d #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours,\n section.wsw-theme-db #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours,\n section.wsw-theme-b #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours,\n section.wsw-theme-bb #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours {\n border-color: rgba(255,255,255,0.12);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours-title {\n display: block;\n font-weight: 600;\n color: var(--wsw-color-black, #1a1a1a);\n margin-bottom: 0.75rem;\n }\n\n section.wsw-theme-d #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours-title,\n section.wsw-theme-db #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours-title,\n section.wsw-theme-b #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours-title,\n section.wsw-theme-bb #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours-title {\n color: var(--wsw-color-white, #ffffff);\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours-row {\n display: flex;\n justify-content: space-between;\n padding: 0.375rem 0;\n color: var(--wsw-color-black, #1a1a1a);\n opacity: 0.7;\n font-size: 0.9rem;\n }\n\n section.wsw-theme-d #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours-row,\n section.wsw-theme-db #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours-row,\n section.wsw-theme-b #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours-row,\n section.wsw-theme-bb #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-hours-row {\n color: var(--wsw-color-white, #ffffff);\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *::before,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n @media (max-width: 1024px) {\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-wrapper {\n padding: 4rem 1.5rem;\n }\n }\n\n @media (max-width: 768px) {\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-wrapper {\n padding: 3rem 1.25rem;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-info .contact-desc {\n max-width: 100%;\n }\n }\n\n @media (max-width: 480px) {\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .contact-wrapper {\n padding: 2.5rem 1rem;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c\">\n <div class=\"contact-wrapper\">\n <div class=\"contact-inner\">\n\n <div class=\"contact-info\">\n <span class=\"contact-label\">Kontakt</span>\n <h2>Sprechen Sie uns an</h2>\n <span class=\"contact-desc\">Sie benötigen einen zuverlässigen Partner für Flüssigtransporte? Wir beraten Sie persönlich und erstellen Ihnen gerne ein individuelles Angebot.</span>\n\n <div class=\"contact-items\">\n <div class=\"contact-item\">\n <div class=\"contact-item-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"></path>\n </svg>\n </div>\n <div class=\"contact-item-content\">\n <span class=\"contact-item-title\">Telefon</span>\n <span class=\"contact-item-value\"><a href=\"tel:+4974523682\" draggable=\"false\">0049 (0) 7452 / 3682</a></span>\n </div>\n </div>\n\n <div class=\"contact-item\">\n <div class=\"contact-item-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path>\n <path d=\"M22 6l-10 7L2 6\"></path>\n </svg>\n </div>\n <div class=\"contact-item-content\">\n <span class=\"contact-item-title\">E-Mail</span>\n <span class=\"contact-item-value\"><a href=\"mailto:st.seibold@seibold-tank-logistik.de\" draggable=\"false\">st.seibold@seibold-tank-logistik.de</a></span>\n </div>\n </div>\n\n <div class=\"contact-item\">\n <div class=\"contact-item-icon\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"></path>\n <circle cx=\"12\" cy=\"10\" r=\"3\"></circle>\n </svg>\n </div>\n <div class=\"contact-item-content\">\n <span class=\"contact-item-title\">Standort</span>\n <span class=\"contact-item-value\">Neuwiesen 1<br>72202 Nagold</span>\n </div>\n </div>\n </div>\n\n <div class=\"contact-hours\">\n <span class=\"contact-hours-title\">Erreichbarkeit</span>\n <div class=\"contact-hours-row\">\n <span>Montag – Freitag</span>\n <span>07:00 – 18:00 Uhr</span>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n</div>\n\n<script>\n(function() {\n 'use strict';\n var el = document.getElementById('wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c');\n if (!el) return;\n\n var targets = el.querySelectorAll('.contact-info');\n if (!targets.length) return;\n\n targets.forEach(function(target) {\n target.classList.add('animate-in');\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.1 });\n\n targets.forEach(function(target) {\n observer.observe(target);\n });\n})();\n</script>","summary":"This project is a website relaunch for Seibold Tank Logistik (client Stefan Seibold), a small specialized tank logistics/liquid transport company with 4 LKW and 16+ years of experience, being built section by section as a modern landing page. The accent color is #B71723 (Seibold red), all text colors are black (with opacity for hierarchy) on light sections and white on dark/hero sections, and the content area is max-width 1640px centered, fully responsive across four breakpoints (desktop, tablet ≤1024px, mobile ≤768px, small phones ≤480px). Four sections have been created so far: a hero section with a real fleet photo background, dark gradient overlay, white text, entrance animation, stats (16+, 4, 100%), and two CTA buttons; a services section with three columns separated by vertical lines featuring numbered cards (01-03) for Flüssigtransporte, Abfalltransport, and Entsorgungsfachbetrieb; an about-us section with a 2-column grid (image with red accent bar and experience badge on left, text with icon highlights on right); and a fleet/Fuhrpark section with centered header, panoramic showcase image (21:9 aspect) with gradient overlay and caption, and a 4-column stats row. The user's latest request is to generate a new image based on the existing fleet photo currently used in the Fuhrpark section.","version":15,"inserted_version":15,"total_cost":4.937864470000001,"total_messages_sent":19,"summarized_at_total":12}

{"uuid":"ca5c9b0d-2c61-40f5-a6f8-56419cf5a190","provider":"wsw-nova","model":"sirius","image_strategy":"generate_gemini:nano_pro","image_quality":null,"image_size":null,"image_aspect_ratio":null,"use_website_data":true,"html":"<style>\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c {\n font-family: inherit;\n box-sizing: border-box;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *::before,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *::after {\n box-sizing: inherit;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-wrapper {\n width: 100%;\n background-color: #B71723;\n padding: 4rem 2rem 0 2rem;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-inner {\n max-width: 1640px;\n margin: 0 auto;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-grid {\n display: grid;\n grid-template-columns: 1.4fr 1fr 1fr 1fr;\n gap: 3rem;\n padding-bottom: 3rem;\n border-bottom: 1px solid rgba(255,255,255,0.15);\n }\n\n /* Brand column */\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-brand .footer-logo {\n display: block;\n font-size: 1.4rem;\n font-weight: 700;\n color: #ffffff;\n letter-spacing: 0.02em;\n margin-bottom: 1rem;\n line-height: 1.3;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-brand .footer-brand-desc {\n display: block;\n color: rgba(255,255,255,0.75);\n line-height: 1.7;\n font-size: 0.9rem;\n max-width: 320px;\n margin-bottom: 1.5rem;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-certifications {\n display: flex;\n gap: 1rem;\n flex-wrap: wrap;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-cert {\n display: inline-flex;\n align-items: center;\n gap: 0.375rem;\n padding: 0.375rem 0.75rem;\n border: 1px solid rgba(255,255,255,0.25);\n border-radius: 3px;\n font-size: 0.75rem;\n font-weight: 600;\n color: #ffffff;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-cert svg {\n width: 14px;\n height: 14px;\n stroke: #ffffff;\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n\n /* Column headings */\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-col h4 {\n color: #ffffff;\n margin: 0 0 1.25rem 0;\n font-size: 1rem;\n font-weight: 600;\n }\n\n /* Links list */\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-links {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: 0.625rem;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-links li a {\n color: rgba(255,255,255,0.75);\n text-decoration: none;\n font-size: 0.9rem;\n transition: color 0.2s ease-out;\n display: inline-block;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-links li a:hover,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-links li a:focus-visible {\n color: #ffffff;\n outline: none;\n }\n\n /* Contact items in footer */\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-contact-list {\n display: flex;\n flex-direction: column;\n gap: 0.875rem;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-contact-item {\n display: flex;\n align-items: flex-start;\n gap: 0.625rem;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-contact-item svg {\n width: 16px;\n height: 16px;\n stroke: rgba(255,255,255,0.6);\n fill: none;\n stroke-width: 2;\n stroke-linecap: round;\n stroke-linejoin: round;\n flex-shrink: 0;\n margin-top: 0.2rem;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-contact-item span {\n display: block;\n color: rgba(255,255,255,0.75);\n font-size: 0.9rem;\n line-height: 1.5;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-contact-item a {\n color: rgba(255,255,255,0.75);\n text-decoration: none;\n transition: color 0.2s ease-out;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-contact-item a:hover,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-contact-item a:focus-visible {\n color: #ffffff;\n outline: none;\n }\n\n /* Bottom bar */\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-bottom {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 1.5rem 0;\n gap: 1.5rem;\n flex-wrap: wrap;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-bottom .footer-copyright {\n display: block;\n color: rgba(255,255,255,0.5);\n font-size: 0.8rem;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-bottom-links {\n display: flex;\n gap: 1.5rem;\n flex-wrap: wrap;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-bottom-links a {\n color: rgba(255,255,255,0.5);\n text-decoration: none;\n font-size: 0.8rem;\n transition: color 0.2s ease-out;\n }\n\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-bottom-links a:hover,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-bottom-links a:focus-visible {\n color: #ffffff;\n outline: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *::before,\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c *::after {\n transition-duration: 0.01ms !important;\n animation-duration: 0.01ms !important;\n }\n }\n\n /* Tablet */\n @media (max-width: 1024px) {\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-wrapper {\n padding: 3rem 1.5rem 0 1.5rem;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-grid {\n grid-template-columns: 1fr 1fr;\n gap: 2.5rem;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-brand {\n grid-column: 1 / -1;\n }\n }\n\n /* Mobil */\n @media (max-width: 768px) {\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-wrapper {\n padding: 2.5rem 1.25rem 0 1.25rem;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-grid {\n grid-template-columns: 1fr;\n gap: 2rem;\n padding-bottom: 2rem;\n }\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-bottom {\n flex-direction: column;\n align-items: flex-start;\n gap: 1rem;\n padding: 1.25rem 0;\n }\n }\n\n /* Kleine Smartphones */\n @media (max-width: 480px) {\n #wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c .footer-wrapper {\n padding: 2rem 1rem 0 1rem;\n }\n }\n</style>\n\n<div id=\"wsw-snippet-04736956-eb46-4a17-a11d-cfc9b95bae2c\">\n <div class=\"footer-wrapper\">\n <div class=\"footer-inner\">\n <div class=\"footer-grid\">\n\n <div class=\"footer-brand\">\n <span class=\"footer-logo\">Seibold Tank Logistik</span>\n <span class=\"footer-brand-desc\">Ihr zuverlässiger Partner für Flüssigtransporte in Nagold und deutschlandweit. Seit über 16 Jahren.</span>\n <div class=\"footer-certifications\">\n <span class=\"footer-cert\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"></path></svg>\n ADR-zertifiziert\n </span>\n </div>\n </div>\n\n <div class=\"footer-col\">\n <h4>Leistungen</h4>\n <ul class=\"footer-links\">\n <li><a href=\"#leistungen\">Flüssigtransporte</a></li>\n <li><a href=\"#fuhrpark\">Fuhrpark</a></li>\n </ul>\n </div>\n\n <div class=\"footer-col\">\n <h4>Unternehmen</h4>\n <ul class=\"footer-links\">\n <li><a href=\"#ueber-uns\">Über uns</a></li>\n <li><a href=\"#kontakt\">Kontakt</a></li>\n </ul>\n </div>\n\n <div class=\"footer-col\">\n <h4>Kontakt</h4>\n <div class=\"footer-contact-list\">\n <div class=\"footer-contact-item\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z\"></path>\n </svg>\n <span><a href=\"tel:+4974523682\">0049 (0) 7452 / 3682</a></span>\n </div>\n <div class=\"footer-contact-item\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z\"></path>\n <path d=\"M22 6l-10 7L2 6\"></path>\n </svg>\n <span><a href=\"mailto:st.seibold@seibold-tank-logistik.de\">st.seibold@seibold-tank-logistik.de</a></span>\n </div>\n <div class=\"footer-contact-item\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"></path>\n <circle cx=\"12\" cy=\"10\" r=\"3\"></circle>\n </svg>\n <span>Neuwiesen 1<br>72202 Nagold</span>\n </div>\n </div>\n </div>\n\n </div>\n\n <div class=\"footer-bottom\">\n <span class=\"footer-copyright\">© 2026 Seibold Tank Logistik. Alle Rechte vorbehalten.</span>\n <div class=\"footer-bottom-links\">\n <a href=\"/impressum\">Impressum</a>\n <a href=\"/datenschutz\">Datenschutz</a>\n </div>\n </div>\n </div>\n </div>\n</div>","summary":null,"version":17,"inserted_version":17,"total_cost":0,"total_messages_sent":21,"summarized_at_total":12}