/* ========================================================================== MEYER – Vorschaltseite / Pop-up Design: 260715_MEYER_Website_Vorschaltseite_Pop-Up (737 x 484 px) Schrift: IBM Plex Sans (lokal eingebunden) ========================================================================== */ @font-face { font-family: 'IBM Plex Sans'; src: url('../Fonts/IBMPlexSans-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'IBM Plex Sans'; src: url('../Fonts/IBMPlexSans-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; } /* --- Overlay (backdrop, centers the popup) ------------------------------ */ .meyer-popup-overlay { position: fixed; inset: 0; z-index: 1000; display: flex; padding: 24px; background: rgba(255, 255, 255, 0.9); overflow-y: auto; backdrop-filter: blur(20px); } .meyer-popup-overlay[hidden] { display: none; } .meyer-popup-overlay .meyer-popup { margin: auto; } .meyer-popup:focus { outline: none; } /* Set on while the popup is open: no page scrolling behind it */ .meyer-popup-open { overflow: hidden; } .meyer-popup { --mp-blue: #0019FF; --mp-white: #FFFFFF; position: relative; box-sizing: border-box; width: 737px; max-width: 100%; /* top spacing belongs to the container (no margin on the box → no margin collapse) */ padding-top: 183px; /* background: var(--mp-white); */ font-family: 'IBM Plex Sans', sans-serif; -webkit-font-smoothing: antialiased; } .meyer-popup *, .meyer-popup *::before, .meyer-popup *::after { box-sizing: border-box; margin: 0; padding: 0; } /* --- Schließen ---------------------------------------------------------- */ .meyer-popup__close { position: absolute; top: 0; left: 0; z-index: 1; display: flex; align-items: flex-start; justify-content: flex-start; width: 44px; height: 44px; border: 0; background: none; color: var(--mp-blue); cursor: pointer; } .meyer-popup__close:hover { background-color: transparent; color: var(--mp-blue); } .meyer-popup__close svg { display: block; width: 21.6px; height: 21px; } /* --- Logo --------------------------------------------------------------- */ .meyer-popup__logo { position: absolute; top: 0; right: 0; width: 360px; height: auto; } /* --- Headline-Box ------------------------------------------------------- */ .meyer-popup__headline-box { width: 515px; max-width: 100%; padding: 16px 20px 21px 30px; background: var(--mp-blue); } .meyer-popup__headline { font-size: 46px; font-weight: 700; line-height: 60px; letter-spacing: 0.01em; text-transform: uppercase; color: var(--mp-white); font-family: 'IBM Plex Sans', sans-serif; } /* --- Untere Zeile: Text links, Claim-Box rechts ------------------------- */ .meyer-popup__row { display: flex; align-items: flex-start; justify-content: space-between; } .meyer-popup__text { max-width: 433px; margin: 39px 20px 0 30px; font-size: 16.7px; font-weight: 400; line-height: 21px; color: var(--mp-blue); } .meyer-popup__claim { flex-shrink: 0; width: 222px; padding: 11.5px 12px 12.5px 20px; background: var(--mp-blue); font-size: 29px; font-weight: 400; line-height: 37px; text-transform: uppercase; color: var(--mp-white); } /* --- Mobil (Boxen untereinander) ---------------------------------------- */ @media (max-width: 600px) { .meyer-popup { padding-top: 28vw; } .meyer-popup__logo { width: 55% !important; } .meyer-popup__headline-box { width: 100%; padding: 20px 30px 10px 30px; } .meyer-popup__headline { font-size: 7vw; line-height: 1.3; } .meyer-popup__row { flex-direction: column-reverse; align-items: stretch; } .meyer-popup__claim { width: 100%; align-self: stretch; font-size: 5.5vw; line-height: 1.3; padding: 10px 30px 20px 30px; } .meyer-popup__claim br { display: none; } .meyer-popup__text { margin: 25px 30px 20px 30px; max-width: none; } }