:root{--navy:#0E1B3C;--navy-2:#16264F;--blue:#1E4B8F;--red:#C4161C;--red-dark:#9E1015;--linen:#F6F3EE;--sand:#E9E2D6;--sand-2:#DFD6C6;--ink-2:#2B3348;--ink:#1A1F2E;--muted:#4C5468;--muted-2:#616A80;--gold:#7A5E13;--red-bright:#E0484E;--line:rgba(14,27,60,.15);--line-soft:rgba(14,27,60,.08);--white:#FFFDFA;--wrap:1180px;--ser:"Source Serif 4",Georgia,"Times New Roman",serif;--seri:"Source Serif 4",Georgia,serif;--san:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}*,*::before,*::after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}body{margin:0;background:var(--linen);color:var(--ink);font-family:var(--san);font-size:17px;line-height:1.68;font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden}img{max-width:100%;height:auto;display:block}a{color:var(--blue);text-decoration:none}a:hover{color:var(--red)}h1,h2,h3,h4{font-family:var(--ser);font-weight:600;line-height:1.16;margin:0;letter-spacing:-.011em;color:var(--navy);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}h1{-webkit-hyphens:manual;hyphens:manual}h1{font-size:clamp(1.95rem,5.6vw,4.9rem);letter-spacing:-.022em}h2{font-size:clamp(1.72rem,3.7vw,3.15rem);letter-spacing:-.018em}h3{font-size:clamp(1.16rem,1.9vw,1.42rem)}h4{font-size:1.02rem;font-family:var(--san);font-weight:700;letter-spacing:.005em}p{margin:0 0 1.05em}ul,ol{margin:0 0 1.1em;padding-left:1.15em}li{margin-bottom:.42em}hr{border:0;border-top:1px solid var(--line);margin:2.6rem 0}.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 24px}.narrow,.mid{max-width:var(--wrap)}.narrow>*{max-width:760px}.mid>*{max-width:900px}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.topbar{background:var(--navy-2);color:rgba(255,253,250,.78);font-size:.795rem;letter-spacing:.04em}.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:18px;min-height:38px;flex-wrap:wrap}.topbar a{color:rgba(255,253,250,.9)}.topbar a:hover{color:#fff}.topbar span{white-space:nowrap}.site-head{position:sticky;top:0;z-index:60;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.09)}.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}.brand{display:flex;flex-direction:row;align-items:center;gap:12px;line-height:1;padding:4px 0;white-space:nowrap}.brand .mk{width:34px;height:auto;flex:0 0 34px;color:var(--red);display:block;transition:transform .3s cubic-bezier(.4,0,.2,1)}.brand:hover .mk{transform:translateY(-1px)}.brand .lock{display:flex;flex-direction:column;gap:3px}.brand .bm{font-family:var(--san);font-weight:700;font-size:1.02rem;letter-spacing:.24em;color:var(--red);text-transform:uppercase}.brand .bs{font-size:.585rem;letter-spacing:.235em;color:rgba(255,253,250,.5);text-transform:uppercase;font-weight:500}a.brand:hover .bm{color:var(--red)}a.brand:hover .bs{color:rgba(255,253,250,.5)}.nav{display:flex;align-items:center;gap:2px}.nav a{position:relative;white-space:nowrap;color:rgba(255,253,250,.84);font-size:.85rem;font-weight:500;padding:10px 11px;letter-spacing:.006em}.nav a::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:center;transition:transform .26s cubic-bezier(.4,0,.2,1)}.nav a:hover{color:#fff}.nav a:hover::after{transform:scaleX(1)}.nav a.on{color:#fff}.nav a.on::after{transform:scaleX(1)}.tel-btn{display:inline-flex;align-items:center;gap:8px;background:var(--red);color:#fff;font-weight:600;font-size:.885rem;padding:11px 17px;letter-spacing:.01em;white-space:nowrap}.tel-btn:hover{background:var(--red-dark);color:#fff}.burger{display:none;background:none;border:1px solid rgba(255,255,255,.28);color:#fff;padding:9px 11px;cursor:pointer}.burger span{display:block;width:20px;height:2px;background:#fff;margin:4px 0}.btn{display:inline-block;font-family:var(--san);font-weight:600;font-size:.925rem;padding:14px 26px;letter-spacing:.012em;border:1px solid transparent;cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease}.btn-red{background:var(--red);color:#fff}.btn-red:hover{background:var(--red-dark);color:#fff}.btn-navy{background:var(--navy);color:#fff}.btn-navy:hover{background:var(--navy-2);color:#fff}.btn-ghost{background:transparent;color:var(--navy);border-color:var(--navy)}.btn-ghost:hover{background:var(--navy);color:#fff}.btn-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}.btn-light:hover{background:#fff;color:var(--navy)}.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}.sec{padding:82px 0}.sec-s{padding:56px 0}.sec-sand{background:var(--sand)}.sec-white{background:var(--white)}.sec-navy{background:var(--navy);color:rgba(255,253,250,.86)}.sec-navy h1,.sec-navy h2,.sec-navy h3{color:#fff}.sec-navy a{color:#fff;text-decoration:underline;text-underline-offset:3px}.eyebrow{font-size:.735rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--red);margin:0 0 14px}.sec-navy .eyebrow{color:#E8A0A3}.lead{font-size:1.145rem;line-height:1.62;color:#333A4C}.sec-navy .lead{color:rgba(255,253,250,.84)}.sec-head{max-width:720px;margin-bottom:46px}.sec-head.ctr{margin-left:auto;margin-right:auto;text-align:center}.hero{position:relative;overflow:hidden;background:#0B1530;isolation:isolate}.hero-bg{position:absolute;inset:0;z-index:0;background:linear-gradient(100deg,#04081A 0%,#091230 23%,#14224A 50%,#2E3862 74%,#55495C 100%)}.hb-tex{position:absolute;inset:0;background:url(hero-textur.webp) center/cover no-repeat;opacity:.28;mix-blend-mode:soft-light;filter:saturate(.35) contrast(1.15)}.hb-dawn{position:absolute;inset:0;background:radial-gradient(56% 70% at 90% 44%,rgba(255,201,152,.40),transparent 60%),radial-gradient(40% 50% at 80% 68%,rgba(255,146,102,.20),transparent 64%);will-change:transform}.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,19,48,.32) 0%,transparent 26%,transparent 62%,rgba(9,16,38,.55) 100%)}.hero .wrap{position:relative;z-index:2;min-height:calc(100svh - 114px);display:grid;grid-template-columns:1.06fr .94fr;grid-template-rows:1fr auto;align-items:center;gap:22px 44px;padding-top:32px;padding-bottom:184px}.hero-in{max-width:none}.hero h1{color:#fff;margin-bottom:18px;text-wrap:balance;font-size:clamp(1.9rem,3.1vw,3.25rem);letter-spacing:-.02em;line-height:1.1}.hero h1 .nb{white-space:nowrap}.hero h1 em{font-style:normal;color:var(--red);display:inline}.hero h1 .sub2{display:block;color:rgba(255,253,250,.82);font-size:.62em;font-weight:400;line-height:1.24;margin-top:.34em;letter-spacing:-.01em}.hero p{color:rgba(255,253,250,.84);font-size:1.06rem;max-width:44ch;line-height:1.6}.hero .kicker{display:inline-block;border:1px solid rgba(255,255,255,.26);color:#fff;font-size:.66rem;font-weight:600;letter-spacing:.19em;text-transform:uppercase;padding:8px 14px;margin-bottom:22px}.hero-art{position:relative;justify-self:end;width:100%;max-width:560px}.stack{position:relative}.stack::before{content:"";position:absolute;left:8%;right:8%;bottom:2%;height:11%;background:radial-gradient(50% 50% at 50% 50%,rgba(3,7,20,.66),transparent 72%);filter:blur(14px);z-index:-1}.stack-float{will-change:transform}.stack img{width:100%;height:auto;filter:drop-shadow(-18px 24px 34px rgba(4,9,24,.5)) drop-shadow(0 3px 6px rgba(4,9,24,.3))}.hero-cap{display:flex;align-items:center;gap:16px;margin-top:26px;padding-left:6px}.hero-cap .mline{flex:0 0 74px;background:rgba(255,255,255,.34)}.hero-cap .mline::before,.hero-cap .mline::after{background:#fff;opacity:.62}.hero-cap .tx{font-size:.78rem;letter-spacing:.09em;color:rgba(255,253,250,.66);text-transform:uppercase;font-weight:600}@keyframes heroRise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}@keyframes stackIn{from{opacity:0;transform:translateY(52px) scale(.965)}to{opacity:1;transform:none}}@keyframes stackFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}@keyframes lineDraw{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes glowIn{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}.hb-dawn{animation:glowIn 2.2s ease-out .1s both}.hero .kicker{animation:heroRise .8s cubic-bezier(.22,.61,.36,1) .05s both}.hero h1{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .16s both}.hero-in>p{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .28s both}.hero .btn-row{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .4s both}.stack{animation:stackIn 1.15s cubic-bezier(.2,.72,.26,1) .22s both}.stack-float{animation:stackFloat 8.5s ease-in-out 1.5s infinite}.hero-cap .mline{transform-origin:left;animation:lineDraw .8s cubic-bezier(.22,.61,.36,1) .95s both}.hero-cap .tx{animation:heroRise .8s cubic-bezier(.22,.61,.36,1) 1.15s both}.scroll-hint{position:absolute;left:0;right:0;bottom:26px;z-index:3;display:flex;justify-content:center}.scroll-hint a{display:inline-flex;flex-direction:column;align-items:center;gap:7px;color:rgba(255,253,250,.6);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;text-decoration:none}.scroll-hint a:hover{color:#fff}.scroll-hint i{display:block;width:1px;height:26px;background:linear-gradient(180deg,rgba(255,255,255,.55),transparent);animation:hint 2.1s ease-in-out infinite}@keyframes hint{0%,100%{opacity:.35;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}@media (max-width:1020px){.hero .wrap{grid-template-columns:1fr;grid-template-rows:auto auto;gap:26px;text-align:left;padding-top:26px;padding-bottom:84px;align-content:center}.hero-in{max-width:none}.hero-art{justify-self:center;max-width:440px}.hero-cap{justify-content:center}}.page-head{background:var(--navy);position:relative;overflow:hidden}.page-head .bg{position:absolute;inset:0}.page-head .bg img{width:100%;height:100%;object-fit:cover;opacity:.28}.page-head::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(14,27,60,.93),rgba(14,27,60,.66))}.page-head .wrap{position:relative;z-index:2;padding:74px 24px 66px}.page-head h1{color:#fff;max-width:16ch;text-wrap:balance;-webkit-hyphens:manual;hyphens:manual}.page-head p{color:rgba(255,253,250,.82);max-width:600px;margin-top:16px;font-size:1.1rem}.crumb{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,253,250,.55);margin-bottom:16px}.crumb a{color:rgba(255,253,250,.72);text-decoration:none}.crumb a:hover{color:#fff}.trust{background:var(--navy-2);border-top:1px solid rgba(255,255,255,.08)}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(255,255,255,.1)}.trust-grid>div{background:var(--navy-2);padding:26px 22px;text-align:center}.trust-grid b{display:block;font-family:var(--ser);font-size:1.85rem;color:#fff;font-weight:600;line-height:1.1}.trust-grid span{display:block;font-size:.79rem;letter-spacing:.05em;color:rgba(255,253,250,.66);margin-top:7px}.grid{display:grid;gap:28px}.g1{grid-template-columns:1fr}.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}.split{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}.split.wide-l{grid-template-columns:1.15fr .85fr}.split figure{margin:0}.split img{width:100%}.tile{display:block;background:var(--white);border:1px solid var(--line);color:var(--ink)}.tile .ph{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}.tile .ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.tile:hover .ph img{transform:scale(1.04)}.tile .tx{padding:19px 21px 22px}.tile h3{margin-bottom:6px}.tile p{font-size:.9rem;color:var(--muted);margin:0}.tile .more{display:inline-block;margin-top:12px;font-size:.83rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--red)}.tile:hover{border-color:var(--navy)}.tile:hover h3{color:var(--red)}.feat{background:var(--white);border:1px solid var(--line);padding:28px 26px 30px}.feat .num{font-family:var(--ser);font-size:1.5rem;color:var(--red);font-weight:600;display:block;margin-bottom:10px}.feat h3{margin-bottom:9px}.feat p{font-size:.94rem;color:#3B4356;margin:0}.plain{border-top:2px solid var(--navy);padding-top:20px}.plain h3{margin-bottom:9px}.plain p{font-size:.94rem;color:#3B4356;margin:0}.model{background:var(--white);border:1px solid var(--line);display:flex;flex-direction:column}.model .ph{aspect-ratio:16/9;background:#0B1226;overflow:hidden;display:flex;align-items:center;justify-content:center}.model .ph img{width:100%;height:100%;object-fit:cover}.model .bd{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}.model h3{margin-bottom:4px}.model .spec{font-size:.88rem;color:var(--muted);margin:0 0 14px}.model .price{font-family:var(--ser);font-size:1.75rem;font-weight:600;color:var(--navy);margin-top:auto;font-variant-numeric:tabular-nums;letter-spacing:-.015em}.model .price small{font-family:var(--san);font-size:.7rem;color:var(--muted);font-weight:600;display:block;letter-spacing:.14em;text-transform:uppercase;margin-bottom:3px}.sleep{display:flex;gap:16px;flex-wrap:wrap;padding:12px 0 14px;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-bottom:16px}.sleep div{font-size:.79rem;color:var(--muted);letter-spacing:.02em}.sleep b{display:block;font-size:.68rem;letter-spacing:.11em;text-transform:uppercase;color:var(--navy);font-weight:700;margin-bottom:2px}.dots{letter-spacing:.09em;color:var(--red);font-size:.95rem}.dots .o{color:rgba(14,27,60,.2)}.dots .no{color:var(--muted)}.legend{background:var(--sand);border-left:3px solid var(--red);padding:20px 24px;font-size:.9rem}.legend p{margin:0 0 .5em}.legend p:last-child{margin:0}.tbl-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:var(--white)}table{border-collapse:collapse;width:100%;min-width:640px;font-size:.9rem}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid var(--line-soft)}thead th{background:var(--navy);color:#fff;font-weight:600;font-size:.79rem;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}tbody tr:nth-child(even){background:rgba(233,226,214,.4)}td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--navy);font-weight:500}.tbl-note{font-size:.83rem;color:var(--muted);margin-top:12px}.cell-note{display:block;color:var(--muted);font-size:.83rem;line-height:1.5;margin-top:4px;font-weight:400}td strong{color:var(--navy)}.rate-p{color:#146B3A;font-weight:600}.rate-m{color:var(--muted)}.rate-n{color:var(--red);font-weight:600}.rev-band{background:var(--sand);padding:74px 0 78px;overflow:hidden}.rev-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:36px}.rev-score{display:flex;align-items:center;gap:14px}.rev-score .big{font-family:var(--ser);font-size:2.9rem;font-weight:600;color:var(--navy);line-height:1}.rev-score .meta{font-size:.86rem;color:var(--muted)}.stars{color:var(--gold);letter-spacing:.06em;font-size:1.02rem}.marquee{position:relative;width:100vw;margin-left:calc(50% - 50vw);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}.mq-track{display:flex;gap:22px;width:max-content;animation:mq 92s linear infinite}@keyframes mq{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}.rev{width:370px;flex:0 0 370px;background:var(--white);border:1px solid var(--line);padding:26px 26px 24px;display:flex;flex-direction:column}.rev .stars{margin-bottom:12px}.rev p{font-size:.935rem;line-height:1.62;color:#333A4C;margin:0 0 18px}.rev .who{margin-top:auto;display:flex;align-items:center;gap:10px;border-top:1px solid var(--line-soft);padding-top:14px}.rev .av{width:34px;height:34px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.82rem;flex:0 0 34px}.rev .nm{font-weight:600;font-size:.88rem;color:var(--navy)}.rev .src{font-size:.74rem;color:var(--muted);letter-spacing:.03em}@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.marquee{overflow-x:auto}}.quote{border-left:3px solid var(--red);padding:6px 0 6px 26px;margin:34px 0}.quote p{font-family:var(--ser);font-size:1.4rem;line-height:1.45;color:var(--navy);margin:0}.quote cite{display:block;font-family:var(--san);font-style:normal;font-size:.85rem;color:var(--muted);margin-top:12px;letter-spacing:.04em}.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);background:var(--white)}.flow>div{padding:30px 26px 32px;border-right:1px solid var(--line);position:relative}.flow>div:last-child{border-right:0}.flow .st{font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);display:block;margin-bottom:12px}.flow h3{margin-bottom:9px}.flow p{font-size:.93rem;color:#3B4356;margin:0}.acc{border-top:1px solid var(--line)}.acc details{border-bottom:1px solid var(--line)}.acc summary{cursor:pointer;padding:21px 44px 21px 0;position:relative;list-style:none;font-family:var(--ser);font-size:1.2rem;font-weight:600;color:var(--navy)}.acc summary::-webkit-details-marker{display:none}.acc summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--san);font-size:1.5rem;font-weight:300;color:var(--red);line-height:1}.acc details[open] summary::after{content:"–"}.acc summary:hover{color:var(--red)}.acc .in{padding:0 0 26px;max-width:74ch}.acc .in>:last-child{margin-bottom:0}.facts{list-style:none;padding:0;margin:0}.facts li{position:relative;padding-left:26px;margin-bottom:12px;font-size:.97rem}.facts li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;background:var(--red)}.facts.light li{color:rgba(255,253,250,.85)}.mfr{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.mfr>div{background:var(--white);padding:24px 20px;text-align:center}.mfr b{display:block;font-family:var(--ser);font-size:1.15rem;color:var(--navy);font-weight:600}.mfr span{display:block;font-size:.8rem;color:var(--muted);margin-top:5px;line-height:1.45}.box{background:var(--sand);padding:30px 32px;border-top:3px solid var(--navy)}.box.red{border-top-color:var(--red)}.box>:last-child{margin-bottom:0}.box h3{margin-bottom:12px}.dl{margin:0}.dl div{display:flex;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-soft)}.dl dt{flex:0 0 148px;font-size:.79rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:600;padding-top:3px}.dl dd{margin:0;flex:1}.map{border:1px solid var(--line);width:100%;height:400px;filter:saturate(.82) contrast(.97)}.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.gal img{width:100%;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}.anchors{background:var(--white);border-bottom:1px solid var(--line);position:sticky;top:76px;z-index:40}.anchors .wrap{display:flex;flex-wrap:wrap;gap:2px 4px;padding-top:4px;padding-bottom:4px}.anchors a{position:relative;white-space:nowrap;padding:13px 14px;font-size:.855rem;font-weight:500;color:var(--navy)}.anchors a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .24s cubic-bezier(.4,0,.2,1)}.anchors a:hover{color:var(--red)}.anchors a:hover::after{transform:scaleX(1)}.cta{background:var(--navy);position:relative;overflow:hidden}.cta .bg{position:absolute;inset:0}.cta .bg img{width:100%;height:100%;object-fit:cover;opacity:.2}.cta::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(14,27,60,.94),rgba(14,27,60,.7))}.cta .wrap{position:relative;z-index:2;padding:78px 24px}.cta h2{color:#fff;max-width:16ch}.cta p{color:rgba(255,253,250,.82);max-width:520px;margin-top:14px;font-size:1.08rem}.site-foot{background:#0A1430;color:rgba(255,253,250,.66);font-size:.9rem;padding:62px 0 30px}.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:42px;border-bottom:1px solid rgba(255,255,255,.1)}.site-foot h4{color:#fff;font-size:.76rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:16px;font-family:var(--san);font-weight:700}.site-foot a{color:rgba(255,253,250,.72);text-decoration:none}.site-foot a:hover{color:#fff}.site-foot ul{list-style:none;padding:0;margin:0}.site-foot li{margin-bottom:9px}.site-foot .brand{margin-bottom:16px}.foot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding-top:24px;font-size:.82rem;color:rgba(255,253,250,.48)}.foot-bot a{color:rgba(255,253,250,.6)}.mob{position:fixed;inset:0;background:var(--navy);z-index:70;transform:translateX(100%);transition:transform .3s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;padding:22px 24px 34px;overflow-y:auto}.mob.open{transform:translateX(0)}.mob-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:34px}.mob-close{background:none;border:1px solid rgba(255,255,255,.28);color:#fff;font-size:1.5rem;line-height:1;padding:5px 12px 8px;cursor:pointer}.mob nav{display:flex;flex-direction:column}.mob nav a{color:#fff;font-family:var(--ser);font-size:1.5rem;font-weight:600;padding:15px 0;border-bottom:1px solid rgba(255,255,255,.11)}.mob nav a:hover{color:#F2B9BB}.mob .mfoot{margin-top:34px;display:flex;flex-direction:column;gap:12px}.mob .mfoot small{color:rgba(255,253,250,.6);font-size:.85rem;line-height:1.6}.callbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:55;background:var(--red);border-top:1px solid rgba(0,0,0,.15)}.callbar a{display:flex;align-items:center;justify-content:center;gap:9px;color:#fff;font-weight:600;padding:15px;font-size:.98rem;letter-spacing:.02em}@media (max-width:1120px){.nav{display:none}.burger{display:block}.g4{grid-template-columns:repeat(2,1fr)}.foot-grid{grid-template-columns:1fr 1fr;gap:34px}.mfr{grid-template-columns:repeat(2,1fr)}.split{gap:40px}}@media (max-width:860px){body{font-size:16.5px}.sec{padding:60px 0}.split,.split.wide-l{grid-template-columns:1fr;gap:32px}.split.rev-order figure{order:-1}.g3{grid-template-columns:1fr}.flow{grid-template-columns:1fr}.flow>div{border-right:0;border-bottom:1px solid var(--line)}.flow>div:last-child{border-bottom:0}.trust-grid{grid-template-columns:1fr 1fr}.hero:not(.hero2):not(.hero3):not(.hero4) .wrap{min-height:calc(100svh - 104px);align-content:center;padding-top:40px;padding-bottom:100px;gap:0}.hero .kicker{margin-bottom:22px;font-size:.62rem;padding:7px 12px;letter-spacing:.16em}.hero h1{font-size:clamp(1.95rem,7.4vw,2.7rem);margin-bottom:20px}.hero p{font-size:1.02rem;line-height:1.62;max-width:none}.hero .btn-row{margin-top:30px;gap:11px}.hero .btn-row .btn{padding:15px 22px;font-size:.94rem}.scroll-hint{bottom:18px}.anchors{top:66px}.anchors .wrap{gap:0 2px;padding-top:2px;padding-bottom:2px}.anchors a{padding:11px 11px;font-size:.79rem}.anchors a::after{left:11px;right:11px;bottom:4px}html{scroll-padding-top:150px}.page-head .wrap{padding:52px 24px 46px}.page-head h1{max-width:none;font-size:clamp(1.85rem,8vw,2.6rem)}.page-head p{font-size:1rem}.gal{grid-template-columns:1fr 1fr}.head-in{min-height:66px}.topbar .wrap{justify-content:center;font-size:.74rem}.topbar .hide-s{display:none}.tel-btn{display:none}.callbar{display:block}.site-foot{padding-bottom:88px}.rev{width:298px;flex:0 0 298px}.dl div{flex-direction:column;gap:3px}.dl dt{flex:none}}@media (max-width:760px){.tbl-scroll{overflow:visible;border:0;background:none}table{min-width:0;width:100%;display:block;font-size:.94rem}thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}tbody,tr,td{display:block;width:100%}tbody tr,tbody tr:nth-child(even){background:var(--white);border:1px solid var(--line);padding:16px 18px 14px;margin-bottom:12px}td{border:0;padding:7px 0;display:flex;justify-content:space-between;align-items:baseline;gap:16px;text-align:right}td + td{border-top:1px solid var(--line-soft)}td::before{content:attr(data-l);text-align:left;flex:0 0 auto;font-size:.7rem;letter-spacing:.11em;text-transform:uppercase;color:var(--muted);font-weight:700}td:first-child{display:block;text-align:left;padding:0 0 12px;border-bottom:2px solid var(--navy);margin-bottom:6px}td:first-child::before{display:none}td:first-child strong{font-family:var(--ser);font-size:1.12rem}td.num{font-weight:600}.cell-note{margin-top:6px}}@media (max-width:560px){.g2,.g4{grid-template-columns:1fr}.foot-grid{grid-template-columns:1fr}.trust-grid>div{padding:20px 14px}.trust-grid b{font-size:1.5rem}.gal{grid-template-columns:1fr}.box{padding:24px 22px}.brand .bm{font-size:1.16rem;letter-spacing:.1em}}.grid.mono .model .ph{background:#EDE8DF}.grid.mono .model .ph img{filter:grayscale(1) contrast(1.06) brightness(1.02)}.btn{position:relative;transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease}.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0)}.btn-red::after,.btn-navy::after,.btn-ghost::after,.btn-light::after{content:"";display:inline-block;width:0;overflow:hidden;white-space:nowrap;transition:width .22s cubic-bezier(.4,0,.2,1),margin-left .22s cubic-bezier(.4,0,.2,1);vertical-align:middle}.btn-red:hover::after,.btn-navy:hover::after,.btn-ghost:hover::after,.btn-light:hover::after{content:"→";width:1em;margin-left:.5em}.tile{transition:border-color .22s ease,transform .28s cubic-bezier(.4,0,.2,1),background .22s ease}.tile .ph{position:relative}.tile .ph::after{content:"";position:absolute;inset:0;background:var(--navy);opacity:0;transition:opacity .3s ease}.tile:hover{transform:translateY(-4px)}.tile:hover .ph::after{opacity:.1}.tile .more{position:relative;padding-bottom:3px}.tile .more::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .28s cubic-bezier(.4,0,.2,1)}.tile:hover .more::after{transform:scaleX(1)}.model{transition:border-color .22s ease,transform .28s cubic-bezier(.4,0,.2,1)}.model .ph img{transition:transform .5s cubic-bezier(.4,0,.2,1)}.model:hover{border-color:var(--navy);transform:translateY(-3px)}.model:hover .ph img{transform:scale(1.05)}.feat{position:relative;transition:background .22s ease}.feat::before{content:"";position:absolute;left:-1px;top:-1px;bottom:-1px;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .3s cubic-bezier(.4,0,.2,1)}.feat:hover::before{transform:scaleY(1)}.plain{transition:border-color .22s ease}.plain:hover{border-top-color:var(--red)}@media (min-width:761px){tbody tr{transition:background .16s ease}tbody tr:hover{background:var(--sand)}}.mfr>div{transition:background .22s ease,transform .22s ease}.mfr>div:hover{background:var(--sand);transform:translateY(-2px)}.site-foot li a{position:relative;display:inline-block;transition:transform .2s ease}.site-foot li a:hover{transform:translateX(3px)}.gal img{transition:transform .45s cubic-bezier(.4,0,.2,1),filter .3s ease}.gal img:hover{transform:scale(1.02);filter:brightness(1.05)}.sec p a:not(.btn),.acc .in a{background-image:linear-gradient(var(--red),var(--red));background-size:0 1px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .28s cubic-bezier(.4,0,.2,1);padding-bottom:1px}.sec p a:not(.btn):hover,.acc .in a:hover{background-size:100% 1px}.acc summary{transition:color .18s ease}.acc summary::after{transition:transform .22s ease,color .18s ease}.acc details[open] summary{color:var(--red)}.rise{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}.rise.in{opacity:1;transform:none}a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:3px}@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;animation-iteration-count:1 !important}.rise{opacity:1;transform:none}html{scroll-behavior:auto}}.anchors a.on{color:var(--red)}.anchors a.on::after{transform:scaleX(1)}@media (max-width:860px){.scroll-hint{display:none}}.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--red);color:#fff;padding:12px 20px;font-weight:600;font-size:.9rem}.skip:focus{left:0;color:#fff}.mline{position:relative;height:1px;background:var(--line);margin:0}.mline::before,.mline::after{content:"";position:absolute;top:-4px;width:1px;height:9px;background:var(--navy);opacity:.45}.mline::before{left:0}.mline::after{right:0}.sec-navy .mline,.cta .mline{background:rgba(255,255,255,.22)}.sec-navy .mline::before,.sec-navy .mline::after{background:#fff;opacity:.5}.eyebrow{display:flex;align-items:center;gap:12px}.eyebrow::after{content:"";flex:0 0 46px;height:1px;background:currentColor;opacity:.45;position:relative}.sec-head.ctr .eyebrow{justify-content:center}h2 .mline,.sec-head .mline{margin-top:22px;max-width:120px}.wide{position:relative;overflow:hidden;background:var(--navy)}.wide .bg{position:absolute;inset:0}.wide .bg img,.wide .bg picture{width:100%;height:100%;object-fit:cover}.wide .bg img{opacity:.42}.wide::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,27,60,.55),rgba(14,27,60,.88))}.wide .wrap{position:relative;z-index:2;padding:120px 24px;text-align:center}.wide p.claim{font-family:var(--ser);color:#fff;margin:0 auto;max-width:19ch;font-size:clamp(1.9rem,4.6vw,3.7rem);line-height:1.14;letter-spacing:-.02em;font-weight:600}.wide .sub{color:rgba(255,253,250,.76);max-width:52ch;margin:24px auto 0;font-size:1.05rem}.wide .mline{max-width:130px;margin:30px auto 0}.stats{background:var(--linen);border-top:1px solid var(--line)}.stats .wrap{padding:76px 24px 82px}.stat-lead{max-width:640px;margin-bottom:52px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}.stat-grid>div{padding:0 40px;border-left:1px solid var(--line)}.stat-grid>div:first-child{padding-left:0;border-left:0}.stat-grid b{display:block;font-family:var(--ser);font-weight:600;color:var(--navy);font-size:clamp(2.9rem,6vw,4.6rem);line-height:.94;letter-spacing:-.035em;font-variant-numeric:tabular-nums}.stat-grid .lab{display:block;font-size:.7rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--red);margin:18px 0 10px}.stat-grid p{font-size:.95rem;color:var(--ink-2);margin:0;max-width:30ch}.pull{display:grid;grid-template-columns:1fr auto;gap:56px;align-items:end;margin-bottom:52px}.pull blockquote{margin:0}.pull q{font-family:var(--ser);font-size:clamp(1.45rem,2.9vw,2.35rem);line-height:1.3;color:var(--navy);font-weight:600;letter-spacing:-.015em;quotes:"\201E" "\201C"}.pull cite{display:block;font-style:normal;font-size:.85rem;color:var(--muted);margin-top:20px;letter-spacing:.05em}.pull .score{text-align:right;white-space:nowrap}.pull .score b{display:block;font-family:var(--ser);font-size:3.6rem;font-weight:600;color:var(--navy);line-height:1;letter-spacing:-.03em}.pull .score .meta{font-size:.82rem;color:var(--muted);margin-top:6px}.pull .score a{font-size:.82rem;color:var(--blue)}.mq-head{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:22px}.mq-head .lab{font-size:.7rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--muted)}.mq-pause{background:none;border:1px solid var(--line);color:var(--navy);cursor:pointer;font-family:var(--san);font-size:.76rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;padding:8px 15px;transition:background .18s ease,border-color .18s ease}.mq-pause:hover{background:var(--navy);color:#fff;border-color:var(--navy)}.mq-track.paused{animation-play-state:paused !important}@media (max-width:860px){.wide .wrap{padding:82px 24px}.stat-grid{grid-template-columns:1fr;gap:38px}.stat-grid>div{padding:0 0 0 20px;border-left:2px solid var(--red)}.stat-grid>div:first-child{padding-left:20px;border-left:2px solid var(--red)}.pull{grid-template-columns:1fr;gap:28px;align-items:start}.pull .score{text-align:left}.stats .wrap{padding:56px 24px 60px}}.split.wide-l{grid-template-columns:1.28fr .82fr}.split.wide-r{grid-template-columns:.82fr 1.28fr} #film .split{align-items:center} #film .filmcard{width:100%}@media (max-width:860px){.split.wide-l,.split.wide-r{grid-template-columns:1fr}}.fd-wrap{background:var(--white);border:1px solid var(--line);padding:38px 40px 42px;border-top:3px solid var(--navy)}.fd-bar{height:2px;background:var(--line);position:relative;margin-bottom:22px}.fd-bar span{position:absolute;left:0;top:0;height:100%;background:var(--red);transition:width .4s cubic-bezier(.4,0,.2,1)}.fd-bar::before,.fd-bar::after{content:"";position:absolute;top:-4px;width:1px;height:10px;background:var(--navy);opacity:.35}.fd-bar::before{left:0}.fd-bar::after{right:0}.fd-meta{display:flex;justify-content:space-between;align-items:center;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:20px}.fd-back{background:none;border:0;padding:0;cursor:pointer;color:var(--red);font:inherit;letter-spacing:.16em;text-transform:uppercase;font-weight:700}.fd-back:hover{text-decoration:underline;text-underline-offset:3px}.fd-q{font-size:clamp(1.35rem,2.6vw,1.95rem);margin-bottom:8px}.fd-hint{font-size:.92rem;color:var(--muted);margin-bottom:24px;max-width:56ch}.fd-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.fd-opt{background:var(--linen);border:1px solid var(--line);cursor:pointer;font-family:var(--san);font-size:.97rem;font-weight:500;color:var(--navy);padding:22px 16px;text-align:left;position:relative;transition:background .2s ease,border-color .2s ease,transform .2s ease,color .2s ease}.fd-opt::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .26s cubic-bezier(.4,0,.2,1)}.fd-opt:hover{background:var(--white);border-color:var(--navy);transform:translateY(-2px)}.fd-opt:hover::after{transform:scaleY(1)}.fd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:28px}.fd-card{border:1px solid var(--line);padding:24px 24px 26px;background:var(--linen);display:flex;flex-direction:column;position:relative}.fd-card.top{background:var(--white);border-color:var(--navy);border-top:3px solid var(--red)}.fd-flag{position:absolute;top:-1px;right:-1px;background:var(--red);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;padding:5px 10px}.fd-cat{display:block;font-size:.66rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}.fd-card h4{font-family:var(--ser);font-size:1.42rem;font-weight:600;margin-bottom:6px}.fd-spec{font-size:.88rem;color:var(--ink-2);margin-bottom:16px}.fd-why{list-style:none;padding:0;margin:0 0 18px;border-top:1px solid var(--line-soft);padding-top:14px}.fd-why li{position:relative;padding-left:18px;font-size:.85rem;color:var(--ink-2);margin-bottom:7px}.fd-why li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;background:var(--red)}.fd-price{margin-top:auto;font-family:var(--ser);font-size:1.55rem;font-weight:600;color:var(--navy);letter-spacing:-.015em;font-variant-numeric:tabular-nums}.fd-cta{display:flex;flex-wrap:wrap;gap:12px}.fd-none{background:var(--sand);padding:22px 24px;font-size:.95rem;margin-bottom:24px}@media (max-width:860px){.fd-wrap{padding:26px 22px 30px}.fd-opts{grid-template-columns:1fr 1fr;gap:10px}.fd-opt{padding:18px 14px;font-size:.92rem}.fd-cards{grid-template-columns:1fr}}@media (max-width:420px){.fd-opts{grid-template-columns:1fr}}.stack-float{transform:translate3d(var(--px,0),calc(var(--py,0px)),0)}@keyframes stackFloat{0%,100%{transform:translate3d(var(--px,0),var(--py,0px),0)}50%{transform:translate3d(var(--px,0),calc(var(--py,0px) - 9px),0)}}@media (max-width:1020px) and (max-height:790px){.hero .wrap{padding-top:26px;padding-bottom:88px}.hero .kicker{margin-bottom:16px}.hero h1{font-size:clamp(1.72rem,6.6vw,2.2rem);margin-bottom:15px}.hero p{font-size:.95rem;line-height:1.55}.hero .btn-row{margin-top:22px}}@media (max-width:1020px) and (max-height:660px){.hero .kicker{display:none}.hero h1{font-size:1.55rem;margin-bottom:12px}.hero p{font-size:.9rem;line-height:1.5}.hero .btn-row{margin-top:18px}.hero .wrap{padding-top:18px;padding-bottom:80px}}.plain img{width:100%;aspect-ratio:16/10;object-fit:cover;border:1px solid var(--line)}.plain picture{display:block}.nav-drop{position:relative}.nav-top{background:none;border:0;cursor:pointer;font-family:var(--san);color:rgba(255,253,250,.84);font-size:.85rem;font-weight:500;padding:10px 11px;letter-spacing:.006em;display:inline-flex;align-items:center;gap:7px;position:relative}.nav-top i{width:6px;height:6px;border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .24s ease;opacity:.7}.nav-top::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px;background:var(--red);transform:scaleX(0);transform-origin:center;transition:transform .26s cubic-bezier(.4,0,.2,1)}.nav-top:hover,.nav-drop:hover .nav-top,.nav-top.open{color:#fff}.nav-drop:hover .nav-top::after,.nav-top.open::after,.nav-top.on::after{transform:scaleX(1)}.nav-top.open i,.nav-drop:hover .nav-top i{transform:rotate(-135deg) translate(-2px,-2px)}.nav-menu{position:absolute;top:calc(100% + 10px);left:-8px;min-width:322px;background:var(--white);border:1px solid var(--line);border-top:2px solid var(--red);padding:8px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .22s ease,transform .22s cubic-bezier(.4,0,.2,1),visibility .22s;box-shadow:0 22px 44px -18px rgba(9,16,38,.45)}.nav-drop:hover .nav-menu,.nav-menu.open,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:none}.nav-menu::before{content:"";position:absolute;top:-8px;left:0;right:0;height:8px}.nav-menu a{display:block;padding:12px 14px;border-bottom:0;color:var(--navy);transition:background .18s ease,padding-left .2s ease}.nav-menu a b{display:block;font-size:.94rem;font-weight:600;margin-bottom:2px}.nav-menu a span{display:block;font-size:.78rem;color:var(--muted);line-height:1.4}.nav-menu a:hover{background:var(--sand);padding-left:19px}.nav-menu a:hover b{color:var(--red)}.nav-menu a.on b{color:var(--red)}.mob-group{display:block;color:rgba(255,253,250,.42);font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;padding:22px 0 8px}.mob nav a.mob-sub{font-size:1.22rem;padding:11px 0 11px 18px;position:relative;border-bottom:1px solid rgba(255,255,255,.07)}.mob nav a.mob-sub::before{content:"";position:absolute;left:0;top:50%;width:8px;height:1px;background:rgba(255,255,255,.3)}.flowgraph{position:relative;padding-top:8px}.fg-rail{position:absolute;left:0;right:0;top:46px;height:1px;background:var(--line)}.fg-rail span{position:absolute;left:0;top:0;height:100%;width:100%;background:var(--navy);transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.3,.7,.3,1)}.flowgraph.in .fg-rail span{transform:scaleX(1)}.fg-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:34px;position:relative}.fg-step{position:relative;padding-top:0}.sec-sand .flowgraph.in .flowgraph.in .fg-step:hover .fg-step h3{margin-bottom:10px}.fg-step p{font-size:.95rem;color:var(--ink-2);margin:0;max-width:34ch}.fg-tag{display:block;font-size:.68rem;font-weight:700;letter-spacing:.17em;text-transform:uppercase;color:var(--red);margin-bottom:9px}.zonefig{background:var(--white);border:1px solid var(--line);padding:30px 32px 26px}.zonefig svg{width:100%;height:auto;display:block}.zone-rect{opacity:0;transform-origin:center;transition:opacity .5s ease}.zonefig.in .zone-rect{opacity:1}.zonefig.in .zone-rect:nth-of-type(1){transition-delay:.05s}.zonefig.in .zone-rect:nth-of-type(2){transition-delay:.13s}.zonefig.in .zone-rect:nth-of-type(3){transition-delay:.21s}.zonefig.in .zone-rect:nth-of-type(4){transition-delay:.29s}.zonefig.in .zone-rect:nth-of-type(5){transition-delay:.37s}.zonefig.in .zone-rect:nth-of-type(6){transition-delay:.45s}.zonefig.in .zone-rect:nth-of-type(7){transition-delay:.53s}.zone-body{opacity:0;transition:opacity .8s ease .7s}.zonefig.in .zone-body{opacity:1}.zonefig figcaption{font-size:.84rem;color:var(--muted);margin-top:16px;text-align:center}.layers{display:flex;flex-direction:column;gap:5px}.layer{position:relative;border:1px solid var(--line);background:var(--white);padding:16px 20px;display:flex;justify-content:space-between;align-items:center;gap:18px;transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .3s ease,background .3s ease;opacity:0;transform:translateX(-14px)}.layers.in .layer{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.3,.7,.3,1),border-color .3s ease}.layers.in .layer:nth-child(1){transition-delay:.05s}.layers.in .layer:nth-child(2){transition-delay:.18s}.layers.in .layer:nth-child(3){transition-delay:.31s}.layer:hover{border-color:var(--navy);transform:translateX(5px)}.layer .lname{font-family:var(--ser);font-size:1.08rem;font-weight:600;color:var(--navy)}.layer .lrole{font-size:.85rem;color:var(--muted);margin-top:2px}.layer .lbar{flex:0 0 92px;height:34px;border:1px solid var(--line-soft)}.layer.l1 .lbar{background:repeating-linear-gradient(135deg,#EDE6DA,#EDE6DA 4px,#E2D8C7 4px,#E2D8C7 8px)}.layer.l2 .lbar{background:radial-gradient(circle at 30% 40%,#C9D6E8 2px,transparent 2px),radial-gradient(circle at 70% 70%,#C9D6E8 2px,transparent 2px),#E7EDF6;background-size:16px 16px}.layer.l3 .lbar{background:linear-gradient(180deg,#DCE4F0,#C2CEE2)}.idx{border-top:1px solid var(--line)}.idx a{display:grid;grid-template-columns:64px 1fr auto;gap:24px;align-items:center;padding:22px 4px;border-bottom:1px solid var(--line);color:var(--ink);transition:padding-left .28s cubic-bezier(.4,0,.2,1),background .22s ease}.idx a:hover{padding-left:16px;background:rgba(255,253,250,.7)}.idx .th{width:64px;height:48px;overflow:hidden;background:var(--sand)}.idx .th img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.idx a:hover .th img{transform:scale(1.1)}.idx .tt{display:flex;flex-direction:column;gap:3px}.idx .tt b{font-family:var(--ser);font-size:1.28rem;font-weight:600;color:var(--navy);transition:color .2s ease}.idx a:hover .tt b{color:var(--red)}.idx .tt span{font-size:.9rem;color:var(--muted)}.idx .ar{font-size:1.1rem;color:var(--red);transition:transform .28s cubic-bezier(.4,0,.2,1)}.idx a:hover .ar{transform:translateX(6px)}.teaser{text-align:center;max-width:720px;margin:0 auto}.teaser .mline{max-width:120px;margin:22px auto}.chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:30px 0 32px}.chip{border:1px solid var(--line);background:var(--white);padding:12px 20px;font-size:.9rem;color:var(--navy);position:relative;transition:transform .28s cubic-bezier(.4,0,.2,1),border-color .22s ease}.chip b{display:block;font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--red);font-weight:700;margin-bottom:3px}.chip:hover{transform:translateY(-3px);border-color:var(--navy)}.collage{display:grid;grid-template-columns:1.18fr .82fr;gap:16px;align-items:stretch}.collage figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--line)}.collage .big{grid-row:1 / span 2}.collage picture{display:block;height:100%}.collage img{width:100%;height:100%;object-fit:cover;display:block}.collage .big{aspect-ratio:4/3.35}.collage .sm{aspect-ratio:4/2.55}.collage figure img{transition:transform .6s cubic-bezier(.4,0,.2,1)}.collage figure:hover img{transform:scale(1.045)}.collage-note{grid-column:1/-1;display:flex;gap:20px;align-items:center;border-top:1px solid var(--line);padding-top:18px;margin-top:4px;flex-wrap:wrap}.collage-note .k{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red)}.collage-note p{margin:0;font-size:.94rem;color:var(--ink-2)}.pay{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.pay>div{border:1px solid var(--line);background:var(--white);padding:30px 26px 32px;text-align:center;transition:transform .3s cubic-bezier(.4,0,.2,1),border-color .25s ease}.pay>div:hover{transform:translateY(-4px);border-color:var(--navy)}.pay svg{width:40px;height:40px;margin:0 auto 18px;display:block;color:var(--navy)}.pay h3{margin-bottom:7px}.pay p{font-size:.9rem;color:var(--muted);margin:0}.ladder{border-top:1px solid var(--line)}.ladder div{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center;padding:15px 0;border-bottom:1px solid var(--line)}.ladder .from{font-family:var(--ser);font-size:1.32rem;color:var(--navy);font-weight:600}.ladder .to{font-family:var(--ser);font-size:1.32rem;color:var(--red);font-weight:600;text-align:right}.ladder .arw{color:var(--muted);font-size:.9rem}.ladder .lab{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700;display:block;margin-bottom:2px}@media (max-width:860px){.fg-steps{grid-template-columns:1fr;gap:26px}.fg-rail{display:none}.idx a{grid-template-columns:52px 1fr auto;gap:16px}.idx .th{width:52px;height:40px}.idx .tt b{font-size:1.1rem}.collage{grid-template-columns:1fr}.collage .big{grid-row:auto}.pay{grid-template-columns:1fr}.layer{padding:14px 16px}.layer .lbar{flex:0 0 64px;height:28px}}.curvefig{background:var(--white);border:1px solid var(--line);padding:28px 30px 22px}.curvefig svg{width:100%;height:auto;display:block}.cv-band{opacity:0;transition:opacity .7s ease .9s}.curvefig.in .cv-band{opacity:1}.cv-line{stroke-dasharray:1400;stroke-dashoffset:1400;transition:stroke-dashoffset 1.7s cubic-bezier(.35,.65,.3,1) .15s}.curvefig.in .cv-line{stroke-dashoffset:0}.cv-dot,.cv-lab{opacity:0;transition:opacity .6s ease 1.5s}.curvefig.in .cv-dot,.curvefig.in .cv-lab{opacity:1}.curvefig figcaption{font-size:.84rem;color:var(--muted);margin-top:14px;text-align:center}.specs{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.specs>div{background:var(--white);padding:28px 24px 30px}.specs b{display:block;font-family:var(--ser);font-size:clamp(2rem,3.6vw,2.7rem);font-weight:600;color:var(--navy);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.specs .u{display:block;font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:14px 0 9px}.specs p{font-size:.9rem;color:var(--ink-2);margin:0}.srcline{border-top:1px solid var(--line);margin-top:34px;padding-top:16px;font-size:.78rem;color:var(--muted);line-height:1.6}.srcline b{color:var(--navy);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.68rem;display:block;margin-bottom:7px}.finding{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;padding:24px 0;border-bottom:1px solid var(--line)}.finding:first-of-type{border-top:1px solid var(--line)}.finding .no{font-family:var(--ser);font-size:1.5rem;font-weight:600;color:var(--red);line-height:1;padding-top:3px;min-width:34px}.finding h3{margin-bottom:7px}.finding p{font-size:.95rem;color:var(--ink-2);margin:0;max-width:62ch}@media (max-width:860px){.specs{grid-template-columns:1fr}.curvefig{padding:20px 16px 16px}.finding{grid-template-columns:1fr;gap:8px}} .mail{color:var(--navy);word-break:break-word}.site-foot .mail{color:rgba(255,253,250,.72)}.dl .mail{color:var(--navy)} .countbar{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}.countbar>div{background:var(--white);padding:26px 18px 28px;text-align:center;transition:background .22s ease,transform .25s cubic-bezier(.4,0,.2,1)}.countbar>div:hover{background:var(--sand);transform:translateY(-3px)}.countbar b{display:block;font-family:var(--ser);font-weight:600;color:var(--navy);font-size:clamp(2rem,3.4vw,2.9rem);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}.countbar span{display:block;font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-top:11px;font-weight:600;line-height:1.35}@media (max-width:860px){.countbar{grid-template-columns:1fr 1fr}.countbar>div{padding:20px 14px 22px}}@media (max-width:420px){.countbar{grid-template-columns:1fr}} .nav-menu .nav-soon{display:block;padding:12px 14px;opacity:.38;cursor:not-allowed;pointer-events:none;color:var(--navy)}.nav-menu .nav-soon b{display:block;font-size:.94rem;font-weight:600;margin-bottom:2px}.nav-menu .nav-soon>span{display:block;font-size:.78rem;color:var(--muted);line-height:1.4}.mob nav .mob-soon{color:rgba(255,253,250,.32);cursor:not-allowed;pointer-events:none} @media (max-width:760px){td:not(.num){display:block;text-align:left}td:not(.num)::before{display:block;margin-bottom:5px}td:not(.num):first-child::before{display:none}} /* ================= Cartoons von Thomas Nehrkorn ================= */ .toon{margin:0;background:none;border:0;padding:0; display:flex;align-items:center;justify-content:center} .toon picture{display:block;width:100%} .toon img{width:100%;height:auto;display:block; transition:transform .5s cubic-bezier(.4,0,.2,1)} .toon:hover img{transform:scale(1.03)} .toon-wide{margin-top:34px} .toon-wide img{max-width:620px;margin:0 auto} .toon-ctr{max-width:340px;margin:0 auto 30px} /* Comics-Seite */ .strips{display:flex;flex-direction:column;gap:46px} .strip{background:none;border:0;padding:0} .strip picture{display:block} .strip img{width:100%;height:auto;display:block} .strip figcaption{font-size:.84rem;color:var(--muted);margin-top:16px; border-top:1px solid var(--line);padding-top:13px;max-width:70ch} .strip .no{display:block;font-size:.68rem;font-weight:700;letter-spacing:.17em; text-transform:uppercase;color:var(--red);margin-bottom:14px} /* PeTA-Urkunde */ .award{display:grid;grid-template-columns:235px 1fr;gap:26px;align-items:center} .award img{width:100%;height:auto;border:1px solid var(--line);display:block} @media (max-width:640px){.award{grid-template-columns:1fr;gap:18px} .award img{max-width:235px}} /* Porträt */ .portrait{margin:0} .portrait img{width:100%;height:auto;display:block;border:1px solid var(--line)} .portrait figcaption{font-size:.82rem;color:var(--muted);margin-top:12px; letter-spacing:.04em} /* ================= Werbefilm als Verlinkung ================= */ .filmcard{display:block;position:relative;line-height:0;border:1px solid var(--line); overflow:hidden;background:var(--navy)} .filmcard picture{display:block} .filmcard img{width:100%;height:auto;display:block; transition:transform .6s cubic-bezier(.4,0,.2,1),filter .3s ease;filter:brightness(.94)} .filmcard:hover img{transform:scale(1.03);filter:brightness(1)} .filmcard::after{content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(9,16,38,.06),rgba(9,16,38,.34))} .film-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2; width:76px;display:block;transition:transform .28s cubic-bezier(.4,0,.2,1)} .film-play svg{width:100%;height:auto;display:block} .yt-bg{fill:#C4161C;opacity:.95} .yt-tri{fill:#fff} .filmcard:hover .film-play{transform:translate(-50%,-50%) scale(1.1)} @media (max-width:860px){.film-play{width:58px}} /* ================= Cartoons von Thomas Nehrkorn ================= */ .toon{margin:0;background:none;border:0;padding:0; display:flex;align-items:center;justify-content:center} .toon picture{display:block;width:100%} .toon img{width:100%;height:auto;display:block; transition:transform .5s cubic-bezier(.4,0,.2,1)} .toon:hover img{transform:scale(1.03)} .toon-wide{margin-top:34px} .toon-wide img{max-width:620px;margin:0 auto} .toon-ctr{max-width:340px;margin:0 auto 30px} /* Comics-Seite */ .strips{display:flex;flex-direction:column;gap:46px} .strip{background:none;border:0;padding:0} .strip picture{display:block} .strip img{width:100%;height:auto;display:block} .strip figcaption{font-size:.84rem;color:var(--muted);margin-top:16px; border-top:1px solid var(--line);padding-top:13px;max-width:70ch} .strip .no{display:block;font-size:.68rem;font-weight:700;letter-spacing:.17em; text-transform:uppercase;color:var(--red);margin-bottom:14px} /* PeTA-Urkunde */ .award{display:grid;grid-template-columns:235px 1fr;gap:26px;align-items:center} .award img{width:100%;height:auto;border:1px solid var(--line);display:block} @media (max-width:640px){.award{grid-template-columns:1fr;gap:18px} .award img{max-width:235px}} /* Porträt */ .portrait{margin:0} .portrait img{width:100%;height:auto;display:block;border:1px solid var(--line)} .portrait figcaption{font-size:.82rem;color:var(--muted);margin-top:12px; letter-spacing:.04em} /* ================= Werbefilm, Start erst auf Klick ================= */ .yt-play:hover /* YouTube-Link in der Fußzeile */ .yt-link{display:inline-flex;align-items:center;gap:9px;color:rgba(255,253,250,.72)} .yt-link svg{width:22px;height:auto;flex:0 0 22px;color:#C4161C;transition:transform .22s ease} .yt-link:hover{color:#fff} .yt-link:hover svg{transform:scale(1.12)} /* Cartoon-Streifen: auf kleinen Bildschirmen zum Vergrößern antippen */ .zoom{display:block;position:relative;line-height:0} .zoom img{transition:transform .5s cubic-bezier(.4,0,.2,1)} .zoom:hover img{transform:scale(1.015)} .zoom-hint{display:none} @media (max-width:760px){ .zoom-hint{display:flex;align-items:center;justify-content:center;gap:8px; margin-top:12px;font-family:var(--san);font-size:.68rem;font-weight:700; letter-spacing:.16em;text-transform:uppercase;color:var(--red);line-height:1.4} .zoom-hint::before{content:"";width:13px;height:13px;flex:0 0 13px; border:1.6px solid currentColor;border-radius:50%; box-shadow:6px 6px 0 -5px currentColor} } /* ================= Entwurfs- und Urheberrechtshinweis ================= */ .wwmark{ position:fixed;left:20px;bottom:20px;z-index:80; width:clamp(252px,25vw,312px); background:#0A1430;border:1px solid rgba(255,255,255,.14); box-shadow:0 20px 44px -16px rgba(4,9,24,.6); transition:width .34s cubic-bezier(.4,0,.2,1),background .3s ease; } .ww-in{padding:17px 44px 17px 18px} .ww-logo{display:block;margin-bottom:11px;line-height:0} .ww-logo img{width:144px;height:auto;display:block;transition:opacity .2s ease} .ww-logo:hover img{opacity:.78} .ww-txt{ margin:0;font-family:var(--san);font-size:.715rem;line-height:1.55; color:rgba(255,253,250,.6); } .ww-txt a{color:#3CB1BE;text-decoration:underline;text-underline-offset:2px} .ww-txt a:hover{color:#5FD0DC} .ww-min{ position:absolute;top:10px;right:10px;width:26px;height:26px;padding:0;cursor:pointer; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16); display:flex;align-items:center;justify-content:center; transition:background .2s ease,border-color .2s ease; } .ww-min:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.32)} .ww-min span[aria-hidden]{ display:block;width:11px;height:2px;background:#fff;transition:transform .3s ease; } .ww-min::after{ content:"";position:absolute;inset:-5px;border:1px solid #3CB1BE; animation:wwPulse 2.4s ease-out infinite;pointer-events:none; } @keyframes wwPulse{ 0%{opacity:.85;transform:scale(.86)} 70%{opacity:0;transform:scale(1.22)} 100%{opacity:0;transform:scale(1.22)} } /* verkleinerter Zustand */ .wwmark.min{width:auto} .wwmark.min .ww-in{padding:10px 42px 10px 14px} .wwmark.min .ww-logo{margin-bottom:0} .wwmark.min .ww-logo img{width:116px} .wwmark.min .ww-txt{display:none} .wwmark.min .ww-min{top:50%;transform:translateY(-50%);width:22px;height:22px} .wwmark.min .ww-min::after{animation:none;opacity:0} .wwmark.min .ww-min span[aria-hidden]{ width:9px;height:9px;background:none; border-right:2px solid #fff;border-top:2px solid #fff;transform:rotate(-45deg); } @media (max-width:860px){ .wwmark{left:12px;right:12px;width:auto;bottom:66px} .wwmark.min{right:auto;width:auto} .ww-txt{font-size:.68rem} } @media (prefers-reduced-motion:reduce){.ww-min::after{animation:none;opacity:.5}} /* ================= Hero: Echte Höhen ================= */ .hero2 .wrap{ min-height:0;height:auto; display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto; align-items:center;gap:0 48px;padding-top:min(7vh,70px);padding-bottom:min(16vh,150px); } @media (min-width:1021px){.hero2 .wrap{min-height:calc(100svh - 114px);max-height:820px}} .hb-mark{position:absolute;right:-3%;top:-6%;width:52%;color:#fff;opacity:.035;pointer-events:none} .hb-mark .mk{width:100%;height:auto;display:block} .hero2 .hero-in{max-width:none} .hero2 .kicker{ border:0;padding:0;margin-bottom:26px;color:#F2B9BB; font-size:.72rem;letter-spacing:.24em; } .hero2 h1{ font-size:clamp(2.5rem,4.9vw,4.7rem);line-height:1;letter-spacing:-.03em; margin-bottom:20px;text-wrap:balance;max-width:12.5ch; } .hero2 h1 em{font-family:var(--seri);font-style:italic;font-weight:400;color:var(--red); letter-spacing:-.02em} .hero-sub{ font-family:var(--seri);font-style:italic;font-weight:400; font-size:clamp(1.15rem,1.7vw,1.5rem);color:rgba(255,253,250,.72);margin:0 0 26px; } .hero-p{color:rgba(255,253,250,.78);font-size:1rem;max-width:40ch;line-height:1.6;margin:0 0 30px} .hero-act{display:flex;align-items:center;gap:26px;flex-wrap:wrap} .tlink{ display:inline-flex;align-items:center;gap:10px;color:#fff;font-weight:600;font-size:.92rem; letter-spacing:.01em;position:relative;padding-bottom:3px; } .tlink::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px; background:rgba(255,255,255,.4);transition:background .2s ease} .tlink i{width:18px;height:1px;background:#fff;position:relative;transition:transform .28s cubic-bezier(.4,0,.2,1)} .tlink i::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px; border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg)} .tlink:hover{color:#fff} .tlink:hover::after{background:#fff} .tlink:hover i{transform:translateX(5px)} /* Stapel und Maßlinie */ .hero2 .hero-art{max-width:640px;width:100%;position:relative;padding-right:80px;justify-self:end} .hero2 .stack img{filter:drop-shadow(-18px 24px 34px rgba(4,9,24,.5)) drop-shadow(0 3px 6px rgba(4,9,24,.3))} .dim{position:absolute;right:0;top:12%;bottom:24%;width:52px} .dim-line{position:absolute;left:14px;top:0;bottom:0;width:1px;background:rgba(255,255,255,.55); transform:scaleY(0);transform-origin:top} .dim-cap{position:absolute;left:5px;width:19px;height:1px;background:rgba(255,255,255,.55);opacity:0} .dim-top{top:0}.dim-bot{bottom:0} .dim-val{position:absolute;left:26px;top:50%;transform:translateY(-50%); display:flex;align-items:baseline;gap:3px;opacity:0;white-space:nowrap} .dim-val b{font-family:var(--ser);font-size:2.35rem;font-weight:600;color:#fff;line-height:1;letter-spacing:-.03em} .dim-val small{font-family:var(--san);font-size:.72rem;font-weight:700;letter-spacing:.14em; text-transform:uppercase;color:#F2B9BB} .dim-lab{position:absolute;left:26px;top:calc(50% + 24px);white-space:nowrap;opacity:0; font-family:var(--san);font-size:.62rem;font-weight:700;letter-spacing:.18em; text-transform:uppercase;color:rgba(255,253,250,.5)} .hero-note{ margin:22px 0 0;padding-right:74px;text-align:right; font-family:var(--seri);font-style:italic;font-size:.95rem;color:rgba(255,253,250,.6); } /* Auftritt */ @keyframes dimDraw{to{transform:scaleY(1)}} @keyframes dimIn{to{opacity:1}} .dim-line{animation:dimDraw 1.1s cubic-bezier(.22,.61,.36,1) 1.05s forwards} .dim-cap{animation:dimIn .4s ease 1.0s forwards} .dim-bot{animation-delay:2.0s} .dim-val{animation:dimIn .7s ease 2.1s forwards} .dim-lab{animation:dimIn .7s ease 2.3s forwards} .hero-note{opacity:0;animation:dimIn .8s ease 2.5s forwards} .hero2 .hero-sub{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .26s both} .hero2 .hero-p{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .36s both} .hero2 .hero-act{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .46s both} @media (max-width:1020px){ .hero2 .wrap{grid-template-columns:1fr;gap:30px;padding-top:44px;padding-bottom:96px} .hero2 h1{max-width:none;font-size:clamp(2.2rem,8vw,3.2rem)} .hero2 .hero-art{display:block;max-width:360px;justify-self:center;padding-right:64px;margin-top:6px} .hb-mark{width:80%;right:-20%;top:auto;bottom:-10%;opacity:.03} .dim-val b{font-size:1.8rem} .hero-note{display:none} } @media (max-width:1020px) and (max-height:790px){ .hero2 .hero-art{display:none} .hero2 .wrap{padding-bottom:84px} } /* ================= Fünf Dinge, die es nicht gibt ================= */ .nein{position:relative;overflow:hidden} .ni-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1px; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1)} .ni{position:relative;background:var(--navy);padding:34px 24px 30px; transition:background .25s ease} .ni:hover{background:#142452} .ni-ic{width:54px;height:54px;display:block;color:rgba(255,253,250,.86);margin-bottom:22px; transition:transform .35s cubic-bezier(.4,0,.2,1)} .ni:hover .ni-ic{transform:translateY(-3px)} .ni b{display:block;font-family:var(--ser);font-size:1.15rem;font-weight:600;color:#fff;margin-bottom:8px} .ni>span:not(.ni-x){display:block;font-size:.84rem;line-height:1.5;color:rgba(255,253,250,.62)} .ni-x{position:absolute;left:18px;top:64px;width:70px;height:2px;background:var(--red); transform:rotate(-24deg) scaleX(0);transform-origin:left center; transition:transform .55s cubic-bezier(.22,.61,.36,1)} .ni.in .ni-x{transform:rotate(-24deg) scaleX(1)} .ni:nth-child(1).in .ni-x{transition-delay:.1s} .ni:nth-child(2).in .ni-x{transition-delay:.25s} .ni:nth-child(3).in .ni-x{transition-delay:.4s} .ni:nth-child(4).in .ni-x{transition-delay:.55s} .ni:nth-child(5).in .ni-x{transition-delay:.7s} .nein .btn-row{margin-top:34px} @media (max-width:1020px){.ni-grid{grid-template-columns:repeat(3,1fr)}.ni:nth-child(4),.ni:nth-child(5){grid-column:span 1}} @media (max-width:640px){.ni-grid{grid-template-columns:1fr 1fr}.ni{padding:26px 18px 22px}.ni-ic{width:44px;height:44px} .ni-x{left:18px;top:50px;width:46px}} /* Porträt auf der Startseite */ .split .portrait{margin:0} .split .portrait img{width:100%;height:auto;display:block;border:1px solid var(--line)} .split .portrait figcaption{font-size:.82rem;color:var(--muted);margin-top:12px;letter-spacing:.04em} @media (min-width:1021px) and (max-height:800px){ .hero2 h1{font-size:clamp(2.2rem,4.1vw,3.7rem);margin-bottom:14px} .hero2 .kicker{margin-bottom:18px} .hero-sub{margin-bottom:18px} .hero-p{margin-bottom:22px} .hero2 .wrap{padding-top:34px;padding-bottom:132px} .hero2 .hero-art{max-width:500px} .hb-mark{top:-14%} } @media (min-width:1021px) and (max-height:740px){ .hero2 .wrap{padding-top:26px;padding-bottom:150px} .hero2 h1{font-size:clamp(2rem,3.8vw,3.3rem)} .hero2 .hero-art{max-width:440px} } /* Mobil: Hero füllt genau einen Bildschirm, ohne Stapel */ @media (max-width:1020px){ .hero2 .hero-art{display:none} .hero2 .wrap{min-height:calc(100svh - 104px);align-content:center; padding-top:24px;padding-bottom:92px;gap:0} .hero2 .kicker{margin-bottom:20px} .hero2 h1{font-size:clamp(2.15rem,8vw,3rem);margin-bottom:16px} .hero-sub{font-size:1.1rem;margin-bottom:18px} .hero-p{font-size:.98rem;margin-bottom:26px} .hero-act{gap:18px} .hb-mark{width:110%;right:-30%;top:auto;bottom:-16%;opacity:.035} } @media (max-width:1020px) and (max-height:700px){ .hero2 .kicker{display:none} .hero2 h1{font-size:clamp(1.8rem,7vw,2.4rem);margin-bottom:12px} .hero-sub{font-size:1rem;margin-bottom:14px} .hero-p{font-size:.9rem;margin-bottom:18px} .hero2 .wrap{padding-top:16px;padding-bottom:80px} } /* ================= Hero: Video mit Glasfläche ================= */ .hero3{background:#0A1430;isolation:isolate} .hero3 .hero-media{position:absolute;inset:0;z-index:0;overflow:hidden} .hero-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:60% 50%} .hero-shade{position:absolute;inset:0; background:linear-gradient(100deg,rgba(7,12,32,.72) 0%,rgba(7,12,32,.42) 46%,rgba(7,12,32,.28) 100%), linear-gradient(180deg,rgba(7,12,32,.3),transparent 30%,transparent 65%,rgba(7,12,32,.55))} .hero3 .wrap{position:relative;z-index:2;min-height:calc(100svh - 114px);max-height:840px; display:flex;align-items:center;padding-top:min(7vh,64px);padding-bottom:min(13vh,120px)} .glass{ width:min(100%,600px);padding:clamp(28px,4vw,52px) clamp(26px,4vw,54px) clamp(30px,4vw,52px); background:rgba(10,20,48,.46); -webkit-backdrop-filter:blur(22px) saturate(1.15);backdrop-filter:blur(22px) saturate(1.15); border:1px solid rgba(255,255,255,.14); box-shadow:0 40px 90px -40px rgba(3,7,20,.8), inset 0 1px 0 rgba(255,255,255,.08); animation:heroRise 1s cubic-bezier(.22,.61,.36,1) .15s both; } .glass .kicker{border:0;padding:0;margin-bottom:22px;color:#F2B9BB;font-size:.7rem;letter-spacing:.24em;animation:none} .glass h1{font-size:clamp(2.4rem,4.4vw,4.2rem);line-height:1;letter-spacing:-.03em;margin-bottom:18px; text-wrap:balance;animation:none;max-width:none} .glass h1 em{font-family:var(--seri);font-style:italic;font-weight:400;color:var(--red);letter-spacing:-.02em} .glass .hero-sub{animation:none;margin-bottom:22px} .glass .hero-p{animation:none;margin-bottom:28px;max-width:44ch} .glass .hero-act{animation:none} @media (prefers-reduced-motion:reduce){.hero-vid{display:none}.hero3 .hero-media{background:url(hero-poster.webp) center/cover}} @media (max-width:1020px){ .hero3 .wrap{min-height:calc(100svh - 104px);align-items:center;padding-top:22px;padding-bottom:90px} .glass{width:100%;padding:26px 22px 28px} .glass h1{font-size:clamp(2rem,7.6vw,2.8rem)} .hero-vid{object-position:55% 50%} } @media (max-width:1020px) and (max-height:700px){ .glass .kicker{display:none} .glass h1{font-size:clamp(1.7rem,6.6vw,2.3rem);margin-bottom:12px} .glass .hero-sub{font-size:1rem;margin-bottom:14px} .glass .hero-p{font-size:.9rem;margin-bottom:18px} .glass{padding:20px 18px 22px} .hero3 .wrap{padding-top:14px;padding-bottom:78px} } /* Bildmarke weiß */ .brand .mk{color:#fff} /* Preisversprechen: Auftritt per Animation, Hover per Transition, sauber getrennt */ .fg-step{opacity:0;transform:translateY(12px)} .flowgraph.in .fg-step{animation:fgIn .55s cubic-bezier(.22,.61,.36,1) forwards} .flowgraph.in .fg-step:nth-child(1){animation-delay:.15s} .flowgraph.in .fg-step:nth-child(2){animation-delay:.45s} .flowgraph.in .fg-step:nth-child(3){animation-delay:.75s} @keyframes fgIn{to{opacity:1;transform:none}} .fg-dot{width:92px;height:92px;border-radius:50%;background:var(--linen);border:1px solid var(--line); display:flex;align-items:center;justify-content:center;font-family:var(--ser);font-size:1.7rem; font-weight:600;color:var(--navy);position:relative;z-index:2;margin-bottom:24px; transition:background .18s ease,border-color .18s ease,color .18s ease,transform .22s cubic-bezier(.4,0,.2,1)} .sec-sand .fg-dot{background:var(--sand)} .fg-step:hover .fg-dot{background:var(--navy);color:#fff;border-color:var(--navy);transform:scale(1.06)} @media (prefers-reduced-motion:reduce){.fg-step{opacity:1;transform:none}} /* ================= Hero-Variante B: Video in abgerundeter Box ================= */ .hero4 .wrap{min-height:calc(100svh - 114px);max-height:840px; display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0 56px; padding-top:min(7vh,64px);padding-bottom:min(13vh,120px)} .hero4 .hero-in{max-width:none} .hero4 .kicker{border:0;padding:0;margin-bottom:22px;color:#F2B9BB;font-size:.7rem;letter-spacing:.24em} .hero4 h1{font-size:clamp(2.4rem,4.4vw,4.2rem);line-height:1;letter-spacing:-.03em;margin-bottom:18px;text-wrap:balance;max-width:none} .hero4 h1 em{font-family:var(--seri);font-style:italic;font-weight:400;color:var(--red);letter-spacing:-.02em} .hero4 .hero-sub{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .26s both} .hero4 .hero-p{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .36s both} .hero4 .hero-act{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .46s both} .vbox{position:relative;justify-self:end;width:100%;max-width:600px;aspect-ratio:4/3; border-radius:28px;overflow:hidden;background:#0A1430; border:1px solid rgba(255,255,255,.14); box-shadow:0 50px 100px -40px rgba(3,7,20,.85),0 0 0 8px rgba(255,255,255,.04); animation:vboxIn 1.2s cubic-bezier(.2,.72,.26,1) .3s both} @keyframes vboxIn{from{opacity:0;transform:translateY(40px) scale(.97)}to{opacity:1;transform:none}} .vbox-vid{width:100%;height:100%;object-fit:cover;display:block} .vbox::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 55%,rgba(7,12,32,.55));border-radius:inherit} .vbox-tag{position:absolute;left:26px;bottom:22px;z-index:2;display:flex;align-items:center;gap:14px; font-family:var(--san);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:rgba(255,253,250,.86)} .vbox-tag .mline{flex:0 0 44px;background:rgba(255,255,255,.4)} .vbox-tag .mline::before,.vbox-tag .mline::after{background:#fff;opacity:.7} @media (prefers-reduced-motion:reduce){.vbox-vid{display:none}.vbox{background:url(hero-montage-poster.webp) center/cover}} @media (min-width:1021px) and (max-height:800px){ .hero4 h1{font-size:clamp(2.2rem,4vw,3.6rem)}.vbox{max-width:480px}.hero4 .wrap{padding-bottom:130px}} @media (max-width:1020px){ .hero4 .wrap{grid-template-columns:1fr;gap:26px;min-height:calc(100svh - 104px);align-content:center;padding-top:20px;padding-bottom:88px} .hero4 h1{font-size:clamp(2rem,7.6vw,2.8rem)} .vbox{max-width:100%;aspect-ratio:16/10;border-radius:20px;justify-self:stretch} .vbox-tag{left:16px;bottom:14px;font-size:.58rem} } @media (max-width:1020px) and (max-height:760px){.vbox{display:none}.hero4 .wrap{padding-bottom:80px}} /* ================= Header: Glas ================= */ .site-head{background:rgba(14,27,60,.78);-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2); border-bottom:1px solid rgba(255,255,255,.08)} /* ================= Hero: weiß, zwei Hälften ================= */ .hero5{background:var(--white);isolation:auto} .hero5 .wrap{padding-top:min(5vh,44px);padding-bottom:min(6vh,56px);min-height:calc(100svh - 114px);max-height:820px; display:flex;align-items:center} .h5-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:100%;align-items:stretch} .h5-text,.h5-video{border:1px solid var(--line);border-radius:26px;position:relative;overflow:hidden} .h5-text{padding:clamp(30px,4.2vw,60px) clamp(28px,4.2vw,58px);display:flex;flex-direction:column;justify-content:center; background:linear-gradient(160deg,#FFFDFA,#F8F5F0)} .h5-text .kicker{border:0;padding:0;margin-bottom:22px;color:var(--red);font-size:.7rem;letter-spacing:.24em;animation:none} .h5-text h1{color:var(--navy);font-size:clamp(2.3rem,4.1vw,4rem);line-height:1;letter-spacing:-.03em;margin-bottom:18px; text-wrap:balance;animation:none;max-width:none} .h5-text h1 em{font-family:var(--seri);font-style:italic;font-weight:400;color:var(--red);letter-spacing:-.02em} .h5-text .hero-sub{color:var(--muted);margin-bottom:20px;animation:none} .h5-text .hero-p{color:var(--ink-2);margin-bottom:30px;animation:none;max-width:42ch} .h5-text .hero-act{animation:none;gap:22px} .h5-video{background:var(--navy);min-height:420px} .h5-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .h5-video::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,transparent 60%,rgba(7,12,32,.5))} .h5-tag{position:absolute;left:26px;bottom:22px;z-index:2;display:flex;align-items:center;gap:14px; font-family:var(--san);font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff} .h5-tag .mline{flex:0 0 44px;background:rgba(255,255,255,.45)} .h5-tag .mline::before,.h5-tag .mline::after{background:#fff;opacity:.8} .h5-text{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .1s both} .h5-video{animation:heroRise 1s cubic-bezier(.22,.61,.36,1) .25s both} @media (prefers-reduced-motion:reduce){.h5-vid{display:none}.h5-video{background:url(hero-montage-poster.webp) center/cover}} /* Textlink dunkel */ .tlink-dark{color:var(--navy)} .tlink-dark::after{background:rgba(14,27,60,.3)} .tlink-dark i{background:var(--navy)} .tlink-dark i::after{border-color:var(--navy)} .tlink-dark:hover{color:var(--red)} .tlink-dark:hover::after{background:var(--red)} .tlink-dark:hover i{background:var(--red)} .tlink-dark:hover i::after{border-color:var(--red)} /* Wachsender Anruf-Button mit Porträt: Layoutbox bleibt gleich, die rote Fläche wächst nach rechts */ .btn-grow{position:relative;display:inline-flex;align-items:center;gap:14px; padding:9px 62px 9px 9px;color:#fff;font-family:var(--san);font-weight:600;font-size:.94rem; text-decoration:none;isolation:isolate;border-radius:999px} .btn-grow::before{content:"";position:absolute;inset:0;right:40px;z-index:-1;background:var(--red);border-radius:999px; transition:right .34s cubic-bezier(.4,0,.2,1),background .2s ease} .btn-grow:hover::before{right:0;background:#A8121A} .bg-av{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.85);flex:0 0 44px;display:block} .bg-lab{white-space:nowrap} .bg-arr{position:absolute;right:20px;top:50%;width:18px;height:1px;background:#fff; transform:translate(-8px,-50%);opacity:0;transition:transform .34s cubic-bezier(.4,0,.2,1),opacity .25s ease} .bg-arr::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg)} .btn-grow:hover .bg-arr{transform:translate(0,-50%);opacity:1} /* Drei Zahlen weiß, dann Blau */ .stats-white{background:var(--white);border-top:1px solid var(--line)} .sec-sort .eyebrow{color:#F2B9BB} .sec-sort h2{color:#fff} .sec-sort .lead,.sec-sort .sec-head p{color:rgba(255,253,250,.74)} .sec-sort .tile{background:var(--white)} /* Nach-oben-Knopf */ .totop{position:fixed;right:20px;bottom:20px;z-index:79;width:46px;height:46px;border-radius:50%; background:var(--navy);border:1px solid rgba(255,255,255,.18);box-shadow:0 12px 28px -10px rgba(4,9,24,.6); display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transform:translateY(12px); transition:opacity .3s ease,transform .3s cubic-bezier(.4,0,.2,1),visibility .3s,background .2s ease} .totop.show{opacity:1;visibility:visible;transform:none} .totop:hover{background:var(--red)} .totop i{width:10px;height:10px;border-top:2px solid #fff;border-left:2px solid #fff;transform:rotate(45deg) translate(2px,2px)} @media (max-width:860px){.totop{right:14px;bottom:70px;width:42px;height:42px}} @media (max-width:1020px){ .hero5 .wrap{min-height:0;max-height:none;padding-top:22px;padding-bottom:40px} .h5-grid{grid-template-columns:1fr;gap:14px} .h5-text{padding:26px 22px 28px;border-radius:20px} .h5-text h1{font-size:clamp(2rem,7.4vw,2.8rem)} .h5-video{min-height:0;aspect-ratio:4/3;border-radius:20px} .h5-tag{left:16px;bottom:14px;font-size:.58rem} .btn-grow{padding-right:56px} } .hero5::after{display:none} .hero5 .hero-bg{display:none} .h5-grid{grid-template-columns:1.08fr .92fr} .h5-text{padding:clamp(28px,3.4vw,48px) clamp(26px,3.4vw,46px)} .h5-text .hero-act{gap:18px} .btn-grow{padding-right:58px;font-size:.92rem} @media (max-width:1180px){.h5-text .hero-act{flex-direction:column;align-items:flex-start;gap:16px}} .btn-grow,.btn-grow:hover,.btn-grow:focus-visible{color:#fff} .btn-grow .bg-lab{color:#fff} .h5-grid{grid-template-columns:1.14fr .86fr} .h5-text{padding:clamp(28px,3.2vw,44px) clamp(26px,3.2vw,42px)} .h5-text .hero-act{gap:16px;flex-wrap:nowrap} .tlink{white-space:nowrap} @media (max-width:1180px){.h5-text .hero-act{flex-direction:row;flex-wrap:wrap}} @media (max-width:1020px){.h5-grid{grid-template-columns:1fr}} /* ================= Hero: blau, Textkarte weiß, Video füllt die rechte Hälfte ================= */ .hero5{background:var(--navy)} .hero5 .wrap{position:relative;z-index:2} .h5-video{position:absolute;top:0;bottom:0;left:calc(50% + 10px);right:0;border:0;border-radius:0;min-height:0;z-index:1; animation:none} .h5-video::after{background:linear-gradient(90deg,rgba(14,27,60,.35),transparent 30%),linear-gradient(180deg,transparent 65%,rgba(7,12,32,.45))} .h5-text{background:var(--white);border-color:rgba(255,255,255,.14);box-shadow:0 40px 90px -40px rgba(3,7,20,.7)} .h5-spacer{min-height:1px} .h5-tag{left:auto;right:30px;bottom:26px} .h5-grid{grid-template-columns:1fr 1fr;gap:20px} /* Header wieder deckend, Wortmarke weiß, Bildmarke rot */ .site-head{background:var(--navy);-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom:1px solid rgba(255,255,255,.06)} .brand .bm{color:#fff} .brand .mk{color:var(--red)} /* Sortiment auf Blau: Kacheltitel dunkel, rot beim Überfahren */ .sec-sort .tile h3{color:var(--navy)} .sec-sort .tile:hover h3{color:var(--red)} .sec-sort .tile p{color:var(--ink-2)} @media (max-width:1020px){ .h5-video{position:relative;left:auto;right:auto;top:auto;bottom:auto;aspect-ratio:4/3;border-radius:20px; margin:14px 24px 0;border:1px solid rgba(255,255,255,.14);overflow:hidden} .h5-video::after{background:linear-gradient(180deg,transparent 60%,rgba(7,12,32,.5))} .h5-tag{left:16px;right:auto;bottom:14px} .h5-spacer{display:none} .hero5 .wrap{padding-bottom:0} .hero5{padding-bottom:40px} } .h5-text{padding:clamp(28px,3vw,44px) clamp(24px,2.8vw,38px)} .h5-text .hero-act{gap:14px} .btn-grow{padding-right:54px;gap:12px} .btn-grow .bg-lab{font-size:.9rem} .tlink-dark{font-size:.9rem} .h5-text{padding:clamp(28px,3vw,44px) clamp(22px,2.5vw,34px)} .btn-grow{padding:8px 52px 8px 8px;gap:11px} .bg-av{width:42px;height:42px;flex-basis:42px} .btn-grow .bg-lab,.tlink-dark{font-size:.88rem} @media (max-width:1180px){.h5-text .hero-act{flex-wrap:wrap}} .h5-grid{grid-template-columns:1.07fr .93fr} @media (min-width:1021px) and (max-width:1440px){.h5-video{left:calc(53.5% + 8px)}} @media (min-width:1441px){.h5-video{left:calc(50% + 50px)}} /* Video läuft unter die Karte und geht weich ins Blau über */ .h5-video{left:16%} .h5-video::after{background:linear-gradient(90deg,var(--navy) 0%,rgba(14,27,60,.92) 14%,rgba(14,27,60,.55) 32%,rgba(14,27,60,.12) 50%,transparent 62%), linear-gradient(180deg,rgba(14,27,60,.25),transparent 22%,transparent 70%,rgba(7,12,32,.5))} @media (min-width:1021px) and (max-width:1440px){.h5-video{left:16%}} @media (min-width:1441px){.h5-video{left:18%}} /* Karte minimal durchsichtig */ .h5-text{background:rgba(255,253,250,.93);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} /* Bildmarke weiß */ .brand .mk{color:#fff} /* Zahlen-Ticker */ .stat-grid b{font-variant-numeric:tabular-nums} .tick{display:inline-block;min-width:1ch} @media (max-width:1020px){.h5-video{left:auto}.h5-video::after{background:linear-gradient(180deg,transparent 60%,rgba(7,12,32,.5))}} /* Stapel mit Maßskala rechts neben der Karte, über dem Video */ .h5-art{position:relative;z-index:3;justify-self:center;align-self:center;width:100%;max-width:560px; padding-right:76px;padding-left:6px} .h5-art .stack{position:relative} .h5-art .stack::before{content:"";position:absolute;left:6%;right:6%;bottom:2%;height:12%; background:radial-gradient(50% 50% at 50% 50%,rgba(3,7,20,.7),transparent 72%);filter:blur(14px);z-index:-1} .h5-art .stack img{width:100%;height:auto;display:block; filter:drop-shadow(-16px 22px 32px rgba(4,9,24,.55)) drop-shadow(0 3px 6px rgba(4,9,24,.35))} .h5-art .dim{position:absolute;right:0;top:14%;bottom:26%;width:52px} .h5-art{animation:heroRise 1s cubic-bezier(.22,.61,.36,1) .3s both} /* Video hinter dem Stapel etwas mehr abdunkeln, damit der Freisteller trägt */ .h5-video::after{background:linear-gradient(90deg,var(--navy) 0%,rgba(14,27,60,.92) 14%,rgba(14,27,60,.55) 32%,rgba(14,27,60,.22) 50%,rgba(14,27,60,.28) 100%), linear-gradient(180deg,rgba(14,27,60,.3),transparent 24%,transparent 68%,rgba(7,12,32,.6))} @media (max-width:1020px){ .h5-art{max-width:340px;padding-right:66px;margin:6px auto 0} .h5-art .dim-val b{font-size:1.8rem} } @media (max-width:1020px) and (max-height:760px){.h5-art{display:none}} .h5-art{max-width:610px;padding-right:80px} @media (max-width:1020px){.h5-art{max-width:340px;padding-right:66px}} @media (max-width:1020px){ .hero5{display:flex;flex-direction:column} .hero5 .wrap{order:1} .h5-video{order:2} .h5-grid{grid-template-columns:1fr} .h5-art{display:none} } /* Stapel auf volle Spaltenbreite, leicht über die weiße Karte ragend */ .h5-art{max-width:none;width:calc(100% + 64px);margin-left:-64px;padding-right:74px;padding-left:0;justify-self:stretch;align-self:center} .h5-art .stack{filter:none} .h5-art .dim{top:11%;bottom:22%} .h5-art .dim-val{gap:5px} .h5-art .dim-val b{font-size:2.15rem} .h5-art .dim-val small{font-size:.68rem} .h5-art .dim-val small:first-of-type{margin:0 2px;color:rgba(255,253,250,.7);text-transform:none;letter-spacing:.06em;font-weight:600} @media (min-width:1021px) and (max-height:800px){.h5-art{width:calc(100% + 40px);margin-left:-40px;padding-right:66px}} @media (max-width:1020px){.h5-art{display:none}} /* ================= Hero 6: lange weiße Box mit Ausklapp-Galerie ================= */ .hero6{background:var(--navy);padding:clamp(22px,4vh,40px) 0 clamp(26px,5vh,48px);min-height:calc(100svh - 114px); display:flex;align-items:center;isolation:isolate} .hero6 .h5-video{left:0;right:0;z-index:0;position:absolute;top:0;bottom:0} .hero6 .h5-video::after{background:linear-gradient(90deg,rgba(14,27,60,.55),rgba(14,27,60,.35) 40%,rgba(14,27,60,.45)), linear-gradient(180deg,rgba(14,27,60,.4),transparent 30%,transparent 70%,rgba(7,12,32,.6))} .h6-box{position:relative;z-index:2; margin-left:max(24px,calc((100% - var(--wrap)) / 2 + 24px));margin-right:0; background:rgba(255,253,250,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.16);border-right:0;border-radius:28px 0 0 28px; box-shadow:0 40px 90px -40px rgba(3,7,20,.7); display:grid;grid-template-columns:minmax(360px,.86fr) 1.14fr;gap:clamp(22px,3vw,44px); padding:clamp(26px,3.2vw,44px) clamp(22px,3vw,40px) clamp(26px,3.2vw,44px) clamp(24px,3.2vw,46px); animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .1s both} .h6-text{display:flex;flex-direction:column;justify-content:center} .h6-text .kicker{border:0;padding:0;margin-bottom:20px;color:var(--red);font-size:.7rem;letter-spacing:.24em;animation:none} .h6-text h1{color:var(--navy);font-size:clamp(2.1rem,3.4vw,3.4rem);line-height:1;letter-spacing:-.03em;margin-bottom:16px;text-wrap:balance;animation:none;max-width:none} .h6-text h1 em{font-family:var(--seri);font-style:italic;font-weight:400;color:var(--red);letter-spacing:-.02em} .h6-text .hero-sub{color:var(--muted);margin-bottom:18px;animation:none;font-size:1.1rem} .h6-text .hero-p{color:var(--ink-2);margin-bottom:26px;animation:none;max-width:40ch;font-size:.98rem} .h6-text .hero-act{animation:none;gap:14px;flex-wrap:wrap} /* Galerie */ .h6-gal{display:flex;gap:10px;min-height:min(520px,58vh);height:min(520px,58vh)} .gt{position:relative;flex:1 1 0;min-width:0;border-radius:20px;overflow:hidden;background:var(--navy); transition:flex-grow .62s cubic-bezier(.4,0,.2,1);cursor:pointer;isolation:isolate} .gt.on{flex-grow:4.2;cursor:default} .gt picture,.gt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block; transition:transform .8s cubic-bezier(.4,0,.2,1),filter .4s ease} .gt:not(.on) img{filter:saturate(.85) brightness(.9)} .gt:not(.on):hover img{transform:scale(1.06);filter:saturate(1) brightness(1)} .gt::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(180deg,rgba(7,12,32,.05),rgba(7,12,32,.12) 45%,rgba(7,12,32,.78));transition:opacity .4s ease} .gt-hit{position:absolute;inset:0;z-index:3;background:none;border:0;padding:0;cursor:pointer; border-radius:inherit} .gt.on .gt-hit{pointer-events:none} .gt-hit:focus-visible{outline:2px solid #fff;outline-offset:-4px} .gt-num{position:absolute;left:16px;top:14px;z-index:2;font-family:var(--san);font-size:.66rem;font-weight:700; letter-spacing:.18em;color:rgba(255,253,250,.8)} .gt-head{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 16px 18px; transition:opacity .3s ease} .gt-title{display:block;font-family:var(--ser);font-weight:600;color:#fff;font-size:1.05rem;line-height:1.15; white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.35)} .gt:not(.on) .gt-head{left:auto;right:0;bottom:0;top:0;padding:0;width:100%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px} .gt:not(.on) .gt-title{writing-mode:vertical-rl;transform:rotate(180deg);font-size:.98rem;letter-spacing:.02em} .gt-more{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:0 22px 22px; opacity:0;transform:translateY(12px);transition:opacity .45s ease .25s,transform .45s cubic-bezier(.22,.61,.36,1) .25s;pointer-events:none} .gt.on .gt-more{opacity:1;transform:none;pointer-events:auto} .gt.on .gt-head{bottom:auto;top:auto;padding:0 22px;position:absolute;left:0;right:0;bottom:118px} .gt.on .gt-title{font-size:clamp(1.5rem,2.2vw,2rem)} .gt-more p{margin:0 0 14px;color:rgba(255,253,250,.86);font-size:.9rem;line-height:1.5;max-width:44ch} .gt-cta{display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;font-family:var(--san); font-weight:600;font-size:.86rem;padding:11px 18px;border-radius:999px;transition:background .2s ease,transform .25s ease} .gt-cta:hover{background:#A8121A;color:#fff;transform:translateY(-1px)} .gt-cta i{width:16px;height:1px;background:#fff;position:relative;display:block} .gt-cta i::after{content:"";position:absolute;right:0;top:-3.5px;width:7px;height:7px;border-top:1px solid #fff;border-right:1px solid #fff;transform:rotate(45deg)} @media (prefers-reduced-motion:reduce){.gt{transition:none}.gt img{transition:none}} @media (max-width:1240px){.h6-box{grid-template-columns:minmax(320px,.9fr) 1.1fr}.h6-text h1{font-size:clamp(2rem,3vw,3rem)}} @media (max-width:1020px){ .hero6{min-height:0;padding:16px 0 28px;display:block} .h6-box{margin:0 0 0 12px;border-radius:22px 0 0 22px;grid-template-columns:1fr;gap:18px;padding:22px 18px 20px 20px} .h6-text h1{font-size:clamp(1.9rem,7vw,2.6rem)} .h6-gal{flex-direction:column;height:auto;min-height:0;gap:8px} .gt{flex:0 0 auto;height:54px;transition:height .55s cubic-bezier(.4,0,.2,1)} .gt.on{height:300px} .gt:not(.on) .gt-head{top:0;bottom:0;left:0;right:0;justify-content:flex-start;align-items:center;padding:0 16px 0 52px} .gt:not(.on) .gt-title{writing-mode:horizontal-tb;transform:none;font-size:.95rem} .gt-num{top:50%;transform:translateY(-50%);left:16px} .gt.on .gt-num{top:14px;transform:none} .gt.on .gt-head{bottom:112px;padding:0 18px} .gt-more{padding:0 18px 18px} } /* Finder-Teaser mit Stapel */ .stackfig{margin:0;position:relative} .stackfig .stack img{width:100%;height:auto;display:block;filter:drop-shadow(-14px 22px 30px rgba(14,27,60,.28)) drop-shadow(0 3px 6px rgba(14,27,60,.15))} .stackfig figcaption{display:flex;align-items:center;gap:14px;margin-top:22px;font-family:var(--san);font-size:.64rem;font-weight:700; letter-spacing:.18em;text-transform:uppercase;color:var(--muted)} .stackfig figcaption .mline{flex:0 0 44px;margin:0} /* Film auf Blau */ #film.sec-navy .eyebrow{color:#F2B9BB} #film.sec-navy h2{color:#fff} #film.sec-navy .mline{background:rgba(255,255,255,.28)} #film.sec-navy .mline::before,#film.sec-navy .mline::after{background:rgba(255,255,255,.7)} #film.sec-navy .lead{color:rgba(255,253,250,.76)} #film.sec-navy .filmcard{border-color:rgba(255,255,255,.16)} .gt.on .gt-head{display:none} .gt-t{margin:0 0 10px;font-family:var(--ser);font-weight:600;color:#fff;font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.05;text-shadow:0 2px 12px rgba(0,0,0,.35)} .gt-more p{margin-bottom:16px} .h6-text .hero-act{gap:12px} .h6-text .btn-grow{padding-right:50px} .h6-text .tlink-dark{font-size:.86rem} /* ================= Hero 7: Text links, waagerechtes Akkordeon rechts, ohne Kasten ================= */ .hero7{background:var(--navy);padding:clamp(28px,5vh,56px) 0 clamp(30px,6vh,60px);min-height:calc(100svh - 114px); display:flex;align-items:center;isolation:isolate} .hero7 .h5-video{left:0;right:0;z-index:0;position:absolute;top:0;bottom:0} .hero7 .h5-video::after{background:linear-gradient(90deg,rgba(14,27,60,.9),rgba(14,27,60,.7) 45%,rgba(14,27,60,.6)), linear-gradient(180deg,rgba(14,27,60,.5),transparent 30%,transparent 70%,rgba(7,12,32,.7))} .h7-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,64px);align-items:center} .h7-text{display:flex;flex-direction:column;justify-content:center;animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .1s both} .h7-text .kicker{border:0;padding:0;margin-bottom:22px;color:#F2B9BB;font-size:.7rem;letter-spacing:.24em;animation:none} .h7-text h1{color:#fff;font-size:clamp(2.3rem,4vw,4rem);line-height:1;letter-spacing:-.03em;margin-bottom:18px;text-wrap:balance;animation:none;max-width:none} .h7-text h1 em{font-family:var(--seri);font-style:italic;font-weight:400;color:var(--red-bright);letter-spacing:-.02em} .h7-text .hero-sub{color:rgba(255,253,250,.72);margin-bottom:20px;animation:none} .h7-text .hero-p{color:rgba(255,253,250,.78);margin-bottom:28px;animation:none;max-width:42ch} .h7-text .hero-act{animation:none;gap:16px;flex-wrap:wrap} .h7-text .btn-grow::before{right:40px} .h7-gal{display:flex;flex-direction:column;gap:8px;animation:heroRise 1s cubic-bezier(.22,.61,.36,1) .25s both} .h7-gal .gt{flex:0 0 auto;height:58px;border-radius:16px;transition:height .55s cubic-bezier(.4,0,.2,1)} .h7-gal .gt.on{height:296px} .h7-gal .gt:not(.on) .gt-head{top:0;bottom:0;left:0;right:0;justify-content:flex-start;align-items:center;padding:0 18px 0 58px;display:flex} .h7-gal .gt:not(.on) .gt-title{writing-mode:horizontal-tb;transform:none;font-size:1rem;white-space:nowrap} .h7-gal .gt:not(.on)::after{background:linear-gradient(90deg,rgba(7,12,32,.82),rgba(7,12,32,.5) 55%,rgba(7,12,32,.25))} .h7-gal .gt-num{top:50%;transform:translateY(-50%);left:18px} .h7-gal .gt.on .gt-num{top:16px;transform:none} .h7-gal .gt.on::after{background:linear-gradient(90deg,rgba(7,12,32,.72),rgba(7,12,32,.35) 60%,rgba(7,12,32,.1)),linear-gradient(180deg,transparent 40%,rgba(7,12,32,.55))} .h7-gal .gt-more{padding:0 22px 20px} .h7-gal .gt-t{font-size:clamp(1.4rem,1.9vw,1.75rem);margin-bottom:8px} .h7-gal .gt-more p{margin-bottom:14px;max-width:48ch;font-size:.88rem} .h7-gal .gt:not(.on):hover .gt-head .gt-title{color:#fff} .h7-gal .gt:not(.on)::before{content:"";position:absolute;right:18px;top:50%;width:9px;height:9px;margin-top:-6px;z-index:2; border-right:1.5px solid rgba(255,255,255,.7);border-bottom:1.5px solid rgba(255,255,255,.7);transform:rotate(45deg);transition:transform .25s ease} .h7-gal .gt:not(.on):hover::before{transform:translateY(3px) rotate(45deg)} @media (max-width:1020px){ .hero7{min-height:0;padding:22px 0 30px;display:block} .h7-grid{grid-template-columns:1fr;gap:26px} .h7-text h1{font-size:clamp(1.95rem,7vw,2.6rem)} .h7-gal .gt{height:54px} .h7-gal .gt.on{height:270px} } @media (min-width:1021px) and (max-height:820px){.h7-gal .gt{height:50px}.h7-gal .gt.on{height:250px}.h7-text h1{font-size:clamp(2.1rem,3.4vw,3.3rem)}} /* ================= Mobil-Feinschliff ================= */ @media (max-width:640px){ /* Nein-Liste als kompakte Zeilen */ .ni-grid{grid-template-columns:1fr;gap:1px} .ni{display:grid;grid-template-columns:46px 1fr;column-gap:16px;align-items:start;padding:18px 16px} .ni-ic{width:40px;height:40px;margin:0;grid-row:1/3} .ni b{font-size:1rem;margin-bottom:4px} .ni>span:not(.ni-x){font-size:.82rem} .ni-x{left:12px;top:36px;width:48px} /* Preisversprechen: Schritte enger */ .flowgraph .grid{gap:22px} .fg-dot{width:64px;height:64px;font-size:1.3rem;margin-bottom:14px} /* Sprungleiste: direkt unter dem Header, mit eigenem Innenabstand */ .anchors{top:66px} .anchors .wrap{padding-top:8px;padding-bottom:8px;gap:4px 6px} .anchors a{padding:9px 12px;font-size:.8rem;border:1px solid var(--line);border-radius:999px} .anchors a::after{display:none} .anchors a:hover,.anchors a.on{background:var(--navy);color:#fff;border-color:var(--navy)} /* Zahlen etwas kompakter */ .stat-grid b{font-size:2.6rem} } @media (max-width:380px){ .brand{gap:9px}.brand .mk{width:28px;flex-basis:28px} .brand .bm{font-size:.86rem;letter-spacing:.16em} .brand .bs{font-size:.5rem;letter-spacing:.15em} .mob-top .brand .bm{font-size:.95rem} .burger{width:42px;height:42px} } html,body{overflow-x:clip} /* ===================================================================== v26: hell, rot-weiß, abgerundet. Nachtblau nur noch als seltener Akzent ===================================================================== */ :root{ --deep:#0E1B3C; --navy:#171A22; /* Text und dunkle Elemente: Tinte statt Blau */ --navy-2:#2A2E39; --ink:#171A22;--ink-2:#30343F;--muted:#5B606C;--muted-2:#6E7380; --linen:#FFFFFF;--white:#FFFFFF; --sand:#FBF4F3;--sand-2:#F3E4E2;--tint:#FBF4F3; --blue:#B3131A; --line:rgba(23,26,34,.12);--line-soft:rgba(23,26,34,.07); --r-btn:12px;--r:18px;--r-lg:26px; } body{background:#fff;color:var(--ink)} .lead{color:var(--ink-2)} .sec-tint{background:var(--tint)} .sec-sand{background:var(--tint)} .sec-white{background:#fff} /* dunkle Akzente: nur Nein-Liste, Abschluss, Mobilmenü, Unterseitenköpfe */ .sec-navy,.nein,.cta,.mob,.page-head,.wide{background:var(--deep)} .page-head::after{background:linear-gradient(95deg,rgba(14,27,60,.92),rgba(14,27,60,.62))} /* Abstände Überschrift zu Text */ h2+p,h2+.lead,.sec-head h2+p,.split-head h2+p{margin-top:18px} .sec-head .lead,.split .lead{margin-top:18px} h3+p{margin-top:8px} .feat h3,.tile h3{margin-bottom:8px} /* ---------- Kopf: hell ---------- */ .topbar{background:var(--red);color:rgba(255,255,255,.92)} .topbar a{color:#fff} .site-head{background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .brand .bm{color:var(--ink)} .brand .bs{color:var(--muted)} .brand .mk{color:var(--red)} .nav a,.nav-top{color:var(--ink-2)} .nav a:hover,.nav a.on,.nav-top:hover,.nav-drop:hover .nav-top,.nav-top.open{color:var(--ink)} .burger{border-color:var(--line);color:var(--ink);border-radius:10px} .burger span{background:var(--ink)} .site-head .btn-red{border-radius:var(--r-btn)} .mob .brand .bm{color:#fff}.mob .brand .bs{color:rgba(255,255,255,.55)}.mob .brand .mk{color:#fff} /* ---------- Fuß: hell ---------- */ .site-foot{background:#fff;color:var(--muted);border-top:1px solid var(--line)} .site-foot h4{color:var(--ink)} .site-foot a,.site-foot .mail{color:var(--ink-2)} .site-foot a:hover{color:var(--red)} .site-foot .brand .bm{color:var(--ink)} .site-foot .brand .mk{color:var(--red)} .site-foot *{border-color:var(--line)} /* ---------- Rundungen und Buttons ---------- */ .btn{border-radius:var(--r-btn)} .btn-ghost{color:var(--ink);border-color:rgba(23,26,34,.35)} .btn-ghost:hover{background:var(--ink);border-color:var(--ink);color:#fff} .btn-navy{background:var(--ink)} .btn-navy:hover{background:var(--red);color:#fff} .btn-glass{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .btn-glass:hover{background:#fff;color:var(--ink)} .btn-grow,.btn-grow::before{border-radius:14px} .bg-av{border-radius:10px} .gt-cta{border-radius:var(--r-btn)} main figure:not(.toon):not(.stackfig){border-radius:var(--r);overflow:hidden} main figure:not(.toon):not(.stackfig) img{border-radius:inherit} .feat,.box,.tile,.chip,.collage-note,.fd-card,.fd-opt,.filmcard,.split .portrait img,.mfr>div,.idx,.legend,table{border-radius:var(--r)} .chip{border-radius:12px} .filmcard{overflow:hidden} .stats .stat-grid>div{border-radius:0} /* ---------- Hero: vier Streifen, Inhalt mittig ---------- */ .hero8{position:relative;overflow:hidden;background:#111;min-height:calc(100svh - 114px);display:flex;align-items:center;isolation:isolate} .tiras{position:absolute;inset:0;display:flex;z-index:0} .tira{position:relative;margin:0;flex:1 1 0;min-width:0;height:100%;cursor:pointer;overflow:hidden;isolation:isolate; border-radius:0;transition:flex-grow 1.05s cubic-bezier(.22,.61,.36,1)} .tira.is-on{flex-grow:2.55} .tira picture,.tira img{width:100%;height:100%;display:block;object-fit:cover;border-radius:0} .tira img{filter:saturate(.85) brightness(.5);transform:scale(1.08);transition:filter 1s ease,transform 1.6s cubic-bezier(.22,.61,.36,1)} .tira.is-on img{filter:saturate(1) brightness(.72);transform:scale(1)} .tira:hover img{transform:scale(1.03)} .tira.is-on:hover img{transform:scale(1.025)} .tira+.tira::before{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;z-index:3; background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.35) 30%,rgba(255,255,255,.35) 70%,rgba(255,255,255,0))} .tira::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(10,10,14,.85) 0%,rgba(10,10,14,.25) 34%,rgba(10,10,14,.15) 60%,rgba(10,10,14,.55) 100%)} .tira__cap{position:absolute;left:0;right:0;bottom:clamp(86px,12vh,118px);z-index:2;padding:0 clamp(14px,1.6vw,24px); display:grid;gap:3px;justify-items:start;pointer-events:none} .tira__nr{font-family:var(--san);font-size:.66rem;font-weight:700;letter-spacing:.24em;color:rgba(255,255,255,.7)} .tira.is-on .tira__nr{color:#fff} .tira__t{font-family:var(--seri);font-style:italic;font-size:clamp(.95rem,1.25vw,1.2rem);color:#fff;line-height:1.2; max-height:0;opacity:0;overflow:hidden;transition:max-height .8s cubic-bezier(.22,.61,.36,1),opacity .6s} .tira__st{font-family:var(--san);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72); max-height:0;opacity:0;overflow:hidden;transition:max-height .8s cubic-bezier(.22,.61,.36,1),opacity .6s} .tira.is-on .tira__t,.tira.is-on .tira__st{max-height:3em;opacity:1} .tira:focus-visible{outline:2px solid #fff;outline-offset:-4px} .hero8::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:radial-gradient(60% 55% at 50% 48%,rgba(10,10,14,.55),rgba(10,10,14,.15) 70%,transparent)} .hero8-in{position:relative;z-index:2;text-align:center;display:flex;flex-direction:column;align-items:center; padding-top:min(6vh,50px);padding-bottom:min(16vh,150px);pointer-events:none} .hero8-in>*{pointer-events:auto} .h8-pill{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 12px;border-radius:999px;margin-bottom:26px; background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); color:#fff;font-family:var(--san);font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase; animation:heroRise .9s cubic-bezier(.22,.61,.36,1) .05s both} .h8-pill i{width:7px;height:7px;border-radius:50%;background:var(--red-bright);box-shadow:0 0 0 4px rgba(224,72,78,.25)} .hero8 h1{color:#fff;font-size:clamp(2.4rem,6.2vw,5.6rem);line-height:.98;letter-spacing:-.035em;max-width:13ch;margin:0 auto 20px;text-wrap:balance; text-shadow:0 4px 30px rgba(0,0,0,.35)} .hero8 h1 em{font-family:var(--seri);font-style:italic;font-weight:400;color:#fff;letter-spacing:-.02em; background:linear-gradient(transparent 70%,rgba(196,22,28,.85) 70%,rgba(196,22,28,.85) 92%,transparent 92%);padding:0 .08em} .hero8 .hero-sub{color:rgba(255,255,255,.88);font-family:var(--seri);font-style:italic;font-size:clamp(1.15rem,1.8vw,1.5rem);margin:0 0 14px} .hero8 .hero-p{color:rgba(255,255,255,.8);max-width:46ch;margin:0 auto 32px} .hero8 .hero-act{justify-content:center;gap:14px;flex-wrap:wrap} .h8-foot{position:absolute;left:0;right:0;bottom:0;z-index:3;pointer-events:none} .h8-nums{display:flex;justify-content:flex-end;gap:clamp(22px,3vw,44px);margin:0;padding:0 0 clamp(22px,4vh,36px)} .h8-nums>div{display:flex;flex-direction:column-reverse;align-items:flex-end;text-align:right} .h8-nums dd{margin:0;font-family:var(--ser);font-weight:600;color:#fff;font-size:clamp(1.8rem,2.6vw,2.5rem);line-height:1;letter-spacing:-.03em} .h8-nums dt{margin-top:6px;font-family:var(--san);font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7)} .h8-nums>div+div{padding-left:clamp(22px,3vw,44px);border-left:1px solid rgba(255,255,255,.22)} .hero8 .hero-sub,.hero8 .hero-p,.hero8 .hero-act,.hero8 h1{animation:heroRise .9s cubic-bezier(.22,.61,.36,1) both} .hero8 h1{animation-delay:.12s}.hero8 .hero-sub{animation-delay:.22s}.hero8 .hero-p{animation-delay:.3s}.hero8 .hero-act{animation-delay:.4s} @media (max-width:860px){ .hero8{min-height:calc(100svh - 104px)} .tira{position:absolute;inset:0;flex:none;width:100%;opacity:0;transition:opacity 1.1s ease} .tira.is-on{opacity:1} .tira+.tira::before,.tira__cap{display:none} .hero8-in{padding-bottom:120px} .h8-pill{font-size:.6rem;letter-spacing:.12em;margin-bottom:20px} .hero8 h1{font-size:clamp(2.1rem,9vw,3rem)} .h8-nums{justify-content:center;padding-bottom:84px} .h8-nums>div{align-items:center;text-align:center} } @media (prefers-reduced-motion:reduce){.tira,.tira img{transition:none}} /* ---------- Sortiment: Bento ---------- */ .split-head{display:grid;grid-template-columns:1.1fr .9fr;gap:20px 56px;align-items:end;margin-bottom:40px} .split-head h2{margin-bottom:0} .split-head .lead{margin:0} .bento{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:240px 240px;gap:16px} .bt{position:relative;display:block;border-radius:var(--r-lg);overflow:hidden;isolation:isolate;color:#fff} .bt-0{grid-row:1/3} .bt picture,.bt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .bt img{transition:transform .9s cubic-bezier(.22,.61,.36,1)} .bt:hover img{transform:scale(1.05)} .bt::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(12,12,16,.82),rgba(12,12,16,.25) 52%,rgba(12,12,16,0) 75%)} .bt-tx{position:absolute;left:0;right:64px;bottom:0;z-index:2;padding:24px 26px;display:flex;flex-direction:column;gap:6px} .bt-tx b{font-family:var(--ser);font-weight:600;font-size:clamp(1.35rem,2vw,1.9rem);line-height:1.05;color:#fff} .bt-0 .bt-tx b{font-size:clamp(1.8rem,2.8vw,2.6rem)} .bt-tx span{font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.85);max-width:42ch} .bt-go{position:absolute;right:22px;bottom:24px;z-index:2;width:44px;height:44px;border-radius:12px;background:#fff; transition:background .2s ease,transform .25s ease} .bt-go::before{content:"";position:absolute;left:13px;top:21px;width:18px;height:2px;background:var(--ink)} .bt-go::after{content:"";position:absolute;left:20px;top:16px;width:9px;height:9px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);transform:rotate(45deg)} .bt:hover .bt-go{background:var(--red);transform:translateX(3px)} .bt:hover .bt-go::before{background:#fff}.bt:hover .bt-go::after{border-color:#fff} @media (max-width:860px){ .split-head{grid-template-columns:1fr;gap:0} .split-head .lead{margin-top:16px} .bento{grid-template-columns:1fr;grid-template-rows:280px 200px 200px} .bt-0{grid-row:auto} } /* ---------- Alles fürs Bett: Video zur Hälfte ---------- */ .halb{position:relative;background:#fff;overflow:hidden} .halb-video{position:absolute;left:0;top:0;bottom:0;width:50%;z-index:0;overflow:hidden;border-radius:0 var(--r-lg) var(--r-lg) 0} .halb-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .halb-video::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,16,.35),rgba(12,12,16,.62))} .halb-video .h5-tag{display:none} .halb-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,96px); padding-top:clamp(70px,10vw,120px);padding-bottom:clamp(70px,10vw,120px);align-items:center} .halb-text{color:#fff;padding-right:clamp(10px,3vw,40px)} .halb-text .eyebrow{color:#FFD3D4} .halb-text .eyebrow::after{background:rgba(255,255,255,.4)} .halb-text h2{color:#fff} .halb-text .lead{color:rgba(255,255,255,.86)} .halb-gal{animation:none} .halb-gal .gt{border-radius:16px} @media (max-width:860px){ .halb-video{position:relative;width:auto;height:auto;border-radius:0} .halb-grid{grid-template-columns:1fr;padding-top:0;padding-bottom:56px;gap:28px} .halb-text{position:relative;margin:0 -24px;padding:56px 24px 48px} .halb-video{position:absolute;left:0;right:0;top:0;height:var(--halb-h,420px)} } /* ---------- Film auf Weiß ---------- */ #film{background:#fff} #film .filmcard{border-radius:var(--r-lg);border:0;box-shadow:0 30px 60px -30px rgba(23,26,34,.35)} /* ---------- Stimmen ---------- */ .voices-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(36px,6vw,90px);align-items:center} .vq{display:block;font-family:var(--ser);font-size:7rem;line-height:.6;color:var(--red);margin:6px 0 6px -6px;height:56px} .voices-l blockquote{margin:0} .voices-l blockquote p{font-family:var(--ser);font-size:clamp(1.55rem,2.6vw,2.3rem);line-height:1.18;color:var(--ink);letter-spacing:-.015em;margin:0 0 16px;text-wrap:balance} .voices-l cite{font-style:normal;font-size:.85rem;color:var(--muted);letter-spacing:.02em} .vs{display:flex;align-items:center;gap:16px;margin-top:30px;padding:18px 20px;background:#fff;border-radius:var(--r); box-shadow:0 18px 40px -26px rgba(23,26,34,.35);max-width:340px} .vs b{font-family:var(--ser);font-weight:600;font-size:2.6rem;line-height:1;color:var(--ink);letter-spacing:-.03em} .vs>span{display:flex;flex-direction:column;gap:2px} .vs-st{color:var(--red);letter-spacing:.12em;font-size:1rem} .vs small{color:var(--muted);font-size:.82rem} .vc-pause{background:none;border:0;padding:0 4px;cursor:pointer;font-family:var(--san);font-size:.8rem;color:var(--muted);text-decoration:underline;text-underline-offset:3px} .voices-r{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:560px;overflow:hidden; -webkit-mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(transparent,#000 14%,#000 86%,transparent)} .vcol{overflow:hidden} .vtrack{display:flex;flex-direction:column;gap:16px;animation:vUp 46s linear infinite} .vcol-b .vtrack{animation:vDown 52s linear infinite} @keyframes vUp{from{transform:translateY(0)}to{transform:translateY(calc(-50% - 8px))}} @keyframes vDown{from{transform:translateY(calc(-50% - 8px))}to{transform:translateY(0)}} .voices.paused .vtrack{animation-play-state:paused} .vc{background:#fff;border-radius:var(--r);padding:22px 22px 20px;box-shadow:0 14px 34px -24px rgba(23,26,34,.4)} .vc-st{color:var(--red);letter-spacing:.12em;font-size:.9rem;margin-bottom:10px} .vc p{margin:0 0 16px;font-size:.92rem;line-height:1.6;color:var(--ink-2)} .vc-who{display:flex;align-items:center;gap:12px} .vc-av{width:38px;height:38px;border-radius:12px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center; font-family:var(--san);font-weight:700;font-size:.78rem;letter-spacing:.04em} .vc-who>span:last-child{display:flex;flex-direction:column;line-height:1.3} .vc-who b{font-size:.9rem;color:var(--ink)} .vc-who small{font-size:.76rem;color:var(--muted)} @media (max-width:860px){ .voices-grid{grid-template-columns:1fr} .voices-r{grid-template-columns:1fr;height:460px} .vcol-b{display:none} } @media (prefers-reduced-motion:reduce){.vtrack{animation:none!important}} /* ---------- Preisversprechen: Kassenbon ---------- */ .pv-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,6vw,90px);align-items:center} .pv-list{list-style:none;margin:30px 0 0;padding:0;display:flex;flex-direction:column;gap:22px} .pv-list li{display:grid;grid-template-columns:52px 1fr;gap:18px;align-items:start} .pv-ic{width:52px;height:52px;border-radius:14px;background:var(--tint);display:flex;align-items:center;justify-content:center;color:var(--red)} .pv-ic svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .pv-list h3{font-size:1.15rem;margin:2px 0 0;color:var(--ink)} .pv-list p{margin:6px 0 0;font-size:.95rem;color:var(--ink-2);line-height:1.6} .pv-r{position:relative;display:flex;flex-direction:column;align-items:center;padding-top:6px} .slot{width:min(420px,96%);height:20px;border-radius:12px;background:var(--ink);position:relative;z-index:2; box-shadow:inset 0 -6px 10px rgba(0,0,0,.5)} .bon{position:relative;width:min(360px,84%);margin-top:-8px;z-index:1; transform:translateY(-100%);clip-path:inset(8px 0 0 0);transition:transform 1.6s cubic-bezier(.3,.7,.2,1)} .pv-r.in .bon{transform:translateY(0)} .bon-in{background:#fff;padding:34px 30px 40px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.86rem;color:var(--ink); box-shadow:0 30px 60px -30px rgba(23,26,34,.45); -webkit-mask:linear-gradient(#000,#000) top/100% calc(100% - 12px) no-repeat,radial-gradient(circle at 8px 12px,transparent 7px,#000 7.5px) bottom/16px 12px repeat-x; mask:linear-gradient(#000,#000) top/100% calc(100% - 12px) no-repeat,radial-gradient(circle at 8px 12px,transparent 7px,#000 7.5px) bottom/16px 12px repeat-x} .bon-head{text-align:center;display:flex;flex-direction:column;gap:4px} .bon-head b{letter-spacing:.24em;font-size:.95rem} .bon-head span{font-size:.72rem;color:var(--muted)} .bon-sep{border-top:1.5px dashed rgba(23,26,34,.3);margin:18px 0} .bon-row{display:flex;justify-content:space-between;gap:12px;margin:8px 0} .bon-row.red{color:var(--red);font-weight:700} .bon-row.tot{font-size:1.15rem;font-weight:700} .bon-note{font-size:.76rem;line-height:1.55;color:var(--ink-2);margin:0;text-align:center} .bon-bar{height:38px;margin:22px auto 8px;width:78%; background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 4px,var(--ink) 4px 5px,transparent 5px 8px,var(--ink) 8px 11px,transparent 11px 12px)} .bon-thx{text-align:center;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin:0} .stamp{position:absolute;right:-26px;top:48%;z-index:3;padding:10px 16px;border:3px solid var(--red);border-radius:12px;color:var(--red); font-family:var(--san);font-weight:800;font-size:.95rem;letter-spacing:.12em;text-transform:uppercase;background:rgba(255,255,255,.75); transform:rotate(-14deg) scale(1.6);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.5,1) 1.5s,opacity .3s ease 1.5s} .pv-r.in .stamp{transform:rotate(-14deg) scale(1);opacity:1} @media (max-width:860px){ .pv-grid{grid-template-columns:1fr} .stamp{right:-6px;font-size:.8rem} } @media (prefers-reduced-motion:reduce){.bon{transform:none;transition:none}.stamp{opacity:1;transform:rotate(-14deg);transition:none}} /* ---------- Laden: Collage runder ---------- */ .collage figure{border-radius:var(--r)} .collage-note{background:var(--tint);border:0} /* ---------- Abschluss dunkel, Fuß weiß ---------- */ .cta{background:var(--deep)} .hero8 .wrap{display:block;min-height:0;max-height:none;grid-template-columns:none;padding-top:0;padding-bottom:0} .hero8 .wrap.hero8-in{display:flex;flex-direction:column;align-items:center;text-align:center; padding-top:min(6vh,50px);padding-bottom:min(16vh,150px);width:100%} .hero8 .h8-foot .wrap{display:block} main .tiras figure.tira,main .tiras figure.tira img{border-radius:0} .hero8 .hero-act{display:flex} .tira__cap{top:26px;bottom:auto} .hero8 h1{font-size:clamp(2.3rem,5.2vw,4.6rem);margin-bottom:16px} .h8-pill{margin-bottom:22px} .hero8 .hero-sub{margin-bottom:10px} .hero8 .hero-p{margin-bottom:26px} .hero8 .wrap.hero8-in{padding-top:min(5vh,40px);padding-bottom:min(15vh,128px)} .h8-nums{padding-bottom:clamp(26px,4.5vh,40px)} @media (min-width:861px) and (max-height:820px){ .hero8 h1{font-size:clamp(2.1rem,4.4vw,3.8rem)} .hero8 .hero-p{display:none} .h8-nums dd{font-size:1.8rem} } .ni{background:var(--deep)} .ni:hover{background:#16285A} .ni-grid{background:rgba(255,255,255,.12)} .bon-wrap{position:relative;width:min(360px,84%);margin-top:-10px;overflow:hidden;padding:0 40px 40px;box-sizing:content-box} .bon{width:100%;margin-top:0;clip-path:none} .stamp{right:-6px} .collage figure{min-width:0} .collage .big{aspect-ratio:auto;min-height:100%} .vq{font-size:5.6rem;line-height:1;height:auto;margin:4px 0 -22px -4px} .stamp{top:auto;bottom:70px;right:-10px} @media (max-width:860px){.collage .big{aspect-ratio:4/3}} @media (max-width:860px){ .hero8{flex-direction:column;justify-content:center;align-items:stretch} .hero8 .wrap.hero8-in{padding-top:30px;padding-bottom:18px} .hero8 .hero-p{display:none} .hero8 .hero-sub{font-size:1.08rem;margin-bottom:22px} .hero8 .hero-act{flex-direction:column;align-items:center;gap:10px} .hero8 .btn-grow{font-size:.9rem} .h8-foot{position:relative;padding-bottom:88px} .h8-nums{justify-content:center;padding:0;gap:0} .h8-nums>div{flex:1 1 0;padding:0 8px} .h8-nums>div+div{padding-left:8px} .h8-nums dd{font-size:1.6rem} .h8-nums dt{font-size:.54rem;letter-spacing:.12em;white-space:nowrap} } @media (max-width:860px) and (max-height:700px){ .hero8 .hero-sub{display:none} .h8-pill{margin-bottom:14px} .h8-foot{padding-bottom:76px} } .hero8 .wrap{min-height:0!important;max-height:none!important} @media (max-width:860px) and (max-height:700px){ .h8-pill{display:none} .hero8 .wrap.hero8-in{padding-top:14px;padding-bottom:10px} .hero8 h1{font-size:clamp(1.8rem,8vw,2.2rem);margin-bottom:12px} .hero8 .btn-grow{padding-top:6px;padding-bottom:6px} .hero8 .bg-av{width:36px;height:36px;flex-basis:36px} .hero8 .btn-glass{padding:11px 20px} .h8-foot{padding-bottom:70px} .h8-nums dd{font-size:1.35rem} } @media (max-width:860px) and (max-height:600px){ .hero8 h1{font-size:1.65rem} .hero8 .hero-act{gap:8px} .h8-foot{padding-bottom:62px} .hero8 .wrap.hero8-in{padding-top:10px} } /* Neues Logo */ .brand{display:flex;align-items:center} .brand .logo{display:block;height:46px;width:auto} .site-foot .brand .logo{height:52px} .mob .brand .logo{height:40px} @media (max-width:860px){.brand .logo{height:38px}} @media (max-width:380px){.brand .logo{height:32px}} /* ===== v28 ===== */ /* Seitenwechsel ohne Aufblitzen */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:.22s} .mob{transform:translateX(100%);visibility:hidden;transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s linear .3s} .mob.open{transform:translateX(0);visibility:visible;transition:transform .3s cubic-bezier(.4,0,.2,1),visibility 0s} /* Hero: nur automatisch, mehr Kontrast, rotes "im Liegen" */ .tiras,.tira{pointer-events:none;cursor:default} .tira{transition:flex-grow 1.6s cubic-bezier(.45,0,.2,1)} .tira img{filter:saturate(.8) brightness(.38);transition:filter 1.6s ease,transform 2.4s cubic-bezier(.22,.61,.36,1)} .tira.is-on img{filter:saturate(.95) brightness(.56)} .tira:hover img{transform:scale(1.08)}.tira.is-on:hover img{transform:scale(1)} .hero8::after{background:radial-gradient(70% 62% at 50% 48%,rgba(8,8,12,.68),rgba(8,8,12,.32) 72%,rgba(8,8,12,.12))} .hero8 h1,.hero8 .hero-sub,.hero8 .hero-p{text-shadow:0 2px 24px rgba(0,0,0,.55)} .hero8 h1 em{background:none;padding:0;color:#F2464D} .hero8 .hero-p{color:rgba(255,255,255,.9)} .h8-nums dt{color:rgba(255,255,255,.82)} /* Kopf-Button abgerundet */ .tel-btn{border-radius:var(--r-btn)} /* Abstand nach dem Finder */ #finder-teaser{padding-bottom:clamp(110px,12vw,170px)} /* Akkordeon mit fester Gesamthöhe: nichts springt */ .halb-gal{height:560px;display:flex;flex-direction:column;gap:8px} .halb-gal .gt,.halb-gal .gt.on{height:auto;min-height:0;flex:0 0 58px;transition:flex-grow .55s cubic-bezier(.4,0,.2,1)} .halb-gal .gt.on{flex:1 0 58px} @media (max-width:860px){ .halb-gal{height:500px} .halb-gal .gt,.halb-gal .gt.on{flex-basis:54px} } /* Stimmen: mehr Luft, mehr sichtbar */ .voices{padding-top:clamp(100px,11vw,160px);padding-bottom:clamp(100px,11vw,160px)} .voices-r{height:720px} @media (max-width:860px){.voices-r{height:560px}} /* Kachel Parken und Anfahrt */ .collage-note{padding:28px 30px 30px;display:grid;grid-template-columns:auto 1fr auto;gap:10px 28px;align-items:center} .collage-note .k{grid-column:1/-1;margin:0} .collage-note p{margin:0;max-width:72ch} .collage-note .btn{white-space:nowrap} @media (max-width:860px){.collage-note{grid-template-columns:1fr;padding:22px 20px 24px}} .collage-note{grid-template-columns:1fr auto;border-top:0;margin-top:0} /* ===== v29 ===== */ /* Dropdowns im hellen Kopf */ .nav-drop:hover .nav-top,.nav-top.open,.nav-top.on{color:var(--ink)} .nav-menu{border-radius:14px;border-top:1px solid var(--line);background:#fff} .nav-menu a{border-radius:10px;color:var(--ink)} .nav-menu a:hover{background:var(--tint)} /* Bildunterschrift Porträt nicht abschneiden */ main figure:has(figcaption){overflow:visible;border-radius:0} main figure:has(figcaption) img{border-radius:var(--r)} main figure:has(figcaption) picture{display:block;border-radius:var(--r);overflow:hidden} .portrait figcaption{padding-left:2px;margin-top:12px} /* Film: Vorschaubild endet rechts genau auf der Kante des Videos darüber */ #film .split{--g:56px;gap:var(--g)} #film .filmcard{width:calc(100% + var(--g) / 2)} @media (max-width:860px){#film .filmcard{width:100%}} /* Hero mobil: volle Breite, alles mittig, Inhalt zwischen Kopf und Zahlen zentriert */ @media (max-width:860px){ .hero8 .wrap.hero8-in{flex:1 1 auto;justify-content:center;padding-top:22px;padding-bottom:22px} .hero8 h1{max-width:none;width:100%;font-size:12.6vw;line-height:1;letter-spacing:-.035em} .hero8 .hero-sub{font-size:4.6vw} .hero8 .hero-act{width:100%;align-items:stretch} .hero8 .btn-grow,.hero8 .btn-glass{width:100%;display:flex;justify-content:center;align-items:center;text-align:center} .hero8 .btn-grow{padding-left:12px;padding-right:12px;gap:12px} .hero8 .btn-grow .bg-arr{display:none} .hero8 .btn-glass{padding-top:15px;padding-bottom:15px} .h8-pill{max-width:100%} } @media (max-width:860px) and (max-height:700px){.hero8 h1{font-size:11vw}} @media (max-width:860px){ .hero8>.wrap.hero8-in{padding:24px 24px 24px!important;flex:1 1 auto} .hero8>.h8-foot{padding-bottom:80px!important} .hero8>.h8-foot>.wrap{padding-top:0!important;padding-bottom:0!important} .hero8 .h8-nums{padding:0!important} .hero8 h1{font-size:14.1vw} .hero8 .hero-sub{margin-bottom:24px} } @media (max-width:860px) and (max-height:700px){.hero8 h1{font-size:12vw}.hero8>.h8-foot{padding-bottom:70px!important}} @media (max-width:860px){.hero8 h1{font-size:13.9vw}} @media (max-width:860px) and (max-height:700px){.hero8 h1{font-size:13vw}} @media (max-width:860px){.hero8 .btn-grow::before{left:0;right:0!important;width:auto}} /* ===== v30 ===== */ /* Stapel wieder sauber freigestellt, ohne Kasten */ main figure.stackfig,main figure.stackfig picture,main figure.stackfig img{border-radius:0!important;overflow:visible!important;background:none!important;box-shadow:none!important} /* Anfahrt-Kachel mobil einspaltig, nichts ragt raus */ @media (max-width:860px){ .collage{grid-template-columns:minmax(0,1fr)} .collage>*{min-width:0} .collage-note{grid-template-columns:minmax(0,1fr)!important;padding:22px 20px 24px} .collage-note .btn{white-space:normal;justify-self:start} } /* ===== v31 ===== */ /* Keine Rosa-Töne mehr: alles Weiß */ :root{--tint:#FFFFFF;--sand:#FFFFFF;--sand-2:#ECEDF0} .sec-tint,.sec-sand,.voices{background:#fff} .collage-note{background:#fff;border:1px solid var(--line)} .pv-ic{background:#fff;border:1px solid var(--line)} .nav-menu a:hover{background:#F6F6F8} tbody tr:hover{background:#FAFAFB} /* Kundenstimmen auf Weiß: Karten mit feinem Schatten */ .vc{border:1px solid rgba(23,26,34,.07);box-shadow:0 1px 2px rgba(23,26,34,.05),0 14px 32px -16px rgba(23,26,34,.22)} .vs{border:1px solid rgba(23,26,34,.07);box-shadow:0 1px 2px rgba(23,26,34,.05),0 14px 32px -16px rgba(23,26,34,.22)} .voices-r{padding:6px 4px} /* Abgeschnittene Buchstaben: Rundung nur auf Bildern, nie auf Bildunterschrift-Figuren */ main figure:not(.toon):not(.stackfig):has(figcaption){overflow:visible;border-radius:0} main figure:not(.toon):not(.stackfig):has(figcaption) picture{display:block;border-radius:var(--r);overflow:hidden} main figure.strip:has(figcaption) picture{border-radius:0;overflow:visible} /* Trustline im Hero mittig */ .h8-nums{justify-content:center} .h8-nums>div{align-items:center;text-align:center} /* Kopfleiste entfernt: Hero-Höhe neu */ .hero8{min-height:calc(100svh - 77px)} @media (max-width:860px){.hero8{min-height:calc(100svh - 67px)}} /* Bento-Pfeil als sauberes Symbol */ .bt-go::before,.bt-go::after{content:none!important} .bt-go{display:flex;align-items:center;justify-content:center} .bt-go svg{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .2s ease} .bt:hover .bt-go svg{stroke:#fff} /* Produktbilder: Matratzen freigestellt auf Weiß, Lattenroste füllen die Box */ .model .ph{background:#fff!important;border-bottom:1px solid var(--line)} .model .ph img{filter:none!important;object-fit:contain;padding:6px} #lattenroste .model .ph img,.model .ph img[src^="lr-"]{object-fit:cover;padding:0} .model{border-radius:var(--r);overflow:hidden} /* Film auf Blau, abgesetzt vom Video darüber */ #film.sec-navy{background:var(--deep);margin-top:clamp(64px,8vw,110px)} #film.sec-navy .filmcard{box-shadow:0 30px 60px -30px rgba(0,0,0,.6)} /* Anrufleiste mobil: weiße Leiste mit rotem Knopf, Safari färbt dann nicht alles rot */ .callbar{background:#fff;border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom,0px))} .callbar a{background:var(--red);border-radius:14px;padding:14px 16px;gap:10px;box-shadow:0 8px 18px -10px rgba(196,22,28,.6)} .callbar a svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round} @media (max-width:860px){ body{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))} .wwmark{bottom:calc(84px + env(safe-area-inset-bottom,0px))} .totop{bottom:calc(88px + env(safe-area-inset-bottom,0px))} } /* Google Maps mit Zwei-Klick-Lösung */ .gmap{position:relative;height:400px;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:#F7F8FA} .gmap-bg{position:absolute;inset:0;width:100%;height:100%} .gmap-pin{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);filter:drop-shadow(0 8px 14px rgba(196,22,28,.35))} .gmap-pin img{display:block;width:44px;height:44px} .gmap-card{position:absolute;left:50%;bottom:24px;transform:translateX(-50%);width:min(360px,calc(100% - 32px));background:#fff;border-radius:16px; padding:18px 20px;box-shadow:0 18px 40px -18px rgba(23,26,34,.35);display:flex;flex-direction:column;gap:4px;text-align:center} .gmap-card b{font-family:var(--ser);font-size:1.15rem;color:var(--ink)} .gmap-card span{font-size:.88rem;color:var(--muted)} .gmap-card .btn{margin-top:12px;justify-content:center} .gmap-card small{font-size:.72rem;color:var(--muted);margin-top:6px} .gmap.on{background:none} .gmap iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .model .ph:has(img[src^="lr-"]){padding:0!important} .model .ph img[src^="lr-"]{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;object-fit:cover!important;padding:0!important} .model .ph picture{display:block;width:100%;height:100%} .tiras figure.tira{overflow:hidden!important;border-radius:0!important} .tiras figure.tira picture,.tiras figure.tira img{border-radius:0!important} @media (max-width:860px){.hero8>.h8-foot{padding-bottom:calc(98px + env(safe-area-inset-bottom,0px))!important}} @media (max-width:860px) and (max-height:700px){.hero8>.h8-foot{padding-bottom:calc(90px + env(safe-area-inset-bottom,0px))!important}} @media (max-width:860px) and (max-height:600px){ .hero8 h1{font-size:11.5vw} .hero8 .btn-glass{padding-top:10px;padding-bottom:10px} .hero8>.wrap.hero8-in{padding-top:14px!important;padding-bottom:14px!important} .hero8>.h8-foot{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))!important} } .callbar a{white-space:nowrap} @media (max-width:380px){.callbar a{font-size:.86rem;padding:13px 12px;gap:8px}.callbar{padding-left:10px;padding-right:10px}} /* v32: Modellseiten Kaltschaum */ .pd-head{background:var(--deep);position:relative;overflow:hidden;color:#fff} .pd-head::before{content:"";position:absolute;inset:0;background:radial-gradient(1200px 520px at 85% -10%,rgba(224,72,78,.16),transparent 60%),radial-gradient(900px 600px at -10% 120%,rgba(255,255,255,.06),transparent 60%);pointer-events:none} .pd-head .wrap{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(28px,4vw,64px);align-items:center;padding-top:clamp(40px,5vw,72px)!important;padding-bottom:clamp(40px,5vw,72px)!important} .pd-head .crumb{color:rgba(255,255,255,.6);margin-bottom:22px} .pd-head .crumb a{color:rgba(255,255,255,.75)} .pd-head .crumb a:hover{color:#fff} .pd-kicker{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#FFD3D4;margin:0 0 14px} .pd-kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--red-bright)} .pd-head h1{font-family:var(--ser);font-weight:700;color:#fff;font-size:clamp(3rem,7.4vw,6.2rem);line-height:.95;letter-spacing:-.025em;margin:0;max-width:none} .pd-tag{font-family:var(--ser);font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.25;color:#fff;margin:18px 0 0;max-width:22ch;text-wrap:balance} .pd-tag em{font-style:normal;color:var(--red-bright)} .pd-intro{color:rgba(255,255,255,.8);font-size:1.04rem;line-height:1.65;margin:16px 0 0;max-width:46ch} .pd-price{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 14px;margin:26px 0 0;padding:18px 0 0;border-top:1px solid rgba(255,255,255,.14)} .pd-price small{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);font-weight:700;width:100%} .pd-price b{font-family:var(--ser);font-size:clamp(2.3rem,4vw,3.1rem);font-weight:700;line-height:1;color:#fff;font-variant-numeric:tabular-nums;letter-spacing:-.02em} .pd-price span{color:rgba(255,255,255,.7);font-size:.92rem} .pd-act{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px} .pd-act .btn{margin-top:0} .btn-wline{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4);border-radius:var(--r-btn)} .btn-wline:hover{border-color:#fff;background:rgba(255,255,255,.06)} .pd-shot{position:relative;margin:0;background:#fff;border-radius:var(--r-lg);box-shadow:0 30px 70px -30px rgba(0,0,0,.55);padding:clamp(18px,3vw,38px) clamp(14px,2.4vw,30px) clamp(54px,6vw,74px);overflow:hidden;isolation:isolate} .pd-shot::before{content:attr(data-name);position:absolute;left:50%;top:50%;transform:translate(-50%,-58%);font-family:var(--ser);font-weight:700;font-size:clamp(5rem,15vw,12rem);line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(23,26,34,.07);white-space:nowrap;z-index:-1;pointer-events:none} .pd-shot img{display:block;width:100%;height:auto;border-radius:0!important;transition:transform 1.4s cubic-bezier(.2,.7,.2,1)} .pd-shot:hover img{transform:scale(1.025) rotate(-.4deg)} .pd-hbadge{position:absolute;left:clamp(14px,2.4vw,30px);bottom:clamp(14px,2vw,22px);display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;border-radius:999px;padding:9px 16px 9px 12px;font-size:.88rem;font-weight:600;letter-spacing:.01em} .pd-hbadge svg{width:20px;height:20px;flex:0 0 20px} .pd-hnote{position:absolute;right:clamp(14px,2.4vw,30px);bottom:clamp(16px,2vw,25px);font-size:.78rem;color:var(--muted);text-align:right;max-width:24ch;line-height:1.35} .pd-excl{position:absolute;right:clamp(14px,2vw,22px);top:clamp(14px,2vw,22px);background:var(--ink);color:#fff;border-radius:999px;padding:7px 13px;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase} /* Kennzahlen */ .pd-facts{background:#fff;border-bottom:1px solid var(--line)} .pd-facts .wrap{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0} .pd-fact{display:flex;gap:14px;align-items:center;padding:28px 18px;border-left:1px solid var(--line)} .pd-fact:first-child{border-left:0;padding-left:0} .pd-fact svg{flex:0 0 38px;width:38px;height:38px;color:var(--red)} .pd-fact b{display:block;font-family:var(--ser);font-size:1.32rem;font-weight:700;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums} .pd-fact span{display:block;font-size:.8rem;color:var(--muted);margin-top:3px;line-height:1.35} /* Sektionsköpfe */ .pd-sec{padding:clamp(64px,8vw,112px) 0} .pd-sec+.pd-sec{padding-top:0} .pd-h{max-width:720px;margin-bottom:clamp(30px,4vw,48px)} .pd-h .pd-eb{display:inline-flex;align-items:center;gap:10px;font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--red);margin:0 0 14px} .pd-h .pd-eb::after{content:"";width:40px;height:1px;background:rgba(196,22,28,.4)} .pd-h h2{font-family:var(--ser);font-weight:700;color:var(--ink);font-size:clamp(1.85rem,3.4vw,2.7rem);line-height:1.12;letter-spacing:-.015em;margin:0;text-wrap:balance} .pd-h p{color:var(--muted);font-size:1.06rem;line-height:1.65;margin:18px 0 0} .pd-h.ctr{margin-left:auto;margin-right:auto;text-align:center} .pd-h.ctr .pd-eb::before{content:"";width:40px;height:1px;background:rgba(196,22,28,.4)} /* Aufbau */ .pd-build{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(28px,4vw,60px);align-items:start} .pd-fig{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(16px,2.6vw,30px);box-shadow:0 18px 50px -34px rgba(14,27,60,.35)} .pd-fig img{display:block;width:100%;height:auto;border-radius:0!important} .pd-fig figcaption{font-size:.86rem;color:var(--muted);margin-top:14px;line-height:1.5} .pd-fig2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px} .pd-fig2 img{border-radius:12px!important} .pd-annot{position:relative} .pd-annot .pd-pin{position:absolute;display:flex;align-items:center;gap:8px;font-size:.76rem;font-weight:600;color:var(--ink);white-space:nowrap;transform:translateY(-50%)} .pd-annot .pd-pin i{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(196,22,28,.18);flex:0 0 10px} .pd-annot .pd-pin span{background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px;box-shadow:0 6px 16px -10px rgba(14,27,60,.4)} .pd-schema{width:100%;height:auto;display:block} .pd-specs{display:grid;gap:14px} .pd-spec{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px} .pd-spec h3{display:flex;align-items:center;gap:12px;font-family:var(--ser);font-size:1.18rem;font-weight:700;color:var(--ink);margin:0 0 12px} .pd-spec h3 svg{width:26px;height:26px;color:var(--red);flex:0 0 26px} .pd-spec ul{list-style:none;margin:0;padding:0;display:grid;gap:8px} .pd-spec li{position:relative;padding-left:24px;color:var(--ink-2);font-size:.96rem;line-height:1.5} .pd-spec li::before{content:"";position:absolute;left:2px;top:.42em;width:12px;height:7px;border-left:2px solid var(--red);border-bottom:2px solid var(--red);transform:rotate(-45deg)} .pd-spec li b{color:var(--ink)} /* Härte + Belastbarkeit */ .pd-panel{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:0 24px 60px -40px rgba(14,27,60,.4);padding:clamp(22px,3.6vw,46px)} .pd-feel{position:relative;margin:8px 0 0;padding:58px 0 0} .pd-feel-track{height:12px;border-radius:999px;background:linear-gradient(90deg,#F4F6FA 0%,#C9D3E3 45%,#3B4A6B 80%,#171A22 100%)} .pd-feel-lbl{position:relative;height:16px;margin-top:12px;font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)} .pd-mark{position:absolute;top:0;left:var(--p);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;transition:left 1s cubic-bezier(.2,.7,.2,1)} .pd-mark b{background:var(--red);color:#fff;border-radius:999px;padding:5px 11px;font-size:.78rem;font-weight:700;white-space:nowrap} .pd-mark i{width:2px;height:22px;background:var(--red)} .pd-mark i::after{content:"";display:block;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--red);margin:20px 0 0 -6px} .pd-mark.lo{top:auto} .pd-anim .pd-mark{left:0} .pd-anim.in .pd-mark{left:var(--p)} .pd-load{--max:170;margin-top:46px;display:grid;gap:18px} .pd-lrow{display:grid;grid-template-columns:180px minmax(0,1fr) 120px;gap:18px;align-items:center} .pd-lname b{display:block;font-family:var(--ser);font-size:1.12rem;color:var(--ink)} .pd-lname span{font-size:.84rem;color:var(--muted)} .pd-track{position:relative;height:30px;border-radius:999px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/17 - 1px),rgba(23,26,34,.08) calc(100%/17 - 1px) calc(100%/17))} .pd-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--line)} .pd-rng,.pd-core{position:absolute;top:3px;bottom:3px;left:calc(var(--a) / var(--max) * 100%);width:calc((var(--b) - var(--a)) / var(--max) * 100%);border-radius:999px;transform-origin:left center;transition:transform 1.1s cubic-bezier(.2,.7,.2,1)} .pd-rng{background:rgba(196,22,28,.16);border:1.5px solid rgba(196,22,28,.5)} .pd-core{background:var(--red);top:9px;bottom:9px} .pd-anim .pd-rng,.pd-anim .pd-core{transform:scaleX(0)} .pd-anim.in .pd-rng,.pd-anim.in .pd-core{transform:none} .pd-anim.in .pd-lrow:nth-child(3) .pd-rng{transition-delay:.12s} .pd-anim.in .pd-lrow:nth-child(4) .pd-rng{transition-delay:.24s} .pd-lval{font-weight:600;color:var(--ink);font-size:.95rem;font-variant-numeric:tabular-nums;text-align:right} .pd-axis{display:grid;grid-template-columns:180px minmax(0,1fr) 120px;gap:18px} .pd-axis div{position:relative;height:18px;font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums} .pd-axis span{position:absolute;left:calc(var(--v) / 170 * 100%);transform:translateX(-50%)} .pd-note{font-size:.88rem;color:var(--muted);margin:22px 0 0;line-height:1.55;display:flex;gap:10px;align-items:flex-start} .pd-note svg{flex:0 0 18px;width:18px;height:18px;color:var(--red);margin-top:2px} .pd-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:16px;font-size:.8rem;color:var(--muted)} .pd-legend i{display:inline-block;width:22px;height:10px;border-radius:999px;vertical-align:middle;margin-right:7px} .pd-legend .a{background:rgba(196,22,28,.16);border:1.5px solid rgba(196,22,28,.5)} .pd-legend .b{background:var(--red)} .pd-sub{font-family:var(--ser);font-size:1.25rem;font-weight:700;color:var(--ink);margin:0} /* Schlaftyp */ .pd-sleep{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .pd-st{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 24px;display:flex;flex-direction:column;gap:12px;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease} .pd-st:hover{transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(14,27,60,.45)} .pd-st svg.ic{width:78px;height:44px;color:var(--ink)} .pd-st h3{font-family:var(--ser);font-size:1.2rem;font-weight:700;color:var(--ink);margin:0} .pd-st .pd-dots{display:flex;gap:6px} .pd-st .pd-dots i{width:12px;height:12px;border-radius:50%;background:rgba(23,26,34,.12)} .pd-st .pd-dots i.on{background:var(--red)} .pd-st .pd-verd{font-size:.76rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--red)} .pd-st.no .pd-verd{color:var(--muted)} .pd-st.no svg.ic{color:var(--muted);opacity:.6} .pd-st p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55} .pd-x{display:flex;gap:6px;color:var(--muted);font-weight:700;letter-spacing:.1em} /* Preise nach Größe */ .pd-sizes{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;align-items:end} .pd-size{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 12px 18px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;transition:border-color .4s ease,transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease} .pd-size:hover{border-color:rgba(196,22,28,.45);transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(14,27,60,.45)} .pd-bed{display:block;width:calc(var(--w) * .5px);height:100px;border:1.5px solid var(--ink);border-radius:9px;position:relative;margin:0 auto 12px;background:linear-gradient(180deg,#fff 0 30%,rgba(196,22,28,.06) 30% 100%);transition:background .4s ease} .pd-bed::before,.pd-bed::after{content:"";position:absolute;top:8px;height:16px;border:1.5px solid var(--ink);border-radius:6px;background:#fff} .pd-bed::before{left:7px;right:7px} .pd-bed.two::before{right:calc(50% + 3px)} .pd-bed.two::after{left:calc(50% + 3px);right:7px} .pd-bed:not(.two)::after{display:none} .pd-size:hover .pd-bed{background:linear-gradient(180deg,#fff 0 30%,rgba(196,22,28,.16) 30% 100%)} .pd-size .sz{font-size:.86rem;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums} .pd-size .eur{font-family:var(--ser);font-size:1.7rem;font-weight:700;color:var(--ink);line-height:1.1;font-variant-numeric:tabular-nums} .pd-size .eur2{font-size:.8rem;color:var(--muted);line-height:1.35} .pd-size .eur2 b{color:var(--ink);font-variant-numeric:tabular-nums} .pd-size .lz{margin-top:6px;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 9px;color:#1E6B3A;background:rgba(30,107,58,.09)} .pd-size .lz.mid{color:#7A5E13;background:rgba(122,94,19,.1)} .pd-size .lz.late{color:var(--red);background:rgba(196,22,28,.08)} .pd-size.na{background:transparent;border-style:dashed} .pd-size.na .pd-bed{border-style:dashed;opacity:.45} .pd-size.na .pd-bed::before,.pd-size.na .pd-bed::after{border-style:dashed} .pd-size.na .eur{font-family:var(--san);font-size:.9rem;font-weight:600;color:var(--muted)} .pd-size.new::after{content:"Neuer Preis";position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:var(--red);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:4px 9px;border-radius:999px;white-space:nowrap} .pd-pfoot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:30px;padding-top:26px;border-top:1px solid var(--line)} .pd-pfoot div{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--ink-2);line-height:1.5} .pd-pfoot svg{flex:0 0 28px;width:28px;height:28px;color:var(--red)} .pd-pfoot b{display:block;color:var(--ink)} .pd-pfoot a{color:var(--red);text-decoration:underline;text-underline-offset:3px} /* Big: Geschichte */ .pd-story{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(28px,4.5vw,70px);align-items:center} .pd-story figure{margin:0;position:relative} .pd-story figure picture,.pd-story figure img{display:block;width:100%;height:auto;border-radius:var(--r-lg)} .pd-story figure figcaption{position:absolute;left:18px;bottom:18px;background:rgba(255,255,255,.94);border-radius:14px;padding:10px 14px;font-size:.84rem;color:var(--ink);line-height:1.35;box-shadow:0 10px 30px -16px rgba(0,0,0,.4)} .pd-story figure figcaption b{display:block;font-family:var(--ser);font-size:1rem} .pd-quote{font-family:var(--ser);font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.3;color:var(--ink);margin:0;position:relative;padding-left:26px;border-left:3px solid var(--red)} .pd-reasons{display:grid;gap:14px;margin-top:30px} .pd-reason{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:start} .pd-reason svg{width:48px;height:48px;padding:11px;border-radius:14px;background:rgba(196,22,28,.08);color:var(--red)} .pd-reason h3{font-family:var(--ser);font-size:1.1rem;font-weight:700;color:var(--ink);margin:2px 0 4px} .pd-reason p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.55} .pd-cmp{display:grid;gap:12px;margin-top:8px} .pd-cmp-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;align-items:center} .pd-cmp-row span{font-size:.9rem;color:var(--ink-2);font-weight:600} .pd-cmp-bar{position:relative;height:40px;border-radius:12px;background:rgba(23,26,34,.05);overflow:hidden} .pd-cmp-bar i{position:absolute;left:0;top:0;bottom:0;width:var(--v);border-radius:12px;background:#3B4A6B;transform-origin:left;transition:transform 1.1s cubic-bezier(.2,.7,.2,1);display:flex;align-items:center;justify-content:flex-end;padding:0 14px;color:#fff;font-style:normal;font-weight:700;font-size:.9rem;white-space:nowrap} .pd-cmp-bar i.lo{background:linear-gradient(90deg,#3B4A6B,#6B7896)} .pd-cmp-bar i.us{background:var(--red)} .pd-anim .pd-cmp-bar i{transform:scaleX(0)} .pd-anim.in .pd-cmp-bar i{transform:none} .pd-anim.in .pd-cmp-row:nth-child(2) i{transition-delay:.15s} .pd-anim.in .pd-cmp-row:nth-child(3) i{transition-delay:.3s} /* Höhenvergleich und Modellwahl */ .pd-models{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:end} .pd-mdl{display:flex;flex-direction:column;align-items:stretch;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px 20px;transition:transform .5s cubic-bezier(.2,.7,.2,1),box-shadow .5s ease,border-color .4s ease} .pd-mdl:hover{transform:translateY(-5px);box-shadow:0 26px 50px -32px rgba(14,27,60,.5);border-color:rgba(196,22,28,.4)} .pd-mdl.cur{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)} .pd-slab-wrap{height:190px;display:flex;align-items:flex-end;position:relative;border-bottom:1.5px solid var(--ink);margin-bottom:16px} .pd-slab-wrap::before{content:"";position:absolute;left:-6px;right:-6px;bottom:calc(27 * 6.4px);border-top:1.5px dashed rgba(196,22,28,.55)} .pd-slab{display:block;width:100%;height:calc(var(--h) * 6.4px);border-radius:10px 10px 4px 4px;background:repeating-linear-gradient(90deg,rgba(23,26,34,.05) 0 2px,transparent 2px 16px),#F1F3F7;border:1.5px solid rgba(23,26,34,.35);position:relative;transform-origin:bottom;transition:transform 1s cubic-bezier(.2,.7,.2,1),background .4s ease} .pd-mdl.cur .pd-slab,.pd-mdl:hover .pd-slab{background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 2px,transparent 2px 16px),var(--red);border-color:var(--red)} .pd-slab b{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:.82rem;font-weight:700;color:var(--ink);white-space:nowrap} .pd-mdl.cur .pd-slab b,.pd-mdl:hover .pd-slab b{color:#fff} .pd-anim .pd-slab{transform:scaleY(.05)} .pd-anim.in .pd-slab{transform:none} .pd-anim.in .pd-mdl:nth-child(2) .pd-slab{transition-delay:.1s} .pd-anim.in .pd-mdl:nth-child(3) .pd-slab{transition-delay:.2s} .pd-anim.in .pd-mdl:nth-child(4) .pd-slab{transition-delay:.3s} .pd-mdl h3{font-family:var(--ser);font-size:1.3rem;font-weight:700;color:var(--ink);margin:0} .pd-mdl p{margin:4px 0 0;font-size:.86rem;color:var(--muted)} .pd-mdl .pd-mfoot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-weight:600;color:var(--ink);font-size:.95rem} .pd-mdl .pd-mfoot svg{width:22px;height:22px;color:var(--red);transition:transform .4s ease} .pd-mdl:hover .pd-mfoot svg{transform:translateX(4px)} .pd-mdl.cur .pd-mfoot{color:var(--red)} .pd-limit{display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--muted);margin-top:18px} .pd-limit i{width:30px;border-top:1.5px dashed rgba(196,22,28,.7)} /* Übersicht: Karten verlinkt */ a.model{display:flex;flex-direction:column;text-decoration:none;color:inherit} a.model:hover{border-color:rgba(196,22,28,.45);transform:translateY(-4px);box-shadow:0 22px 44px -30px rgba(14,27,60,.45)} a.model .ph img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1)} a.model:hover .ph img{transform:scale(1.04) rotate(-.5deg)} .model-go{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-size:.9rem;font-weight:600;color:var(--red)} .model-go svg{width:20px;height:20px;transition:transform .4s ease} a.model:hover .model-go svg{transform:translateX(4px)} .fd-more{display:inline-flex;align-items:center;gap:6px;margin-top:12px;font-weight:600;font-size:.9rem;color:var(--red);text-decoration:none} .fd-more:hover{text-decoration:underline;text-underline-offset:3px} /* Sondermaße mit Grafik */ .lz-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px} .lz-c{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 20px;display:flex;flex-direction:column;gap:10px} .lz-c h3{font-family:var(--ser);font-size:1.15rem;font-weight:700;color:var(--ink);margin:0} .lz-c p{margin:0;font-size:.93rem;color:var(--muted);line-height:1.5} .lz-ic{display:flex;align-items:flex-end;gap:6px;height:56px} .lz-ic i{display:block;height:52px;border:1.5px solid var(--ink);border-radius:6px;background:#fff} .lz-ic i.d{border-style:dashed;opacity:.55} .lz-bar{margin-top:auto;display:grid;gap:6px} .lz-bar span{display:flex;justify-content:space-between;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)} .lz-bar div{height:8px;border-radius:999px;background:rgba(23,26,34,.08);overflow:hidden} .lz-bar div i{display:block;height:100%;width:var(--v);background:var(--red);border-radius:999px} /* Gel/Visco getauscht */ .layer.l3 .lbar,.l3 .lbar{background:radial-gradient(circle at 30% 40%,#9FB4D3 2.2px,transparent 2.4px),radial-gradient(circle at 70% 70%,#9FB4D3 2.2px,transparent 2.4px),#E7EDF6;background-size:16px 16px} .layer.l2 .lbar,.l2 .lbar{background:linear-gradient(180deg,#DCE4F0,#C2CEE2)} @media (max-width:1100px){ .pd-facts .wrap{grid-template-columns:repeat(3,minmax(0,1fr))} .pd-fact{border-left:0;padding-left:0;border-top:1px solid var(--line)} .pd-fact:nth-child(-n+3){border-top:0} .pd-sizes{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch} .lz-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:900px){ .pd-head .wrap{grid-template-columns:1fr} .pd-build,.pd-story{grid-template-columns:1fr} .pd-lrow,.pd-axis{grid-template-columns:120px minmax(0,1fr) 92px;gap:12px} .pd-models{grid-template-columns:repeat(2,minmax(0,1fr))} .pd-sleep{grid-template-columns:1fr} .pd-st{display:grid;grid-template-columns:86px minmax(0,1fr);gap:4px 16px;align-items:center} .pd-st svg.ic{grid-row:span 3} .pd-st p{grid-column:1/-1} .pd-pfoot{grid-template-columns:1fr} .pd-cmp-row{grid-template-columns:1fr;gap:6px} } @media (max-width:600px){ .pd-head h1{font-size:clamp(2.8rem,15vw,4rem)} .pd-head .wrap{text-align:left} .pd-act .btn{width:100%} .pd-facts .wrap{grid-template-columns:repeat(2,minmax(0,1fr))} .pd-fact{padding:20px 0;gap:12px} .pd-fact:nth-child(-n+3){border-top:1px solid var(--line)} .pd-fact:nth-child(-n+2){border-top:0} .pd-fact svg{flex:0 0 30px;width:30px;height:30px} .pd-fact b{font-size:1.12rem} .pd-sizes{grid-template-columns:repeat(2,minmax(0,1fr))} .pd-bed{width:calc(var(--w) * .38px);height:80px} .pd-lrow{grid-template-columns:1fr auto;gap:6px 12px} .pd-lrow .pd-track{grid-column:1/-1;grid-row:2} .pd-axis{grid-template-columns:1fr} .pd-axis>span{display:none} .pd-axis>div:first-child,.pd-axis>div:last-child{display:none} .pd-feel-lbl{font-size:.66rem;letter-spacing:.04em} .pd-mark b{font-size:.7rem;padding:4px 8px} .pd-models{gap:10px} .pd-mdl{padding:16px 14px} .pd-slab-wrap{height:150px} .pd-slab{height:calc(var(--h) * 5px)} .pd-slab-wrap::before{bottom:calc(27 * 5px)} .pd-hnote{display:none} .pd-annot .pd-pin{font-size:.66rem} .pd-annot .pd-pin span{padding:3px 7px} .lz-grid{grid-template-columns:1fr} .pd-story figure figcaption{left:12px;bottom:12px} } @media (prefers-reduced-motion:reduce){ .pd-anim .pd-rng,.pd-anim .pd-core,.pd-anim .pd-slab,.pd-anim .pd-cmp-bar i{transform:none} .pd-anim .pd-mark{left:var(--p)} } .pd-zonechip{border-radius:12px;background:rgba(196,22,28,.06);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:4px;padding:14px} .pd-zonechip svg{width:46px;height:46px;color:var(--red)} .pd-zonechip b{font-family:var(--ser);font-size:1.25rem;color:var(--ink)} .pd-zonechip span{font-size:.82rem;color:var(--muted)} .pd-feel-lbl span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap} .pd-feel-track{position:relative} .pd-shot img{mix-blend-mode:multiply;transform:scale(1.1)} .pd-shot:hover img{transform:scale(1.14) rotate(-.4deg)} .pd-shot picture{display:block;position:relative;z-index:1} .pd-st svg.ic{width:112px;height:63px;stroke-width:1.4} @media (max-width:900px){.pd-st{grid-template-columns:120px minmax(0,1fr)}} @media (max-width:600px){.pd-st{grid-template-columns:1fr}.pd-st svg.ic{grid-row:auto}} .pd-hbadge,.pd-hnote,.pd-excl{z-index:3} .pd-annot .pd-pin.r{flex-direction:row-reverse;transform:translate(calc(-100% + 10px),-50%)} .pd-annot .pd-pin{margin-left:-5px} .pd-cmp-bar i{min-width:max-content} .pd-models{align-items:stretch} .pd-mdl .pd-mfoot{margin-top:auto} .pd-mdl p{margin-bottom:14px} .pd-size .lz{white-space:nowrap} @media (max-width:600px){.pd-size .lz{font-size:.6rem;letter-spacing:.06em;padding:4px 7px}.pd-size{padding:16px 8px 14px}} .layer{border-radius:14px}.layer .lbar{border-radius:8px} /* v32 Fixes */ .split>*,.grid>*{min-width:0} .tbl-scroll{max-width:100%} @media (max-width:1120px){.mfr{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:420px){.mfr>div{padding:18px 10px}.mfr span{overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto}.bon-wrap{box-sizing:border-box;width:100%;max-width:440px;padding:0 16px 40px}} /* v33 Tabellen */ thead th.num{color:#fff} #kissen table{min-width:0} #kissen td:first-child{white-space:normal} .schoner-tbl{margin-top:34px} .schoner-tbl table{min-width:0} .schoner-tbl thead th.num{white-space:nowrap} .pd-facts .wrap{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}@media (max-width:1100px){.pd-facts .wrap{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (max-width:600px){.pd-facts .wrap{grid-template-columns:repeat(2,minmax(0,1fr))}} .pd-size .sz{white-space:nowrap} @media (min-width:1101px){.pd-sizes[style*="--n:8"]{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}} /* WordPress-Inhalte */.mh-content{font-size:1.02rem;line-height:1.7;color:var(--ink-2)}.mh-content h2{font-family:var(--ser);color:var(--ink);font-size:1.6rem;margin:34px 0 14px}.mh-content h3{font-family:var(--ser);color:var(--ink);font-size:1.25rem;margin:26px 0 10px}.mh-content p,.mh-content ul,.mh-content ol{margin:0 0 1em}.mh-content a{color:var(--red);text-decoration:underline}.mh-content img{border-radius:var(--r);height:auto}