/* ============================================================ "Bekannt aus:" — Logo-Laufleiste im Hero Jakobs Auftraege: 03.09. (Sprachnachricht) — Hersteller-Logos raus, Sender rein, darueber die Zeile "Bekannt aus:". 08.09. (WhatsApp) — "Kannst du das wieder so als drehanimation machen" + zwei Zeitungslogos ergaenzen. 20.09. (Sprachnachricht) — Logos gehen rechtlich nicht, stattdessen als Text in derselben Schrift. Seither Wortmarken statt Bilder. Die Laufbewegung selbst kommt aus dem Template: Webflow-IX2 "a-7 Marquee [looped]" schiebt alle .marquee-item-right in 20 s von 0 % auf -100 % und wiederholt das endlos. Darum bleibt die Original-Struktur (.marquee-row-02 > .marquee-item-right > .marquee-item) erhalten — hier wird nur die Optik gesetzt. Eigene Datei, damit der Webflow-Export unangetastet bleibt und der Umbau in einem Rutsch zurueckgenommen werden kann. ============================================================ */ /* Der Webflow-Export setzt .marquee auf width:11% — dadurch laeuft der Inhalt ueber und das erste Logo wird links abgeschnitten. Hier korrigiert. */ .marquee.bekannt-aus { width: 100%; } /* Achtung: der innere Container traegt BEIDE Klassen (class="section-inner marquee"), deshalb greift width:11% dort ein zweites Mal und quetscht die Reihe auf 141px zusammen — die Logos stapeln sich dann uebereinander. Hier ebenfalls aufheben. Zusaetzlich ist dieser Container das Sichtfenster der Laufleiste: overflow versteckt die Kopien, die links und rechts drausen stehen. */ .marquee.bekannt-aus .section-inner.marquee { width: 100%; justify-content: flex-start; /* Template zentriert — beim Laufband faengt es links an */ overflow: hidden; /* Weiche Kanten statt harter Schnitt. Bewusst als Maske und nicht als Farbverlauf: der Hero ist ein Foto, ein Verlauf in Sektionsfarbe wuerde als Balken sichtbar. */ /* 23.09.: Jakob (Sprachnachricht + Screenshot vom Handy): "da am Rand, da ist das einfach so nicht gefadet, das ist quasi Stopp". Ursache: die Kanten waren in Prozent (5 %) — auf 350 px Handybreite sind das 17 px, also praktisch ein harter Schnitt. Jetzt feste Pixelbreiten, damit der Fade auf jedem Geraet sichtbar ist (Desktop 88 px, Handy 44 px, siehe Media Queries unten). */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 88px, #000 calc(100% - 88px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 88px, #000 calc(100% - 88px), transparent 100%); } /* Traegerband hinter der Leiste. Solange die Logos still standen, sassen sie im dunklen linken Teil des Heros. Mit der Laufanimation wandern sie jetzt auch ueber die hellen Steinstufen rechts — dort verschwinden weisse Logos im Bild. Deshalb ein weicher dunkler Verlauf unter dem ganzen Block, an allen Kanten ausgeblendet, damit kein sichtbarer Kasten entsteht. */ .marquee.bekannt-aus { position: relative; isolation: isolate; /* haelt den Verlauf unter den Logos, ohne z-index-Wettruesten */ } .marquee.bekannt-aus::before { content: ""; position: absolute; /* 23.09.: seitlich NICHT mehr ueber den Container hinaus (-40px). Der Elternblock .container-md.is-marquee hat overflow:hidden und hat das Band genau an der Containerkante abgeschnitten — auf dem Handy stand dadurch rechts eine harte senkrechte Kante im Foto (Jakobs Screenshot). Jetzt endet das Band im Container und laeuft dort ueber die Maske unten weich aus. */ inset: -18px 0 -14px; z-index: -1; /* Oben UND unten auslaufend: ein nur nach oben auslaufender Verlauf setzt am unteren Rand eine sichtbare Kante ins Hero-Foto. */ background: linear-gradient(to bottom, rgba(14, 18, 12, 0) 0%, rgba(14, 18, 12, 0.70) 34%, rgba(14, 18, 12, 0.70) 66%, rgba(14, 18, 12, 0) 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); pointer-events: none; } .bekannt-aus__label { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); text-align: left; } /* Die Reihe darf nie umbrechen, sonst bricht die -100-%-Rechnung der Animation. */ .marquee.bekannt-aus .marquee-row-02 { flex-wrap: nowrap; align-items: center; padding: 0 0 28px; /* Abstand zur Sektionskante, sonst klebt die Reihe unten an */ border: 0; } .marquee.bekannt-aus .marquee-item-right { flex: none; align-items: center; } /* Ueberschreibt .marquee-item aus dem Template (height:30px, font-size:32px, margin-right:100px) — die Hoehe kommt jetzt pro Logo, siehe unten. */ .marquee.bekannt-aus .marquee-item { flex: 0 0 auto; height: auto; margin: 0 88px 0 0; font-size: inherit; } /* Gruppenabstand (23.09.): Jakob will "dass WDR und so am Anfang sind". In einer Endlosschleife gibt es keinen festen Anfang — beim Laden steht WDR links, danach laeuft alles durch. Deshalb bekommt jede Durchlauf-Gruppe (WDR · Westfalen-Blatt · Neue Westfaelische) nach dem letzten Eintrag einen deutlich groesseren Abstand, so dass sie als Einheit lesbar ist und jede Gruppe sichtbar mit WDR beginnt. */ .marquee.bekannt-aus .marquee-item:last-child { margin-right: 176px; } /* Textvariante (22.09.2026). Jakobs Sprachnachricht vom 20.09.: Senderlogos "kann man nicht machen [...] einfach als Text zu schreiben [...] und dann das halt alles in derselben Schrift". Also keine Bilder mehr, sondern Wortmarken in der Hausschrift (DM Sans, dieselbe wie die Ueberschriften) — bewusst ohne markentypische Farben oder Schnitte, damit es Text bleibt und keine nachgebaute Marke wird. Der frueher noetige Logo-Filter (grayscale/invert) entfaellt damit komplett. */ .marquee.bekannt-aus .bekannt-aus__wortmarke { display: block; font-family: var(--_font-family---font-primary); font-size: 23px; font-weight: 700; line-height: 1; letter-spacing: 0.02em; white-space: nowrap; /* "Neue Westfaelische" darf nie umbrechen */ color: rgba(255, 255, 255, 0.84); /* Der Hero ist links dunkel und rechts hell (Steinstufen) — ohne Schatten verschwindet die weisse Schrift auf der hellen Haelfte. Gleiche Logik wie vorher beim drop-shadow der Logos. */ text-shadow: 0 1px 5px rgba(0, 0, 0, 0.65), 0 0 14px rgba(0, 0, 0, 0.45); } /* Die frueheren Einzelhoehen je Logo entfallen: als Text haben alle Eintraege dieselbe Schriftgroesse — genau das hatte Jakob verlangt. */ @media (max-width: 991px) { .marquee.bekannt-aus .marquee-item { margin-right: 64px; } .marquee.bekannt-aus .marquee-item:last-child { margin-right: 128px; } .marquee.bekannt-aus .section-inner.marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); } .marquee.bekannt-aus .bekannt-aus__wortmarke { font-size: 20px; } } @media (max-width: 767px) { .bekannt-aus__label { font-size: 12px; margin-bottom: 10px; } .marquee.bekannt-aus .marquee-item { margin-right: 48px; } .marquee.bekannt-aus .marquee-item:last-child { margin-right: 96px; } .marquee.bekannt-aus .bekannt-aus__wortmarke { font-size: 17px; } } @media (max-width: 479px) { .marquee.bekannt-aus .marquee-row-02 { padding-bottom: 22px; } .marquee.bekannt-aus .marquee-item { margin-right: 34px; } .marquee.bekannt-aus .marquee-item:last-child { margin-right: 68px; } .marquee.bekannt-aus .section-inner.marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 44px, #000 calc(100% - 44px), transparent 100%); } .marquee.bekannt-aus .bekannt-aus__wortmarke { font-size: 15px; } } /* Das Template blendet .marquee unter 480px komplett aus. Fuer einen Social-Proof-Block ist genau das falsch — auf dem Handy wieder einblenden. */ @media screen and (max-width: 479px) { .marquee.bekannt-aus { display: block; } } /* Wer Bewegung im System abgestellt hat, bekommt die Leiste stehend. Die Animation laeuft ueber IX2-Inline-Transforms, deshalb braucht es !important. */ @media (prefers-reduced-motion: reduce) { .marquee.bekannt-aus .marquee-item-right { transform: none !important; } /* Ohne Lauf sind die Kopien sinnlos und wuerden die Leiste doppelt zeigen. */ .marquee.bekannt-aus .marquee-item-right[aria-hidden="true"] { display: none; } /* Die linke Maskenkante ist nur dafuer da, dass herauslaufende Eintraege weich verschwinden. Steht die Leiste still, wuerde sie dauerhaft das erste Wort anschneiden ("WDR" -> "R"). Deshalb hier nur rechts ausblenden. */ .marquee.bekannt-aus .section-inner.marquee { -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 64px), transparent 100%); } }