/* * BRAUN local main preview overrides * Design contract: ../DESIGN.md * All rules stay under body to isolate this prototype. */ @font-face { font-family: "Mont"; font-style: normal; font-weight: 900; font-display: swap; src: url("/font/mont-heavy-demo.otf") format("opentype"), url("/font/braun-mont-heavy-demo.otf") format("opentype"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/font/braun-montserrat-medium-500.ttf") format("truetype"); } @font-face { font-family: "Montserrat Light"; font-style: normal; font-weight: 300; font-display: swap; src: url("/font/braun-montserrat-variable.ttf") format("truetype"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600 700; font-display: swap; src: url("/font/montserrat-600-700-latin.woff2") format("woff2"), url("/font/braun-montserrat-600-700-latin.woff2") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100; font-display: swap; src: url("/font/braun-montserrat-thin-100.ttf") format("truetype"); } body { --preview-banner-height: 870px; --preview-banner-top-offset: 85px; } /* Keep document scrolling on ; the live stylesheet makes a * second scroll container when off-screen AOS elements extend its bounds. */ body { overflow: visible !important; } /* This preview is intentionally limited to the header and main content. */ body .at-html.main .at-body { padding-top: var(--preview-banner-top-offset); padding-bottom: 0; } body .at-html:not(.main) .at-body { padding-top: 0 !important; } /* Several legacy subpages remove these layout classes after parsing. * Match their final state from the first paint to prevent the content jump. */ body .at-html:not(.main) .at-body > .container_fix { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; position: static !important; } body .at-html:not(.main) .at-body .at-content { padding-top: 0 !important; padding-bottom: 0 !important; } body .at-html:not(.main):has(.at-menu.on) { padding-top: 85px !important; } /* Header edit zone: the hero starts below the 85px header space. */ @media (min-width: 992px) { body [data-local-edit-target="header-navigation"], body [data-local-edit-target="header-navigation"] .pc-menu, body [data-local-edit-target="header-navigation"] .nav-visible, body [data-local-edit-target="header-navigation"] .container_fix2, body [data-local-edit-target="header-navigation"] .nav-top.nav-both, body [data-local-edit-target="header-navigation"] .menu-ul, body [data-local-edit-target="header-navigation"] .menu-li, body [data-local-edit-target="header-navigation"] .menu-a { height: 85px !important; } body [data-local-edit-target="header-navigation"] .menu-a { line-height: 85px !important; padding-right: 0 !important; padding-left: 0 !important; font-family: "Montserrat" !important; font-size: 20px !important; font-weight: 100 !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; } body [data-local-edit-target="header-navigation"] .menu-a.nav-height { height: 85px !important; line-height: 85px !important; } body [data-local-edit-target="header-navigation"] .menu-ul { flex-wrap: nowrap !important; } body [data-local-edit-target="header-navigation"] .menu-li + .menu-li { margin-left: 8px !important; } body [data-local-edit-target="header-navigation"] .menu-a > span { font-family: "Montserrat" !important; font-size: 20px !important; font-weight: 500 !important; letter-spacing: normal !important; text-transform: uppercase !important; } body [data-local-edit-target="header-navigation"] .menu-a > span > i { display: none !important; } body [data-local-edit-target="header-navigation"] .logo_box { order: 0; flex: 0 0 144px; width: 144px; height: 34px; } body [data-local-edit-target="header-navigation"] .pc_menu_right { order: 1; margin-left: 34px !important; } body [data-local-edit-target="header-navigation"] .nav-top.nav-both { order: 2; margin-left: auto !important; margin-right: 80px !important; transform: none; } body [data-local-edit-target="header-navigation"] .menu-li.menu_li2:hover > .sub-1div, body [data-local-edit-target="header-navigation"] .menu-li.menu_li2:focus-within > .sub-1div { box-sizing: border-box; position: fixed !important; top: 85px !important; right: 0 !important; left: 0 !important; z-index: 20; display: block !important; visibility: visible !important; width: 100% !important; max-width: none !important; padding: 50px 35px !important; transform: none !important; opacity: 1 !important; background: rgb(255 255 255 / 98%) !important; } body [data-local-edit-target="header-navigation"] .menu-li:not(.menu_li2) > .sub-1div { top: 85px !important; } body [data-local-edit-target="header-navigation"] .menu-li:not(.menu_li2):hover > .sub-1div, body [data-local-edit-target="header-navigation"] .menu-li:not(.menu_li2):focus-within > .sub-1div { top: 85px !important; } body [data-local-edit-target="header-navigation"] .container_fix2 { box-sizing: border-box; justify-content: flex-start !important; width: 100% !important; max-width: none !important; margin-right: 0 !important; margin-left: 0 !important; padding-right: 10px !important; padding-left: 40px !important; } body [data-local-edit-target="header-navigation"] .pc_menu_right > ul { gap: 20px !important; } body [data-local-edit-target="header-navigation"] .pc_menu_right > ul > li { padding-right: 0 !important; padding-left: 0 !important; } body [data-local-edit-target="header-navigation"] .nav-visible { background: #101010; transition: background-color 240ms ease, box-shadow 240ms ease; } body [data-local-edit-target="header-navigation"] .menu-a, body [data-local-edit-target="header-navigation"] .menu-a span, body [data-local-edit-target="header-navigation"] .pc_menu_right, body [data-local-edit-target="header-navigation"] .pc_menu_right li, body [data-local-edit-target="header-navigation"] .pc_menu_right a, body [data-local-edit-target="header-navigation"] .pc_menu_right span { color: #fff !important; } body [data-local-edit-target="header-navigation"] .pc_menu_right > ul > li > a { font-family: "Montserrat Light", "Montserrat", sans-serif !important; font-size: 20px !important; font-weight: 300 !important; letter-spacing: 0.5px !important; } body [data-local-edit-target="header-navigation"] .pc_menu_right > ul > li:first-child > a { letter-spacing: 0.5px !important; } body [data-local-edit-target="header-navigation"] .pc_menu_right > ul > .lang_menu_wrap { order: 0; } body [data-local-edit-target="header-navigation"] .menu-a:hover, body [data-local-edit-target="header-navigation"] .menu-a:hover > span, body [data-local-edit-target="header-navigation"] .menu-a:focus-visible, body [data-local-edit-target="header-navigation"] .menu-a:focus-visible > span, body [data-local-edit-target="header-navigation"] .pc_menu_right > ul > li > a:hover, body [data-local-edit-target="header-navigation"] .pc_menu_right > ul > li > a:focus-visible { color: #ac2339 !important; } body [data-local-edit-target="header-navigation"] .pc_menu_right > ul > li:first-child { order: 1; } body .at-menu .pc-menu .nav-visible > div .pc_menu_right > ul > li:first-child::after { display: none !important; content: none !important; } body [data-local-edit-target="header-navigation"] .pc_menu_right .lang_menu_wrap > a { box-sizing: border-box; display: inline-flex !important; align-items: center; justify-content: center; height: 42px !important; padding: 0 12px !important; border: 1px solid #8f1d29 !important; border-radius: 10px !important; background: transparent !important; line-height: 1 !important; } body [data-local-edit-target="header-navigation"] .pc_menu_right .lang_menu_wrap > a i { display: none !important; } body [data-local-edit-target="header-navigation"] .lang_menu_wrap > .lang_menu { top: calc(100% + 21px) !important; right: auto !important; left: 50% !important; transform: translateX(-50%); } body .at-menu .pc-menu .nav-visible > div .pc_menu_right > ul > li:last-child a { background: transparent !important; } body .at-menu .pc-menu .nav-visible > div .pc_menu_right > ul > li:last-child .lang_menu a { color: #333 !important; } body [data-local-edit-target="header-navigation"] .menu-a i img { filter: brightness(0) invert(1); } body [data-local-edit-target="header-navigation"] .lang_menu_wrap > a i img { display: block; width: 21px !important; height: 11px !important; filter: none !important; } body [data-local-edit-target="header-navigation"] .logo_box img { display: block; width: 144px !important; height: 34px !important; object-fit: contain; filter: none !important; } body.preview-header-scrolled [data-local-edit-target="header-navigation"] .nav-visible { background: #101010; box-shadow: 0 8px 30px rgb(0 0 0 / 24%); backdrop-filter: blur(14px); } } @media (min-width: 1440px) { body [data-local-edit-target="header-navigation"] .menu-li + .menu-li { margin-left: clamp(66px, 5vw, 96px) !important; } } /* Background-only Swiper banner. */ body .preview-main-banner { position: relative; min-height: 560px; height: var(--preview-banner-height); overflow: hidden; background: #17130f; } body .preview-main-swiper, body .preview-main-banner .swiper-wrapper, body .preview-main-slide { width: 100%; height: 100%; } body .preview-main-swiper { position: relative; overflow: hidden; } body .preview-main-nav { position: absolute; z-index: 5; top: 50%; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; padding: 0; border: 1px solid rgb(255 255 255 / 65%); border-radius: 50%; background: rgb(16 16 16 / 55%); color: #fff; font-family: Arial, sans-serif; font-size: 42px; font-weight: 300; line-height: 1; cursor: pointer; transform: translateY(-50%); backdrop-filter: blur(3px); } body .preview-main-nav span { display: block; margin-top: -4px; } body .preview-main-nav--prev { left: 24px; } body .preview-main-nav--next { right: 24px; } body .preview-main-nav:hover, body .preview-main-nav:focus-visible { border-color: #fff; background: rgb(16 16 16 / 80%); } body .preview-main-nav:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } body .preview-main-pagination { display: none; } body .preview-main-banner .swiper-wrapper { display: flex; } body .preview-main-slide { position: relative; flex: 0 0 100%; overflow: hidden; background: #17130f; } body .preview-main-media, body .preview-main-media img { display: block; width: 100%; height: 100%; } body .preview-main-media img { object-fit: cover; object-position: center; transform: scale(1.015); transition: transform 7s ease; } body .preview-main-procedures { display: none; } body .preview-main-claim { position: absolute; z-index: 2; top: calc(50% - 168px); left: calc(38% + 50px); margin: 0; color: #fff; font-family: "Mont"; font-size: 76px; font-weight: 900; line-height: 1.08; letter-spacing: -0.035em; text-transform: uppercase; transform: translateY(-50%); text-shadow: 0 2px 18px rgb(0 0 0 / 28%); } body .preview-main-claim > span { display: block; font-family: "Mont" !important; font-weight: 900 !important; white-space: nowrap; } body .preview-main-claim-accent { color: #e3e14a; font-family: "Mont" !important; font-weight: 900 !important; } body .preview-main-actions { position: absolute; z-index: 2; top: calc(50% - 30px); left: calc(38% + 50px); display: flex; align-items: center; gap: 12px; } body .preview-main-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: auto; height: 45px; padding: 0 18px; border: 1px solid #fff; border-radius: 10px; background: transparent; color: #fff; font-family: "Montserrat" !important; font-size: 19px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: filter 180ms ease; } body a.preview-main-button { text-decoration: none !important; } body .preview-main-button--before-after { border: 0; background: #ac2339; } body .preview-main-button--view-more { border-color: #aaa9a9; background: #2d383a; } body .preview-main-button:hover, body .preview-main-button:focus-visible { filter: brightness(1.1); } body .preview-main-shorts-label { position: absolute; z-index: 2; top: calc(50% + 57px); left: calc(38% + 50px); margin: 0; color: #fff; font-family: "Montserrat" !important; font-size: 32px; font-weight: 600; line-height: 1.2; } body .preview-main-shorts-row { position: absolute; z-index: 2; top: calc(50% + 109px); left: calc(38% + 50px); display: flex; flex-wrap: nowrap; gap: 12px; } body .preview-main-shorts-row a { display: block; flex: 0 0 auto; } body .preview-main-shorts-row a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } body .preview-main-shorts-row img { display: block; width: auto; height: 287px; aspect-ratio: 9 / 16; object-fit: cover; } body .preview-second-content { position: absolute; z-index: 2; top: clamp(43px, 17.9%, 141px); left: calc(50% - 184px); } body .preview-second-portraits { display: none; } body .preview-second-heading { margin: 0; color: #fff; font-family: "Mont" !important; font-size: clamp(68px, 5.3vw, 102px); font-weight: 900; line-height: 1; letter-spacing: -0.015em; text-transform: uppercase; text-shadow: 0 2px 18px rgb(0 0 0 / 22%); } body .preview-second-heading > span { display: block; font-family: "Mont" !important; font-weight: 900 !important; line-height: clamp(65px, 4vw, 98px); white-space: nowrap; } body .preview-second-heading > span:first-child { font-size: 77px; line-height: 102px; letter-spacing: 0.9px; } body .preview-second-heading > span:not(:first-child) { font-size: clamp(60px, 4.69vw, 76px); } body .preview-second-heading-accent { color: #fc5ee4; letter-spacing: -0.005em; } body .preview-second-heading > span:nth-child(4) { letter-spacing: -0.008em; } body .preview-second-actions { display: flex; align-items: center; gap: clamp(16px, 1.2vw, 13px); margin-top: 10px; margin-left: 2px; } body .preview-second-button { height: clamp(40px, 3.125vw, 45px); padding-right: clamp(12px, 0.94vw, 18px); padding-left: clamp(12px, 0.94vw, 18px); border-radius: clamp(6px, 0.52vw, 10px); font-size: clamp(17px, 1.25vw, 20px); font-weight: 600; } body .preview-third-content { position: absolute; z-index: 2; top: 92px; left: calc(50% - 204px); } body .preview-third-intro { margin: 0; color: #fff; font-family: "Montserrat" !important; font-size: clamp(18px, 1.33vw, 25.5px); font-weight: 500; line-height: 1.16; letter-spacing: -0.01em; } body .preview-third-heading { margin: 7px 0 0; color: #fff; font-family: "Mont" !important; font-size: clamp(60px, 4.58vw, 88px); font-weight: 900; line-height: clamp(65px, 4.92vw, 94.5px); letter-spacing: -0.006em; text-transform: uppercase; text-shadow: 0 2px 18px rgb(0 0 0 / 22%); } body .preview-third-heading > span { display: block; font-family: "Mont" !important; font-weight: 900 !important; white-space: nowrap; } body .preview-third-heading-confidence > span { font-family: "Mont" !important; font-weight: 900 !important; } body .preview-third-heading-accent { position: relative; background: linear-gradient(180deg, #b08f6e 25%, #f4ce97 60%); background-clip: text; color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body .preview-third-heading-accent::after { position: absolute; inset: 0; background: inherit; background-clip: text; color: transparent; content: attr(data-gradient-text); pointer-events: none; text-shadow: none; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } body .preview-third-actions { display: flex; align-items: center; gap: 22px; margin-top: -1px; } body .preview-third-shorts-label { margin: 24px 0 0; color: #fff; font-family: "Montserrat" !important; font-size: 34px; font-weight: 600; line-height: 1.2; } body .preview-third-shorts-row { display: flex; flex-wrap: nowrap; gap: 12px; margin-top: 19px; } body .preview-third-shorts-row a { display: block; flex: 0 0 auto; } body .preview-third-shorts-row a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } body .preview-third-shorts-row img { display: block; width: 136px; height: 244px; object-fit: cover; } body .preview-fourth-content { position: absolute; z-index: 2; top: 122px; left: clamp(54px, 3.65vw, 70px); max-width: calc(50% - 34px); } body .preview-fourth-intro { margin: 0; color: #fff; font-family: "Montserrat" !important; font-size: clamp(19px, 1.3vw, 25px); font-weight: 500; line-height: 1.12; letter-spacing: -0.015em; } body .preview-fourth-heading { margin: 10px 0 0; color: #fff; font-family: "Mont" !important; font-size: clamp(58px, 4.583vw, 88px); font-weight: 900; line-height: clamp(63px, 4.948vw, 95px); letter-spacing: -0.015em; text-transform: uppercase; text-shadow: 0 2px 18px rgb(0 0 0 / 22%); } body .preview-fourth-heading > span { display: block; font-family: "Mont" !important; font-weight: 900 !important; white-space: nowrap; } body .preview-fourth-heading-accent { color: #6eede2; font-family: "Mont" !important; font-weight: 900 !important; } body .preview-fourth-heading--mobile, body .preview-fourth-description { display: none; } body .preview-fourth-actions { display: flex; align-items: center; gap: clamp(14px, 1.15vw, 22px); margin-top: -7px; } body .preview-fourth-actions .preview-main-button { height: clamp(52px, 3.125vw, 60px); padding-right: clamp(14px, 0.94vw, 18px); padding-left: clamp(14px, 0.94vw, 18px); border-radius: clamp(8px, 0.52vw, 10px); font-size: clamp(20px, 1.25vw, 24px); } body .preview-fourth-shorts-label { margin: clamp(20px, 1.25vw, 24px) 0 0; color: #fff; font-family: "Montserrat" !important; font-size: clamp(28px, 1.77vw, 34px); font-weight: 600; line-height: 1.2; } body .preview-fourth-shorts-row { display: flex; flex-wrap: nowrap; gap: 12px; margin-top: 18px; margin-left: 3px; } body .preview-fourth-shorts-row a { display: block; flex: 0 0 auto; } body .preview-fourth-shorts-row a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } body .preview-fourth-shorts-row img { display: block; width: 136px; height: 244px; object-fit: cover; } body .preview-fifth-content { position: absolute; z-index: 2; top: 122px; left: clamp(54px, 3.65vw, 70px); max-width: calc(60% - 48px); } body .preview-fifth-intro { margin: 0; color: #fff; font-family: "Montserrat" !important; font-size: clamp(19px, 1.3vw, 25px); font-weight: 500; line-height: 1.2; letter-spacing: -0.01em; } body .preview-fifth-heading { margin: 10px 0 0; color: #fff; font-family: "Mont" !important; font-size: clamp(58px, 4.583vw, 88px); font-weight: 900; line-height: clamp(63px, 4.948vw, 95px); letter-spacing: -0.015em; text-transform: uppercase; text-shadow: 0 2px 18px rgb(0 0 0 / 22%); } body .preview-fifth-heading > span { display: block; font-family: "Mont" !important; font-weight: 900 !important; white-space: nowrap; } body .preview-fifth-heading-accent { color: #4dd5e1; font-family: "Mont" !important; font-weight: 900 !important; } body .preview-fifth-actions { display: flex; align-items: center; gap: clamp(14px, 1.15vw, 22px); margin-top: -7px; } body .preview-fifth-actions .preview-main-button { height: clamp(52px, 3.125vw, 60px); padding-right: clamp(14px, 0.94vw, 18px); padding-left: clamp(14px, 0.94vw, 18px); border-radius: clamp(8px, 0.52vw, 10px); font-size: clamp(20px, 1.25vw, 24px); } body .preview-fifth-description { margin: 24px 0 0; color: #fff; font-family: "Montserrat" !important; font-size: clamp(18px, 1.3vw, 25px); font-weight: 500; line-height: clamp(22px, 1.5625vw, 30px); letter-spacing: -0.01em; } body .preview-fifth-signature { margin: 18px 0 0; padding-left: 11px; border-left: 3px solid #4dd5e1; color: #fff; font-family: "Montserrat" !important; font-size: clamp(20px, 1.354vw, 26px); font-weight: 500; line-height: clamp(22px, 1.406vw, 27px); } body .preview-fifth-heading--mobile, body .preview-fifth-signature--mobile, body .preview-fifth-shorts-label, body .preview-fifth-shorts-row { display: none; } body .preview-sixth-content { position: absolute; z-index: 2; top: 144px; left: calc(50% + 4px); max-width: calc(50% - 73px); } body .preview-sixth-heading { margin: 0; color: #fff; font-family: "Mont" !important; font-size: clamp(58px, 4.583vw, 88px); font-weight: 900; line-height: clamp(63px, 4.948vw, 95px); letter-spacing: -0.015em; text-transform: uppercase; text-shadow: 0 2px 18px rgb(0 0 0 / 22%); } body .preview-sixth-heading > span { display: block; font-family: "Mont" !important; font-weight: 900 !important; white-space: nowrap; } body .preview-sixth-heading-accent { color: #2360dd; font-family: "Mont" !important; font-weight: 900 !important; } body .preview-sixth-actions { display: flex; align-items: center; gap: clamp(14px, 1.15vw, 22px); margin-top: 10px; } body .preview-sixth-divider { display: none; } body .preview-sixth-actions .preview-main-button { height: clamp(52px, 3.125vw, 60px); padding-right: clamp(14px, 0.94vw, 18px); padding-left: clamp(14px, 0.94vw, 18px); border-radius: clamp(8px, 0.52vw, 10px); font-size: clamp(20px, 1.25vw, 24px); } body .preview-sixth-description { margin: 24px 0 0; color: #fff; font-family: "Montserrat" !important; font-size: clamp(18px, 1.3vw, 25px); font-weight: 500; line-height: clamp(22px, 1.5625vw, 30px); letter-spacing: 0; } body .preview-seventh-content { top: 176px; left: calc(50% - 20px); max-width: calc(50% - 120px); } body .preview-seventh-intro { position: relative; top: 1px; margin: 0; color: #fff; font-family: "Montserrat" !important; font-size: clamp(19px, 1.3vw, 25px); font-weight: 500; line-height: 1.2; letter-spacing: 0; } body .preview-seventh-heading { position: relative; top: 2px; margin-top: 4px; margin-left: -6px; } body .preview-seventh-heading > span { transform: scaleX(1.015); transform-origin: left center; } body .preview-seventh-heading-accent { position: relative; top: -1px; color: #eb637b; font-family: "Mont" !important; font-weight: 900 !important; } body .preview-seventh-actions { margin-top: 0; margin-left: -8px; } body .preview-seventh-description { margin-top: 23px; line-height: 32px; } body .preview-seventh-signature { margin: 16px 0 0 2px; padding-left: 11px; border-left: 3px solid #eb637b; color: #fff; font-family: "Montserrat" !important; font-size: clamp(20px, 1.354vw, 26px); font-weight: 500; line-height: clamp(22px, 1.406vw, 27px); letter-spacing: 0.02em; } body .preview-seventh-signature--mobile, body .preview-seventh-shorts-label, body .preview-seventh-shorts-row { display: none; } body .preview-main-slide--sixth { background: #000; } body .preview-main-slide--second .preview-main-media { /* transform: translateX(-18px) scaleX(1.036) scaleY(1.021); */ transform-origin: center top; } body .preview-main-slide--second { overflow: visible; } body .preview-main-media--right img { object-position: 68% center; } body .preview-main-media--left img { object-position: left center; } body .swiper-slide-active .preview-main-media img { transform: scale(1.055); } body .preview-main-slide--second .preview-main-media img { transform: scale(1); } body .preview-main-slide--third .preview-main-media img { transform: scale(1); } body .preview-main-slide--fourth .preview-main-media img { transform: scale(1); } body .preview-main-slide--fifth .preview-main-media img { transform: scale(1); } body .preview-main-slide--sixth .preview-main-media img { transform: scale(1); } body .preview-main-slide--seventh .preview-main-media img { transform: scale(1); } @media (min-width: 992px) and (max-width: 1439px) { body .preview-main-slide--sixth .preview-main-media img { object-fit: contain; object-position: center top; } body .preview-sixth-content { top: 7.5vw; left: calc(50% + 4px); max-width: calc(50% - 49px); } body .preview-sixth-heading { font-size: 4.583vw; line-height: 4.948vw; } body .preview-sixth-actions { gap: clamp(12px, 1.15vw, 22px); margin-top: clamp(6px, 0.52vw, 10px); } body .preview-sixth-actions .preview-main-button { height: clamp(40px, 3.125vw, 60px); padding-right: clamp(12px, 0.94vw, 18px); padding-left: clamp(12px, 0.94vw, 18px); font-size: clamp(16px, 1.25vw, 24px); } body .preview-sixth-description { margin-top: clamp(16px, 1.25vw, 24px); font-size: clamp(16px, 1.3vw, 25px); line-height: clamp(20px, 1.5625vw, 30px); } body .preview-main-nav { width: 44px; height: 44px; font-size: 34px; } body .preview-main-nav--prev { left: 6px; } body .preview-main-nav--next { right: 6px; } } @media (min-width: 992px) and (max-width: 1919px) { body .preview-main-slide--seventh .preview-main-media img { object-position: 42% center; } body .preview-seventh-content { top: 9.167vw; left: calc(50% - 1.04vw); max-width: calc(50% - 6.25vw); } body .preview-seventh-intro { font-size: clamp(16px, 1.3vw, 25px); } body .preview-seventh-heading { margin-top: 0.208vw; margin-left: -0.3125vw; font-size: 4.583vw; line-height: 4.948vw; } body .preview-seventh-actions { gap: clamp(12px, 1.15vw, 22px); margin-top: 0; margin-left: -0.417vw; } body .preview-seventh-actions .preview-main-button { height: clamp(40px, 3.125vw, 60px); padding-right: clamp(12px, 0.94vw, 18px); padding-left: clamp(12px, 0.94vw, 18px); font-size: clamp(16px, 1.25vw, 24px); } body .preview-seventh-description { margin-top: clamp(15px, 1.198vw, 23px); font-size: clamp(16px, 1.3vw, 25px); line-height: clamp(21px, 1.667vw, 32px); } body .preview-seventh-signature { margin-top: clamp(11px, 0.833vw, 16px); padding-left: clamp(7px, 0.573vw, 11px); border-left-width: clamp(2px, 0.156vw, 3px); font-size: clamp(16px, 1.354vw, 26px); line-height: clamp(18px, 1.406vw, 27px); } } @media (max-width: 991px) { body { --preview-banner-height: 780px; --preview-banner-top-offset: 0px; } body [data-local-edit-target="header"], body [data-local-edit-target="header"] .m_header, body [data-local-edit-target="header"] .m_header .container_fix { box-sizing: border-box; height: 45px !important; min-height: 45px !important; padding-top: 0 !important; padding-bottom: 0 !important; background: #0c0c0e !important; } body [data-local-edit-target="header"] .m_header .m_logo img { display: block; width: 72px !important; max-width: none; height: 17px !important; object-fit: contain; } body [data-local-edit-target="header"] .m_header .head_counsel { display: none !important; } body [data-local-edit-target="header"] .preview-mobile-country { position: relative; display: flex; align-items: center; height: 45px; margin-right: 18px; margin-left: auto; } body [data-local-edit-target="header"] .preview-mobile-country-toggle { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; padding: 0; border: 0; background: transparent; cursor: pointer; } body [data-local-edit-target="header"] .preview-mobile-country-toggle img { display: block; width: 17px !important; height: 17px !important; object-fit: contain; } body [data-local-edit-target="header"] .preview-mobile-country-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 4px; } body [data-local-edit-target="header"] .preview-mobile-country-menu[hidden] { display: none !important; } body [data-local-edit-target="header"] .preview-mobile-country-menu { position: fixed; z-index: 1101; top: 45px; right: 15px; width: min(245px, calc(100vw - 30px)); max-height: calc(100vh - 60px); overflow-y: auto; padding: 8px; border: 1px solid #ddd; border-radius: 0 0 10px 10px; background: #fff; box-shadow: 0 12px 28px rgb(0 0 0 / 28%); } body [data-local-edit-target="header"] .preview-mobile-country-menu ul { margin: 0; padding: 0; list-style: none; } body [data-local-edit-target="header"] .preview-mobile-country-menu li + li { border-top: 1px solid #eee; } body [data-local-edit-target="header"] .preview-mobile-country-menu a { display: flex; align-items: center; min-height: 40px; padding: 6px 10px; color: #222 !important; font-family: "Montserrat", sans-serif; font-size: 14px; font-weight: 500; line-height: 1.2; text-decoration: none; } body [data-local-edit-target="header"] .preview-mobile-country-menu a:hover, body [data-local-edit-target="header"] .preview-mobile-country-menu a:focus-visible { background: #f4f4f4; } body [data-local-edit-target="header"] .preview-mobile-country-menu a:focus-visible { outline: 2px solid #8f1d29; outline-offset: -2px; } body [data-local-edit-target="header"] .preview-mobile-country-menu img { flex: 0 0 auto; width: 24px !important; height: 16px !important; margin-right: 10px; object-fit: contain; } body [data-local-edit-target="header"] .m_header a[onclick*="sidebar_open"] img { display: block; width: 22px !important; height: 13.5px !important; object-fit: contain; } body .preview-main-banner { min-height: 780px; } body .preview-main-nav { width: 44px; height: 44px; font-size: 34px; } body .preview-main-nav--prev { left: 12px; } body .preview-main-nav--next { right: 12px; } body .preview-main-media img, body .preview-main-media--right img { object-position: center center; } body .preview-main-slide--first .preview-main-media img { object-fit: contain; object-position: center top; background: #0c0c0e; } body .preview-main-media--left img { object-position: left center; } body .preview-main-claim { top: auto; right: 24px; bottom: 410px; left: 24px; font-size: clamp(26px, 7vw, 38px); text-align: center; transform: none; } body .preview-main-actions { top: auto; right: 24px; bottom: 334px; left: 24px; justify-content: center; flex-wrap: nowrap; gap: 8px; } body .preview-main-button { height: 52px; padding: 0 10px; font-size: 18px; } body .preview-main-shorts-label { top: auto; right: 24px; bottom: 284px; left: 24px; font-size: 26px; text-align: center; } body .preview-main-shorts-row { top: auto; right: 0; bottom: 24px; left: 0; gap: 10px; overflow-x: auto; padding: 0 24px; scrollbar-width: none; } body .preview-second-content { top: 40px; right: 20px; left: 20px; } body .preview-second-heading { font-size: clamp(34px, 9.2vw, 52px); } body .preview-second-heading > span { line-height: clamp(38px, 10.2vw, 54px); } body .preview-second-heading > span:first-child { font-size: clamp(34px, 9.2vw, 52px); line-height: clamp(38px, 10.2vw, 54px); } body .preview-second-heading > span:not(:first-child) { font-size: clamp(31px, 8.4vw, 48px); } body .preview-third-content { top: 40px; right: 20px; left: 20px; } body .preview-third-intro { font-size: 16px; } body .preview-third-heading { margin-top: 10px; font-size: clamp(31px, 8.4vw, 48px); line-height: clamp(38px, 10.2vw, 54px); } body .preview-third-actions { gap: 8px; margin-top: 8px; } body .preview-third-shorts-label { margin-top: 22px; font-size: 26px; } body .preview-third-shorts-row { gap: 10px; margin: 14px -20px 0; overflow-x: auto; padding: 0 20px; scrollbar-width: none; } body .preview-third-shorts-row::-webkit-scrollbar { display: none; } body .preview-fourth-content { top: 40px; right: 20px; left: 20px; max-width: none; } body .preview-fourth-intro { font-size: 16px; } body .preview-fourth-heading { margin-top: 10px; font-size: clamp(31px, 8.4vw, 48px); line-height: clamp(38px, 10.2vw, 54px); } body .preview-fourth-actions { gap: 8px; margin-top: 8px; } body .preview-fourth-shorts-label { margin-top: 22px; font-size: 26px; } body .preview-fourth-shorts-row { gap: 10px; margin: 14px -20px 0; overflow-x: auto; padding: 0 20px; scrollbar-width: none; } body .preview-fourth-shorts-row::-webkit-scrollbar { display: none; } body .preview-fifth-content { top: 40px; right: 20px; left: 20px; max-width: none; } body .preview-fifth-intro { font-size: 16px; } body .preview-fifth-heading { margin-top: 10px; font-size: clamp(28px, 7.8vw, 44px); line-height: clamp(34px, 9vw, 50px); } body .preview-fifth-actions { gap: 8px; margin-top: 8px; } body .preview-fifth-actions .preview-main-button { height: 52px; padding-right: 10px; padding-left: 10px; border-radius: 8px; font-size: 18px; } body .preview-fifth-description { margin-top: 20px; font-size: 16px; line-height: 1.45; } body .preview-fifth-signature { margin-top: 16px; font-size: 20px; line-height: 22px; } body .preview-sixth-content { top: auto; right: 20px; bottom: 40px; left: 20px; max-width: none; padding: 20px; border-radius: 12px; background: rgb(0 0 0 / 68%); } body .preview-sixth-heading { font-size: clamp(30px, 8.4vw, 46px); line-height: clamp(35px, 9.6vw, 52px); } body .preview-sixth-actions { gap: 8px; margin-top: 12px; } body .preview-sixth-actions .preview-main-button { height: 52px; padding-right: 10px; padding-left: 10px; border-radius: 8px; font-size: 18px; } body .preview-sixth-description { margin-top: 18px; font-size: 16px; line-height: 1.45; } body .preview-seventh-intro { top: 0; font-size: 16px; } body .preview-seventh-heading { top: 0; margin-top: 10px; margin-left: 0; } body .preview-seventh-heading > span { transform: none; } body .preview-seventh-actions { margin-left: 0; } body .preview-seventh-signature { margin-top: 16px; margin-left: 0; font-size: 18px; line-height: 22px; } body .preview-main-shorts-row::-webkit-scrollbar { display: none; } } @media (max-width: 767px) { html { background: #0c0c0e; scrollbar-width: none; } html::-webkit-scrollbar { display: none; } body .preview-main-pagination { z-index: 8; bottom: 24px !important; left: 50% !important; display: flex; width: 182px !important; height: 8px; align-items: center; justify-content: flex-start; gap: 6px; transform: translateX(-50%); white-space: nowrap; } body .preview-main-pagination .swiper-pagination-bullet { display: block; flex: 0 0 auto; width: 20px; height: 4px; margin: 0 !important; border-radius: 999px; background: #666; opacity: 0.78; transform: none; } body .preview-main-pagination .swiper-pagination-bullet-active { width: 26px; background: #c61f43; opacity: 1; } body { --preview-banner-height: auto; background: #0c0c0e; } body .preview-main-banner { height: auto; min-height: 0; aspect-ratio: 720 / 1164; box-shadow: 0 1px 0 #0c0c0e; } body .preview-main-nav { display: none; } body .preview-main-slide--second .preview-main-media { transform: none; } body .preview-main-slide--second .preview-second-content { top: 31.1%; right: auto; left: 5.56%; } body .preview-main-slide--second .preview-second-heading { letter-spacing: 0; text-shadow: none; } body .preview-main-slide--second .preview-second-heading > span { font-size: clamp(29px, 9.167vw, 36px); line-height: clamp(33px, 10vw, 39px); } body .preview-main-slide--second .preview-second-heading > span:first-child { font-size: clamp(33px, 10.278vw, 40px); line-height: clamp(36px, 11.25vw, 44px); letter-spacing: 0; } body .preview-main-slide--second .preview-second-actions { gap: clamp(10px, 3.056vw, 12px); margin-top: clamp(8px, 2.5vw, 10px); margin-left: clamp(11px, 3.472vw, 14px); } body .preview-main-slide--second .preview-second-button { height: 30px; padding-right: 10px; padding-left: 10px; border-radius: 5px; font-size: 12.3px; } body .preview-main-slide--second .preview-second-portraits { position: absolute; z-index: 2; top: 69.93%; left: 9.72%; display: block; width: 80.69%; height: 31.944vw; overflow: hidden; pointer-events: none; } body .preview-main-slide--second .preview-second-portraits img { position: absolute; top: -113.056vw; left: -9.722vw; display: block; width: 100vw; max-width: none; height: auto; } body .preview-main-slide--third .preview-main-media img { object-fit: contain; object-position: center top; background: #0c0c0e; } body .preview-main-slide--third .preview-third-content { top: calc(31.6% - 2px); right: 6.25%; left: 6.25%; } body .preview-main-slide--third .preview-third-intro { display: none; } body .preview-main-slide--third .preview-third-heading { margin: 0; font-size: clamp(30px, 9.444vw, 37px); line-height: clamp(33px, 10vw, 39px); letter-spacing: 0; text-shadow: none; } body .preview-main-slide--third .preview-third-heading > span { white-space: normal; word-break: normal; overflow-wrap: normal; } body .preview-main-slide--third .preview-third-heading-confidence > span { display: block; font-family: "Mont" !important; font-weight: 900 !important; } body .preview-main-slide--third .preview-third-heading-accent { padding-right: 0.16em; background: linear-gradient( 180deg, #b08f6e 0%, #f4ce97 22%, #f4ce97 100% ); background-clip: text; -webkit-background-clip: text; } body .preview-main-slide--third .preview-third-heading-accent::after { content: "AT BRAUN."; } body .preview-main-slide--third .preview-third-actions { gap: 11px; margin-top: 12.5px; margin-left: 10px; } body .preview-main-slide--third .preview-third-actions .preview-main-button { height: 30px; padding-right: 10px; padding-left: 10px; border-radius: 5px; font-size: 12.3px; } body .preview-main-slide--third .preview-third-shorts-label { margin: 10px 0 0 10px; font-size: 17px; } body .preview-main-slide--third .preview-third-shorts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 9px 13.5px 0 12.5px; overflow: visible; padding: 0; } body .preview-main-slide--third .preview-third-shorts-row a { min-width: 0; } body .preview-main-slide--third .preview-third-shorts-row img { width: 100%; height: auto; aspect-ratio: 136 / 244; object-fit: cover; } body .preview-main-slide--fourth .preview-main-media img { object-fit: contain; object-position: center top; background: #0c0c0e; } body .preview-main-slide--fourth .preview-fourth-content { top: 11.86%; right: 5.83%; left: 5.83%; } body .preview-main-slide--fourth .preview-fourth-intro { font-size: 11px; line-height: 14px; letter-spacing: 0; } body .preview-main-slide--fourth .preview-fourth-heading--desktop { display: none; } body .preview-main-slide--fourth .preview-fourth-heading--mobile { display: block; margin: 7px 0 0; font-size: 31px; line-height: 34px; letter-spacing: 0; text-shadow: none; } body .preview-main-slide--fourth .preview-fourth-heading--mobile > span { display: block; white-space: nowrap; } body .preview-main-slide--fourth .preview-fourth-description { display: block; margin: 8px 0 0; color: #fff; font-family: "Montserrat" !important; font-size: 11.5px; font-weight: 500; line-height: 14px; letter-spacing: -0.01em; white-space: nowrap; } body .preview-main-slide--fourth .preview-fourth-actions { gap: 11px; margin-top: 23px; margin-left: 11px; } body .preview-main-slide--fourth .preview-fourth-actions .preview-main-button { height: 30px; padding-right: 10px; padding-left: 10px; border-radius: 5px; font-size: 12.3px; } body .preview-main-slide--fourth .preview-fourth-shorts-label { margin: 12px 0 0 12px; font-size: 18px; line-height: 22px; } body .preview-main-slide--fourth .preview-fourth-shorts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 5px 14px 0 13px; overflow: visible; padding: 0; } body .preview-main-slide--fourth .preview-fourth-shorts-row a { min-width: 0; } body .preview-main-slide--fourth .preview-fourth-shorts-row img { width: 100%; height: auto; aspect-ratio: 136 / 244; object-fit: cover; } body .preview-main-slide--fifth .preview-main-media img { object-fit: contain; object-position: center top; background: #0c0c0e; } body .preview-main-slide--fifth .preview-fifth-content { top: 10.14%; right: 5.83%; left: 5.83%; } body .preview-main-slide--fifth .preview-fifth-intro { width: 160px; font-size: 11px; line-height: 13px; letter-spacing: 0; } body .preview-main-slide--fifth .preview-fifth-heading--desktop { display: none; } body .preview-main-slide--fifth .preview-fifth-heading--mobile { display: block; margin: 5px 0 0; font-size: 31px; line-height: 35px; letter-spacing: 0; text-shadow: none; } body .preview-main-slide--fifth .preview-fifth-heading--mobile > span { display: block; white-space: nowrap; } body .preview-main-slide--fifth .preview-fifth-signature--mobile { display: block; margin: 7px 0 0 1px; padding-left: 7px; border-left-width: 2px; font-size: 15px; line-height: 19px; } body .preview-main-slide--fifth .preview-fifth-actions { gap: 11px; margin-top: 13px; margin-left: 11px; } body .preview-main-slide--fifth .preview-fifth-actions .preview-main-button { height: 30px; padding-right: 10px; padding-left: 10px; border-radius: 5px; font-size: 12.3px; } body .preview-main-slide--fifth .preview-fifth-description, body .preview-main-slide--fifth .preview-fifth-signature--desktop { display: none; } body .preview-main-slide--fifth .preview-fifth-shorts-label { display: block; margin: 12px 0 0 13px; color: #fff; font-family: "Montserrat" !important; font-size: 18px; font-weight: 600; line-height: 22px; } body .preview-main-slide--fifth .preview-fifth-shorts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 5px 14px 0 13px; overflow: visible; padding: 0; } body .preview-main-slide--fifth .preview-fifth-shorts-row a { min-width: 0; } body .preview-main-slide--fifth .preview-fifth-shorts-row img { display: block; width: 100%; height: auto; aspect-ratio: 136 / 244; object-fit: cover; } body .preview-main-slide--sixth .preview-main-media img { object-fit: contain; object-position: center top; background: #0c0c0e; } body .preview-main-slide--sixth .preview-sixth-content { top: 238px; right: 0; bottom: auto; left: 0; max-width: none; padding: 0; border-radius: 0; background: transparent; text-align: center; } body .preview-main-slide--sixth .preview-sixth-heading { font-size: 31px; line-height: 35px; letter-spacing: -0.025em; text-shadow: none; } body .preview-main-slide--sixth .preview-sixth-heading > span { white-space: nowrap; } body .preview-main-slide--sixth .preview-sixth-actions { display: none; } body .preview-main-slide--sixth .preview-sixth-divider { display: block; width: 1px; height: 66px; margin: 7px auto 0; background: linear-gradient(to bottom, #aaa 0%, #aaa 82%, transparent 100%); } body .preview-main-slide--sixth .preview-sixth-description { margin: 14px 0 0; font-size: 12px; line-height: 15px; letter-spacing: 0; white-space: nowrap; } body .preview-main-slide--seventh .preview-main-media img { object-fit: contain; object-position: center top; background: #0c0c0e; } body .preview-main-slide--seventh .preview-seventh-content { top: 178px; right: 22px; bottom: auto; left: 22px; max-width: none; padding: 0; border-radius: 0; background: transparent; } body .preview-main-slide--seventh .preview-seventh-intro { font-size: 12px; line-height: 15px; } body .preview-main-slide--seventh .preview-seventh-heading { margin-top: 3px; font-size: 31px; line-height: 32px; letter-spacing: -0.025em; text-shadow: none; } body .preview-main-slide--seventh .preview-seventh-heading > span { transform: scaleX(1.06); transform-origin: left center; white-space: nowrap; } body .preview-main-slide--seventh .preview-seventh-signature--mobile { display: block; margin: 14px 0 0 1px; padding-left: 6px; border-left-width: 2px; font-size: 14px; line-height: 16px; white-space: nowrap; } body .preview-main-slide--seventh .preview-seventh-actions { display: flex; gap: 11px; margin: 18px 0 0 10px; } body .preview-main-slide--seventh .preview-seventh-actions .preview-main-button { height: 30px; padding-right: 10px; padding-left: 10px; border-radius: 5px; font-size: 12.3px; } body .preview-main-slide--seventh .preview-seventh-description, body .preview-main-slide--seventh .preview-seventh-signature--desktop { display: none; } body .preview-main-slide--seventh .preview-seventh-shorts-label { display: block; margin: 12px 0 0 12px; color: #fff; font-family: "Montserrat" !important; font-size: 18px; font-weight: 600; line-height: 22px; } body .preview-main-slide--seventh .preview-seventh-shorts-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 5px 13px 0 13px; } body .preview-main-slide--seventh .preview-seventh-shorts-row a { min-width: 0; } body .preview-main-slide--seventh .preview-seventh-shorts-row img { display: block; width: 100%; height: auto; aspect-ratio: 136 / 244; object-fit: cover; } body .preview-main-slide--first .preview-main-procedures { position: absolute; z-index: 2; top: 13.2%; left: 6.25%; display: block; margin: 0; padding: 0; color: #fff; font-family: "Montserrat", sans-serif; font-size: clamp(12px, 3.33vw, 14px); font-weight: 400; line-height: 1.55; list-style: none; } body .preview-main-slide--first .preview-main-procedures li { position: relative; padding-left: 8px; white-space: nowrap; } body .preview-main-slide--first .preview-main-procedures li::before { position: absolute; left: 0; color: #e3e14a; content: "-"; } body .preview-main-slide--first .preview-main-claim { top: 31.2%; right: auto; bottom: auto; left: 5.6%; font-size: clamp(37px, 10.55vw, 42px); line-height: 0.99; letter-spacing: 0; text-align: left; } body .preview-main-slide--first .preview-main-claim-first-line > span { display: block; } body .preview-main-slide--first .preview-main-claim-first-line > span:first-child { position: relative; top: -5px; } body .preview-main-slide--first .preview-main-actions { top: 58.1%; right: auto; bottom: auto; left: 9%; justify-content: flex-start; gap: clamp(10px, 3.05vw, 12px); } body .preview-main-slide--first .preview-main-button { height: 33px; padding-right: 10px; padding-left: 10px; border-radius: 5px; font-size: clamp(13px, 3.45vw, 13.5px); } body .preview-main-slide--first .preview-main-shorts-label { top: 65.1%; right: auto; bottom: auto; left: 9.2%; font-size: clamp(17px, 4.75vw, 19px); text-align: left; } body .preview-main-slide--first .preview-main-shorts-row { top: 70.2%; right: 9.5%; bottom: auto; left: 9.5%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(7px, 1.94vw, 8px); overflow: visible; padding: 0; } body .preview-main-slide--first .preview-main-shorts-row a { min-width: 0; } body .preview-main-slide--first .preview-main-shorts-row img { width: 100%; height: auto; aspect-ratio: 9 / 16; } } @media (prefers-reduced-motion: reduce) { body .preview-main-media img, body [data-local-edit-target="header-navigation"] .nav-visible { transition-duration: 1ms !important; } }