/* WhichWine — Marketing one-pager: DESKTOP PSD canvas (>=1100px) Loaded with media="(min-width:1100px)". Lays the shared #canvas DOM out as the pixel-exact 1366px canvas, scaled to fit by JS (capped at 1x). Faithful to the PSD. */ body{background:var(--bg);} /* The scaled canvas needs JS (.js gate, set in ). Without JS it falls back to the unscaled, scrollable canvas at native 1366px width rather than collapsing. */ #stage{position:relative;width:100%;background:var(--bg);} .js #stage{overflow-x:clip;} #canvas{width:1366px;background:var(--bg);} .js #canvas{position:absolute;top:0;left:0;transform-origin:top left;} /* ---- shared ---- */ h2.t{font-family:'Ubuntu',sans-serif;font-weight:400;color:var(--head);font-size:55px;line-height:60px;letter-spacing:-.005em;margin:0 0 22px;} p.copy{font-family:'Open Sans',sans-serif;font-weight:400;font-size:26px;line-height:32px;color:var(--ink);margin:0 0 22px;} ul.ticks{list-style:none;margin:14px 0 0;padding:0;} ul.ticks li{font-family:'Ubuntu',sans-serif;font-size:26px;font-weight:500;color:var(--ink);line-height:35px;margin:0 0 6px;padding-left:24px;position:relative;} ul.ticks li::before{content:"•";position:absolute;left:0;} .card{background:var(--card);border-radius:22px;overflow:hidden;} .disc{width:84px;height:84px;border-radius:50%;margin-top:24px;} .disc img{width:100%;height:100%;} .block{padding:20px 93px;} /* ---- topbar ---- */ .topbar{background:var(--bar);text-align:center;padding:11px 16px;font-family:'Ubuntu',sans-serif;font-weight:500;font-size:30px;color:var(--tan);letter-spacing:.01em;} .topbar b{font-weight:700;} .topbar .dot{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--tan);opacity:.6;margin:0 .5em;vertical-align:middle;} /* ---- HERO + INTRO (absolute, PSD coords) ---- */ .herointro{position:relative;height:1394px;} .hero{position:absolute;top:0;left:0;width:1366px;height:717px;background:#0c0a09;overflow:hidden; clip-path:path('M0 0 H1366 V658 Q683 720 0 658 Z');} .hero .bg{width:100%;height:100%;object-fit:cover;} /* shared-DOM wrappers collapse to nothing so the canvas keeps its absolute coords */ .hero-title,.intro-grid,.intro-media{display:contents;} /* the H1 stays a real (transparent) box for a11y; its spans sit at PSD coords within it */ .brand{position:absolute;top:0;left:0;width:1366px;height:717px;margin:0;} .b-which,.b-wine{position:absolute;margin:0;color:#fff;font-family:'Ubuntu',sans-serif;font-weight:700;font-size:135px;line-height:1;letter-spacing:-.035em;} .b-which{left:240px;top:382px;} .b-wine{left:766px;top:382px;} /* reflow-only elements have no place in the PSD canvas */ .shade,.tag,.lead,.price,.stats,.chip,.dots,.cta{display:none;} .tilecard .sub{display:none;} /* section subtitles are a reflow addition; PSD has none */ /* box-shadow, not a drop-shadow filter: WebKit hard-clips filter paint regions inside the scaled canvas (visible shadow edge). The radius (≥ the PNG's ~46px bezel) rounds the shadow rectangle; it clips only transparent corner pixels. */ .phone{position:absolute;left:902px;top:567px;width:346px;border-radius:50px;box-shadow:0 26px 46px rgba(0,0,0,.42);} .phone img{width:346px;} .badge{position:absolute;left:935px;top:1277px;width:288px;} .badge img{width:288px;height:86px;object-fit:contain;} .introtext{position:absolute;left:120px;top:758px;width:690px;} .introtext .eyebrow{font-family:'Ubuntu',sans-serif;font-weight:400;color:var(--head);font-size:55px;line-height:60px;letter-spacing:-.005em;text-transform:none;margin:0;} .introtext h2.t{margin:0 0 18px;} .introtext p.copy{margin:0 0 46px;} .introtext ul.ticks{margin:0;} .introtext ul.ticks li{font-size:30px;} /* ---- split cards ---- */ .split{display:grid;grid-template-columns:1fr 1fr;} .pad{padding:46px 40px;display:flex;flex-direction:column;justify-content:flex-start;} .ph{position:relative;background:#ddd;} .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} /* ---- foodpairing glass accent ---- */ .fpcard{position:relative;} .fpcard .pad{position:relative;z-index:2;display:block;} .fpcard .ph{z-index:2;} .glasswrap{float:right;width:135px;height:470px;shape-outside:inset(165px 0 0 0);shape-margin:14px;} .glassacc{position:absolute;left:410px;bottom:-2px;width:185px;height:auto;z-index:1;} /* ---- pairing der woche ---- */ .pwcard{position:relative;} .pwcard .disc{position:absolute;right:36px;bottom:29px;margin-top:0;width:81px;height:81px;} /* ---- weinpraxis ---- */ .wpxcard{position:relative;} .wpxcard .disc{position:absolute;left:471px;bottom:35px;margin-top:0;width:81px;height:81px;} /* ---- wein kaufen ---- */ .wkcard{position:relative;} .wkcard .disc{position:absolute;right:39px;bottom:28px;margin-top:0;width:81px;height:81px;} /* ---- tile cards ---- */ .tilecard{padding:40px 26px 34px;} .tilecard h2.t{text-align:center;margin-bottom:28px;} .tiles{display:grid;gap:20px;} .tiles.three{grid-template-columns:repeat(3,1fr);} .tiles.four{grid-template-columns:repeat(4,1fr);} .tile{position:relative;border-radius:14px;overflow:hidden;} .tile.t3{height:418px;} .tile.t4{height:456px;} .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .tile .scrim{position:absolute;inset:0; background:linear-gradient(180deg,rgba(20,12,8,.74) 0%,rgba(20,12,8,.45) 26%,rgba(20,12,8,.05) 52%,transparent 66%);} .tile .lbl{position:absolute;left:16px;right:16px;top:22px;text-align:center;color:#fff;} .tile .lbl h3{margin:0 0 8px;font-weight:500;font-size:30px;line-height:1;} .tile .lbl p{margin:0;font-weight:500;font-size:17px;line-height:1.18;color:#f2ece6;} /* ---- glossar / suche ---- */ .duo{display:grid;grid-template-columns:1fr 1fr;gap:24px;} .appcard{padding:40px 44px;} .appcard h2.t{text-align:center;margin-bottom:22px;} .appcard .row{display:grid;grid-template-columns:200px 1fr;gap:30px;align-items:start;} .appcard .pf{width:200px;border-radius:24px;overflow:hidden;box-shadow:0 16px 30px rgba(0,0,0,.32);} .appcard p{font-family:'Open Sans',sans-serif;font-weight:400;font-size:26px;line-height:32px;margin:0;color:var(--ink);} /* ---- FAQ ---- */ .faqcard{padding:40px 44px;} .faqcard h2.t{text-align:center;margin-bottom:18px;} .faq{border-top:1px solid var(--line);} .faq:first-of-type{border-top:0;} .faq summary{cursor:pointer;list-style:none;position:relative;padding:18px 44px 18px 0; font-family:'Ubuntu',sans-serif;font-weight:500;font-size:26px;line-height:32px;color:var(--head);} .faq summary::-webkit-details-marker{display:none;} .faq summary::after{content:"";position:absolute;right:10px;top:50%;width:11px;height:11px; border-right:2px solid var(--tan-deep);border-bottom:2px solid var(--tan-deep); /* -70%/-30% optically center the rotated box in both states */ transform:translateY(-70%) rotate(45deg);transition:transform .2s;} .faq[open] summary::after{transform:translateY(-30%) rotate(225deg);} .faq p{margin:0;padding:0 0 22px;font-family:'Open Sans',sans-serif;font-weight:400; font-size:23px;line-height:31px;color:var(--ink);max-width:1080px;} /* ---- icon row ---- */ .iconrow{padding:34px 30px 6px;} .iconstrip{display:flex;justify-content:space-between;align-items:center;max-width:1180px;margin:0 auto;} .iconstrip img{width:74px;height:74px;border-radius:50%;} /* ---- footer ---- */ .foot{text-align:center;padding:44px 0 0;} .foot .mark{width:228px;margin:0 auto;} .foot .wm{font-weight:700;color:var(--head);font-size:34px;letter-spacing:.05em;margin:12px 0 0;} .foot .sm{color:var(--tan);font-size:23px;letter-spacing:.07em;margin:2px 0 30px;} .foot .dl{font-weight:700;color:#111;font-size:22px;margin:0 0 16px;} .foot .fbadge{display:block;width:288px;margin:0 auto;} .foot .fbadge img{width:288px;height:86px;object-fit:contain;} .footbar{background:var(--bar);color:var(--tan);text-align:center;padding:17px;margin-top:42px;font-size:15px;letter-spacing:.08em;} .footbar .footlinks{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 22px;list-style:none;margin:0 auto 8px;padding:0;} .footbar a{color:var(--tan);text-decoration:none;} .footbar a:hover{text-decoration:underline;} .footbar .copyright{margin:0;opacity:.8;}