/* ============================================================ "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. 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. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, 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; inset: -18px -40px -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 6%, #000 94%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, 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; } /* Die Kachel aus dem Template (halbtransparentes Weiss + 20px Radius) faellt weg. Stattdessen monochrom hellgrau — die Logodateien sind dunkle Zeichnungen auf transparent, deshalb erst entfaerben, dann auf Weiss ziehen und abdunkeln. */ .marquee.bekannt-aus .bekannt-aus__logo { display: block; width: auto; height: 100%; padding: 0; background: none; border-radius: 0; /* Der Hero ist links dunkel und rechts hell (Steinstufen). Ohne die weisse Kachel braucht es deshalb einen weichen Schatten, sonst verschwindet ein helles Logo auf hellem Bilduntergrund. */ /* KEIN brightness(0): das wuerde die Logos zu flachen Silhouetten machen und Negativ-Elemente verschlucken — bei WDR 2 verschwindet dann die weisse "2" im roten Balken. Mit invert + leichter Aufhellung bleibt sie lesbar. */ filter: grayscale(1) invert(1) brightness(1.35) contrast(1.15) drop-shadow(0 1px 5px rgba(0, 0, 0, 0.65)) drop-shadow(0 0 14px rgba(0, 0, 0, 0.45)); opacity: 0.72; } /* Optische Groesse je Logo. Gleiche Boxhoehe wirkt NICHT gleich gross: die Marken nutzen ihre Flaeche unterschiedlich stark aus (gemessener Tintenanteil der Hoehe: WDR 95 %, WDR 2 100 %, Platzhalter SAT.1 59 %) und die eigentliche Wortmarke sitzt jeweils anders darin. Die beiden Zeitungen sind reine Wortmarken ueber die volle Breite — die wirken bei gleicher Hoehe deutlich groesser und werden deshalb kleiner gesetzt. */ .marquee.bekannt-aus .marquee-item.bekannt-aus__item--wdr { height: 27px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--wdr2 { height: 33px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--sat1 { height: 31px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--wb { height: 21px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--nw { height: 22px; } @media (max-width: 991px) { .marquee.bekannt-aus .marquee-item { margin-right: 64px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--wdr { height: 23px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--wdr2 { height: 28px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--sat1 { height: 26px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--wb { height: 19px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--nw { height: 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.bekannt-aus__item--wdr { height: 20px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--wdr2 { height: 24px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--sat1 { height: 22px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--wb { height: 17px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--nw { height: 18px; } } @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.bekannt-aus__item--wdr { height: 16px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--wdr2 { height: 20px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--sat1 { height: 18px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--wb { height: 15px; } .marquee.bekannt-aus .marquee-item.bekannt-aus__item--nw { height: 16px; } } /* 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; } }