/* ============================================================ KOELN-WERBESEITEN (/lp/webdesign-koeln, /lp/seo-koeln) Eigene Datei, damit /lp/seo und /lp/webdesign unberuehrt bleiben. Bei jeder Aenderung die ?v=-Nummer in beiden Seiten hochzaehlen. ============================================================ */ /* ---------- Dom-Hero (nur /lp/webdesign-koeln) ------------------------- Ebenen: 1 Buehne (Foto bzw. drei Tiefenebenen) · 2 Schleier · 3 Text. Das erste Bild ist ein normales (LCP, auch auf dem Handy). Ab 900 px mit Maus laedt das Skript nach dem Seitenaufbau drei Ebenen nach (Himmel, Dom, Vordergrund) und bewegt sie unterschiedlich weit: Maus und Scrollen erzeugen Tiefe. Handy: nur das Standbild. */ .dom-hero { background: #0f110f; align-items: center; } .dom-buehne { position: absolute; inset: 0; z-index: 0; overflow: hidden; perspective: 1400px; } .dom-buehne picture, .dom-buehne img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .dom-buehne img { object-fit: cover; object-position: 100% 50%; } .dom-ebene { opacity: 0; will-change: transform; transform-origin: 66% 70%; } .dom-buehne.ist-3d .dom-ebene { opacity: 1; } .dom-ebene--himmel { transform: scale(1.07); } /* Wechsel Standbild -> Ebenen ohne Ueberblendung: Alle drei Ebenen stehen im selben Massstab wie das Standbild und ergeben zusammen dasselbe Bild. Eine Ueberblendung zeigte den Dom kurz doppelt (Layout-Pruefung 01.10.), ein Einblenden nur des Doms liess ihn flackern. */ @media (min-width: 900px) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .dom-buehne picture img { transform: scale(1.07); transform-origin: 66% 70%; } } .dom-ebene--dom { transform: scale(1.07); } .dom-ebene--vorne { transform: scale(1.07); } /* Schleier: dunkelt ab, faerbt nicht ein (fast schwarz, Hauch Gruen). Links dicht fuer den Text, nach rechts frei fuer den Dom, unten Uebergang in die Seite. */ .dom-hero .wd-hero-scrim { background: linear-gradient(0deg, rgba(8,14,10,.96) 0%, rgba(8,14,10,0) 22%), linear-gradient(90deg, rgba(8,14,10,.92) 0%, rgba(8,14,10,.82) 34%, rgba(8,14,10,.34) 60%, rgba(8,14,10,0) 76%); } .dom-hero .wd-hero-vignette { box-shadow: inset 0 0 180px rgba(0,0,0,.55); } /* Der Text steht links, der Dom rechts daneben: Spalte schmaler, Hook kleiner als auf /lp/webdesign, damit Knopf und Bewertung bei 1440x900 ueber der Falz liegen. */ .dom-hero .container { width: 100%; } @media (min-width: 900px) { .dom-hero { min-height: min(92svh, 900px); } .dom-hero .wd-col-text { max-width: 700px; } .dom-hero .wd-metarow { max-width: none; } } /* Die drei Plaketten auf einer Zeile: duerfen breiter sein als der Text, sie haben eigenen Grund. */ @media (min-width: 1100px) { .dom-hero .wd-metarow { width: 800px; } .dom-hero .wd-hook { font-size: clamp(2.4rem, 4vw, 3.6rem); line-height: 1.02; } } /* Handy: Hochformat-Ausschnitt, Dom oben, Text darunter auf dichtem Grund. */ @media (max-width: 767px) { .dom-buehne img { object-position: 50% 0; } .dom-hero { align-items: flex-end; } .dom-hero .wd-hero-scrim { background: linear-gradient(0deg, #0b120d 0%, rgba(11,18,13,.9) 30%, rgba(11,18,13,.62) 52%, rgba(11,18,13,.3) 74%, rgba(11,18,13,.12) 100%); } .dom-hero .wd-col-text { text-shadow: 0 1px 14px rgba(0,0,0,.6); } .dom-hero .wd-hook .neon { text-shadow: none; } } @media (prefers-reduced-motion: reduce) { .dom-ebene { display: none; } } /* ---------- Koelner Kunden direkt unter dem ersten Bildschirm ---------- Baustein Form B (.tm-paar / .tm-klein) aus lp.css, ergaenzt um die Ergebnis-Zeile und die Ortsmarke. */ .koeln-kunden { padding-top: clamp(2.6rem, 5vw, 3.6rem); } .koeln-kunden .tm-paar { margin-top: 1.6rem; } .koeln-kunden .tm-klein { gap: 0; } .koeln-kopf { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; } .koeln-kopf img.logo { height: 48px; width: auto; max-width: 150px; object-fit: contain; } .koeln-ort { display: inline-flex; align-items: center; gap: .35rem; margin-left: auto; font-size: .9rem; font-weight: 700; color: var(--color-green-2, #1B7A4A); background: rgba(61,224,41,.12); border-radius: 999px; padding: .3rem .7rem; white-space: nowrap; } .koeln-ort svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; } .koeln-ergebnis { display: flex; align-items: baseline; gap: .7rem; margin: 1.2rem 0 0; padding: .85rem 1rem; border-radius: 12px; background: var(--color-dark-1, #0D2B1A); color: #fff; } .koeln-ergebnis b { font-family: 'Archivo Black', system-ui, sans-serif; font-size: 1.35rem; line-height: 1; color: var(--color-neon-1, #3DE029); flex: none; } .koeln-ergebnis span { font-size: 1rem; line-height: 1.4; min-width: 0; } /* 320 px: neben "rund 60 %" blieb fuer den Text nur 105 px, "Werbekosten," lief aus der Box. */ @media (max-width: 400px) { .koeln-ergebnis { flex-direction: column; gap: .35rem; } } .koeln-kunden .tm-wer .quelle a { white-space: nowrap; } @media (max-width: 560px) { .koeln-kopf img.logo { height: 34px; } } /* ---------- Dom im SEO-Hero (/lp/seo-koeln) ------------------------------ Bauart /lp/seo (Text links, Bianca rechts), die Wachstumskurve ist durch den Dom ersetzt (Adrian 01.10.2026). Gleiche Buehne und Ebenen wie auf /lp/webdesign-koeln. Bianca steht vor dem Dom. */ .hero-kurve.dom-hero-seo { background: #0f110f; background-image: none; } .dom-seo-scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(0deg, rgba(8,14,10,.9) 0%, rgba(8,14,10,0) 26%), linear-gradient(90deg, rgba(8,14,10,.92) 0%, rgba(8,14,10,.82) 36%, rgba(8,14,10,.3) 62%, rgba(8,14,10,.12) 100%); } @media (max-width: 767px) { .dom-seo-scrim { background: linear-gradient(0deg, #0b120d 0%, rgba(11,18,13,.9) 34%, rgba(11,18,13,.62) 58%, rgba(11,18,13,.3) 82%, rgba(11,18,13,.15) 100%); } .dom-hero-seo .hero-v3__inner { text-shadow: 0 1px 14px rgba(0,0,0,.6); } .dom-hero-seo .hero-trust-badge, .dom-hero-seo .btn { text-shadow: none; } } /* ---------- Mehr Köln im Bild (Adrian 01.10.2026) ------------------------ Abschluss: Foto der Hohenzollernbruecke statt Wortregen, darueber der dunkelgruene Schleier wie bei .cta-banner-region auf /seo-agentur-koeln. Bild als , nicht als CSS-Hintergrund: der wuerde sofort beim Seitenaufruf mitgeladen. */ .koeln-abschluss { position: relative; overflow: hidden; } .koeln-abschluss-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: 0; } .koeln-abschluss::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(rgba(13,43,26,.84), rgba(13,43,26,.94)); } .koeln-abschluss > .container { position: relative; z-index: 2; } /* Bildband im Kundenblock (/lp/seo-koeln) */ .koeln-band { margin: 1.4rem 0 0; } .koeln-band img { width: 100%; height: auto; display: block; border-radius: 20px; } /* "Stats don’t / lie." brach auf zwei Zeilen um. */ .dom-hero .wd-microproof { max-width: none; } /* Kundenkarten auf dem Handy zum Wischen statt untereinander (Adrian 01.10.2026). Muster wie .reviews-slider in lp.css: die naechste Karte schaut 2,5rem hervor. */ @media (max-width: 767px) { .koeln-kunden .tm-paar { display: flex; overflow-x: auto; gap: 1rem; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; padding: .5rem 1rem 1.25rem; margin: 1.2rem -1rem 0; scrollbar-width: none; scroll-padding: 0 1rem; } .koeln-kunden .tm-paar::-webkit-scrollbar { display: none; } .koeln-kunden .tm-paar > .tm-klein { flex: 0 0 calc(100% - 2.5rem); scroll-snap-align: start; min-width: 0; margin: 0; } .koeln-wisch { display: block; margin: .2rem 0 0; font-size: 1rem; color: var(--color-muted, #666); } } @media (min-width: 768px) { .koeln-wisch { display: none; } } /* Bianca-Sprechblase und mobiles Ausblenden der Anruf-Knoepfe: seit 01.10.2026 in lp.css, weil sie fuer /lp/seo und /lp/webdesign genauso gelten (Regel: Schwesterseiten gleich halten). */ /* Für-wen-Block (Köln): Text oben bündig neben dem Bild, seit die Städteliste fehlt (19.10.2026) */ .lp-bild-block--oben { align-items: start; }