/* snapshot-overrides.css
*
* Targeted fixes for Webflow elements that don't behave correctly outside
* Webflow's own hosting — typically because their visual state is driven by
* ix2 scroll/hover interactions that occasionally desync in the snapshot.
*
* Loaded after cyreen.webflow.css so these rules win.
*/
/* ---------------------------------------------------------------------------
* Case study detail pages
* --------------------------------------------------------------------------- */
/* Case study detail sections (.section_advertising / .section_discount /
* .section_ton-relevanz / etc.) are `display: flex` by default in
* cyreen.webflow.css. That makes their child .div-block-575 a flex item that
* shrinks to content width instead of filling — the visible "everything
* cluttered on the left" symptom. Force vertical stack layout.
*
* Excludes `.press-release` because /de/pressemitteilung relies on
* `.section_advertising.padding-global` being `display: flex` for its
* two press-list columns to sit side-by-side. */
section[class*='section_'][class*='advertising']:not(.press-release),
section[class*='section_'][class*='discount']:not(.press-release),
section[class*='section_'][class*='ton-relevanz']:not(.press-release),
section[class*='section_'][class*='kontakte']:not(.press-release),
section[class*='section_'][class*='wetter']:not(.press-release),
section[class*='section_'][class*='zeit']:not(.press-release),
section[class*='section_'][class*='langzeit']:not(.press-release),
section[class*='section_'][class*='a-b']:not(.press-release),
section.section_advertising:not(.press-release),
section.section_discount:not(.press-release) {
display: block !important;
}
/* `.div-block-575` is the centered max-1200px wrapper; force full width so
* it actually centers visibly. */
.div-block-575 {
width: 100% !important;
max-width: 1200px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* `.div-block-573` is the main content area inside .div-block-575. */
.div-block-573 {
width: 100%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* `.text-block-134` is the sticky "⭠ ZURÜCK" button.
*
* The real bug: cyreen.webflow.css sets
* .text-block-134:hover { margin-left: 75px; }
* combined with `transition: all .2s` — so on hover the element slides 75px
* to the right. The cursor, parked at the left edge, then sits OUTSIDE the
* element → hover ends → it slides back → cursor now over it → hover starts
* → infinite flicker.
*
* Kill both the hover slide and the base transition. Also force a stable
* visible state in case ix2 (Webflow's interaction engine) initialises it
* at opacity:0 and never fires the fade-in. */
.text-block-134 {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
transition: none !important;
}
.text-block-134:hover {
margin-left: 0 !important; /* cancel the 75px slide that causes the flicker */
transform: none !important;
}
/* Toolbar thread YLEqm0uHhuSJ: the "⭠ ZURÜCK" link (.link-23) renders as a
* filled maroon pill (background + border-radius:999px + padding) — a "box"
* that should not be there. Restore the plain text link. */
.link-23,
.link-23:hover {
background-color: transparent !important;
padding-left: 0 !important;
padding-right: 0 !important;
border-radius: 0 !important;
}
/* Toolbar thread u2UV13uHdERN: add breathing room below the back link so it
* does not collide with the Zusammenfassung block on the case-study pages. */
.text-block-134 {
margin-bottom: 1.5rem !important;
}
/* ---------------------------------------------------------------------------
* In-store retail media — partner logo row
* --------------------------------------------------------------------------- */
/* Toolbar thread lFArRq7I9fbc: the four logos sat in a Webflow grid with
* per-logo grid-area placement plus 3 empty cells, so the visible spacing
* came out lopsided. On desktop, lay them out in four equal columns with each
* logo centred in its slot (kept to >=992px so the Webflow mobile/tablet
* stacking is untouched). NOTE: a small residual offset remains on logos whose
* source PNG carries asymmetric transparent padding — that needs an asset
* re-export, not CSS. */
@media screen and (min-width: 992px) {
.section_case-studies .div-block-554 {
display: grid !important;
grid-template-columns: repeat(4, 1fr) !important;
justify-items: center !important;
align-items: center !important;
gap: 24px;
}
.section_case-studies .div-block-554 > *:not(.link-block-29) {
display: none !important;
}
.section_case-studies .div-block-554 > .link-block-29 {
grid-column: auto !important;
grid-row: auto !important;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
}
}
/* ---------------------------------------------------------------------------
* C.A.P. data-cycle (.scroll-track) — make the bullet texts visible
* --------------------------------------------------------------------------- */
/* Toolbar thread CrSiQd1eXuHf: the four data-cycle bullets (Datenerfassung,
* Datenanalyse, Datenmuster, Datentargeting) start at opacity:0 + translateY
* (the intended reveal), but Webflow's IX2 holds them at opacity:0 forever and
* never animates them in, so the text is invisible. A small script on the
* c-a-p page adds `.cyr-reveal` to each bullet in turn once the section scrolls
* into view; the `!important` here beats IX2's inline opacity, and the base
* transition makes it a fade + slide-up. */
.cap-optimization_text-1,
.cap-optimization_text-2,
.cap-optimization_text-3,
.cap-optimization_text-4 {
transition:
opacity 0.6s ease,
transform 0.6s ease;
}
.cap-optimization_text-1.cyr-reveal,
.cap-optimization_text-2.cyr-reveal,
.cap-optimization_text-3.cyr-reveal,
.cap-optimization_text-4.cyr-reveal {
opacity: 1 !important;
transform: none !important;
}
.cap-optimization_redline {
height: 100% !important;
}
/* Reduced-motion: show everything at once, no animation. */
@media (prefers-reduced-motion: reduce) {
.cap-optimization_text-1,
.cap-optimization_text-2,
.cap-optimization_text-3,
.cap-optimization_text-4 {
opacity: 1 !important;
transform: none !important;
}
.cap-optimization_redline {
height: 100% !important;
}
}
/* ---------------------------------------------------------------------------
* Case-studies-2 — "für FMCG Marken" / "für Wissenschaftler" boxes
* --------------------------------------------------------------------------- */
/* Toolbar threads 5LPmTjfKtuBv / O-9UBUDvHBod: the two boxes were clustered in
* the centre. Spread them so each sits more centrally in its half of the page,
* and centre the heading + the call-to-action button in each box. */
.div-block-595 {
width: 100% !important;
max-width: 1040px;
margin-left: auto;
margin-right: auto;
justify-content: space-around !important;
}
.div-block-264,
.div-block-269 {
text-align: center !important;
align-items: center !important;
}
/* ---------------------------------------------------------------------------
* Case-studies-2 slider — align title + logo with the paragraph
* --------------------------------------------------------------------------- */
/* Toolbar threads fYjcpM8Yo_PT / PvTn3-vcJkwc / pOfH567fcNnh: in the case-study
* slider each slide's title + logo sat in a full-width floated column with
* centred content, so they did not line up with the paragraph below and
* landed differently per slide. Force every slide column (title AND
* paragraph) to the same centred 707 px block so the whole slide stacks
* vertically the same way on DE and EN.
*
* DE case-studies-2 columns: .columns-213 (title) + .column-234 (paragraph).
* EN case-studies columns: .columns-204 (title) + .column-134 (paragraph).
*
* All four get the same treatment. Without applying to both columns of a
* row the second col floats next to the first and the slide reads as a
* two-column layout instead of a stack. */
.cs-slide .columns-213,
.cs-slide .column-234,
.cs-slide .columns-204,
.cs-slide .column-134 {
float: none !important;
width: 707px !important;
max-width: 100%;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
justify-content: flex-start !important;
}
/* ---------------------------------------------------------------------------
* Two-column section grids — align the right description with the heading
* --------------------------------------------------------------------------- */
/* Toolbar threads SwEkBPoMOcn_ / a-umN8FuHHiI / TppFGWxnOOie (Davide's
* reference image): in the topline + heading / description sections the
* right-hand description should line up with the heading, NOT with the
* small red topline above it. The grid top-aligns both columns at the topline,
* so push the description down by the topline's footprint (24px height + 4px
* gap) to sit level with the heading. Desktop only — on mobile the columns
* stack. :has(.topline) leaves topline-less grids untouched. */
@media screen and (min-width: 992px) {
.basic-grid:has(.topline) > .content-wrap:nth-child(2) {
margin-top: 28px;
}
}
/* ---------------------------------------------------------------------------
* CAP Explorer — section toplines
* --------------------------------------------------------------------------- */
/* Toolbar thread MeyDfmdREq0u: the section toplines (the small eyebrow over
* each heading, e.g. "KAMPAGNEN-MANAGEMENT") render dark grey under the
* active-grey-black section theme, but they should be brand red like the rest
* of the site. Restore the red. */
.section_campaigns .topline,
.section_infrastructure .topline,
.section_retail .topline {
color: var(--brand_colors--red_active) !important;
}
/* ---------------------------------------------------------------------------
* C.A.P. CTA section background (de/c-a-p, en/c-a-p, en/home)
* --------------------------------------------------------------------------- */
/* Toolbar thread CDYN6EJvwHm4: swap the old "Gemüse" stock photo for the new
* C.A.P. Screen image, and self-host it (it used to hot-link the Webflow CDN).
* Show the required image credit subtly in the corner. */
.section_cta-cap {
background-image: url('/cap-screen-kaese.jpg') !important;
position: relative;
}
.cap-image-credit {
position: absolute;
right: 0.75rem;
bottom: 0.5rem;
z-index: 2;
font-size: 0.6rem;
line-height: 1.2;
letter-spacing: 0.02em;
color: rgba(255, 255, 255, 0.75);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
pointer-events: none;
}
/* ---------------------------------------------------------------------------
* Footer (every page)
* --------------------------------------------------------------------------- */
/* Toolbar thread gSleTT18WEvq: the Kontakt + Social links sit in
items
* that pick up 1.25rem (20px), but the address