/* ============================================================ Back To Work Superspecial — Design-Port Quelle: LaserX (/var/www/laserx/public/assets/css/base.css + Inline-Tokens aus behandlungszonen/achseln.html), umgefaerbt auf die Laserazor-CI (Blautoene). Alle Regeln sind unter .btw gescopet, damit sie nicht mit assets/css/style.css (Nav, Footer, Sprach-Switcher) kollidieren. Aenderungen an Farben NUR im :root-Block unten. ============================================================ */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/archivo-v25-latin_latin-ext-700.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/archivo-v25-latin_latin-ext-800.woff2") format("woff2"); } @font-face { font-family: "Caveat"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/caveat-v23-latin_latin-ext-700.woff2") format("woff2"); } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/instrument-sans-v4-latin_latin-ext-regular.woff2") format("woff2"); } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/instrument-sans-v4-latin_latin-ext-500.woff2") format("woff2"); } @font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/instrument-sans-v4-latin_latin-ext-600.woff2") format("woff2"); } :root { /* ---- Basis: helles Blau-Weiss statt LaserX-Sand ---- */ --lx-bg: #f8fbff; /* cream-4 — Seitengrund */ --lx-bg-alt: #edf3ff; /* cream-5 — alternierende Sektionen */ --lx-line: #d6e3f2; /* border — Haarlinien */ /* ---- Marken-Duo: Laserazor-Blau statt Flamingo x Seafoam ---- */ --lx-pink-100: #e6efff; /* cream-2 — Tint-Flaechen */ --lx-pink-500: #3f79c4; /* olive — dekorativer Akzent */ --lx-pink-700: #0055b3; /* brand-deep — textsicherer Akzent auf hell */ --lx-sea-100: #f4f8ff; /* cream-3 — Trust-Tint */ --lx-sea-500: #06c; /* brand — Checkmarks */ --lx-sea-700: #003a80; /* brand-dark — textsicheres Trust-Blau */ /* ---- Zweitakzente ---- */ --lx-peach: #94b8e0; /* gold-Ersatz — Gradient-Partner, Sterne */ --lx-violet: #a7bcd6; /* stone — nur dekorativ */ --lx-violet-text: #7792ae; /* stone-4 */ --lx-dune: #94b8e0; /* Icon-Strokes, Deko-Banding */ /* ---- CTA ---- */ --lx-cta: #06c; --lx-cta-hover: #003a80; --lx-cta-ring: #003a80; /* ---- Dunkle Sektionen ---- */ --lx-navy: #003a80; /* brand-dark */ --lx-navy-raised: #0055b3; /* brand-deep — Karten auf Navy */ --lx-pink-ondark: #94b8e0; /* heller Blauton fuer Text auf dunkel */ /* ---- Text ---- */ --lx-ink: #171717; --lx-ink-soft: #404040; --lx-text-inv: #f8fbff; --lx-text-inv-soft: #c3d8f2; /* ---- Gradienten ---- */ --lx-grad-cta: linear-gradient(90deg, #06c 0%, #0055b3 55%, #003a80 100%); --lx-grad-dusk: linear-gradient(105deg, #94b8e0 0%, #3f79c4 50%, #003a80 100%); --lx-grad-sun: linear-gradient(150deg, #e6efff 0%, #94b8e0 46%, #3f79c4 100%); --lx-grad-hero: linear-gradient(180deg, #e6efff 0%, #f4f8ff 45%, #f8fbff 100%); /* ---- Typografie (LaserX-Fonts, bewusst nicht Montserrat) ---- */ --lx-font-display: "Archivo", "Inter Tight", sans-serif; --lx-font-body: "Instrument Sans", "Inter", system-ui, sans-serif; --lx-font-marker: "Caveat", "Segoe Print", cursive; --lx-text-xs: 0.8125rem; --lx-text-sm: 0.9375rem; --lx-text-base: clamp(1rem, 0.95rem + 0.2vw, 1.0625rem); --lx-text-lg: clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem); --lx-text-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); --lx-text-h2: clamp(1.75rem, 1.4rem + 1.8vw, 2.5rem); --lx-text-h1: clamp(2.5rem, 1.8rem + 3.5vw, 4.25rem); --lx-text-mega: clamp(3.5rem, 2.2rem + 7vw, 8rem); --lx-track-h1: -0.03em; --lx-track-h2: -0.025em; --lx-track-h3: -0.01em; --lx-leading-h1: 1.05; --lx-leading-h2: 1.15; --lx-leading-h3: 1.25; --lx-leading-body: 1.6; /* ---- Fluid Spacing ---- */ --lx-space-2xs: clamp(0.375rem, 0.34rem + 0.2vw, 0.5rem); --lx-space-xs: clamp(0.625rem, 0.55rem + 0.3vw, 0.75rem); --lx-space-s: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); --lx-space-m: clamp(1.5rem, 1.3rem + 1vw, 2rem); --lx-space-l: clamp(2.5rem, 2rem + 2vw, 3.5rem); --lx-space-xl: clamp(4rem, 3rem + 4vw, 6rem); --lx-space-2xl: clamp(6rem, 4.5rem + 6vw, 9rem); /* ---- Radien: Laserazor-Hardrule, max 8px ---- */ --lx-r-sm: 4px; --lx-r-md: 6px; /* ---- Motion ---- */ --lx-ease: cubic-bezier(0.22, 0.61, 0.36, 1); --lx-dur-fast: 160ms; --lx-dur: 280ms; --lx-dur-slow: 380ms; /* ---- Layout ---- */ --lx-container: 74rem; --lx-container-wide: 84rem; --lx-gutter: clamp(1rem, 2.5vw, 2rem); --lx-z-nav: 40; --lx-z-sticky: 50; /* ---- Seiten-Verlauf ---- */ --lx-wash-mint: #eef4ff; --lx-wash-cream: #e6efff; --lx-wash-sanddeep: #dbe8fb; --lx-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); } /* ============================================================ Portierte LaserX-Regeln (automatisch gescopet auf .btw) ============================================================ */ .btw{scroll-behavior: smooth;} .btw{background: var(--lx-bg); color: var(--lx-ink); font-family: var(--lx-font-body); font-size: var(--lx-text-base); line-height: var(--lx-leading-body); -webkit-font-smoothing: antialiased;} .btw img, .btw picture, .btw svg, .btw video{display: block; max-inline-size: 100%; block-size: auto;} .btw img{border-radius: var(--lx-r-md);} .btw input, .btw button, .btw textarea, .btw select{font: inherit; color: inherit;} .btw h1, .btw h2, .btw h3, .btw .lx-display{font-family: var(--lx-font-display); font-weight: 800; text-wrap: balance; overflow-wrap: break-word; hyphens: auto;} .btw h1{font-size: var(--lx-text-h1); line-height: var(--lx-leading-h1); letter-spacing: var(--lx-track-h1);} .btw h2{font-size: var(--lx-text-h2); line-height: var(--lx-leading-h2); letter-spacing: var(--lx-track-h2);} .btw h3{font-size: var(--lx-text-h3); line-height: var(--lx-leading-h3); letter-spacing: var(--lx-track-h3); font-weight: 700;} .btw p{max-inline-size: 65ch;} .btw .lx-lead{font-size: var(--lx-text-lg); color: var(--lx-ink-soft);} .btw .lx-deeptext{columns: 2; column-gap: clamp(2rem, 4vw, 4rem);} .btw .lx-deeptext > p{margin: 0 0 1em;} .btw .lx-deeptext > p:last-child{margin-block-end: 0;} .btw .lx-deeptext .lx-lead{font-size: var(--lx-text-base); color: var(--lx-ink-soft);} @media (max-width: 60rem){ .btw .lx-deeptext{columns: 1;} .btw .lx-deeptext .lx-lead{font-size: var(--lx-text-lg);} } .btw .lx-quotable{max-inline-size: 56rem; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); line-height: 1.65; margin-block: 0.4rem 0.6rem;} .btw .lx-small{font-size: var(--lx-text-sm);} .btw .lx-fine{font-size: var(--lx-text-xs); color: var(--lx-ink-soft);} .btw .lx-mega{font-family: var(--lx-font-display); font-weight: 800; font-size: var(--lx-text-mega); line-height: 1; letter-spacing: var(--lx-track-h1);} .btw .lx-price-accent{color: var(--lx-pink-700);} .btw a{color: var(--lx-pink-700); text-decoration-thickness: 1px; text-underline-offset: 0.15em;} .btw a:hover{text-decoration-thickness: 2px;} .btw .lx-label{font-weight: 600; font-size: var(--lx-text-sm); color: var(--lx-pink-700); letter-spacing: 0.01em;} .btw .lx-label--sea{color: var(--lx-sea-700);} .btw .lx-dark :focus-visible{outline-color: var(--lx-pink-ondark);} .btw .lx-container{inline-size: min(100% - 2 * var(--lx-gutter), var(--lx-container)); margin-inline: auto;} .btw .lx-container--wide{inline-size: min(100% - 2 * var(--lx-gutter), var(--lx-container-wide));} .btw .lx-section{padding-block: var(--lx-space-xl);} .btw .lx-section--tight{padding-block: var(--lx-space-l);} .btw .lx-section--alt{background: var(--lx-bg-alt);} .btw .lx-section--petal{background: var(--lx-pink-100);} .btw .lx-section--foam{background: var(--lx-sea-100);} .btw .lx-dark{background-color: var(--lx-navy); background-image: var(--lx-grain); color: var(--lx-text-inv); & h1, & h2, & h3 { color: var(--lx-text-inv); } & p { color: var(--lx-text-inv-soft); } & a { color: var(--lx-pink-ondark); } & .lx-accent-sea { color: var(--lx-sea-500); } & .lx-accent-peach { color: var(--lx-peach); }} .btw .lx-horizon{position: relative; block-size: 1px; background: var(--lx-line); border: 0;} .btw .lx-horizon--sun::after{content: ""; position: absolute; inset-inline-end: 12%; inset-block-start: 50%; translate: 0 -50%; inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--lx-pink-500);} .btw .lx-horizon--sun-peach::after{background: var(--lx-peach);} .btw .lx-band{block-size: 3px; background: var(--lx-grad-dusk); border: 0;} .btw .lx-btn{display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; font-family: var(--lx-font-display); font-weight: 700; font-size: 1.0625rem; letter-spacing: -0.005em; line-height: 1.15; min-block-size: 3rem; padding-block: 0.7em; padding-inline: 1.5em; border: 0; border-radius: var(--lx-r-md); cursor: pointer; text-decoration: none; text-align: center; transition: background-color var(--lx-dur-fast) var(--lx-ease), border-color var(--lx-dur-fast) var(--lx-ease), color var(--lx-dur-fast) var(--lx-ease), translate var(--lx-dur-fast) var(--lx-ease);} .btw .lx-btn:hover{translate: 0 -1px;} .btw .lx-btn:active{translate: 0 0;} .btw .lx-btn:focus-visible{outline: 3px solid var(--lx-cta-ring); outline-offset: 3px; translate: 0 0;} .btw .lx-btn--primary{background: var(--lx-cta); color: var(--lx-text-inv);} .btw .lx-btn--primary:hover, .btw .lx-btn--primary:focus-visible{background: var(--lx-cta-hover); color: var(--lx-text-inv);} .btw .lx-btn--ghost{background: var(--lx-bg); color: var(--lx-ink); box-shadow: inset 0 0 0 1.5px var(--lx-ink-soft);} .btw .lx-btn--ghost:hover{background: var(--lx-bg-alt); box-shadow: inset 0 0 0 1.5px var(--lx-ink);} .btw .lx-dark .lx-btn:focus-visible{outline-color: var(--lx-text-inv);} .btw .lx-btn--sea{background: var(--lx-sea-700); color: var(--lx-text-inv);} .btw .lx-btn--sea:hover{background: #003a80;} .btw .lx-btn--big{font-size: var(--lx-text-lg); min-block-size: 3.5rem; padding-block: 0.85em; padding-inline: 1.9em;} .btw .lx-badge{display: inline-block; background: var(--lx-grad-cta); color: var(--lx-ink); font-weight: 600; font-size: var(--lx-text-sm); padding-block: 0.35em; padding-inline: 0.9em; border-radius: var(--lx-r-sm);} .btw .lx-header{position: sticky; inset-block-start: 0; z-index: var(--lx-z-nav); background: var(--lx-bg); border-block-end: 1px solid var(--lx-line);} .btw .lx-nav{display: flex; align-items: center; gap: var(--lx-space-m); padding-block: 0.75rem;} .btw .lx-nav__logo{font-family: var(--lx-font-display); font-weight: 800; font-size: 1.5rem; color: var(--lx-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem;} .btw .lx-nav__logo b{color: var(--lx-pink-700); font-weight: 800;} .btw .lx-nav__sun{inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--lx-grad-cta); flex: none;} .btw .lx-nav__links{display: flex; gap: var(--lx-space-s); list-style: none; padding: 0; margin-inline-start: auto; align-items: center;} .btw .lx-nav__links a{color: var(--lx-ink); text-decoration: none; font-weight: 600; font-size: var(--lx-text-sm);} .btw .lx-nav__links a:hover, .btw .lx-nav__links a[aria-current="page"]{color: var(--lx-pink-700);} .btw .lx-nav__toggle{display: none;} .btw .lx-nav__burger{display: none;} @media (max-width: 52rem){ .btw .lx-nav__burger{display: grid; place-items: center; inline-size: 44px; block-size: 44px; background: none; border: 1px solid var(--lx-line); border-radius: var(--lx-r-sm); margin-inline-start: auto; cursor: pointer;} .btw .lx-nav__burger span, .btw .lx-nav__burger span::before, .btw .lx-nav__burger span::after{content: ""; display: block; inline-size: 18px; block-size: 2px; background: var(--lx-ink); position: relative; transition: rotate var(--lx-dur-fast) var(--lx-ease), translate var(--lx-dur-fast) var(--lx-ease);} .btw .lx-nav__burger span::before{position: absolute; inset-block-start: -6px;} .btw .lx-nav__burger span::after{position: absolute; inset-block-start: 6px;} .btw .lx-nav__links{display: none; position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--lx-bg); border-block-end: 1px solid var(--lx-line); flex-direction: column; align-items: flex-start; padding: var(--lx-space-m) var(--lx-gutter); margin: 0; gap: var(--lx-space-s);} .btw .lx-header:has(.lx-nav__toggle:checked) .lx-nav__links{display: flex;} .btw .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger span{background: transparent;} .btw .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger span::before{rotate: 45deg; translate: 0 6px;} .btw .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger span::after{rotate: -45deg; translate: 0 -6px;} } .btw .lx-lang{display: flex; gap: 0.25rem; list-style: none; padding: 0; margin: 0;} .btw .lx-lang a{display: inline-block; padding: 0.3em 0.55em; border-radius: var(--lx-r-sm); font-size: var(--lx-text-xs); font-weight: 600; text-decoration: none; color: var(--lx-ink-soft);} .btw .lx-lang a:hover{background: var(--lx-bg-alt); color: var(--lx-ink);} .btw .lx-lang a[aria-current="true"]{background: var(--lx-pink-100); color: var(--lx-pink-700);} .btw .lx-stickybar{position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--lx-z-sticky); background: var(--lx-navy); color: var(--lx-text-inv); display: flex; align-items: center; gap: var(--lx-space-s); padding: 0.6rem var(--lx-gutter); border-block-start: 1px solid var(--lx-navy-raised); translate: 0 100%; transition: translate var(--lx-dur) var(--lx-ease);} .btw .lx-stickybar.is-visible{translate: 0 0;} .btw .lx-stickybar__price{font-family: var(--lx-font-display); font-weight: 800; font-size: var(--lx-text-lg);} .btw .lx-stickybar__price small{display: block; font-family: var(--lx-font-body); font-weight: 400; font-size: var(--lx-text-xs); color: var(--lx-text-inv-soft);} .btw .lx-stickybar .lx-btn{margin-inline-start: auto; flex: none;} @media (min-width: 64rem){ .btw .lx-stickybar{inset-inline: auto 0; inset-block-end: 0; max-inline-size: 26rem; border-start-start-radius: var(--lx-r-md); border-inline-start: 1px solid var(--lx-navy-raised);} } .btw body:has(.lx-stickybar.is-visible){padding-block-end: 4.5rem;} .btw .lx-cards{container-type: inline-size;} .btw .lx-cards__grid{display: grid; gap: var(--lx-space-m); grid-template-columns: 1fr;} @container (min-width: 40rem){ .btw .lx-cards__grid{grid-template-columns: repeat(3, 1fr);} } .btw .lx-membercard{position: relative; border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); background-image: var(--lx-grain); padding: var(--lx-space-m); display: flex; flex-direction: column; gap: var(--lx-space-xs);} .btw .lx-membercard--petal{background-color: var(--lx-pink-100);} .btw .lx-membercard--foam{background-color: var(--lx-sea-100);} .btw .lx-membercard__tier{font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3);} .btw .lx-membercard__price{font-family: var(--lx-font-display); font-weight: 800; font-size: var(--lx-text-h1); line-height: 1;} .btw .lx-membercard__price small{font-size: var(--lx-text-base); font-family: var(--lx-font-body); font-weight: 400; color: var(--lx-ink-soft);} .btw .lx-membercard__badge{position: absolute; inset-block-start: var(--lx-space-s); inset-inline-end: var(--lx-space-s);} .btw .lx-membercard ul{list-style: none; padding: 0; display: grid; gap: 0.4rem;} .btw .lx-membercard li{padding-inline-start: 1.5rem; position: relative; font-size: var(--lx-text-sm);} .btw .lx-membercard li::before{content: "\2713"; position: absolute; inset-inline-start: 0; inset-block-start: 0; color: var(--lx-sea-700); font-weight: 600;} .btw .lx-membercard .lx-btn{margin-block-start: auto;} .btw .lx-table-wrap{overflow-x: auto;} .btw .lx-table{border-collapse: collapse; inline-size: 100%; font-size: var(--lx-text-sm);} .btw .lx-table th, .btw .lx-table td{padding: 0.7rem 0.9rem; text-align: start; border-block-end: 1px solid var(--lx-line);} .btw .lx-table thead th{font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-base);} .btw .lx-table tbody tr:hover{background: var(--lx-bg-alt);} .btw .lx-table .is-featured{background: var(--lx-pink-100);} .btw .lx-check{color: var(--lx-sea-700); font-weight: 600;} .btw .lx-no{color: var(--lx-ink-soft);} .btw .lx-faq{display: grid; gap: 0.5rem;} .btw .lx-faq details{border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg);} .btw .lx-faq summary{cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--lx-space-s); padding: var(--lx-space-s); font-weight: 600;} .btw .lx-faq summary::-webkit-details-marker{display: none;} .btw .lx-faq summary::after{content: ""; margin-inline-start: auto; inline-size: 10px; block-size: 10px; flex: none; border-inline-end: 2px solid var(--lx-pink-700); border-block-end: 2px solid var(--lx-pink-700); rotate: 45deg; transition: rotate var(--lx-dur-fast) var(--lx-ease);} .btw .lx-faq details[open] summary::after{rotate: -135deg;} .btw .lx-faq details[open]{background: var(--lx-bg-alt);} .btw .lx-faq .lx-faq__body{padding: 0 var(--lx-space-s) var(--lx-space-s);} .btw .lx-marquee{overflow: hidden; background: var(--lx-bg-alt); padding-block: var(--lx-space-s); white-space: nowrap;} .btw .lx-marquee__track{display: inline-flex; gap: 2.5rem; align-items: center; padding-inline-end: 2.5rem; animation: lx-marquee 34s linear infinite;} .btw .lx-marquee span{font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3);} .btw .lx-marquee i{inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--lx-pink-500); flex: none;} .btw .lx-marquee:hover .lx-marquee__track{animation-play-state: paused;} @keyframes lx-marquee{ to { translate: -50% 0; } } .btw .lx-ticket{display: grid; grid-template-columns: 1fr; gap: var(--lx-space-m); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); background-image: var(--lx-grain); padding: var(--lx-space-m);} @media (min-width: 48rem){ .btw .lx-ticket{grid-template-columns: 1fr auto; align-items: center;} .btw .lx-ticket__cta{border-inline-start: 1px dashed var(--lx-dune); padding-inline-start: var(--lx-space-m);} } .btw .lx-ticket__code{font-family: var(--lx-font-display); font-weight: 800; font-size: var(--lx-text-h2); color: var(--lx-pink-700);} .btw .lx-field{display: grid; gap: 0.35rem;} .btw .lx-field label{font-weight: 600; font-size: var(--lx-text-sm);} .btw .lx-input, .btw .lx-select{inline-size: 100%; padding: 0.75em 0.9em; border-radius: var(--lx-r-sm); border: 1px solid var(--lx-line); background: var(--lx-bg-alt); transition: border-color var(--lx-dur-fast) var(--lx-ease);} .btw .lx-input:hover, .btw .lx-select:hover{border-color: var(--lx-dune);} .btw .lx-input:focus, .btw .lx-select:focus{outline: 2px solid var(--lx-pink-700); outline-offset: 0; border-color: var(--lx-pink-700);} .btw .lx-field .lx-error{display: none; color: var(--lx-pink-700); font-size: var(--lx-text-xs);} .btw .lx-field.has-error .lx-error{display: block;} .btw .lx-field.has-error .lx-input{border-color: var(--lx-pink-700);} .btw .lx-choice{position: relative;} .btw .lx-choice input{position: absolute; opacity: 0; inline-size: 100%; block-size: 100%; inset: 0; cursor: pointer;} .btw .lx-choice__card{border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); padding: var(--lx-space-s); background: var(--lx-bg); transition: border-color var(--lx-dur-fast) var(--lx-ease), background var(--lx-dur-fast) var(--lx-ease); display: flex; align-items: center; gap: var(--lx-space-xs); font-weight: 500;} .btw .lx-choice:hover .lx-choice__card{border-color: var(--lx-dune);} .btw .lx-choice input:checked + .lx-choice__card{background: var(--lx-pink-100); border-color: var(--lx-pink-700);} .btw .lx-choice input:focus-visible + .lx-choice__card{outline: 2px solid var(--lx-pink-700); outline-offset: 2px;} .btw .lx-photo{position: relative; border-radius: var(--lx-r-md); overflow: hidden;} .btw .lx-photo > img{border-radius: 0; inline-size: 100%;} .btw .lx-photo--blinds::after{content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 15%, var(--lx-bg) 15% 17.5%); opacity: 0.35;} .btw .lx-photo--grain::before{content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--lx-grain); opacity: 0.5; z-index: 1;} .btw .lx-reveal{opacity: 0; translate: 0 14px; transition: opacity var(--lx-dur-slow) var(--lx-ease), translate var(--lx-dur-slow) var(--lx-ease);} .btw .lx-reveal.is-revealed{opacity: 1; translate: 0 0;} .btw .lx-reveal--late{transition-delay: 120ms;} @media (prefers-reduced-motion: reduce){ .btw{scroll-behavior: auto;} .btw .lx-reveal{opacity: 1; translate: none; transition: none;} .btw .lx-marquee__track{animation: none;} .btw .lx-stickybar{transition: none;} .btw .lx-btn, .btw .lx-btn:hover{translate: none;} } .btw .lx-footer{margin-block-start: var(--lx-space-2xl);} .btw .lx-footer__grid{display: grid; gap: var(--lx-space-l); grid-template-columns: 1fr; padding-block: var(--lx-space-xl);} @media (min-width: 48rem){ .btw .lx-footer__grid{grid-template-columns: 2fr 1fr 1fr 1fr;} } .btw .lx-footer h3{font-size: var(--lx-text-base); font-weight: 700; margin-block-end: 0.6rem;} .btw .lx-footer ul{list-style: none; padding: 0; display: grid; gap: 0.35rem;} .btw .lx-footer a{text-decoration: none; font-size: var(--lx-text-sm);} .btw .lx-footer a:hover{text-decoration: underline;} .btw .lx-footer__legal{border-block-start: 1px solid var(--lx-navy-raised); padding-block: var(--lx-space-s); font-size: var(--lx-text-xs); color: var(--lx-text-inv-soft);} .btw .lx-grid-2{display: grid; gap: var(--lx-space-l); grid-template-columns: 1fr; align-items: center;} @media (min-width: 52rem){ .btw .lx-grid-2{grid-template-columns: 3fr 2fr;} .btw .lx-grid-2--flip{grid-template-columns: 2fr 3fr;} } .btw .lx-usp-row{display: grid; gap: var(--lx-space-m); grid-template-columns: 1fr;} @media (min-width: 48rem){ .btw .lx-usp-row{grid-template-columns: repeat(3, 1fr);} } .btw .lx-usp{border-inline-start: none;} .btw .lx-usp h3{margin-block-end: 0.3rem;} .btw .lx-usp p{font-size: var(--lx-text-sm); color: var(--lx-ink-soft);} .btw .lx-ribbon{background: var(--lx-navy); text-align: center; padding: 0.45rem var(--lx-gutter);} .btw .lx-ribbon a{color: var(--lx-text-inv); font-size: var(--lx-text-xs); font-weight: 500; text-decoration: none;} .btw .lx-ribbon a:hover{color: var(--lx-pink-ondark);} .btw .lx-nav__cta{font-size: 0.9375rem; min-block-size: 2.75rem; padding-block: 0.5em; padding-inline: 1.15em;} .btw .lx-nav__cta-li{margin-inline-start: var(--lx-space-2xs);} .btw .lx-nav__logo--inv{color: var(--lx-text-inv);} .btw .lx-nav__logo--inv b{color: var(--lx-pink-ondark);} @media (max-width: 52rem){ .btw .lx-nav__cta-li{margin-inline-start: 0;} } .btw .lx-dark sup.fn{color: var(--lx-pink-ondark);} .btw .lx-ai-wrap{position: relative; display: inline-block; max-inline-size: 100%;} .btw .lx-ai-badge{position: absolute; inset-inline-end: 6px; inset-block-end: 6px; background: color-mix(in srgb, var(--lx-navy) 72%, transparent); color: var(--lx-text-inv); font-size: 10px; line-height: 1; padding: 3px 6px; border-radius: var(--lx-r-sm); pointer-events: none; letter-spacing: 0.02em;} .btw .lx-hero{background: var(--lx-grad-hero); padding-block: var(--lx-space-l) var(--lx-space-xl);} .btw .lx-hero__mega{display: flex; align-items: baseline; gap: var(--lx-space-xs); margin-block: var(--lx-space-s); flex-wrap: wrap;} .btw .lx-hero__permo{font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3); line-height: 1.15;} .btw .lx-hero__permo small{font-family: var(--lx-font-body); font-weight: 400; font-size: var(--lx-text-sm); color: var(--lx-ink-soft);} .btw .lx-hero__ctas{display: flex; gap: var(--lx-space-s); flex-wrap: wrap; margin-block: var(--lx-space-m) var(--lx-space-xs);} .btw .lx-hero__img{max-block-size: 34rem;} .btw .lx-hero__img img{object-fit: cover; block-size: 100%; inline-size: 100%; aspect-ratio: 4 / 5;} @media (max-width: 52rem){ .btw .lx-hero{padding-block: var(--lx-space-m) var(--lx-space-l);} .btw .lx-hero__img{max-block-size: 24rem; margin-block-start: var(--lx-space-m);} .btw .lx-hero__img img{aspect-ratio: 4 / 5;} } .btw .lx-sechead{display: grid; gap: var(--lx-space-s); margin-block-end: var(--lx-space-l); align-items: end;} @media (min-width: 52rem){ .btw .lx-sechead{grid-template-columns: 3fr 2fr;} .btw .lx-sechead > p{margin-block-end: 0.35rem;} } .btw .lx-zonegrid{display: grid; gap: var(--lx-space-s); grid-template-columns: repeat(2, 1fr);} @media (min-width: 48rem){ .btw .lx-zonegrid{grid-template-columns: repeat(4, 1fr);} } .btw .lx-zonecard{display: block; text-decoration: none; color: var(--lx-ink); border-radius: var(--lx-r-md); overflow: hidden; position: relative; border: 1px solid var(--lx-line); background: var(--lx-bg); transition: border-color var(--lx-dur-fast) var(--lx-ease);} .btw .lx-zonecard:hover{border-color: var(--lx-dune);} .btw .lx-zonecard img{border-radius: 0; inline-size: 100%; aspect-ratio: 3 / 4; object-fit: cover; scale: 1.02; transition: scale var(--lx-dur) var(--lx-ease);} .btw .lx-zonecard:hover img{scale: 1.05;} .btw .lx-zonecard__body{display: block; padding: var(--lx-space-xs) var(--lx-space-s);} .btw .lx-zonecard__body b{display: block; font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-base);} .btw .lx-zonecard__body span{font-size: var(--lx-text-xs); color: var(--lx-ink-soft);} .btw .lx-zonecard__body span b, .btw .lx-zonecard .lx-price{color: var(--lx-pink-700);} @media (prefers-reduced-motion: reduce){ .btw .lx-zonecard img, .btw .lx-zonecard:hover img{transition: none; scale: none;} } .btw .lx-steps{list-style: none; padding: 0; display: grid; gap: var(--lx-space-l); grid-template-columns: 1fr; counter-reset: none;} @media (min-width: 48rem){ .btw .lx-steps{grid-template-columns: repeat(3, 1fr);} } .btw .lx-steps__num{display: block; font-family: var(--lx-font-display); font-weight: 800; font-size: var(--lx-text-mega); line-height: 1; color: var(--lx-pink-100); -webkit-text-stroke: 2px var(--lx-pink-500);} .btw .lx-steps h3{margin-block: var(--lx-space-xs) 0.3rem;} .btw .lx-steps p{font-size: var(--lx-text-sm); color: var(--lx-ink-soft);} .btw .lx-dark a.lx-btn--primary{color: var(--lx-text-inv);} .btw .lx-dark a.lx-btn--sea{color: var(--lx-text-inv);} .btw .lx-dark .lx-membercard, .btw .lx-dark .lx-membercard p, .btw .lx-dark .lx-membercard h3{color: var(--lx-ink);} .btw .lx-dark .lx-membercard .lx-fine, .btw .lx-dark .lx-membercard__price small{color: var(--lx-ink-soft);} .btw .lx-dark .lx-membercard a{color: inherit;} .btw .lx-hero__ab{font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h2); align-self: baseline;} .btw .lx-hero__mega{flex-wrap: nowrap; align-items: baseline;} .btw .lx-hero__mega .lx-mega{white-space: nowrap;} .btw .lx-breadcrumb{font-size: var(--lx-text-xs); color: var(--lx-ink-soft); padding-block: var(--lx-space-xs);} .btw .lx-breadcrumb a{color: var(--lx-ink-soft); text-decoration: none;} .btw .lx-breadcrumb a:hover{color: var(--lx-pink-700); text-decoration: underline;} .btw .lx-statrow{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lx-space-s); margin-block: var(--lx-space-m);} @media (min-width: 36rem){ .btw .lx-statrow{grid-template-columns: repeat(4, 1fr);} } .btw .lx-statrow dt{font-size: var(--lx-text-xs); color: var(--lx-ink-soft);} .btw .lx-statrow dd{margin: 0; font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3);} .btw .lx-carelist{list-style: none; padding: 0; display: grid; gap: 0.45rem;} .btw .lx-carelist li{padding-inline-start: 1.5rem; position: relative; font-size: var(--lx-text-sm);} .btw .lx-carelist li::before{content: "\2713"; position: absolute; inset-inline-start: 0; color: var(--lx-sea-700); font-weight: 600;} .btw .lx-steps--4{grid-template-columns: 1fr;} @media (min-width: 48rem){ .btw .lx-steps--4{grid-template-columns: repeat(4, 1fr);} } @container (min-width: 40rem){ .btw .lx-cards__grid--4{grid-template-columns: repeat(4, 1fr);} } .btw .lx-table__group th{font-family: var(--lx-font-display); font-weight: 700; padding-block-start: var(--lx-space-m); border-block-end: 1px solid var(--lx-dune);} .btw .lx-badge-cls{display: inline-block; background: var(--lx-sea-100); color: var(--lx-sea-700); font-weight: 600; font-size: var(--lx-text-xs); padding: 0.15em 0.5em; border-radius: var(--lx-r-sm);} .btw .lx-citygrid{display: grid; gap: var(--lx-space-m); grid-template-columns: 1fr;} @media (min-width: 48rem){ .btw .lx-citygrid{grid-template-columns: 1fr 1fr;} } .btw .lx-citycard{display: block; border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); overflow: hidden; text-decoration: none; color: var(--lx-ink); background: var(--lx-bg); transition: border-color var(--lx-dur-fast) var(--lx-ease);} .btw .lx-citycard:hover{border-color: var(--lx-dune);} .btw .lx-citycard img{border-radius: 0; inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover;} .btw .lx-citycard__body{display: grid; gap: 0.4rem; padding: var(--lx-space-s); justify-items: start;} .btw .lx-citycard__body b{font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3);} .btw .lx-citycard__body span{font-size: var(--lx-text-sm); color: var(--lx-ink-soft);} .btw .lx-citycard--soon{background: var(--lx-bg-alt); display: grid; align-content: center; min-block-size: 14rem;} .btw .lx-address{font-style: normal; line-height: 1.7;} .btw .lx-map{border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); overflow: hidden; aspect-ratio: 4 / 3; background: var(--lx-bg-alt);} .btw .lx-map iframe{inline-size: 100%; block-size: 100%; border: 0;} .btw .lx-map__consent{block-size: 100%; display: grid; place-content: center; gap: var(--lx-space-s); padding: var(--lx-space-m); text-align: center; justify-items: center;} .btw .lx-galgrid{display: grid; gap: var(--lx-space-s); grid-template-columns: 1fr;} @media (min-width: 48rem){ .btw .lx-galgrid{grid-template-columns: 2fr 1fr 1fr; align-items: stretch;} .btw .lx-galgrid img{block-size: 100%; object-fit: cover;} } .btw .lx-teamgrid{display: grid; gap: var(--lx-space-m); grid-template-columns: repeat(2, 1fr);} @media (min-width: 48rem){ .btw .lx-teamgrid{grid-template-columns: repeat(4, 1fr);} } .btw .lx-teamcard{margin: 0;} .btw .lx-teamcard img{aspect-ratio: 3 / 4; object-fit: cover; inline-size: 100%;} .btw .lx-teamcard figcaption{padding-block-start: var(--lx-space-xs); display: grid; gap: 0.1rem;} .btw .lx-teamcard b{font-family: var(--lx-font-display); font-weight: 700;} .btw .lx-teamcard span{font-size: var(--lx-text-sm); color: var(--lx-ink-soft);} .btw .lx-speclist{display: grid; gap: var(--lx-space-xs); margin-block-start: var(--lx-space-m);} .btw .lx-speclist div{display: grid; grid-template-columns: 1fr 2fr; gap: var(--lx-space-s); border-block-end: 1px solid var(--lx-navy-raised); padding-block-end: var(--lx-space-xs);} .btw .lx-speclist dt{color: var(--lx-text-inv-soft); font-size: var(--lx-text-sm);} .btw .lx-speclist dd{margin: 0; font-weight: 600;} .btw .lx-funnel-wrap{max-inline-size: 46rem;} .btw .lx-funnel-head{margin-block-end: var(--lx-space-m);} .btw .lx-funnel-trust{margin-block-start: var(--lx-space-m); text-align: center;} .btw .lx-legal{max-inline-size: 46rem;} .btw .lx-legal h2{font-size: var(--lx-text-h3); margin-block: var(--lx-space-m) var(--lx-space-xs);} .btw .lx-legal p{margin-block-end: var(--lx-space-xs);} .btw .lx-horizon, .btw .lx-band{display: none;} .btw h1, .btw h2, .btw h3, .btw .lx-display{hyphens: manual;} .btw h1{font-weight: 800;} .btw .lx-mega{letter-spacing: -0.035em;} .btw .lx-mark{font-family: var(--lx-font-marker); font-weight: 700; font-size: 1.5em; line-height: 1; color: var(--lx-pink-700); display: inline-block; rotate: -2deg;} .btw .lx-mark--sea{color: var(--lx-sea-700);} .btw .lx-mark--ondark{color: var(--lx-pink-ondark);} .btw .lx-mark--big{font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem);} .btw .lx-doodle-underline{display: block; inline-size: min(100%, 14rem); block-size: 0.5em; color: var(--lx-pink-500); margin-block-start: 0.1em;} .btw .lx-annotated{position: relative; display: inline-block;} .btw .lx-doodle-circle{position: absolute; inset: -0.28em -0.75em; inline-size: calc(100% + 1.5em); block-size: calc(100% + 0.56em); color: var(--lx-pink-700); pointer-events: none;} .btw .lx-doodle-arrow{inline-size: 3.2rem; block-size: 2.5rem; color: var(--lx-ink-soft);} .btw .lx-doodle-sparkle{inline-size: 1.6rem; block-size: 1.6rem; color: var(--lx-peach);} .btw .lx-annotation{display: inline-flex; align-items: flex-end; gap: 0.3rem;} .btw .lx-icon{inline-size: 2.6rem; block-size: 2.6rem; color: var(--lx-pink-700); flex: none;} .btw .lx-icon--sea{color: var(--lx-sea-700);} .btw .lx-usp{display: grid; grid-template-columns: auto 1fr; gap: var(--lx-space-s); align-items: start;} .btw .lx-usp > .lx-icon{margin-block-start: 0.2rem;} .btw .lx-usp h3{grid-column: 2; margin: 0;} .btw .lx-usp p{grid-column: 2;} .btw .lx-usp > .lx-icon + h3{grid-column: 2; grid-row: 1;} .btw .lx-blobwrap{position: relative; overflow: clip;} .btw .lx-blob{position: absolute; z-index: 0; pointer-events: none;} .btw .lx-blob svg{inline-size: 100%; block-size: 100%;} .btw .lx-blob--petal{color: var(--lx-pink-100);} .btw .lx-blob--foam{color: var(--lx-sea-100);} .btw .lx-blob--peach{color: color-mix(in srgb, var(--lx-peach) 38%, var(--lx-bg));} .btw .lx-blob--sand{color: var(--lx-bg-alt);} .btw .lx-blobwrap > .lx-container, .btw .lx-blobwrap > .lx-container--wide{position: relative; z-index: 1;} .btw .lx-pull-up{position: relative; z-index: 2; margin-block-start: calc(-1 * var(--lx-space-xl));} .btw .lx-pull-down{position: relative; z-index: 2; margin-block-end: calc(-1 * var(--lx-space-xl));} .btw .lx-tilt-l{rotate: -1.3deg;} .btw .lx-tilt-r{rotate: 1.2deg;} .btw .lx-overlap-pad{padding-block-start: calc(var(--lx-space-xl) + var(--lx-space-l));} .btw .lx-slider{display: flex; gap: var(--lx-space-s); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--lx-space-2xs) var(--lx-gutter) var(--lx-space-s); margin-inline: calc(-1 * var(--lx-gutter)); scrollbar-width: thin; scrollbar-color: var(--lx-dune) transparent;} .btw .lx-slider > *{scroll-snap-align: start; flex: 0 0 auto;} .btw .lx-slider .lx-zonecard{inline-size: clamp(11.5rem, 30vw, 15rem);} .btw .lx-slider .lx-teamcard{inline-size: clamp(11rem, 28vw, 14rem);} .btw .lx-slider .lx-galitem{inline-size: clamp(16rem, 46vw, 26rem);} .btw .lx-slider .lx-galitem img{aspect-ratio: 4 / 3; object-fit: cover; inline-size: 100%;} .btw .lx-slider::-webkit-scrollbar{block-size: 6px;} .btw .lx-slider::-webkit-scrollbar-thumb{background: var(--lx-dune); border-radius: 3px;} .btw .lx-slidehint{display: flex; align-items: center; gap: 0.4rem; color: var(--lx-ink-soft); font-family: var(--lx-font-marker); font-weight: 600; font-size: 1.25rem; rotate: -1.5deg;} .btw .lx-membercard{background-image: none; gap: var(--lx-space-s); padding: var(--lx-space-m);} .btw .lx-membercard__tier{font-size: var(--lx-text-lg); font-weight: 700;} .btw .lx-membercard__price{letter-spacing: -0.03em;} .btw .lx-ticket{background-image: none;} .btw .lx-zonecard{border: 0; background: transparent;} .btw .lx-zonecard img{border-radius: var(--lx-r-md);} .btw .lx-zonecard:hover{border: 0;} .btw .lx-zonecard__body{padding-inline: 0.15rem;} .btw .lx-header{background: color-mix(in srgb, var(--lx-bg) 88%, transparent); backdrop-filter: blur(8px); border-block-end: 1px solid color-mix(in srgb, var(--lx-line) 70%, transparent);} .btw .lx-nav__links a{padding: 0.45em 0.7em; border-radius: var(--lx-r-md); transition: background var(--lx-dur-fast) var(--lx-ease), color var(--lx-dur-fast) var(--lx-ease);} .btw .lx-nav__links a:hover{background: var(--lx-bg-alt); color: var(--lx-ink);} .btw .lx-nav__links a[aria-current="page"]{background: var(--lx-pink-100); color: var(--lx-pink-700);} .btw .lx-ribbon{background: var(--lx-navy);} .btw .lx-ribbon a b{font-family: var(--lx-font-marker); font-weight: 700; font-size: 1.2em; color: var(--lx-pink-ondark);} .btw .lx-hero{background: none;} .btw .lx-hero .lx-mega{color: var(--lx-ink);} .btw .lx-hero__img img{border-radius: var(--lx-r-md);} @media (min-width: 48rem){ .btw .lx-zonegrid > :nth-child(4n+2){translate: 0 var(--lx-space-m);} .btw .lx-zonegrid > :nth-child(4n+4){translate: 0 var(--lx-space-s);} .btw .lx-teamgrid > :nth-child(4n+2), .btw .lx-teamgrid > :nth-child(4n+4){translate: 0 var(--lx-space-m);} .btw .lx-zonegrid, .btw .lx-teamgrid{padding-block-end: var(--lx-space-m);} } @media (prefers-reduced-motion: reduce){ .btw .lx-tilt-l, .btw .lx-tilt-r{rotate: none;} } .btw .lx-steps__num{-webkit-text-stroke: 0; color: var(--lx-pink-500); opacity: 0.9;} .btw .lx-bmodal{position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: clamp(0.5rem, 2vw, 2rem); background: color-mix(in srgb, var(--lx-navy) 62%, transparent);} .btw .lx-bmodal[hidden]{display: none;} .btw .lx-bmodal__panel{position: relative; inline-size: min(100%, 34rem); block-size: min(92dvh, 52rem); background: var(--lx-bg); border-radius: var(--lx-r-md); overflow: hidden; display: grid;} .btw .lx-bmodal__close{position: absolute; inset-block-start: 0.6rem; inset-inline-end: 0.6rem; z-index: 3; inline-size: 2.6rem; block-size: 2.6rem; display: grid; place-items: center; background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); cursor: pointer; color: var(--lx-ink);} .btw .lx-bmodal__close:hover{background: var(--lx-pink-100); color: var(--lx-pink-700); border-color: var(--lx-pink-500);} .btw .lx-bmodal__close svg{inline-size: 1.2rem; block-size: 1.2rem;} .btw .lx-bmodal__loading{position: absolute; inset: 0; display: grid; place-items: center; z-index: 1;} .btw .lx-bmodal__frame, .btw .lx-bmodal__frame iframe{inline-size: 100%; block-size: 100%; border: 0; position: relative; z-index: 2;} .btw body.lx-modal-open{overflow: hidden;} .btw .lx-bframe{position: relative; border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); overflow: hidden; background: var(--lx-bg); block-size: min(78dvh, 56rem); margin-block-start: var(--lx-space-m);} .btw .lx-bframe iframe{inline-size: 100%; block-size: 100%; border: 0;} .btw .lx-bframe__skel{position: absolute; inset: 0; display: grid; place-items: center;} .btw .lx-funnel-wrap{max-inline-size: 44rem; padding-block: var(--lx-space-l);} .btw .lx-iconwrap{display: contents;} .btw .lx-iconwrap--sea .lx-icon{color: var(--lx-sea-700);} .btw .lx-artwrap{max-inline-size: 46rem;} .btw .lx-artbody{padding-block: var(--lx-space-l);} .btw .lx-artbody h2{margin-block: var(--lx-space-l) var(--lx-space-s);} .btw .lx-artbody h3{margin-block: var(--lx-space-m) var(--lx-space-xs);} .btw .lx-artbody p{margin-block-end: var(--lx-space-s);} .btw .lx-artbody ul{margin-block: var(--lx-space-s); padding-inline-start: 1.3rem; display: grid; gap: 0.45rem;} .btw .lx-artbody .lx-table-wrap{margin-block: var(--lx-space-m);} .btw .lx-artgrid{display: grid; gap: var(--lx-space-l); grid-template-columns: 1fr;} @media (min-width: 48rem){ .btw .lx-artgrid{grid-template-columns: 1fr 1fr;} } .btw .lx-artcard{display: block; text-decoration: none; color: var(--lx-ink);} .btw .lx-artcard img{aspect-ratio: 16 / 9; object-fit: cover; inline-size: 100%;} .btw .lx-artcard__body{display: grid; gap: 0.3rem; padding-block-start: var(--lx-space-xs);} .btw .lx-artcard__body b{font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3); line-height: 1.25;} .btw .lx-artcard:hover b{color: var(--lx-pink-700);} .btw .lx-table--ondark th, .btw .lx-table--ondark td{border-color: var(--lx-navy-raised);} .btw .lx-table--ondark tbody tr:hover{background: var(--lx-navy-raised);} .btw{background: linear-gradient(180deg, #f8fbff 0%, #e6efff 9%, #eef4ff 20%, #f8fbff 32%, var(--lx-wash-mint) 44%, #f4f8ff 54%, #eef4ff 66%, #f8fbff 78%, #edf3ff 90%, var(--lx-wash-sanddeep) 100%);} .btw .lx-section--alt, .btw .lx-section--petal, .btw .lx-section--foam, .btw .lx-hero{background: none;} .btw .lx-header{background: color-mix(in srgb, var(--lx-bg) 82%, transparent);} .btw .lx-tiltpanel{position: relative; rotate: -1.4deg; margin-inline: -3vw; padding-inline: 3vw; margin-block: var(--lx-space-l);} .btw .lx-tiltpanel > *{rotate: 1.4deg;} .btw .lx-dark.lx-tiltpanel{border-radius: var(--lx-r-md);} .btw .lx-marquee{rotate: -1.2deg; margin-inline: -2vw; inline-size: 104vw; margin-block: var(--lx-space-m); background: color-mix(in srgb, var(--lx-bg-alt) 82%, transparent);} @media (prefers-reduced-motion: reduce){ .btw .lx-tiltpanel, .btw .lx-tiltpanel > *, .btw .lx-marquee{rotate: none;} } .btw .lx-cutout{position: relative; z-index: 2; pointer-events: none;} .btw .lx-cutout img{border-radius: 0;} .btw .lx-hero__cut{max-block-size: 36rem; margin-block: calc(-1 * var(--lx-space-m)) 0;} .btw .lx-hero__cut img{block-size: 100%; inline-size: auto; margin-inline: auto;} @media (max-width: 52rem){ .btw .lx-hero__cut{max-block-size: 20rem; margin-block: var(--lx-space-s) 0;} .btw .lx-hero__cut img{margin-inline: auto;} } .btw .lx-cut-side{position: absolute; inset-block-end: 0; inline-size: clamp(10rem, 22vw, 18rem);} .btw .lx-cut-side--r{inset-inline-end: 2vw;} .btw .lx-cut-side--l{inset-inline-start: 2vw;} @media (max-width: 64rem){ .btw .lx-cut-side{display: none;} } .btw .lx-icon{inline-size: 2.9rem; block-size: 2.9rem;} .btw .lx-icon path, .btw .lx-icon circle{stroke-width: 2.6;} .btw .lx-icon .ghost{opacity: 0.34; stroke-width: 2;} .btw .lx-footer{margin-block-start: var(--lx-space-2xl); position: relative; background: none;} .btw .lx-footer__panel{background-color: var(--lx-navy); background-image: var(--lx-grain); rotate: -1.2deg; margin-inline: -3vw; padding-inline: 3vw; border-start-start-radius: var(--lx-r-md); border-start-end-radius: var(--lx-r-md); padding-block-end: var(--lx-space-l);} .btw .lx-footer__panel > *{rotate: 1.2deg;} .btw .lx-footer__trust{display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--lx-space-m); padding-block: var(--lx-space-l) var(--lx-space-m);} @media (min-width: 48rem){ .btw .lx-footer__trust{grid-template-columns: repeat(4, 1fr);} } .btw .lx-footer__trust div{display: grid; justify-items: start; gap: 0.3rem;} .btw .lx-footer__trust .lx-icon{color: var(--lx-sea-500);} .btw .lx-footer__trust b{color: var(--lx-text-inv); font-size: var(--lx-text-sm);} .btw .lx-footer__trust span{color: var(--lx-text-inv-soft); font-size: var(--lx-text-xs);} .btw .lx-footer__mega{font-family: var(--lx-font-display); font-weight: 800; line-height: 0.9; font-size: clamp(4rem, 14vw, 13rem); letter-spacing: -0.04em; color: color-mix(in srgb, var(--lx-text-inv) 7%, transparent); user-select: none; pointer-events: none; text-align: center; overflow: hidden;} .btw .lx-footer__contact{display: grid; gap: 0.35rem; font-size: var(--lx-text-sm); color: var(--lx-text-inv-soft);} .btw .lx-footer__contact a{color: var(--lx-text-inv); text-decoration: none;} .btw .lx-footer__contact a:hover{color: var(--lx-pink-ondark);} .btw .lx-badge--sea{background: var(--lx-sea-100); color: var(--lx-sea-700); background-image: none;} .btw .lx-bmodal__alt{position: absolute; inset-block-end: 0.4rem; inset-inline: 0; text-align: center; z-index: 3;} .btw .lx-footer__h{font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-base); margin-block-end: 0.6rem; color: var(--lx-text-inv);} .btw .lx-bgbox{position: relative; overflow: hidden; border-radius: var(--lx-r-md);} .btw .lx-bgbox > img.lx-bgbox__img{position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 0; z-index: 0;} .btw .lx-bgbox > :not(.lx-bgbox__img){position: relative; z-index: 1;} .btw .lx-bgbox--scrim::after{content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--lx-bg) 88%, transparent) 0%, color-mix(in srgb, var(--lx-bg) 55%, transparent) 55%, transparent 100%);} @keyframes lx-ambient{ 0% { scale: 1; translate: 0 0; } 50% { scale: 1.06; translate: -1.2% 0.8%; } 100% { scale: 1; translate: 0 0; } } .btw .lx-ambient img, .btw img.lx-ambient{animation: lx-ambient 26s ease-in-out infinite; will-change: transform;} @keyframes lx-sunpulse{ 50% { scale: 1.12; } } .btw .lx-nav__sun{animation: lx-sunpulse 5s ease-in-out infinite;} .btw .lx-doodle-underline path, .btw .lx-doodle-circle path, .btw .lx-doodle-arrow path{stroke-dasharray: 620; stroke-dashoffset: 620; animation: lx-draw 1.1s ease-out forwards; animation-delay: 0.3s;} @keyframes lx-draw{ to { stroke-dashoffset: 0; } } @keyframes lx-float{ 50% { translate: 0 -10px; } } .btw .lx-blob{animation: lx-float 14s ease-in-out infinite;} @media (prefers-reduced-motion: reduce){ .btw .lx-ambient img, .btw img.lx-ambient, .btw .lx-nav__sun, .btw .fsuccess__sun, .btw .lx-blob{animation: none;} .btw .lx-doodle-underline path, .btw .lx-doodle-circle path, .btw .lx-doodle-arrow path{stroke-dashoffset: 0; animation: none;} } .btw .lx-hero__ci{overflow: hidden; border-radius: var(--lx-r-md); rotate: 1.2deg;} .btw .lx-hero__ci img, .btw .lx-hero__ci picture{inline-size: 100%; block-size: auto;} .btw .lx-hero__ci img{aspect-ratio: 4 / 5; object-fit: cover;} @media (min-width: 52rem){ .btw .lx-hero__ci{max-block-size: 34rem;} .btw .lx-hero__ci img{block-size: 100%;} } @media (max-width: 52rem){ .btw .lx-hero__ci{rotate: 0.8deg; margin-block-start: var(--lx-space-m);} .btw .lx-hero__ci img{aspect-ratio: auto; object-fit: contain;} } .btw, .btw{overflow-x: clip;} @media (max-width: 52rem){ .btw .lx-marquee{rotate: -0.8deg; inline-size: 102vw;} .btw .lx-tiltpanel, .btw .lx-footer__panel{rotate: -0.8deg; margin-inline: -4vw; padding-inline: 4vw;} .btw .lx-tiltpanel > *, .btw .lx-footer__panel > *{rotate: 0.8deg;} .btw .lx-bgbox--scrim::after{background: color-mix(in srgb, var(--lx-bg) 82%, transparent);} .btw .lx-cut-side{display: none;} .btw .lx-hero__img{max-block-size: none;} .btw .lx-hero__img img{aspect-ratio: auto;} } .btw .lx-usp-row{align-items: start;} .btw .lx-usp h3{white-space: nowrap; font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.5rem);} .btw .lx-usp p{max-inline-size: 30ch;} @media (max-width: 48rem){ .btw .lx-usp h3{white-space: normal;} } .btw .lx-membercard__price small{white-space: nowrap;} .btw .lx-footer{margin-block-start: var(--lx-space-l);} .btw .lx-cutout img{filter: drop-shadow(0 18px 14px color-mix(in srgb, var(--lx-navy) 14%, transparent));} .btw .lx-cut-side--r{inset-inline-end: 0; inset-block-end: -1rem;} .btw .lx-header{position: static; background: none; border-block-end: 0; backdrop-filter: none;} .btw .lx-nav__logo img{border-radius: 0; filter: none;} .btw .lx-blob{opacity: 0.32;} .btw .lx-blob--petal{color: var(--lx-pink-500);} .btw .lx-blob--foam{color: var(--lx-sea-500);} .btw .lx-blob--peach{color: var(--lx-peach);} .btw .lx-blob--sand{color: var(--lx-dune);} .btw .lx-blob svg{rotate: -8deg;} .btw .lx-tabbar{display: none;} @media (max-width: 52rem){ .btw .lx-stickybar{display: none;} .btw .lx-tabbar{display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--lx-z-sticky); background: var(--lx-navy); padding: 0.4rem 0.4rem calc(0.4rem + env(safe-area-inset-bottom));} .btw .lx-tabbar a, .btw .lx-tabbar button{display: grid; justify-items: center; gap: 0.15rem; background: none; border: 0; color: var(--lx-text-inv-soft); text-decoration: none; font-size: 0.68rem; font-weight: 600; padding: 0.35rem 0.2rem; border-radius: var(--lx-r-sm); cursor: pointer;} .btw .lx-tabbar .lx-icon{inline-size: 1.5rem; block-size: 1.5rem; color: currentColor;} .btw .lx-tabbar a[aria-current="page"], .btw .lx-tabbar a:active{color: var(--lx-pink-ondark);} .btw .lx-tabbar__cta{color: var(--lx-text-inv) !important; background: var(--lx-cta) !important;} .btw{padding-block-end: 4.6rem;} .btw body:has(.lx-stickybar.is-visible){padding-block-end: 4.6rem;} .btw .lx-nav__links{position: fixed; inset: 0; block-size: auto; padding-block-end: 6rem; background: var(--lx-navy); border: 0; padding: 5rem var(--lx-gutter) var(--lx-space-l); gap: var(--lx-space-m); z-index: var(--lx-z-nav);} .btw .lx-nav__links a{color: var(--lx-text-inv); font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h2); padding: 0; background: none !important;} .btw .lx-nav__links a[aria-current="page"]{color: var(--lx-pink-ondark);} .btw .lx-nav__cta-li{margin-block-start: var(--lx-space-m);} .btw .lx-nav__cta-li a{font-size: var(--lx-text-h3); color: var(--lx-text-inv) !important; background: var(--lx-cta) !important; padding: 0.6em 1em;} .btw .lx-header:has(.lx-nav__toggle:checked){position: relative; z-index: 55;} .btw .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger{position: fixed; inset-block-start: 1rem; inset-inline-end: var(--lx-gutter); z-index: 60; background: var(--lx-navy-raised); border-color: var(--lx-navy-raised);} .btw .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger span{background: transparent;} .btw .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger span::before, .btw .lx-header:has(.lx-nav__toggle:checked) .lx-nav__burger span::after{background: var(--lx-text-inv);} .btw body:has(.lx-nav__toggle:checked){overflow: hidden;} } .btw .lx-header, .btw .lx-header .lx-nav{background: none; border: 0; box-shadow: none;} @media (min-width: 52rem){ .btw .lx-header{position: sticky; inset-block-start: 0; z-index: var(--lx-z-nav); transition: background var(--lx-dur) var(--lx-ease), backdrop-filter var(--lx-dur) var(--lx-ease);} .btw .lx-header.is-scrolled{background: color-mix(in srgb, var(--lx-bg) 52%, transparent); backdrop-filter: blur(16px) saturate(1.35); -webkit-backdrop-filter: blur(16px) saturate(1.35); border-block-end: 1px solid color-mix(in srgb, var(--lx-line) 55%, transparent);} } .btw .lx-artfacts, .btw .lx-arttoc{border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); padding: var(--lx-space-s); background: color-mix(in srgb, var(--lx-bg) 70%, transparent); margin-block: var(--lx-space-s);} .btw .lx-artfacts ul{list-style: none; padding: 0; display: grid; gap: 0.5rem;} .btw .lx-artfacts li{display: flex; gap: 0.6rem; align-items: center; font-size: var(--lx-text-sm);} .btw .lx-artfacts .lx-icon{inline-size: 1.6rem; block-size: 1.6rem;} .btw .lx-arttoc ol{padding-inline-start: 1.2rem; display: grid; gap: 0.3rem; font-size: var(--lx-text-sm);} .btw .lx-arttoc a{text-decoration: none;} .btw .lx-arttoc a:hover{text-decoration: underline;} @media (min-width: 52rem){ .btw .lx-artwrap:has(.lx-artfacts){display: grid; grid-template-columns: 3fr 2fr; gap: var(--lx-space-m); align-items: start;} } .btw .lx-artauthor{display: grid; grid-template-columns: auto 1fr; gap: var(--lx-space-s); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); padding: var(--lx-space-s); margin-block-start: var(--lx-space-l); align-items: center;} .btw .lx-artauthor img{inline-size: 4.5rem; aspect-ratio: 3/4; object-fit: cover;} .btw .lx-artauthor b{font-family: var(--lx-font-display);} .btw .lx-artauthor span{display: block; font-size: var(--lx-text-xs); color: var(--lx-ink-soft);} @media (max-width: 52rem){ .btw .lx-slider{padding-inline: var(--lx-gutter); scroll-padding-inline-start: var(--lx-gutter); margin-inline: calc(-1 * var(--lx-gutter));} .btw .lx-steps, .btw .lx-cards__grid{display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--lx-space-s); padding-inline: var(--lx-gutter); scroll-padding-inline-start: var(--lx-gutter); margin-inline: calc(-1 * var(--lx-gutter)); padding-block-end: var(--lx-space-s); scrollbar-width: thin; scrollbar-color: var(--lx-dune) transparent;} .btw .lx-steps > li{flex: 0 0 78vw; scroll-snap-align: start;} .btw .lx-cards__grid > *{flex: 0 0 82vw; scroll-snap-align: start;} .btw .lx-hero .lx-blob{display: none;} .btw .lx-blob{opacity: 0.18;} .btw .lx-nav__burger{display: none !important;} .btw .lx-nav__links .lang-switch{position: static;} .btw .lx-nav__links .lang-switch-menu{position: static; display: flex !important; flex-wrap: wrap; gap: 0.4rem; background: none; border: 0; padding: 0; min-inline-size: 0;} .btw .lx-nav__links .lang-switch-menu button{color: var(--lx-text-inv); font-size: var(--lx-text-base); background: var(--lx-navy-raised); border-radius: var(--lx-r-sm); padding: 0.5em 0.8em;} .btw .lx-nav__links .lang-switch-menu button[aria-current="true"]{background: var(--lx-pink-100); color: var(--lx-pink-700);} .btw .lx-nav__links .lang-switch-btn{display: none;} } .btw .lx-membercard{border-width: 2px; border-color: var(--lx-line); gap: var(--lx-space-xs);} .btw .lx-membercard--petal{border-color: var(--lx-ink);} .btw .lx-membercard li{display: flex; gap: 0.55rem; align-items: center; padding-inline-start: 0;} .btw .lx-membercard li::before{display: none;} .btw .lx-membercard li .lx-icon{inline-size: 1.35rem; block-size: 1.35rem; color: var(--lx-sea-700); flex: none;} .btw .lx-membercard .lx-btn{inline-size: 100%;} .btw .lx-billet{display: inline-flex; align-items: center; justify-content: center; line-height: 1; text-align: center; background: var(--lx-navy); color: var(--lx-text-inv); font-size: var(--lx-text-xs); font-weight: 600; padding: 0.3em 0.7em; border-radius: var(--lx-r-sm);} .btw .lx-diag{clip-path: polygon(0 4%, 100% 0, 100% 96%, 0 100%);} .btw .lx-diag--r{clip-path: polygon(0 0, 100% 4%, 100% 100%, 0 96%);} .btw .lx-mini-team{display: flex; gap: var(--lx-space-s); align-items: center;} .btw .lx-mini-team img{inline-size: 4.2rem; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 2px solid var(--lx-bg);} .btw .lx-mini-team picture{margin-inline-start: -1.2rem; display: inline-block;} .btw .lx-mini-team picture:first-of-type{margin-inline-start: 0;} .btw .lx-membercard__photo{margin: calc(-1 * var(--lx-space-m)) calc(-1 * var(--lx-space-m)) 0;} .btw .lx-membercard__photo img{inline-size: 100%; block-size: clamp(10rem, 17vw, 13rem); object-fit: cover; object-position: center 62%; border-radius: var(--lx-r-md) var(--lx-r-md) 0 0;} .btw .lx-pricetag{position: relative; display: inline-block; font-family: var(--lx-font-display); font-weight: 800; font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); line-height: 1; letter-spacing: -0.03em; color: var(--lx-ink);} .btw .lx-pricetag::before{content: attr(data-price); position: absolute; inset: 0; -webkit-text-stroke: 10px var(--lx-bg); z-index: -1;} .btw .lx-pricetag small{font-family: var(--lx-font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; -webkit-text-stroke: 0;} .btw .lx-sticker{position: absolute; inset-block-start: -0.9rem; inset-inline-end: -0.5rem; rotate: 8deg; background: var(--lx-pink-500); color: var(--lx-ink); font-family: var(--lx-font-marker); font-weight: 700; font-size: 1.25rem; padding: 0.2em 0.55em; border-radius: var(--lx-r-sm); border: 2px solid var(--lx-bg);} .btw .lx-membercard{position: relative;} .btw .lx-membercard__was{color: var(--lx-ink-soft); font-size: var(--lx-text-sm);} @media (min-width: 40rem){ .btw .lx-membercard--petal{scale: 1.05; z-index: 2; border-width: 3px;} } .btw .lx-gbadge{display: inline-flex; align-items: center; gap: 0.4em; background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); padding: 0.35em 0.7em; font-size: var(--lx-text-sm);} .btw .lx-gbadge b{font-family: var(--lx-font-display); font-weight: 800;} .btw .lx-gbadge__sub{color: var(--lx-ink-soft); font-size: var(--lx-text-xs);} .btw .lx-gg{inline-size: 1.05em; block-size: 1.05em;} .btw .lx-stars{color: var(--lx-peach); letter-spacing: 0.08em;} .btw .lx-dark .lx-gbadge{background: var(--lx-navy-raised); border-color: var(--lx-navy-raised); color: var(--lx-text-inv);} .btw .lx-reviewcard{inline-size: clamp(16rem, 40vw, 21rem); flex: 0 0 auto; scroll-snap-align: start; border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); padding: var(--lx-space-s); display: grid; gap: 0.5rem; margin: 0;} .btw .lx-reviewcard__head{display: flex; align-items: center; gap: 0.4rem;} .btw .lx-reviewcard blockquote{margin: 0; font-size: var(--lx-text-sm); line-height: 1.55;} .btw .lx-reviewcard figcaption{display: flex; gap: 0.5rem; align-items: baseline;} .btw .lx-reviewcard figcaption b{font-family: var(--lx-font-display);} .btw .lx-reviewcard figcaption span{color: var(--lx-ink-soft); font-size: var(--lx-text-xs);} @keyframes lx-autoscroll{ to { translate: -50% 0; } } .btw .lx-slider--auto{scroll-snap-type: none; overflow: hidden;} .btw .lx-slider--auto:hover, .btw .lx-slider--auto:focus-within{overflow-x: auto; scroll-snap-type: x mandatory;} .btw .lx-slider--auto > *{animation: none;} .btw .lx-slider--auto{--dur: 55s;} @media (hover: hover) and (prefers-reduced-motion: no-preference){ .btw .lx-slider--auto{display: flex;} .btw .lx-slider--auto:not(:hover):not(:focus-within){mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);} } .btw .lx-lochero{position: relative; margin-block-start: -4.4rem;} @media (max-width: 52rem){ .btw .lx-lochero{margin-block-start: 0;} } .btw .lx-lochero__img{clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%);} .btw .lx-lochero__img img{inline-size: 100%; block-size: clamp(16rem, 42vw, 26rem); object-fit: cover; border-radius: 0;} .btw .lx-lochero__box{position: relative; margin-block-start: calc(-1 * var(--lx-space-xl)); z-index: 2; background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); padding: var(--lx-space-m); display: grid; gap: var(--lx-space-s); max-inline-size: 46rem;} .btw .lx-lochero__badges{display: flex; flex-wrap: wrap; gap: 0.5rem;} .btw .lx-loccard{border: 2px solid var(--lx-line); border-radius: var(--lx-r-md); overflow: hidden; background: var(--lx-bg); display: grid; text-decoration: none; color: var(--lx-ink); position: relative; transition: border-color var(--lx-dur-fast) var(--lx-ease);} .btw .lx-loccard:hover{border-color: var(--lx-ink);} .btw .lx-loccard img{inline-size: 100%; block-size: clamp(9rem, 16vw, 12rem); object-fit: cover; border-radius: 0;} .btw .lx-loccard__body{padding: var(--lx-space-s); display: grid; gap: 0.45rem; justify-items: start;} .btw .lx-loccard__city{font-family: var(--lx-font-display); font-weight: 800; font-size: var(--lx-text-h3);} .btw .lx-loccard__meta{display: flex; flex-wrap: wrap; gap: 0.7rem; color: var(--lx-ink-soft); font-size: var(--lx-text-xs);} .btw .lx-loccard__meta span{display: inline-flex; align-items: center; gap: 0.3rem;} .btw .lx-loccard__meta .lx-icon{inline-size: 1.1rem; block-size: 1.1rem;} .btw .lx-loccard--soonface{filter: saturate(0.75);} .btw .lx-demap{position: relative;} .btw .lx-demap svg{inline-size: 100%; block-size: auto; color: var(--lx-dune);} .btw .lx-demap__pin{position: absolute; translate: -50% -90%; display: grid; justify-items: center; gap: 0.1rem;} .btw .lx-demap__pin .lx-icon{inline-size: 2rem; block-size: 2rem; color: var(--lx-pink-700);} .btw .lx-demap__pin span{font-size: var(--lx-text-xs); font-weight: 600; background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: var(--lx-r-sm); padding: 0.1em 0.4em;} .btw .lx-demap__pin--soon .lx-icon{color: var(--lx-sea-700);} .btw .lx-infogrid{display: grid; gap: var(--lx-space-s); grid-template-columns: 1fr;} @media (min-width: 52rem){ .btw .lx-infogrid{grid-template-columns: repeat(3, 1fr);} } .btw .lx-infobox{border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); padding: var(--lx-space-s); display: grid; gap: 0.5rem; align-content: start;} .btw .lx-infobox__head{display: flex; align-items: center; gap: 0.5rem; font-family: var(--lx-font-display); font-weight: 700;} .btw .lx-infobox__head .lx-icon{inline-size: 1.6rem; block-size: 1.6rem;} .btw .lx-infobox table{font-size: var(--lx-text-sm); border-collapse: collapse; inline-size: 100%;} .btw .lx-infobox td{padding-block: 0.25rem; border-block-end: 1px solid var(--lx-line);} .btw .lx-infobox td:last-child{text-align: end;} .btw .lx-btn--wa{background: var(--lx-sea-700); color: var(--lx-text-inv); display: inline-flex; gap: 0.5em;} .btw .lx-btn--wa svg{inline-size: 1.2em; block-size: 1.2em;} .btw .lx-availbar{border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); padding: var(--lx-space-s); display: grid; gap: 0.5rem;} .btw .lx-availbar__track{block-size: 10px; border-radius: 5px; background: var(--lx-bg-alt); overflow: hidden;} .btw .lx-availbar__fill{block-size: 100%; background: var(--lx-grad-cta); border-radius: 5px; transition: width 0.8s var(--lx-ease);} .btw .lx-availbar b{color: var(--lx-pink-700);} .btw .lx-countdown{display: flex; gap: 0.6rem;} .btw .lx-countdown div{display: grid; justify-items: center; background: var(--lx-navy); color: var(--lx-text-inv); border-radius: var(--lx-r-sm); padding: 0.45rem 0.6rem; min-inline-size: 3.2rem;} .btw .lx-countdown b{font-family: var(--lx-font-display); font-size: var(--lx-text-h3); line-height: 1;} .btw .lx-countdown span{font-size: 0.6rem; color: var(--lx-text-inv-soft);} .btw .lx-artcard--slide{inline-size: clamp(15rem, 38vw, 19rem); flex: 0 0 auto; scroll-snap-align: start;} .btw .lx-artcard--slide img{aspect-ratio: 16/9; object-fit: cover; inline-size: 100%; border-radius: var(--lx-r-md);} @keyframes lx-wiggle{ 0%,100% { rotate: -2.5deg; } 50% { rotate: 2.5deg; } } @keyframes lx-bob{ 0%,100% { translate: 0 0; } 50% { translate: 0 -4px; } } @keyframes lx-drawloop{ 0% { stroke-dashoffset: 260; opacity: 0.25; } 45%,70% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -260; opacity: 0.25; } } .btw .lx-anim-wiggle{animation: lx-wiggle 3.2s ease-in-out infinite; transform-origin: 50% 80%;} .btw .lx-anim-bob{animation: lx-bob 2.8s ease-in-out infinite;} .btw .lx-anim-draw path:not(.ghost){stroke-dasharray: 260; animation: lx-drawloop 4.5s ease-in-out infinite;} .btw .lx-usp .lx-icon, .btw .lx-footer__trust .lx-icon, .btw .lx-infobox__head .lx-icon{animation: lx-bob 3.4s ease-in-out infinite;} .btw .lx-usp:nth-child(2) .lx-icon, .btw .lx-footer__trust div:nth-child(2) .lx-icon{animation-delay: 0.6s;} .btw .lx-usp:nth-child(3) .lx-icon, .btw .lx-footer__trust div:nth-child(3) .lx-icon{animation-delay: 1.2s;} .btw .lx-demap__pin .lx-icon{animation: lx-bob 2.4s ease-in-out infinite;} @media (prefers-reduced-motion: reduce){ .btw .lx-anim-wiggle, .btw .lx-anim-bob, .btw .lx-anim-draw path, .btw .lx-usp .lx-icon, .btw .lx-footer__trust .lx-icon, .btw .lx-infobox__head .lx-icon, .btw .lx-demap__pin .lx-icon{animation: none;} } .btw .lx-heroscript{position: absolute; z-index: 2; inset-block-start: 6%; inset-inline-start: -6%; font-family: var(--lx-font-marker); font-weight: 700; rotate: -5deg; font-size: clamp(2.2rem, 1.5rem + 3vw, 4rem); line-height: 1; color: var(--lx-bg); -webkit-text-stroke: 0.7px var(--lx-bg); text-shadow: 0 2px 10px rgba(25, 29, 58, 0.45), 0 1px 3px rgba(25, 29, 58, 0.35); pointer-events: none; white-space: nowrap;} @media (max-width: 52rem){ .btw .lx-heroscript{inset-inline-start: 7%; inset-block-start: 4%; font-size: clamp(1.85rem, 7.6vw, 2.6rem);} } .btw .lx-reviewbox{border: 2px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); padding: var(--lx-space-m); max-inline-size: 44rem; margin-inline: auto; display: grid; gap: var(--lx-space-s);} .btw .lx-reviewbox__head{display: flex; align-items: center; justify-content: center; gap: 0.5rem;} .btw .lx-reviewbox__track{display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;} .btw .lx-reviewbox__track::-webkit-scrollbar{display: none;} .btw .lx-reviewbox__slide{flex: 0 0 100%; scroll-snap-align: start; display: grid; gap: 0.6rem; text-align: center; padding-inline: var(--lx-space-s);} .btw .lx-reviewbox__slide blockquote{margin: 0; font-size: var(--lx-text-lg); line-height: 1.5; font-weight: 500;} .btw .lx-reviewbox__slide figcaption{color: var(--lx-ink-soft); font-size: var(--lx-text-sm);} .btw .lx-reviewbox__dots{display: flex; justify-content: center; gap: 0.45rem;} .btw .lx-reviewbox__dots button{inline-size: 8px; block-size: 8px; border-radius: 50%; border: 0; background: var(--lx-line); cursor: pointer; padding: 0;} .btw .lx-reviewbox__dots button[aria-current="true"]{background: var(--lx-pink-500);} .btw .lx-mappanel{display: grid; gap: var(--lx-space-s); align-content: start;} .btw .lx-mappanel__chips{display: flex; gap: 0.5rem; flex-wrap: wrap;} .btw .lx-mappanel__chips .lx-btn{padding-block: 0.5em; padding-inline: 0.9em; font-size: var(--lx-text-sm); display: inline-flex; gap: 0.4em;} .btw .lx-mappanel__chips .lx-btn .lx-icon{inline-size: 1.1rem; block-size: 1.1rem; animation: none;} .btw .lx-mappanel__chips .lx-btn.is-active{border-color: var(--lx-ink); background: var(--lx-bg);} .btw .lx-map--tall{aspect-ratio: auto; block-size: clamp(22rem, 46vw, 30rem);} .btw .lx-slider, .btw .lx-steps, .btw .lx-cards__grid, .btw .lx-reviewbox__track{scrollbar-width: none;} .btw .lx-slider::-webkit-scrollbar, .btw .lx-steps::-webkit-scrollbar, .btw .lx-cards__grid::-webkit-scrollbar, .btw .lx-reviewbox__track::-webkit-scrollbar{display: none;} .btw .lx-slider{cursor: grab;} .btw .lx-slider.is-dragging, .btw .lx-reviewbox__track.is-dragging{cursor: grabbing; scroll-snap-type: none; scroll-behavior: auto; user-select: none;} .btw .lx-slider.is-dragging a, .btw .lx-slider.is-dragging img{pointer-events: none;} .btw .lx-sliderwrap{position: relative;} .btw .lx-sliderarrow{position: absolute; inset-block-start: 50%; translate: 0 -50%; z-index: 5; inline-size: 2.6rem; block-size: 2.6rem; border-radius: 50%; border: 1px solid var(--lx-line); background: color-mix(in srgb, var(--lx-bg) 92%, transparent); display: grid; place-items: center; cursor: pointer; color: var(--lx-ink); transition: opacity var(--lx-dur-fast) var(--lx-ease), background var(--lx-dur-fast) var(--lx-ease);} .btw .lx-sliderarrow:hover{background: var(--lx-pink-100); color: var(--lx-pink-700); border-color: var(--lx-pink-500);} .btw .lx-sliderarrow svg{inline-size: 1.1rem; block-size: 1.1rem;} .btw .lx-sliderarrow--prev{inset-inline-start: 0.4rem;} .btw .lx-sliderarrow--next{inset-inline-end: 0.4rem;} .btw .lx-sliderarrow[hidden]{display: none;} @media (pointer: coarse){ .btw .lx-sliderarrow{display: none;} } .btw .lx-cornerribbon{position: fixed; inset-block-start: 2.1rem; inset-inline-end: -3.6rem; z-index: 70; rotate: 45deg; background: var(--lx-grad-cta); color: var(--lx-ink); font-family: var(--lx-font-display); font-weight: 700; font-size: 0.72rem; letter-spacing: 0.05em; min-inline-size: 15rem; text-align: center; padding: 0.5em 3em; text-decoration: none; white-space: nowrap; border-block: 2px solid var(--lx-bg);} .btw .lx-cornerribbon:hover{filter: brightness(0.96);} @media (max-width: 74rem){ .btw .lx-nav{padding-inline-end: 3rem;} } @media (max-width: 52rem){ .btw .lx-cornerribbon{font-size: 0.6rem; inset-block-start: 1.7rem; inset-inline-end: -3.4rem; min-inline-size: 12.5rem; padding: 0.45em 2.4em;} .btw .lx-nav{padding-inline-end: 2.6rem;} } .btw .lx-icon path{stroke-dasharray: 300; stroke-dashoffset: 300;} .btw .lx-icon.lx-inview path{animation: lx-drawin 0.9s var(--lx-ease) forwards;} .btw .lx-icon.lx-inview path.ghost{animation-delay: 0.15s;} @keyframes lx-drawin{ to { stroke-dashoffset: 0; } } .btw .lx-doodle-underline path, .btw .lx-doodle-circle path, .btw .lx-doodle-arrow path{stroke-dasharray: 620; stroke-dashoffset: 620; animation: none;} .btw .lx-doodle-underline.lx-inview path, .btw .lx-doodle-circle.lx-inview path, .btw .lx-doodle-arrow.lx-inview path{animation: lx-draw 1.1s ease-out forwards;} .btw .lx-sticker{scale: 0;} .btw .lx-sticker.lx-inview{animation: lx-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;} @keyframes lx-pop{ from { scale: 0; rotate: -12deg; } to { scale: 1; rotate: 8deg; } } .btw .lx-mark{opacity: 0; translate: 0 6px; transition: opacity 0.5s var(--lx-ease), translate 0.5s var(--lx-ease);} .btw .lx-mark.lx-inview{opacity: 1; translate: 0 0;} @media (prefers-reduced-motion: reduce){ .btw .lx-icon path, .btw .lx-doodle-underline path, .btw .lx-doodle-circle path, .btw .lx-doodle-arrow path{stroke-dashoffset: 0; animation: none;} .btw .lx-sticker{scale: 1;} .btw .lx-mark{opacity: 1; translate: none;} } .btw .lx-zstat{display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: var(--lx-space-s);} .btw .lx-zstat span{display: inline-flex; align-items: center; gap: 0.45rem; border: 1px solid var(--lx-line); background: var(--lx-bg); border-radius: var(--lx-r-md); padding: 0.4em 0.75em; font-size: var(--lx-text-sm); font-weight: 600;} .btw .lx-zstat .lx-icon{inline-size: 1.35rem; block-size: 1.35rem; animation: none;} .btw .lx-zprice{position: relative; display: inline-grid; gap: 0.15rem; margin-block: var(--lx-space-s);} .btw .lx-zprice .lx-pricetag{font-size: clamp(3rem, 2.4rem + 2.4vw, 4.2rem);} .btw .lx-zprice__was{color: var(--lx-ink-soft); font-size: var(--lx-text-sm);} .btw .lx-zpricepanel{border: 2px solid var(--lx-ink); border-radius: var(--lx-r-md); background: var(--lx-bg); padding: var(--lx-space-m); position: relative; display: grid; gap: var(--lx-space-s); max-inline-size: 34rem;} .btw .lx-zpricepanel__row{display: grid; grid-template-columns: 1fr auto auto; gap: var(--lx-space-s); align-items: baseline; border-block-end: 1px dashed var(--lx-dune); padding-block-end: 0.6rem;} .btw .lx-zpricepanel__row:last-of-type{border: 0; padding-block-end: 0;} .btw .lx-zpricepanel__row b{font-family: var(--lx-font-display);} .btw .lx-zpricepanel__row .lx-pricetag{font-size: 1.7rem;} .btw .lx-zpricepanel__row .lx-pricetag::before{-webkit-text-stroke-width: 6px;} .btw .lx-zpricepanel__save{font-family: var(--lx-font-marker); font-weight: 700; color: var(--lx-pink-700); font-size: 1.15rem; rotate: -2deg;} .btw .lx-zbenefits{display: grid; gap: var(--lx-space-s);} .btw .lx-zbenefits li{display: flex; gap: var(--lx-space-s); align-items: flex-start; font-size: var(--lx-text-lg); font-weight: 600; list-style: none;} .btw .lx-zbenefits .lx-icon{inline-size: 2rem; block-size: 2rem; flex: none; margin-block-start: 0.1rem;} .btw .lx-zsticker-photo{position: absolute; inset-block-start: 1rem; inset-inline-end: 1rem; z-index: 3;} .btw .lx-bfhero{position: relative; overflow: clip;} .btw .lx-bfhero__media img{inline-size: 100%; block-size: clamp(28rem, 46vw, 36rem); object-fit: cover; object-position: center 30%; border-radius: 0;} .btw .lx-bfhero__shade{position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--lx-navy) 34%, transparent) 0%, transparent 55%); pointer-events: none;} .btw .lx-bfhero__panelwrap{position: absolute; inset-block-end: clamp(1.5rem, 4vw, 3rem); inset-inline-start: 0; max-inline-size: min(40rem, 82vw);} .btw .lx-bfhero__back{position: absolute; inset: 0; translate: 1.1rem 1.1rem; background: var(--lx-navy); clip-path: polygon(0 0, 100% 0, calc(100% - 4.5rem) 100%, 0 100%);} .btw .lx-bfhero__panel{position: relative; background: var(--lx-grad-cta); color: var(--lx-ink); clip-path: polygon(0 0, 100% 0, calc(100% - 3.6rem) 100%, 0 100%); padding: clamp(1.2rem, 2.2vw, 2rem) clamp(5rem, 7vw, 6.5rem) clamp(1.2rem, 2.2vw, 2rem) max(var(--lx-gutter), calc((100vw - var(--lx-container)) / 2));} .btw .lx-bfhero__panel h1{color: var(--lx-ink); font-size: clamp(1.9rem, 1.4rem + 2vw, 3rem); line-height: 1.08;} .btw .lx-bfhero__panel > p:not(.lx-bfhero__ctas):not(.lx-label){font-size: var(--lx-text-sm); max-inline-size: 30rem;} .btw .lx-bfhero__panel p{color: var(--lx-ink); max-inline-size: 34rem;} .btw .lx-bfhero__ctas{display: flex; gap: 0.7rem; flex-wrap: wrap; margin-block-start: var(--lx-space-s);} .btw .lx-btn--navy{background: var(--lx-navy); color: var(--lx-text-inv);} .btw .lx-btn--navy:hover{background: var(--lx-navy-raised);} .btw .lx-btn--shell{background: var(--lx-bg); color: var(--lx-ink); box-shadow: inset 0 0 0 2px var(--lx-navy);} .btw .lx-btn--shell:hover{background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--lx-cta);} .btw .lx-bfhero__badges{display: flex; gap: 0.6rem; flex-wrap: wrap; padding-block: var(--lx-space-s);} @media (max-width: 52rem){ .btw .lx-bfhero__media img{block-size: clamp(30rem, 130vw, 38rem); object-position: 62% 30%;} .btw .lx-bfhero__shade{background: linear-gradient(180deg, transparent 12%, color-mix(in srgb, var(--lx-navy) 42%, transparent) 55%, color-mix(in srgb, var(--lx-navy) 86%, transparent) 100%);} .btw .lx-bfhero__panelwrap{inset-block-end: 1.1rem; max-inline-size: 100%; inline-size: 100%;} .btw .lx-bfhero__back{display: none;} .btw .lx-bfhero__panel{background: none; clip-path: none; padding: 0 var(--lx-gutter); color: var(--lx-text-inv);} .btw .lx-bfhero__panel .lx-label{color: var(--lx-pink-ondark) !important;} .btw .lx-bfhero__panel h1{color: var(--lx-text-inv); font-size: clamp(2rem, 9vw, 2.6rem);} .btw .lx-bfhero__panel > p:not(.lx-bfhero__ctas):not(.lx-label){color: var(--lx-text-inv); opacity: 0.92;} .btw .lx-bfhero__ctas .lx-btn--navy{background: var(--lx-cta); color: var(--lx-text-inv);} .btw .lx-bfhero__ctas .lx-btn--shell{border-color: var(--lx-bg);} } .btw .lx-locgrid{display: grid; gap: var(--lx-space-m); grid-template-columns: 1fr;} @media (min-width: 52rem){ .btw .lx-locgrid{grid-template-columns: repeat(3, 1fr);} .btw .lx-locgrid > :nth-child(2){translate: 0 var(--lx-space-m);} .btw .lx-locgrid > :nth-child(3){translate: 0 var(--lx-space-s);} } .btw .lx-wavediv{inline-size: min(100% - 2 * var(--lx-gutter), 46rem); margin: var(--lx-space-m) auto; color: var(--lx-sea-500); opacity: 0.7;} .btw .lx-waveline{stroke-dasharray: 2600; stroke-dashoffset: 2600; animation: lx-waveloop 7s ease-in-out infinite;} @keyframes lx-waveloop{ 0% { stroke-dashoffset: 2600; } 55%, 75% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: -2600; } } @media (prefers-reduced-motion: reduce){ .btw .lx-waveline{stroke-dashoffset: 0; animation: none;} } .btw .lx-mapband{position: relative; border-radius: var(--lx-r-md); overflow: hidden; border: 2px solid var(--lx-line);} .btw .lx-mapband .lx-map--tall{border: 0; border-radius: 0; block-size: clamp(20rem, 40vw, 27rem);} .btw .lx-mapband__chips{position: absolute; inset-block-start: 0.8rem; inset-inline-start: 0.8rem; z-index: 5; display: flex; gap: 0.5rem; flex-wrap: wrap;} .btw .lx-mapband__chips .lx-btn{padding-block: 0.45em; padding-inline: 0.8em; font-size: var(--lx-text-sm); display: inline-flex; gap: 0.4em; border-width: 2px;} .btw .lx-mapband__chips .lx-btn .lx-icon{inline-size: 1.05rem; block-size: 1.05rem; animation: none;} .btw .lx-mapband__chips .lx-btn.is-active{border-color: var(--lx-pink-700); color: var(--lx-pink-700);} .btw .lx-icon.lx-inview{animation: lx-wiggle 4.6s ease-in-out infinite; animation-delay: 1.4s;} .btw .lx-icon.lx-inview path:not(.ghost){animation: lx-drawin 0.9s var(--lx-ease) forwards, lx-lineloop 6s 2.4s ease-in-out infinite;} .btw .lx-icon.lx-inview path.ghost{animation: lx-drawin 0.9s 0.15s var(--lx-ease) forwards, lx-lineloop 6s 2.7s ease-in-out infinite;} @keyframes lx-lineloop{ 0%, 100% { stroke-dashoffset: 0; } 50% { stroke-dashoffset: 34; } } .btw .lx-doodle-underline.lx-inview path{animation: lx-draw 1.1s ease-out forwards, lx-lineloop 7s 3s ease-in-out infinite;} .btw .lx-doodle-arrow.lx-inview path{animation: lx-draw 1.1s ease-out forwards, lx-lineloop 5.5s 2.5s ease-in-out infinite;} .btw .lx-doodle-circle.lx-inview path{animation: lx-draw 1.1s ease-out forwards, lx-lineloop 8s 3.5s ease-in-out infinite;} .btw .lx-sticker.lx-inview{animation: lx-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, lx-stickerfloat 3.6s 1s ease-in-out infinite;} @keyframes lx-stickerfloat{ 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } } .btw .lx-stars{animation: lx-twinkle 2.8s ease-in-out infinite;} @keyframes lx-twinkle{ 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .btw .lx-marquee i{animation: lx-sunpulse 3.4s ease-in-out infinite;} .btw .lx-slidehint .lx-doodle-arrow{color: var(--lx-pink-700);} .btw .lx-tabbar .lx-icon path{stroke-dashoffset: 0; animation: none;} .btw .lx-tabbar a[aria-current="page"] .lx-icon, .btw .lx-tabbar .lx-tabbar__cta .lx-icon{animation: lx-bob 2.6s ease-in-out infinite;} @media (prefers-reduced-motion: reduce){ .btw .lx-icon.lx-inview, .btw .lx-icon.lx-inview path, .btw .lx-doodle-underline.lx-inview path, .btw .lx-doodle-arrow.lx-inview path, .btw .lx-doodle-circle.lx-inview path, .btw .lx-sticker.lx-inview, .btw .lx-stars, .btw .lx-marquee i, .btw .lx-tabbar .lx-icon{animation: none;} } .btw .lx-social{display: flex; gap: 0.6rem; margin-block-start: var(--lx-space-s);} .btw .lx-social a{display: grid; place-items: center; inline-size: 2.3rem; block-size: 2.3rem; border-radius: var(--lx-r-md); border: 1px solid var(--lx-navy-raised); color: var(--lx-text-inv); background: var(--lx-navy-raised); transition: background var(--lx-dur-fast) var(--lx-ease), color var(--lx-dur-fast) var(--lx-ease);} .btw .lx-social a:hover{background: var(--lx-pink-100); color: var(--lx-pink-700); border-color: var(--lx-pink-100);} .btw .lx-social svg{inline-size: 1.15rem; block-size: 1.15rem;} .btw .lx-footer__proof{display: grid; gap: var(--lx-space-s); border-block-start: 1px solid var(--lx-navy-raised); padding-block: var(--lx-space-m);} @media (min-width: 52rem){ .btw .lx-footer__proof{grid-template-columns: auto 1fr; align-items: center;} .btw .lx-footer__pay{justify-content: flex-end;} } .btw .lx-footer__awards{display: flex; align-items: center; gap: var(--lx-space-s); flex-wrap: wrap;} .btw .lx-footer__awards img{inline-size: 4.4rem; block-size: 4.4rem; border-radius: 0; background: none;} .btw .lx-footer__pay{display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;} .btw .lx-paychip{display: grid; place-items: center; background: #FFFFFF; border-radius: var(--lx-r-sm); block-size: 1.9rem; padding-inline: 0.5rem;} .btw .lx-paychip svg{block-size: 1rem; inline-size: auto;} .btw .lx-paychip--klarna{background: #94b8e0;} .btw .lx-nav__close-li{display: none;} @media (max-width: 52rem){ .btw .lx-tabbar{z-index: 72;} .btw .lx-nav__close-li{display: block; position: absolute; inset-block-start: 1rem; inset-inline-end: var(--lx-gutter); margin: 0;} .btw .lx-nav__close{display: grid; place-items: center; inline-size: 2.8rem; block-size: 2.8rem; border-radius: var(--lx-r-md); background: var(--lx-navy-raised); color: var(--lx-text-inv); cursor: pointer;} .btw .lx-nav__close svg{inline-size: 1.2rem; block-size: 1.2rem;} } @media (min-width: 52.01rem){ .btw .lx-nav__close-li{display: none !important;} } @media (max-width: 52rem){ .btw .lx-cornerribbon{position: absolute;} .btw body:has(.lx-nav__toggle:checked) .lx-cornerribbon{display: none;} .btw .lx-nav__links{padding: 4.2rem var(--lx-gutter) 7.5rem; overflow-y: auto;} .btw .lx-cards__grid{padding-block-start: 1.3rem;} .btw .lx-bfhero__panel .lx-label{color: var(--lx-bg) !important; font-weight: 700;} } .btw .lx-reviewbox__dots button{inline-size: 12px; block-size: 12px;} .btw, .btw{overflow-x: clip; max-inline-size: 100vw;} @media (max-width: 52rem){ .btw, .btw{overflow-x: hidden;} .btw .lx-marquee{inline-size: 100vw; margin-inline: calc(-1 * var(--lx-gutter));} } .btw{touch-action: pan-y;} .btw .lx-bmodal__panel, .btw .lx-map iframe, .btw .lx-bframe iframe{touch-action: auto;} .btw .lx-blob svg path{stroke-dasharray: 900; animation: lx-blobdraw 12s ease-in-out infinite;} @keyframes lx-blobdraw{ 0% { stroke-dashoffset: 900; } 45%, 65% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -900; } } .btw .lx-spin-sun{inline-size: clamp(3.2rem, 6vw, 5rem); block-size: auto; color: var(--lx-peach); animation: lx-sunspin 26s linear infinite;} @keyframes lx-sunspin{ to { rotate: 360deg; } } .btw .lx-h2doodle{display: block; inline-size: min(60%, 12rem); block-size: 0.45em; color: var(--lx-pink-500); margin-block-start: 0.15em;} .btw .lx-sechead:nth-of-type(even) .lx-h2doodle{color: var(--lx-sea-500);} .btw .lx-h2doodle path{stroke-dasharray: 620; stroke-dashoffset: 620;} .btw .lx-h2doodle.lx-inview path{animation: lx-draw 1s ease-out forwards, lx-lineloop 7s 2.8s ease-in-out infinite;} @media (prefers-reduced-motion: reduce){ .btw .lx-blob svg path, .btw .lx-spin-sun, .btw .lx-h2doodle path{animation: none; stroke-dashoffset: 0;} } .btw .lx-dark .lx-gbadge__sub{color: var(--lx-text-inv-soft);} .btw .lx-dark .lx-gbadge b, .btw .lx-dark .lx-gbadge .lx-stars{color: var(--lx-text-inv);} .btw .lx-countdown span{color: #c3d8f2;} .btw .lx-reviewbox__dots button{inline-size: 24px; block-size: 24px; background: none; border: 0; display: grid; place-items: center;} .btw .lx-reviewbox__dots button::before{content: ""; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--lx-line);} .btw .lx-reviewbox__dots button[aria-current="true"]::before{background: var(--lx-pink-500);} .btw html.lx-i18n-pending body{opacity: 0;} .btw .lx-artauthor--hero{margin-block-start: var(--lx-space-m); max-inline-size: 26rem; background: color-mix(in srgb, var(--lx-bg) 72%, transparent);} .btw .lx-artauthor--hero img{inline-size: 3.4rem;} .btw .lx-annotated--tight .lx-doodle-circle{inset: -0.2em -0.35em; inline-size: calc(100% + 0.7em); block-size: calc(100% + 0.4em);} .btw .lx-bframe{block-size: auto;} .btw .lx-bframe:has(iframe){block-size: min(78dvh, 56rem);} @media (max-width: 52rem){ .btw .lx-table th, .btw .lx-table td{white-space: nowrap; font-size: var(--lx-text-xs); padding: 0.5rem 0.6rem;} .btw .lx-table-wrap{position: relative;} .btw .lx-table-wrap::after{content: ""; position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 2.2rem; background: linear-gradient(270deg, var(--lx-bg), transparent); pointer-events: none;} .btw .lx-table-wrap::before{content: "→"; position: absolute; inset-block-start: -1.4rem; inset-inline-end: 0; font-family: var(--lx-font-marker); font-weight: 700; color: var(--lx-pink-700); font-size: 1.1rem;} } .btw .lx-availbar{background: var(--lx-bg);} .btw .lx-availbar b{color: var(--lx-ink);} .btw .lx-countdown b{color: var(--lx-text-inv);} .btw .lx-artlayout{display: grid; gap: var(--lx-space-l); padding-block: var(--lx-space-l); grid-template-columns: 1fr;} @media (min-width: 64rem){ .btw .lx-artlayout{grid-template-columns: minmax(0, 1fr) 21rem; align-items: start;} .btw .lx-artrail{position: sticky; inset-block-start: 5rem; display: grid; gap: var(--lx-space-s);} .btw .lx-artmain{max-inline-size: none;} .btw .lx-artmain > p, .btw .lx-artmain > ul{max-inline-size: 62ch;} } .btw .lx-artrail .lx-artfacts, .btw .lx-artrail .lx-arttoc{margin-block: 0;} .btw .lx-artrail .lx-artauthor{margin-block-start: 0;} @media (min-width: 64rem){ .btw .lx-faq{grid-template-columns: 1fr 1fr; align-items: start;} .btw .lx-faq details{break-inside: avoid;} } .btw .lx-artwrap:has(.lx-faq){max-inline-size: var(--lx-container);} .btw .lx-artlayout{padding-block: var(--lx-space-m) var(--lx-space-l);} .btw .lx-artmain > :first-child, .btw .lx-artmain > h2:first-child{margin-block-start: 0 !important;} .btw .lx-artbody h2:first-of-type{margin-block-start: 0;} .btw article .lx-hero{padding-block-end: var(--lx-space-m);} @media (min-width: 64rem){ .btw .lx-artmain{font-size: var(--lx-text-lg);} .btw .lx-artmain .lx-table-wrap, .btw .lx-artmain figure{max-inline-size: none;} } .btw .lx-herostage{position: relative;} .btw .lx-herostage .lx-hero__ci{position: relative; z-index: 1;} .btw .lx-herodevice{position: absolute; z-index: 3; inset-block-end: -1.5rem; inset-inline-start: -3.5rem; inline-size: clamp(9rem, 17vw, 14.5rem); block-size: auto; filter: drop-shadow(0 22px 20px color-mix(in srgb, var(--lx-navy) 22%, transparent)); pointer-events: none;} .btw .lx-whybadge{position: absolute; z-index: 4; inset-block-end: -2.25rem; inset-inline-end: -2.5rem; inline-size: clamp(8.5rem, 12vw, 10.5rem); aspect-ratio: 1; display: block; text-decoration: none; color: #171717; rotate: -6deg; transition: rotate .25s ease, scale .25s ease;} .btw .lx-whybadge:hover, .btw .lx-whybadge:focus-visible{rotate: -2deg; scale: 1.04;} .btw .lx-whybadge__disc{display: grid; align-content: center; justify-items: center; gap: 0.28rem; inline-size: 100%; block-size: 100%; border-radius: 50%; padding: 1.15rem 1.35rem; text-align: center; background: var(--lx-grad-sun); box-shadow: 0 14px 26px color-mix(in srgb, var(--lx-navy) 26%, transparent), inset 0 0 0 1px color-mix(in srgb, #171717 12%, transparent);} .btw .lx-whybadge__eyebrow{font-family: var(--lx-font-body); font-size: 0.6875rem; letter-spacing: .04em; opacity: .72;} .btw .lx-whybadge__text{font-family: var(--lx-font-display); font-weight: 700; font-size: clamp(0.78125rem, 0.95vw, 0.875rem); line-height: 1.22; text-wrap: balance;} .btw .lx-whybadge__hint{font-family: var(--lx-font-marker); font-size: 1rem; line-height: 1; opacity: .8;} .btw .lx-handcue{position: absolute; inset-block-end: -0.9rem; inset-inline-start: -0.9rem; inline-size: clamp(2.7rem, 3.5vw, 3.5rem); color: var(--lx-ink); scale: -1 1; rotate: 12deg; transform-origin: 70% 90%; animation: lx-tap 2.6s ease-in-out infinite; filter: drop-shadow(0 4px 6px color-mix(in srgb, var(--lx-navy) 26%, transparent));} @keyframes lx-tap{ 0%, 62%, 100% { translate: 0 0; } 72% { translate: -0.35rem -0.5rem; } 82% { translate: 0 0; } } @media (prefers-reduced-motion: reduce){ .btw .lx-handcue{animation: none;} .btw .lx-whybadge{transition: none;} } @media (max-width: 52rem){ .btw .lx-herodevice{inline-size: 9.25rem; inset-inline-start: -1.5rem; inset-block-end: -1.75rem;} .btw .lx-whybadge{inline-size: 7.5rem; inset-block-end: 1rem; inset-inline-end: 1rem;} .btw .lx-handcue{inline-size: 2.3rem; inset-block-end: -0.8rem; inset-inline-start: -0.6rem;} } .btw .lx-whymodal{position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: clamp(0.75rem, 3vw, 2rem); background: color-mix(in srgb, var(--lx-navy) 62%, transparent); backdrop-filter: blur(6px); overflow-y: auto; overscroll-behavior: contain;} .btw .lx-whymodal[hidden]{display: none;} .btw .lx-whymodal__panel{position: relative; inline-size: min(58rem, 100%); max-block-size: min(90dvh, 60rem); overflow-y: auto; background: var(--lx-bg); border-radius: var(--lx-r-md); padding: clamp(1.5rem, 3.5vw, 2.75rem); box-shadow: 0 30px 70px color-mix(in srgb, var(--lx-navy) 45%, transparent);} .btw .lx-whymodal__close{position: absolute; inset-block-start: 0.85rem; inset-inline-end: 0.85rem; inline-size: 2.5rem; block-size: 2.5rem; display: grid; place-items: center; border: 0; border-radius: var(--lx-r-sm); background: var(--lx-bg-alt); color: var(--lx-ink); cursor: pointer;} .btw .lx-whymodal__close svg{inline-size: 1.1rem; block-size: 1.1rem;} .btw .lx-whymodal .lx-label, .btw .lx-whymodal__h{padding-inline-end: 3.25rem;} .btw .lx-whymodal__h{margin-block: 0.25rem 0.6rem;} .btw .lx-whymodal .lx-lead{margin-block-end: var(--lx-space-m);} .btw .lx-whymodal__lead{font-size: var(--lx-text-lg); line-height: 1.5; color: var(--lx-ink-soft); margin-block: 0 var(--lx-space-s); max-inline-size: 46ch;} .btw .lx-whygrid{display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin-block-end: var(--lx-space-s);} .btw .lx-whycard{border-radius: var(--lx-r-md); padding: 0.95rem 1.05rem 1rem; background: var(--lx-sea-100);} .btw .lx-whycard--muted{background: var(--lx-bg-alt);} .btw .lx-whycard__nm{font-family: var(--lx-font-display); font-weight: 700; font-size: 0.8125rem; letter-spacing: .04em; color: var(--lx-sea-700); margin: 0.55rem 0 0.3rem;} .btw .lx-whycard--muted .lx-whycard__nm{color: var(--lx-ink-soft);} .btw .lx-whycard__cl{font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-lg); line-height: 1.25; margin: 0 0 0.35rem; text-wrap: balance;} .btw .lx-whycard__sub{font-family: var(--lx-font-marker); font-size: 1.0625rem; line-height: 1; color: var(--lx-ink-soft); margin: 0;} .btw .lx-whymodal__mid{font-family: var(--lx-font-marker); font-size: 1.5rem; line-height: 1; margin: 0 0 0.6rem;} .btw .lx-whylist{list-style: none; margin: 0 0 var(--lx-space-s); padding: 0; display: grid; gap: 0.4rem;} .btw .lx-whylist li{display: flex; align-items: center; gap: 0.85rem; padding: 0.6rem 0.85rem; border-radius: var(--lx-r-md); background: var(--lx-bg-alt);} .btw .lx-whylist li span{display: flex; flex-wrap: wrap; gap: 0.1rem 0.5rem; align-items: baseline; font-size: var(--lx-text-sm); color: var(--lx-ink-soft);} .btw .lx-whylist li b{font-size: var(--lx-text-base); color: var(--lx-ink);} .btw .lx-whylist__win{background: var(--lx-pink-100);} .btw .lx-whylist__win b{color: var(--lx-pink-700);} .btw .lx-sketch{inline-size: 2.75rem; block-size: 2.75rem; color: var(--lx-sea-700); flex: none;} .btw .lx-whycard--muted .lx-sketch{color: var(--lx-ink-soft);} .btw .lx-whylist .lx-sketch{inline-size: 2.1rem; block-size: 2.1rem; color: var(--lx-ink-soft);} .btw .lx-whylist__win .lx-sketch{color: var(--lx-pink-700);} .btw .lx-sketch path{stroke-dasharray: 1; stroke-dashoffset: 1;} .btw .lx-whymodal:not([hidden]) .lx-sketch path{animation: lx-draw .7s ease forwards;} @keyframes lx-draw{ to { stroke-dashoffset: 0; } } .btw .lx-whymodal:not([hidden]) .lx-whycard, .btw .lx-whymodal:not([hidden]) .lx-whylist li{animation: lx-rise .45s ease both;} .btw .lx-whymodal:not([hidden]) .lx-whycard:nth-child(1){animation-delay: .04s} .btw .lx-whymodal:not([hidden]) .lx-whycard:nth-child(2){animation-delay: .12s} .btw .lx-whymodal:not([hidden]) .lx-whycard:nth-child(3){animation-delay: .2s} .btw .lx-whymodal:not([hidden]) .lx-whylist li:nth-child(1){animation-delay: .26s} .btw .lx-whymodal:not([hidden]) .lx-whylist li:nth-child(2){animation-delay: .32s} .btw .lx-whymodal:not([hidden]) .lx-whylist li:nth-child(3){animation-delay: .38s} .btw .lx-whymodal:not([hidden]) .lx-whycard:nth-child(2) .lx-sketch path{animation-delay: .12s} .btw .lx-whymodal:not([hidden]) .lx-whycard:nth-child(3) .lx-sketch path{animation-delay: .2s} .btw .lx-whymodal:not([hidden]) .lx-whylist li:nth-child(2) .lx-sketch path{animation-delay: .32s} .btw .lx-whymodal:not([hidden]) .lx-whylist__win .lx-sketch path{animation-delay: .42s; animation-duration: .55s} @keyframes lx-rise{ from { opacity: 0; translate: 0 0.7rem; } to { opacity: 1; translate: 0 0; } } .btw .lx-whymodal:not([hidden]) .lx-whymodal__panel{animation: lx-pop .3s cubic-bezier(.2,.9,.3,1.2) both;} @keyframes lx-pop{ from { opacity: 0; scale: .96; } to { opacity: 1; scale: 1; } } @media (prefers-reduced-motion: reduce){ .btw .lx-whymodal:not([hidden]) .lx-sketch path, .btw .lx-whymodal:not([hidden]) .lx-whycard, .btw .lx-whymodal:not([hidden]) .lx-whylist li, .btw .lx-whymodal:not([hidden]) .lx-whymodal__panel{animation: none;} .btw .lx-sketch path{stroke-dashoffset: 0;} } .btw .lx-whymodal__ctas{display: flex; gap: 0.6rem; flex-wrap: wrap; margin-block-start: var(--lx-space-s);} @media (max-width: 40rem){ .btw .lx-whymodal__panel{padding: 1.35rem 1.15rem 1.5rem;} .btw .lx-whymodal .lx-label, .btw .lx-whymodal__h{padding-inline-end: 2.9rem;} .btw .lx-whymodal__lead{font-size: var(--lx-text-base);} .btw .lx-whycard{padding: 0.85rem 0.95rem 0.9rem;} .btw .lx-sketch{inline-size: 2.25rem; block-size: 2.25rem;} .btw .lx-whymodal__ctas .lx-btn{flex: 1 1 auto; justify-content: center;} } .btw .lx-checkbox{border-radius: var(--lx-r-md); padding: 1rem 1.1rem 1.1rem; background: var(--lx-bg-alt); margin-block-end: var(--lx-space-s);} .btw .lx-checkbox__head{display: flex; gap: 0.85rem; align-items: flex-start; margin: 0 0 0.7rem;} .btw .lx-checkbox__head span{display: grid; gap: 0.2rem; font-size: var(--lx-text-sm); color: var(--lx-ink-soft);} .btw .lx-checkbox__head b{font-size: var(--lx-text-base); color: var(--lx-ink);} .btw .lx-checkbox__head .lx-sketch{color: var(--lx-pink-700);} .btw .lx-checklist{list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem;} .btw .lx-checklist li{position: relative; padding-inline-start: 1.15rem; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); line-height: 1.5;} .btw .lx-checklist li::before{content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em; inline-size: 0.4rem; block-size: 0.4rem; border-radius: 50%; background: var(--lx-ink-soft); opacity: .45;} .btw .lx-checklist b{color: var(--lx-ink);} .btw .lx-checkbox__foot{margin: 0.75rem 0 0; font-family: var(--lx-font-marker); font-size: 1.0625rem; line-height: 1.35; color: var(--lx-ink);} .btw .lx-cenote{position: relative; isolation: isolate; display: grid; gap: var(--lx-space-m); align-items: start; border-radius: var(--lx-r-md); padding: clamp(1.5rem, 3.5vw, 2.5rem); overflow: hidden; background: var(--lx-bg-alt);} .btw .lx-cenote__bg{position: absolute; inset: 0; z-index: -2; pointer-events: none; background: url("../img/bg-gradient-ce.webp") 18% 68% / cover no-repeat; scale: 1.12;} .btw .lx-cenote__scrim{position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(103deg, color-mix(in srgb, var(--lx-bg) 86%, transparent) 0%, color-mix(in srgb, var(--lx-bg) 72%, transparent) 45%, color-mix(in srgb, var(--lx-bg) 52%, transparent) 100%);} @media (max-width: 58rem){ .btw .lx-cenote__scrim{background: linear-gradient(180deg, color-mix(in srgb, var(--lx-bg) 93%, transparent) 0%, color-mix(in srgb, var(--lx-bg) 88%, transparent) 55%, color-mix(in srgb, var(--lx-bg) 70%, transparent) 100%);} } @media (prefers-reduced-transparency: reduce){ .btw .lx-cenote__bg{display: none;} } @media (min-width: 58rem){ .btw .lx-cenote{grid-template-columns: 1fr 1.05fr; gap: clamp(1.5rem, 4vw, 3rem);} } .btw .lx-cenote h2{margin-block: 0.3rem 0.5rem;} .btw .lx-cenote .lx-lead{margin: 0;} .btw .lx-cenote__ctas{margin-block-start: var(--lx-space-s);} .btw .lx-cechecks{list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem;} .btw .lx-cechecks li{display: flex; gap: 0.9rem; align-items: flex-start;} .btw .lx-cechecks li span{display: grid; gap: 0.15rem; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); line-height: 1.5;} .btw .lx-cechecks li b{font-size: var(--lx-text-base); color: var(--lx-ink);} .btw .lx-cechecks .lx-sketch{color: var(--lx-sea-700); margin-block-start: 0.1rem;} .btw .lx-cechecks .lx-sketch path{stroke-dashoffset: 0;} .btw .lx-herotrust{display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem 0.9rem; margin-block-start: var(--lx-space-s);} .btw .lx-herotrust .lx-gbadge{flex: none;} .btw .lx-herotrust .lx-fine{margin: 0; flex: 1 1 16rem; min-inline-size: 0;} @media (max-width: 52rem){ .btw .lx-herotrust{gap: 0.5rem;} .btw .lx-herotrust .lx-fine{flex-basis: 100%;} } @media (max-width: 52rem){ .btw .lx-herostage{margin-inline: calc(50% - 50vw - 0.5rem); inline-size: calc(100vw + 1rem); max-inline-size: none;} .btw .lx-herostage .lx-hero__ci{border-radius: 0; rotate: 0deg; margin-block-start: var(--lx-space-s);} .btw .lx-herostage .lx-hero__ci img{inline-size: 100%;} .btw .lx-whybadge{inline-size: 9.5rem; inset-block-end: 1.25rem; inset-inline-end: 1.25rem;} .btw .lx-whybadge__disc{padding: 1.1rem 1.2rem;} .btw .lx-whybadge__text{font-size: 0.875rem;} .btw .lx-whybadge__eyebrow{font-size: 0.6875rem;} .btw .lx-handcue{inline-size: 2.6rem; inset-block-end: -0.9rem; inset-inline-start: -0.8rem;} .btw .lx-herodevice{inline-size: 9rem; inset-inline-start: 0.35rem; inset-block-end: -1.5rem;} } .btw .lx-hpgrid{display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));} .btw .lx-hpcard{border-radius: var(--lx-r-md); padding: 1.1rem 1.2rem 1.2rem; background: var(--lx-bg-alt); display: grid; gap: 0.15rem;} .btw .lx-hpcard__name{font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-lg); margin: 0 0 0.4rem;} .btw .lx-hpcard__spec{display: flex; align-items: baseline; gap: 0.45rem; margin: 0;} .btw .lx-hpcard__spec b{font-family: var(--lx-font-display); font-weight: 800; font-size: 1.375rem; line-height: 1.15; color: var(--lx-sea-700);} .btw .lx-hpcard__spec span{font-size: var(--lx-text-xs); color: var(--lx-ink-soft);} .btw .lx-hpcard__nm{font-family: var(--lx-font-marker); font-size: 1.0625rem; line-height: 1; color: var(--lx-ink-soft); margin: 0.35rem 0 0.3rem;} .btw .lx-hpcard__use{font-size: var(--lx-text-sm); color: var(--lx-ink-soft); line-height: 1.5; margin: 0;} .btw .lx-media-row{display: grid; gap: 0.75rem; margin-block-start: var(--lx-space-m); grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));} .btw .lx-media-row--three{grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));} .btw .lx-media-row .lx-photo{margin: 0;} .btw a.lx-btn.lx-btn--primary, .btw button.lx-btn.lx-btn--primary, .btw .lx-nav__links a.lx-btn--primary, .btw .lx-dark .lx-membercard a.lx-btn--primary{color: var(--lx-text-inv);} .btw a.lx-btn.lx-btn--primary:hover, .btw button.lx-btn.lx-btn--primary:hover{color: var(--lx-text-inv); background: var(--lx-cta-hover);} .btw a.lx-btn.lx-btn--sea, .btw a.lx-btn.lx-btn--wa, .btw a.lx-btn.lx-btn--navy{color: var(--lx-text-inv);} .btw a.lx-btn.lx-btn--shell, .btw .lx-dark a.lx-btn.lx-btn--shell{color: var(--lx-ink);} .btw a.lx-btn.lx-btn--ghost{color: var(--lx-ink);} .btw .lx-dark a.lx-btn.lx-btn--ghost{color: var(--lx-ink);} @media (max-width: 52rem){ .btw .lx-swipe{display: flex; flex-wrap: nowrap; gap: var(--lx-space-s); overflow-x: auto; overscroll-behavior-inline: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--lx-gutter); margin-inline: calc(-1 * var(--lx-gutter)); padding: 0.25rem var(--lx-gutter) var(--lx-space-s); scrollbar-width: none;} .btw .lx-swipe::-webkit-scrollbar{display: none;} .btw .lx-swipe > *{flex: 0 0 84%; max-inline-size: 84%; scroll-snap-align: center; margin: 0;} .btw .lx-usp-row.lx-swipe > .lx-usp, .btw .lx-cechecks.lx-swipe > li{background: var(--lx-bg); border-radius: var(--lx-r-md); padding: 1rem 1.1rem 1.1rem; box-shadow: inset 0 0 0 1px var(--lx-line);} .btw .lx-cechecks.lx-swipe > li{display: grid; gap: 0.5rem; align-content: start;} .btw .lx-swipe::after{content: ""; flex: 0 0 0.25rem;} } @media (max-width: 52rem){ .btw .lx-table--cards, .btw .lx-table--cards thead, .btw .lx-table--cards tbody, .btw .lx-table--cards tr, .btw .lx-table--cards th, .btw .lx-table--cards td{display: block;} .btw .lx-table--cards thead{display: none;} .btw .lx-table--cards tr{background: var(--lx-bg); border-radius: var(--lx-r-md); box-shadow: inset 0 0 0 1px var(--lx-line); padding: 0.9rem 1rem; margin-block-end: 0.6rem;} .btw .lx-table--cards td:first-child, .btw .lx-table--cards th:first-child{font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-base); color: var(--lx-ink); padding: 0 0 0.5rem; border: 0;} .btw .lx-table--cards td:not(:first-child){display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.35rem 0; border: 0; font-size: var(--lx-text-sm); color: var(--lx-ink-soft);} .btw .lx-table--cards td[data-label]::before{content: attr(data-label); color: var(--lx-ink-soft); font-size: var(--lx-text-xs);} .btw .lx-table--cards td.is-featured{background: none; color: var(--lx-ink); font-weight: 600;} .btw .lx-table--cards .lx-table-wrap{overflow: visible;} .btw .lx-table:not(.lx-table--cards) th:first-child, .btw .lx-table:not(.lx-table--cards) td:first-child{position: sticky; inset-inline-start: 0; z-index: 2; background: var(--lx-bg); box-shadow: 1px 0 0 var(--lx-line);} .btw .lx-section--alt .lx-table:not(.lx-table--cards) th:first-child, .btw .lx-section--alt .lx-table:not(.lx-table--cards) td:first-child{background: var(--lx-bg-alt);} } .btw .lx-finder{position: relative; isolation: isolate; overflow: hidden; background: var(--lx-bg-alt); border-radius: var(--lx-r-md); padding: clamp(1.1rem, 3vw, 1.75rem);} .btw .lx-finder::before{content: ""; position: absolute; inset: 0; z-index: -2; background: url("../img/bg-gradient-finder.webp") left top / cover no-repeat;} .btw .lx-finder::after{content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--lx-bg-alt) 70%, transparent) 0%, color-mix(in srgb, var(--lx-bg-alt) 88%, transparent) 100%);} .btw .lx-finder__label{display: block; font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-h3); letter-spacing: -0.02em; margin-block-end: 0.7rem;} .btw .lx-finder__field{position: relative;} .btw .lx-finder__input{inline-size: 100%; min-block-size: 3.25rem; font-size: var(--lx-text-lg); padding-inline: 1rem 2.75rem; background: var(--lx-bg); border: 1.5px solid var(--lx-ink-soft); border-radius: var(--lx-r-md);} .btw .lx-finder__input:focus-visible{outline: 3px solid var(--lx-cta-ring); outline-offset: 2px; border-color: var(--lx-ink);} .btw .lx-finder__input::-webkit-search-cancel-button{display: none;} .btw .lx-finder__clear{position: absolute; inset-block: 0; inset-inline-end: 0.4rem; inline-size: 2.25rem; background: none; border: 0; font-size: 1.6rem; line-height: 1; color: var(--lx-ink-soft); cursor: pointer;} .btw .lx-finder .lx-fine{margin-block: 0.5rem 0.75rem;} .btw .lx-finder__chips{display: flex; flex-wrap: wrap; gap: 0.4rem;} .btw .lx-finder__chip{font-family: var(--lx-font-body); font-size: var(--lx-text-sm); background: var(--lx-bg); color: var(--lx-ink); border: 1px solid var(--lx-line); border-radius: var(--lx-r-sm); padding: 0.5em 0.85em; cursor: pointer; min-block-size: 2.5rem;} .btw .lx-finder__chip:hover{border-color: var(--lx-ink); background: #FFFFFF;} .btw .lx-finder__chip b{color: var(--lx-cta);} .btw .lx-finder__empty{font-size: var(--lx-text-sm); color: var(--lx-ink-soft); margin: 0.75rem 0 0.5rem;} .btw .lx-zprice{margin-block-start: var(--lx-space-s); background: var(--lx-bg); border-radius: var(--lx-r-md); padding: 1.1rem 1.15rem 1.25rem;} .btw .lx-zprice__head{display: flex; align-items: baseline; gap: 0.75rem; flex-wrap: wrap; margin-block-end: 0.75rem;} .btw .lx-zprice__head h3{font-size: var(--lx-text-h3); margin: 0;} .btw .lx-zprice__head p{margin: 0; font-size: var(--lx-text-sm); color: var(--lx-ink-soft);} .btw .lx-zprice__grid{display: grid; gap: 0.35rem;} .btw .lx-zprice__row{display: grid; grid-template-columns: 1fr auto auto; gap: 0.4rem 0.9rem; align-items: baseline; padding: 0.5rem 0.6rem; border-radius: var(--lx-r-sm); background: var(--lx-bg-alt);} .btw .lx-zprice__row.is-best{background: var(--lx-pink-100);} .btw .lx-zprice__label{font-size: var(--lx-text-sm); color: var(--lx-ink);} .btw .lx-zprice__label i{font-style: normal; color: var(--lx-cta); font-size: var(--lx-text-xs); white-space: nowrap;} .btw .lx-zprice__label{white-space: nowrap;} .btw .lx-zprice__val{font-family: var(--lx-font-display); font-weight: 800; font-size: 1.25rem; white-space: nowrap;} .btw .lx-zprice__val small{font-weight: 500; font-size: 0.75rem; color: var(--lx-ink-soft); margin-inline-start: 0.15rem;} .btw .lx-zprice__sum{font-size: var(--lx-text-xs); color: var(--lx-ink-soft); white-space: nowrap; text-align: end;} .btw .lx-zprice__cta{display: flex; gap: 0.5rem; flex-wrap: wrap; margin-block: 0.9rem 0.5rem;} @media (max-width: 52rem){ .btw .lx-finder{padding: 1rem;} .btw .lx-finder__label{font-size: var(--lx-text-lg); margin-block-end: 0.5rem;} .btw .lx-finder__input{min-block-size: 3rem; font-size: var(--lx-text-base);} .btw .lx-finder .lx-fine{margin-block: 0.4rem 0.5rem; font-size: 0.75rem;} .btw .lx-zprice{margin-block-start: 0.6rem; padding: 0.85rem 0.9rem 0.95rem;} .btw .lx-zprice__head{margin-block-end: 0.5rem; gap: 0.5rem;} .btw .lx-zprice__head h3{font-size: 1.375rem;} .btw .lx-zprice__grid{gap: 0.25rem;} .btw .lx-zprice__row{padding: 0.4rem 0.55rem; grid-template-columns: 1fr auto auto;} .btw .lx-zprice__val{font-size: 1.125rem;} .btw .lx-zprice__sum{font-size: 0.6875rem;} .btw .lx-zprice__cta{margin-block: 0.7rem 0.35rem;} .btw .lx-zprice__cta .lx-btn{flex: 1 1 100%; min-block-size: 2.75rem;} .btw .lx-zprice .lx-fine{font-size: 0.6875rem;} } .btw, .btw{overflow-x: hidden;} @supports (overflow: clip){ .btw, .btw{overflow-x: clip;} } .btw .lx-artmain, .btw .lx-artrail{min-inline-size: 0;} .btw .lx-table-wrap{max-inline-size: 100%; overflow-x: auto;} .btw .lx-combos{margin-block-start: var(--lx-space-m);} .btw .lx-combos__head{margin-block-end: var(--lx-space-s);} .btw .lx-combos__head h3{font-family: var(--lx-font-display); font-weight: 800; font-size: var(--lx-text-h3); letter-spacing: -0.02em; margin-block: 0.2rem 0.4rem;} .btw .lx-combos__head .lx-lead{max-inline-size: 62ch;} @media (min-width: 52.0625rem){ .btw .lx-combos__grid{display: grid; gap: var(--lx-space-s); grid-template-columns: repeat(2, minmax(0, 1fr));} } @media (min-width: 74rem){ .btw .lx-combos__grid{grid-template-columns: repeat(4, minmax(0, 1fr));} } .btw .lx-combo{display: flex; flex-direction: column; gap: 0.35rem; background: var(--lx-bg); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); padding: var(--lx-space-s); transition: border-color 0.25s var(--lx-ease), background 0.25s var(--lx-ease);} @media (max-width: 52rem){ .btw .lx-combo{flex: 0 0 min(19rem, 82vw); scroll-snap-align: start;} } .btw .lx-combo h4{font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-lg); letter-spacing: -0.01em; line-height: 1.2;} .btw .lx-combo .lx-billet{align-self: flex-start;} .btw .lx-combo:not(:has(.lx-billet))::before{content: ""; display: block; block-size: 1.9rem;} .btw .lx-combo__meta{font-size: var(--lx-text-sm); color: var(--lx-ink-soft);} .btw .lx-combo__best{margin-block-start: 0.2rem;} .btw .lx-combo__best b{font-family: var(--lx-font-display); font-weight: 800; font-size: 1.75rem; letter-spacing: -0.02em;} .btw .lx-combo__best small{font-size: var(--lx-text-sm); color: var(--lx-ink-soft); margin-inline-start: 0.3rem;} .btw .lx-combo__steps{list-style: none; padding: 0; margin-block: 0.4rem; display: grid; gap: 0.2rem;} .btw .lx-combo__steps li{display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; font-size: var(--lx-text-sm); padding-block: 0.28rem; border-block-end: 1px solid var(--lx-line);} .btw .lx-combo__steps li:last-child{border-block-end: 0;} .btw .lx-combo__steps li i{font-style: normal; color: var(--lx-ink-soft); font-size: var(--lx-text-xs);} .btw .lx-combo__steps li b{font-weight: 600; white-space: nowrap;} .btw .lx-combo__steps li.is-best b{font-weight: 800;} .btw .lx-combo__steps .lx-no{color: var(--lx-ink-soft); font-weight: 400;} .btw .lx-combo .lx-btn{margin-block-start: auto;} .btw .lx-combo.is-match{border-color: var(--lx-ink); background: var(--lx-bg-alt);} .btw .lx-combo__match{font-family: var(--lx-font-marker); font-weight: 700; font-size: var(--lx-text-sm); color: var(--lx-cta);} .btw .lx-zprice__hint{font-size: var(--lx-text-sm); color: var(--lx-ink-soft); margin-block-start: 0.35rem; line-height: 1.35;} .btw .lx-zprice__combo{margin-block-start: 0.9rem; padding: 0.85rem 0.9rem; background: var(--lx-bg-alt); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); display: grid; gap: 0.3rem;} .btw .lx-zprice__combo-q{font-family: var(--lx-font-marker); font-weight: 700; font-size: 1.15rem; color: var(--lx-cta); line-height: 1.1;} .btw .lx-zprice__combo-t{font-size: var(--lx-text-sm); color: var(--lx-ink-soft);} .btw .lx-zprice__combo-p{display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; margin-block-start: 0.1rem;} .btw .lx-zprice__combo-p b{font-family: var(--lx-font-display); font-weight: 700; font-size: var(--lx-text-lg); letter-spacing: -0.01em;} .btw .lx-zprice__combo-p span{font-size: var(--lx-text-sm); color: var(--lx-ink-soft);} .btw .lx-zprice__combo-s{font-size: var(--lx-text-sm); font-weight: 600;} .btw .lx-zprice__combo .lx-btn{margin-block-start: 0.35rem; min-block-size: 2.75rem;} .btw .lx-combo.is-flash{border-color: var(--lx-ink); background: var(--lx-bg-alt);} @media (prefers-reduced-motion: no-preference){ .btw .lx-combo.is-flash{animation: lx-comboflash 1.4s var(--lx-ease);} @keyframes lx-comboflash{ 0%, 100% { box-shadow: none; } 25%, 60% { box-shadow: 0 0 0 3px var(--lx-line); } } } .btw .lx-zprice__cols{display: grid; grid-template-columns: 1fr auto auto; gap: 0.5rem; padding: 0 0.7rem 0.15rem; font-size: var(--lx-text-xs); color: var(--lx-ink-soft);} .btw .lx-zprice__cols span:nth-child(2){inline-size: 5.5rem; text-align: end;} .btw .lx-zprice__cols span:nth-child(3){inline-size: 5rem; text-align: end;} .btw .lx-zprice__val, .btw .lx-zprice__sum{text-align: end; font-variant-numeric: tabular-nums;} .btw .lx-zprice__val{inline-size: 5.5rem;} .btw .lx-zprice__sum{inline-size: 5rem; font-size: var(--lx-text-sm);} @media (min-width: 62rem){ .btw .lx-zprice{display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); grid-template-areas: "head head" "main side" "fine fine"; column-gap: var(--lx-space-s);} .btw .lx-zprice__head{grid-area: head;} .btw .lx-zprice__main{grid-area: main;} .btw .lx-zprice__combo{grid-area: side; margin-block-start: 0; align-self: stretch;} .btw .lx-zprice > .lx-fine{grid-area: fine; margin-block-start: 0.5rem;} } @media (max-width: 30rem){ .btw .lx-zprice__cols span:nth-child(2), .btw .lx-zprice__val{inline-size: 4.6rem;} .btw .lx-zprice__cols span:nth-child(3), .btw .lx-zprice__sum{inline-size: 4.2rem;} } /* ============================================================ Eigene Bauteile: Aktions-Stoerer (/preise) + Landingpage ============================================================ */ /* ---- Stoerer-Container auf /preise ---------------------- */ .btw-promo { position: relative; margin: 48px 0 8px; padding: clamp(26px, 3.4vw, 40px); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-grad-hero); overflow: clip; } .btw-promo__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.85; } .btw-promo__bg svg { inline-size: 100%; block-size: 100%; } .btw-promo__inner { position: relative; z-index: 1; display: grid; gap: clamp(24px, 3vw, 40px); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: start; } @media (max-width: 60rem) { .btw-promo__inner { grid-template-columns: minmax(0, 1fr); } } .btw-promo__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: var(--lx-text-sm); font-weight: 600; color: var(--lx-pink-700); } .btw-promo__eyebrow .lx-icon { inline-size: 1.6rem; block-size: 1.6rem; } .btw-promo h2 { margin: 0 0 12px; font-size: var(--lx-text-h2); letter-spacing: var(--lx-track-h2); line-height: var(--lx-leading-h2); color: var(--lx-ink); } .btw-promo h2 .btw-mark { position: relative; white-space: nowrap; color: var(--lx-pink-700); } .btw-promo h2 .btw-mark .lx-doodle-circle { color: var(--lx-sea-500); } .btw-promo__lead { margin: 0 0 18px; max-inline-size: 46ch; font-size: var(--lx-text-lg); color: var(--lx-ink-soft); } /* Drei Punkte mit handgezeichneten Icons — Icons stehen frei, nie in Kaesten */ .btw-promo__points { display: grid; gap: 14px; margin: 0 0 22px; padding: 0; list-style: none; } .btw-promo__points li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 12px; align-items: start; } .btw-promo__points b { display: block; font-family: var(--lx-font-display); font-size: var(--lx-text-base); color: var(--lx-ink); } .btw-promo__points span { display: block; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); line-height: 1.5; } .btw-promo__note { display: block; margin-top: 14px; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); } .btw-promo__hand { font-family: var(--lx-font-marker); font-size: 1.35rem; color: var(--lx-pink-700); line-height: 1.2; } /* ---- Seitenkarte: Countdown + Verfuegbarkeit ------------- */ .btw-card { display: grid; gap: 16px; padding: clamp(18px, 2vw, 24px); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); } .btw-card__head { margin: 0; font-family: var(--lx-font-display); font-size: var(--lx-text-base); color: var(--lx-ink); } .btw-card__sub { margin: 2px 0 0; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); } .btw-card .lx-countdown { justify-content: space-between; } .btw-card .lx-countdown div { flex: 1 1 0; } .btw-avail { display: grid; gap: 8px; } .btw-avail__label { display: flex; justify-content: space-between; gap: 12px; font-size: var(--lx-text-sm); color: var(--lx-ink-soft); } .btw-avail__label b { color: var(--lx-pink-700); } .btw-avail__track { block-size: 8px; border-radius: 4px; background: var(--lx-bg-alt); overflow: hidden; } .btw-avail__fill { display: block; block-size: 100%; inline-size: 0; border-radius: 4px; background: var(--lx-grad-cta); transition: inline-size 0.9s var(--lx-ease); } .btw-avail__hint { font-size: var(--lx-text-xs); color: var(--lx-ink-soft); } /* Countdown-Zellen etwas ruhiger als bei LaserX */ .btw .lx-countdown div { border-radius: var(--lx-r-sm); padding: 0.5rem 0.4rem; } /* ---- Landingpage-Spezifisches ---------------------------- */ .btw-page { background: var(--lx-bg); } /* Signature-Zonen-Raster */ .btw-zones { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr)); padding: 0; margin: 0; list-style: none; } .btw-zones li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); font-family: var(--lx-font-display); font-size: var(--lx-text-sm); color: var(--lx-ink); } .btw-zones .lx-icon { inline-size: 2rem; block-size: 2rem; } /* Drei-Schritte-Ablauf */ .btw-steps { display: grid; gap: clamp(20px, 2.6vw, 32px); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); padding: 0; margin: 0; list-style: none; } .btw-step__num { font-family: var(--lx-font-marker); font-size: 2.2rem; line-height: 1; color: var(--lx-pink-500); } .btw-step h3 { margin: 8px 0 6px; font-size: var(--lx-text-h3); color: var(--lx-ink); } .btw-step p { margin: 0; color: var(--lx-ink-soft); } /* Platzhalter-Bilder erkennbar, aber nicht stoerend */ .btw-figure { margin: 0; } .btw-figure img { inline-size: 100%; border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); } .btw-figure figcaption { margin-top: 8px; font-size: var(--lx-text-xs); color: var(--lx-ink-soft); } /* ---- Bewegung aus, wenn der Nutzer das will -------------- */ @media (prefers-reduced-motion: reduce) { .btw *, .btw *::before, .btw *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .btw .lx-icon path, .btw .lx-doodle-underline path, .btw .lx-doodle-circle path, .btw .lx-doodle-arrow path { stroke-dashoffset: 0 !important; animation: none !important; } } /* Pfeil-Icons in Buttons an die Schriftgroesse binden (LaserX setzt das sonst pro Bauteil; hier zentral, damit inline-SVGs nicht ausufern). */ .btw .lx-btn svg { inline-size: 1.05em; block-size: 1.05em; flex: none; } .btw .lx-btn { gap: 0.6em; } /* Auf breiten Viewports die Seitenkarte vertikal mittig setzen, sonst bleibt rechts unten eine grosse Leerflaeche stehen. */ @media (min-width: 60.0625rem) { .btw-promo__inner > .btw-card { align-self: center; } } /* Der Marker-Kreis ist absolut positioniert und braucht in JEDER Ueberschrift einen positionierten Anker, nicht nur im Stoerer. Ohne das entkommt er bis zur naechsten positionierten Sektion. */ .btw .btw-mark { position: relative; display: inline-block; white-space: nowrap; color: var(--lx-pink-700); } .btw .btw-mark .lx-doodle-circle { color: var(--lx-sea-500); } /* Checkliste mit gezeichneten Haken. Eigenes Bauteil statt lx-checklist, damit die Listenpunkte aus style.css nicht durchschlagen. */ .btw .btw-checks { list-style: none; margin: var(--lx-space-s) 0 0; padding: 0; display: grid; gap: 0.7rem; } .btw .btw-checks li { display: grid; grid-template-columns: 1.7rem minmax(0, 1fr); gap: 0.7rem; align-items: start; color: var(--lx-ink-soft); } .btw .btw-checks li::before { content: none; } .btw .btw-checks .lx-icon { inline-size: 1.7rem; block-size: 1.7rem; color: var(--lx-sea-500); margin-block-start: 0.1em; } /* Spalten oben buendig starten, sonst rutscht die Textspalte tief nach unten, wenn die Nachbarspalte hoeher ist. */ .btw .lx-grid-2 { align-items: start; } /* Zwei Infoboxen nebeneinander auf voller Sektionsbreite. lx-infogrid innerhalb einer Grid-Spalte wird sonst so schmal, dass der Text wortweise umbricht. */ .btw .btw-infoduo { display: grid; gap: var(--lx-space-s); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-block-start: var(--lx-space-m); } .btw .btw-infoduo .lx-infobox__head { align-items: center; } /* Der Preis-Stoerer im Hero. LaserX setzt ihn auf einen farbigen Hero-Wash, auf unserem hellen Blau braucht er eine eigene Flaeche plus Kante, sonst verschwindet er. Der Kleintext bekommt eine eigene Zeile mit normaler Zeilenhoehe, sonst reisst ihn die 4rem-Zeilenbox des Preises auseinander. */ .btw .lx-zprice { display: block; max-inline-size: 26rem; padding: 1.15rem 1.3rem 1.25rem; background: var(--lx-pink-100); border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); } .btw .lx-zprice .lx-pricetag { display: block; } .btw .lx-zprice .lx-pricetag::before { -webkit-text-stroke-color: var(--lx-pink-100); } .btw .lx-zprice .lx-pricetag small { display: block; margin-block-start: 0.35rem; font-size: var(--lx-text-sm); line-height: 1.4; color: var(--lx-ink-soft); } .btw .lx-zprice .lx-zprice__was { display: block; margin-block-start: 0.5rem; } .btw .lx-zprice .lx-sticker { inset-block-start: -0.95rem; inset-inline-end: -0.7rem; } /* Hero-Foto vertikal mittig, sonst steht rechts unten eine grosse Leerflaeche, weil die Textspalte mit Countdown und CTAs deutlich hoeher baut. */ @media (min-width: 52rem) { .btw .lx-hero .lx-grid-2 > .lx-hero__img { align-self: center; } } /* Die Seitenkarte traegt einen Sticker, der ueber die Kante ragt. */ .btw-card { position: relative; } .btw-card > .lx-sticker { inset-block-start: -0.95rem; inset-inline-end: -0.6rem; } /* Sticker: weisse Schrift auf kraeftigem Blau (7,1:1) statt dunkler Schrift auf hellem Blau, und ueber allem liegend. */ .btw .lx-sticker { background: var(--lx-pink-700); color: #fff; z-index: 3; } /* Badge auf dem Hero-Foto. Frueher ragte es ueber die Kante und wurde vom overflow:hidden der Fotobox abgeschnitten. Jetzt liegt es vollstaendig auf dem Bild, oben links auf der hellen Himmelsflaeche. */ .btw .lx-hero__img .lx-sticker--onphoto { inset-block-start: 1rem; inset-inline-start: 1rem; inset-inline-end: auto; max-inline-size: min(80%, 16rem); rotate: -3deg; white-space: normal; line-height: 1.15; font-size: 1.15rem; padding: 0.35em 0.7em; box-shadow: 0 6px 18px color-mix(in srgb, var(--lx-navy) 22%, transparent); } @media (max-width: 30rem) { .btw .lx-hero__img .lx-sticker--onphoto { font-size: 1rem; max-inline-size: 85%; } } /* ============================================================ Durchgehender Seiten-Hintergrund Ein einziger weicher Blauverlauf ueber die ganze Seite. Keine Sektionsflaechen, keine Kanten, keine Naht bis zum Footer. ============================================================ */ .btw-body { position: relative; /* Der Verlauf sitzt am Body, nicht am Main: so laeuft er hinter der Navigation durch und es kann zwischen Main und Footer keine weisse Fuge entstehen. */ background: radial-gradient(120% 26% at 12% 3%, #e6efff 0%, rgba(230,239,255,0) 62%), radial-gradient(100% 22% at 88% 14%, #dbe8fb 0%, rgba(219,232,251,0) 64%), radial-gradient(130% 24% at 18% 34%, #eef4ff 0%, rgba(238,244,255,0) 60%), radial-gradient(110% 22% at 82% 56%, #dbe8fb 0%, rgba(219,232,251,0) 62%), radial-gradient(140% 26% at 38% 80%, #d3e2fa 0%, rgba(211,226,250,0) 64%), linear-gradient(180deg, #f8fbff 0%, #f4f8ff 26%, #eef4ff 52%, #e4eefc 76%, #d8e6fb 100%); background-attachment: scroll; } /* Navigation traegt auf dieser Seite keine eigene Flaeche mehr, der Seitenverlauf scheint durch. Die Weichzeichnung bleibt, damit die Beschriftung auch ueber Fotos lesbar ist. */ .btw-body .nav { background: rgba(248, 251, 255, 0.42); border-bottom-color: rgba(0, 102, 204, 0.06); } /* Kein weisser Spalt ueber dem Footer. */ .btw-body .footer { margin-top: 0; } /* Alle Sektions-Hintergruende abschalten, damit nirgends eine Kante steht. */ .btw .lx-section, .btw .lx-section--alt, .btw .lx-section--petal, .btw .lx-section--foam, .btw .lx-hero { background: none; } .btw-page { position: relative; isolation: isolate; background: none; } /* Das leichte Wabern: zwei sehr weiche Blaufelder, die extrem langsam wandern. Bewusst knapp unter der Wahrnehmungsschwelle, damit es lebt, ohne als Animation aufzufallen. */ .btw-body::before { content: ""; position: absolute; inset: -6% 0; z-index: -1; pointer-events: none; background: radial-gradient(58% 34% at 26% 22%, rgba(0, 102, 204, 0.075), transparent 70%), radial-gradient(52% 30% at 74% 58%, rgba(0, 102, 204, 0.065), transparent 70%), radial-gradient(64% 32% at 44% 88%, rgba(0, 102, 204, 0.055), transparent 72%); animation: btw-wabern 42s ease-in-out infinite alternate; will-change: transform; } @keyframes btw-wabern { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(0, -1.6%, 0) scale(1.05); } } @media (prefers-reduced-motion: reduce) { .btw::before, .btw-body::before { animation: none !important; } } /* ============================================================ Zonenauswahl als Karten mit Zonen-Foto und Preis-Streichung ============================================================ */ .btw .btw-zones { display: grid; gap: clamp(10px, 1.4vw, 18px); /* Feste Spaltenzahl statt auto-fit: auf dem Telefon zwei Karten nebeneinander, sonst wird die Sektion neun Karten lang. */ grid-template-columns: repeat(2, minmax(0, 1fr)); margin: var(--lx-space-m) 0 0; padding: 0; list-style: none; } @media (min-width: 40rem) { .btw .btw-zones { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 64rem) { .btw .btw-zones { grid-template-columns: repeat(5, minmax(0, 1fr)); } } .btw .btw-zone { display: block; padding: 0; overflow: hidden; border: 1px solid var(--lx-line); border-radius: var(--lx-r-md); background: var(--lx-bg); } .btw .btw-zone__img { margin: 0; } .btw .btw-zone__img img { display: block; inline-size: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; } .btw .btw-zone__body { display: grid; gap: 2px; padding: 12px 14px 14px; } .btw .btw-zone__body b { font-family: var(--lx-font-display); font-size: var(--lx-text-base); color: var(--lx-ink); } .btw .btw-zone__price { display: flex; align-items: baseline; gap: 0.5rem; } .btw .btw-zone__price s { font-size: var(--lx-text-sm); color: var(--lx-ink-soft); } .btw .btw-zone__price em { font-family: var(--lx-font-display); font-style: normal; font-weight: 800; font-size: 1.35rem; line-height: 1; color: var(--lx-pink-700); } .btw .btw-zone__hand { font-family: var(--lx-font-marker); font-weight: 700; font-size: 1.05rem; line-height: 1.2; color: var(--lx-sea-500); rotate: -1.5deg; } /* KI-Kennzeichnung: nur helle Schrift, kein Badge-Hintergrund. ai-label.js injiziert seine Regeln nach dieser Datei, deshalb !important. */ .btw .lzai-tag { background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; padding: 0 !important; border-radius: 0 !important; color: rgba(255, 255, 255, 0.92) !important; font-weight: 500 !important; letter-spacing: 0.02em !important; } /* ============================================================ Swiper: greifbare Karten-Reihen ============================================================ */ .btw .btw-swipe { position: relative; } .btw .btw-swipe__track { display: flex; gap: clamp(10px, 1.4vw, 18px); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; margin: var(--lx-space-m) 0 0; /* Kein Randabfall: die Reihe beginnt links exakt dort, wo auch Ueberschrift und Fliesstext beginnen. Oben und unten etwas Luft, damit Kanten und Schatten nicht abgeschnitten werden. */ padding: 2px 0 6px; list-style: none; } .btw .btw-swipe__track::-webkit-scrollbar { display: none; } .btw .btw-swipe__track > * { flex: 0 0 auto; scroll-snap-align: start; } .btw .btw-swipe.is-dragging .btw-swipe__track { cursor: grabbing; scroll-snap-type: none; user-select: none; } .btw .btw-swipe__track img { -webkit-user-drag: none; user-select: none; } /* Gezeichneter Hinweis, dass man ziehen kann. Verschwindet, sobald nichts mehr zu wischen ist oder das Ende erreicht wurde. */ .btw .btw-swipe__hint { display: none; align-items: center; gap: 0.5rem; margin: 0.6rem 0 0; font-family: var(--lx-font-marker); font-weight: 700; font-size: 1.1rem; color: var(--lx-pink-700); pointer-events: none; } .btw .btw-swipe.is-scrollable .btw-swipe__hint { display: flex; } .btw .btw-swipe.is-end .btw-swipe__hint { opacity: 0; transition: opacity .3s ease; } .btw .btw-swipe__hint .lx-doodle-arrow { inline-size: 2.1rem; block-size: 1.7rem; color: var(--lx-sea-500); flex: none; } .btw .btw-swipe__hint .btw-swipe__arrow--l { scale: -1 1; } /* Kartenbreiten im Swiper */ .btw .btw-swipe .btw-zone { inline-size: clamp(9.5rem, 42vw, 13.5rem); } .btw .btw-swipe .lx-infobox { inline-size: min(80vw, 22rem); } .btw .btw-swipe .btw-step { inline-size: min(78vw, 20rem); } /* Nur-Mobil-Variante: ab 52rem wieder ein normales Raster. */ @media (min-width: 52rem) { .btw .btw-swipe--mobile .btw-swipe__track { display: grid; grid-template-columns: repeat(var(--btw-cols, 2), minmax(0, 1fr)); gap: clamp(20px, 2.6vw, 32px); overflow: visible; cursor: auto; margin-inline: 0; padding-inline: 0; } .btw .btw-swipe--mobile .btw-swipe__track > * { inline-size: auto; } .btw .btw-swipe--mobile .btw-swipe__hint { display: none !important; } } /* ============================================================ Ausklappbare Textblöcke (nur Telefon) ============================================================ */ .btw .btw-more__btn { display: none; } @media (max-width: 52rem) { .btw .btw-more { --btw-more-h: 5.6em; } .btw .btw-more__body { max-block-size: var(--btw-more-h); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%); mask-image: linear-gradient(180deg, #000 58%, transparent 100%); transition: max-block-size .45s var(--lx-ease); } .btw .btw-more.is-open .btw-more__body { -webkit-mask-image: none; mask-image: none; } .btw .btw-more__btn { display: inline-flex; align-items: center; gap: 0.5rem; margin-block-start: 0.5rem; padding: 0; border: 0; background: none; font-family: var(--lx-font-marker); font-weight: 700; font-size: 1.1rem; color: var(--lx-pink-700); cursor: pointer; } .btw .btw-more__arrow { inline-size: 1.6rem; block-size: 1.4rem; color: var(--lx-sea-500); rotate: 90deg; transition: rotate .35s var(--lx-ease); } .btw .btw-more.is-open .btw-more__arrow { rotate: -90deg; } } /* ============================================================ Hero auf dem Telefon: Foto direkt unter die H1, Querformat, CTAs nebeneinander ============================================================ */ @media (max-width: 52rem) { .btw .btw-hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--lx-space-s); } /* Die Textspalte loest sich auf, damit Foto und Text eine gemeinsame Reihenfolge bilden koennen. */ .btw .btw-hero-text { display: contents; } .btw .btw-hero-grid > .btw-hero-text > .lx-label { order: 1; } .btw .btw-hero-grid > .btw-hero-text > h1 { order: 2; margin-block-end: 0; } .btw .btw-hero-grid > .btw-hero-photo { order: 3; margin-block: 0.2rem 0.4rem; } .btw .btw-hero-grid > .btw-hero-text > .lx-lead { order: 4; } .btw .btw-hero-grid > .btw-hero-text > .lx-zstat { order: 5; } .btw .btw-hero-grid > .btw-hero-text > .lx-zprice { order: 6; } .btw .btw-hero-grid > .btw-hero-text > .btw-card { order: 7; } .btw .btw-hero-grid > .btw-hero-text > .lx-annotation { order: 8; } .btw .btw-hero-grid > .btw-hero-text > .lx-hero__ctas { order: 9; } .btw .btw-hero-photo img { aspect-ratio: 16 / 9; object-fit: cover; max-block-size: 15rem; } .btw .btw-hero-photo .lx-sticker--onphoto { inset-block-start: 0.6rem; inset-inline-start: 0.6rem; font-size: 0.95rem; } /* Beide Knöpfe nebeneinander, gekürzt, mit Icon. */ .btw .lx-hero__ctas { display: flex; flex-wrap: nowrap; gap: 8px; } .btw .lx-hero__ctas > .lx-btn { flex: 1 1 0; min-inline-size: 0; padding-inline: 0.7em; font-size: 0.95rem; gap: 0.4em; white-space: nowrap; } .btw .lx-hero__ctas > .lx-btn svg { inline-size: 1.05em; block-size: 1.05em; } } /* Auf breiten Viewports bleibt die lange Beschriftung. */ .btw .btw-cta-lang { display: inline; } .btw .btw-cta-kurz { display: none; } @media (max-width: 52rem) { .btw .btw-cta-lang { display: none; } .btw .btw-cta-kurz { display: inline; } } /* ============================================================ Schritt-Zahlen liegen im Foto ============================================================ */ .btw .btw-step { position: relative; } .btw .btw-step .lx-photo { position: relative; } .btw .btw-step__num { position: absolute; inset-block-start: 0.5rem; inset-inline-start: 0.7rem; z-index: 2; font-family: var(--lx-font-marker); font-size: 2.6rem; font-weight: 700; line-height: 1; color: #fff; rotate: -4deg; } /* Der Browser gibt figure standardmaessig 40px Seitenrand, dadurch stand das Schrittfoto eingerueckt neben seinem Text. */ .btw figure { margin: 0; } /* Die Schrittzahl liegt im Foto und muss auf hellen wie dunklen Stellen lesbar bleiben. Ein weicher Verlauf in der Ecke, kein Badge-Kasten. */ .btw .btw-step .lx-photo::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 46%; block-size: 48%; z-index: 1; pointer-events: none; background: linear-gradient(135deg, rgba(0, 58, 128, 0.5) 0%, rgba(0, 58, 128, 0) 72%); } /* Kleines Info-Zeichen im Hero-Chip: springt zur Zonenauswahl, damit man sofort sieht, welche neun Zonen gemeint sind. */ .btw .btw-info { display: inline-flex; align-items: center; justify-content: center; inline-size: 1.15em; block-size: 1.15em; margin-inline-start: 0.45em; vertical-align: -0.18em; color: var(--lx-pink-700); opacity: 0.72; transition: opacity var(--lx-dur) var(--lx-ease), scale var(--lx-dur) var(--lx-ease); } .btw .btw-info svg { inline-size: 100%; block-size: 100%; } .btw .btw-info:hover, .btw .btw-info:focus-visible { opacity: 1; scale: 1.12; } .btw .btw-info:focus-visible { outline: 2px solid var(--lx-cta-ring); outline-offset: 2px; border-radius: 50%; } /* Die Sprungmarke darf nicht unter der klebenden Navigation landen. */ .btw #signature-zones { scroll-margin-block-start: 96px; } /* ============================================================ Video-Loops statt Standbild ============================================================ */ .btw .btw-loop { position: relative; } .btw .btw-loop video, .btw .btw-loop img { display: block; inline-size: 100%; block-size: auto; border-radius: 0; } .btw .btw-loop--wide { margin-block-start: var(--lx-space-m); } /* KI-Kennzeichnung fuer Videos. ai-label.js greift nur bei Bildern, deshalb hier fest im Markup, in derselben hellen Schrift ohne Kasten. */ .btw .btw-ailabel { position: absolute; inset-block-end: 6px; inset-inline-end: 8px; z-index: 2; font-family: var(--lx-font-body); font-size: 9px; font-weight: 500; letter-spacing: 0.02em; line-height: 1.35; color: rgba(255, 255, 255, 0.92); pointer-events: none; } /* Abschluss-Sektion: Text links, quadratischer Loop rechts. Beide oben buendig, sonst rutscht der kurze Text neben dem hohen Loop nach unten und reisst eine Luecke unter die Ueberschrift. */ .btw .btw-final { align-items: start; } .btw .btw-final .btw-loop { max-inline-size: 19rem; margin-inline-start: auto; } @media (max-width: 52rem) { .btw .btw-final { grid-template-columns: 1fr; } .btw .btw-final .btw-loop { max-inline-size: 20rem; } } /* Wer Bewegung reduziert, bekommt das Standbild. */ @media (prefers-reduced-motion: reduce) { .btw .btw-loop video { animation: none !important; } } /* ============================================================ Hero-Loop Eine einzige 16:9-Datei, der Ausschnitt kommt aus dem CSS: auf dem Desktop hochkant beschnitten auf die Behandlerin, auf dem Telefon quer und niedrig. ============================================================ */ .btw .btw-hero-photo video { display: block; inline-size: 100%; block-size: auto; border-radius: 0; } @media (min-width: 52.0625rem) { .btw .btw-hero-photo video { aspect-ratio: 3 / 4; block-size: auto; object-fit: cover; object-position: 34% center; } } @media (max-width: 52rem) { .btw .btw-hero-photo video { aspect-ratio: 16 / 9; object-fit: cover; object-position: 30% center; max-block-size: 15rem; } } /* ============================================================ Hero auf dem Telefon kompakter Vorher standen dort neun Blöcke untereinander: Eyebrow, Headline, Video, langer Fließtext, vier Chips, Rabattkasten, Countdown-Karte, Handschrift-Notiz und zwei Knöpfe. Zu viel und zu wirr. Jetzt: Eyebrow, Headline, Video, ein kurzer Satz, EINE zusammen- gefasste Karte mit Rabatt, Countdown und Balken, dann die Knöpfe. ============================================================ */ @media (max-width: 52rem) { /* Was auf dem Telefon nur wiederholt, was ohnehin in der Karte steht. */ .btw .btw-hero-grid .lx-zstat { display: none; } .btw .btw-nur-desktop { display: none; } .btw .btw-hero-grid > .btw-hero-text > .lx-lead { margin-block-end: 0.2rem; font-size: var(--lx-text-base); } /* Rabattkasten und Countdown-Karte lesen sich als ein Bauteil. */ .btw .btw-hero-grid > .btw-hero-text > .lx-zprice { max-inline-size: none; margin-block: 0.6rem 0; padding: 1rem 1.1rem 0.9rem; border-end-start-radius: 0; border-end-end-radius: 0; border-block-end: 0; } .btw .btw-hero-grid > .btw-hero-text > .btw-card { /* Die Zeilenluecke des Grids wieder herausrechnen, sonst klafft zwischen Rabattkasten und Countdown eine Fuge. */ margin-block-start: calc(var(--lx-space-s) * -1); border-start-start-radius: 0; border-start-end-radius: 0; border-block-start: 1px dashed var(--lx-line); background: var(--lx-pink-100); gap: 12px; padding: 0.9rem 1.1rem 1.1rem; } .btw .btw-hero-grid > .btw-hero-text > .lx-zprice .lx-pricetag { font-size: clamp(2.6rem, 13vw, 3.4rem); } .btw .btw-hero-grid > .btw-hero-text > .lx-zprice .lx-pricetag::before { -webkit-text-stroke-color: var(--lx-pink-100); } /* Der Sticker sass auf der Kante zwischen beiden Kaesten. */ .btw .btw-hero-grid > .btw-hero-text > .lx-zprice .lx-sticker { inset-block-start: -0.8rem; font-size: 1rem; } .btw .btw-hero-grid > .btw-hero-text > .btw-card .lx-sticker { display: none; } .btw .btw-hero-grid > .btw-hero-text > .btw-card .btw-card__head { font-size: var(--lx-text-sm); } .btw .btw-hero-grid > .btw-hero-text > .btw-card .lx-countdown div { padding: 0.4rem 0.3rem; } .btw .btw-hero-grid > .btw-hero-text > .btw-card .lx-countdown b { font-size: 1.45rem; } .btw .btw-hero-grid > .btw-hero-text > .btw-card .btw-avail__track { background: #ffffff; } /* Die Handschrift-Notiz rueckt naeher an die Knoepfe. */ .btw .btw-hero-grid > .btw-hero-text > .lx-annotation { margin-block: 0.8rem 0.2rem; } }