{"id":97,"date":"2026-05-15T07:24:07","date_gmt":"2026-05-15T07:24:07","guid":{"rendered":"https:\/\/relaunch.werbung.sh\/?page_id=97"},"modified":"2026-05-18T13:54:32","modified_gmt":"2026-05-18T13:54:32","slug":"dark-2","status":"publish","type":"page","link":"https:\/\/relaunch.werbung.sh\/","title":{"rendered":"Dark 2"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n WordPress Relaunch Schleswig-Holstein | werbung.sh \u2013 Deine WordPress-Agentur<\/title>\r\n <meta name=\"description\" content=\"WordPress-Relaunch aus Schleswig-Holstein: Veraltete Homepage modernisieren, SEO verbessern, mehr Kunden gewinnen. WordPress-Spezialisten seit 2000 \u2013 werbung.sh. Jetzt kostenloses Erstgespr\u00e4ch anfragen.\" \/>\r\n <meta name=\"keywords\" content=\"Webseiten Relaunch, Website Relaunch Schleswig-Holstein, Homepage modernisieren, Webdesign Agentur SH, WordPress Relaunch, WordPress Agentur Schleswig-Holstein, Webseite neu gestalten, Rendsburg Webdesign\" \/>\r\n <link rel=\"canonical\" href=\"https:\/\/relaunch.werbung.sh\/\" \/>\r\n\r\n <!-- Open Graph -->\r\n <meta property=\"og:title\" content=\"WordPress Relaunch \u2013 werbung.sh | Deine WordPress-Agentur in Schleswig-Holstein\" \/>\r\n <meta property=\"og:description\" content=\"Deine Webseite verdient einen frischen Start. Wir relaunchen Webseiten, die nicht nur gut aussehen \u2013 sondern Kunden gewinnen. Seit 2000 aus dem Herzen Schleswig-Holsteins.\" \/>\r\n <meta property=\"og:type\" content=\"website\" \/>\r\n <meta property=\"og:url\" content=\"https:\/\/relaunch.werbung.sh\/\" \/>\r\n <meta property=\"og:locale\" content=\"de_DE\" \/>\r\n\r\n <!-- Fonts -->\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\" \/>\r\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin \/>\r\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap\" rel=\"stylesheet\" \/>\r\n<style>\r\n\/* ================================================================\r\n DESIGN TOKENS \u2013 DARK ONLY\r\n================================================================ *\/\r\n:root {\r\n \/* Brand Palette *\/\r\n --color-bg: #0A0F1E;\r\n --color-surface: #0F172A;\r\n --color-surface-2: #1E293B;\r\n --color-surface-offset: #1E293B;\r\n --color-surface-dynamic: #334155;\r\n --color-divider: #1E293B;\r\n --color-border: #334155;\r\n\r\n --color-text: #F1F5F9;\r\n --color-text-muted: #94A3B8;\r\n --color-text-faint: #64748B;\r\n --color-text-inverse: #0F172A;\r\n\r\n \/* Brand *\/\r\n --color-navy: #1C2849;\r\n --color-navy-mid: #24355F;\r\n --color-navy-light: #31456F;\r\n\r\n --color-accent: #1A9DD9;\r\n --color-accent-hover: #49B7EB;\r\n --color-accent-active: #77CDF5;\r\n --color-accent-glow: rgba(26,157,217,0.18);\r\n --color-accent-subtle: rgba(26,157,217,0.10);\r\n\r\n \/* Optional Purple Accent *\/\r\n --color-purple: #8B6BFF;\r\n --color-purple-light: rgba(139,107,255,0.14);\r\n --color-purple-glow: rgba(139,107,255,0.22);\r\n\r\n \/* Status \u2013 kein Gelb *\/\r\n --color-success: #1A9DD9;\r\n --color-success-light: rgba(26,157,217,0.12);\r\n --color-warn: #1A9DD9;\r\n --color-warn-light: rgba(26,157,217,0.12);\r\n\r\n \/* Type *\/\r\n --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;\r\n --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;\r\n\r\n \/* Scale *\/\r\n --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);\r\n --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);\r\n --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);\r\n --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);\r\n --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);\r\n --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);\r\n --text-3xl: clamp(2.5rem, 1rem + 4vw, 5rem);\r\n\r\n \/* Spacing *\/\r\n --space-1: 0.25rem;\r\n --space-2: 0.5rem;\r\n --space-3: 0.75rem;\r\n --space-4: 1rem;\r\n --space-5: 1.25rem;\r\n --space-6: 1.5rem;\r\n --space-8: 2rem;\r\n --space-10: 2.5rem;\r\n --space-12: 3rem;\r\n --space-16: 4rem;\r\n --space-20: 5rem;\r\n --space-24: 6rem;\r\n\r\n \/* Radii *\/\r\n --radius-sm: 0.375rem;\r\n --radius-md: 0.5rem;\r\n --radius-lg: 0.75rem;\r\n --radius-xl: 1rem;\r\n --radius-2xl: 1.5rem;\r\n --radius-full: 9999px;\r\n\r\n \/* Shadows *\/\r\n --shadow-sm: 0 1px 3px rgba(0,0,0,0.30);\r\n --shadow-md: 0 4px 16px rgba(0,0,0,0.40);\r\n --shadow-lg: 0 12px 40px rgba(0,0,0,0.50);\r\n --shadow-xl: 0 24px 64px rgba(0,0,0,0.60);\r\n\r\n \/* Layout *\/\r\n --content-narrow: 640px;\r\n --content-default: 960px;\r\n --content-wide: 1200px;\r\n\r\n --transition: 200ms cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n\r\n\/* ================================================================\r\n RESET \/ BASE\r\n================================================================ *\/\r\n*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }\r\n\r\nhtml {\r\n -webkit-font-smoothing: antialiased;\r\n -moz-osx-font-smoothing: grayscale;\r\n text-rendering: optimizeLegibility;\r\n scroll-behavior: smooth;\r\n scroll-padding-top: 80px;\r\n hanging-punctuation: first last;\r\n}\r\n\r\nbody {\r\n min-height: 100dvh;\r\n font-family: var(--font-body);\r\n font-size: var(--text-base);\r\n line-height: 1.6;\r\n color: var(--color-text);\r\n background: var(--color-bg);\r\n}\r\n\r\nimg, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; }\r\nul[role='list'], ol[role='list'] { list-style: none; }\r\ninput, button, textarea, select { font: inherit; color: inherit; }\r\n\r\nh1, h2, h3, h4, h5, h6 {\r\n text-wrap: balance;\r\n line-height: 1.15;\r\n font-weight: 700;\r\n}\r\np, li, figcaption { text-wrap: pretty; max-width: 72ch; }\r\n\r\n::selection { background: var(--color-accent-glow); color: var(--color-text); }\r\n:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: var(--radius-sm); }\r\n\r\nbutton { cursor: pointer; background: none; border: none; }\r\n\r\na { color: var(--color-accent); text-decoration: none; transition: color var(--transition); }\r\na:hover { color: var(--color-accent-hover); }\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n *, *::before, *::after {\r\n animation-duration: 0.01ms !important;\r\n animation-iteration-count: 1 !important;\r\n transition-duration: 0.01ms !important;\r\n scroll-behavior: auto !important;\r\n }\r\n}\r\n\r\n.sr-only {\r\n position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;\r\n overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0;\r\n}\r\n\r\n\/* ================================================================\r\n LAYOUT\r\n================================================================ *\/\r\n.container {\r\n width: 100%;\r\n max-width: var(--content-wide);\r\n margin-inline: auto;\r\n padding-inline: clamp(var(--space-5), 5vw, var(--space-12));\r\n}\r\n\r\n\/* ================================================================\r\n BUTTONS\r\n================================================================ *\/\r\n.btn {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--space-2);\r\n padding: 0.625rem 1.25rem;\r\n font-size: var(--text-sm);\r\n font-weight: 600;\r\n border-radius: var(--radius-lg);\r\n border: 2px solid transparent;\r\n cursor: pointer;\r\n transition: all var(--transition);\r\n text-decoration: none;\r\n white-space: nowrap;\r\n}\r\n.btn-sm { padding: 0.4rem 0.875rem; font-size: var(--text-xs); }\r\n.btn-lg { padding: 0.875rem 1.75rem; font-size: var(--text-sm); border-radius: var(--radius-xl); }\r\n\r\n.btn-primary {\r\n background: var(--color-accent);\r\n color: #fff;\r\n border-color: var(--color-accent);\r\n box-shadow: 0 4px 16px var(--color-accent-glow);\r\n}\r\n.btn-primary:hover {\r\n background: var(--color-accent-hover);\r\n border-color: var(--color-accent-hover);\r\n color: #fff;\r\n transform: translateY(-1px);\r\n box-shadow: 0 6px 24px var(--color-accent-glow);\r\n}\r\n.btn-primary:active { transform: translateY(0); }\r\n\r\n.btn-ghost {\r\n background: transparent;\r\n color: var(--color-text);\r\n border-color: var(--color-border);\r\n}\r\n.btn-ghost:hover {\r\n background: var(--color-surface-2);\r\n border-color: var(--color-text-muted);\r\n color: var(--color-text);\r\n}\r\n\r\n.btn-submit {\r\n width: 100%;\r\n justify-content: center;\r\n font-size: var(--text-base);\r\n padding: 1rem 2rem;\r\n}\r\n\r\n\/* ================================================================\r\n HEADER\r\n================================================================ *\/\r\n.site-header {\r\n position: sticky;\r\n top: 0;\r\n z-index: 100;\r\n background: color-mix(in srgb, var(--color-bg) 90%, transparent);\r\n backdrop-filter: blur(12px);\r\n -webkit-backdrop-filter: blur(12px);\r\n border-bottom: 1px solid var(--color-divider);\r\n transition: box-shadow var(--transition);\r\n}\r\n.site-header.scrolled { box-shadow: var(--shadow-md); }\r\n\r\n.header-inner {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n height: 68px;\r\n gap: var(--space-6);\r\n}\r\n\r\n.logo { color: var(--color-text); text-decoration: none; flex-shrink: 0; }\r\n.logo:hover { color: var(--color-text); }\r\n.logo svg text { font-family: 'Plus Jakarta Sans', sans-serif; }\r\n\r\n.header-nav {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--space-6);\r\n font-size: var(--text-sm);\r\n font-weight: 500;\r\n}\r\n.header-nav a { color: var(--color-text-muted); transition: color var(--transition); }\r\n.header-nav a:hover { color: var(--color-text); }\r\n\r\n.nav-toggle {\r\n display: none;\r\n flex-direction: column;\r\n gap: 5px;\r\n width: 28px;\r\n padding: var(--space-2);\r\n}\r\n.nav-toggle span {\r\n display: block;\r\n height: 2px;\r\n background: var(--color-text);\r\n border-radius: 2px;\r\n transition: all var(--transition);\r\n}\r\n\r\n.mobile-nav {\r\n display: none;\r\n flex-direction: column;\r\n gap: var(--space-1);\r\n padding: var(--space-4) var(--space-5) var(--space-5);\r\n border-top: 1px solid var(--color-divider);\r\n background: var(--color-bg);\r\n}\r\n.mobile-nav a {\r\n padding: var(--space-3) var(--space-4);\r\n color: var(--color-text-muted);\r\n font-weight: 500;\r\n border-radius: var(--radius-md);\r\n transition: background var(--transition), color var(--transition);\r\n}\r\n.mobile-nav a:hover { background: var(--color-surface-2); color: var(--color-text); }\r\n.mobile-nav .btn { margin-top: var(--space-3); }\r\n\r\n@media (max-width: 768px) {\r\n .header-nav { display: none; }\r\n .nav-toggle { display: flex; }\r\n .mobile-nav.is-open { display: flex; }\r\n}\r\n\r\n\/* ================================================================\r\n HERO\r\n================================================================ *\/\r\n.hero {\r\n position: relative;\r\n min-height: clamp(600px, 90vh, 900px);\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n align-items: center;\r\n gap: var(--space-16);\r\n padding-block: clamp(var(--space-16), 8vw, var(--space-24));\r\n padding-inline: clamp(var(--space-5), 5vw, var(--space-12));\r\n max-width: var(--content-wide);\r\n margin-inline: auto;\r\n overflow: hidden;\r\n}\r\n\r\n.hero-bg {\r\n position: absolute;\r\n inset: 0;\r\n z-index: 0;\r\n overflow: hidden;\r\n}\r\n.hero-gradient {\r\n position: absolute;\r\n inset: 0;\r\n background: radial-gradient(ellipse 80% 70% at 60% 40%, var(--color-accent-glow) 0%, transparent 70%),\r\n radial-gradient(ellipse 40% 40% at 20% 80%, rgba(37,99,235,0.06) 0%, transparent 60%);\r\n}\r\n.hero-grid {\r\n position: absolute;\r\n inset: 0;\r\n background-image:\r\n linear-gradient(var(--color-divider) 1px, transparent 1px),\r\n linear-gradient(90deg, var(--color-divider) 1px, transparent 1px);\r\n background-size: 40px 40px;\r\n opacity: 0.4;\r\n mask-image: radial-gradient(ellipse 70% 70% at 60% 40%, black 0%, transparent 80%);\r\n}\r\n\r\n.hero-content {\r\n position: relative;\r\n z-index: 1;\r\n max-width: none;\r\n padding: 0;\r\n}\r\n\r\n.hero-badge {\r\n display: inline-flex;\r\n align-items: center;\r\n gap: var(--space-2);\r\n padding: var(--space-2) var(--space-4);\r\n background: var(--color-accent-subtle);\r\n border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);\r\n border-radius: var(--radius-full);\r\n font-size: var(--text-xs);\r\n font-weight: 600;\r\n color: var(--color-accent);\r\n margin-bottom: var(--space-6);\r\n letter-spacing: 0.02em;\r\n}\r\n\r\n.hero-headline {\r\n font-size: var(--text-3xl);\r\n font-weight: 800;\r\n line-height: 1.1;\r\n color: var(--color-text);\r\n margin-bottom: var(--space-5);\r\n letter-spacing: -0.03em;\r\n}\r\n.headline-accent { color: var(--color-accent); }\r\n\r\n.hero-sub {\r\n font-size: var(--text-base);\r\n color: var(--color-text-muted);\r\n line-height: 1.7;\r\n margin-bottom: var(--space-8);\r\n max-width: 50ch;\r\n}\r\n.hero-sub strong { color: var(--color-text); font-weight: 600; }\r\n\r\n.hero-ctas {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: var(--space-3);\r\n margin-bottom: var(--space-8);\r\n}\r\n\r\n.hero-trust {\r\n display: flex;\r\n flex-wrap: wrap;\r\n gap: var(--space-4) var(--space-6);\r\n}\r\n.trust-item {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--space-2);\r\n font-size: var(--text-xs);\r\n font-weight: 500;\r\n color: var(--color-text-muted);\r\n}\r\n\r\n\/* HERO VISUAL *\/\r\n.hero-visual {\r\n position: relative;\r\n z-index: 1;\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.browser-mockup {\r\n width: 100%;\r\n max-width: 480px;\r\n background: var(--color-surface);\r\n border-radius: var(--radius-2xl);\r\n box-shadow: var(--shadow-xl), 0 0 0 1px var(--color-border);\r\n overflow: hidden;\r\n}\r\n.browser-bar {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--space-2);\r\n padding: var(--space-3) var(--space-4);\r\n background: var(--color-surface-2);\r\n border-bottom: 1px solid var(--color-border);\r\n}\r\n.dot {\r\n width: 10px; height: 10px;\r\n border-radius: var(--radius-full);\r\n}\r\n.dot.red { background: #FF5F57; }\r\n.dot.yellow, .dot.purple { background: #8B6BFF; }\r\n.dot.green { background: #28C840; }\r\n.url-bar {\r\n flex: 1;\r\n background: var(--color-bg);\r\n border-radius: var(--radius-md);\r\n padding: var(--space-1) var(--space-3);\r\n font-size: var(--text-xs);\r\n color: var(--color-text-muted);\r\n border: 1px solid var(--color-border);\r\n}\r\n.browser-content { padding: var(--space-6); }\r\n\r\n.before-after {\r\n display: grid;\r\n grid-template-columns: 1fr auto 1fr;\r\n align-items: center;\r\n gap: var(--space-4);\r\n}\r\n.ba-side { display: flex; flex-direction: column; gap: var(--space-3); }\r\n.ba-label {\r\n font-size: var(--text-xs);\r\n font-weight: 700;\r\n letter-spacing: 0.08em;\r\n text-transform: uppercase;\r\n color: var(--color-text-faint);\r\n}\r\n.ba-lines { display: flex; flex-direction: column; gap: var(--space-2); }\r\n.ba-line {\r\n height: 8px;\r\n border-radius: var(--radius-full);\r\n transition: opacity 0.3s;\r\n}\r\n.ba-block {\r\n height: 60px;\r\n border-radius: var(--radius-md);\r\n margin-block: var(--space-1);\r\n}\r\n.ba-line.old, .ba-block.old { background: var(--color-surface-dynamic); }\r\n.ba-line.new, .ba-block.new { background: var(--color-accent-glow); border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent); }\r\n.ba-block.new { background: linear-gradient(135deg, var(--color-accent-glow), color-mix(in srgb, var(--color-accent) 20%, transparent)); }\r\n.w-80 { width: 80%; }\r\n.w-75 { width: 75%; }\r\n.w-60 { width: 60%; }\r\n.w-55 { width: 55%; }\r\n.w-90 { width: 90%; }\r\n.w-85 { width: 85%; }\r\n.w-50 { width: 50%; }\r\n.w-45 { width: 45%; }\r\n\r\n.ba-divider {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 32px;\r\n height: 32px;\r\n border-radius: var(--radius-full);\r\n background: var(--color-accent-subtle);\r\n border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);\r\n flex-shrink: 0;\r\n}\r\n\r\n.metric-badge {\r\n position: absolute;\r\n display: flex;\r\n align-items: center;\r\n gap: var(--space-2);\r\n padding: var(--space-2) var(--space-3);\r\n background: var(--color-surface);\r\n border: 1px solid var(--color-border);\r\n border-radius: var(--radius-lg);\r\n box-shadow: var(--shadow-md);\r\n font-size: var(--text-xs);\r\n font-weight: 600;\r\n white-space: nowrap;\r\n}\r\n.metric-1 { bottom: -16px; left: -20px; }\r\n.metric-2 { top: -16px; right: -20px; }\r\n\r\n@media (max-width: 900px) {\r\n .hero {\r\n grid-template-columns: 1fr;\r\n min-height: auto;\r\n padding-block: var(--space-16);\r\n }\r\n .hero-visual { display: none; }\r\n .hero-headline { font-size: var(--text-2xl); }\r\n}\r\n\r\n\/* ================================================================\r\n SECTION SHARED\r\n================================================================ *\/\r\n.section-header {\r\n text-align: center;\r\n margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));\r\n}\r\n.section-header--light .section-eyebrow { color: rgba(255,255,255,0.7); }\r\n.section-header--light h2 { color: #fff; }\r\n.section-header--light .section-lead { color: rgba(255,255,255,0.65); }\r\n\r\n.section-eyebrow {\r\n display: inline-block;\r\n font-size: var(--text-xs);\r\n font-weight: 700;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: var(--color-accent);\r\n margin-bottom: var(--space-3);\r\n}\r\n.section-eyebrow--light { color: rgba(255,255,255,0.7); }\r\n\r\n.section-header h2 {\r\n font-size: var(--text-2xl);\r\n font-weight: 800;\r\n letter-spacing: -0.03em;\r\n color: var(--color-text);\r\n margin-bottom: var(--space-4);\r\n}\r\n.section-lead {\r\n font-size: var(--text-base);\r\n color: var(--color-text-muted);\r\n max-width: 55ch;\r\n margin-inline: auto;\r\n line-height: 1.7;\r\n}\r\n\r\n\/* ================================================================\r\n PAIN POINTS\r\n================================================================ *\/\r\n.pain-section {\r\n padding-block: clamp(var(--space-16), 8vw, var(--space-24));\r\n background: var(--color-bg);\r\n}\r\n\r\n.pain-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: var(--space-5);\r\n}\r\n\r\n.pain-card {\r\n background: var(--color-surface);\r\n border: 1px solid var(--color-border);\r\n border-radius: var(--radius-xl);\r\n padding: var(--space-6);\r\n transition: transform var(--transition), box-shadow var(--transition);\r\n}\r\n.pain-card:hover {\r\n transform: translateY(-3px);\r\n box-shadow: var(--shadow-lg);\r\n}\r\n.pain-card--warn {\r\n border-top: 3px solid var(--color-warn);\r\n}\r\n.pain-card--warn .pain-icon {\r\n color: var(--color-warn);\r\n background: var(--color-warn-light);\r\n}\r\n\r\n.pain-icon {\r\n width: 48px; height: 48px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n border-radius: var(--radius-lg);\r\n margin-bottom: var(--space-4);\r\n}\r\n\r\n.pain-card h3 {\r\n font-size: var(--text-base);\r\n font-weight: 700;\r\n margin-bottom: var(--space-2);\r\n color: var(--color-text);\r\n}\r\n.pain-card p {\r\n font-size: var(--text-sm);\r\n color: var(--color-text-muted);\r\n line-height: 1.65;\r\n}\r\n\r\n.pain-cta {\r\n text-align: center;\r\n margin-top: clamp(var(--space-10), 5vw, var(--space-16));\r\n}\r\n\r\n\/* ================================================================\r\n PROCESS \u2013 2 SPALTEN + DETAILS PER HOVER\/KLICK\r\n================================================================ *\/\r\n\r\n.process-section {\r\n padding-block: clamp(var(--space-16), 8vw, var(--space-24));\r\n background:\r\n radial-gradient(circle at 50% 0%, rgba(37,99,235,0.16), transparent 42%),\r\n #16233b;\r\n overflow: hidden;\r\n}\r\n\r\n.process-section .section-header {\r\n margin-bottom: 70px;\r\n}\r\n\r\n.process-section .section-eyebrow {\r\n color: rgba(255,255,255,0.65);\r\n}\r\n\r\n.process-section h2 {\r\n color: #fff;\r\n}\r\n\r\n.process-section .section-lead {\r\n color: rgba(255,255,255,0.68);\r\n}\r\n\r\n.process-steps {\r\n display: grid;\r\n grid-template-columns: repeat(2, minmax(0, 1fr));\r\n gap: 42px;\r\n}\r\n\r\n.process-step {\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 24px;\r\n padding: 42px;\r\n background:\r\n linear-gradient(\r\n 180deg,\r\n rgba(51,65,85,0.88),\r\n rgba(30,41,59,0.96)\r\n );\r\n\r\n border: 1px solid rgba(148,163,184,0.16);\r\n\r\n transition:\r\n transform .28s ease,\r\n border-color .28s ease,\r\n box-shadow .28s ease;\r\n}\r\n\r\n.process-step:hover {\r\n transform: translateY(-6px);\r\n\r\n border-color: rgba(96,165,250,0.45);\r\n\r\n box-shadow:\r\n 0 30px 70px rgba(0,0,0,0.30),\r\n 0 0 0 1px rgba(96,165,250,0.12);\r\n}\r\n\/* Gro\u00dfe Hintergrundzahl *\/\r\n\r\n.step-number {\r\n position: absolute;\r\n top: 38px;\r\n right: 42px;\r\n\r\n font-size: clamp(5rem, 9vw, 7rem);\r\n font-weight: 800;\r\n line-height: 1;\r\n\r\n color: rgba(255,255,255,0.045);\r\n\r\n letter-spacing: -0.06em;\r\n\r\n pointer-events: none;\r\n\r\n z-index: 1;\r\n}\r\n\r\n\/* Icon *\/\r\n\r\n.step-icon {\r\n position: relative;\r\n z-index: 2;\r\n\r\n width: 56px;\r\n height: 56px;\r\n\r\n border-radius: 18px;\r\n\r\n display: flex;\r\n\r\n justify-content: center;\r\n\r\n background: rgba(37,99,235,0.12);\r\n\r\n border: 1px solid rgba(96,165,250,0.22);\r\n\r\n color: #60A5FA;\r\n\r\n margin-top: 20px;\r\n\r\n margin-bottom: 28px;\r\n}\r\n\/* Titel *\/\r\n\r\n.step-content {\r\n position: relative;\r\n z-index: 2;\r\n}\r\n\r\n.step-content h3 {\r\n font-size: clamp(1.6rem, 2vw, 2rem);\r\n line-height: 1.1;\r\n font-weight: 800;\r\n\r\n color: #fff;\r\n\r\n margin-bottom: 24px;\r\n}\r\n\r\n\/* Beschreibung *\/\r\n\r\n.step-content p {\r\n font-size: 1.05rem;\r\n line-height: 1.8;\r\n\r\n color: rgba(255,255,255,0.72);\r\n\r\n margin-bottom: 28px;\r\n\r\n max-width: 95%;\r\n}\r\n\r\n\/* Liste *\/\r\n\r\n.step-list {\r\n list-style: none;\r\n\r\n display: flex;\r\n flex-direction: column;\r\n\r\n gap: 14px;\r\n}\r\n\r\n.step-list li {\r\n position: relative;\r\n\r\n padding-left: 28px;\r\n\r\n font-size: 0.98rem;\r\n line-height: 1.65;\r\n\r\n color: rgba(255,255,255,0.62);\r\n}\r\n\r\n.step-list li::before {\r\n content: '\u2192';\r\n\r\n position: absolute;\r\n left: 0;\r\n top: 0;\r\n\r\n color: #60A5FA;\r\n\r\n font-weight: 700;\r\n}\r\n\r\n\/* Responsive *\/\r\n\r\n@media (max-width: 980px) {\r\n\r\n .process-steps {\r\n grid-template-columns: 1fr;\r\n }\r\n\r\n .process-step {\r\n padding: 34px;\r\n }\r\n\r\n .step-content h3 {\r\n font-size: 1.55rem;\r\n }\r\n\r\n .step-content p {\r\n max-width: 100%;\r\n }\r\n}\r\n\r\n@media (max-width: 640px) {\r\n\r\n .process-section .section-header {\r\n margin-bottom: 50px;\r\n }\r\n\r\n .process-step {\r\n padding: 28px;\r\n border-radius: 20px;\r\n }\r\n\r\n .step-number {\r\n font-size: 4.5rem;\r\n top: 18px;\r\n RIGHT: 24px;\r\n }\r\n\r\n .step-icon {\r\n width: 50px;\r\n height: 50px;\r\n border-radius: 16px;\r\n margin-bottom: 22px;\r\n }\r\n\r\n .step-content h3 {\r\n font-size: 1.4rem;\r\n margin-bottom: 18px;\r\n }\r\n\r\n .step-content p {\r\n font-size: 1rem;\r\n line-height: 1.7;\r\n }\r\n\r\n .step-list li {\r\n font-size: 0.94rem;\r\n }\r\n}\r\n\r\n\/* ================================================================\r\n SERVICES\r\n================================================================ *\/\r\n.services-section {\r\n padding-block: clamp(var(--space-16), 8vw, var(--space-24));\r\n background: var(--color-surface-2);\r\n}\r\n\r\n.services-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: var(--space-5);\r\n}\r\n\r\n.service-card {\r\n background: var(--color-surface);\r\n border: 1px solid var(--color-border);\r\n border-radius: var(--radius-xl);\r\n padding: 30px;\r\n transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);\r\n}\r\n.service-card:hover {\r\n transform: translateY(-4px);\r\n box-shadow: var(--shadow-lg);\r\n border-color: var(--color-accent);\r\n}\r\n\r\n.service-icon {\r\n width: 52px; height: 52px;\r\n background: var(--color-accent-subtle);\r\n border: 1px solid color-mix(in srgb, var(--color-accent) 20%, transparent);\r\n border-radius: var(--radius-lg);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: var(--color-accent);\r\n margin-bottom: var(--space-4);\r\n}\r\n\r\n.service-card h3 {\r\n font-size: var(--text-base);\r\n font-weight: 700;\r\n margin-bottom: var(--space-2);\r\n}\r\n.service-card p {\r\n font-size: var(--text-sm);\r\n color: var(--color-text-muted);\r\n line-height: 1.65;\r\n}\r\n\r\n\/* ================================================================\r\n WHY US\r\n================================================================ *\/\r\n.why-section {\r\n padding-block: clamp(var(--space-16), 8vw, var(--space-24));\r\n background: var(--color-navy);\r\n}\r\n\r\n.why-inner {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: clamp(var(--space-10), 6vw, var(--space-20));\r\n align-items: center;\r\n}\r\n\r\n.why-text p {\r\n font-size: var(--text-base);\r\n color: rgba(255,255,255,0.65);\r\n line-height: 1.75;\r\n margin-bottom: var(--space-5);\r\n}\r\n\r\n.why-heading {\r\n font-size: var(--text-2xl);\r\n font-weight: 800;\r\n color: #fff;\r\n letter-spacing: -0.03em;\r\n margin-bottom: var(--space-6);\r\n}\r\n\r\n.why-list {\r\n list-style: none;\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--space-3);\r\n margin-bottom: var(--space-8);\r\n}\r\n.why-list li {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--space-3);\r\n font-size: var(--text-sm);\r\n font-weight: 500;\r\n color: rgba(255,255,255,0.8);\r\n max-width: none;\r\n}\r\n\r\n.why-stats {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: var(--space-4);\r\n}\r\n\r\n.stat-card {\r\n background: color-mix(in srgb, var(--color-navy-mid) 80%, transparent);\r\n border: 1px solid var(--color-navy-light);\r\n border-radius: var(--radius-xl);\r\n padding: var(--space-6);\r\n text-align: center;\r\n transition: border-color var(--transition), transform var(--transition);\r\n}\r\n.stat-card:hover { border-color: var(--color-accent); transform: translateY(-2px); }\r\n\r\n.stat-number {\r\n font-size: var(--text-2xl);\r\n font-weight: 800;\r\n color: var(--color-accent);\r\n line-height: 1;\r\n margin-bottom: var(--space-2);\r\n letter-spacing: -0.04em;\r\n}\r\n.stat-number { color: #60A5FA; }\r\n\r\n.stat-label {\r\n font-size: var(--text-xs);\r\n color: rgba(255,255,255,0.5);\r\n font-weight: 500;\r\n}\r\n\r\n@media (max-width: 768px) {\r\n .why-inner { grid-template-columns: 1fr; }\r\n .why-stats { margin-top: var(--space-8); }\r\n}\r\n\r\n\/* ================================================================\r\n TESTIMONIALS\r\n================================================================ *\/\r\n.testimonials-section {\r\n padding-block: clamp(var(--space-16), 8vw, var(--space-24));\r\n background: var(--color-bg);\r\n}\r\n\r\n.testimonials-grid {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));\r\n gap: var(--space-5);\r\n}\r\n\r\n.testimonial-card {\r\n background: var(--color-surface);\r\n border: 1px solid var(--color-border);\r\n border-radius: var(--radius-xl);\r\n padding: var(--space-6);\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--space-4);\r\n transition: transform var(--transition), box-shadow var(--transition);\r\n}\r\n.testimonial-card:hover {\r\n transform: translateY(-3px);\r\n box-shadow: var(--shadow-md);\r\n}\r\n\r\n.testimonial-stars {\r\n display: flex;\r\n gap: var(--space-1);\r\n}\r\n\r\n.testimonial-card > p {\r\n font-size: var(--text-sm);\r\n color: var(--color-text-muted);\r\n line-height: 1.7;\r\n font-style: italic;\r\n flex: 1;\r\n}\r\n\r\n.testimonial-card footer {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--space-3);\r\n border-top: 1px solid var(--color-divider);\r\n padding-top: var(--space-4);\r\n}\r\n\r\n.testimonial-avatar {\r\n width: 40px; height: 40px;\r\n border-radius: var(--radius-full);\r\n background: var(--color-accent);\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: var(--text-xs);\r\n font-weight: 700;\r\n flex-shrink: 0;\r\n}\r\n\r\n.testimonial-name {\r\n font-size: var(--text-sm);\r\n font-weight: 700;\r\n font-style: normal;\r\n color: var(--color-text);\r\n}\r\n.testimonial-company {\r\n font-size: var(--text-xs);\r\n color: var(--color-text-muted);\r\n}\r\n\r\n\/* ================================================================\r\n FAQ\r\n================================================================ *\/\r\n.faq-section {\r\n padding-block: clamp(var(--space-16), 8vw, var(--space-24));\r\n background: var(--color-surface-2);\r\n}\r\n\r\n.faq-container {\r\n max-width: var(--content-default);\r\n}\r\n\r\n.faq-list {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--space-3);\r\n}\r\n\r\n.faq-item {\r\n background: var(--color-surface);\r\n border: 1px solid var(--color-border);\r\n border-radius: var(--radius-xl);\r\n overflow: hidden;\r\n transition: border-color var(--transition);\r\n}\r\n.faq-item:has(.faq-question[aria-expanded=\"true\"]) {\r\n border-color: var(--color-accent);\r\n}\r\n\r\n.faq-question {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n gap: var(--space-4);\r\n padding: var(--space-5) var(--space-6);\r\n text-align: left;\r\n cursor: pointer;\r\n color: var(--color-text);\r\n font-size: var(--text-base);\r\n font-weight: 600;\r\n transition: background var(--transition);\r\n}\r\n.faq-question:hover { background: var(--color-surface-2); }\r\n\r\n.faq-icon {\r\n flex-shrink: 0;\r\n transition: rotate var(--transition);\r\n color: var(--color-text-muted);\r\n}\r\n.faq-question[aria-expanded=\"true\"] .faq-icon { rotate: 180deg; color: var(--color-accent); }\r\n\r\n.faq-answer {\r\n padding: 0 var(--space-6) var(--space-6);\r\n}\r\n.faq-answer p {\r\n font-size: var(--text-sm);\r\n color: var(--color-text-muted);\r\n line-height: 1.75;\r\n}\r\n.faq-answer p strong { color: var(--color-text); }\r\n.faq-answer[hidden] { display: none; }\r\n\r\n\/* ================================================================\r\n CONTACT\r\n================================================================ *\/\r\n.contact-section {\r\n padding-block: clamp(var(--space-16), 8vw, var(--space-24));\r\n background: var(--color-navy);\r\n}\r\n\r\n.contact-inner {\r\n display: grid;\r\n grid-template-columns: 1fr 1.2fr;\r\n gap: clamp(var(--space-10), 6vw, var(--space-20));\r\n align-items: start;\r\n}\r\n\r\n.contact-heading {\r\n font-size: var(--text-2xl);\r\n font-weight: 800;\r\n color: #fff;\r\n letter-spacing: -0.03em;\r\n margin-bottom: var(--space-5);\r\n}\r\n\r\n.contact-text > p {\r\n font-size: var(--text-base);\r\n color: rgba(255,255,255,0.65);\r\n line-height: 1.75;\r\n margin-bottom: var(--space-8);\r\n}\r\n\r\n.contact-info {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--space-3);\r\n}\r\n.contact-info-item {\r\n display: flex;\r\n align-items: center;\r\n gap: var(--space-3);\r\n font-size: var(--text-sm);\r\n font-weight: 500;\r\n color: rgba(255,255,255,0.7);\r\n}\r\n\r\n.contact-form-wrapper {\r\n background: var(--color-surface);\r\n border-radius: var(--radius-2xl);\r\n padding: clamp(var(--space-6), 4vw, var(--space-10));\r\n box-shadow: var(--shadow-xl);\r\n}\r\n\r\n.contact-form {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--space-5);\r\n}\r\n\r\n.form-row {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr;\r\n gap: var(--space-4);\r\n}\r\n\r\n.form-group {\r\n display: flex;\r\n flex-direction: column;\r\n gap: var(--space-2);\r\n}\r\n.form-group--checkbox { flex-direction: column; gap: var(--space-2); }\r\n\r\nlabel {\r\n font-size: var(--text-sm);\r\n font-weight: 600;\r\n color: var(--color-text);\r\n}\r\n\r\ninput, textarea, select {\r\n padding: 0.625rem var(--space-4);\r\n background: var(--color-bg);\r\n border: 1.5px solid var(--color-border);\r\n border-radius: var(--radius-lg);\r\n font-size: var(--text-sm);\r\n color: var(--color-text);\r\n transition: border-color var(--transition), box-shadow var(--transition);\r\n -webkit-appearance: none;\r\n appearance: none;\r\n}\r\nselect {\r\n background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394A3B8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'\/%3E%3C\/svg%3E\");\r\n background-repeat: no-repeat;\r\n background-position: right 0.75rem center;\r\n padding-right: 2.5rem;\r\n}\r\ninput:focus, textarea:focus, select:focus {\r\n outline: none;\r\n border-color: var(--color-accent);\r\n box-shadow: 0 0 0 3px var(--color-accent-glow);\r\n}\r\ninput.error, textarea.error, select.error {\r\n border-color: #DC2626;\r\n}\r\ntextarea { resize: vertical; min-height: 120px; line-height: 1.6; }\r\ninput::placeholder, textarea::placeholder { color: var(--color-text-faint); }\r\n\r\n.form-error {\r\n font-size: var(--text-xs);\r\n color: #DC2626;\r\n font-weight: 500;\r\n display: none;\r\n}\r\n.form-error:not(:empty) { display: block; }\r\n\r\n.checkbox-label {\r\n display: flex;\r\n align-items: flex-start;\r\n gap: var(--space-3);\r\n cursor: pointer;\r\n font-size: var(--text-xs);\r\n font-weight: 400;\r\n color: var(--color-text-muted);\r\n line-height: 1.6;\r\n}\r\n.checkbox-label input[type=\"checkbox\"] {\r\n width: 18px;\r\n height: 18px;\r\n padding: 0;\r\n flex-shrink: 0;\r\n cursor: pointer;\r\n border-radius: var(--radius-sm);\r\n margin-top: 2px;\r\n accent-color: var(--color-accent);\r\n}\r\n.checkbox-label a { color: var(--color-accent); text-decoration: underline; }\r\n\r\n.btn-submit .btn-loading { display: none; }\r\n.btn-submit.loading .btn-text, .btn-submit.loading .btn-icon { display: none; }\r\n.btn-submit.loading .btn-loading { display: flex; animation: spin 0.8s linear infinite; }\r\n\r\n@keyframes spin { to { rotate: 360deg; } }\r\n\r\n.form-note {\r\n font-size: var(--text-xs);\r\n color: var(--color-text-faint);\r\n text-align: center;\r\n max-width: none;\r\n}\r\n\r\n.form-success {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n gap: var(--space-3);\r\n padding: var(--space-8);\r\n}\r\n.form-success[hidden] { display: none; }\r\n.form-success h3 { font-size: var(--text-lg); font-weight: 700; }\r\n.form-success p { font-size: var(--text-sm); color: var(--color-text-muted); max-width: 40ch; margin-inline: auto; }\r\n\r\n@media (max-width: 900px) {\r\n .contact-inner { grid-template-columns: 1fr; }\r\n .form-row { grid-template-columns: 1fr; }\r\n}\r\n\r\n\/* ================================================================\r\n FOOTER \u2013 3 SPALTEN DESKTOP \/ 1 SPALTE MOBIL\r\n================================================================ *\/\r\n.site-footer {\r\n background:\r\n linear-gradient(180deg, #1C2849 0%, #10182E 100%);\r\n border-top: 1px solid rgba(255,255,255,0.08);\r\n}\r\n\r\n\/* Desktop: 3 Hauptspalten\r\n 1 = Brand\r\n 2 = Leistungen + Infos\r\n 3 = Rechtliches\r\n*\/\r\n.footer-inner {\r\n display: grid;\r\n grid-template-columns: 1.25fr 1.4fr 0.8fr;\r\n gap: clamp(28px, 4vw, 56px);\r\n align-items: start;\r\n padding-block: clamp(48px, 6vw, 72px);\r\n}\r\n\r\n\/* Brand *\/\r\n.footer-brand {\r\n min-width: 0;\r\n}\r\n\r\n.footer-brand .logo--footer {\r\n display: inline-flex;\r\n margin-bottom: 18px;\r\n}\r\n\r\n.footer-brand p {\r\n font-size: 0.95rem;\r\n line-height: 1.75;\r\n color: rgba(255,255,255,0.62);\r\n max-width: 38ch;\r\n}\r\n\r\n\/* Navigation *\/\r\n.footer-nav {\r\n display: grid;\r\n grid-template-columns: 1fr 1fr 0.8fr;\r\n gap: clamp(22px, 3vw, 40px);\r\n grid-column: span 2;\r\n}\r\n\r\n.footer-col h4 {\r\n font-size: 0.78rem;\r\n font-weight: 800;\r\n letter-spacing: 0.12em;\r\n text-transform: uppercase;\r\n color: rgba(255,255,255,0.42);\r\n margin-bottom: 16px;\r\n}\r\n\r\n.footer-col ul {\r\n list-style: none;\r\n display: flex;\r\n flex-direction: column;\r\n gap: 10px;\r\n}\r\n\r\n.footer-col a {\r\n display: inline-block;\r\n font-size: 0.92rem;\r\n line-height: 1.45;\r\n color: rgba(255,255,255,0.66);\r\n text-decoration: none;\r\n transition: color 180ms ease, transform 180ms ease;\r\n}\r\n\r\n.footer-col a:hover {\r\n color: var(--color-accent);\r\n transform: translateX(3px);\r\n}\r\n\r\n\/* Bottom *\/\r\n.footer-bottom {\r\n border-top: 1px solid rgba(255,255,255,0.08);\r\n padding-block: 18px;\r\n}\r\n\r\n.footer-bottom-inner {\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 16px;\r\n flex-wrap: wrap;\r\n}\r\n\r\n.footer-bottom p {\r\n font-size: 0.78rem;\r\n color: rgba(255,255,255,0.36);\r\n max-width: none;\r\n margin: 0;\r\n}\r\n\r\n\/* Tablet *\/\r\n@media (max-width: 900px) {\r\n .footer-inner {\r\n grid-template-columns: 1fr;\r\n gap: 32px;\r\n }\r\n\r\n .footer-nav {\r\n grid-column: auto;\r\n grid-template-columns: repeat(3, minmax(0, 1fr));\r\n }\r\n\r\n .footer-brand p {\r\n max-width: 54ch;\r\n }\r\n}\r\n\r\n\/* Handy: 1 Spalte *\/\r\n@media (max-width: 640px) {\r\n .footer-inner {\r\n grid-template-columns: 1fr;\r\n padding-block: 44px;\r\n }\r\n\r\n .footer-nav {\r\n grid-template-columns: 1fr;\r\n gap: 28px;\r\n }\r\n\r\n .footer-bottom-inner {\r\n flex-direction: column;\r\n text-align: center;\r\n }\r\n}\r\n\r\n\/* ================================================================\r\n ANIMATIONS\r\n================================================================ *\/\r\n@keyframes fadeInUp {\r\n from { opacity: 0; translate: 0 24px; }\r\n to { opacity: 1; translate: 0 0; }\r\n}\r\n\r\n.fade-in {\r\n animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;\r\n}\r\n.fade-in-delay-1 { animation-delay: 0.1s; }\r\n.fade-in-delay-2 { animation-delay: 0.2s; }\r\n.fade-in-delay-3 { animation-delay: 0.3s; }\r\n.fade-in-delay-4 { animation-delay: 0.4s; }\r\n\r\n\/* Intersection observer reveal \u2014 only after JS tags body *\/\r\n.js-reveal .reveal {\r\n opacity: 0;\r\n translate: 0 24px;\r\n transition: opacity 0.55s cubic-bezier(0.16, 1, 0.3, 1),\r\n translate 0.55s cubic-bezier(0.16, 1, 0.3, 1);\r\n}\r\n.js-reveal .reveal.visible {\r\n opacity: 1;\r\n translate: 0 0;\r\n}\r\n<\/style>\r\n\r\n <!-- JSON-LD Structured Data -->\r\n <script type=\"application\/ld+json\">\r\n {\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"LocalBusiness\",\r\n \"name\": \"werbung.sh \u2013 Deine Werbeagentur\",\r\n \"description\": \"Werbeagentur aus Schleswig-Holstein mit Fokus auf Webseiten-Relaunch, SEO-Optimierung und digitales Marketing. Seit 2000.\",\r\n \"url\": \"https:\/\/werbung.sh\",\r\n \"telephone\": \"+49-4331-000000\",\r\n \"address\": {\r\n \"@type\": \"PostalAddress\",\r\n \"addressRegion\": \"Schleswig-Holstein\",\r\n \"addressCountry\": \"DE\"\r\n },\r\n \"areaServed\": {\r\n \"@type\": \"State\",\r\n \"name\": \"Schleswig-Holstein\"\r\n },\r\n \"foundingDate\": \"2000\",\r\n \"serviceType\": \"WordPress-Relaunch, WordPress-Entwicklung, Webdesign, SEO, Online-Marketing\",\r\n \"hasOfferCatalog\": {\r\n \"@type\": \"OfferCatalog\",\r\n \"name\": \"WordPress-Relaunch Leistungen\",\r\n \"itemListElement\": [\r\n {\r\n \"@type\": \"Offer\",\r\n \"itemOffered\": {\r\n \"@type\": \"Service\",\r\n \"name\": \"Webseiten-Relaunch\",\r\n \"description\": \"Kompletter Neustart f\u00fcr veraltete Webseiten \u2013 neues Design, bessere SEO, mehr Leads.\"\r\n }\r\n },\r\n {\r\n \"@type\": \"Offer\",\r\n \"itemOffered\": {\r\n \"@type\": \"Service\",\r\n \"name\": \"SEO-Optimierung\",\r\n \"description\": \"Suchmaschinenoptimierung f\u00fcr nachhaltige Google-Rankings.\"\r\n }\r\n },\r\n {\r\n \"@type\": \"Offer\",\r\n \"itemOffered\": {\r\n \"@type\": \"Service\",\r\n \"name\": \"WordPress-Migration & Relaunch\",\r\n \"description\": \"Migration und professioneller Aufbau auf WordPress \u2013 schnell, sicher und SEO-optimiert.\"\r\n }\r\n }\r\n ]\r\n },\r\n \"sameAs\": [\"https:\/\/werbung.sh\"]\r\n }\r\n <\/script>\r\n\r\n <script type=\"application\/ld+json\">\r\n {\r\n \"@context\": \"https:\/\/schema.org\",\r\n \"@type\": \"FAQPage\",\r\n \"mainEntity\": [\r\n {\r\n \"@type\": \"Question\",\r\n \"name\": \"Was kostet ein Webseiten-Relaunch?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Ein Relaunch ist so individuell wie dein Unternehmen. Je nach Umfang, CMS und gew\u00fcnschten Funktionen starten wir mit einem kostenlosen Erstgespr\u00e4ch und erstellen ein ma\u00dfgeschneidertes Angebot \u2013 transparent und ohne versteckte Kosten.\"\r\n }\r\n },\r\n {\r\n \"@type\": \"Question\",\r\n \"name\": \"Wie lange dauert ein Webseiten-Relaunch?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Ein typischer Relaunch dauert je nach Projektumfang 4 bis 12 Wochen. Wir arbeiten strukturiert in klar definierten Phasen, damit du jederzeit wei\u00dft, wo dein Projekt steht.\"\r\n }\r\n },\r\n {\r\n \"@type\": \"Question\",\r\n \"name\": \"K\u00f6nnen bestehende Inhalte \u00fcbernommen werden?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Ja, wir sichern und migrieren alle relevanten Inhalte, Texte, Bilder und Daten. Gleichzeitig pr\u00fcfen wir, welche Inhalte SEO-seitig optimiert oder neu aufgebaut werden sollten.\"\r\n }\r\n },\r\n {\r\n \"@type\": \"Question\",\r\n \"name\": \"Mit welchen CMS-Systemen arbeitet ihr?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Wir sind WordPress-Spezialisten und setzen ausschlie\u00dflich auf WordPress. Das CMS bietet maximale Flexibilit\u00e4t, ein riesiges Plugin-\u00d6kosystem und ist ideal f\u00fcr nachhaltige SEO-Optimierung.\"\r\n }\r\n },\r\n {\r\n \"@type\": \"Question\",\r\n \"name\": \"Verliere ich mein Google-Ranking durch einen Relaunch?\",\r\n \"acceptedAnswer\": {\r\n \"@type\": \"Answer\",\r\n \"text\": \"Nicht mit uns. Wir f\u00fchren vor dem Launch eine vollst\u00e4ndige SEO-Analyse durch, sichern bestehende Rankings durch saubere Weiterleitungen (301-Redirects) und optimieren deine neue Seite von Grund auf f\u00fcr bessere Positionen.\"\r\n }\r\n }\r\n ]\r\n }\r\n <\/script>\r\n<\/head>\r\n<body>\r\n\r\n\r\n <!-- ============================================================\r\n HEADER\r\n ============================================================ -->\r\n <header class=\"site-header\" id=\"header\">\r\n <div class=\"container header-inner\">\r\n\r\n <!-- Logo SVG -->\r\n <a href=\"https:\/\/werbung.sh\" class=\"logo\" aria-label=\"werbung.sh \u2013 zur\u00fcck zur Startseite\">\r\n <svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"\r\n viewBox=\"0 0 2834.6 850.4\" aria-hidden=\"true\" focusable=\"false\"\r\n style=\"height:66px;\r\nwidth:auto;display:block;\">\r\n <style>.st0{fill:#1A9DD9;}.st1{fill:#fff;}<\/style>\r\n <g>\r\n <g><path class=\"st0\" d=\"M524.5,296.9v123.5c0,41.1-33.4,74.5-74.5,74.5s-74.5-33.4-74.5-74.5V296.9l0,0h-50.2v123.5c0,41.1-33.4,74.5-74.5,74.5s-74.5-33.4-74.5-74.5V296.9H126v124.9l0,0c0.8,68.2,56.3,123.2,124.7,123.2c40.7,0,76.9-19.5,99.6-49.8c22.7,30.2,58.9,49.8,99.6,49.8c68.4,0,123.9-55,124.7-123.2l0,0V296.9H524.5L524.5,296.9z\"\/><\/g>\r\n <g><path class=\"st0\" d=\"M1495.9,296.9v123.5c0,41.1-33.4,74.5-74.5,74.5c-41.1,0-74.5-33.4-74.5-74.5V296.9h-50.2v124.9l0,0c0.8,68.2,56.3,123.2,124.7,123.2s123.9-55,124.7-123.2l0,0V296.9H1495.9L1495.9,296.9z\"\/><\/g>\r\n <g><path class=\"st0\" d=\"M1621.3,545.2V421.6c0-41.1,33.4-74.5,74.5-74.5s74.5,33.4,74.5,74.5v123.5h50.2V420.2l0,0c-0.8-68.2-56.3-123.2-124.7-123.2s-123.9,55-124.7,123.2l0,0v124.9L1621.3,545.2L1621.3,545.2z\"\/><\/g>\r\n <g><path class=\"st0\" d=\"M1148,295.7L1148,295.7h-75.8v-98.3h-50.1v223.1l0,0c0,0,0,0,0,0.1c0,68.9,55.8,124.7,124.7,124.7c68.9,0,124.7-55.8,124.7-124.7C1271.6,352,1216.4,296.4,1148,295.7z M1146.8,495c-41.1,0-74.5-33.4-74.5-74.5v-74.6l74.5,0.1c41.1,0,74.5,33.4,74.5,74.5S1188.1,495,1146.8,495z\"\/><\/g>\r\n <g><path class=\"st0\" d=\"M1970.4,296.9c-68.9,0-124.7,55.8-124.7,124.7c0,68.5,55.1,124.1,123.5,124.7l0,0h75.8l0,0c0,41.1-33.4,74.5-74.5,74.5h-72.4v50.2h73.8l0,0c68.2-0.8,123.2-56.3,123.2-124.7V421.8c0,0,0,0,0-0.1C2095.1,352.8,2039.3,296.9,1970.4,296.9z M1970.4,496.3c-41.1,0-74.5-33.4-74.5-74.5s33.4-74.5,74.5-74.5c41.1,0,74.5,33.4,74.5,74.5v74.6L1970.4,496.3z\"\/><\/g>\r\n <g><path class=\"st1\" d=\"M2718.2,420.2c-0.8-68.2-56.3-123.2-124.7-123.2c-28,0-53.7,9.2-74.5,24.8V197.4h-50.2v347.8h50.2V421.6c0-41.1,33.4-74.5,74.5-74.5s74.5,33.4,74.5,74.5v123.5h50.2V420.2L2718.2,420.2z\"\/><\/g>\r\n <g><path class=\"st0\" d=\"M922.5,321.7v-24.8h-50.1v248.2h50.2V421.6c0-41.1,33.4-74.5,74.5-74.5v-50.2C969.1,296.9,943.3,306.2,922.5,321.7z\"\/><\/g>\r\n <g><path class=\"st0\" d=\"M844.7,445.4c1.6-8.1,2.5-16.5,2.5-25.1c0-68.9-55.8-124.7-124.7-124.7s-124.7,55.8-124.7,124.7c0,68.8,55.7,124.5,124.4,124.7l0,0h72.5v-50.2h-72.2l0,0c0,0,0,0-0.1,0c-32.4,0-60-20.7-70.2-49.5h70.3h122.2V445.4z M722.6,345.8c32.4,0,60,20.7,70.2,49.5H652.4C662.6,366.5,690.2,345.8,722.6,345.8z\"\/><\/g>\r\n <g><circle class=\"st1\" cx=\"2145.1\" cy=\"519\" r=\"25.1\"\/><\/g>\r\n <g><path class=\"st1\" d=\"M2370.5,396c40.8,0.4,73.8,33.7,73.8,74.5s-32.9,74-73.8,74.5l0,0h-175.1v-50.2h174.8l0,0c13.4-0.4,23.9-11.2,23.9-24.4s-10.6-24-23.7-24.4h-102.8l0,0c-40.8-0.4-73.8-33.6-73.8-74.5s33-74.2,73.8-74.5l0,0h150.7v50.2h-150.7c-13.1,0.4-23.7,11.2-23.7,24.4c0,13.2,10.6,24,23.7,24.4l0,0L2370.5,396z\"\/><\/g>\r\n <\/g>\r\n<\/svg>\r\n <\/a>\r\n\r\n <nav class=\"header-nav\" aria-label=\"Hauptnavigation\">\r\n <a href=\"#leistungen\">Leistungen<\/a>\r\n <a href=\"#prozess\">Ablauf<\/a>\r\n <a href=\"#faq\">FAQ<\/a>\r\n <a href=\"#kontakt\" style=\"color: #fff!important;\" class=\"btn btn-primary btn-sm\">Anfrage stellen<\/a>\r\n <\/nav>\r\n\r\n <button class=\"nav-toggle\" aria-label=\"Men\u00fc \u00f6ffnen\" aria-expanded=\"false\" aria-controls=\"mobile-nav\">\r\n <span><\/span><span><\/span><span><\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <!-- Mobile Nav -->\r\n <nav class=\"mobile-nav\" id=\"mobile-nav\" aria-label=\"Mobile Navigation\" hidden>\r\n <a href=\"#leistungen\">Leistungen<\/a>\r\n <a href=\"#prozess\">Ablauf<\/a>\r\n <a href=\"#faq\">FAQ<\/a>\r\n <a href=\"#kontakt\" class=\"btn btn-primary\">Anfrage stellen<\/a>\r\n <\/nav>\r\n <\/header>\r\n\r\n <main>\r\n\r\n <!-- ============================================================\r\n HERO\r\n ============================================================ -->\r\n <section class=\"hero\" aria-labelledby=\"hero-heading\">\r\n <div class=\"hero-bg\" aria-hidden=\"true\">\r\n <div class=\"hero-gradient\"><\/div>\r\n <div class=\"hero-grid\"><\/div>\r\n <\/div>\r\n\r\n <div class=\"container hero-content\">\r\n <div class=\"hero-badge\">\r\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 14 14\" fill=\"none\" aria-hidden=\"true\"><circle cx=\"7\" cy=\"7\" r=\"3\" fill=\"var(--color-accent)\"\/><circle cx=\"7\" cy=\"7\" r=\"6.5\" stroke=\"var(--color-accent)\" stroke-opacity=\"0.4\"\/><\/svg>\r\n Werbeagentur aus Schleswig-Holstein \u00b7 Seit 2000\r\n <\/div>\r\n\r\n <h1 id=\"hero-heading\" class=\"hero-headline\">\r\n Deine Webseite<br\/>\r\n <span class=\"headline-accent\">verdient einen<br\/>frischen Start.<\/span>\r\n <\/h1>\r\n\r\n <p class=\"hero-sub\">\r\n Veraltetes Design, schlechte Google-Rankings, keine Leads? Wir relaunchen Webseiten,\r\n die nicht nur modern aussehen \u2013 sondern <strong>Kunden gewinnen<\/strong>.\r\n <\/p>\r\n\r\n <div class=\"hero-ctas\">\r\n <a href=\"#kontakt\" class=\"btn btn-primary btn-lg\">\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/><\/svg>\r\n Kostenloses Erstgespr\u00e4ch\r\n <\/a>\r\n <a href=\"#prozess\" class=\"btn btn-ghost btn-lg\">\r\n Ablauf ansehen\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <div class=\"hero-trust\">\r\n <div class=\"trust-item\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-accent)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n \u00dcber 25 Jahre Erfahrung\r\n <\/div>\r\n <div class=\"trust-item\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-accent)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n WordPress-Spezialisten\r\n <\/div>\r\n <div class=\"trust-item\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-accent)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n SEO-first Ansatz\r\n <\/div>\r\n <div class=\"trust-item\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-accent)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n Pers\u00f6nliche Betreuung\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Floating card preview -->\r\n <div class=\"hero-visual\" aria-hidden=\"true\">\r\n <div class=\"browser-mockup\">\r\n <div class=\"browser-bar\">\r\n <span class=\"dot red\"><\/span><span class=\"dot yellow\"><\/span><span class=\"dot green\"><\/span>\r\n <div class=\"url-bar\">relaunch.werbung.sh<\/div>\r\n <\/div>\r\n <div class=\"browser-content\">\r\n <div class=\"before-after\">\r\n <div class=\"ba-side ba-before\">\r\n <span class=\"ba-label\">Vorher<\/span>\r\n <div class=\"ba-lines\">\r\n <div class=\"ba-line old w-80\"><\/div>\r\n <div class=\"ba-line old w-60\"><\/div>\r\n <div class=\"ba-block old\"><\/div>\r\n <div class=\"ba-line old w-90\"><\/div>\r\n <div class=\"ba-line old w-50\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <div class=\"ba-divider\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-accent)\" stroke-width=\"2.5\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n <\/div>\r\n <div class=\"ba-side ba-after\">\r\n <span class=\"ba-label\">Nachher<\/span>\r\n <div class=\"ba-lines\">\r\n <div class=\"ba-line new w-75\"><\/div>\r\n <div class=\"ba-line new w-55\"><\/div>\r\n <div class=\"ba-block new\"><\/div>\r\n <div class=\"ba-line new w-85\"><\/div>\r\n <div class=\"ba-line new w-45\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"metric-badge metric-1\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-success)\" stroke-width=\"2.5\"><polyline points=\"23 6 13.5 15.5 8.5 10.5 1 18\"\/><polyline points=\"17 6 23 6 23 12\"\/><\/svg>\r\n <span>+147% mehr Anfragen<\/span>\r\n <\/div>\r\n <div class=\"metric-badge metric-2\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F59E0B\" stroke-width=\"2.5\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\r\n <span>Unter 1,2s Ladezeit<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n PAIN POINTS\r\n ============================================================ -->\r\n <section class=\"pain-section\" id=\"zeichen\" aria-labelledby=\"pain-heading\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <p class=\"section-eyebrow\">Zeit f\u00fcr Ver\u00e4nderung<\/p>\r\n <h2 id=\"pain-heading\">Zeigt deine Webseite<br\/>diese Warnsignale?<\/h2>\r\n <p class=\"section-lead\">Wenn du eine oder mehrere dieser Aussagen mit \"Ja\" beantwortest, verlierst du t\u00e4glich potenzielle Kunden.<\/p>\r\n <\/div>\r\n\r\n <div class=\"pain-grid\">\r\n <div class=\"pain-card pain-card--warn\">\r\n <div class=\"pain-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"5\" y=\"2\" width=\"14\" height=\"20\" rx=\"2\" ry=\"2\"\/><line x1=\"12\" y1=\"18\" x2=\"12.01\" y2=\"18\"\/><\/svg>\r\n <\/div>\r\n <h3>Nicht mobiloptimiert<\/h3>\r\n <p>\u00dcber 60 % deiner Besucher kommen mit Smartphone oder Tablet. Wenn deine Seite nicht responsive ist, springen sie sofort ab.<\/p>\r\n <\/div>\r\n\r\n <div class=\"pain-card pain-card--warn\">\r\n <div class=\"pain-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"10\"\/><polyline points=\"12 6 12 12 16 14\"\/><\/svg>\r\n <\/div>\r\n <h3>Langsame Ladezeiten<\/h3>\r\n <p>Google bestraft langsame Seiten \u2013 und Besucher verlassen eine Seite, die l\u00e4nger als 3 Sekunden l\u00e4dt. Jede Sekunde kostet dich Umsatz.<\/p>\r\n <\/div>\r\n\r\n <div class=\"pain-card pain-card--warn\">\r\n <div class=\"pain-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\"\/><line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\"\/><line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\"\/><\/svg>\r\n <\/div>\r\n <h3>Sicherheitsrisiken & veraltetes CMS<\/h3>\r\n <p>Ein nicht aktualisiertes CMS ist ein offenes Einfallstor f\u00fcr Hacker. Ein nicht aktualisiertes WordPress ist ein offenes Einfallstor f\u00fcr Hacker. Veraltete Versionen und Plugins gef\u00e4hrden dein Unternehmen.<\/p>\r\n <\/div>\r\n\r\n <div class=\"pain-card pain-card--warn\">\r\n <div class=\"pain-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\r\n <\/div>\r\n <h3>Unsichtbar bei Google<\/h3>\r\n <p>Keine SEO-Struktur, fehlende Meta-Daten, kein strukturiertes Schema \u2013 deine Webseite existiert f\u00fcr Suchmaschinen kaum.<\/p>\r\n <\/div>\r\n\r\n <div class=\"pain-card pain-card--warn\">\r\n <div class=\"pain-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2\"\/><circle cx=\"9\" cy=\"7\" r=\"4\"\/><path d=\"M23 21v-2a4 4 0 0 0-3-3.87\"\/><path d=\"M16 3.13a4 4 0 0 1 0 7.75\"\/><\/svg>\r\n <\/div>\r\n <h3>Keine Leads, keine Anfragen<\/h3>\r\n <p>Sch\u00f6ne Seiten allein verkaufen nicht. Ohne klare Calls-to-Action und Lead-Struktur verl\u00e4sst dein Besucher die Seite \u2013 ohne dich zu kontaktieren.<\/p>\r\n <\/div>\r\n\r\n <div class=\"pain-card pain-card--warn\">\r\n <div class=\"pain-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"\/><line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"\/><\/svg>\r\n <\/div>\r\n <h3>Design aus den Nullerjahren<\/h3>\r\n <p>Ein veraltetes Design schadet deiner Glaubw\u00fcrdigkeit. Potenzielle Kunden beurteilen dein Unternehmen in Millisekunden \u2013 nach dem ersten Eindruck.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pain-cta\">\r\n <a href=\"#kontakt\" class=\"btn btn-primary btn-lg\">\r\n Relaunch jetzt anfragen\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M5 12h14M12 5l7 7-7 7\"\/><\/svg>\r\n <\/a>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n PROCESS\r\n ============================================================ -->\r\n\r\n<section class=\"process-section\" id=\"prozess\" aria-labelledby=\"process-heading\">\r\n\r\n <div class=\"container\">\r\n\r\n <div class=\"section-header\">\r\n <p class=\"section-eyebrow\">TRANSPARENTER ABLAUF<\/p>\r\n\r\n <h2 id=\"process-heading\">\r\n So l\u00e4uft dein Relaunch ab\r\n <\/h2>\r\n\r\n <p class=\"section-lead\">\r\n Von der ersten Idee bis zum erfolgreichen Launch \u2013\r\n in klar definierten Phasen, ohne \u00dcberraschungen.\r\n <\/p>\r\n <\/div>\r\n\r\n <div class=\"process-steps\">\r\n\r\n <!-- STEP 1 -->\r\n <article class=\"process-step\">\r\n\r\n <div class=\"step-number\">01<\/div>\r\n\r\n <div class=\"step-content\">\r\n\r\n <div class=\"step-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <path d=\"M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <h3>Analyse &<br>Beratung<\/h3>\r\n\r\n <p>\r\n Wir analysieren deine bestehende Webseite,\r\n deine Zielgruppe und deine Mitbewerber.\r\n Im kostenlosen Erstgespr\u00e4ch definieren wir\r\n gemeinsam Ziele und Strategie.\r\n <\/p>\r\n\r\n <ul class=\"step-list\">\r\n <li>SEO-Audit der bestehenden Seite<\/li>\r\n <li>Zielgruppen- & Wettbewerbsanalyse<\/li>\r\n <li>Zieldefinition & Projektkickoff<\/li>\r\n <\/ul>\r\n\r\n <\/div>\r\n <\/article>\r\n\r\n <!-- STEP 2 -->\r\n <article class=\"process-step\">\r\n\r\n <div class=\"step-number\">02<\/div>\r\n\r\n <div class=\"step-content\">\r\n\r\n <div class=\"step-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\r\n <line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"\/>\r\n <line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <h3>Konzept &<br>Design<\/h3>\r\n\r\n <p>\r\n Wir entwickeln ein Designkonzept,\r\n das deine Marke st\u00e4rkt und Besucher\r\n zu Kunden macht. Du siehst fr\u00fch,\r\n wie dein Relaunch aussehen wird.\r\n <\/p>\r\n\r\n <ul class=\"step-list\">\r\n <li>Wireframes & Seitenstruktur<\/li>\r\n <li>Visuelles Designkonzept<\/li>\r\n <li>Feedbackschleife mit dir<\/li>\r\n <\/ul>\r\n\r\n <\/div>\r\n <\/article>\r\n\r\n <!-- STEP 3 -->\r\n <article class=\"process-step\">\r\n\r\n <div class=\"step-number\">03<\/div>\r\n\r\n <div class=\"step-content\">\r\n\r\n <div class=\"step-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <polyline points=\"16 18 22 12 16 6\"\/>\r\n <polyline points=\"8 6 2 12 8 18\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <h3>Entwicklung &<br>Migration<\/h3>\r\n\r\n <p>\r\n Wir bauen deine neue Webseite \u2013\r\n responsiv, schnell und SEO-optimiert.\r\n Bestehende Inhalte werden sicher\r\n migriert und Rankings abgesichert.\r\n <\/p>\r\n\r\n <ul class=\"step-list\">\r\n <li>WordPress-Entwicklung & individuelle Themes<\/li>\r\n <li>Content-Migration & 301-Redirects<\/li>\r\n <li>Performance- & SEO-Optimierung<\/li>\r\n <\/ul>\r\n\r\n <\/div>\r\n <\/article>\r\n\r\n <!-- STEP 4 -->\r\n <article class=\"process-step\">\r\n\r\n <div class=\"step-number\">04<\/div>\r\n\r\n <div class=\"step-content\">\r\n\r\n <div class=\"step-icon\">\r\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\"\r\n fill=\"none\" stroke=\"currentColor\"\r\n stroke-width=\"2\" stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\">\r\n <path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/>\r\n <polyline points=\"22 4 12 14.01 9 11.01\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <h3>Launch &<br>Betreuung<\/h3>\r\n\r\n <p>\r\n Nach dem Launch bist du nicht allein.\r\n Wir begleiten dich, analysieren die\r\n Performance und optimieren kontinuierlich.\r\n <\/p>\r\n\r\n <ul class=\"step-list\">\r\n <li>Produktionslaunch & Testphase<\/li>\r\n <li>Google Analytics \/ Search Console Setup<\/li>\r\n <li>Nachbetreuung & Optimierung<\/li>\r\n <\/ul>\r\n\r\n <\/div>\r\n <\/article>\r\n\r\n <\/div>\r\n <\/div>\r\n<\/section>\r\n <!-- ============================================================\r\n LEISTUNGEN\r\n ============================================================ -->\r\n <section class=\"services-section\" id=\"leistungen\" aria-labelledby=\"services-heading\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <p class=\"section-eyebrow\">Was wir mitbringen<\/p>\r\n <h2 id=\"services-heading\">Alles aus einer Hand<\/h2>\r\n <p class=\"section-lead\">Ein Relaunch ist mehr als ein neues Design. Wir decken alle Bereiche ab, die deinen Online-Erfolg nachhaltig sichern.<\/p>\r\n <\/div>\r\n\r\n <div class=\"services-grid\">\r\n <article class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\" ry=\"2\"\/><line x1=\"3\" y1=\"9\" x2=\"21\" y2=\"9\"\/><line x1=\"9\" y1=\"21\" x2=\"9\" y2=\"9\"\/><\/svg>\r\n <\/div>\r\n <h3>Webdesign & UX<\/h3>\r\n <p>Modernes, nutzerfreundliches Design, das deine Marke authentisch pr\u00e4sentiert und Besucher durch klare Struktur zur Kontaktaufnahme f\u00fchrt.<\/p>\r\n <\/article>\r\n\r\n <article class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"11\" cy=\"11\" r=\"8\"\/><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"\/><\/svg>\r\n <\/div>\r\n <h3>SEO-Optimierung<\/h3>\r\n <p>Von der technischen Basis bis zur Keyword-Strategie: Wir sorgen daf\u00fcr, dass deine Seite bei Google gefunden wird \u2013 nachhaltig und nachweisbar.<\/p>\r\n <\/article>\r\n\r\n <article class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"16 18 22 12 16 6\"\/><polyline points=\"8 6 2 12 8 18\"\/><\/svg>\r\n <\/div>\r\n <h3>WordPress-Spezialisten<\/h3>\r\n <p>Wir arbeiten mit s\u00e4mtlichen CMS-Systemen und setzen bei Bedarf auch individuelle Hardcode-L\u00f6sungen um. Unser Schwerpunkt liegt jedoch auf WordPress: Von ma\u00dfgeschneiderten Themes bis hin zu komplexen Funktionen holen wir hier das Maximum f\u00fcr unsere Kunden heraus.<\/p>\r\n <\/article>\r\n\r\n <article class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z\"\/><polyline points=\"13 2 13 9 20 9\"\/><\/svg>\r\n <\/div>\r\n <h3>Content-Strategie<\/h3>\r\n <p>Texte, die ranken und \u00fcberzeugen. Wir erstellen SEO-optimierte Inhalte oder optimieren deine bestehenden Texte f\u00fcr maximale Wirkung.<\/p>\r\n <\/article>\r\n\r\n <article class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M18 20V10\"\/><path d=\"M12 20V4\"\/><path d=\"M6 20v-6\"\/><\/svg>\r\n <\/div>\r\n <h3>Performance & Core Web Vitals<\/h3>\r\n <p>Ladezeiten unter 1,5 Sekunden, perfekte Core-Web-Vitals-Werte. Schnelle Seiten ranken besser und konvertieren mehr Besucher zu Kunden.<\/p>\r\n <\/article>\r\n\r\n <article class=\"service-card\">\r\n <div class=\"service-icon\">\r\n <svg width=\"28\" height=\"28\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.8\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"22 12 18 12 15 21 9 3 6 12 2 12\"\/><\/svg>\r\n <\/div>\r\n <h3>Google Ads & Tracking<\/h3>\r\n <p>Wir verkn\u00fcpfen deinen Relaunch direkt mit Google Analytics 4, Search Console und Google Ads \u2013 f\u00fcr messbare Ergebnisse von Tag eins an.<\/p>\r\n <\/article>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n USPs \/ WHY US\r\n ============================================================ -->\r\n <section class=\"why-section\" id=\"warum\" aria-labelledby=\"why-heading\">\r\n <div class=\"container why-inner\">\r\n <div class=\"why-text\">\r\n <p class=\"section-eyebrow section-eyebrow--light\">Warum werbung.sh?<\/p>\r\n <h2 id=\"why-heading\" class=\"why-heading\">Lokal verwurzelt.<br\/>Digital auf H\u00f6he der Zeit.<\/h2>\r\n <p>Seit dem Jahr 2000 arbeiten wir aus dem Herzen Schleswig-Holsteins. Wir kennen den Markt, die Unternehmen und die Menschen hier \u2013 und wir wissen, was online funktioniert.<\/p>\r\n <p>Kein anonymes Gro\u00dfstadtb\u00fcro, kein Offshore-Team. Bei uns hast du einen festen Ansprechpartner, der dein Projekt von A bis Z begleitet.<\/p>\r\n\r\n <ul class=\"why-list\" role=\"list\">\r\n <li>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-accent)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <span>25+ Jahre Branchen-Erfahrung<\/span>\r\n <\/li>\r\n <li>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-accent)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <span>Pers\u00f6nlicher Ansprechpartner, kein Ticketsystem<\/span>\r\n <\/li>\r\n <li>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-accent)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <span>Transparente Angebote ohne versteckte Kosten<\/span>\r\n <\/li>\r\n <li>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-accent)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <span>Zertifizierte WordPress-Entwickler<\/span>\r\n <\/li>\r\n <li>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-accent)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"20 6 9 17 4 12\"\/><\/svg>\r\n <span>Full-Service: Design, Entwicklung, SEO & Marketing<\/span>\r\n <\/li>\r\n <\/ul>\r\n\r\n <a href=\"#kontakt\" class=\"btn btn-primary\">Jetzt Relaunch anfragen<\/a>\r\n <\/div>\r\n\r\n <div class=\"why-stats\" aria-label=\"Kennzahlen\">\r\n <div class=\"stat-card\">\r\n <div class=\"stat-number\">25+<\/div>\r\n <div class=\"stat-label\">Jahre Erfahrung<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-number\">200+<\/div>\r\n <div class=\"stat-label\">Projekte umgesetzt<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-number\">100%<\/div>\r\n <div class=\"stat-label\">Aus Schleswig-Holstein<\/div>\r\n <\/div>\r\n <div class=\"stat-card\">\r\n <div class=\"stat-number\"><1.5s<\/div>\r\n <div class=\"stat-label\">\u00d8 Ladezeit nach Relaunch<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n TESTIMONIALS\r\n ============================================================ -->\r\n <section class=\"testimonials-section\" id=\"referenzen\" aria-labelledby=\"testimonials-heading\">\r\n <div class=\"container\">\r\n <div class=\"section-header\">\r\n <p class=\"section-eyebrow\">Das sagen unsere Kunden<\/p>\r\n <h2 id=\"testimonials-heading\">Echte Ergebnisse.<br\/>Echte Stimmen.<\/h2>\r\n <\/div>\r\n\r\n <div class=\"testimonials-grid\">\r\n <blockquote class=\"testimonial-card\">\r\n <div class=\"testimonial-stars\" aria-label=\"5 von 5 Sternen\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <\/div>\r\n <p>\u201eWir hatten jahrelang eine Webseite, die nicht gefunden wurde. Nach dem Relaunch inkl. SEO durch werbung.sh kommen Anfragen wie von selbst. Die Investition hat sich innerhalb von zwei Monaten amortisiert.\"<\/p>\r\n <footer>\r\n <div class=\"testimonial-avatar\" aria-hidden=\"true\">SA<\/div>\r\n <div>\r\n <cite class=\"testimonial-name\">Sebastian Audorf<\/cite>\r\n <div class=\"testimonial-company\">CamperHuus, Rendsburg<\/div>\r\n <\/div>\r\n <\/footer>\r\n <\/blockquote>\r\n\r\n \r\n\r\n <blockquote class=\"testimonial-card\">\r\n <div class=\"testimonial-stars\" aria-label=\"5 von 5 Sternen\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <\/div>\r\n <p>\u201eKurze Wege, schnelle Umsetzung \u2013 und ein Ergebnis, das sich sehen lassen kann. werbung.sh hat unsere Webseite komplett neu aufgebaut und dabei genau verstanden, was wir brauchen. Klare Empfehlung aus Weddingstedt!\"<\/p>\r\n <footer>\r\n <div class=\"testimonial-avatar\" aria-hidden=\"true\">TH<\/div>\r\n <div>\r\n <cite class=\"testimonial-name\">Thorsten Hinrichs<\/cite>\r\n <div class=\"testimonial-company\">aktivstall.de, Weddingstedt<\/div>\r\n <\/div>\r\n <\/footer>\r\n <\/blockquote>\r\n <blockquote class=\"testimonial-card\">\r\n <div class=\"testimonial-stars\" aria-label=\"5 von 5 Sternen\">\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"#F59E0B\" stroke=\"none\" aria-hidden=\"true\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\r\n <\/div>\r\n <p>\u201eWir betreiben einen Campingplatz in D\u00e4nemark und wollten endlich auch online professionell auftreten \u2013 auf Deutsch und D\u00e4nisch. werbung.sh hat das perfekt umgesetzt: moderne Webseite, schnelle Ladezeiten und deutlich mehr Buchungsanfragen \u00fcber die Seite.\"<\/p>\r\n <footer>\r\n <div class=\"testimonial-avatar\" aria-hidden=\"true\">PM<\/div>\r\n <div>\r\n <cite class=\"testimonial-name\">Peer M\u00e4der<\/cite>\r\n <div class=\"testimonial-company\">Campingplatz Gammelmark.dk, D\u00e4nemark<\/div>\r\n <\/div>\r\n <\/footer>\r\n <\/blockquote>\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n FAQ\r\n ============================================================ -->\r\n <section class=\"faq-section\" id=\"faq\" aria-labelledby=\"faq-heading\">\r\n <div class=\"container faq-container\">\r\n <div class=\"section-header\">\r\n <p class=\"section-eyebrow\">H\u00e4ufige Fragen<\/p>\r\n <h2 id=\"faq-heading\">Antworten auf deine<br\/>wichtigsten Fragen<\/h2>\r\n <\/div>\r\n\r\n <div class=\"faq-list\" role=\"list\">\r\n\r\n <div class=\"faq-item\" role=\"listitem\">\r\n <button class=\"faq-question\" aria-expanded=\"false\" aria-controls=\"faq-1\">\r\n <span>Was kostet ein Webseiten-Relaunch?<\/span>\r\n <svg class=\"faq-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\r\n <\/button>\r\n <div class=\"faq-answer\" id=\"faq-1\" hidden>\r\n <p>Ein Relaunch ist so individuell wie dein Unternehmen. Je nach Umfang, CMS, Seitenanzahl und gew\u00fcnschten Funktionen variieren die Kosten erheblich. Wir starten immer mit einem <strong>kostenlosen Erstgespr\u00e4ch<\/strong> und erstellen danach ein transparentes, ma\u00dfgeschneidertes Angebot \u2013 ohne versteckte Kosten.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\" role=\"listitem\">\r\n <button class=\"faq-question\" aria-expanded=\"false\" aria-controls=\"faq-2\">\r\n <span>Wie lange dauert ein Webseiten-Relaunch?<\/span>\r\n <svg class=\"faq-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\r\n <\/button>\r\n <div class=\"faq-answer\" id=\"faq-2\" hidden>\r\n <p>Ein typischer Relaunch dauert je nach Projektumfang <strong>4 bis 12 Wochen<\/strong>. Einfache Webseiten sind in 4\u20136 Wochen fertig, komplexere Projekte mit individuellem Design, Sonderfeatures oder gr\u00f6\u00dferem Contentumfang ben\u00f6tigen mehr Zeit. Wir arbeiten strukturiert in klar definierten Phasen \u2013 du wei\u00dft jederzeit, wo dein Projekt steht.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\" role=\"listitem\">\r\n <button class=\"faq-question\" aria-expanded=\"false\" aria-controls=\"faq-3\">\r\n <span>K\u00f6nnen bestehende Inhalte \u00fcbernommen werden?<\/span>\r\n <svg class=\"faq-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\r\n <\/button>\r\n <div class=\"faq-answer\" id=\"faq-3\" hidden>\r\n <p>Ja, wir sichern und migrieren alle relevanten Inhalte, Texte, Bilder und Daten sorgf\u00e4ltig. Gleichzeitig pr\u00fcfen wir, welche Inhalte <strong>SEO-seitig optimiert<\/strong> oder neu aufgebaut werden sollten \u2013 und beraten dich offen dazu. Bestehende Google-Rankings werden durch saubere 301-Weiterleitungen gesch\u00fctzt.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\" role=\"listitem\">\r\n <button class=\"faq-question\" aria-expanded=\"false\" aria-controls=\"faq-4\">\r\n <span>Warum setzt ihr auf WordPress?<\/span>\r\n <svg class=\"faq-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\r\n <\/button>\r\n <div class=\"faq-answer\" id=\"faq-4\" hidden>\r\n <p>Wir arbeiten mit s\u00e4mtlichen<strong> CMS-Systemen <\/strong> und entwickeln bei Bedarf auch individuelle Hardcode-L\u00f6sungen. Unser klarer Schwerpunkt liegt jedoch auf WordPress, da es maximale Flexibilit\u00e4t bietet, \u00fcber ein riesiges Plugin-\u00d6kosystem verf\u00fcgt und sich ideal f\u00fcr nachhaltige SEO-Optimierung eignet. Bestehende Websites aus anderen Systemen migrieren wir strukturiert und sauber \u2013 auf Wunsch auch nach WordPress.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\" role=\"listitem\">\r\n <button class=\"faq-question\" aria-expanded=\"false\" aria-controls=\"faq-5\">\r\n <span>Verliere ich mein Google-Ranking durch einen Relaunch?<\/span>\r\n <svg class=\"faq-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\r\n <\/button>\r\n <div class=\"faq-answer\" id=\"faq-5\" hidden>\r\n <p>Nicht mit uns. Wir f\u00fchren vor dem Launch eine <strong>vollst\u00e4ndige SEO-Analyse<\/strong> durch, dokumentieren alle bestehenden URLs und Rankings und implementieren saubere 301-Redirects. Die neue Seite wird von Grund auf SEO-optimiert \u2013 die meisten unserer Kunden ranken nach dem Relaunch besser als vorher.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"faq-item\" role=\"listitem\">\r\n <button class=\"faq-question\" aria-expanded=\"false\" aria-controls=\"faq-6\">\r\n <span>Betreut ihr uns auch nach dem Relaunch?<\/span>\r\n <svg class=\"faq-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"6 9 12 15 18 9\"\/><\/svg>\r\n <\/button>\r\n <div class=\"faq-answer\" id=\"faq-6\" hidden>\r\n <p>Ja, absolut. Nach dem Launch bieten wir flexible <strong>Wartungs- und Betreuungspakete<\/strong> an: CMS-Updates, Inhaltspflege, SEO-Monitoring, Google Ads oder einfach einen zuverl\u00e4ssigen Ansprechpartner wenn etwas gebraucht wird. Wir denken in langfristigen Partnerschaften, nicht in einmaligen Projekten.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/section>\r\n\r\n <!-- ============================================================\r\n CONTACT FORM\r\n ============================================================ -->\r\n <section class=\"contact-section\" id=\"kontakt\" aria-labelledby=\"contact-heading\">\r\n <div class=\"container contact-inner\">\r\n\r\n <div class=\"contact-text\">\r\n <p class=\"section-eyebrow section-eyebrow--light\">Lass uns sprechen<\/p>\r\n <h2 id=\"contact-heading\" class=\"contact-heading\">Kostenlos anfragen.<br\/>Unverbindlich beraten.<\/h2>\r\n <p>Schreib uns kurz, was du dir vorstellst \u2013 wir melden uns dann zeitnah<\/p>\r\n\r\n <div class=\"contact-info\">\r\n <div class=\"contact-info-item\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-accent)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z\"\/><circle cx=\"12\" cy=\"10\" r=\"3\"\/><\/svg>\r\n <span>Aus dem Herzen Schleswig-Holsteins<\/span>\r\n <\/div>\r\n <div class=\"contact-info-item\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-accent)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" 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.07A19.5 19.5 0 0 1 4.69 12a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1.18h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 8.91a16 16 0 0 0 6.18 6.18l.95-.95a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7a2 2 0 0 1 1.72 2z\"\/><\/svg>\r\n <span>Zeitnahe Antwort<\/span>\r\n <\/div>\r\n <div class=\"contact-info-item\">\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-accent)\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\r\n <span>Erstgespr\u00e4ch kostenlos & unverbindlich<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"contact-form-wrapper\">\r\n <form class=\"contact-form\" id=\"lead-form\" novalidate aria-label=\"Relaunch-Anfrage Formular\">\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"name\">Name *<\/label>\r\n <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Max Mustermann\" required autocomplete=\"name\" \/>\r\n <span class=\"form-error\" role=\"alert\" aria-live=\"polite\"><\/span>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"company\">Unternehmen<\/label>\r\n <input type=\"text\" id=\"company\" name=\"company\" placeholder=\"Musterfirma GmbH\" autocomplete=\"organization\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-row\">\r\n <div class=\"form-group\">\r\n <label for=\"email\">E-Mail-Adresse *<\/label>\r\n <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"max@musterfirma.de\" required autocomplete=\"email\" \/>\r\n <span class=\"form-error\" role=\"alert\" aria-live=\"polite\"><\/span>\r\n <\/div>\r\n <div class=\"form-group\">\r\n <label for=\"phone\">Telefon<\/label>\r\n <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"+49 1234 567890\" autocomplete=\"tel\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"website\">Aktuelle Webseite<\/label>\r\n <input type=\"url\" id=\"website\" name=\"website\" placeholder=\"https:\/\/www.meinewebseite.de\" autocomplete=\"url\" \/>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"cms\">Aktuelles CMS \/ System<\/label>\r\n <select id=\"cms\" name=\"cms\">\r\n <option value=\"\">Bitte w\u00e4hlen \u2026<\/option>\r\n <option value=\"wordpress\">WordPress<\/option>\r\n <option value=\"joomla\">Joomla<\/option>\r\n <option value=\"drupal\">Drupal<\/option>\r\n <option value=\"other\">Anderes \/ Unbekannt<\/option>\r\n <option value=\"none\">Kein CMS \/ statisch<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n <div class=\"form-group\">\r\n <label for=\"message\">Was ist dein Ziel? *<\/label>\r\n <textarea id=\"message\" name=\"message\" rows=\"4\" placeholder=\"Beschreibe kurz dein Projekt und was du mit dem Relaunch erreichen m\u00f6chtest \u2026\" required><\/textarea>\r\n <span class=\"form-error\" role=\"alert\" aria-live=\"polite\"><\/span>\r\n <\/div>\r\n\r\n <div class=\"form-group form-group--checkbox\">\r\n <label class=\"checkbox-label\">\r\n <input type=\"checkbox\" name=\"privacy\" id=\"privacy\" required \/>\r\n <span>Ich habe die <a href=\"https:\/\/werbung.sh\/datenschutz\" target=\"_blank\" rel=\"noopener\">Datenschutzerkl\u00e4rung<\/a> gelesen und bin mit der Verarbeitung meiner Daten einverstanden. *<\/span>\r\n <\/label>\r\n <span class=\"form-error\" role=\"alert\" aria-live=\"polite\"><\/span>\r\n <\/div>\r\n\r\n <button type=\"submit\" class=\"btn btn-primary btn-lg btn-submit\">\r\n <span class=\"btn-text\">Anfrage kostenlos absenden<\/span>\r\n <svg class=\"btn-icon\" width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><line x1=\"22\" y1=\"2\" x2=\"11\" y2=\"13\"\/><polygon points=\"22 2 15 22 11 13 2 9 22 2\"\/><\/svg>\r\n <span class=\"btn-loading\" aria-hidden=\"true\" hidden>\r\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" aria-hidden=\"true\"><path d=\"M21 12a9 9 0 1 1-6.219-8.56\"\/><\/svg>\r\n <\/span>\r\n <\/button>\r\n\r\n <p class=\"form-note\">* Pflichtfelder. Deine Daten werden ausschlie\u00dflich zur Bearbeitung deiner Anfrage verwendet.<\/p>\r\n\r\n <div class=\"form-success\" id=\"form-success\" hidden role=\"status\" aria-live=\"polite\">\r\n <svg width=\"32\" height=\"32\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"var(--color-success)\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\"\/><polyline points=\"22 4 12 14.01 9 11.01\"\/><\/svg>\r\n <h3>Anfrage erhalten!<\/h3>\r\n <p>Vielen Dank \u2013 wir melden uns innerhalb von 24 Stunden bei dir.<\/p>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/section>\r\n\r\n <\/main>\r\n\r\n <!-- ============================================================\r\n FOOTER\r\n ============================================================ -->\r\n <footer class=\"site-footer\" role=\"contentinfo\">\r\n <div class=\"container footer-inner\">\r\n <div class=\"footer-brand\">\r\n <a href=\"https:\/\/werbung.sh\" class=\"logo logo--footer\" aria-label=\"werbung.sh Startseite\">\r\n <svg version=\"1.1\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" xmlns:xlink=\"http:\/\/www.w3.org\/1999\/xlink\"\r\n viewBox=\"0 0 2834.6 850.4\" aria-hidden=\"true\" focusable=\"false\"\r\n style=\"height:34px;width:auto;display:block;\">\r\n <style>.ft0{fill:#1A9DD9;}.ft1{fill:rgba(255,255,255,0.85);}<\/style>\r\n <g>\r\n <g><path class=\"ft0\" d=\"M524.5,296.9v123.5c0,41.1-33.4,74.5-74.5,74.5s-74.5-33.4-74.5-74.5V296.9l0,0h-50.2v123.5c0,41.1-33.4,74.5-74.5,74.5s-74.5-33.4-74.5-74.5V296.9H126v124.9l0,0c0.8,68.2,56.3,123.2,124.7,123.2c40.7,0,76.9-19.5,99.6-49.8c22.7,30.2,58.9,49.8,99.6,49.8c68.4,0,123.9-55,124.7-123.2l0,0V296.9H524.5L524.5,296.9z\"\/><\/g>\r\n <g><path class=\"ft0\" d=\"M1495.9,296.9v123.5c0,41.1-33.4,74.5-74.5,74.5c-41.1,0-74.5-33.4-74.5-74.5V296.9h-50.2v124.9l0,0c0.8,68.2,56.3,123.2,124.7,123.2s123.9-55,124.7-123.2l0,0V296.9H1495.9L1495.9,296.9z\"\/><\/g>\r\n <g><path class=\"ft0\" d=\"M1621.3,545.2V421.6c0-41.1,33.4-74.5,74.5-74.5s74.5,33.4,74.5,74.5v123.5h50.2V420.2l0,0c-0.8-68.2-56.3-123.2-124.7-123.2s-123.9,55-124.7,123.2l0,0v124.9L1621.3,545.2L1621.3,545.2z\"\/><\/g>\r\n <g><path class=\"ft0\" d=\"M1148,295.7L1148,295.7h-75.8v-98.3h-50.1v223.1l0,0c0,0,0,0,0,0.1c0,68.9,55.8,124.7,124.7,124.7c68.9,0,124.7-55.8,124.7-124.7C1271.6,352,1216.4,296.4,1148,295.7z M1146.8,495c-41.1,0-74.5-33.4-74.5-74.5v-74.6l74.5,0.1c41.1,0,74.5,33.4,74.5,74.5S1188.1,495,1146.8,495z\"\/><\/g>\r\n <g><path class=\"ft0\" d=\"M1970.4,296.9c-68.9,0-124.7,55.8-124.7,124.7c0,68.5,55.1,124.1,123.5,124.7l0,0h75.8l0,0c0,41.1-33.4,74.5-74.5,74.5h-72.4v50.2h73.8l0,0c68.2-0.8,123.2-56.3,123.2-124.7V421.8c0,0,0,0,0-0.1C2095.1,352.8,2039.3,296.9,1970.4,296.9z M1970.4,496.3c-41.1,0-74.5-33.4-74.5-74.5s33.4-74.5,74.5-74.5c41.1,0,74.5,33.4,74.5,74.5v74.6L1970.4,496.3z\"\/><\/g>\r\n <g><path class=\"ft1\" d=\"M2718.2,420.2c-0.8-68.2-56.3-123.2-124.7-123.2c-28,0-53.7,9.2-74.5,24.8V197.4h-50.2v347.8h50.2V421.6c0-41.1,33.4-74.5,74.5-74.5s74.5,33.4,74.5,74.5v123.5h50.2V420.2L2718.2,420.2z\"\/><\/g>\r\n <g><path class=\"ft0\" d=\"M922.5,321.7v-24.8h-50.1v248.2h50.2V421.6c0-41.1,33.4-74.5,74.5-74.5v-50.2C969.1,296.9,943.3,306.2,922.5,321.7z\"\/><\/g>\r\n <g><path class=\"ft0\" d=\"M844.7,445.4c1.6-8.1,2.5-16.5,2.5-25.1c0-68.9-55.8-124.7-124.7-124.7s-124.7,55.8-124.7,124.7c0,68.8,55.7,124.5,124.4,124.7l0,0h72.5v-50.2h-72.2l0,0c0,0,0,0-0.1,0c-32.4,0-60-20.7-70.2-49.5h70.3h122.2V445.4z M722.6,345.8c32.4,0,60,20.7,70.2,49.5H652.4C662.6,366.5,690.2,345.8,722.6,345.8z\"\/><\/g>\r\n <g><circle class=\"ft1\" cx=\"2145.1\" cy=\"519\" r=\"25.1\"\/><\/g>\r\n <g><path class=\"ft1\" d=\"M2370.5,396c40.8,0.4,73.8,33.7,73.8,74.5s-32.9,74-73.8,74.5l0,0h-175.1v-50.2h174.8l0,0c13.4-0.4,23.9-11.2,23.9-24.4s-10.6-24-23.7-24.4h-102.8l0,0c-40.8-0.4-73.8-33.6-73.8-74.5s33-74.2,73.8-74.5l0,0h150.7v50.2h-150.7c-13.1,0.4-23.7,11.2-23.7,24.4c0,13.2,10.6,24,23.7,24.4l0,0L2370.5,396z\"\/><\/g>\r\n <\/g>\r\n<\/svg>\r\n <\/a>\r\n <p>Deine Werbeagentur aus dem Herzen Schleswig-Holsteins. L\u00f6sungen mit Leidenschaft und Erfahrung \u2013 seit 2000.<\/p>\r\n <\/div>\r\n\r\n <nav class=\"footer-nav\" aria-label=\"Footer Navigation\">\r\n <div class=\"footer-col\">\r\n <h4>Leistungen<\/h4>\r\n <ul role=\"list\">\r\n <li><a href=\"#leistungen\">Webseiten-Relaunch<\/a><\/li>\r\n <li><a href=\"#leistungen\">SEO-Optimierung<\/a><\/li>\r\n <li><a href=\"#leistungen\">WordPress-Entwicklung<\/a><\/li>\r\n <li><a href=\"#leistungen\">WordPress-Relaunch<\/a><\/li>\r\n <li><a href=\"#leistungen\">Google Ads<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Infos<\/h4>\r\n <ul role=\"list\">\r\n <li><a href=\"#prozess\">Ablauf<\/a><\/li>\r\n <li><a href=\"#warum\">\u00dcber uns<\/a><\/li>\r\n <li><a href=\"#faq\">FAQ<\/a><\/li>\r\n <li><a href=\"https:\/\/werbung.sh\">Hauptseite<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <div class=\"footer-col\">\r\n <h4>Rechtliches<\/h4>\r\n <ul role=\"list\">\r\n <li><a href=\"https:\/\/werbung.sh\/impressum\">Impressum<\/a><\/li>\r\n <li><a href=\"https:\/\/werbung.sh\/datenschutz\">Datenschutz<\/a><\/li>\r\n <\/ul>\r\n <\/div>\r\n <\/nav>\r\n <\/div>\r\n\r\n <div class=\"footer-bottom\">\r\n <div class=\"container footer-bottom-inner\">\r\n <p>© <span id=\"current-year\">2025<\/span> werbung.sh \u2013 Alle Rechte vorbehalten.<\/p>\r\n <p>WordPress-Relaunch aus Schleswig-Holstein<\/p>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n <!-- Scroll-to-top -->\r\n <button class=\"scroll-top\" id=\"scroll-top\" aria-label=\"Zur\u00fcck nach oben\" hidden>\r\n <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><polyline points=\"18 15 12 9 6 15\"\/><\/svg>\r\n <\/button>\r\n\r\n <script>\r\n'use strict';\r\n\r\n\/* ================================================================\r\n DARK MODE TOGGLE (via system preference)\r\n================================================================ *\/\r\n(function () {\r\n const r = document.documentElement;\r\n const mq = window.matchMedia('(prefers-color-scheme: dark)');\r\n let current = mq.matches ? 'dark' : 'light';\r\n r.setAttribute('data-theme', current);\r\n mq.addEventListener('change', e => {\r\n current = e.matches ? 'dark' : 'light';\r\n r.setAttribute('data-theme', current);\r\n });\r\n})();\r\n\r\n\/* ================================================================\r\n UPDATE YEAR\r\n================================================================ *\/\r\nconst yearEl = document.getElementById('current-year');\r\nif (yearEl) yearEl.textContent = new Date().getFullYear();\r\n\r\n\/* ================================================================\r\n STICKY HEADER SCROLL BEHAVIOR\r\n================================================================ *\/\r\nconst header = document.getElementById('header');\r\nlet lastScroll = 0;\r\nwindow.addEventListener('scroll', () => {\r\n const scrollY = window.scrollY;\r\n if (scrollY > 10) {\r\n header.classList.add('scrolled');\r\n } else {\r\n header.classList.remove('scrolled');\r\n }\r\n lastScroll = scrollY;\r\n}, { passive: true });\r\n\r\n\/* ================================================================\r\n MOBILE NAV TOGGLE\r\n================================================================ *\/\r\nconst navToggle = document.querySelector('.nav-toggle');\r\nconst mobileNav = document.getElementById('mobile-nav');\r\n\r\nif (navToggle && mobileNav) {\r\n navToggle.addEventListener('click', () => {\r\n const isOpen = navToggle.getAttribute('aria-expanded') === 'true';\r\n navToggle.setAttribute('aria-expanded', String(!isOpen));\r\n mobileNav.classList.toggle('is-open', !isOpen);\r\n });\r\n\r\n \/\/ Close on link click\r\n mobileNav.querySelectorAll('a').forEach(link => {\r\n link.addEventListener('click', () => {\r\n mobileNav.classList.remove('is-open');\r\n navToggle.setAttribute('aria-expanded', 'false');\r\n });\r\n });\r\n}\r\n\r\n\/* ================================================================\r\n FAQ ACCORDION\r\n================================================================ *\/\r\ndocument.querySelectorAll('.faq-question').forEach(btn => {\r\n btn.addEventListener('click', () => {\r\n const expanded = btn.getAttribute('aria-expanded') === 'true';\r\n const answerId = btn.getAttribute('aria-controls');\r\n const answer = document.getElementById(answerId);\r\n\r\n \/\/ Close all others\r\n document.querySelectorAll('.faq-question').forEach(other => {\r\n if (other !== btn) {\r\n other.setAttribute('aria-expanded', 'false');\r\n const otherId = other.getAttribute('aria-controls');\r\n const otherAnswer = document.getElementById(otherId);\r\n if (otherAnswer) otherAnswer.setAttribute('hidden', '');\r\n }\r\n });\r\n\r\n \/\/ Toggle this one\r\n btn.setAttribute('aria-expanded', String(!expanded));\r\n if (expanded) {\r\n answer.setAttribute('hidden', '');\r\n } else {\r\n answer.removeAttribute('hidden');\r\n }\r\n });\r\n});\r\n\r\n\/* ================================================================\r\n SCROLL TO TOP\r\n================================================================ *\/\r\nconst scrollTop = document.getElementById('scroll-top');\r\nif (scrollTop) {\r\n window.addEventListener('scroll', () => {\r\n if (window.scrollY > 400) {\r\n scrollTop.removeAttribute('hidden');\r\n } else {\r\n scrollTop.setAttribute('hidden', '');\r\n }\r\n }, { passive: true });\r\n\r\n scrollTop.addEventListener('click', () => {\r\n window.scrollTo({ top: 0, behavior: 'smooth' });\r\n });\r\n}\r\n\r\n\/* ================================================================\r\n INTERSECTION OBSERVER \u2014 REVEAL ON SCROLL\r\n================================================================ *\/\r\nconst revealObserver = new IntersectionObserver(\r\n entries => {\r\n entries.forEach(entry => {\r\n if (entry.isIntersecting) {\r\n entry.target.classList.add('visible');\r\n revealObserver.unobserve(entry.target);\r\n }\r\n });\r\n },\r\n { threshold: 0.1, rootMargin: '0px 0px -40px 0px' }\r\n);\r\n\r\ndocument.body.classList.add('js-reveal');\r\ndocument.querySelectorAll(\r\n '.pain-card, .service-card, .process-step, .stat-card, .testimonial-card, .faq-item'\r\n).forEach((el, i) => {\r\n el.classList.add('reveal');\r\n el.style.transitionDelay = `${(i % 4) * 0.07}s`;\r\n revealObserver.observe(el);\r\n});\r\n\r\n\/* ================================================================\r\n CONTACT FORM VALIDATION & SUBMISSION\r\n================================================================ *\/\r\nconst form = document.getElementById('lead-form');\r\nconst formSuccess = document.getElementById('form-success');\r\n\r\nfunction validateField(field) {\r\n const group = field.closest('.form-group');\r\n const errorEl = group ? group.querySelector('.form-error') : null;\r\n\r\n if (field.required && !field.value.trim()) {\r\n field.classList.add('error');\r\n if (errorEl) errorEl.textContent = 'Dieses Feld ist erforderlich.';\r\n return false;\r\n }\r\n\r\n if (field.type === 'email' && field.value.trim()) {\r\n const emailRegex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n if (!emailRegex.test(field.value.trim())) {\r\n field.classList.add('error');\r\n if (errorEl) errorEl.textContent = 'Bitte eine g\u00fcltige E-Mail-Adresse eingeben.';\r\n return false;\r\n }\r\n }\r\n\r\n if (field.type === 'checkbox' && field.required && !field.checked) {\r\n field.classList.add('error');\r\n const checkboxGroup = field.closest('.form-group--checkbox');\r\n const checkboxError = checkboxGroup ? checkboxGroup.querySelector('.form-error') : null;\r\n if (checkboxError) checkboxError.textContent = 'Bitte stimme der Datenschutzerkl\u00e4rung zu.';\r\n return false;\r\n }\r\n\r\n field.classList.remove('error');\r\n if (errorEl) errorEl.textContent = '';\r\n return true;\r\n}\r\n\r\nif (form) {\r\n \/\/ Live validation on blur\r\n form.querySelectorAll('input, textarea, select').forEach(field => {\r\n field.addEventListener('blur', () => validateField(field));\r\n field.addEventListener('input', () => {\r\n if (field.classList.contains('error')) validateField(field);\r\n });\r\n });\r\n\r\n form.addEventListener('submit', async e => {\r\n e.preventDefault();\r\n\r\n \/\/ Validate all required fields\r\n let valid = true;\r\n form.querySelectorAll('input[required], textarea[required]').forEach(field => {\r\n if (!validateField(field)) valid = false;\r\n });\r\n\r\n if (!valid) {\r\n \/\/ Focus first error\r\n const firstError = form.querySelector('.error');\r\n if (firstError) firstError.focus();\r\n return;\r\n }\r\n\r\n const submitBtn = form.querySelector('.btn-submit');\r\n submitBtn.classList.add('loading');\r\n submitBtn.disabled = true;\r\n\r\n \/\/ Simulate form submission (replace with real endpoint\/Netlify\/Formspree etc.)\r\n await new Promise(resolve => setTimeout(resolve, 1200));\r\n\r\n \/\/ Show success state\r\n form.style.display = 'none';\r\n formSuccess.removeAttribute('hidden');\r\n\r\n \/\/ Scroll into view\r\n formSuccess.scrollIntoView({ behavior: 'smooth', block: 'center' });\r\n });\r\n}\r\n\r\n\/* ================================================================\r\n SMOOTH ANCHOR SCROLLING WITH OFFSET\r\n================================================================ *\/\r\ndocument.querySelectorAll('a[href^=\"#\"]').forEach(link => {\r\n link.addEventListener('click', e => {\r\n const id = link.getAttribute('href').slice(1);\r\n const target = document.getElementById(id);\r\n if (!target) return;\r\n e.preventDefault();\r\n target.scrollIntoView({ behavior: 'smooth', block: 'start' });\r\n });\r\n});\r\n\r\n\r\n <\/script>\r\n<\/body>\r\n<\/html>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>WordPress Relaunch Schleswig-Holstein | werbung.sh \u2013 Deine WordPress-Agentur Leistungen Ablauf FAQ Anfrage stellen Leistungen Ablauf FAQ Anfrage stellen Werbeagentur aus Schleswig-Holstein \u00b7 Seit 2000 Deine Webseite verdient einenfrischen Start. Veraltetes Design, schlechte Google-Rankings, keine Leads? Wir relaunchen Webseiten, die nicht nur modern aussehen \u2013 sondern Kunden gewinnen. Kostenloses Erstgespr\u00e4ch Ablauf ansehen \u00dcber 25 Jahre Erfahrung […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-97","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/relaunch.werbung.sh\/index.php?rest_route=\/wp\/v2\/pages\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/relaunch.werbung.sh\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/relaunch.werbung.sh\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/relaunch.werbung.sh\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/relaunch.werbung.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=97"}],"version-history":[{"count":23,"href":"https:\/\/relaunch.werbung.sh\/index.php?rest_route=\/wp\/v2\/pages\/97\/revisions"}],"predecessor-version":[{"id":129,"href":"https:\/\/relaunch.werbung.sh\/index.php?rest_route=\/wp\/v2\/pages\/97\/revisions\/129"}],"wp:attachment":[{"href":"https:\/\/relaunch.werbung.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}