/* ========================================================================= SLEEP MAGAZINE — Style C · "Stark" (bold editorial magazine) Shared design system. Theme-able via assets/style-c.js (accent/bg/font/density). ========================================================================= */ /* Fonts are self-hosted — see assets/css/fonts.css (GDPR: no Google Fonts CDN). */ /* ------------------------------------------------------------------------- TOKENS — the whole look lives in this block. Anything that is not a var() here cannot be restyled or themed, so do not reintroduce raw px/hex below. The five groups marked [JS] are swapped at runtime by assets/js/style-c.js (accent / bg / font / ink / density). ------------------------------------------------------------------------- */ :root{ /* ── colour: base ──────────────────────────────────────────── [JS: ink] */ --ink:#121212; --soft:#454440; --mute:#6c6b64; --paper:#f4f1e8; --card:#ffffff; --dark:#161512; --dark-alt:#241d2e; --line:#1c1c1c; --hair:#ddd8c9; --hi:#f4d23c; --hi-2:#ec6240; --hi-3:#2bb3a3; --blue:#00518d; --pos:#1f7a44; --neg:#c63a26; /* ── colour: on dark surfaces ─────────────────────────────── [derived] Text/borders that sit ON --dark (footer, dark heroes, verdict box, rabatte hub, mega feature). These were 35 hardcoded warm greys tuned for creme+schwarz, so every other ink/bg preset put beige text on a cool ground. They turn out to be a plain --paper -> --dark ramp at 100/80/50/16/10 %, so the @supports block below reproduces them to within ~2/255 AND makes them track both switchers for free. These static values are the no-color-mix fallback. */ --on-dark:#f4f1e8; --on-dark-soft:#c9c6ba; --on-dark-mute:#86847a; --on-dark-line:#3a352c; --on-dark-hair:#2c2a24; /* ── colour: derived surfaces ──────────────────────────────────────────*/ --tint-hi:oklch(0.96 0.05 95); /* winner row, subtle --hi wash */ --tint-cool:oklch(0.92 0.02 95); /* firmness scale fill */ --scrim:oklch(0.18 0.02 256 / .82); /* caption over image */ /* ── type ─────────────────────────────────────────────────── [JS: font] */ --serif:"Playfair Display", Georgia, serif; --sans:"IBM Plex Sans", system-ui, sans-serif; /* A snapshot of the GLOBAL serif, taken at :root before any component scope shadows --serif. A custom property cannot be read once a descendant redefines it, so this is the only way for a component inside a scope that pins --serif (.sm-arch) to opt back out — which is what the Classic card option needs, so an old-style card looks the same in the archive as it does on the homepage. Resolves against whatever :root ends up with, including the Customizer's Design-tokens override. */ --serif-root:var(--serif); --prose-ink:#33302b; /* The ramp mirrors the sizes the design already used, value for value — it is NOT an idealised scale. Re-proportioning type is a design call for the revamp, not something a refactor should do silently, so the only values that moved here were the 15 half-pixel sizes (9.5-18.5px), snapped to their integer neighbour. Change a step below and every one of the 280 declarations that reference it follows. */ --fs-3xs:10px; --fs-2xs:11px; --fs-xs:12px; --fs-sm:13px; --fs-md:14px; --fs-base:15px; --fs-lg:16px; --fs-xl:17px; --fs-2xl:18px; --fs-3xl:20px; --fs-4xl:24px; --fs-5xl:30px; --fs-h1:clamp(44px,6.4vw,86px); --fs-h2:clamp(32px,4.2vw,50px); --fs-h3:clamp(22px,2.6vw,30px); /* 70 one-off display sizes (19-96px) stay literal on purpose: each belongs to a single component (hero, bigscore, stat) and folding them into steps would change the page's proportions. They are the revamp's decision. */ /* ── space ─────────────────────────────────────────────── [JS: density] */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:26px; --sp-7:34px; --sp-8:48px; --sp-9:64px; --space-sec:78px; /* ── radius ──────────────────────────────────────────────────────────── The Stark design is square, so this is 0 and nothing rounds. It exists so the Customizer token page can preview rounded corners site-wide without editing 60 rules. --radius-btn lets CTAs round on their own. */ --radius:0; --radius-btn:var(--radius); /* ── buttons ─────────────────────────────────────────────────────────── Base .btn only. The --o/--hi/--light variants deliberately override these with their own colourways. */ --btn-bg:var(--ink); --btn-fg:#fff; --btn-border:var(--ink); --btn-hover-bg:var(--hi); --btn-hover-fg:var(--ink); /* ── frame & shadow ──────────────────────────────────────────────────── 2px is the Stark signature frame; 3px is the bold divider/emphasis. */ --frame:2px; --frame-bold:3px; --frame-hair:1px; /* --frame-light is the OFF SWITCH for the frames we decided the page has too many of (2026-08): the live-deal banners, the mega-menu star card and its above/below-list rules, the product card's inner separators, the review sidebar rail, gallery tiles, the score panel and the spec table. Those rules were not deleted — they were moved onto this token, so raising it to 1px (or 2px) brings every one of them back at once, here or from Design > Design tokens. Everything still on --frame is a frame we mean to keep. */ --frame-light:0; /* A divider colour that SURVIVES. The site currently runs --hair:#ffffff and --frame-hair:0px as token overrides (Design > Design tokens), so every hairline in this file is invisible in production — which is why only the 2px/3px frames were left doing the lining. The few dividers we keep on purpose (the score panel's split) are drawn with this instead, at a literal 1px, so neither override can erase them. Derived from --line below, so it follows the ink preset; the literal is the fallback. */ --hair-soft:#dfe1e6; /* The nav's light hairline, promoted out of .nav--light (2026-08-09) so it is a real global token: tables draw their row dividers with it. Same reason as --hair-soft — it is a literal rgba, so neither the --hair:#fff nor the --frame-hair:0 token override can erase it. */ --nav-line:rgba(0,0,0,.14); /* Hard offset shadows, numbered by weight. Same fidelity rule as the type ramp: these are the six offsets the design actually used, not a snapped scale, so nothing moved. Restyling the shadow = editing these 8 lines. */ --shadow-1:2px 2px 0 var(--ink); --shadow-2:3px 3px 0 var(--ink); --shadow-3:4px 4px 0 var(--ink); --shadow-4:5px 5px 0 var(--ink); --shadow-5:6px 6px 0 var(--ink); --shadow-6:8px 8px 0 var(--ink); --shadow-hi:6px 6px 0 var(--hi); --shadow-hi-sm:3px 3px 0 var(--hi); --shadow-line:3px 3px 0 var(--line); /* ── layout & stacking ───────────────────────────────────────────────── --nav-h / --subnav-h are overwritten at runtime with the real measured heights by style-c.js; these are the pre-JS defaults. They matter: a URL that arrives with a #hash is scrolled by the browser at parse time, long before the footer script runs, so a default that is 64px short parks the target under the sticky bar. See the .nav--st override below. */ --nav-h:70px; --subnav-h:0px; --z-skip:20; --z-subnav:25; --z-fbar:26; --z-nav:30; --z-topbar:31; --z-megabg:39; --z-panel:40; --z-navrow:41; /* --z-fbar sits BELOW --z-nav on purpose: the archive filter bar is sticky chrome that pins UNDER the navigation, exactly like --z-subnav. It briefly used --z-panel (40) and painted straight over the header. */ --z-suggest:70; --z-overlay:90; --z-toast:1000; /* ABOVE --z-toast on purpose. The mobile search modal is a sibling of
, and while the burger menu is open the header is lifted to --z-toast (see `.nav:has(.mobile-nav.is-open)` in the ≤980px block) so the promo topbar cannot paint over the menu. A search modal at --z-overlay therefore opened UNDERNEATH the menu it was launched from: .mobile-nav's 90 ranks inside the header, the header's 1000 is what the modal actually competes with. Comparing the two z-index NUMBERS is the trap — they are not in the same stacking context. */ --z-searchmodal:1010; } /* Pre-JS --nav-h for the stacked nav: two rows above 980px (the search row plus the menu row) measure 134px, and below it row2 is hidden so the 70px default is already right. Without this an anchor link opened cold lands 64px high. */ @media (min-width: 981px){ :root:has(.nav--st){--nav-h:134px} } /* Density scales the whole spacing ramp, not just the section gap — that is what makes "Kompakt"/"Eng" visibly change the page. */ html[data-density="kompakt"]{ --space-sec:54px; --sp-5:16px; --sp-6:20px; --sp-7:26px; --sp-8:36px; --sp-9:48px; } html[data-density="eng"]{ --space-sec:40px; --sp-4:12px; --sp-5:14px; --sp-6:16px; --sp-7:20px; --sp-8:28px; --sp-9:36px; } /* The real on-dark definition: derive from the two tokens the theme panel actually swaps, so dark surfaces follow every ink AND bg preset. */ @supports (color: color-mix(in srgb, red 50%, blue)) { :root{ --on-dark: var(--paper); --on-dark-soft: color-mix(in srgb, var(--paper) 80%, var(--dark)); --on-dark-mute: color-mix(in srgb, var(--paper) 50%, var(--dark)); --on-dark-line: color-mix(in srgb, var(--paper) 16%, var(--dark)); --on-dark-hair: color-mix(in srgb, var(--paper) 10%, var(--dark)); --hair-soft: color-mix(in srgb, var(--line) 16%, var(--card)); } } /* ── thin-border: the frame weight as an opt-in scope ─────────────────────── Only the WEIGHT changes. Colours, radii (still square), shadows and spacing are untouched, so this is a scope class and not a skin. It works because the frames are already fully tokenised — there is no hardcoded `Npx solid` left anywhere in the nav — so redefining the two tokens on an ancestor rethreads every frame inside it and nothing outside it. Put it on
for the navigation alone, or on for the whole page; Customizer → Sleep Magazine Design → Border weight does both. --frame-hair and --frame-light are deliberately NOT touched: the hairline is already 1px (and 0 in production via a token override), and --frame-light is the frames-off switch, not a weight. */ .thin-border{--frame:1px;--frame-bold:1px} *{box-sizing:border-box} /* a11y utilities (moved from the retired main.css) */ .screen-reader-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip-link:focus{position:fixed;z-index:var(--z-skip);top:12px;left:12px;width:auto;height:auto;padding:10px 14px;clip:auto;color:#fff;background:var(--ink)} body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:var(--fs-xl);line-height:1.6;-webkit-font-smoothing:antialiased} h1,h2,h3,h4{font-family:var(--serif);margin:0;font-weight:800;line-height:1.0;letter-spacing:-0.01em} p{margin:0} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:1160px;margin:0 auto;padding:0 32px} .wrap--narrow{max-width:880px} .kicker{font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;letter-spacing:.18em;text-transform:uppercase} .kicker + h2{margin-top:10px} .hl{background:var(--hi);padding:0 .12em;box-decoration-break:clone;-webkit-box-decoration-break:clone} .sec{padding:var(--space-sec) 0} .sec--tight{padding-top:24px} /* when a hero directly above already provides the air */ .sec--card{background:var(--card)} .sec--dark{background:var(--dark);color:var(--paper)} .sec__head{display:flex;align-items:flex-end;justify-content:space-between;border-bottom:var(--frame-bold) solid var(--line);padding-bottom:18px;margin-bottom:36px;gap:20px;flex-wrap:wrap} .sec--dark .sec__head{border-color:var(--paper)} .sec__head h2{font-size:var(--fs-h2)} .sec__lead{color:var(--soft);font-size:var(--fs-2xl);max-width:56ch;margin-top:14px} /* ---- top bar ---- */ /* z-index 31 > .nav's 30: keeps the promo line above the stacked layout's fixed scrim, which otherwise dims its accent color while a panel is open */ .topbar{background:var(--hi);color:var(--ink);font-weight:700;font-size:var(--fs-sm);letter-spacing:.04em;text-align:center;padding:9px;text-transform:uppercase;position:relative;z-index:var(--z-topbar)} /* ---- nav ---- */ .nav{position:sticky;top:0;z-index:var(--z-nav);background:var(--paper);border-bottom:var(--frame) solid var(--line)} .nav__row{display:flex;align-items:center;justify-content:space-between;height:70px} .logo{font-family:var(--serif);font-weight:900;font-size:var(--fs-4xl);letter-spacing:-0.02em;white-space:nowrap} .logo em{font-style:italic;font-weight:600} .logo img{display:block;height:38px;width:auto} .foot .logo img{height:40px} .nav__links{display:flex;gap:24px;font-weight:600;font-size:var(--fs-md)} .nav__links a{color:var(--soft)} .nav__links a:hover,.nav__links a.is-active{color:var(--ink)} .nav__links a.is-active{box-shadow:inset 0 -3px var(--hi)} /* ---- buttons ---- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:var(--fs-base);background:var(--btn-bg);color:var(--btn-fg);padding:15px 24px;border:var(--frame) solid var(--btn-border);cursor:pointer;transition:.15s;white-space:nowrap} .btn:hover{background:var(--btn-hover-bg);color:var(--btn-hover-fg)} .btn--o{background:transparent;color:var(--ink)} .btn--o:hover{background:var(--ink);color:#fff} .btn--hi{background:var(--hi);color:var(--ink);border-color:var(--ink)} .btn--hi:hover{background:var(--ink);color:#fff} .btn--light{background:#fff;color:var(--ink);border-color:#fff} .btn--light:hover{background:var(--hi);border-color:var(--hi)} .btn--block{width:100%} .btn--lg{padding:18px 30px;font-size:var(--fs-lg)} .btn--sm{padding:10px 15px;font-size:var(--fs-sm)} .tlink{font-weight:700;border-bottom:var(--frame-bold) solid var(--hi);padding-bottom:2px} .tlink:hover{background:var(--hi)} .anz{font-size:var(--fs-xs);letter-spacing:.01em;color:var(--mute);margin-top:8px;text-align:center;font-weight:600} /* ---- hero ---- */ .hero{padding:84px 0 76px;position:relative} .hero--dark{background:var(--dark);color:var(--paper)} .hero--dark .kicker{color:var(--hi)} .hero--dark h1{color:#fff} .hero--dark .hero__lead{color:var(--on-dark-soft)} .hero--light{background:var(--paper);border-bottom:var(--frame-bold) solid var(--line)} .hero--light .kicker{color:var(--hi-2)} .hero h1{font-size:var(--fs-h1);max-width:16ch;margin:20px 0 0} .hero--product h1{font-size:clamp(26px,3.2vw,44px);max-width:none;word-break:normal} /* Brand hero: the sitewide 16ch cap is narrower than "{Brand} Gutscheincode" on its own, so the phrase always broke mid-title. Full width plus a calmer size keeps it on line 1; the italic subtitle takes line 2, and no more. */ .hero--compact{padding:46px 0 40px} /* The crumbs bar already separates the hero from the nav, so the full 84px top padding read as dead space under it. Bottom padding stays — the lead and tag rows need it. Two selectors deep, so the responsive .hero padding shorthands further down can't undo it. */ .crumbs + .hero{padding-top:38px} /* Comparison hero: same 16ch problem .hero--brand and .hero--product already solved, and for the same reason — one German compound is wider than the cap. "Taschenfederkernmatratze" is 673px at 54px against a 518px box (16ch) and a 598px text track, so its last letter painted 19px onto the hero image above ~1200px, where .wrap stops growing but 4.4vw does not. It is the longest token in the published set (24 chars), so sizing for it covers all of them. Breaking the word is not the fix: hyphens:auto produces NO hyphenation here (Chrome's dictionary is a downloadable component, absent — same finding as the .tbl--compact note further down) and overflow-wrap:break-word does not lower min-content width at all. So: drop the cap, and cap the size instead. 3.9vw keeps the word inside its track at 900-1100px too, which stops the grid from stealing width from the image to fit it. */ .hero--compact h1{font-size:clamp(34px,3.9vw,46px);max-width:none;margin-top:14px} .hero--compact .hero__lead{font-size:var(--fs-2xl);margin-top:16px} .hero--compact .hero__meta{margin-top:24px;gap:28px} .hero--compact .hero__meta div b{font-size:27px} .hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center} .hero__grid h1{margin-top:18px} .hero h1 .it{font-style:italic;font-weight:600} .hero__lead{color:var(--soft);font-size:var(--fs-3xl);max-width:54ch;margin-top:24px} .hero__cta{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap} .hero__meta{display:flex;gap:34px;margin-top:38px;flex-wrap:wrap} .hero__meta div b{font-family:var(--serif);font-size:34px;font-weight:800;display:block;line-height:1} .hero--dark .hero__meta div b{color:#fff} .hero__meta div span{font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} /* --mute is unreadable on the dark hero ("Produkte getestet" etc.) */ .hero--dark .hero__meta div span{color:var(--on-dark-soft)} .hero--dark .byline small{color:var(--on-dark-soft)} /* ---- breadcrumbs (Customizer > Breadcrumbs) -------------------------------- ONE global trail. Its colour is NOT fixed: it reads two variables the surrounding band sets, so the same markup works on a light band, a dark band or inside another component's header without a second skin and without the JS the prototype used to guess its background. --sm-crumb normal links + separators --sm-crumb-strong the current page (and link hover) Defaults below are the light-band values, so any band that sets nothing keeps the appearance it had. A dark band sets them to rgba(255,255,255,.72)/#fff — see .crumbs--on-dark and the archive head. */ .crumbs{border-bottom:var(--frame-hair) solid var(--hair);background:var(--paper)} /* padding-top/bottom ONLY — a `padding:11px 0` shorthand would wipe .wrap's horizontal gutter and pin the trail to the left screen edge on mobile */ .crumbs .wrap{display:flex;align-items:center;gap:8px;padding-top:11px;padding-bottom:11px;font-size:var(--fs-sm);color:var(--sm-crumb,var(--mute));flex-wrap:wrap} .crumbs a{color:var(--sm-crumb,var(--soft));text-decoration:none;font-weight:600} .crumbs a:hover{color:var(--sm-crumb-strong,var(--ink));text-decoration:underline} .crumbs i{font-style:normal;color:var(--sm-crumb,var(--mute));opacity:.5} .crumbs span[aria-current]{color:var(--sm-crumb-strong,var(--ink));font-weight:600} /* Bare variant: no band of its own — inherits the surrounding section's background and sits flush in its padding. Used by the archive page head. The inner .wrap has to give up BOTH its gutter and its max-width: this variant is nested inside another .wrap, so keeping them indented the trail 32px further than the h1 it sits above. */ .crumbs--bare{background:none;border-bottom:0} .crumbs--bare .wrap{padding:0;max-width:none} /* Any band that paints itself dark opts in with this class. */ .crumbs--on-dark{--sm-crumb:rgba(255,255,255,.72);--sm-crumb-strong:#fff} .hero__tags{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap} .hero__tags .stamp{margin-bottom:0} .hero__logo-row{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:18px} .hero__brandlogo{display:block;width:130px;height:74px;border:var(--frame) solid var(--line);object-fit:contain;background:var(--card);padding:8px} /* ---- stats (homepage hero) ---- */ .stats{display:grid;grid-template-columns:repeat(2,1fr);border:var(--frame) solid var(--paper)} .hero--dark .stats{border-color:var(--on-dark-line)} .stat{padding:26px;border:var(--frame-hair) solid var(--on-dark-line)} .stat b{font-family:var(--serif);font-weight:900;font-size:40px;color:var(--hi);display:block;line-height:1} .stat span{font-size:var(--fs-sm);color:var(--on-dark-soft);margin-top:8px;display:block} /* ---- brand strip ---- */ .brands{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));border-top:var(--frame) solid var(--line);border-left:var(--frame) solid var(--line)} .brandchip{display:flex;align-items:center;justify-content:center;min-height:96px;padding:18px 20px;background:var(--card);border-right:var(--frame) solid var(--line);border-bottom:var(--frame) solid var(--line);font-family:var(--serif);font-weight:700;font-size:var(--fs-base);text-align:center;color:var(--ink);transition:background .12s} .brandchip:hover{background:var(--paper)} .brandchip img{max-width:100%;height:auto} /* ---- product card grid ---- The container frames the grid while every cell also draws its own right + bottom line, so the container's bottom edge doubled to 4px against the last row's cells. The container now skips its bottom edge and lets the cells own it (they always did). Directly under a .sec__head the top edge is dropped too — same double-rule problem `.sec__head + .item` already solves: the section's own 3px rule was landing 36px above a second full-width line across the top of the cards ("Weitere Produkte" on a review). */ .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:var(--frame) solid var(--line);border-bottom:0} .grid-3 > *{background:var(--card);border-right:var(--frame) solid var(--line);border-bottom:var(--frame) solid var(--line)} .grid-3 > *:nth-child(3n){border-right:0} .sec__head + .grid-3{border-top:0} /* Article lattice on the hairline, like the FAQ rows and the tables. --------------------------------------------------------------------------- The article archives (/blog/, post/category/author archives, the front page row, related articles on a single) drew this shared lattice in the 2px ink frame, so a page of cards read as a heavy grid of boxes. Same call as the FAQ separators: a line that DIVIDES goes on the 1px --nav-line the tables and the light nav use; a line that FRAMES stays as it is. Done by re-declaring the two tokens on the grid's own scope rather than by restating the borders, which is the .thin-border trick (see :root) and the only version that survives: the responsive rules further down re-assert `border-right: var(--frame) solid var(--line)` at 2 columns and `border-right: 0` at 1, so any override that hard-codes a width either loses to them or wins where it must not (a 1px right edge on single-column cards). Re-pointing the tokens leaves every one of those rules saying exactly what it already says, one weight and one colour lighter. :has(> .bcard) is what keeps this to article cards: the same bare .grid-3 is the brand-card lattice in archive-sm_brand.php, which nobody asked to change. The chip and the "Artikel lesen" underline pin --frame back to 2px — neither is a separator, so both keep the weight they were designed with. */ .grid-3:has(> .bcard){--frame:1px;--line:var(--nav-line)} .grid-3:has(> .bcard) .bcard__cat, .grid-3:has(> .bcard) .bcard__more{--frame:2px} .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px} /* ---- .grid-3--cards: gapped grid for self-bordered cards (2026-08 refonte) ---- Plain .grid-3 draws ONE shared frame and lets its children share edges. The redesigned .pcard carries its own hairline border, so inside .grid-3 it would double every rule. This modifier drops the container frame and the shared child edges and replaces them with a real gap. It is opt-in per call site rather than a change to .grid-3 itself, because .grid-3 is also the blog (.bcard) and brand-card grid and those still use the shared-frame look. Every product-card grid carries it; nothing else does. */ .grid-3--cards{border:0;gap:20px} /* The :nth-child(3n) selector below is not decoration — .grid-3 drops the right edge of every third cell at (0,2,0), which OUT-SPECIFIES .pcard's own `border:1px` at (0,1,0). Without it the last card in each row silently loses its right border. Reset the shared edges, then restore the card's own frame at a specificity that survives. */ .grid-3--cards > *, .grid-3--cards > *:nth-child(3n){border:0;background:none} /* background restored WITH the border: the generic 3n reset above outranks .pcard's own background, so every third card went transparent — invisible on white sections, a see-through card on the blue .dealsplit band. */ .grid-3--cards > .pcard, .grid-3--cards > .pcard:nth-child(3n){border:1px solid var(--hair);background:var(--card)} .sec__head + .grid-3--cards{border-top:0} /* ---- pcard: the ONE product card, site-wide (2026-08 refonte) --------------- Square, hairline-bordered, no shadow. The three tokens below are re-declared on the card's own scope ON PURPOSE: production overrides --hair to #ffffff, --radius to 20px and --serif to IBM Plex Sans from Design > Design tokens, which would erase this card's border, its square corners and its display type. Everything else (ink, --soft, --mute, --hi-2, --dark, --paper) still resolves to the live global palette, so the card follows the Customizer everywhere it matters and only pins what the design depends on. Drop these three lines if the global tokens are ever brought back in line. They hang off `body:not(.sm-cards-classic)` rather than `.pcard` itself so the Classic card option can fall back to the GLOBAL tokens: a custom property cannot be un-set once a selector shadows it, so the only way to make the override optional is to not apply it in the first place. */ body:not(.sm-cards-classic) .pcard{ --hair:#d5dde1; --radius:0; --serif:"Playfair Display", Georgia, serif; } .pcard{background:var(--card);border:1px solid var(--hair);display:flex;flex-direction:column;min-width:0} .pcard[hidden]{display:none} .pcard__media{position:relative;height:178px;background:var(--paper);flex:none;overflow:hidden} .pcard__media img,.pcard__media image-slot,.pcard__media-ph{display:block;width:100%;height:100%;object-fit:cover} .pcard__body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1;min-width:0} /* Editorial best-for tag — outlined, square, never overlaid on the image. */ .pcard__tag{align-self:flex-start;border:1px solid var(--hi-2);color:var(--hi-2);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;line-height:1.4} .pcard__head{display:flex;justify-content:space-between;align-items:flex-start;gap:14px} .pcard__id{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px} .pcard__brand{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} .pcard__title{font-family:var(--serif);font-weight:800;font-size:19px;line-height:1.16;letter-spacing:0;margin:0} .pcard__score{flex:none;text-align:right;white-space:nowrap} .pcard__score b{display:block;font-family:var(--serif);font-weight:800;font-size:25px;line-height:1} .pcard__score small{font-family:var(--sans);font-size:11px;font-weight:500;color:var(--mute);letter-spacing:0} .pcard__for{color:var(--soft);font-size:13.5px;line-height:1.5} /* Meta line — accent-coloured, the card's one piece of "why this one" signal. */ .pcard__spec{font-size:12.5px;font-weight:600;color:var(--hi-2);letter-spacing:0} .pcard__foot{margin-top:auto;border-top:0;padding-top:10px;display:flex;flex-direction:column;gap:9px} /* --fs-3xl (20px), not the old raw 22px (2026-08-21): the price is the only thing on this card that sat off the type scale. --fs-3xl and not --fs-4xl (24px) because `body.sm-cards-classic` already bumps the price TO --fs-4xl — taking 24px as the default would make that override a no-op while its own breakpoint override still dropped classic to 20px. Costs 2px of price. */ .pcard__price{font-family:var(--serif);font-weight:800;font-size:var(--fs-3xl);line-height:1.2} .pcard__price small{font-family:var(--sans);font-size:var(--fs-xs);font-weight:600;color:var(--mute);letter-spacing:.04em} /* The card CTA takes the SAME colourway as every other button on the site — the --btn-* tokens .btn is built from, so it follows the Customizer's button colours instead of inventing its own. It briefly used --dark/--hi-2, which is not a pairing the palette actually contains. Only the geometry (full width, square, 13px) is the card's own. */ .pcard__cta{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--btn-bg);color:var(--btn-fg);font-family:var(--sans);font-size:14.5px;font-weight:700;padding:13px;text-align:center;transition:background .15s,color .15s} .pcard__cta:hover{background:var(--btn-hover-bg);color:var(--btn-hover-fg)} a.pcard:hover .pcard__cta{background:var(--btn-hover-bg);color:var(--btn-hover-fg)} .pcard__cta:focus-visible{outline:3px solid var(--hi-2);outline-offset:2px} /* ---- Classic product card (Design → Archive → Product card design) ---------- The pre-refonte card, restored as an opt-in. Markup is IDENTICAL in both modes — this is purely a re-skin driven by the `sm-cards-classic` body class, so nothing in PHP or JS branches on it. Restores: the 2px frame, the 210px image, 24px body padding, the filled tag chip, the larger serif title and score, and a rule above the price with the standard button as the CTA. In the shared-border grids (.grid-3--cards) it also gives the joined frame back, since that is half of what the old card looked like. Selectors are body-scoped, so they outrank the refonte rules above without a single !important. */ /* Opt back out of .sm-arch's pinned --serif so a classic card in the archive matches a classic card anywhere else (see --serif-root at :root). */ body.sm-cards-classic .pcard{--serif:var(--serif-root);border:var(--frame) solid var(--line)} body.sm-cards-classic .pcard__media{height:auto;background:none;border-bottom:var(--frame-light) solid var(--line)} body.sm-cards-classic .pcard__media img, body.sm-cards-classic .pcard__media image-slot, body.sm-cards-classic .pcard__media-ph{height:210px} body.sm-cards-classic .pcard__body{padding:24px;gap:12px} /* the old chip: filled --hi with its own ink frame, not the outlined accent tag */ body.sm-cards-classic .pcard__tag{background:var(--hi);color:var(--ink);border:var(--frame) solid var(--ink);font-size:var(--fs-2xs);letter-spacing:.08em;padding:1px 8px;line-height:1.5;margin-bottom:-2px} body.sm-cards-classic .pcard__head{gap:18px} body.sm-cards-classic .pcard__id{gap:5px} body.sm-cards-classic .pcard__brand{font-size:var(--fs-xs)} body.sm-cards-classic .pcard__title{font-size:23px;line-height:1.12} body.sm-cards-classic .pcard__score b{font-weight:900;font-size:var(--fs-5xl)} body.sm-cards-classic .pcard__score small{display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;margin-top:8px;line-height:1.2} body.sm-cards-classic .pcard__for{font-size:var(--fs-base);line-height:1.6} /* the old spec line was muted, not the accent meta line */ body.sm-cards-classic .pcard__spec{font-size:var(--fs-sm);color:var(--mute);letter-spacing:.02em} body.sm-cards-classic .pcard__foot{border-top:var(--frame-light) solid var(--line);padding-top:16px;gap:12px} body.sm-cards-classic .pcard__price{font-size:var(--fs-4xl)} /* CTA back to the standard button geometry (.btn --block) */ body.sm-cards-classic .pcard__cta{font-size:var(--fs-base);padding:15px 24px;border:var(--frame) solid var(--btn-border)} /* …and the joined grid frame the old card was drawn inside */ body.sm-cards-classic .grid-3--cards{gap:0;border:var(--frame) solid var(--line);border-bottom:0} body.sm-cards-classic .grid-3--cards > .pcard, body.sm-cards-classic .grid-3--cards > .pcard:nth-child(3n){border:0;border-right:var(--frame) solid var(--line);border-bottom:var(--frame) solid var(--line)} body.sm-cards-classic .grid-3--cards > .pcard:nth-child(3n){border-right:0} /* ---- bcard: the ONE blog/Ratgeber card (front page, /blog, post archives) ---- Accent stripe + category chip pick up --hi/--hi-2 from the Customizer. */ .bcard{background:var(--card);display:flex;flex-direction:column;min-width:0} /* Accent bar removed: the light-blue (--hi) stripe read as an out-of-place "ombre portee" line on the homepage article cards. */ .bcard::before{content:none} .bcard__media{display:block;position:relative;border-bottom:var(--frame) solid var(--line);overflow:hidden} .bcard__media img{display:block;width:100%;height:200px;object-fit:cover;transition:transform .25s} .bcard:hover .bcard__media img{transform:scale(1.03)} .bcard__ph{display:flex;align-items:center;justify-content:center;height:200px;background:var(--hi);font-family:var(--serif);font-weight:900;font-size:64px;color:var(--ink)} .bcard__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:12px;flex:1} .bcard__meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px} .bcard__cat{background:var(--hi);color:var(--ink);border:var(--frame) solid var(--ink);font-family:var(--sans);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:1px 8px;line-height:1.5} .bcard__date{font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;color:var(--mute);letter-spacing:.02em} .bcard__title{font-size:22px;line-height:1.15} .bcard__title a:hover{background:var(--hi);box-decoration-break:clone;-webkit-box-decoration-break:clone} .bcard__excerpt{color:var(--soft);font-size:var(--fs-base)} /* Separator on the soft nav hairline, not the 2px ink rule — it divides the card's own content, it is not a frame edge. */ .bcard__foot{margin-top:auto;border-top:1px solid var(--nav-line);padding-top:14px;display:flex;align-items:center;justify-content:space-between;gap:12px} /* Underline on --hi, the site's link colour (.tlink, .prose a, .tax-guides__lbl and every hover use it). This rule was one of only two anywhere still underlining on --hi-2, which reads as a second, darker blue. */ .bcard__more{font-family:var(--sans);font-size:var(--fs-sm);font-weight:800;letter-spacing:.06em;text-transform:uppercase;border-bottom:var(--frame) solid var(--hi);padding-bottom:1px;white-space:nowrap} .bcard__more:hover{color:var(--hi-2)} .bcard__read{font-family:var(--sans);font-size:var(--fs-sm);font-weight:600;color:var(--mute);white-space:nowrap} /* ---- ranked item (comparison) ---- */ .item{display:grid;grid-template-columns:140px 1fr;gap:36px;padding:48px 0;border-bottom:var(--frame) solid var(--line)} .item:first-of-type{border-top:var(--frame) solid var(--line)} .sec__head + .item{border-top:0} /* the sec head already rules the top — no double line */ .item__no{font-family:var(--serif);font-size:96px;font-weight:900;line-height:.8;letter-spacing:-0.04em} /* Award label above product title in comparison ranked items */ .item__award{display:inline-block;background:var(--hi);color:var(--ink);border:var(--frame) solid var(--ink);font-family:var(--sans);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.12em;text-transform:uppercase;line-height:1.4;padding:4px 10px;margin-bottom:10px} /* 320/48 = .with-aside's exact track/gap, so the rail is the SAME width as the product page's sidebar (2026-08-13 normalization). With rank numbers off (.item--nonum, the running configuration) the narrative column lands on 728px — also exactly the product page's main column. */ .item__body{display:grid;grid-template-columns:1fr 320px;gap:48px} /* German product names are single compound tokens — "Sleepsy Solara Tonnentaschenfederkernmatratze" is one 30-character word. A grid track's default min-width:auto floors it at min-content, so on a 345px phone that one word set a 408px floor for the WHOLE ranked item and dragged the photo, the pros/cons and the buy rail out of the viewport with it. Two halves: let the word break (hyphens:auto reads the ), and let the tracks shrink so no future long token can push the layout around again. */ .item__body,.item__main,.item__head,.right{min-width:0} .item h3,.item .brand,.item__award{overflow-wrap:break-word;hyphens:auto} .item .brand{font-weight:700;font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)} .item h3{font-size:38px;margin:6px 0 14px} .item h3 .it{font-style:italic;font-weight:600} .item image-slot{border:var(--frame) solid var(--line);display:block} .stamp{display:inline-block;background:var(--ink);color:#fff;font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;margin-bottom:16px;white-space:nowrap} .item .desc{font-size:var(--fs-2xl);color:var(--soft);max-width:52ch;margin-bottom:22px} /* Customizer > Comparison layout > "intro and product descriptions span the full width": drops the reading-measure cap on the comparison hero intro and the ranked-item description. Set on both the .hero__lead wrapper and the paragraph inside it, since the wrapper's own 54ch would bound the p anyway. Specificity has to clear `.item .desc` (0,2,0), hence the descendant form. */ .hero__lead.txt-wide,.item .desc.txt-wide{max-width:none} .proscons{display:grid;grid-template-columns:1fr 1fr;gap:18px} .pc{border:var(--frame) solid var(--line);padding:16px 20px;background:var(--card)} .pc.pos{border-color:var(--pos)} .pc.neg{border-color:var(--neg)} .pc h5{font-family:var(--sans);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin:0 0 12px;display:flex;align-items:center;gap:8px;padding-bottom:10px;border-bottom:var(--frame) solid var(--hair)} .pc.pos h5{color:var(--pos)} .pc.neg h5{color:var(--neg)} .pc h5::before{content:"";width:14px;height:14px;border-radius:50%;display:inline-block;flex:none} .pc.pos h5::before{background:var(--pos)} .pc.neg h5::before{background:var(--neg)} .pc ul{list-style:none;margin:0;padding:0;font-size:var(--fs-base);color:var(--soft);display:flex;flex-direction:column;gap:9px} .pc li{display:flex;gap:10px;align-items:flex-start;line-height:1.4} .pc li::before{font-weight:800;flex:none;font-size:var(--fs-lg);line-height:1.3} .pc.pos li::before{content:"+";color:var(--pos)} .pc.neg li::before{content:"\2013";color:var(--neg)} .right{border-left:var(--frame) solid var(--line);padding-left:28px;display:flex;flex-direction:column} /* Ranked-item buy rail: follows ITS product down the page and lets go when the next item takes over. position:sticky is bounded by its containing block, so the travel is exactly .right's box (= the item's body) — no JS, and one item's price can never hang over the next item's photo. The measured slack is 400-850px per item, so it genuinely travels. The WRAPPER sticks, not .right itself: .right stretches to draw the divider beside the whole narrative, and a sticky .right would collapse to its content and drag that line down the page with it. */ .right__stick{display:flex;flex-direction:column;position:sticky;top:calc(var(--nav-h) + var(--subnav-h) + 20px)} /* HEIGHT GUARD — same reasoning as .aside-wrap's: a sticky block taller than the room the chrome leaves it pins its own overflow permanently off-screen, and nothing can scroll it back. A rail with a coupon plus the brand block measures ~730px, which does not fit a 768px laptop. Cap it and let the surplus scroll inside. The padding/margin pair is net-zero for layout and keeps borders off the clip edge. Only above the stacking breakpoint. */ @media (min-width: 881px){ .right__stick{ max-height:calc(100vh - var(--nav-h) - var(--subnav-h) - 40px); overflow-y:auto; overscroll-behavior:contain; padding:0 6px 6px 0; margin:0 -6px -6px 0; scrollbar-width:thin; scrollbar-color:var(--ink) var(--hair); } } /* line-height .85 let the 86px serif digits (comma of "9,0") bleed ~13px past the line box into the verdict badge below — same overflow family as the pcard score fix. .95 keeps the tight look; the badge gets extra air. */ .bigscore{font-family:var(--serif);font-size:86px;font-weight:900;line-height:1;letter-spacing:-0.04em} .bigscore sup{font-size:var(--fs-4xl);font-weight:600;color:var(--mute);vertical-align:super} .verdict{display:inline-block;background:var(--hi);color:var(--ink);font-weight:700;font-size:var(--fs-md);padding:4px 10px;margin-top:18px;align-self:flex-start} /* (.scoreline, the comparison rail's own score row, retired 2026-08-13: the rail adopted the product page's .buyrail__score/.buyrail__num/.buyrail__badge verbatim so the two rails cannot drift.) */ .price{font-family:var(--serif);font-weight:800;font-size:var(--fs-5xl);margin-top:24px} .price small{display:block;font-family:var(--sans);font-size:var(--fs-xs);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)} /* Struck-through regular price beside an active promo (sm_price_html()) — muted and smaller so the promo price stays the loud element. */ .price-was{font-family:var(--sans);font-weight:600;font-size:.6em;color:var(--mute);text-decoration-thickness:1px;margin-left:.3em;white-space:nowrap} .right .btn{margin-top:18px} /* ---- table ---- UNBORDERED BY DEFAULT (2026-08-09). Every table on the site used to sit in a 2px ink box with a 3px header rule, while its row dividers were drawn with --frame-hair/--hair — both zeroed by the live token overrides, so the only thing left doing any lining was the heavy outer frame. Now: no outer frame, no verticals, and horizontal dividers only, in the nav's light hairline (--nav-line, a literal rgba no token override can erase). */ table{border-collapse:collapse} table th,table td{border:0;border-bottom:1px solid var(--nav-line)} /* tbody, not just tr: a thead's single row is ALSO a :last-child, so the bare selector silently erased the header rule on every .tbl. */ table tbody tr:last-child th,table tbody tr:last-child td{border-bottom:0} .tbl-scroll{overflow-x:auto} .tbl{width:100%;border-collapse:collapse;font-size:var(--fs-base)} .tbl-scroll .tbl{min-width:760px} /* Article tables must fit the 760px prose column — no horizontal scroll */ /* inside running text the table needs its own bottom gap — paragraphs carry margins, the bare .tbl-scroll div doesn't */ .prose .tbl-scroll{margin:0 0 22px} /* ---- newsletter subscription form (/newsletter/, Newsletter plugin) — THE action on that page: big Stark card, oversized fields ---- */ .tnp-subscription{max-width:560px;margin:10px 0 14px;background:var(--card);border:var(--frame-bold) solid var(--line);box-shadow:var(--shadow-6);padding:26px 26px 24px} .tnp-subscription form{margin:0} .tnp-subscription .tnp-field{margin:0 0 16px} .tnp-subscription .tnp-field-email>label{display:block;font-size:var(--fs-2xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);margin-bottom:7px} .tnp-subscription input.tnp-email{width:100%;height:54px;border:var(--frame) solid var(--line);background:var(--paper);padding:0 16px;font-family:var(--sans);font-size:var(--fs-lg);color:var(--ink)} .tnp-subscription input.tnp-email:focus{outline:none;border-color:var(--ink)} .tnp-subscription label{font-size:var(--fs-md);font-weight:600;color:var(--soft);line-height:1.45} .tnp-subscription input.tnp-privacy{margin-right:8px} .tnp-subscription .tnp-field-button{margin-bottom:0} /* !important: the plugin ships its own stylesheet with equal-specificity input[type=submit] rules that load after ours */ .tnp-subscription input.tnp-submit{width:100%!important;height:54px!important;background:var(--hi)!important;border:var(--frame) solid var(--line)!important;border-radius:var(--radius)!important;font-family:var(--sans)!important;font-weight:800;font-size:var(--fs-base)!important;letter-spacing:.05em;text-transform:uppercase;color:var(--ink)!important;cursor:pointer;box-shadow:var(--shadow-3);transition:transform .12s,box-shadow .12s,background .12s} .tnp-subscription input.tnp-submit:hover{background:var(--ink)!important;color:#fff!important;transform:translate(1px,1px);box-shadow:var(--shadow-1)} .tnp-subscription input.tnp-email{border-radius:var(--radius)!important} @media (max-width: 620px){.tnp-subscription{padding:20px 18px 18px;box-shadow:var(--shadow-5)}} /* ---- comparison TOC, static variant (Customizer > Comparison layout) ---- */ .toc-static{background:var(--card);border:2px solid var(--line);box-shadow:6px 6px 0 var(--ink);padding:18px 22px;margin:26px 0 4px} .toc-static__h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);margin:0 0 8px} .toc-static a{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid var(--hair);color:var(--ink)} .toc-static a:last-of-type{border-bottom:0;padding-bottom:2px} .toc-static__no{font-family:var(--serif);font-weight:900;font-size:20px;min-width:26px;color:var(--hi-2);flex:none} .toc-static__t{display:flex;flex-direction:column;line-height:1.3;min-width:0} .toc-static__t strong{font-size:14px} .toc-static__t small{font-size:12px;color:var(--soft)} .toc-static a:hover .toc-static__t strong{box-shadow:inset 0 -2px var(--hi)} /* ---- comparison TOC, light variant: no box, arrows instead of numbers, only the top pick keeps its rank ---- */ .toc-light{margin:26px 0 4px;max-width:620px} .toc-light__h{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;color:var(--ink);margin:0 0 8px} .toc-light a{display:flex;align-items:baseline;gap:10px;padding:6px 0;color:var(--ink)} .toc-light a i{font-style:normal;font-weight:800;color:var(--hi-2);flex:none;width:22px} .toc-light__no{font-size:15px;color:var(--hi-2);flex:none;width:22px;text-align:left} .toc-light__win{display:inline-block;font-style:normal;font-family:var(--sans);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;background:var(--hi);color:var(--ink);padding:2px 8px;margin-left:8px;vertical-align:2px;white-space:nowrap} .toc-light__t{display:flex;flex-direction:column;line-height:1.35;min-width:0} .toc-light__t strong{font-size:15px} .toc-light__t small{font-size:12.5px;color:var(--soft)} .toc-light a:hover .toc-light__t strong{box-shadow:inset 0 -2px var(--hi)} /* TOC variant D: top 3 visible, remainder in a native
disclosure. The revealed links reuse the .toc-light a rules above, so the open state is identical to variant C. NOTE: the FAQ accordion's `details` / `summary` rules used to be bare element selectors that reached any
on the page, which is why this block resets them. They are scoped to .sec--faq now and a TOC never sits inside a FAQ section, so those resets are belt-and-braces rather than load-bearing. The positive styling below (inline summary, sans 14px, underline) is still required — it is what makes a "show more" link look like a link. */ .toc-light .toc-light__more{margin:0;border:0} .toc-light .toc-light__more>summary{display:inline;cursor:pointer;list-style:none;padding:8px 0 2px;font-family:var(--sans);font-size:14px;font-weight:400;color:var(--ink);text-decoration:underline} .toc-light .toc-light__more>summary::-webkit-details-marker{display:none} .toc-light .toc-light__more>summary::after{content:none} .toc-light .toc-light__more>summary:hover{text-decoration:none} .toc-light .toc-light__more>summary:focus:not(:focus-visible){outline:none} .toc-light .toc-light__more .is-open{display:none} .toc-light .toc-light__more[open] .is-shut{display:none} .toc-light .toc-light__more[open] .is-open{display:inline} /* anchor targets clear the sticky chrome (nav + optional subnav) */ .item[id],section[id]{scroll-margin-top:calc(var(--nav-h) + 48px)} /* Article body headings (single.php injects/keeps the ids, the offset is ours). --nav-h is republished from the nav's measured height, so this follows the classic 70px bar and the stacked 134px one alike; a fixed value can only be right for one of them. 24px keeps a hair of air above the heading. */ .prose h2[id]{scroll-margin-top:calc(var(--nav-h) + var(--subnav-h) + 24px)} /* ---- comparison sections breathe less on mobile (78+64px gaps read as holes between Ranking / Überblick / Aktionen on a phone) ---- */ @media (max-width: 760px){ .single-sm_comparison main .sec{padding-top:36px;padding-bottom:36px;margin-bottom:28px!important} } .prose .tbl-scroll .tbl{min-width:0;font-size:var(--fs-md)} .prose .tbl td{padding:12px 10px;vertical-align:top} .prose .tbl th{padding:11px 10px} .tbl-scroll .spectable{min-width:0} /* 2-col spec tables never need forced width */ .tbl th{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:13px 13px;border-bottom:1px solid var(--nav-line);background:var(--paper)} /* sticky column headers only inside scrollable comparison tables — a bare position:sticky on every th made sidebar row-headers ride out of the table */ .tbl-scroll thead th{position:sticky;top:0} .tbl td{padding:15px 13px;border-bottom:1px solid var(--nav-line);vertical-align:middle} /* Row hover belongs to the SCROLLABLE comparison/deal tables, where it helps you keep your place across a wide row. The product page's 2-column Technische Daten table (.spectable) never scrolls and must not take the sky-fill — design_handoff_produktseite §5. */ .tbl-scroll .tbl:not(.spectable) tr:hover td{background:var(--hi)} .tbl tr.is-winner td{background:var(--tint-hi)} .tbl tr.is-winner:hover td{background:var(--hi)} .tbl .n{font-family:var(--serif);font-weight:800;font-size:var(--fs-3xl)} .tbl .rank{font-family:var(--serif);font-weight:900;font-size:22px;width:34px;text-align:center} .tbl .pr{font-weight:700}.tbl .pr small{display:block;font-weight:400;color:var(--mute);font-size:var(--fs-xs)} .tbl .prod{display:flex;align-items:center;gap:13px;min-width:200px} .tbl .prod image-slot{width:56px;height:44px;border:var(--frame) solid var(--line);flex:none;display:block} .tbl .prod b{font-weight:700;display:block;line-height:1.15} .tbl .prod small{color:var(--mute);font-size:var(--fs-xs);font-weight:600} /* ---- certification chips + inline links (registry-driven, SM Cockpit) ---- */ /* Boxless: the chip frame competed with the sidecard's own border for the same few certs. Wider gap replaces the removed padding as the only separator now that nothing encloses each cert. */ .certchips{display:flex;flex-wrap:wrap;gap:14px;align-items:center} .certchip{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-weight:700;font-size:var(--fs-xs);line-height:1;color:var(--ink);text-decoration:none;transition:.12s} a.certchip:hover{text-decoration:underline} /* The sidecard td sets overflow-wrap:anywhere so long material prose cannot burst the 320px card; on a cert label that splits the name mid-word ("OEKO-" / "TEX"). Break at spaces only. The cell has ~109px of room, so every current label - longest is "Made in Germany" at ~100px - sits whole and this rule only matters if a longer one is ever added. */ .certchip span{overflow-wrap:normal} .certchip img{display:block;width:auto;height:22px;max-width:70px;object-fit:contain} .certlink{font-weight:600} a.certlink{color:var(--ink);box-shadow:inset 0 -2px var(--hi)} a.certlink:hover{box-shadow:inset 0 -3px var(--ink)} .tbl .scorechip{display:inline-flex;align-items:baseline;gap:3px;font-family:var(--serif);font-weight:900;font-size:21px;line-height:1} .tbl .scorechip i{font-family:var(--sans);font-style:normal;font-size:var(--fs-2xs);font-weight:700;color:var(--mute)} .tbl .price-b{font-family:var(--serif);font-weight:800;font-size:var(--fs-2xl)} .tbl-foot{font-size:var(--fs-xs);color:var(--mute);font-weight:600;margin-top:12px;letter-spacing:.02em} .tbl-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:var(--ink) var(--hair)} .tbl-scroll::-webkit-scrollbar{height:8px} .tbl-scroll::-webkit-scrollbar-track{background:var(--hair)} .tbl-scroll::-webkit-scrollbar-thumb{background:var(--ink);border:var(--frame) solid var(--hair)} /* ---- layout w/ sidebar ---- */ .with-aside{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start} /* stick right below the REAL sticky chrome (nav + optional subnav, both JS-measured) — a hardcoded 124px slid under the taller product-page chrome */ /* The rail draws NO frame of its own: it wrapped cards that are already lined (.buycard, every .sidecard), which read as two nested borders down the whole sidebar and doubled to 4px at the bottom against .sidecard:last-child. The section dividers went with it. They never landed where you would draw a line by hand: the buycard's bottom rule and the coupon card's top rule fall in the SAME place (4px of line under the reassurance list / above Gutschein), and with a radius set both curve at the ends, so each divider read as a lens floating between two blocks rather than a separator. What separates the sections now is their own padding, plus each card's h4 rule. */ .aside{position:sticky;top:calc(var(--nav-h) + var(--subnav-h) + 20px);display:flex;flex-direction:column;gap:0;border:var(--frame-light) solid var(--line);border-top:0} .aside .buycard{border:0;border-bottom:var(--frame-light) solid var(--line)} .main-col > section + section{margin-top:52px} .main-col > section > .kicker{margin-bottom:6px} .sidecard{padding:22px;border-top:var(--frame-light) solid var(--line);border-bottom:0} .sidecard:last-child{border-bottom:var(--frame-light) solid var(--line)} /* Coupon strip: no heading row of its own (the value IS the label), so it only needs the vertical air that separates it from the rules above/below. */ .sidecard--coupon{padding:9px 22px} .sidecard h4{font-family:var(--sans);font-size:var(--fs-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin:0 0 14px;padding-bottom:11px;border-bottom:var(--frame) solid var(--ink)} .top3 .t3{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:var(--frame-hair) solid var(--hair)} .top3 .t3:last-child{border-bottom:0} .top3 .t3 b{font-family:var(--serif);font-weight:900;font-size:28px;line-height:1} .top3 .t3 small{font-size:var(--fs-3xs);letter-spacing:.1em;text-transform:uppercase;color:var(--hi-2);font-weight:700;display:block} .top3 .t3 span{font-weight:600;font-size:var(--fs-md)} .note{font-size:var(--fs-md);color:var(--soft)} .note strong{color:var(--ink)} /* ---- product page: spec table, buy card, trust ---- No outer frame around Technische Daten / Auf einen Blick, and the row rules are on --nav-line rather than --frame-hair/--hair, which the site overrides to 0px/#fff — the label/value list now actually shows its dividers. */ .spectable{width:100%;border-collapse:collapse;border:0} .spectable th,.spectable td{text-align:left;padding:14px 18px;border-bottom:1px solid var(--nav-line);font-size:var(--fs-base)} .spectable th{font-family:var(--sans);font-size:var(--fs-md);letter-spacing:0;text-transform:none;color:var(--soft);font-weight:600;width:40%;vertical-align:top} .spectable td{font-weight:700;color:var(--ink)} .spectable tr:last-child th,.spectable tr:last-child td{border-bottom:0} .spectable td .hl{font-weight:800} /* measured value trailing a spec label ("Mittelfest (6/10)") — secondary to it */ .spectable td .spec__num{font-weight:600;color:var(--soft)} /* sidebar "Auf einen Blick": fixed layout so the table can never exceed 320px */ .sidecard .spectable{table-layout:fixed} .sidecard .spectable th{width:42%} .sidecard .spectable td{overflow-wrap:anywhere} .sidecard .spectable th,.sidecard .spectable td{padding:10px 12px;font-size:var(--fs-md)} .buycard{border:var(--frame) solid var(--line);background:var(--card)} .buycard__score{background:var(--ink);color:#fff;padding:16px 18px;display:flex;align-items:center;gap:14px} .buycard__score .bigscore{color:#fff;font-size:48px} /* --on-dark-soft, NOT --mute: this row has a dark --ink fill behind it, and --mute (#6c6b64) is a warm mid-grey built for light surfaces — on the navy it came out at 2.9:1 and the wrong temperature. The label beside it already uses the on-dark family; the "/10" belongs there too. */ .buycard__score .bigscore sup{color:var(--on-dark-soft)} .buycard__score b{display:block;font-size:var(--fs-base)} .buycard__score span{font-size:var(--fs-sm);color:var(--on-dark-soft)} .buycard__body{padding:18px;display:flex;flex-direction:column;gap:11px} .buycard__price{font-family:var(--serif);font-weight:800;font-size:var(--fs-5xl)} .buycard__sub{text-align:center;font-size:var(--fs-sm);color:var(--mute);font-weight:600;letter-spacing:.03em} .trustrow{display:grid;grid-template-columns:repeat(4,1fr);border:var(--frame) solid var(--line)} .trust{padding:20px 14px;text-align:center;border-right:var(--frame) solid var(--line)} .trust:last-child{border-right:0} .trust b{display:block;font-family:var(--serif);font-weight:800;font-size:var(--fs-2xl)} .trust span{font-size:var(--fs-2xs);letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:600} .byline{display:flex;align-items:center;gap:14px} .byline__av{width:46px;height:46px;background:var(--hi);font-family:var(--serif);font-weight:900;display:grid;place-items:center;flex:none;border:var(--frame) solid var(--line)} .byline b{font-size:var(--fs-base);font-weight:700}.byline small{display:block;color:var(--mute);font-size:var(--fs-sm)} /* ---- subnav ---- */ /* --nav-h is measured by JS (initNavHeight) — the stacked layout's two-row header is ~126px tall, so a hardcoded 70px slid the bar under the nav */ .subnav{position:sticky;top:var(--nav-h);z-index:var(--z-subnav);background:var(--paper);border-bottom:var(--frame) solid var(--line)} .subnav__row{display:flex;gap:0;overflow-x:auto} .subnav__link{flex:none;padding:10px 14px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);border-right:var(--frame-hair) solid var(--hair)} .subnav__link .n{color:var(--hi-2)} .subnav__link:hover,.subnav__link.is-active{background:var(--ink);color:#fff} .subnav__link.is-active .n{color:var(--hi)} /* ---- coupon (discount) ---- */ .coupon{border:var(--frame-bold) solid var(--line);background:var(--card);padding:0;display:grid;grid-template-columns:1fr auto} .coupon__main{padding:38px} .coupon__pct{font-family:var(--serif);font-weight:900;font-size:96px;line-height:.8;letter-spacing:-0.04em} .coupon__pct span{font-size:44px} .coupon__desc{color:var(--soft);max-width:40ch;margin-top:18px} .coupon__code{border-left:var(--frame-bold) solid var(--line);background:var(--hi);padding:38px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:14px;min-width:240px} .coupon__code label{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase} .codeval{font-family:var(--serif);font-weight:900;font-size:32px;letter-spacing:.06em;border:var(--frame) dashed var(--ink);padding:10px 20px;background:var(--card)} .codecopy{background:var(--ink);color:#fff;border:0;font-family:var(--sans);font-weight:700;font-size:var(--fs-sm);letter-spacing:.06em;text-transform:uppercase;padding:12px 20px;cursor:pointer} .codecopy.copied{background:var(--pos)} /* ---- dealcode: blurred reveal widget (brand discount codes) ---- */ .dealcode{border:var(--frame) dashed var(--ink);background:var(--card);padding:13px 15px;display:flex;align-items:center;gap:13px;flex-wrap:wrap} .dealcode__pct{font-family:var(--serif);font-weight:900;font-size:25px;line-height:1;flex:none} .dealcode__txt{min-width:80px} .dealcode__txt b{display:block;font-size:var(--fs-base);line-height:1.12} .dealcode__txt small{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.08em;color:var(--mute);font-weight:700} .dealcode__act{display:flex;align-items:center;gap:10px;margin-left:auto} .dealcode__code{font-family:var(--sans);font-weight:800;letter-spacing:.18em;font-size:var(--fs-base);border:var(--frame) solid var(--hair);background:var(--paper);padding:9px 16px;transition:color .2s,text-shadow .2s;white-space:nowrap} /* Locked: the smear says "hidden", the dashed ink edge says "hidden CODE" (Tim, 2026-08-23), site-wide — the row cells, the brand rail, the comparison tables, every variant. The smear was carrying that job alone in production: the box is bordered in --hair, which the live token overrides run at #ffffff on a white --card, so the field had no visible edge at all and read as a smudge rather than as a redacted code. The edge is EXACTLY the revealed state's edge — same declarations, same `dashed`, same `var(--ink)` (Tim, 2026-08-23: "just use the exact same dotting from when it's revealed"). Two earlier attempts are on the record so nobody re-treads them: `border-style:dotted` is a dense stipple at 1px because CSS ties the dot size and the gap to the border width, and four repeating-linear-gradients painting a 2px mark every 24px produced rectangular dashes, not dots. Native `dashed` is the only one of the three that looks like the rest of the site, and reusing the revealed rule's exact values means the box does not change its edge under the click at all — only the glyphs resolve. Literal ink, so neither the --hair nor the --frame-hair override can erase it. Border WIDTH deliberately stays with the variant (--frame on the base box, 1px on --peek and --cell), exactly as the revealed rule leaves it. The blur is a TEXT-SHADOW, not `filter:blur()`: filter blurs everything the element paints, border included, so the edge came out as a soft halo and the whole point was lost. Blurring the glyphs instead leaves the box crisp. Nothing leaks either way — the masked glyphs are bullets, and the real code only ever exists in data-code until initReveal() writes it. Selector carries .dealcode so it outranks the later per-variant border shorthands (.dealcode--peek sets `border:1px dashed var(--hair)`); `locked` is removed by initReveal(), so the revealed rule is never in this fight. */ .dealcode .dealcode__code.locked{color:transparent;text-shadow:0 0 6px var(--soft),0 0 11px var(--soft);user-select:none;border-color:var(--ink);border-style:dashed} .dealcode.revealed .dealcode__code{user-select:all;border-color:var(--ink);border-style:dashed} .dealcode__btn{background:var(--ink);color:#fff;border:0;font-family:var(--sans);font-weight:700;font-size:var(--fs-xs);letter-spacing:.04em;text-transform:uppercase;padding:11px 14px;cursor:pointer;white-space:nowrap;transition:background .15s} /* Match the sitewide CTA hover (.btn:hover) — this used to go --hi-2 orange, the only CTA on the site that did, and it kept white text on a light fill. */ .dealcode__btn:hover{background:var(--hi);color:var(--ink)} .dealcode__btn.copied{background:var(--pos)} .dealcode--block{flex-direction:column;align-items:stretch;gap:9px;text-align:center} .dealcode--block .dealcode__act{margin-left:0;flex-direction:column;align-items:stretch;gap:9px} .dealcode--block .dealcode__code{width:100%;text-align:center;box-sizing:border-box} .dealcode--block .dealcode__btn{width:100%} .dealcode--block .dealcode__pct{font-size:22px;letter-spacing:-.01em} /* The comparison rail used --block and it was far too tall there; it now uses --slim, like the review page's rail. The rail is ~230px wide, so let the strip wrap and keep the button full-width on its own line rather than squeezing it beside the value. */ .right__stick .dealcode--slim{gap:9px;padding:12px 14px;justify-content:center} /* The value gets its own centred line above the full-width button; the button needs the box padding to breathe or it reads as if it is touching the frame. */ .right__stick .dealcode--slim .dealcode__pct,.right__stick .dealcode--slim .dealcode__txt{width:100%;justify-content:center;text-align:center} .right__stick .dealcode--slim .dealcode__act{margin-left:0;width:100%} .right__stick .dealcode--slim .dealcode__btn{flex:1 1 auto;text-align:center;padding:9px 12px} /* Certification logos in the rail (registry-driven, see sm_render_cert_chips). Typographically part of the spec list above it, not a section of its own: same 13px sentence-case line as "Garantie", then the logos. */ .rail-certs{display:block;margin-top:13px} .rail-certs--solo{margin-top:var(--sp-4);font-size:13px} .rail-certs__lbl{display:block;font-size:13px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--ink);margin-bottom:8px} .rail-certs .certchips{gap:12px 16px} .rail-certs .certchip{position:relative} /* Logos carry the meaning on their own (the wordmark beside them is hidden below), so they get to be read at a glance rather than as a footnote. */ .rail-certs .certchip img{height:37.5px;max-width:120px} /* The logo IS the wordmark — showing the label beside it read as a stutter in a 230px rail. Kept for assistive tech (and for certs with no logo, which still render their label as text). Mirrors .screen-reader-text. GENERAL sibling (~), not adjacent (+): the lazy-load plugin injects a