/* Keystickers v2: design tokens and overrides on top of NOVA (clear theme) */ :root { /* Brand palette from the KS mark (brand book "Keystickers"): K grey #807D7A, S orange #EA7424 */ --ks-o50: #FEF7F2; --ks-o100: #FCEEE5; --ks-o200: #FADECA; --ks-o300: #F6C5A3; --ks-o400: #F09E66; --ks-o500: #EA7424; --ks-o600: #B85B1C; --ks-o700: #A9531A; --ks-o800: #813F14; --ks-o900: #5B2C0E; --ks-g50: #F7F7F7; --ks-g100: #F0EFEF; --ks-g200: #E1E0DF; --ks-g300: #CAC8C7; --ks-g400: #A6A4A2; --ks-g500: #807D7A; --ks-g600: #6C6967; --ks-g700: #5E5C59; --ks-g800: #494745; --ks-g900: #2B2A28; --ks-ink: var(--ks-g600); --ks-ink-2: var(--ks-g500); --ks-line: var(--ks-g200); --ks-bg: var(--ks-g50); --ks-card: #FFFFFF; --ks-link: var(--ks-o700); --ks-blue: var(--ks-o500); --ks-blue-h: var(--ks-o600); --ks-btn-ink: #FFFFFF; /* two-tone buttons: graphite for actions, copper for buying */ --ks-btn-top: #3A3936; --ks-btn-base: var(--ks-g900); --ks-btn-glow: 43, 42, 40; --ks-buy-top: #C2621F; --ks-buy-base: var(--ks-o700); --ks-buy-glow: 169, 83, 26; --ks-accent: var(--ks-o700); --ks-cyr: #D70015; --ks-ok: #1A7F37; /* buy zone: chosen value (pale green fill, thin green ring), "Meistgekauft" (warm pill, flame) */ --ks-ok-bg: #F4FAF6; --ks-ok-ring: rgba(26, 127, 55, .5); --ks-best-bg: #FFF1E6; --ks-best-ink: #8A2E0C; --ks-best-ring: rgba(234, 116, 36, .28); --ks-flame-a: #E8442E; --ks-flame-b: var(--ks-o500); --ks-flame-c: #F6B13D; --ks-flame-core: #FFE08A; --ks-nav: rgba(247, 247, 247, .8); /* subcategory bar and the menu tab it hangs from */ --ks-sub-bg: var(--ks-g100); --ks-font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ks-out: cubic-bezier(0.23, 1, 0.32, 1); --ks-radius: 18px; --ks-shadow: 0 4px 12px rgba(0, 0, 0, .06); --ks-shadow-h: 0 10px 28px rgba(0, 0, 0, .1); /* One field style for the whole shop: search, login, checkout, contact ... Change it here only. */ --ks-field-h: 56px; --ks-field-radius: 980px; --ks-field-radius-multi: 22px; --ks-field-pad: 22px; --ks-field-font: 17px; --ks-field-bg: var(--ks-g100); --ks-field-bg-hover: var(--ks-g200); --ks-field-bg-focus: #FFFFFF; --ks-field-ring: 0 0 0 1.5px var(--ks-g300) inset, 0 4px 14px rgba(0, 0, 0, .06); --ks-field-ring-error: 0 0 0 1.5px #D70015 inset; --ks-field-bg-error: #FFF5F5; --ks-error: #D70015; /* tinted buttons for second actions: a pale shade of the colour, the colour itself as text */ --ks-tint-bg: var(--ks-o100); --ks-tint-bg-hover: var(--ks-o200); --ks-tint-ink: var(--ks-o700); --ks-error-tint-bg: #FDEEEE; --ks-error-tint-bg-hover: #FBE2E2; /* line icons, one family (24px grid, 1.8 stroke), used as masks so they take any colour */ --ks-ic-account: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c1.5-4 4.5-6 8-6s6.5 2 8 6'/%3E%3C/svg%3E"); --ks-ic-orders: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5 12 3l9 4.5v9L12 21l-9-4.5z'/%3E%3Cpath d='m3 7.5 9 4.5 9-4.5M12 12v9'/%3E%3C/svg%3E"); --ks-ic-data: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Ccircle cx='9' cy='10.5' r='2'/%3E%3Cpath d='M6 15.8c.6-1.4 1.7-2.1 3-2.1s2.4.7 3 2.1M14.5 10h4M14.5 13.5h3'/%3E%3C/svg%3E"); --ks-ic-address: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); --ks-ic-returns: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 14 4 9l5-5'/%3E%3Cpath d='M4 9h11a5 5 0 0 1 0 10h-4'/%3E%3C/svg%3E"); --ks-ic-wish: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7.5-4.6-9.2-9.3A4.8 4.8 0 0 1 12 6.7a4.8 4.8 0 0 1 9.2 4C19.5 15.4 12 20 12 20z'/%3E%3C/svg%3E"); --ks-ic-compare: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4v16M16 4v16'/%3E%3Cpath d='M4 8h8M12 16h8'/%3E%3C/svg%3E"); --ks-ic-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.5'/%3E%3C/svg%3E"); --ks-ic-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); --ks-ic-edit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9a2.8 2.8 0 0 0-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E"); --ks-ic-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='12' height='12' rx='2.5'/%3E%3Cpath d='M15.5 8.5V6a2.5 2.5 0 0 0-2.5-2.5H6A2.5 2.5 0 0 0 3.5 6v7A2.5 2.5 0 0 0 6 15.5h2.5'/%3E%3C/svg%3E"); --ks-ic-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E"); --ks-ic-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16M9 7V4.5h6V7M6.5 7l1 13h9l1-13M10 11v5.5M14 11v5.5'/%3E%3C/svg%3E"); /* cart: a trolley, so it never reads as the trash icon */ --ks-ic-bag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 4h2.2l2.4 10.6a1.6 1.6 0 0 0 1.6 1.2h8.5a1.6 1.6 0 0 0 1.5-1.1L21 8H5.8'/%3E%3Ccircle cx='9.5' cy='19.6' r='1.4'/%3E%3Ccircle cx='17' cy='19.6' r='1.4'/%3E%3C/svg%3E"); --ks-ic-account-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10' cy='8' r='4'/%3E%3Cpath d='M3 20c1.4-3.8 4-5.7 7-5.7 1.4 0 2.7.4 3.8 1.1'/%3E%3Cpath d='m15.5 18.5 2 2 4-4.5'/%3E%3C/svg%3E"); --ks-ic-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); --ks-ic-fingerprint: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 19.5c.8-2 1-4.3 1-7.5a3.5 3.5 0 0 1 7 0c0 3-.3 5.6-1 8'/%3E%3Cpath d='M4.6 15.8c.3-1.2.4-2.5.4-3.8a7 7 0 0 1 12.6-4.2'/%3E%3Cpath d='M19.3 10.4c.4 2.8.2 5.6-.4 8.2'/%3E%3Cpath d='M12 12c0 3.6-.4 6.6-1.3 9.2'/%3E%3Cpath d='M6.3 4.9A9.5 9.5 0 0 1 17.7 4.9'/%3E%3C/svg%3E"); --ks-ic-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); --ks-ic-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); --ks-ic-minus-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E"); --ks-ic-plus-bold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E"); --ks-ic-truck: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 6.5h11v10h-11z'/%3E%3Cpath d='M13.5 10h4l3 3.2v3.3h-7'/%3E%3Ccircle cx='7' cy='17.5' r='1.8'/%3E%3Ccircle cx='17' cy='17.5' r='1.8'/%3E%3C/svg%3E"); --ks-ic-thumb-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 10.5v9h-3v-9z'/%3E%3Cpath d='M7.5 10.5 11 3.8c1.3 0 2.2 1 2 2.3l-.6 3.4h5.3a2 2 0 0 1 2 2.4l-1.3 6.2a2 2 0 0 1-2 1.6H7.5'/%3E%3C/svg%3E"); --ks-ic-thumb-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 13.5v-9h-3v9z'/%3E%3Cpath d='M7.5 13.5 11 20.2c1.3 0 2.2-1 2-2.3l-.6-3.4h5.3a2 2 0 0 0 2-2.4l-1.3-6.2a2 2 0 0 0-2-1.6H7.5'/%3E%3C/svg%3E"); --ks-ic-flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12.2 2.2c.5 2.9-.8 4.6-2.3 6.3C8.4 10.2 7 11.9 7 14.6A5 5 0 0 0 12 19.8a5 5 0 0 0 5-5.2c0-2.2-1-3.9-2.2-5.2-.2 1.4-.9 2.4-1.9 2.9.4-3.6-.1-7-.7-10.1z'/%3E%3C/svg%3E"); --ks-ic-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10 3l1.7 5.3L17 10l-5.3 1.7L10 17l-1.7-5.3L3 10l5.3-1.7z'/%3E%3Cpath d='M18 14l.8 2.2L21 17l-2.2.8L18 20l-.8-2.2L15 17l2.2-.8z'/%3E%3C/svg%3E"); --ks-ic-hourglass: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3h11M6.5 21h11'/%3E%3Cpath d='M8 3c0 4.2 8 4.8 8 9s-8 4.8-8 9M16 3c0 4.2-8 4.8-8 9s8 4.8 8 9'/%3E%3C/svg%3E"); --ks-ic-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); --ks-ic-soldout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M6 6l12 12'/%3E%3C/svg%3E"); --ks-ic-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.7 5.5 6 .9-4.35 4.25 1 6L12 17l-5.35 2.85 1-6L3.3 9.6l6-.9z'/%3E%3C/svg%3E"); --ks-ic-star-empty: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.7 5.5 6 .9-4.35 4.25 1 6L12 17l-5.35 2.85 1-6L3.3 9.6l6-.9z'/%3E%3C/svg%3E"); --ks-ic-star-half: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2l2.7 5.5 6 .9-4.35 4.25 1 6L12 17l-5.35 2.85 1-6L3.3 9.6l6-.9z'/%3E%3Cpath d='M12 3.2v13.8L6.65 19.85l1-6L3.3 9.6l6-.9z' fill='black'/%3E%3C/svg%3E"); --ks-ic-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E"); --ks-ic-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E"); --ks-ic-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 19.5c.9-3.4 3.4-5.2 6.5-5.2s5.6 1.8 6.5 5.2'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M16.5 14.3c2.4.2 4.2 1.8 5 4.6'/%3E%3C/svg%3E"); --ks-ic-print: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 9V3.5h10V9'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M7 14h10v6.5H7z'/%3E%3Cpath d='M17.5 12h.01'/%3E%3C/svg%3E"); --ks-ic-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4.5 6v5.5c0 4.6 3.1 8.2 7.5 9.5 4.4-1.3 7.5-4.9 7.5-9.5V6z'/%3E%3Cpath d='m8.8 12.2 2.3 2.3 4.4-4.8'/%3E%3C/svg%3E"); --ks-ic-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h3.5l1.7 4.3-2.2 1.4a11 11 0 0 0 6.3 6.3l1.4-2.2L20 15.5V19a1.5 1.5 0 0 1-1.6 1.5A16.5 16.5 0 0 1 3.5 5.6 1.5 1.5 0 0 1 5 4z'/%3E%3C/svg%3E"); --ks-ic-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='m4 7 8 6 8-6'/%3E%3C/svg%3E"); --ks-ic-bank: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5 12 4l9 5.5'/%3E%3Cpath d='M5 10v7M9.5 10v7M14.5 10v7M19 10v7'/%3E%3Cpath d='M3 20h18'/%3E%3C/svg%3E"); --ks-ic-card: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='5.5' width='19' height='13' rx='2.5'/%3E%3Cpath d='M2.5 10h19M6 15h4'/%3E%3C/svg%3E"); --ks-ic-invoice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 3h9l4 4v14H6z'/%3E%3Cpath d='M14.5 3v4.5H19M9 12h7M9 15.5h7M9 8.5h3'/%3E%3C/svg%3E"); --ks-ic-cash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='6' width='19' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='2.6'/%3E%3Cpath d='M6 9.5v5M18 9.5v5'/%3E%3C/svg%3E"); --ks-ic-gift: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='8' width='17' height='4' rx='1'/%3E%3Cpath d='M5 12v7.5h14V12M12 8v11.5'/%3E%3Cpath d='M12 8c-1.5-3.5-5-4-5.5-1.8C6 8 9.5 8 12 8zm0 0c1.5-3.5 5-4 5.5-1.8C18 8 14.5 8 12 8z'/%3E%3C/svg%3E"); --ks-field-label: var(--ks-g500); /* buttons share the field height, so a field and a button in one row line up */ --ks-btn-h: var(--ks-field-h); /* One reading text for descriptions, short texts and FAQ answers */ --ks-text: 15px; --ks-text-lh: 1.5; --ks-text-gap: 10px; --ks-text-h: 20px; --ks-star: var(--ks-o500); /* One floating panel style: account, cart, wishlist, menus */ --ks-panel-radius: 18px; --ks-panel-shadow: 0 20px 48px rgba(0, 0, 0, .16), 0 0 0 1px rgba(0, 0, 0, .04); } /* ---------- Base ---------- */ html { -webkit-text-size-adjust: 100%; } body { background: var(--ks-bg); color: var(--ks-ink); font-family: var(--ks-font); letter-spacing: -.01em; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, .h1, .h2, .h3, .h4, .productbox-title, .box-title { font-family: var(--ks-font); color: var(--ks-g800); letter-spacing: -.02em; font-weight: 500; } a { color: var(--ks-link); } /* text selection: the visitor's own system colour (owner 2026-11-13: the peach selection looked like a dirty fill) */ :focus-visible { outline: 3px solid rgba(184, 91, 28, .6); outline-offset: 3px; } /* ---------- Primary buttons, two-tone (3.18.0) ---------- Graphite for every action, copper only where something is bought (product page, sticky buy bar, quick add). White text: graphite 14.3:1, copper 5.3:1. Copper never gets lighter on hover, the shadow grows instead, so the text stays above 4.5:1. */ .btn-primary, .btn-primary:not(:disabled):not(.disabled):active { --ks-b-top: var(--ks-btn-top); --ks-b-base: var(--ks-btn-base); --ks-b-glow: var(--ks-btn-glow); background: linear-gradient(180deg, var(--ks-b-top), var(--ks-b-base)); border-color: transparent; color: var(--ks-btn-ink); border-radius: 980px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 1px 2px rgba(var(--ks-b-glow), .2), 0 6px 16px -6px rgba(var(--ks-b-glow), .45); transition: transform 140ms var(--ks-out), box-shadow 160ms var(--ks-out), filter 160ms var(--ks-out); } #add-to-cart .btn-primary, #add-to-cart .btn-primary:not(:disabled):not(.disabled):active, .ks-pd-bar-btn.btn-primary, .ks-pd-bar-btn.btn-primary:not(:disabled):not(.disabled):active { --ks-b-top: var(--ks-buy-top); --ks-b-base: var(--ks-buy-base); --ks-b-glow: var(--ks-buy-glow); } .btn-primary:hover, .btn-primary:focus { background: linear-gradient(180deg, var(--ks-b-top), var(--ks-b-base)); border-color: transparent; color: var(--ks-btn-ink); } @media (hover: hover) { .btn-primary:not(:disabled):not(.disabled):hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .22), 0 2px 4px rgba(var(--ks-b-glow), .2), 0 10px 22px -8px rgba(var(--ks-b-glow), .6); } .btn-primary:not(:disabled):not(.disabled):not(#add-to-cart .btn-primary):not(.ks-pd-bar-btn):hover { filter: brightness(1.12); } } .btn-primary:not(:disabled):not(.disabled):active { transform: scale(.98); filter: brightness(.9); transition-duration: 120ms; } .btn-primary:focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(var(--ks-b-glow), .2), 0 6px 16px -6px rgba(var(--ks-b-glow), .45); } .btn-primary:focus-visible, .btn-primary:not(:disabled):not(.disabled):active:focus-visible { outline: 0; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ks-o600); } @media (prefers-reduced-motion: reduce) { .btn-primary { transition: none; } } /* ---------- Buttons: one height and shape for the whole shop ---------- Primary: blue. Secondary (NOVA's outline buttons): grey like the fields. */ .btn-primary, .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--ks-btn-h); padding: 4px 22px; border-radius: 980px; font-size: 17px; font-weight: 500; line-height: 1.2; text-align: center; /* long labels may take two lines inside the same height instead of growing the button */ white-space: normal; } .btn-block.btn-primary, .btn-block.btn-secondary, .btn-block.btn-light, .btn-block.btn-outline-primary, .btn-block.btn-outline-secondary { display: flex; width: 100%; } .btn-sm.btn-primary, .btn-sm.btn-secondary, .btn-sm.btn-outline-primary, .btn-sm.btn-outline-secondary, .btn-lg.btn-primary, .btn-lg.btn-outline-primary { min-height: var(--ks-btn-h); font-size: 17px; padding: 4px 22px; } .btn-secondary, .btn-light, .btn-outline-primary, .btn-outline-secondary, .btn-secondary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled):active { border: 0; background: var(--ks-field-bg); color: var(--ks-ink); box-shadow: none; } .btn-secondary:hover, .btn-light:hover, .btn-outline-primary:hover, .btn-outline-secondary:hover, .btn-secondary:focus, .btn-outline-primary:focus, .btn-outline-secondary:focus { border: 0; background: var(--ks-field-bg-hover); color: var(--ks-ink); } /* ---------- Form fields: every input in the shop uses the --ks-field-* tokens ---------- */ /* "header .form-control" too: NOVA paints fields in the header (login panel) white */ .form-control, .custom-select, header .form-control { height: var(--ks-field-h); padding: 0 var(--ks-field-pad); font-family: var(--ks-font); font-size: var(--ks-field-font); line-height: 1.3; color: var(--ks-ink); background-color: var(--ks-field-bg); border: 0; border-radius: var(--ks-field-radius); box-shadow: 0 0 0 1.5px transparent inset; transition: background-color 150ms ease-out, box-shadow 150ms ease-out; } .form-control-sm, .form-control-lg { height: var(--ks-field-h); font-size: var(--ks-field-font); border-radius: var(--ks-field-radius); } .form-control:hover, .custom-select:hover, header .form-control:hover { background-color: var(--ks-field-bg-hover); } .form-control:focus, .custom-select:focus, header .form-control:focus { color: var(--ks-ink); background-color: var(--ks-field-bg-focus); box-shadow: var(--ks-field-ring); outline: 0; } textarea.form-control { height: auto; min-height: 140px; padding: 16px var(--ks-field-pad); border-radius: var(--ks-field-radius-multi); } .custom-select { padding-right: 48px; background-position: right 22px center; } .form-control.is-invalid, .was-validated .form-control:invalid, .custom-select.is-invalid, .was-validated .custom-select:invalid { box-shadow: var(--ks-field-ring-error); background-image: none; } /* Button rows (Zurück | Speichern ...): NOVA gives the back button a bottom margin for stacking on phones, which pushes the pair out of line on wider screens. The row spacing does that job instead. */ .btn-row { row-gap: 12px; } .btn-row .btn { margin-top: 0; margin-bottom: 0; } /* Select lists: where the browser allows styling the opened list (Chrome, Edge), it becomes a floating panel like the rest of the shop; other browsers keep their own list */ @supports (appearance: base-select) { /* flex keeps the chosen value vertically centred, as the classic select did */ select.form-control, select.custom-select { appearance: base-select; display: flex; align-items: center; } select.form-control::picker-icon, select.custom-select::picker-icon { display: none; } select.form-control::picker(select), select.custom-select::picker(select) { appearance: base-select; margin-top: 6px; padding: 6px; border: 0; border-radius: 16px; background: var(--ks-card); box-shadow: var(--ks-panel-shadow); } select.form-control option, select.custom-select option { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; border-radius: 10px; font-size: 16px; color: var(--ks-ink); } select.form-control option:hover, select.custom-select option:hover, select.form-control option:focus-visible, select.custom-select option:focus-visible { background: var(--ks-bg); outline: none; } select.form-control option:checked, select.custom-select option:checked { font-weight: 500; } /* the "choose ..." placeholder entry stays quiet */ select.form-control option:disabled, select.custom-select option:disabled { color: var(--ks-g400); font-size: 14px; min-height: 36px; } select.form-control option::checkmark, select.custom-select option::checkmark { order: 1; margin-left: auto; color: var(--ks-blue); } @media (prefers-reduced-motion: no-preference) { select.form-control::picker(select), select.custom-select::picker(select) { transition: opacity 160ms var(--ks-out), translate 160ms var(--ks-out), display 160ms allow-discrete, overlay 160ms allow-discrete; } select.form-control:not(:open)::picker(select), select.custom-select:not(:open)::picker(select) { opacity: 0; translate: 0 -4px; } } } /* Switches (Bootstrap custom-switch, e.g. "Standard" address): an iOS style toggle in the shop blue */ .custom-switch { padding-left: 52px; min-height: 28px; } .custom-switch .custom-control-label { line-height: 28px; } .custom-switch .custom-control-label::before { top: 0; left: -52px; width: 46px; height: 28px; border: 0; border-radius: 14px; background: var(--ks-g200); box-shadow: none; transition: background-color 200ms var(--ks-out); } .custom-switch .custom-control-label::after { top: 2px; left: -50px; width: 24px; height: 24px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: transform 200ms var(--ks-out); } .custom-switch .custom-control-input:checked ~ .custom-control-label::before { background: var(--ks-blue); } .custom-switch .custom-control-input:checked ~ .custom-control-label::after { background: #FFFFFF; transform: translateX(18px); } .custom-switch .custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(184, 91, 28, .3); } .custom-switch .custom-control-input:focus:not(:focus-visible) ~ .custom-control-label::before { box-shadow: none; } /* Checkboxes: a soft rounded square, blue with a white tick when chosen */ .custom-checkbox .custom-control-label::before { width: 22px; height: 22px; top: 0; border: 1.5px solid var(--ks-g300); border-radius: 7px; background: #FFFFFF; box-shadow: none; } .custom-checkbox .custom-control-label::after { width: 22px; height: 22px; top: 0; } .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { border-color: var(--ks-blue); background: var(--ks-blue); } .custom-checkbox .custom-control-input:checked ~ .custom-control-label::after { background: #FFFFFF; -webkit-mask: var(--ks-ic-check) center / 14px 14px no-repeat; mask: var(--ks-ic-check) center / 14px 14px no-repeat; } .custom-checkbox .custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: 0 0 0 3px rgba(184, 91, 28, .3); } .custom-checkbox .custom-control-input:focus:not(:focus-visible) ~ .custom-control-label::before { box-shadow: none; } /* NOVA's Font Awesome pencil gives way to our line pencil (same family as the account icons) */ .fa-pencil-alt { display: inline-block; width: 18px; height: 18px; vertical-align: -3px; } .fa-pencil-alt::before { content: ""; display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--ks-ic-edit) center / contain no-repeat; mask: var(--ks-ic-edit) center / contain no-repeat; } /* Validation messages (NOVA appends .form-error-msg to the field's group): a thin red ring and a faint red tint on the field, the message small under it with a round "!", sliding in softly */ .has-error .form-control, .has-error .custom-select { border-color: transparent; box-shadow: var(--ks-field-ring-error); background-color: var(--ks-field-bg-error); } .form-group .form-error-msg { display: flex; align-items: flex-start; gap: 7px; width: 100%; margin-top: 8px; padding: 0 var(--ks-field-pad); font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ks-error); } .form-group .form-error-msg::before { content: "!"; flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--ks-error); color: #FFFFFF; font-size: 11px; font-weight: 500; line-height: 1; } @media (prefers-reduced-motion: no-preference) { .form-group .form-error-msg { animation: ks-error-in 180ms var(--ks-out); } } @keyframes ks-error-in { from { opacity: 0; transform: translateY(-4px); } } .form-control:disabled, .form-control[readonly] { opacity: .6; } .form-control::placeholder { color: var(--ks-field-label); } /* Quantity (− 1 +): the whole group is one field, the input and buttons sit inside it */ /* NOVA caps .form-counter with max-height (about 43px); the token decides */ .form-counter { height: var(--ks-field-h); max-height: none; border: 0; border-radius: var(--ks-field-radius); background: var(--ks-field-bg); box-shadow: 0 0 0 1.5px transparent inset; transition: background-color 150ms ease-out, box-shadow 150ms ease-out; flex-wrap: nowrap; } .form-counter:hover { background: var(--ks-field-bg-hover); } /* the field look changes only while the number itself is being typed, not when − or + is pressed */ .form-counter:has(.form-control:focus) { background: var(--ks-field-bg-focus); box-shadow: var(--ks-field-ring); } .form-counter .form-control, .form-counter .form-control:hover, .form-counter .form-control:focus { height: 100%; padding: 0; text-align: center; background: transparent; box-shadow: none; border-radius: 0; } .form-counter .btn { width: var(--ks-field-h); height: 100%; border: 0; border-radius: var(--ks-field-radius) !important; background: transparent; color: var(--ks-ink); } /* no grey field on hover or tap (on a phone the hover stuck as an oval halo, owner 2026-11-10): the − and + keep their colour and get bolder while pressed or focused by keyboard */ .form-counter .btn, .form-counter .btn:hover, .form-counter .btn:active, .form-counter .btn:focus { background: transparent !important; box-shadow: none !important; -webkit-tap-highlight-color: transparent; } .form-counter .btn .fa-minus, .form-counter .btn .fa-plus { transition: transform 120ms var(--ks-out); } .form-counter .btn:active .fa-minus, .form-counter .btn:focus-visible .fa-minus { --ks-fi: var(--ks-ic-minus-bold); } .form-counter .btn:active .fa-plus, .form-counter .btn:focus-visible .fa-plus { --ks-fi: var(--ks-ic-plus-bold); } .form-counter .btn:active .fa-minus, .form-counter .btn:active .fa-plus { transform: scale(1.12); } /* the − and + buttons fill the field height, so their icons sit on the same centre line as the number */ .form-counter .input-group-prepend, .form-counter .input-group-append { align-self: stretch; } .form-counter .btn { display: grid; place-items: center; height: 100%; max-height: none; padding-top: 0; padding-bottom: 0; } .form-counter .form-control { font-family: var(--ks-font); font-weight: 500; font-variant-numeric: tabular-nums; } .form-counter .btn .fa-minus, .form-counter .btn .fa-plus { font-size: 15px; vertical-align: 0; } /* − and + keep a quiet keyboard focus inside the field instead of the orange ring around it */ .form-counter .btn:focus, .form-counter .btn:focus-visible { outline: none; box-shadow: none; } /* product page: quantity takes a third, the buy button two thirds, so "In den Warenkorb" stays on one line */ @media (min-width: 576px) { /* never narrower than − 99 + needs */ #add-to-cart .col:has(> .form-counter) { flex: 0 0 max(33.333%, 184px); max-width: none; } #add-to-cart .col:has(> .form-counter) + .col { flex: 1 1 0; max-width: none; min-width: 0; } } /* NOVA's sliding labels: the label sits inside the field, centred at rest, small at the top while typing */ .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label { top: 9px; left: var(--ks-field-pad); padding: 0; transform: none; background: transparent; font-size: 12px; line-height: 1.2; color: var(--ks-field-label); max-width: calc(100% - 2 * var(--ks-field-pad)); } /* NOVA draws a white strip behind the label via ::after; the same pseudo carries the red "*" of required fields */ .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) label::after { position: static; height: auto; background: none; margin-left: 2px; } .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) .form-control:placeholder-shown:not(:focus) ~ label, .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) .form-control:placeholder-shown:not(:focus).form-control-sm ~ label, .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox) .form-control:placeholder-shown:not(:focus).form-control-lg ~ label { top: calc(var(--ks-field-h) / 2); transform: translateY(-50%); font-size: var(--ks-field-font); color: var(--ks-field-label); } /* room for the label only where a visible label sits inside the field (not e.g. the country select in the cart) */ .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox):has(label.col-form-label:not(.sr-only)) input.form-control, .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox):has(label.col-form-label:not(.sr-only)) select.form-control { padding-top: 20px; padding-bottom: 2px; } .label-slide .form-group:not(.exclude-from-label-slide):not(.checkbox):has(label.col-form-label:not(.sr-only)) textarea.form-control { padding-top: 28px; } .label-slide input[required] + .col-form-label::after, .label-slide textarea[required] + .col-form-label::after, .label-slide select[required] + .col-form-label::after { color: var(--ks-cyr); } /* ---------- Floating panels (account, cart, wishlist, compare): one look ---------- */ .dropdown-menu { border: 0; border-radius: var(--ks-panel-radius); box-shadow: var(--ks-panel-shadow); overflow: hidden; } #mainNavigation .dropdown-menu { border-radius: 0 0 var(--ks-panel-radius) var(--ks-panel-radius); } .dropdown-menu .dropdown-body { padding: 28px; } .dropdown-menu legend { margin-bottom: 20px; padding: 0; border: 0; font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--ks-ink); } .dropdown-menu .dropdown-body > a, .dropdown-menu .dropdown-footer a { color: var(--ks-link); font-size: 15px; } .dropdown-menu .dropdown-body > a { display: inline-block; margin-top: 14px; } .dropdown-menu .dropdown-footer { padding: 18px 28px; border: 0; background: var(--ks-bg); font-size: 15px; color: var(--ks-ink-2); } /* ---------- Header: translucent bar ---------- */ #jtl-nav-wrapper { background: var(--ks-nav); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 0; box-shadow: none; } #jtl-nav-wrapper .navbar, #jtl-nav-wrapper .hide-navbar { background: transparent; } #mainNavigation .nav-link { color: var(--ks-ink); font-size: 14px; font-weight: 400; } /* One row: logo, categories, icons */ #jtl-nav-wrapper .ks-head-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 24px; min-height: 64px; padding: 0; } .ks-head-logo { flex: none; } #jtl-nav-wrapper .ks-head-logo .navbar-brand { padding: 0; margin: 0; } /* vector logo (layout/header_logo.tpl): word mark 28px high on wide screens, the "K" mark on phones */ #jtl-nav-wrapper .ks-head-logo .navbar-brand img { display: block; height: 26px; width: auto; } #jtl-nav-wrapper .ks-head-logo .navbar-brand picture { display: block; } @media (min-width: 1200px) and (max-width: 1499.98px) { #jtl-nav-wrapper .ks-head-logo .navbar-brand img { height: 21px; } } @media (max-width: 575.98px) { #jtl-nav-wrapper .ks-head-logo .navbar-brand img { height: 30px; } } /* big monitors: header content no wider than 1600px (the bar itself stays full width), so the logo does not stick to the screen edge */ #jtl-nav-wrapper .ks-head { max-width: 1600px; margin-left: auto; margin-right: auto; } .ks-head-cats { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; } .ks-head-icons { flex: none; display: flex; align-items: center; gap: 2px; margin-left: auto; } .ks-head-icons #shop-nav { flex-wrap: nowrap; } .ks-search-open { width: 40px; height: 40px; border: 0; border-radius: 50%; background: none; display: grid; place-items: center; color: var(--ks-ink); cursor: pointer; transition: background-color 150ms ease-out; } .ks-search-open:hover { background: rgba(0, 0, 0, .05); } .ks-search-open svg { width: 24px; height: 24px; } /* all header icons: one size (24px), one stroke, one colour */ .ks-search-open, .ks-head-icons #shop-nav .nav-link { color: var(--ks-g800); } @media (min-width: 992px) { #jtl-nav-wrapper .ks-head-cats #mainNavigation { justify-content: center; } /* NOVA's list fills the row with margin-right:auto, which kept the categories on the left */ #jtl-nav-wrapper .ks-head-cats .navbar-nav { flex-wrap: nowrap; justify-content: center; margin-right: 0 !important; } #jtl-nav-wrapper .ks-head-cats .nav-link { padding: 22px 12px; white-space: nowrap; } /* The six long category names and the logo need about 1500px in one row; narrower laptops get a smaller font, below 1200px the categories move into a second row */ @media (max-width: 1499.98px) { #jtl-nav-wrapper .ks-head-cats .nav-link { padding-left: 6px; padding-right: 6px; font-size: 13px; } #jtl-nav-wrapper .ks-head-nav { gap: 12px; } .ks-head-icons #shop-nav .nav-link { padding-left: 6px; padding-right: 6px; } } /* one row: logo and icons take equal shares, so the categories sit in the middle of the page */ @media (min-width: 1200px) { #jtl-nav-wrapper .ks-head-logo, #jtl-nav-wrapper .ks-head-icons { flex: 1 1 0; min-width: max-content; } #jtl-nav-wrapper .ks-head-icons { justify-content: flex-end; } #jtl-nav-wrapper .ks-head-icons > .nav-icons { flex: 0 0 auto; width: auto; margin-left: 0; } #jtl-nav-wrapper .ks-head-cats { flex: 0 1 auto; } } @media (max-width: 1199.98px) { #jtl-nav-wrapper .ks-head-nav { flex-wrap: wrap; row-gap: 0; } .ks-head-cats { order: 3; flex-basis: 100%; } #jtl-nav-wrapper .ks-head-cats .nav-link { padding-top: 12px; padding-bottom: 14px; } } /* NOVA marks the active category with a thick yellow bar (::before); a thin dark line instead */ #jtl-nav-wrapper .ks-head-cats .nav-link::before { border-bottom-width: 2px !important; border-color: var(--ks-ink) !important; } } /* Desktop header decided by ks.js (initHeaderFit) from what really fits; the media queries above stay the start state. is-one: one row; is-short: one row with the "KS" mark instead of the word mark; is-compact: also without the cart total; is-two: categories in a second row */ /* short KS mark only where header-fit switches it on; never in the checkout header */ img.ks-logo-short { display: none; } #jtl-nav-wrapper .ks-head-logo .navbar-brand img.ks-logo-short { display: none; } @media (min-width: 992px) { #jtl-nav-wrapper .ks-head-nav.is-one { flex-wrap: nowrap; } #jtl-nav-wrapper .ks-head-nav.is-one .ks-head-logo, #jtl-nav-wrapper .ks-head-nav.is-one .ks-head-icons { flex: 1 1 0; min-width: max-content; } #jtl-nav-wrapper .ks-head-nav.is-one .ks-head-icons { justify-content: flex-end; } #jtl-nav-wrapper .ks-head-nav.is-one .ks-head-icons > .nav-icons { flex: 0 0 auto; width: auto; margin-left: 0; } #jtl-nav-wrapper .ks-head-nav.is-one .ks-head-cats { order: 0; flex: 0 1 auto; flex-basis: auto; } #jtl-nav-wrapper .ks-head-nav.is-one .ks-head-cats .nav-link { padding-top: 22px; padding-bottom: 22px; } #jtl-nav-wrapper .ks-head-nav.is-short .ks-head-logo picture { display: none; } #jtl-nav-wrapper .ks-head-nav.is-short .ks-head-logo .navbar-brand img.ks-logo-short { display: block; width: auto; height: 30px; } /* is-compact: one step further before two rows, the cart total gives way (the bag keeps its count badge) */ #jtl-nav-wrapper .ks-head-nav.is-compact { gap: 16px; } #jtl-nav-wrapper .ks-head-nav.is-compact .cart-icon-dropdown-price { display: none; } #jtl-nav-wrapper .ks-head-nav.is-two { flex-wrap: wrap; row-gap: 0; } #jtl-nav-wrapper .ks-head-nav.is-two .ks-head-logo { flex: none; } #jtl-nav-wrapper .ks-head-nav.is-two .ks-head-icons { flex: none; margin-left: auto; } #jtl-nav-wrapper .ks-head-nav.is-two .ks-head-cats { order: 3; flex-basis: 100%; } #jtl-nav-wrapper .ks-head-nav.is-two .ks-head-cats .nav-link { padding-top: 12px; padding-bottom: 14px; } } /* Phones: logo, search, account and bag fit one row; the wishlist (NOVA leaves it out on phones as well) stays reachable through the account panel */ @media (max-width: 575.98px) { .ks-head-icons #shop-nav li:has(> a .fa-heart), .ks-head-icons #shop-nav li:has(> a .fa-list) { display: none; } .ks-head-icons #shop-nav .nav-link { padding-left: 6px; padding-right: 6px; } } /* Shop wide: NOVA's Font Awesome glyphs give way to our line icons, drawn in the current text colour. Each glyph class names its icon in --ks-fi; size follows the font size like the glyph did. */ .fa-list-alt, .fa-heart, .fa-truck, .fa-minus, .fa-plus, .fa-shopping-cart, .fa-thumbs-up, .fa-thumbs-down, .fa-star, .fa-star-half-alt, .fa-pencil-alt, .fa-times, .fa-chevron-left, .fa-chevron-right, .fa-long-arrow-alt-left, .fa-long-arrow-alt-right { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.22em; } .fa-list-alt::before, .fa-heart::before, .fa-truck::before, .fa-minus::before, .fa-plus::before, .fa-shopping-cart::before, .fa-thumbs-up::before, .fa-thumbs-down::before, .fa-star::before, .fa-star-half-alt::before, .fa-times::before, .fa-chevron-left::before, .fa-chevron-right::before, .fa-long-arrow-alt-left::before, .fa-long-arrow-alt-right::before { content: ""; display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--ks-fi) center / contain no-repeat; mask: var(--ks-fi) center / contain no-repeat; } .fa-list-alt { --ks-fi: var(--ks-ic-compare); } .fa-heart { --ks-fi: var(--ks-ic-wish); } .fa-truck { --ks-fi: var(--ks-ic-truck); } .fa-minus { --ks-fi: var(--ks-ic-minus); } .fa-plus { --ks-fi: var(--ks-ic-plus); } .fa-shopping-cart { --ks-fi: var(--ks-ic-bag); } .fa-thumbs-up { --ks-fi: var(--ks-ic-thumb-up); } .fa-thumbs-down { --ks-fi: var(--ks-ic-thumb-down); } .fas.fa-star { --ks-fi: var(--ks-ic-star); } .far.fa-star { --ks-fi: var(--ks-ic-star-empty); } .fa-star-half-alt { --ks-fi: var(--ks-ic-star-half); } .fa-times { --ks-fi: var(--ks-ic-close); } .fa-chevron-left { --ks-fi: var(--ks-ic-chevron-left); } .fa-chevron-right, .fa-long-arrow-alt-right { --ks-fi: var(--ks-ic-chevron-right); } .fa-long-arrow-alt-left { --ks-fi: var(--ks-ic-chevron-left); } /* a row of stars never breaks into a column */ .rating { display: inline-flex !important; flex: none; align-items: center; gap: 1px; white-space: nowrap; vertical-align: middle; } /* reviews summary: stars on one line, "(11 Bewertungen)" under them inside the narrow box */ #ratingDropdown { flex-wrap: wrap; justify-content: flex-start; gap: 4px 8px; white-space: normal; text-align: left; } /* the buy button keeps its words on phones too (NOVA shows only the icon there) */ .btn-basket-check { display: inline-flex; align-items: center; gap: 8px; } .btn-basket-check > span { display: inline !important; } /* Header icons: NOVA's Font Awesome glyphs give way to our line icons (account, compare, wishlist, cart), the counters become small blue pills */ header .fa-user, header .fa-user-check, header .fa-list, header .fa-heart, header .cart-icon-dropdown-icon { position: relative; display: inline-block; width: 24px; height: 24px; vertical-align: middle; } header .fa-user::before, header .fa-user-check::before, header .fa-list::before, header .fa-heart::before, header .cart-icon-dropdown-icon::before { content: ""; display: block; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--ks-hi) center / contain no-repeat; mask: var(--ks-hi) center / contain no-repeat; } header .fa-user { --ks-hi: var(--ks-ic-account); } header .fa-user-check { --ks-hi: var(--ks-ic-account-ok); } header .fa-list { --ks-hi: var(--ks-ic-compare); } header .fa-heart { --ks-hi: var(--ks-ic-wish); } header .cart-icon-dropdown-icon { --ks-hi: var(--ks-ic-bag); } header .fa-sup { position: absolute; top: -7px; right: -9px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: grid; place-items: center; background: var(--ks-o400); box-shadow: 0 0 0 2px var(--ks-nav-solid, var(--ks-g50)); color: var(--ks-g900); font-family: var(--ks-font); font-size: 11px; font-weight: 500; line-height: 1; } /* ---------- Search overlay ---------- */ html.ks-search-on { overflow: hidden; } .ks-search { position: fixed; inset: 0; z-index: 1060; } .ks-search-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity 220ms ease-out; } .ks-search-panel { position: relative; background: var(--ks-card); box-shadow: 0 20px 40px rgba(0, 0, 0, .12); opacity: 0; transform: translateY(-12px); transition: opacity 220ms ease-out, transform 260ms var(--ks-out); max-height: 100vh; /* phones: 100vh reaches under the browser's own bars, the end of the list could not be scrolled to */ max-height: 100dvh; overflow-y: auto; overscroll-behavior: contain; } .ks-search.is-open .ks-search-backdrop { opacity: 1; } .ks-search.is-open .ks-search-panel { opacity: 1; transform: none; } .ks-search-panel:focus { outline: none; } .ks-search-in { max-width: 880px; margin: 0 auto; padding: 26px 22px 36px; } .ks-search-form { display: flex; align-items: center; gap: 12px; } /* The search field is a shop field (--ks-field-*) with a loupe inside; "Suchen" sits in the middle at rest */ .ks-search-field { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; height: var(--ks-field-h); margin: 0; padding: 0 var(--ks-field-pad); border-radius: var(--ks-field-radius); background: var(--ks-field-bg); box-shadow: 0 0 0 1.5px transparent inset; cursor: text; transition: background-color 150ms ease-out, box-shadow 150ms ease-out; } .ks-search-field:hover { background: var(--ks-field-bg-hover); } .ks-search-field:focus-within { background: var(--ks-field-bg-focus); box-shadow: var(--ks-field-ring); } .ks-search-loupe { width: 22px; height: 22px; flex: none; color: var(--ks-ink-2); } .ks-search-field .twitter-typeahead { flex: 1; display: block !important; } .ks-search-field input[name="qs"] { flex: 1; width: 100%; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0; color: var(--ks-ink); font-family: var(--ks-font); font-size: var(--ks-field-font); font-weight: 500; letter-spacing: -.01em; -webkit-appearance: none; appearance: none; } /* the loupe is 32px wide on the left; the same offset on the right keeps "Suchen" truly centred */ .ks-search-field input[name="qs"]:placeholder-shown:not(:focus) { text-align: center; padding-right: 32px; } .ks-search-field input[name="qs"]::-webkit-search-cancel-button { display: none; } .ks-search-field input[name="qs"]::placeholder { color: var(--ks-field-label); opacity: 1; } .ks-search-close { width: 40px; height: 40px; flex: none; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .05); display: grid; place-items: center; color: var(--ks-ink); cursor: pointer; } .ks-search-close:hover { background: rgba(0, 0, 0, .09); } .ks-search-close svg { width: 18px; height: 18px; } /* Live suggestions (JTL) right under the field */ .ks-search .tt-menu { left: -40px !important; right: 0; width: calc(100% + 40px); margin-top: 14px; border: 0; border-radius: 0; box-shadow: none; background: var(--ks-card); } .ks-search .tt-suggestion { padding: 8px 0; font-size: 16px; color: var(--ks-ink); cursor: pointer; } .ks-search .tt-suggestion.tt-cursor, .ks-search .tt-suggestion:hover { color: var(--ks-link); } /* JTL Search appends its list to ; it has to sit above the overlay */ html.ks-search-on .jtl_search_results { z-index: 1070 !important; } .ks-search-quick { margin-top: 22px; padding: 0 4px; } .ks-search-label { margin: 0 0 10px; font-size: 12px; color: var(--ks-ink-2); } .ks-search-quick .ks-fchip { gap: 6px; } .ks-search-chip-loupe { width: 14px; height: 14px; flex: none; color: var(--ks-ink-2); } .ks-search-panel:has(.tt-menu.tt-open) .ks-search-quick { visibility: hidden; } @media (max-width: 767.98px) { .ks-search-panel { min-height: 100vh; min-height: 100dvh; } .ks-search-in { padding: 14px 16px calc(28px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { .ks-search-backdrop, .ks-search-panel { transition: none; } } /* ---------- Cookie consent (JTL consent manager): banner, settings window and the round button ---------- */ /* the round button bottom left: our line fingerprint (JTL's text calls it "Fingerabdruck-Icon") */ #consent-manager #consent-settings-btn { left: 20px; bottom: 20px; width: 44px; height: 44px; min-height: 0; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.8) blur(16px); backdrop-filter: saturate(1.8) blur(16px); box-shadow: 0 2px 10px rgba(0, 0, 0, .14); color: var(--ks-ink); } #consent-manager #consent-settings-btn:hover { background: #FFFFFF; } /* phones: smaller, and out of the way while the customer types in a form field */ @media (max-width: 767.98px) { #consent-manager #consent-settings-btn { left: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 42px; height: 42px; transition: opacity 160ms ease-out, transform 160ms var(--ks-out); } #consent-manager #consent-settings-btn .consent-icon { width: 20px; height: 20px; } /* "Nach oben" mirrors the cookie button: same size, same distance from the edges */ html .smoothscroll-top.show { right: 14px; bottom: calc(14px + env(safe-area-inset-bottom)); width: 42px; height: 42px; } body:has(form :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea):focus) #consent-manager #consent-settings-btn { opacity: 0; transform: scale(.85); pointer-events: none; } } #consent-manager #consent-settings-btn .consent-icon svg { display: none; } #consent-manager #consent-settings-btn .consent-icon { display: block; width: 22px; height: 22px; background: currentColor; -webkit-mask: var(--ks-ic-fingerprint) center / contain no-repeat; mask: var(--ks-ic-fingerprint) center / contain no-repeat; } /* the banner: a floating panel at the bottom, our type and buttons */ #consent-manager #consent-banner { max-width: 980px; padding: 24px 28px; border: 0; border-radius: 22px; background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px); box-shadow: var(--ks-panel-shadow); color: var(--ks-ink-2); font-family: var(--ks-font); font-size: 14px; line-height: 1.5; } #consent-manager #consent-banner::after { display: none; } #consent-manager .consent-banner-icon, #consent-manager .consent-modal-icon { display: none; } #consent-manager [class^="consent-display"], #consent-manager [class*=" consent-display"] { display: block; margin-bottom: 8px; font-family: var(--ks-font); font-size: 19px; font-weight: 500; letter-spacing: -.02em; line-height: 1.3; color: var(--ks-ink); } #consent-manager a { color: var(--ks-link); } #consent-manager .consent-btn { min-height: 48px; padding: 0 22px; border: 0; border-radius: 24px; background: var(--ks-field-bg); box-shadow: none; color: var(--ks-ink); font-family: var(--ks-font); font-size: 15px; font-weight: 500; transition: background-color 150ms ease-out; } #consent-manager .consent-btn:hover, #consent-manager .consent-btn:focus { background: var(--ks-field-bg-hover); color: var(--ks-ink); } #consent-manager #consent-banner-btn-all, #consent-manager #consent-settings .consent-btn-tertiary, #consent-manager #consent-accept-banner-btn-close { background: linear-gradient(180deg, var(--ks-btn-top), var(--ks-btn-base)); color: #FFFFFF; } #consent-manager #consent-banner-btn-all:hover, #consent-manager #consent-settings .consent-btn-tertiary:hover, #consent-manager #consent-accept-banner-btn-close:hover { background: linear-gradient(180deg, #45443F, var(--ks-btn-top)); color: #FFFFFF; } #consent-manager .consent-btn-holder > div + div .consent-btn, #consent-manager .consent-btn-block + .consent-btn-block { margin-top: 8px; } /* the settings window */ #consent-manager .consent-modal { background: rgba(0, 0, 0, .4); } #consent-manager .consent-modal-content { max-width: 640px; margin-top: 6vh; padding: 32px; border-radius: 22px; background: #FFFFFF; box-shadow: var(--ks-panel-shadow); font-family: var(--ks-font); font-size: 14px; line-height: 1.5; color: var(--ks-ink-2); } #consent-manager .consent-modal-content::after { display: none; } #consent-manager .consent-modal-close { top: 20px; right: 20px; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--ks-bg) var(--ks-ic-close) center / 18px 18px no-repeat; } #consent-manager .consent-modal-close i { display: none; } #consent-manager .consent-modal-close:hover { background-color: var(--ks-g100); } #consent-manager .consent-show-more { font-size: 14px; color: var(--ks-link); text-decoration: none; } #consent-manager .consent-show-more .consent-icon { display: none; } #consent-manager hr { border-color: var(--ks-bg); } /* switches inside the settings: the iOS style toggle of the shop */ #consent-manager .consent-switch .consent-label { min-height: 28px; padding-left: 60px; line-height: 28px; font-weight: 500; color: var(--ks-ink); } #consent-manager .consent-switch .consent-label::before { top: 0; left: 0; margin: 0; width: 46px; height: 28px; border: 0; border-radius: 14px; background: var(--ks-g200); transition: background-color 200ms var(--ks-out); } #consent-manager .consent-switch .consent-label::after { top: 2px; left: 2px; width: 24px; height: 24px; margin: 0; border-radius: 50%; background: #FFFFFF; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); transition: left 200ms var(--ks-out); } #consent-manager .consent-switch .consent-input:checked ~ .consent-label::before { background: var(--ks-blue); } #consent-manager .consent-switch .consent-input:checked ~ .consent-label::after { left: 20px; background: #FFFFFF; } #consent-manager .consent-switch .consent-input:focus + .consent-label::before { box-shadow: 0 0 0 3px rgba(184, 91, 28, .3); } /* ---------- Breadcrumb (layout/breadcrumb.tpl): a small orange line right above the page title ---------- */ /* NOVA: #content-wrapper:not(.has-fluid) 2rem / 4rem on desktop */ #content-wrapper:not(.has-fluid) { padding-top: 16px; } .ks-bc { display: flex; align-items: center; gap: 16px; min-height: 34px; margin: 8px 0 6px; } .ks-bc-path { min-width: 0; } .ks-bc-path ol { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; margin: 0; padding: 0; list-style: none; font-size: 13px; font-weight: 500; letter-spacing: .01em; line-height: 1.4; } .ks-bc-path li { display: flex; align-items: center; gap: 8px; } .ks-bc-path li.ks-bc-hidden { display: none; } /* a small dot between the shown categories */ .ks-bc-path li:not(.ks-bc-hidden) ~ li:not(.ks-bc-hidden)::before { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--ks-g300); } .ks-bc-path a { color: var(--ks-o600); text-decoration: none; } .ks-bc-path a:hover { color: var(--ks-o700); text-decoration: underline; text-underline-offset: 3px; } .ks-bc-nav { display: flex; gap: 8px; margin-left: auto; } .ks-bc-btn { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--ks-g50); color: var(--ks-g800); transition: background-color 150ms ease-out; } .ks-bc-btn:hover { background: var(--ks-g100); color: var(--ks-g800); } .ks-bc-btn svg { width: 18px; height: 18px; } /* nothing to show (top category, content pages without parents): no empty row */ .ks-bc:not(:has(li:not(.ks-bc-hidden))):not(:has(.ks-bc-btn)) { display: none; } /* the line belongs to the title below: the page starts right under it */ body:has(.ks-bc-path li:not(.ks-bc-hidden)) #content-wrapper:not(.has-fluid) { padding-top: 4px; } /* category pages: the language row's caption already names the parent; elsewhere ks.js moves the line above the title */ body:has(.ks-langrow-cap) .ks-bc { display: none; } .ks-cat-titlebox { min-width: 0; } .ks-cat-titlebox .ks-bc { margin: 0 0 10px; min-height: 0; } /* NOVA's hidden configurator check button still took 22px above the product title */ .btn.btn-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; } /* ---------- Category head ---------- */ .ks-cat-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; padding: 20px 0 32px; } .ks-cat-title { font-size: clamp(40px, 5.4vw, 76px); line-height: 1.03; letter-spacing: -.04em; max-width: 10em; margin: 0; } .ks-cat-side { text-align: right; max-width: 21em; padding-bottom: 10px; } .ks-cat-side p { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.25; font-weight: 500; letter-spacing: -.02em; margin: 0; } .ks-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 12px; color: var(--ks-link); font-size: 15px; } .ks-more:hover { text-decoration: underline; text-underline-offset: 3px; } /* caption above the language keys inside a language: which category they belong to */ .ks-langrow-cap { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 4px 0 12px; font-size: 15px; color: var(--ks-g500); } .ks-langrow-cap b { font-weight: 500; color: var(--ks-g800); } .ks-langrow-cap .ks-more { margin-top: 0; font-size: 14px; } .ks-chev { width: 11px; height: 11px; } .ks-desc { color: var(--ks-ink); max-width: 46em; } /* ---------- Key illustration ---------- */ .ks-key { position: relative; display: block; width: 92px; aspect-ratio: 1; border-radius: 16px; flex: none; background: linear-gradient(180deg, #FFFFFF 0%, #F2F2F4 100%); box-shadow: 0 -5px 0 var(--ks-g200) inset, 0 0 0 1px rgba(0, 0, 0, .06), 0 14px 22px -14px rgba(0, 0, 0, .4); } .ks-key .l { position: absolute; left: 15%; top: 12%; font-size: 32px; font-weight: 500; color: #2A2A2C; line-height: 1; } .ks-key .c { position: absolute; right: 13%; top: 12%; font-size: 20px; font-weight: 500; color: var(--ks-cyr); line-height: 1; } .ks-key.dk { background: linear-gradient(180deg, #2C2C2E 0%, #1C1C1E 100%); box-shadow: 0 -5px 0 #000 inset, 0 0 0 1px rgba(0, 0, 0, .4), 0 14px 22px -14px rgba(0, 0, 0, .5); } .ks-key.dk .l { color: #FFFFFF; } .ks-key.dk .c { color: #FF6961; } /* ---------- Shelves ---------- */ .ks-shelf { position: relative; } .ks-track { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px 2px 26px; scrollbar-width: none; } .ks-track::-webkit-scrollbar { display: none; } .ks-track > * { scroll-snap-align: start; flex: none; } .ks-arrow { position: absolute; top: 38%; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(225, 224, 223, .75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); display: grid; place-items: center; color: var(--ks-ink); transition: opacity 200ms ease-out, background-color 150ms ease-out; z-index: 2; cursor: pointer; } .ks-arrow:hover { background: rgba(202, 200, 199, .9); } .ks-arrow svg { width: 18px; height: 18px; } .ks-arrow.prev { left: -12px; } .ks-arrow.next { right: -12px; } .ks-arrow[disabled] { opacity: 0; pointer-events: none; } /* Language keys */ .ks-lk { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 92px; font-size: 13.5px; font-weight: 500; color: var(--ks-ink-2); transition: color 150ms ease-out; } .ks-lk:hover { color: var(--ks-ink); text-decoration: none; } .ks-lk .ks-key { width: 64px; border-radius: 13px; transition: transform 300ms var(--ks-out); } .ks-lk:hover .ks-key { transform: translateY(-3px); } .ks-lk .ks-key .l { left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 27px; } .ks-lk[aria-current] { color: var(--ks-ink); font-weight: 500; } .ks-lk[aria-current] .ks-key { box-shadow: 0 -4px 0 var(--ks-g200) inset, 0 0 0 2px var(--ks-blue), 0 14px 22px -14px rgba(0, 0, 0, .4); } /* ---------- Sections ---------- */ .ks-section { padding-top: 56px; } .ks-h2 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 22px; } .ks-h2 span { color: var(--ks-ink-2); } /* "Welche Art passt?" tiles */ .ks-types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ks-type { position: relative; text-align: left; background: var(--ks-card); border: 0; border-radius: var(--ks-radius); padding: 28px 26px 26px; box-shadow: var(--ks-shadow); display: flex; flex-direction: column; color: var(--ks-ink); font: inherit; cursor: pointer; transition: transform 300ms var(--ks-out), box-shadow 300ms var(--ks-out); } .ks-type:hover { transform: scale(1.012); box-shadow: var(--ks-shadow-h); } .ks-type[aria-expanded="true"] { box-shadow: 0 0 0 2px var(--ks-o500), var(--ks-shadow-h); } /* the explanation a tile opens: full width under its row, a small arrow pointing up at the tile */ .ks-type-info { grid-column: 1 / -1; position: relative; padding: 28px 32px 30px; background: var(--ks-o50); border-radius: var(--ks-radius); animation: ks-info-in 320ms var(--ks-out); } .ks-type-info[hidden] { display: none; } .ks-type-info::before { content: ""; position: absolute; top: -8px; left: calc(var(--ks-arrow-x, 50%) - 9px); width: 18px; height: 18px; background: var(--ks-o50); border-radius: 3px; transform: rotate(45deg); } .ks-type-info-h { margin: 0 0 12px; font-size: 21px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; color: var(--ks-g800); } .ks-type-info-h span { color: var(--ks-ink-2); } .ks-type-info p { max-width: 72ch; margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--ks-g700); } .ks-type-show { margin-top: 8px; height: 36px; padding: 0 18px; border: 1px solid var(--ks-o400); border-radius: 980px; background: #fff; color: var(--ks-o800); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out; } .ks-type-show:hover { background: var(--ks-o100); border-color: var(--ks-o500); } @keyframes ks-info-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* the products a hint points at light up for a moment */ #product-list .product-wrapper.ks-hl .productbox { animation: ks-hl 2.4s var(--ks-out); } @keyframes ks-hl { 0%, 60% { box-shadow: 0 0 0 2px var(--ks-o500), var(--ks-shadow-h); } 100% { box-shadow: var(--ks-shadow); } } @media (prefers-reduced-motion: reduce) { .ks-type-info, #product-list .product-wrapper.ks-hl .productbox { animation: none; } } .ks-type .stage { height: 150px; display: grid; place-items: center; margin-bottom: 22px; } .ks-type .ks-key { width: 104px; transform: perspective(900px) rotateX(14deg); } .ks-type .ks-key .l { font-size: 36px; } .ks-type .ks-key .c { font-size: 23px; } .ks-type.ur .ks-key .c { top: auto; bottom: 18%; } .ks-type.or .ks-key .l { top: auto; bottom: 18%; } .ks-type.mini .ks-key .l { left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; } .ks-type.mini .ks-key .c { font-size: 13px; right: 10%; top: 10%; } .ks-type .spot { position: absolute; width: 11px; height: 13px; border-radius: 3px; border: 1.2px dashed var(--ks-ink-2); opacity: .55; } .ks-type .when { font-size: 12px; font-weight: 500; color: var(--ks-accent); letter-spacing: .01em; } .ks-type .h { display: block; font-size: 22px; line-height: 1.18; font-weight: 500; letter-spacing: -.02em; margin-top: 6px; } .ks-type .p { display: block; font-size: 15px; line-height: 1.4; color: var(--ks-ink-2); margin-top: 8px; } .ks-type .price { display: none; } .ks-bar { padding-top: 56px; } .ks-bar .ks-h2 { scroll-margin-top: calc(var(--ks-header-h, 168px) + 16px); } /* ---------- Filter table (same card as the comparison) ---------- */ .ks-filter { margin: 8px 0 20px; } .ks-filter-sum { display: none; } .ks-filter-card { background: var(--ks-card); border-radius: var(--ks-radius); box-shadow: var(--ks-shadow); } .ks-filter-card table { width: 100%; border-collapse: collapse; font-size: 15px; } .ks-filter-card th, .ks-filter-card td { padding: 14px 20px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--ks-line); } .ks-filter-card tr:last-child th, .ks-filter-card tr:last-child td { border-bottom: 0; } .ks-filter-card th { width: 20%; font-size: 14px; font-weight: 500; color: var(--ks-g600); white-space: nowrap; } .ks-fchips { display: flex; flex-wrap: wrap; gap: 8px; } .ks-fchip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 980px; border: 1px solid var(--ks-g100); background: var(--ks-g50); color: var(--ks-g800); font-size: 14px; white-space: nowrap; text-decoration: none; transition: border-color 150ms ease-out, background-color 150ms ease-out, color 150ms ease-out; } .ks-fchip:hover { background: #fff; border-color: var(--ks-o300); color: var(--ks-g900); text-decoration: none; } .ks-fchip small { font-size: 12px; color: var(--ks-g400); } /* chosen: the brand orange, so a selection catches the eye */ .ks-fchip.is-active { background: var(--ks-o50); border-color: var(--ks-o400); color: var(--ks-o800); } .ks-fchip.is-active small { color: var(--ks-o600); } .ks-filter-sort { display: none; } .ks-x { position: relative; width: 10px; height: 10px; flex: none; } .ks-x::before, .ks-x::after { content: ""; position: absolute; left: 4px; top: -1px; width: 1.6px; height: 12px; background: currentColor; border-radius: 1px; } .ks-x::before { transform: rotate(45deg); } .ks-x::after { transform: rotate(-45deg); } .ks-dot { display: block; width: 20px; height: 20px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .14); flex: none; } .ks-fchip:has(.ks-dot) { padding-left: 7px; } .ks-filter-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 20px 16px; border-top: 1px solid var(--ks-line); } .ks-filter-toggle { border: 0; background: none; padding: 0; color: var(--ks-link); font: inherit; font-size: 15px; cursor: pointer; } .ks-filter-toggle:hover, .ks-filter-reset:hover { text-decoration: underline; text-underline-offset: 3px; } .ks-filter-reset { margin-left: auto; color: var(--ks-link); font-size: 15px; } /* NOVA's own filter button and active filter list are replaced by the table */ #result-wrapper:has([data-ks-filter]) #js-filters, #result-wrapper:has([data-ks-filter]) .filter-collapsible-control #js-filters { display: none; } /* ---------- Product grid as cards ---------- */ #product-list { row-gap: 20px; } #product-list .product-wrapper[hidden] { display: none; } #product-list.layout-gallery .productbox { background: var(--ks-card); border-radius: var(--ks-radius); box-shadow: var(--ks-shadow); overflow: hidden; height: 100%; transition: transform 300ms var(--ks-out), box-shadow 300ms var(--ks-out); } #product-list.layout-gallery .productbox:hover, #product-list.layout-gallery .productbox:focus-within { transform: scale(1.008); box-shadow: var(--ks-shadow-h); } /* NOVA grows the box on hover with its own white layer; the card does that job now */ #product-list.layout-gallery .productbox.productbox-hover .productbox-inner::before { display: none; } #product-list.layout-gallery .productbox-hover.productbox-show-variations:hover, #product-list.layout-gallery .productbox-hover.productbox-show-variations:focus, #product-list.layout-gallery .productbox-hover.productbox-show-variations.focus { position: relative; margin: 0; padding: 0; z-index: auto; } #product-list.layout-gallery .productbox-variations, #product-list.layout-gallery .productbox-quick-actions { display: none !important; } #product-list.layout-gallery .productbox-inner { padding: 0 0 22px; } #product-list.layout-gallery .productbox-inner > .row { margin: 0; } #product-list.layout-gallery .productbox-inner > .row > [class*="col"] { padding: 0 22px; } #product-list.layout-gallery .productbox-inner > .row > [class*="col"]:first-child { padding: 0; } #product-list.layout-gallery .productbox-image.square-image { aspect-ratio: 4 / 3; background: var(--ks-g100); } #product-list.layout-gallery .productbox-image.square-image::before { display: none; } #product-list.layout-gallery .square-image .inner img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; transition: transform 400ms var(--ks-out); } #product-list.layout-gallery .productbox:hover .square-image .inner img { transform: translate(-50%, -50%) scale(1.03); } #product-list.layout-gallery .productbox-title { margin-top: 14px; font-size: 15px; font-weight: 400; line-height: 1.35; letter-spacing: -.005em; } #product-list.layout-gallery .ks-swatch-row + .productbox-title { margin-top: 8px; } @media (max-width: 575.98px) { #product-list.layout-gallery .productbox-title { font-size: 14px; } } #product-list.layout-gallery .productbox-title a { color: var(--ks-g800); } #product-list.layout-gallery .price_wrapper { margin-top: 10px; } #product-list.layout-gallery .price { font-size: 17px; font-weight: 500; color: var(--ks-ink); } /* ---------- Cross-sell shelf cards ---------- */ .ks-cross .ks-track { gap: 20px; padding-bottom: 34px; } .ks-card { width: min(360px, 80vw); height: 460px; border-radius: var(--ks-radius); background: var(--ks-card); overflow: hidden; display: flex; flex-direction: column; padding: 28px 28px 0; color: var(--ks-ink); box-shadow: var(--ks-shadow); text-decoration: none; transition: transform 300ms var(--ks-out), box-shadow 300ms var(--ks-out); } .ks-card:hover { color: var(--ks-ink); text-decoration: none; transform: scale(1.012); box-shadow: var(--ks-shadow-h); } .ks-card .tag { font-size: 12px; font-weight: 500; color: var(--ks-accent); letter-spacing: .01em; margin-bottom: 6px; } .ks-card .h { font-size: 26px; line-height: 1.12; font-weight: 500; letter-spacing: -.025em; } .ks-card .p { margin-top: 8px; font-size: 16px; line-height: 1.35; } .ks-card .price { margin-top: 10px; font-size: 15px; color: var(--ks-ink-2); } .ks-card .img { flex: 1; display: grid; place-items: center; padding: 14px 0 22px; min-height: 0; } .ks-card .img img { max-height: 210px; width: 92%; object-fit: contain; } /* ---------- Comparison ---------- */ .ks-cmp { background: var(--ks-card); border-radius: var(--ks-radius); box-shadow: var(--ks-shadow); overflow-x: auto; } .ks-cmp table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 15px; } .ks-cmp th, .ks-cmp td { padding: 16px 20px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ks-line); } .ks-cmp tr:last-child th, .ks-cmp tr:last-child td { border-bottom: 0; } .ks-cmp thead th { font-size: 17px; font-weight: 500; letter-spacing: -.015em; padding-top: 26px; vertical-align: bottom; } .ks-cmp thead th small { display: block; font-size: 13px; font-weight: 400; color: var(--ks-ink-2); margin-top: 2px; } .ks-cmp tbody th { font-weight: 500; color: var(--ks-ink-2); width: 20%; } .ks-cmp .yes { color: var(--ks-ok); font-weight: 500; } /* ---------- Help and FAQ ---------- */ .ks-help { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; } .ks-help > :first-child { position: sticky; top: calc(var(--ks-header-h, 168px) + 24px); } .ks-help h2 { font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.03em; margin: 0; } .ks-help .lead { font-size: 19px; color: var(--ks-ink-2); margin: 14px 0 0; max-width: 24em; } .ks-pill { display: inline-flex; align-items: center; justify-content: center; height: 44px; margin-top: 24px; padding: 0 22px; border-radius: 980px; background: linear-gradient(180deg, var(--ks-btn-top), var(--ks-btn-base)); color: var(--ks-btn-ink); font-size: 16px; transition: background-color 150ms ease-out, transform 120ms var(--ks-out); } .ks-pill:hover { background: linear-gradient(180deg, #45443F, var(--ks-btn-top)); color: var(--ks-btn-ink); text-decoration: none; } .ks-pill:active { transform: scale(.97); } .ks-pill.ghost { background: transparent; color: var(--ks-link); box-shadow: 0 0 0 1px var(--ks-link) inset; } .ks-pill.ghost:hover { background: rgba(0, 0, 0, .03); color: var(--ks-link); } .ks-acc { border-top: 1px solid var(--ks-line); } .ks-acc details, .ks-more-text details { border-bottom: 1px solid var(--ks-line); } .ks-acc summary, .ks-more-text summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-size: clamp(18px, 1.6vw, 21px); font-weight: 500; letter-spacing: -.015em; cursor: pointer; } .ks-acc summary::-webkit-details-marker, .ks-more-text summary::-webkit-details-marker { display: none; } .ks-acc summary::after, .ks-more-text summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 1.8px solid currentColor; border-bottom: 1.8px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 250ms var(--ks-out); } .ks-acc details[open] summary::after, .ks-more-text details[open] summary::after { transform: translateY(3px) rotate(-135deg); } .ks-acc .body { padding: 0 0 22px; max-width: 46em; font-size: var(--ks-text); line-height: var(--ks-text-lh); } .ks-acc .body p { margin: 0; } .ks-acc .body p + p { margin-top: 12px; } /* ---------- Category description (Wawi text), open below the products ---------- Same two column rhythm as "Gut zu wissen": heading left and pinned while reading, text right */ .ks-desc-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; } .ks-desc-title { position: sticky; top: calc(var(--ks-header-h, 168px) + 24px); font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.03em; margin: 0; } .ks-desc-block .ks-desc, .ks-bd .ks-bd-body { max-width: 46em; max-height: none; overflow: visible; font-size: var(--ks-text); line-height: var(--ks-text-lh); color: var(--ks-ink); } .ks-desc-block .ks-desc::after { display: none; } .ks-desc-block .ks-desc h2, .ks-desc-block .ks-desc h3, .ks-bd .ks-bd-body h2, .ks-bd .ks-bd-body h3 { font-size: var(--ks-text-h); line-height: 1.25; letter-spacing: -.02em; margin: 28px 0 8px; } .ks-desc-block .ks-desc > :first-child, .ks-bd .ks-bd-body > :first-child { margin-top: 0; } .ks-desc-block .ks-desc p, .ks-bd .ks-bd-body p { margin: 0 0 var(--ks-text-gap); } .ks-desc-block .ks-desc ul, .ks-desc-block .ks-desc ol, .ks-bd .ks-bd-body ul, .ks-bd .ks-bd-body ol { padding-left: 1.2em; margin: 0 0 var(--ks-text-gap); } .ks-desc-block .ks-desc li, .ks-bd .ks-bd-body li { margin-bottom: 3px; } .ks-desc-block .ks-desc a, .ks-bd .ks-bd-body a { color: var(--ks-link); } /* ---------- Fixes on NOVA defaults ---------- */ .ks-lk, .ks-lk:hover, .ks-more, .ks-pill, #product-list .productbox-title a { text-decoration: none; } .ks-advisor ~ .productlist-page-nav-header-m { margin-top: 12px; } .ks-advisor ~ hr.productlist-page-nav-bottom { border-color: transparent; margin: 4px 0 12px; } #product-list.layout-gallery .second-wrapper { display: none; } #product-list.layout-gallery .productbox-ribbon { top: 14px; left: 14px; } /* Product grid rows: NOVA leaves 64px between rows of cards */ #product-list .product-wrapper, #product-list .product-wrapper:not(:last-child) { margin-bottom: 16px; } /* Product badges (snippets/ribbon.tpl): every badge that applies, as a white glass capsule in a column. The capsules are alike, the icon colour tells them apart (flame orange, star gold, sparkle violet, stock amber); only Sale (red) and sold out (dark) are filled. The JTL wording slides out when that badge is hovered; on touch screens the icons stay on their own. JTL's custom badge (article attribute) keeps the .ribbon text tag. */ :root { --ks-bi-flame: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath fill-rule='evenodd' d='M12.6 1.5c.8 3.6-.9 5.8-2.8 7.9C7.9 11.5 6 13.6 6 16.6 6 19.9 8.7 22.5 12 22.5s6-2.6 6-5.9c0-2.9-1.3-5.1-2.9-6.8-.3 1.9-1.2 3.2-2.5 3.8.6-4.7-.1-9-0-12.1zM12 21c-1.8 0-3.1-1.3-3.1-3 0-1.9 1.6-3 2.4-4.6.6 1.5 2.4 2.4 3 4 .5 1.9-.6 3.6-2.3 3.6z'/%3E%3C/svg%3E"); --ks-bi-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 1.8l3.2 6.5 7.1 1-5.15 5 1.2 7.1L12 18.1l-6.35 3.3 1.2-7.1L1.7 9.3l7.1-1z'/%3E%3C/svg%3E"); --ks-bi-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M10.5 1.5c.9 5.7 2.8 7.6 8.5 8.5-5.7.9-7.6 2.8-8.5 8.5-.9-5.7-2.8-7.6-8.5-8.5 5.7-.9 7.6-2.8 8.5-8.5zM19 15c.4 2.4 1.2 3.2 3.5 3.5-2.3.4-3.1 1.2-3.5 3.5-.4-2.3-1.2-3.1-3.5-3.5 2.3-.3 3.1-1.1 3.5-3.5z'/%3E%3C/svg%3E"); --ks-bi-stock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='7' width='17' height='10' rx='2.5'/%3E%3Cpath d='M22 10.5v3'/%3E%3Cpath d='M5.5 10.5v3' stroke-width='3'/%3E%3C/svg%3E"); --ks-bi-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M5.6 5.6l12.8 12.8'/%3E%3C/svg%3E"); --ks-bi-soon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E"); --ks-gold: #F2B000; --ks-violet: #6E56CF; } .ks-badges.productbox-ribbon { position: absolute; top: 10px; left: 10px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; pointer-events: none; } #product-list.layout-gallery .ks-badges.productbox-ribbon { top: 10px; left: 10px; } .ks-badge { --ks-badge-c: var(--ks-g800); display: inline-flex; align-items: center; height: 38px; min-width: 38px; padding: 0; border-radius: 19px; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(12px) saturate(1.8); backdrop-filter: blur(12px) saturate(1.8); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 4px 12px rgba(0, 0, 0, .14); color: var(--ks-g800); font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; pointer-events: auto; cursor: default; } .ks-badge-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; color: var(--ks-badge-c); } i.ks-badge-ic::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--ks-bi) center / contain no-repeat; mask: var(--ks-bi) center / contain no-repeat; } .ks-badge-label { max-width: 0; overflow: hidden; opacity: 0; transition: max-width .32s var(--ks-out), opacity .2s ease, padding .32s var(--ks-out); } @media (hover: hover) { .ks-badge:hover .ks-badge-label { max-width: 180px; padding-right: 14px; opacity: 1; } } @media (prefers-reduced-motion: reduce) { .ks-badge-label { transition: none; } } .ks-badge-1 { --ks-badge-c: var(--ks-o500); --ks-bi: var(--ks-bi-flame); } .ks-badge-6 { --ks-badge-c: var(--ks-gold); --ks-bi: var(--ks-bi-star); } .ks-badge-3 { --ks-badge-c: var(--ks-violet); --ks-bi: var(--ks-bi-sparkle); } .ks-badge-5 { --ks-badge-c: var(--ks-g600); --ks-bi: var(--ks-bi-soon); } .ks-badge-low { --ks-badge-c: var(--ks-o600); --ks-bi: var(--ks-bi-stock); } /* the two filled ones: the discount speaks loudest, sold out goes dark */ .ks-badge-sale { background: var(--ks-error); color: #FFFFFF; box-shadow: 0 4px 12px rgba(215, 0, 21, .28); } .ks-badge-sale .ks-badge-ic { width: auto; min-width: 38px; padding: 0 10px; color: #FFFFFF; font-size: 14px; font-weight: 600; letter-spacing: -.01em; } .ks-badge-out { --ks-badge-c: #FFFFFF; --ks-bi: var(--ks-bi-out); background: rgba(43, 42, 40, .86); color: #FFFFFF; } @media (max-width: 575.98px) { .ks-badges.productbox-ribbon, #product-list.layout-gallery .ks-badges.productbox-ribbon { top: 8px; left: 8px; gap: 5px; } .ks-badge, .ks-badge-ic { height: 32px; min-width: 32px; } .ks-badge { border-radius: 16px; } .ks-badge-ic { width: 32px; } i.ks-badge-ic::before { width: 20px; height: 20px; } .ks-badge-sale .ks-badge-ic { min-width: 32px; padding: 0 8px; font-size: 12px; } } /* sold out: the photo steps back */ .productbox:has(.ks-badge-out) .productbox-image img { opacity: .55; filter: grayscale(1); } /* JTL custom badge (article attribute): text tag in the same family */ .productbox-ribbon.ribbon-custom { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: 14px; font-size: 12px; font-weight: 500; text-transform: none; } .productbox-ribbon.ribbon-custom::before, .productbox-ribbon.ribbon-custom::after { content: none; display: none; } /* Colour swatches of variation products in the product cards (productlist/item_box.tpl) */ .ks-swatch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 14px; text-decoration: none; } .ks-swatch { flex: none; width: 18px; height: 18px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } .ks-swatch-row + .item-slider-desc { margin-top: 6px; } .item-slider .ks-badges.productbox-ribbon { top: 8px; left: 8px; } .item-slider .ks-badge, .item-slider .ks-badge-ic { height: 30px; min-width: 30px; } .item-slider .ks-badge-ic { width: 30px; } .item-slider i.ks-badge-ic::before { width: 17px; height: 17px; } .item-slider .ks-badge-sale .ks-badge-ic { min-width: 30px; padding: 0 7px; font-size: 12px; } .ks-swatch-link { display: inline-flex; border-radius: 50%; cursor: pointer; transition: transform .15s ease; } .ks-swatch-link:hover { transform: scale(1.18); } .ks-swatch-link:focus-visible { outline: 2px solid var(--ks-blue); outline-offset: 2px; } .ks-swatch-more { font-size: 12px; font-weight: 500; color: var(--ks-ink-2); } @media (max-width: 575.98px) { .ks-swatch-row { gap: 4px; } .ks-swatch { width: 14px; height: 14px; } } /* Page navigation of product lists: round page numbers, the current one in the blue tint, no yellow underline */ .productlist-page-nav .pagination { align-items: center; gap: 2px; margin: 0; } .productlist-page-nav .pagination .dropdown-menu { gap: 2px; } .productlist-page-nav .pagination .dropdown-item { padding: 0; background: none; } .productlist-page-nav .page-link { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 10px; border: 0; border-radius: 18px; background: none; font-size: 14px; color: var(--ks-ink); } .productlist-page-nav .page-link::before, .productlist-page-nav .page-link::after { content: none !important; display: none !important; } .productlist-page-nav .page-link:hover { background: var(--ks-bg); color: var(--ks-ink); } .productlist-page-nav .page-item.active .page-link { background: var(--ks-tint-bg); color: var(--ks-tint-ink); font-weight: 500; } .productlist-page-nav .page-item.disabled .page-link { background: none; color: var(--ks-g300); } /* Categories and search results use the full width: the mega menu and the subcategory tiles replace the sidebar */ #main-wrapper:is(:has(.ks-advisor), :has(.ks-langrow), :has(.ks-is-search), :has(.ks-is-cat)) .sidepanel-left { display: none; } #main-wrapper:is(:has(.ks-advisor), :has(.ks-langrow), :has(.ks-is-search), :has(.ks-is-cat)) #content > .row > .ml-auto-util { flex: 0 0 100%; max-width: 100%; } /* ---------- Slider arrows (all JTL carousels): same round arrows as our shelves, always visible ---------- */ .slick-slider .slick-arrow, .slick-slider .slick-arrow:hover, .slick-slider .slick-arrow:focus { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(225, 224, 223, .75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ks-ink); font-size: 0; opacity: 1; top: 38%; transform: translateY(-50%); z-index: 2; transition: background-color 150ms ease-out, opacity 200ms ease-out; } .slick-slider .slick-arrow:hover { background: rgba(202, 200, 199, .9); } /* the thumbnail row sets its arrows in line with the thumbnails: centred, not lifted like the big carousels' */ #gallery_preview .slick-arrow, #gallery_preview .slick-arrow:hover, #gallery_preview .slick-arrow:focus { align-self: center; transform: none; } .slick-slider .slick-arrow::before { content: none; display: none; } .slick-slider .slick-arrow::after { content: ""; position: absolute; top: 50%; left: 50%; width: 9px; height: 9px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; background: none; font-size: 0; transform: translate(-65%, -50%) rotate(45deg); } .slick-slider .slick-prev::after { transform: translate(-35%, -50%) rotate(-135deg); } .slick-slider .slick-arrow.slick-disabled { opacity: 0; pointer-events: none; } /* ---------- Messages: calm cards instead of NOVA's coloured strips ---------- */ .alert { border: 0; border-radius: 14px; padding: 14px 18px; font-size: 15px; line-height: 1.45; } .alert-success { background: #EEF6F0; color: var(--ks-ok); } .alert-info { background: var(--ks-bg); color: var(--ks-ink-2); } .alert-warning { background: var(--ks-o50); color: var(--ks-o800); } .alert-danger { background: #FDEEEE; color: var(--ks-cyr); } /* Notices at the top of the page (JTL's alert list): the soft coloured card, the icon in a round white badge, JTL's link as a button on the right */ #alert-list .alert { --ks-alert: var(--ks-o600); display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; margin-bottom: 12px; padding: 12px 14px 12px 12px; border-radius: var(--ks-panel-radius); } #alert-list .alert-success { --ks-alert: var(--ks-ok); } #alert-list .alert-info { --ks-alert: var(--ks-blue); } #alert-list .alert-danger { --ks-alert: var(--ks-error); } #alert-list .alert > .fas, #alert-list .alert > .fa { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .8); color: var(--ks-alert); font-size: 15px; } #alert-list .alert > a, .ks-pa-btn { display: inline-flex; align-items: center; min-height: 40px; padding: 0 18px; border-radius: 20px; background: var(--ks-card); color: var(--ks-ink); font-size: 14px; font-weight: 500; white-space: nowrap; text-decoration: none; transition: background-color 150ms ease-out, color 150ms ease-out; } #alert-list .alert > a:hover, .ks-pa-btn:hover { background: var(--ks-ink); color: #FFFFFF; text-decoration: none; } /* the cross of a dismissable notice (owner 2026-11-11, iPhone: the text stood one word per line in the icon column): it gets its own last column in the first row, so the text keeps the wide middle one */ #alert-list .alert:has(> .close) { grid-template-columns: 36px minmax(0, 1fr) auto; } #alert-list .alert > .close { grid-column: 3; grid-row: 1; align-self: start; width: 32px; height: 32px; margin: 2px -4px 0 0; display: grid; place-items: center; border-radius: 50%; font-size: 20px; line-height: 1; color: inherit; opacity: .6; cursor: pointer; text-shadow: none; float: none; } #alert-list .alert > .close:hover { opacity: 1; background: rgba(255, 255, 255, .7); } /* "Ihr Warenkorb wurde ... aktualisiert": which article, old price, new price */ #alert-list .ks-price-alert { display: block; padding: 16px 18px; background: var(--ks-o50); color: var(--ks-ink); } .ks-pa-head { display: flex; align-items: center; gap: 14px; } .ks-pa-icon { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; } .ks-pa-icon::before { content: ""; width: 22px; height: 22px; background: var(--ks-o600); -webkit-mask: var(--ks-ic-tag) center / contain no-repeat; mask: var(--ks-ic-tag) center / contain no-repeat; } .ks-pa-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ks-pa-title { font-size: 16px; font-weight: 500; line-height: 1.35; letter-spacing: -.01em; } .ks-pa-hint { font-size: 14px; line-height: 1.35; color: var(--ks-o800); } .ks-pa-btn { flex: none; } .ks-pa-list { margin: 14px 0 0; padding: 0; list-style: none; } .ks-pa-item { display: flex; align-items: center; gap: 14px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .75); } .ks-pa-item + .ks-pa-item { margin-top: 8px; } .ks-pa-img { flex: none; width: 44px; height: 44px; border-radius: 10px; object-fit: contain; background: #FFFFFF; } .ks-pa-name { flex: 1 1 auto; min-width: 0; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ks-ink); text-decoration: none; } .ks-pa-name:hover { color: var(--ks-link); text-decoration: none; } .ks-pa-prices { flex: none; display: flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; white-space: nowrap; } .ks-pa-old { font-size: 14px; color: var(--ks-ink-2); } .ks-pa-new { font-size: 17px; font-weight: 500; color: var(--ks-ink); } /* the arrow points up (red) when the price rose, down (green) when it fell */ .ks-pa-arrow { width: 16px; height: 16px; background: var(--ks-ink-2); -webkit-mask: var(--ks-ic-arrow) center / contain no-repeat; mask: var(--ks-ic-arrow) center / contain no-repeat; } .ks-pa-arrow.is-up { background: var(--ks-error); transform: rotate(-40deg); } .ks-pa-arrow.is-down { background: var(--ks-ok); transform: rotate(40deg); } .ks-pa-arrow.is-up + .ks-pa-new { color: var(--ks-error); } .ks-pa-arrow.is-down + .ks-pa-new { color: var(--ks-ok); } .ks-pa-list.is-text li { padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .75); font-size: 14px; } .ks-pa-list.is-text li + li { margin-top: 6px; } @media (max-width: 767.98px) { #alert-list .alert { grid-template-columns: 36px minmax(0, 1fr); align-items: start; font-size: 14px; } #alert-list .alert > a { grid-column: 2; justify-self: start; } .ks-pa-head { flex-wrap: wrap; align-items: flex-start; } .ks-pa-text { flex-basis: calc(100% - 54px); } .ks-pa-btn { margin-left: 54px; } .ks-pa-item { flex-wrap: wrap; } .ks-pa-name { flex-basis: calc(100% - 58px); } .ks-pa-prices { margin-left: 58px; } } /* ---------- Rating stars: warm gold everywhere (cards, product page, reviews) ---------- */ .rating i, .rating .fa-star, .rating .fa-star-half-alt, .ks-pd-rating i { color: var(--ks-star); } /* ---------- Sheets: cart panel (right, full height) and the "added to cart" window ---------- Native dialogs: the shop behind is dimmed, Esc / cross / a click on the dimmed area closes them */ html.ks-sheet-on { overflow: hidden; } .ks-sheet { padding: 0; border: 0; background: var(--ks-card); color: var(--ks-ink); box-shadow: var(--ks-panel-shadow); overflow: hidden; } .ks-sheet::backdrop { background: rgba(0, 0, 0, .4); } .ks-sheet[open] { display: flex; flex-direction: column; } .ks-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .ks-sheet-close { flex: none; width: 40px; height: 40px; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ks-bg); color: var(--ks-ink); cursor: pointer; transition: background-color 150ms ease-out; } .ks-sheet-close:hover { background: var(--ks-g100); } .ks-sheet-close svg { width: 18px; height: 18px; } /* the panel slides in from the right */ .ks-sheet-side { position: fixed; inset: 0 0 0 auto; width: min(440px, 100vw); max-width: 100vw; height: 100%; max-height: 100%; margin: 0; border-radius: var(--ks-panel-radius) 0 0 var(--ks-panel-radius); } .ks-sheet-head { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 12px 28px; } .ks-sheet-title { margin: 0; font-size: 24px; font-weight: 500; letter-spacing: -.02em; } .ks-sheet-count { font-weight: 400; color: var(--ks-ink-2); } /* the window sits in the middle */ .ks-sheet-center { width: min(1040px, calc(100vw - 48px)); max-height: calc(100vh - 48px); margin: auto; border-radius: var(--ks-panel-radius); } @media (prefers-reduced-motion: no-preference) { .ks-sheet[open] { animation: ks-sheet-in 280ms var(--ks-out); } .ks-sheet-side[open] { animation-name: ks-side-in; } .ks-sheet[open]::backdrop { animation: ks-fade-in 280ms var(--ks-out); } .ks-sheet.is-closing { animation: ks-sheet-in 200ms ease-in reverse forwards; } .ks-sheet-side.is-closing { animation-name: ks-side-in; } .ks-sheet.is-closing::backdrop { animation: ks-fade-in 200ms ease-in reverse forwards; } } @keyframes ks-sheet-in { from { opacity: 0; transform: translateY(16px) scale(.98); } } @keyframes ks-side-in { from { transform: translateX(100%); } } @keyframes ks-fade-in { from { opacity: 0; } } /* ---------- Cart panel content (NOVA's dropdown container) ---------- */ #ks-cart-sheet #cart-dropdown-container { display: flex; flex-direction: column; min-height: 100%; } .ks-cart-items { flex: 1 1 auto; margin: 0; padding: 0 28px; } .ks-cart-item { display: flex; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--ks-bg); } .ks-cart-item:last-child { border-bottom: 0; } .ks-cart-img { flex: none; width: 72px; height: 72px; display: grid; place-items: center; border-radius: 12px; background: var(--ks-bg); overflow: hidden; } .ks-cart-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; } .ks-cart-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ks-cart-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; line-height: 1.35; font-weight: 500; color: var(--ks-ink); } a.ks-cart-name, a.ks-cart-name:hover, .ks-ps-name-link, .ks-ps-name-link:hover { text-decoration: none; } a.ks-cart-name:hover { color: var(--ks-link); } .ks-cart-vars { font-size: 13px; color: var(--ks-ink-2); } .ks-cart-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: auto; font-size: 13px; color: var(--ks-ink-2); } .ks-cart-sum { font-size: 15px; font-weight: 500; color: var(--ks-ink); white-space: nowrap; } #ks-cart-sheet .item-overflow-notice { padding: 0 28px 12px; font-size: 13px; color: var(--ks-ink-2); } /* totals, free shipping, buttons: pinned to the bottom of the panel */ #ks-cart-sheet .dropdown-body { position: sticky; bottom: 0; padding: 18px 28px 24px; background: var(--ks-card); box-shadow: 0 -1px 0 var(--ks-bg), 0 -12px 24px rgba(255, 255, 255, .9); } #ks-cart-sheet .dropdown-body > ul { margin: 14px 0 16px; font-size: 13px; color: var(--ks-ink-2); } #ks-cart-sheet .dropdown-body > ul li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; margin-bottom: 4px; } #ks-cart-sheet .dropdown-body > ul li.font-weight-bold-util { margin: 8px 0 4px; font-size: 19px; font-weight: 500; color: var(--ks-ink); } #ks-cart-sheet .dropdown-body > ul li:last-child:not(.font-weight-bold-util) { display: block; } .ks-cart-buttons { display: grid; gap: 10px; } .ks-cart-buttons .btn { margin: 0; } #ks-cart-sheet .cart-dropdown-empty { display: block; padding: 8px 28px 28px; font-size: 17px; color: var(--ks-ink-2); } #ks-cart-sheet [id^="ppc-"] { margin-top: 10px; } /* ---------- Account panel (NOVA's account dropdown) ---------- */ #ks-account-sheet [data-ks-sheet-body] > div { display: flex; flex-direction: column; min-height: 100%; } /* the panel title already says "Anmelden" */ #ks-account-sheet legend { display: none; } #ks-account-sheet .dropdown-body { padding: 8px 28px 28px; } #ks-account-sheet .dropdown-body .btn { margin-top: 8px; } #ks-account-sheet .dropdown-body > a { display: block; margin-top: 18px; text-align: center; font-size: 15px; color: var(--ks-link); text-decoration: none; } #ks-account-sheet .dropdown-body > a:hover { text-decoration: underline; } /* "Neu hier? Jetzt registrieren!": grey band at the bottom, the link as a tinted button */ #ks-account-sheet .dropdown-footer { margin-top: auto; padding: 24px 28px 28px; border: 0; background: var(--ks-card); box-shadow: 0 -1px 0 var(--ks-bg); text-align: center; font-size: 15px; color: var(--ks-ink-2); } #ks-account-sheet .dropdown-footer a { display: flex; align-items: center; justify-content: center; height: var(--ks-btn-h); margin-top: 12px; border-radius: calc(var(--ks-btn-h) / 2); background: var(--ks-tint-bg); color: var(--ks-tint-ink); font-size: 17px; font-weight: 500; text-decoration: none; transition: background-color 150ms ease-out; } #ks-account-sheet .dropdown-footer a:hover { background: var(--ks-tint-bg-hover); color: var(--ks-tint-ink); } /* logged in: the account links as calm rows, an icon on the left and a chevron on the right */ #ks-account-sheet #account-dropdown-menu { padding: 4px 16px 24px; } #ks-account-sheet .dropdown-item { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border-radius: 12px; font-size: 17px; color: var(--ks-ink); white-space: normal; } #ks-account-sheet .dropdown-item::before { content: ""; flex: none; width: 22px; height: 22px; background: var(--ks-ink-2); -webkit-mask: var(--ks-icon) center / contain no-repeat; mask: var(--ks-icon) center / contain no-repeat; --ks-icon: var(--ks-ic-account); } #ks-account-sheet .dropdown-item[href*="bestellungen=1"]::before { --ks-icon: var(--ks-ic-orders); } #ks-account-sheet .dropdown-item[href*="editRechnungsadresse=1"]::before { --ks-icon: var(--ks-ic-data); } #ks-account-sheet .dropdown-item[href*="editLieferadresse=1"]::before { --ks-icon: var(--ks-ic-address); } #ks-account-sheet .dropdown-item[href*="returns=1"]::before { --ks-icon: var(--ks-ic-returns); } #ks-account-sheet .dropdown-item[href*="#my-wishlists"]::before { --ks-icon: var(--ks-ic-wish); } #ks-account-sheet .dropdown-item::after { content: ""; flex: none; width: 8px; height: 8px; margin-left: auto; border-top: 2px solid var(--ks-ink-2); border-right: 2px solid var(--ks-ink-2); transform: rotate(45deg); } #ks-account-sheet .dropdown-item:hover, #ks-account-sheet .dropdown-item:focus { background: var(--ks-bg); color: var(--ks-ink); } #ks-account-sheet .dropdown-item:hover::before { background: var(--ks-ink); } #ks-account-sheet .dropdown-divider { display: none; } /* "Abmelden": a grey button like every second action in the shop */ #ks-account-sheet .account-icon-dropdown-logout { justify-content: center; min-height: var(--ks-btn-h); margin-top: 20px; border-radius: calc(var(--ks-btn-h) / 2); background: var(--ks-field-bg); font-size: 16px; font-weight: 500; color: var(--ks-ink); transition: background-color 150ms ease-out; } #ks-account-sheet .account-icon-dropdown-logout:hover, #ks-account-sheet .account-icon-dropdown-logout:focus { background: var(--ks-field-bg-hover); } #ks-account-sheet .account-icon-dropdown-logout::before, #ks-account-sheet .account-icon-dropdown-logout::after { display: none; } /* ---------- NOVA's modal windows (questions like "Warenkorb zusammenfassen?"): the look of our sheets ---------- */ .modal-backdrop.show { opacity: .4; } .modal .modal-content { border: 0; border-radius: var(--ks-panel-radius); box-shadow: var(--ks-panel-shadow); overflow: hidden; } .modal .modal-header { display: flex; align-items: center; gap: 16px; padding: 24px 20px 8px 28px; border: 0; } .modal .modal-title { margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--ks-ink); } /* the cross sits inside the window, the same round button as on the panels */ .modal .modal-header .close { position: static; flex: none; width: 40px; height: 40px; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ks-bg); box-shadow: none; color: var(--ks-ink); font-size: 24px; font-weight: 300; line-height: 1; text-shadow: none; opacity: 1; transform: none; } .modal .modal-header .close:hover { background-color: var(--ks-g100); opacity: 1; } /* NOVA's bold "×" glyph gives way to the thin cross of our panels */ .modal .modal-header .close { background: var(--ks-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231D1D1F' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center / 18px no-repeat; } .modal .modal-header .close > span, .modal .modal-header .close::after { display: none; } .modal .modal-body { padding: 8px 28px 20px; font-size: 15px; line-height: 1.5; color: var(--ks-ink); } .modal .modal-footer { display: flex; gap: 10px; padding: 0 28px 28px; border: 0; } .modal .modal-footer > * { flex: 1 1 0; margin: 0; } /* NOVA's red "Nein" becomes the grey second button */ .modal .modal-footer .btn-danger, .modal .modal-footer .btn-danger:hover, .modal .modal-footer .btn-danger:focus { border: 0; background: var(--ks-field-bg); color: var(--ks-ink); box-shadow: none; } .modal .modal-footer .btn-danger:hover { background: var(--ks-field-bg-hover); } .modal .modal-footer .btn-danger, .modal .modal-footer .btn-primary { min-height: var(--ks-btn-h); border-radius: calc(var(--ks-btn-h) / 2); font-size: 16px; font-weight: 500; } /* ---------- Customer account (Mein Konto): NOVA's cards and tables in the panel look ---------- Content, wording and links stay JTL's; only the presentation changes. Scope: #account (account/index.tpl). */ #account h1 { margin: 8px 0 12px; font-size: 40px; font-weight: 500; letter-spacing: -.03em; line-height: 1.1; color: var(--ks-g800); text-wrap: balance; } #account .account-head-data { align-items: center; margin-bottom: 32px; font-size: 17px; line-height: 1.45; color: var(--ks-ink-2); } /* Credit ("Ihr aktuelles Guthaben"): with money on the account a bright, warm card that invites to spend it, at 0,00 € a quiet grey line */ .ks-credit { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: var(--ks-panel-radius); background: var(--ks-bg); color: var(--ks-ink); } .ks-credit-icon { flex: none; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ks-card); } .ks-credit-icon::before { content: ""; width: 26px; height: 26px; background: var(--ks-ink-2); -webkit-mask: var(--ks-ic-gift) center / contain no-repeat; mask: var(--ks-ic-gift) center / contain no-repeat; } .ks-credit-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ks-credit-label { font-size: 14px; line-height: 1.3; color: var(--ks-ink-2); } .ks-credit-value { font-size: 24px; font-weight: 500; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; } .ks-credit.is-positive { position: relative; overflow: hidden; padding: 20px 24px; background: radial-gradient(120% 140% at 100% 0%, rgba(246, 197, 163, .55) 0%, rgba(246, 197, 163, 0) 55%), linear-gradient(135deg, var(--ks-o400) 0%, var(--ks-o500) 55%, var(--ks-o600) 100%); box-shadow: 0 10px 28px rgba(184, 91, 28, .28); color: #FFFFFF; } .ks-credit.is-positive .ks-credit-icon { width: 56px; height: 56px; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); } .ks-credit.is-positive .ks-credit-icon::before { width: 30px; height: 30px; background: #FFFFFF; } .ks-credit.is-positive .ks-credit-label { font-weight: 500; color: rgba(255, 255, 255, .92); } .ks-credit.is-positive .ks-credit-value { font-size: 34px; font-weight: 500; color: #FFFFFF; text-shadow: 0 2px 8px rgba(91, 44, 14, .25); } /* one soft shine across the card when the page opens */ @media (prefers-reduced-motion: no-preference) { .ks-credit.is-positive::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 48%, transparent 66%); transform: translateX(-120%); animation: ks-credit-shine 1.4s .4s var(--ks-out) forwards; pointer-events: none; } .ks-credit.is-positive .ks-credit-icon { animation: ks-credit-pop .6s .2s var(--ks-out) both; } } @keyframes ks-credit-shine { to { transform: translateX(120%); } } @keyframes ks-credit-pop { from { transform: scale(.6) rotate(-12deg); opacity: 0; } } /* The overview cards: no shadows, one colour for all of them (the shop blue). The card is its palest shade, the rows inside sit on white zones, the icon and links use the blue itself. */ #account .account-data-item { --ks-card-tint: var(--ks-o50); --ks-card-zone: var(--ks-g50); --ks-card-accent: var(--ks-link); margin-bottom: 24px; } #account .account-data-item-address { --ks-ic: var(--ks-ic-data); } #account .account-data-shipping-address { --ks-ic: var(--ks-ic-address); } #account .account-data-item-orders { --ks-ic: var(--ks-ic-orders); } #account .account-data-item-rma { --ks-ic: var(--ks-ic-returns); } #account .account-data-item-wishlist { --ks-ic: var(--ks-ic-wish); } #account .account-data-item-comparelist { --ks-ic: var(--ks-ic-compare); } #account .account-data-item > .card { height: 100%; border: 0; border-radius: var(--ks-panel-radius); background: var(--ks-card-tint); box-shadow: none; overflow: hidden; } #account .account-data-item .card-header { padding: 22px 24px 6px; border: 0; background: none; } #account .account-data-item .card-header .h3 { margin: 0; font-size: 19px; font-weight: 500; letter-spacing: -.02em; } #account .account-data-item .card-header .h3 a { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding-left: 52px; color: var(--ks-ink); text-decoration: none; } #account .account-data-item .card-header .h3 a:hover { color: var(--ks-card-accent); } /* a white round badge, the line icon in the card's colour on top (the icon file is used as a mask) */ #account .account-data-item .card-header .h3 a::before, #account .account-data-item .card-header .h3 a::after { content: ""; position: absolute; top: 50%; border-radius: 50%; transform: translateY(-50%); } #account .account-data-item .card-header .h3 a::before { left: 0; width: 40px; height: 40px; background: #FFFFFF; } #account .account-data-item .card-header .h3 a::after { left: 10px; width: 20px; height: 20px; border-radius: 0; background: var(--ks-card-accent); -webkit-mask: var(--ks-ic, var(--ks-ic-account)) center / contain no-repeat; mask: var(--ks-ic, var(--ks-ic-account)) center / contain no-repeat; } #account .account-data-item .card-header .font-size-sm a { font-size: 15px; font-weight: 500; color: var(--ks-card-accent); text-decoration: none; } #account .account-data-item .card-header .font-size-sm a:hover { text-decoration: underline; text-underline-offset: 3px; } #account .account-data-item .card-body { margin: 6px 12px 12px; padding: 16px; border-radius: 14px; background: var(--ks-card-zone); font-size: 15px; color: var(--ks-ink-2); } #account .account-data-item .card-body p:last-child { margin-bottom: 0; } /* buttons inside a coloured card: white, the card's colour as text */ #account .account-data-item .card-body .btn-outline-secondary, #account .account-data-item .card-body .btn-outline-secondary:not(:disabled):not(.disabled):active { background: var(--ks-card-tint); color: var(--ks-card-accent); } #account .account-data-item .card-body .btn-outline-secondary:hover, #account .account-data-item .card-body .btn-outline-secondary:focus { background: var(--ks-tint-bg-hover); color: var(--ks-card-accent); } /* rows inside the cards: each one a white zone on the pale card, a small gap between them */ #account .account-data-item .table-responsive { padding: 6px 12px 12px; } #account .account-data-item .table { margin: 0; background: none; border-collapse: separate; border-spacing: 0 6px; } #account .account-data-item .table td { padding: 14px 16px; border: 0; background: var(--ks-card-zone); font-size: 15px; color: var(--ks-ink); vertical-align: middle; } #account .account-data-item .table td:first-child { border-radius: 14px 0 0 14px; } #account .account-data-item .table td:last-child { border-radius: 0 14px 14px 0; } #account .account-data-item .table-hover tbody tr:hover { background: none; } #account .account-data-item .table-hover tbody tr:hover td { background: var(--ks-card-zone); } #account .account-data-item .table small { margin-top: 2px; font-size: 13px; color: var(--ks-ink-2); } #account .account-data-item .table td a { color: var(--ks-ink-2); } #account .account-data-item .table tr:hover td a { color: var(--ks-card-accent); } #account .account-data-item .fa-pencil-alt { width: 20px; height: 20px; } /* empty cards: the message left like in every other card, the action as a grey button below it */ #account .account-data-item .card-body.d-flex { align-items: flex-start !important; justify-content: flex-start !important; text-align: left; } #account .account-comparelist .card-body { align-items: flex-start; text-align: left; } #account .account-data-item .card-body .btn { margin-top: 12px; } #account .account-data-item .card-body .btn .fa { display: none; } /* "Kundenkonto löschen" as a pale red tinted button, "Abmelden" as the grey second button */ #account .btn-row { align-items: center; margin-top: 16px; } #account .btn-row .btn-outline-danger, #account .btn-row .btn-outline-danger:not(:disabled):not(.disabled):active { display: inline-flex; align-items: center; justify-content: center; min-height: var(--ks-btn-h); padding: 4px 28px; border: 0; border-radius: calc(var(--ks-btn-h) / 2); font-size: 16px; font-weight: 500; background: var(--ks-error-tint-bg); box-shadow: none; color: var(--ks-error); } #account .btn-row .btn-outline-danger:hover, #account .btn-row .btn-outline-danger:focus { background: var(--ks-error-tint-bg-hover); color: var(--ks-error); box-shadow: none; } #account .btn-row .btn-outline-danger .fa, #account .btn-row a[href*="logout=1"] .fa { display: none; } #account .btn-row a.btn-primary[href*="logout=1"] { border: 0; background: var(--ks-field-bg); color: var(--ks-ink); box-shadow: none; } #account .btn-row a.btn-primary[href*="logout=1"]:hover, #account .btn-row a.btn-primary[href*="logout=1"]:focus { background: var(--ks-field-bg-hover); color: var(--ks-ink); } /* sub pages: "Alle mit * markierten Felder ...", section labels, notes */ #account .required-info, #account .ks-required-info { margin-bottom: 16px; font-size: 13px; color: var(--ks-ink-2); } #account .alert-info, #account .alert-secondary { border: 0; border-radius: 14px; background: var(--ks-bg); color: var(--ks-ink-2); font-size: 15px; } /* "Meine Lieferadressen": the list (JTL's DataTables) next to the form */ #account .dataTables_wrapper { font-size: 14px; color: var(--ks-ink-2); } #account .dataTables_wrapper > .row:first-child { align-items: center; margin-bottom: 12px; } #account .dataTables_length label, #account .dataTables_filter label { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: var(--ks-ink-2); } #account .dataTables_length select { display: flex; align-items: center; width: 120px; flex: none; } #account .dataTables_filter { display: flex; justify-content: flex-end; } #account .dataTables_filter input { margin: 0; } #account table.dataTable { margin: 0 !important; border: 0; } #account table.dataTable td { padding: 14px 16px; border: 0; border-top: 1px solid var(--ks-bg); font-size: 15px; color: var(--ks-ink); } #account table.dataTable td.dataTables_empty { padding: 28px 16px; border: 0; border-radius: 14px; background: var(--ks-bg); text-align: center; color: var(--ks-ink-2); } #account .dataTables_info { padding-top: 14px; font-size: 13px; color: var(--ks-ink-2); } #account .dataTables_paginate { padding-top: 10px; } #account .dataTables_paginate .pagination { justify-content: flex-end; gap: 4px; margin: 0; } #account .dataTables_paginate .page-link { border: 0; border-radius: 980px; background: none; font-size: 14px; color: var(--ks-link); } #account .dataTables_paginate .page-item.active .page-link { background: var(--ks-tint-bg); color: var(--ks-tint-ink); font-weight: 500; } #account .dataTables_paginate .page-link::after, #account .dataTables_paginate .page-link::before { display: none; } #account .dataTables_paginate .page-item.disabled .page-link { background: none; color: var(--ks-g400); } /* the address list: edit and delete as round icon buttons, delete in the soft red of the shop */ #account table.dataTable .btn-group { gap: 8px; } #account table.dataTable .btn-group > .btn { width: 40px; min-height: 40px; height: 40px; padding: 0; border: 0; border-radius: 50% !important; display: grid; place-items: center; background: var(--ks-field-bg); color: var(--ks-ink); box-shadow: none; } #account table.dataTable .btn-group > .btn:hover { background: var(--ks-field-bg-hover); } #account table.dataTable .btn-group > .btn-danger { background: var(--ks-error-tint-bg); color: var(--ks-error); } #account table.dataTable .btn-group > .btn-danger:hover { background: var(--ks-error-tint-bg-hover); } #account table.dataTable .btn-group .fa-times { display: inline-block; width: 18px; height: 18px; } #account table.dataTable .btn-group .fa-times::before { content: ""; display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--ks-ic-trash) center / contain no-repeat; mask: var(--ks-ic-trash) center / contain no-repeat; } #account table.dataTable .btn-show-more { min-height: 0; padding: 0; margin-top: 4px; font-size: 14px; color: var(--ks-link); } /* JTL's postcode and city fields with suggestions (typeahead): the copied hint layer takes the field colour */ .twitter-typeahead { display: block !important; width: 100%; } /* (NOVA's .bg-typeahead-fix paints the field white; the hint layer underneath stays invisible) */ .twitter-typeahead .tt-hint { color: transparent; } .twitter-typeahead .tt-input { background-color: var(--ks-field-bg) !important; } .twitter-typeahead .tt-input:hover { background-color: var(--ks-field-bg-hover) !important; } .twitter-typeahead .tt-input:focus { background-color: var(--ks-field-bg-focus) !important; } .has-error .twitter-typeahead .tt-input { background-color: var(--ks-field-bg-error) !important; } /* the label sits outside the typeahead wrapper, so NOVA's sibling rule cannot centre it at rest */ .label-slide .form-group:not(.exclude-from-label-slide) .d-flex:has(.tt-input:placeholder-shown:not(:focus)) > label { top: calc(var(--ks-field-h) / 2); transform: translateY(-50%); font-size: var(--ks-field-font); } @media (max-width: 767.98px) { #account h1 { font-size: 30px; } #account .account-head-data { margin-bottom: 24px; font-size: 15px; } #account .account-head-data > [class*="col"] + [class*="col"] { margin-top: 12px; } #account .account-data-item .card-header { padding: 18px 18px 4px; } #account .account-data-item .card-header .h3 { font-size: 17px; } #account .account-data-item .card-header .h3 a { gap: 10px; } #account .account-data-item .card-header .h3 a { min-height: 34px; padding-left: 46px; } #account .account-data-item .card-header .h3 a::before { width: 34px; height: 34px; } #account .account-data-item .card-header .h3 a::after { left: 8px; width: 18px; height: 18px; } #account .account-data-item .card-header .font-size-sm a { font-size: 14px; } .ks-credit.is-positive { padding: 18px 20px; } .ks-credit.is-positive .ks-credit-value { font-size: 30px; } #account .account-data-item .card-body { margin: 4px 8px 8px; padding: 14px; } #account .account-data-item .table-responsive { padding: 2px 8px 8px; } #account .btn-row > [class*="col"] { text-align: center; } #account .btn-row > [class*="col"] + [class*="col"] { margin-top: 16px; } #account .dataTables_filter { justify-content: flex-start; margin-top: 10px; } } /* ---------- Reviews (product page): Amazon like summary, calm review cards ---------- The pale shop blue for the summary and the call to review, the lighter zone shade for each review. */ #tab-votes #reviews-overview { align-items: stretch !important; row-gap: 16px; margin-bottom: 28px; } #tab-votes #reviews-overview > [class*="col"] { display: flex; } #tab-votes #reviews-overview > [class*="col"] > * { flex: 1 1 auto; } .ks-rv-summary, .ks-rv-cta { height: 100%; padding: 20px 22px; border-radius: var(--ks-panel-radius); background: var(--ks-o50); } .ks-rv-score { display: flex; align-items: baseline; gap: 8px; } .ks-rv-avg { font-size: 38px; font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--ks-ink); font-variant-numeric: tabular-nums; } .ks-rv-of { font-size: 15px; color: var(--ks-ink-2); } .ks-rv-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 8px 0 12px; } .ks-rv-meta .rating { font-size: 15px; } .ks-rv-count { font-size: 14px; color: var(--ks-ink-2); } .ks-rv-bars { margin: 0; } .ks-rv-bars li + li { margin-top: 0; } .ks-rv-bar > a, .ks-rv-bar > span { display: grid; grid-template-columns: 72px minmax(0, 1fr) 48px; align-items: center; gap: 12px; margin: 0 -10px; padding: 3px 10px; border-radius: 8px; font-size: 13px; color: var(--ks-ink); text-decoration: none; } .ks-rv-bar > a:hover { background: var(--ks-g50); color: var(--ks-link); text-decoration: none; } .ks-rv-bar-track { height: 6px; border-radius: 3px; background: #FFFFFF; overflow: hidden; } .ks-rv-bar-track > span { display: block; height: 100%; border-radius: 4px; background: var(--ks-star); } .ks-rv-bar-value { text-align: right; color: var(--ks-ink-2); font-variant-numeric: tabular-nums; } .ks-rv-bar.is-empty { opacity: .5; } .ks-rv-bar.is-active > span { font-weight: 500; background: var(--ks-g50); } .ks-rv-all { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--ks-link); } .ks-rv-cta { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 14px; } /* with reviews: the same star badge as the empty state, then the words and the button */ .ks-rv-cta:not(.is-empty) { align-items: center; text-align: center; } .ks-rv-cta-title { font-size: 17px; font-weight: 500; letter-spacing: -.01em; line-height: 1.35; color: var(--ks-ink); } .ks-rv-cta-note { margin: 4px 0 0; font-size: 14px; color: var(--ks-ink-2); } /* no reviews yet: one wide card, star badge, words, button on the right */ .ks-rv-cta.is-empty { flex-direction: row; align-items: center; gap: 18px; } .ks-rv-cta.is-empty .ks-rv-cta-text { flex: 1 1 auto; min-width: 0; } .ks-rv-cta.is-empty .btn { flex: none; } .ks-rv-cta-icon { flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; } .ks-rv-cta-icon::before { content: ""; width: 26px; height: 26px; background: var(--ks-star); -webkit-mask: var(--ks-ic-star) center / contain no-repeat; mask: var(--ks-ic-star) center / contain no-repeat; } .ks-rv-cta .btn { min-width: 220px; } /* "Bewertungen in allen Sprachen" and the like: a quiet note */ #tab-votes .reviews > p { margin: 0 0 16px; font-size: 14px; color: var(--ks-ink-2); } /* each review: a light card, stars and helpful votes on the left, title, text and author on the right */ #tab-votes .card.review, #tab-votes .reviews-mosthelpful { margin-bottom: 12px; border: 0; border-radius: var(--ks-panel-radius); background: var(--ks-g50); box-shadow: none; } #tab-votes .card.review > .card-body { padding: 20px 24px; } #tab-votes .reviews-mosthelpful { background: var(--ks-o50); } #tab-votes .reviews-mosthelpful .card-header { padding: 20px 24px 0; border: 0; background: none; } #tab-votes .reviews-mosthelpful .card-header .h3 { font-size: 17px; font-weight: 500; color: var(--ks-g800); } #tab-votes .reviews-mosthelpful .card-body { padding: 12px 24px 20px; } #tab-votes .review-comment .rating { font-size: 16px; } #tab-votes .review-helpful-total small { font-size: 12px; color: var(--ks-ink-2); } #tab-votes blockquote { margin: 0; padding: 0; border: 0; } #tab-votes blockquote .subheadline { display: block; margin-bottom: 4px; font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ks-ink); } #tab-votes blockquote p { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--ks-ink); } /* long reviews: six lines, then "Mehr anzeigen" (ks.js) */ #tab-votes blockquote p.is-clamped { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; line-clamp: 6; overflow: hidden; } .ks-rv-more { margin: -4px 0 10px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; color: var(--ks-link); cursor: pointer; } .ks-rv-more:hover { text-decoration: underline; text-underline-offset: 3px; } #tab-votes .blockquote-footer { display: block; font-size: 13px; line-height: 1.6; color: var(--ks-ink-2); } #tab-votes .blockquote-footer .verified-purchase, #tab-votes .blockquote-footer .has-credit-bonus { margin-left: 8px; } #tab-votes .blockquote-footer::before { display: none; } #tab-votes .blockquote-divider { display: none; } /* "Verifizierter Kauf": a green round check and the words, no badge; "Gutschein erhalten" quiet with the gift */ #tab-votes .verified-purchase, #tab-votes .has-credit-bonus { display: inline-flex; align-items: center; gap: 5px; font-weight: 500; } #tab-votes .verified-purchase { color: var(--ks-ok); } #tab-votes .verified-purchase::before { content: ""; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--ks-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 9px no-repeat; } #tab-votes .has-credit-bonus { font-weight: 400; color: var(--ks-ink-2); border: 0; background: none; } #tab-votes .has-credit-bonus::before { content: ""; flex: none; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ks-ic-gift) center / contain no-repeat; mask: var(--ks-ic-gift) center / contain no-repeat; } #tab-votes .review-reply { margin-top: 12px; padding: 14px 16px; border-radius: 14px; background: #FFFFFF; } #tab-votes .review-reply .subheadline { font-size: 14px; font-weight: 500; color: var(--ks-ink); } /* helpful / not helpful: small round buttons, the chosen one in the blue tint */ #tab-votes .review-helpful { flex-wrap: nowrap; justify-content: center; gap: 6px; margin-top: 10px; text-align: center; } #tab-votes .review-helpful .btn { width: 36px; height: 36px; min-height: 36px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: #FFFFFF; color: var(--ks-ink-2); box-shadow: none; } #tab-votes .review-helpful .btn::before, #tab-votes .review-helpful .btn::after { display: none; } #tab-votes .review-helpful .btn:hover { color: var(--ks-ink); } #tab-votes .review-helpful .btn.on-list { background: var(--ks-tint-bg); color: var(--ks-tint-ink); } #tab-votes .review-helpful b { font-size: 12px; font-weight: 500; color: var(--ks-ink-2); } /* stars and helpful votes in one line above the review, the text gets the full card width */ #tab-votes .review-comment [itemprop="review"] > .col-auto { flex: 0 0 100%; max-width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } #tab-votes .review-comment .review-helpful { margin: 0; } #tab-votes .review-comment .review-helpful > [class*="col"] { display: flex; align-items: center; gap: 4px; } /* "Wie funktionieren Bewertungen?" as a link, the page navigation in the shop look */ #tab-votes .verified-purchase-notice { min-height: 0; margin: 0 0 12px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 500; color: var(--ks-link); } #tab-votes .verified-purchase-notice:hover, #tab-votes .verified-purchase-notice:focus { background: none; color: var(--ks-link); text-decoration: underline; text-underline-offset: 3px; } #tab-votes .pagination-wrapper { align-items: center; row-gap: 12px; margin: 8px 0 16px; font-size: 14px; color: var(--ks-ink-2); } #tab-votes .pagination-wrapper .pagination { gap: 4px; margin: 0; } #tab-votes .pagination-selects select { min-width: 120px; } #tab-votes .pagination-selects select[name$="SortByDir"] { min-width: 240px; } #tab-votes .pagination-wrapper .page-link { border: 0; border-radius: 980px; background: none; color: var(--ks-link); } #tab-votes .pagination-wrapper .page-item.active .page-link { background: var(--ks-tint-bg); color: var(--ks-tint-ink); font-weight: 500; } #tab-votes .pagination-wrapper .page-link::before, #tab-votes .pagination-wrapper .page-link::after { display: none; } @media (max-width: 767.98px) { .ks-rv-summary, .ks-rv-cta { padding: 20px; } .ks-rv-avg { font-size: 40px; } .ks-rv-cta.is-empty { flex-wrap: wrap; } .ks-rv-cta.is-empty .ks-rv-cta-text { flex-basis: calc(100% - 70px); } .ks-rv-cta .btn { width: 100%; min-width: 0; } #tab-votes .card.review > .card-body { padding: 16px; } } /* ---------- Product sliders under the product ("Ähnliche Artikel", "Kunden kauften auch" ...) ---------- NOVA's centred heading between two lines becomes a plain section heading; each product a soft card */ .slick-slider-other .hr-sect { display: block; margin: 0 0 16px; font-size: 28px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; text-align: left; color: var(--ks-ink); } .slick-slider-other .hr-sect::before, .slick-slider-other .hr-sect::after { display: none; } .slick-slider-other { padding-top: 48px; } /* the sliders line up with the product sections above (NOVA puts them in a full width container) */ #result-wrapper .recommendations { max-width: 1250px; margin-left: auto; margin-right: auto; padding-left: 16px; padding-right: 16px; } .slick-slider-other .hr-sect { padding-left: 6px; } .slick-slider-other .product-wrapper { padding: 6px; } .slick-slider-other .product-wrapper > a { display: block; height: 100%; padding: 12px 12px 16px; border-radius: 16px; background: var(--ks-bg); text-align: left; text-decoration: none; transition: background-color 150ms ease-out; } .slick-slider-other .product-wrapper > a:hover { background: var(--ks-g100); } .slick-slider-other .product-wrapper .item-slider { border-radius: 10px; overflow: hidden; } .slick-slider-other .product-wrapper img { mix-blend-mode: multiply; } .slick-slider-other .item-slider-desc { margin-top: 10px; font-size: 14px; line-height: 1.35; color: var(--ks-ink); } .slick-slider-other .item-slider-price .price { font-size: 15px; font-weight: 500; } /* ---------- Footer: trust band, link columns, one legal line, copyright ---------- Light grey like Apple's footer, small calm type; the only colour is the blue of links on hover and the withdrawal button */ #footer { margin-top: 64px; padding: 0; border: 0; background: var(--ks-bg); color: var(--ks-ink-2); font-size: 13px; } #footer > .container { max-width: 1650px; padding-top: 32px; padding-bottom: 8px; } #footer, #footer .productlist-filter-headline, #footer .box-normal-link { font-family: var(--ks-font); } /* four facts with our line icons: a band of its own from screen edge to screen edge on the darkest colour of the page's palette (ks.js initMosaic, the same as the start page's language mosaic; dark grey until the script runs), its content on the width of the central block like the footer below (owner 2026-11-10) */ .ks-trust { --ks-tr-bg: var(--ks-trust-bg, var(--ks-g900)); --ks-tr-ink: #FFFFFF; --ks-tr-ink-2: rgba(255, 255, 255, .72); --ks-tr-disc: rgba(255, 255, 255, .12); position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: -32px 0 64px; padding: 48px 0; border: 0; background: var(--ks-tr-bg); box-shadow: 0 0 0 100vmax var(--ks-tr-bg); clip-path: inset(0 -100vmax); transition: background-color .2s ease, box-shadow .2s ease; } /* on the start page the band follows the white FAQ band directly, without a strip of page grey in between */ body:has(.ks-home-seo) #footer { margin-top: 0; } .ks-trust-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center; } .ks-trust-item::before { content: ""; grid-column: 1; grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 50%; background: var(--ks-tr-disc); } .ks-trust-item::after { content: ""; grid-row: 1 / 3; grid-column: 1; justify-self: center; width: 26px; height: 26px; background: var(--ks-tr-ink); -webkit-mask: var(--ks-ti) center / contain no-repeat; mask: var(--ks-ti) center / contain no-repeat; } .ks-trust-item strong { grid-column: 2; grid-row: 1; align-self: end; font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--ks-tr-ink); } .ks-trust-item span { grid-column: 2; grid-row: 2; align-self: start; font-size: 15px; line-height: 1.4; color: var(--ks-tr-ink-2); } /* JTL's link groups as columns (owner 2026-11-10, prototype _preview/footer.html): headings 15, links 14, more air */ .ks-ft-cols { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 48px; } /* contact from JTL's company data: the question first, phone and mail large with our line icons, the address below */ #footer .ks-ft-contact .ks-ft-ask { margin: 0 0 14px; font-size: 22px; font-weight: 500; line-height: 1.2; letter-spacing: -.02em; color: var(--ks-g900); } .ks-ft-contact address { margin: 18px 0 0; font-size: 13px; font-style: normal; line-height: 1.55; color: var(--ks-ink-2); } .ks-ft-contact-link { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; padding: 0; font-size: 17px; font-weight: 500; color: var(--ks-g900); text-decoration: none; transition: color 150ms ease-out; } .ks-ft-contact-link::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ks-ti) center / contain no-repeat; mask: var(--ks-ti) center / contain no-repeat; } .ks-ft-contact-link:hover { color: var(--ks-link); text-decoration: none; } .ks-ft-note { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--ks-ink-2); } .ks-ft-note a { color: var(--ks-ink-2); text-decoration: underline; text-underline-offset: 2px; } /* newsletter: JTL's consent text, one field with the button inside the row */ .ks-ft-nl-form { margin-top: 12px; } .ks-ft-nl-row { display: flex; gap: 8px; } .ks-ft-nl-row .form-control { flex: 1 1 auto; min-width: 0; height: 44px; padding: 0 16px; background: #FFFFFF; font-size: 14px; } .ks-ft-nl-row .btn { flex: none; min-height: 44px; height: 44px; padding: 0 18px; font-size: 14px; } /* "Beliebte Suchen": a plain list in two columns, one size like the other links */ .ks-ft-cloud { columns: 2; column-gap: 24px; margin: 0; } .ks-ft-cloud li { break-inside: avoid; } .ks-ft-cloud a { display: block; padding: 4px 0; font-size: 14px; line-height: 1.4; color: var(--ks-ink-2); text-decoration: none; transition: color 150ms ease-out; } .ks-ft-cloud a:hover { color: var(--ks-link); text-decoration: none; } /* shipping and payment (owner 2026-11-10): every mark in its own colours on an equal white tile, all tiles 44 px high; the logos are our SVG copies (img/logos, Bootstrap getFooterData). DHL and Deutsche Post stand only on their yellow, so the logo with its yellow ground is the tile; the methods without a brand as a tile with icon and name */ .ks-ft-logos { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 20px 56px; margin-top: 56px; padding: 32px 0; border-top: 1px solid var(--ks-g200); } .ks-ft-logo-title { margin-bottom: 12px; font-size: 15px; font-weight: 600; color: var(--ks-g900); } .ks-ft-pay .ks-ft-logo-title { text-align: right; } .ks-ft-logo-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; } .ks-ft-pay .ks-ft-logo-list { justify-content: flex-end; } .ks-ft-tile { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border-radius: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ks-g200); transition: box-shadow 150ms ease-out; } .ks-ft-tile:has(a):hover { box-shadow: inset 0 0 0 1px var(--ks-g500); } .ks-ft-tile a { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 100%; color: inherit; text-decoration: none; } .ks-ft-tile a:hover { text-decoration: none; } /* every brand tile is the same box, 112 x 40 (owner 2026-11-10); the logo fits inside in its own proportions */ .ks-ft-tile:has(img) { width: 112px; padding: 0 12px; } .ks-ft-tile img { display: block; width: auto; height: auto; max-width: 100%; max-height: 20px; } .ks-ft-tile img[src*="apple-pay"] { max-height: 22px; } /* DHL and Deutsche Post only on their yellow: the tile is that yellow and the logo, whose own ground is the same yellow, spans its width */ .ks-ft-tile.is-yellow { padding: 0; overflow: hidden; background: #FFCC00; box-shadow: none; } .ks-ft-tile.is-yellow img { width: 100%; max-height: none; } .ks-ft-pay-name { width: 40px; padding: 0; color: var(--ks-g800); } .ks-ft-pay-name::before, .ks-ft-pay-name > a::before { content: ""; flex: none; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ks-pi, var(--ks-ic-card)) center / contain no-repeat; mask: var(--ks-pi, var(--ks-ic-card)) center / contain no-repeat; } .ks-ft-pay-name:has(> a)::before { display: none; } .ks-ft-pay-name[data-pay="za_ueberweisung_jtl"] { --ks-pi: var(--ks-ic-bank); } .ks-ft-pay-name[data-pay*="kreditkarte"] { --ks-pi: var(--ks-ic-card); } .ks-ft-pay-name[data-pay="za_rechnung_jtl"] { --ks-pi: var(--ks-ic-invoice); } .ks-ft-pay-name[data-pay="za_barzahlung_jtl"] { --ks-pi: var(--ks-ic-cash); } /* shipping methods without a logo (pickup and the like): the parcel icon */ .ks-ft-pay-name[data-ship] { --ks-pi: var(--ks-ic-orders); } #footer .box { margin: 0; padding: 0; border: 0; background: none; } /* one style for every footer column heading, inside a JTL box (Informationen) or our own column (Kontakt, Beliebte Suchen) */ #footer .productlist-filter-headline { margin: 0 0 16px; padding: 0; border: 0; font-size: 15px; font-weight: 600; letter-spacing: -.005em; text-transform: none; color: var(--ks-g900); } #footer .box .nav-link { padding: 4px 0; font-size: 14px; line-height: 1.4; color: var(--ks-ink-2); text-decoration: none; } #footer .box .nav-link:hover { color: var(--ks-link); text-decoration: none; } #footer .box-normal-hr { display: none; } /* VAT note and the withdrawal button in one line */ #footer .footnote-vat { margin: 32px 0 0; padding: 18px 0; border-top: 1px solid var(--ks-g200); } /* centred (owner 2026-11-10): the cookie button bottom left and the scroll-up button bottom right would cover the edges */ .ks-ft-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 32px; text-align: center; } .ks-ft-vat { font-size: 12px; color: var(--ks-ink-2); } .ks-ft-copy { margin-right: 20px; } .ks-ft-vat a { color: var(--ks-ink-2); text-decoration: underline; text-underline-offset: 2px; } .ks-ft-legal .mt-3 { margin: 0 !important; } .ks-ft-legal .withdrawal-link { width: auto; min-height: 40px; padding: 0 20px; border-radius: 20px; background: var(--ks-tint-bg); color: var(--ks-tint-ink); font-size: 17px; font-weight: 500; border: 0; box-shadow: none; } .ks-ft-legal .withdrawal-link:hover { background: var(--ks-tint-bg-hover); color: var(--ks-tint-ink); } /* copyright: no dark strip, one quiet line */ #copyright { padding: 14px 0 24px; border: 0; background: var(--ks-bg); color: var(--ks-ink-2); font-size: 12px; } #copyright > .container-fluid { max-width: 1650px; } #copyright .col { text-align: left; } #copyright a, #copyright #system-credits a { color: var(--ks-ink-2); text-decoration: underline; text-underline-offset: 2px; } @media (max-width: 1199.98px) { .ks-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } .ks-ft-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } .ks-ft-logos { grid-template-columns: minmax(0, 1fr); } .ks-ft-pay .ks-ft-logo-title { text-align: left; } .ks-ft-pay .ks-ft-logo-list { justify-content: flex-start; } } @media (max-width: 767.98px) { #footer > .container { padding-top: 28px; } .ks-trust { grid-template-columns: minmax(0, 1fr); gap: 20px; margin: -28px 0 24px; padding: 32px 0; } .ks-trust-item { grid-template-columns: 48px minmax(0, 1fr); } .ks-trust-item::before { width: 48px; height: 48px; } .ks-trust-item strong { font-size: 16px; } .ks-trust-item span { font-size: 14px; } /* JTL folds each link group on phones: the heading becomes a row with a chevron */ .ks-ft-cols { grid-template-columns: minmax(0, 1fr); gap: 0; } .ks-ft-col { border-bottom: 1px solid var(--ks-g200); } /* contact and newsletter are not folded: they stay open as their own blocks */ .ks-ft-contact, .ks-ft-popular { padding: 16px 0; } .ks-ft-contact .productlist-filter-headline, .ks-ft-popular .productlist-filter-headline { display: block !important; } .ks-ft-col:last-child { border-bottom: 0; } #footer .footnote-vat { margin-top: 0; } #footer .box-normal-link { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; font-size: 17px; font-weight: 600; color: var(--ks-g800); text-decoration: none; } #footer .box-normal-link::after { content: ""; font-size: 0; border: 0; width: 8px; height: 8px; margin: 0 4px 0 0; border-right: 2px solid var(--ks-ink-2); border-bottom: 2px solid var(--ks-ink-2); transform: rotate(45deg); transition: transform 200ms var(--ks-out); } #footer .box-normal-link[aria-expanded="true"]::after { transform: rotate(-135deg); } #footer .box .nav { padding-bottom: 12px; } /* room under the line, so at the very end the round cookie and scroll-up buttons sit below it, not next to it */ .ks-ft-legal { flex-direction: column; align-items: center; padding-bottom: 56px; } .ks-ft-copy { display: block; margin: 0 0 4px; } } /* product sliders: cards grow with their text, so long names never push the price out */ .slick-slider-other .slick-track { display: flex !important; } .slick-slider-other .slick-slide { height: auto !important; } .slick-slider-other .slick-slide > a { height: 100%; } /* ---------- Payment page ("Zahlungsmöglichkeiten", JTL page text with .ks-pay markup) ---------- Lead, the payment logos (the footer's, copied by ks.js), one fold-out card per payment method, a short FAQ */ .ks-pay-lead { margin: 0 0 6px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.35; color: var(--ks-ink); } .ks-pay-lead-sub { margin: 0 0 24px; font-size: 16px; line-height: 1.5; color: var(--ks-ink-2); } /* the method's logo from JTL (via ks.js) in a white tile at the start of each card */ .ks-pay-logo { flex: none; align-self: center; width: 84px; height: 44px; margin-right: 6px; border-radius: 10px; display: grid; place-items: center; background: #FFFFFF; } .ks-pay-logo img { max-width: 64px; max-height: 22px; width: auto; height: auto; object-fit: contain; filter: brightness(0); opacity: .85; } .ks-pay-logo img[src*="apple-pay"] { filter: grayscale(1) contrast(4) brightness(1.15); mix-blend-mode: multiply; } .ks-pay-logo.is-icon::before { content: ""; width: 26px; height: 26px; background: var(--ks-ink); opacity: .85; -webkit-mask: var(--ks-pi, var(--ks-ic-card)) center / contain no-repeat; mask: var(--ks-pi, var(--ks-ic-card)) center / contain no-repeat; } .ks-pay-logo[data-pay="za_ueberweisung_jtl"] { --ks-pi: var(--ks-ic-bank); } .ks-pay-logo[data-pay*="kreditkarte"] { --ks-pi: var(--ks-ic-card); } .ks-pay-logo[data-pay="za_rechnung_jtl"] { --ks-pi: var(--ks-ic-invoice); } .ks-pay-logo[data-pay="za_barzahlung_jtl"] { --ks-pi: var(--ks-ic-cash); } .ks-pay-h2 { margin: 40px 0 14px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; color: var(--ks-g800); } /* one card per payment method: name and a one-line promise, opens to the steps */ /* the open card keeps its own bottom padding, so the inner zone never reaches its rounded corners */ .ks-pay-item[open], .ks-pay-faq[open] { padding-bottom: 12px; } .ks-pay-body > ul:last-child, .ks-pay-body > ol:last-child { margin-bottom: 12px; } .ks-pay-item, .ks-pay-faq { margin-bottom: 10px; border-radius: 16px; background: var(--ks-o50); scroll-margin-top: calc(var(--ks-header-h, 69px) + 16px); } .ks-pay-item > summary, .ks-pay-faq > summary { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 14px 56px 14px 14px; cursor: pointer; list-style: none; } .ks-pay-item > summary::-webkit-details-marker, .ks-pay-faq > summary::-webkit-details-marker { display: none; } .ks-pay-item > summary::after, .ks-pay-faq > summary::after { content: ""; position: absolute; top: 50%; right: 22px; width: 9px; height: 9px; margin-top: -7px; border-right: 2px solid var(--ks-ink-2); border-bottom: 2px solid var(--ks-ink-2); transform: rotate(45deg); transition: transform 200ms var(--ks-out), margin 200ms var(--ks-out); } .ks-pay-item[open] > summary::after, .ks-pay-faq[open] > summary::after { margin-top: -2px; transform: rotate(-135deg); } .ks-pay-name { grid-column: 2; font-size: 17px; font-weight: 500; color: var(--ks-ink); } .ks-pay-item > summary .ks-pay-logo { grid-row: 1 / 3; } .ks-pay-teaser { grid-column: 2; font-size: 14px; color: var(--ks-ink-2); } .ks-pay-faq > summary { display: flex; padding: 18px 56px 18px 22px; } .ks-pay-body { margin: 0 12px; padding: 18px 20px 6px; border-radius: 12px; background: var(--ks-g50); font-size: 15px; line-height: 1.5; color: var(--ks-ink); } .ks-pay-body > p { margin: 0 0 14px; } .ks-pay-body h3 { margin: 0 0 8px; font-size: 14px; font-weight: 500; color: var(--ks-g800); } .ks-pay-body ol, .ks-pay-body ul { margin: 0 0 16px; padding-left: 20px; } .ks-pay-body li { margin-bottom: 4px; } .ks-pay-body li::marker { color: var(--ks-ink-2); } .ks-pay-faq > summary { font-size: 16px; font-weight: 500; color: var(--ks-ink); } .ks-pay-faq > p { margin: 0 12px; padding: 16px 20px; margin-bottom: 0; border-radius: 12px; background: var(--ks-g50); font-size: 15px; line-height: 1.5; color: var(--ks-ink); } @media (max-width: 767.98px) { .ks-pay-lead { font-size: 18px; } .ks-pay-item > summary { padding: 12px 44px 12px 12px; } .ks-pay-faq > summary { padding: 16px 44px 16px 18px; } .ks-pay-logo { width: 64px; height: 40px; } .ks-pay-logo img { max-width: 50px; } .ks-pay-body { padding: 16px 16px 4px; } } /* ---------- "Added to cart" (pushed success): window and card share one layout ---------- */ .ks-ps-top { padding: 28px 32px 24px; } .ks-ps.is-card { margin-bottom: 32px; border-radius: var(--ks-panel-radius); background: var(--ks-card); box-shadow: var(--ks-shadow); overflow: hidden; } /* headline: a pale green bar as tall as the buttons, text centred; in the window the close button sits at its right end */ .ks-ps-note { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--ks-btn-h); margin: 0 0 24px; padding: 8px 60px; border-radius: calc(var(--ks-btn-h) / 2); background: #E8F4EC; color: var(--ks-ok); text-align: center; } .ks-ps-note::before { content: ""; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--ks-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 13px no-repeat; } .ks-ps-note-text { margin: 0; font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.3; color: inherit; } .ks-ps-note .ks-sheet-close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: rgba(255, 255, 255, .75); color: var(--ks-ok); } .ks-ps-note .ks-sheet-close:hover { background: #FFFFFF; } /* picture | name and choices | price and buttons */ .ks-ps-main { display: grid; grid-template-columns: 112px minmax(0, 1fr) 300px; gap: 24px; align-items: start; } .ks-ps-img { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 14px; background: var(--ks-bg); overflow: hidden; } .ks-ps-img img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; mix-blend-mode: multiply; } .ks-ps-name-link { display: block; margin-bottom: 10px; font-size: 17px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--ks-ink); } .ks-ps-name-link:hover { color: var(--ks-link); } /* what was chosen: one line per characteristic, name in bold */ .ks-ps-chars { margin: 0 0 8px; font-size: 14px; line-height: 1.45; color: var(--ks-ink); } .ks-ps-chars li { margin-bottom: 2px; } .ks-ps-name { font-weight: 500; } .ks-ps-name::after { content: ":"; } .ks-ps-value .ks-dot { display: inline-block; vertical-align: -4px; margin-right: 4px; } /* reference data in one quiet line */ .ks-ps-ref { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 0; font-size: 12px; color: var(--ks-ink-2); } .ks-ps-price { margin-bottom: 12px; font-size: 24px; font-weight: 500; letter-spacing: -.02em; text-align: right; color: var(--ks-ink); } .ks-ps-qty { margin-right: 6px; font-size: 15px; font-weight: 400; color: var(--ks-ink-2); } .ks-ps-buttons { display: grid; gap: 10px; } .ks-ps-buttons .btn { margin: 0; white-space: nowrap; } .ks-btn-sum { margin-left: 4px; font-weight: 500; opacity: .85; } .ks-btn-sum::before { content: "·"; margin-right: 6px; } /* free shipping: a thin bar with JTL's sentence below; orange while filling, green when reached */ .ks-fs { margin: 0; } .ks-ps-aside .ks-fs { margin-top: 16px; } .ks-fs-bar { height: 4px; border-radius: 99px; background: rgba(0, 0, 0, .08); overflow: hidden; } .ks-fs-bar span { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--ks-o400), var(--ks-o500)); transition: width 600ms var(--ks-out); } .ks-fs-text { margin: 6px 0 0; font-size: 13px; line-height: 1.4; color: var(--ks-ink-2); } .ks-ps-aside .ks-fs-text { text-align: center; } .ks-fs.is-reached .ks-fs-bar span { background: var(--ks-ok); } .ks-fs.is-reached .ks-fs-text { color: var(--ks-ok); } /* "Kunden kauften dazu": light grey band with white cards */ /* NOVA hides the recommendations on phones; here they are the point of the window */ #pushed-success .ks-ps-xsell { display: block; padding: 24px 32px 28px; border: 0; background: var(--ks-bg); } .ks-ps-xsell-title { margin: 0 0 12px; font-size: 19px; font-weight: 500; letter-spacing: -.02em; color: var(--ks-ink); } .ks-ps-xsell .product-wrapper { position: relative; padding: 6px; } .ks-ps-xsell .product-wrapper > a { display: block; height: 100%; padding: 10px 10px 16px; border-radius: 14px; background: var(--ks-card); box-shadow: var(--ks-shadow); text-align: left; } .ks-ps-xsell .item-slider-desc { font-size: 12px; color: var(--ks-ink-2); margin-top: 4px; } .ks-slide-variant { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 16px; font-weight: 500; color: var(--ks-ink); } .ks-quick-add { position: absolute; right: 16px; bottom: 18px; width: 36px; height: 36px; border: 0; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(180deg, var(--ks-buy-top), var(--ks-buy-base)); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px rgba(var(--ks-buy-glow), .35); cursor: pointer; transition: transform 150ms var(--ks-out), background-color 150ms ease-out; } .ks-quick-add:hover { transform: scale(1.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 16px rgba(var(--ks-buy-glow), .45); } .ks-quick-add:active { transform: scale(.94); } .ks-quick-add svg { width: 18px; height: 18px; } /* while JTL adds the item */ .io-loading .ks-quick-add { pointer-events: none; opacity: .6; } @media (max-width: 767.98px) { .ks-sheet-side { border-radius: 0; } .ks-sheet-head { padding: 14px 14px 8px 20px; } .ks-cart-items { padding: 0 20px; } #ks-cart-sheet .dropdown-body { padding: 14px 20px 20px; } .ks-sheet-center { width: 100vw; max-width: 100vw; max-height: 100%; height: 100%; margin: 0; border-radius: 0; } .ks-ps-top { padding: 20px 20px 18px; } /* two lines at most on a phone: no check icon, slightly smaller text */ .ks-ps-note { margin-bottom: 16px; padding: 8px 52px; } .ks-ps-note::before { display: none; } .ks-ps-note-text { font-size: 14px; } .ks-ps-main { grid-template-columns: 80px minmax(0, 1fr); gap: 14px 16px; } .ks-ps-img { width: 80px; height: 80px; } .ks-ps-aside { grid-column: 1 / -1; } .ks-ps-price { text-align: left; } #pushed-success .ks-ps-xsell { padding: 20px; } } @media (min-width: 768px) and (max-width: 991.98px) { .ks-ps-main { grid-template-columns: 96px minmax(0, 1fr); } .ks-ps-img { width: 96px; height: 96px; } .ks-ps-aside { grid-column: 2; } .ks-ps-price { text-align: left; } } /* Product names and prices in sliders (cross-selling, "Kunden kauften dazu", similar items) like the product cards */ .productbox-title a, .productbox-title a:hover, .product-wrapper > a, .product-wrapper > a:hover { color: var(--ks-ink); text-decoration: none; } .productbox-title a, .productbox-title a:hover { color: var(--ks-g800); } .item-slider-desc { display: block; margin-top: 10px; font-size: 14px; line-height: 1.35; color: var(--ks-ink); text-decoration: none; } .item-slider-price .price, .productbox .price, .productbox .price span { color: var(--ks-ink); } .item-slider-price .price { font-size: 15px; font-weight: 500; margin-top: 4px; } .product-wrapper .item-slider.square-image { border-radius: 12px; overflow: hidden; } /* ---------- Product page ---------- */ .ks-pd-head { padding-top: 0; padding-bottom: 16px; } .ks-pd-title { margin: 0; font-size: clamp(24px, 2.2vw, 28px); font-weight: 400; line-height: 1.15; letter-spacing: -.025em; } .ks-pd-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 10px; font-size: 14px; color: var(--ks-ink-2); } .ks-pd-rating { display: inline-flex; align-items: center; gap: 6px; color: var(--ks-ink-2); text-decoration: none; } .ks-pd-rating:hover { color: var(--ks-ink); text-decoration: none; } @media (min-width: 992px) { /* the gallery stays in view while the buy column scrolls */ #product-offer .product-gallery { position: sticky; top: calc(var(--ks-header-h, 69px) + 16px); align-self: flex-start; } } /* Buy column kept compact so price, variations and the buy button fit on a laptop screen */ #product-offer .product-info .price_wrapper { margin-bottom: 4px; } #product-offer .product-info .price_wrapper .price { margin-bottom: 2px; font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; font-weight: 500; letter-spacing: -.02em; color: var(--ks-ink); } #product-offer .product-info .price_wrapper .instead-of, #product-offer .product-info .price_wrapper .old-price { display: block; margin-top: 2px; font-size: 14px; } #product-offer .product-info .product-offer > .row { margin-bottom: 8px; } #product-offer .product-info .stock-information { margin: 8px 0 14px; padding-top: 8px; padding-bottom: 8px; } #product-offer .product-info .stock-information ul, #product-offer .product-info .stock-information .delivery-status { margin: 0; font-size: 14px; line-height: 1.4; } #product-offer .product-info .stock-information .status { font-size: 14px; } #product-offer .product-info .stock-information .question-on-item { display: none; } /* Price and availability in one band: availability on the left edge, the price on the right edge in Temu orange (row-reverse keeps JTL's markup order); one line under the band */ #product-offer .product-info .product-offer > div.row:first-of-type { flex-direction: row-reverse; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; margin-left: 0; margin-right: 0; margin-bottom: 14px; padding: 4px 0 14px; border-bottom: 1px solid var(--ks-line); } #product-offer .product-info .product-offer > div.row:first-of-type > .col:first-child, #product-offer .product-info .product-offer > div.row:first-of-type > .col-12 { padding-left: 0; padding-right: 0; } #product-offer .product-info .product-offer > div.row:first-of-type > .col:first-child { flex: 0 0 auto; width: auto; max-width: none; text-align: right; } #product-offer .product-info .product-offer > div.row:first-of-type > .col-12 { flex: 0 1 auto; min-width: 0; max-width: none; width: auto; } #product-offer .product-info .product-offer > div.row:first-of-type .price_wrapper { margin-bottom: 0; } #product-offer .product-info .product-offer > div.row:first-of-type .price_wrapper .price { color: var(--ks-o500); font-weight: 500; } #product-offer .product-info .product-offer > div.row:first-of-type .stock-information { margin: 0; padding: 0; border-top: 0; border-bottom: 0; } /* "inkl. 19% USt., zzgl. Versand": required, but small and quiet, like at large shops */ #product-offer .vat_info, #product-offer .vat_info a { font-size: 12px; color: var(--ks-ink-2); } #product-offer .vat_info a { text-decoration: underline; text-underline-offset: 2px; } #product-offer .product-info .variations { margin-bottom: 4px; } #product-offer .product-info .variations .form-group, #product-offer .product-info .variations dl { margin-bottom: 12px; } #product-offer .product-info .variations .swatches-image { width: 48px; height: 48px; padding: 3px; } #product-offer .product-info .variations .swatches-image img { width: 100%; height: 100%; padding: 0; object-fit: cover; } /* NOVA gives every choice a sixth of the column (min-width with !important), which spread the colours far apart */ #product-offer .product-info .variations .js-slider-items { gap: 8px; margin: 0; } #product-offer .product-info .variations .js-slider-item { flex: 0 0 auto; width: auto !important; min-width: 0 !important; max-width: none; padding: 0; } /* Variation choices (colour images and text like "14x14 mm"): rounded, the chosen one with a clear dark ring */ #product-offer .variations label.swatches { border: 1px solid var(--ks-line); border-radius: 12px; box-shadow: none; transition: border-color 150ms ease-out, box-shadow 150ms ease-out; } #product-offer .variations label.swatches:hover { border-color: var(--ks-g500); } #product-offer .variations label.swatches-image .square-image, #product-offer .variations label.swatches-image img { border-radius: 8px; overflow: hidden; } #product-offer .variations label.swatches:has(input:checked), #product-offer .variations label.swatches.active { border-color: var(--ks-ink); box-shadow: 0 0 0 1.5px var(--ks-ink) inset; } .ks-pd-short { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--ks-line); font-size: var(--ks-text); line-height: var(--ks-text-lh); } .ks-pd-short ul { padding-left: 1.1em; margin: 0; } .ks-pd-short li { margin-bottom: 3px; } .ks-pd-question { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 0; border: 0; background: none; font-size: 14px; color: var(--ks-link); cursor: pointer; } /* the same speech bubble as on the gallery and in the bottom bar */ .ks-pd-question svg { flex: none; width: 20px; height: 20px; } .ks-pd-question:hover { text-decoration: underline; text-underline-offset: 3px; } /* sections follow each other at one step (64px from the last line to the next heading): no bottom padding, no trailing margins from NOVA's #result-wrapper .desc (2rem) and the last paragraph */ .ks-pd-sections .ks-desc-block { padding-top: 64px; padding-bottom: 0; scroll-margin-top: calc(var(--ks-header-h, 69px) + 16px); } .ks-pd-sections .ks-desc-block:last-child { padding-bottom: 16px; } #result-wrapper .ks-pd-sections .ks-desc-block .desc { margin-bottom: 0; } .ks-pd-sections .ks-desc-block .ks-desc > :last-child { margin-bottom: 0; } .ks-pd-sections .ks-desc-block:first-child { margin-top: 24px; border-top: 1px solid var(--ks-line); } /* Wishlist and compare: round icon buttons, one look on the gallery and in the bar */ .ks-icon-btn, #product-offer .product-actions .btn { width: 44px; height: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 50%; display: inline-grid; place-items: center; background: var(--ks-field-bg); color: var(--ks-ink); box-shadow: none; transition: background-color 150ms ease-out, color 150ms ease-out; } .ks-icon-btn:hover, #product-offer .product-actions .btn:hover { background: var(--ks-field-bg-hover); color: var(--ks-ink); } /* same size as the gallery's mask icons (18px x 1.2em) */ .ks-icon-btn svg { width: 22px; height: 22px; } #product-offer .product-actions .btn .fa-heart, #product-offer .product-actions .btn .fa-list-alt { font-size: 18px; color: inherit; vertical-align: 0; } .ks-icon-btn.on-list, #product-offer .product-actions .btn.on-list { color: var(--ks-cyr); } .ks-icon-btn.on-list svg path:first-child { fill: currentColor; } #product-offer .product-actions { gap: 8px; } /* Bottom bar */ .ks-pd-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030; background: var(--ks-nav); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 -1px 0 rgba(0, 0, 0, .08); animation: ks-bar-in 260ms var(--ks-out); } @keyframes ks-bar-in { from { transform: translateY(100%); } to { transform: none; } } .ks-pd-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: 1400px; margin: 0 auto; padding: 10px 22px calc(10px + env(safe-area-inset-bottom)); } .ks-pd-bar-links { display: flex; gap: 28px; overflow-x: auto; scrollbar-width: none; } .ks-pd-bar-links::-webkit-scrollbar { display: none; } .ks-pd-bar-links a { white-space: nowrap; font-size: 15px; color: var(--ks-ink); text-decoration: none; } .ks-pd-bar-links a:hover { color: var(--ks-link); text-decoration: none; } .ks-pd-bar-buy { display: flex; align-items: center; gap: 16px; margin-left: auto; flex: none; } .ks-pd-bar-pricebox { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; } .ks-pd-bar-price { font-size: 19px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; } .ks-pd-bar-vat, .ks-pd-bar-vat a { font-size: 11px; color: var(--ks-ink-2); white-space: nowrap; } .ks-pd-bar-vat a { text-decoration: underline; text-underline-offset: 2px; } .ks-pd-bar-btn { min-height: 48px; padding: 0 26px; font-size: 16px; font-weight: 500; white-space: nowrap; } html.ks-pd-bar-on body { padding-bottom: var(--ks-pd-bar-h, 72px); } /* "Nach oben": round frosted button with our chevron instead of NOVA's white square */ .smoothscroll-top { right: 20px; bottom: 24px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(16px) saturate(1.6); backdrop-filter: blur(16px) saturate(1.6); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 6px 18px rgba(0, 0, 0, .12); color: var(--ks-ink); transition: opacity .25s ease, transform .25s cubic-bezier(.2, .8, .2, 1), background-color .15s ease; } .smoothscroll-top:hover { background: rgba(255, 255, 255, .95); transform: translateY(-2px); } .smoothscroll-top:active { transform: scale(.94); } .smoothscroll-top:focus-visible { outline: 2px solid var(--ks-blue); outline-offset: 3px; } .smoothscroll-top .scroll-top-inner { display: grid; place-items: center; width: 100%; height: 100%; } .smoothscroll-top .scroll-top-inner i { display: none; } .smoothscroll-top .scroll-top-inner::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ks-ic-chevron-left) center / contain no-repeat; mask: var(--ks-ic-chevron-left) center / contain no-repeat; transform: rotate(90deg); } @media (prefers-reduced-motion: reduce) { .smoothscroll-top, .smoothscroll-top:hover { transition: none; transform: none; } } html.ks-pd-bar-on .smoothscroll-top { bottom: calc(var(--ks-pd-bar-h, 72px) + 12px); } /* the cookie settings button sits above the bar instead of covering its links */ html.ks-pd-bar-on #consent-settings-btn, html.ks-pd-bar-on #consent-manager #consent-settings-btn { bottom: calc(var(--ks-pd-bar-h, 72px) + 12px); transition: bottom 200ms ease-out; } @media (max-width: 767.98px) { .ks-pd-bar-links { display: none; } .ks-pd-bar-in { padding-left: 16px; padding-right: 16px; } .ks-pd-bar-buy { width: 100%; gap: 8px; justify-content: space-between; } .ks-pd-bar-buy .ks-icon-btn { width: 40px; height: 40px; } .ks-pd-bar-price { font-size: 17px; } .ks-pd-bar-btn { flex: 1 1 auto; min-width: 0; max-width: 260px; padding: 0 14px; white-space: nowrap; font-size: 15px; } /* room for the full button text on a phone: compare stays on the page, the VAT note may take two short lines */ .ks-pd-bar-buy [data-ks-proxy="Vergleichsliste"] { display: none; } .ks-pd-bar-pricebox { flex: none; max-width: 112px; } .ks-pd-bar-vat { white-space: normal; text-align: right; line-height: 1.25; } } @media (prefers-reduced-motion: reduce) { .ks-pd-bar { animation: none; } } /* ---------- Responsive ---------- */ @media (max-width: 1199.98px) { .ks-types { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .ks-cat-head { flex-direction: column; align-items: flex-start; gap: 16px; } .ks-cat-side { text-align: left; } .ks-help, .ks-desc-block { grid-template-columns: 1fr; gap: 28px; } .ks-desc-title, .ks-help > :first-child { position: static; } .ks-arrow { display: none; } /* Filter: one line "Filter" that opens the card; rows stack */ .ks-filter-sum { display: flex; align-items: center; gap: 10px; list-style: none; height: 44px; padding: 0 18px; border-radius: 980px; background: var(--ks-card); box-shadow: var(--ks-shadow); font-weight: 500; cursor: pointer; } .ks-filter-sum::-webkit-details-marker { display: none; } .ks-filter-sum::after { content: ""; width: 9px; height: 9px; margin-left: auto; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); } .ks-filter[open] .ks-filter-sum::after { transform: translateY(2px) rotate(-135deg); } .ks-filter[open] .ks-filter-sum { margin-bottom: 12px; } .ks-filter-badge { font-size: 13px; font-weight: 500; color: var(--ks-link); } .ks-filter-card th, .ks-filter-card td { display: block; width: auto; padding: 0 16px; border: 0; } .ks-filter-card th { padding-top: 16px; padding-bottom: 8px; } .ks-filter-card td { padding-bottom: 16px; border-bottom: 1px solid var(--ks-line); } .ks-filter-card tr:last-child td { border-bottom: 0; } .ks-filter-sort { display: table-row; } } @media (max-width: 575.98px) { .ks-types { gap: 12px; } .ks-type { padding: 20px 16px; } .ks-type .stage { height: 104px; margin-bottom: 14px; } .ks-type .ks-key { width: 76px; } .ks-type .ks-key .l { font-size: 27px; } .ks-type .ks-key .c { font-size: 17px; } .ks-type .h { font-size: 18px; } .ks-type .p { font-size: 14px; } } @media (prefers-reduced-motion: reduce) { .ks-card:hover { transform: none; } .ks-card, .ks-type, .ks-lk .ks-key, #product-list.layout-gallery .productbox, #product-list.layout-gallery .square-image .inner img, .ks-acc summary::after { transition: none; } .ks-type:hover, .ks-lk:hover .ks-key, #product-list.layout-gallery .productbox:hover { transform: none; } } /* ---------- Technische Daten (productdetails/tabs.tpl, .ks-pd-data) ---------- */ /* Left column: heading and product safety (JTL GPSR plugin) pinned together while the table scrolls */ .ks-desc-aside { position: sticky; top: calc(var(--ks-header-h, 168px) + 24px); } .ks-desc-aside .ks-desc-title { position: static; } .ks-pd-safety > .gpsr-compliance { margin: 0; row-gap: 12px; } .ks-pd-safety > .gpsr-compliance > .col { flex: 0 0 100%; max-width: 100%; padding: 0; } @media (max-width: 767.98px) { /* phones: heading, table, then product safety */ .ks-desc-aside { display: contents; } #ks-daten { row-gap: 20px; } #ks-daten .ks-desc-title { order: 0; } #ks-daten .ks-pd-data { order: 1; } #ks-daten .ks-pd-safety { order: 2; } } /* Spec sheet: our font, hairlines between rows, label grey on the left, value on the right */ .ks-pd-data .product-attributes .table { margin: 0; border: 0; font-family: var(--ks-font); font-size: 14px; color: var(--ks-ink); } .ks-pd-data .product-attributes .table tr { border: 0 !important; background: none !important; } .ks-pd-data .product-attributes .table td { padding: 10px 0; border: 0; border-bottom: 1px solid var(--ks-line); font-family: inherit; font-size: 14px; line-height: 1.35; vertical-align: middle; } .ks-pd-data .product-attributes .table td.h6 { width: 42%; padding-right: 16px; margin: 0; font-weight: 400; color: var(--ks-ink-2); } .ks-pd-data .product-attributes .table tr:first-child td { border-top: 1px solid var(--ks-line); } .ks-pd-data .product-attributes .badge { display: inline-block; margin: 2px 4px 2px 0; padding: 4px 10px; border-radius: 980px; background: var(--ks-bg); font-size: 13px; font-weight: 500; color: var(--ks-ink); } .ks-pd-data .product-attributes .badge:hover { background: var(--ks-tint-bg); color: var(--ks-tint-ink); } .ks-pd-data .product-attributes .attr-characteristic img { width: 28px; height: 28px; object-fit: cover; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .1); } /* Product safety (GPSR): small heading, manufacturer and responsible person side by side in compact type */ .ks-pd-safety > .hr-sect { display: block; margin: 24px 0 8px !important; padding: 0; font-size: 15px; font-weight: 500; letter-spacing: -.01em; text-align: left; color: var(--ks-ink); } .ks-pd-safety > .hr-sect { border: 0 !important; } .ks-pd-safety > .hr-sect::before, .ks-pd-safety > .hr-sect::after { display: none !important; } .ks-pd-safety .gpsr-compliance .product-manufacturer { margin: 0 !important; font-size: 13px; line-height: 1.5; color: var(--ks-ink-2); } .ks-pd-safety .gpsr-compliance .product-manufacturer strong { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 500; color: var(--ks-ink); } .ks-pd-safety .gpsr-compliance .product-manufacturer .small { font-size: inherit; } .ks-pd-safety .gpsr-compliance .gpsr-contact { margin-top: 8px; } /* ---------- Cart page (basket/index.tpl, basket/cart_items.tpl) ---------- */ .basket .basket-heading { margin-bottom: 20px; font-size: clamp(26px, 2.6vw, 34px); font-weight: 500; letter-spacing: -.02em; } .ks-bag-heading span { margin-left: 6px; font-weight: 400; color: var(--ks-ink-2); } .basket .cart-items-header { display: none !important; } /* rows on white, one hairline between them; actions, quantity and price share the bottom line */ .ks-bag { margin: 0; padding: 0; list-style: none; } .ks-bag-item { display: grid; grid-template-columns: 112px minmax(0, 1fr) auto auto; grid-template-areas: "img info info info" "img actions qty price"; align-items: center; gap: 14px 24px; padding: 24px 0; } .ks-bag-item + .ks-bag-item { border-top: 1px solid var(--ks-line); } .ks-bag-item.is-extra { grid-template-areas: "info info qty price"; padding: 16px 0; } .ks-bag-item > .ks-bag-img { align-self: start; } .ks-bag-img { grid-area: img; display: block; width: 112px; height: 112px; padding: 8px; border-radius: 14px; overflow: hidden; background: var(--ks-bg); transition: transform .2s ease; } .ks-bag-img:hover { transform: scale(1.03); } .ks-bag-img img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } .ks-bag-info { grid-area: info; min-width: 0; align-self: end; } .ks-bag-name { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 16px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--ks-ink); text-decoration: none; } a.ks-bag-name:hover { color: var(--ks-ink); text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .25); text-underline-offset: 3px; } .ks-bag-meta { display: flex; flex-wrap: wrap; gap: 2px 14px; margin: 6px 0 0; font-size: 13px; color: var(--ks-ink-2); } .ks-bag-color { display: inline-flex; align-items: center; gap: 6px; color: var(--ks-ink); } .ks-bag-color img { width: 14px; height: 14px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } .ks-bag-var { color: var(--ks-ink); } .ks-bag-stock { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 13px; color: var(--ks-ok); } .ks-bag-stock::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .ks-bag-note { margin: 4px 0 0; font-size: 13px; color: var(--ks-tint-ink); } .ks-bag-config { margin: 6px 0 0; padding: 0; list-style: none; font-size: 13px; color: var(--ks-ink-2); } .ks-bag-actions { grid-area: actions; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; align-self: center; } .ks-bag-actions .wishlist-button, .ks-bag-actions .btn-link, .ks-bag-remove { display: inline-flex; align-items: center; gap: 5px; padding: 0; border: 0; background: none; font-size: 13px; font-weight: 400; color: var(--ks-ink-2); text-decoration: none; cursor: pointer; transition: color .15s ease; } .ks-bag-actions .wishlist-button:hover, .ks-bag-actions .btn-link:hover { color: var(--ks-ink); text-decoration: none; } .ks-bag-remove:hover { color: var(--ks-error); } .ks-bag-actions .wishlist-button .fa-heart, .ks-bag-actions .fa-heart { width: 15px; height: 15px; } .ks-bag-remove-ic { width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--ks-ic-trash) center / contain no-repeat; mask: var(--ks-ic-trash) center / contain no-repeat; } .ks-bag-qty { grid-area: qty; } .ks-bag-qty .qty-wrapper { width: 116px; max-width: none; } .ks-bag-qty .form-counter { height: 38px; border-radius: 19px; background: var(--ks-bg); box-shadow: none; } .ks-bag-qty .form-counter .btn, .ks-bag-qty .form-counter .form-control { background: transparent; } .ks-bag-qty-fixed { font-size: 15px; } .ks-bag-configure { display: block; margin-top: 4px; font-size: 13px; color: var(--ks-link); } .ks-bag-price { grid-area: price; min-width: 88px; text-align: right; } .ks-bag-total { display: block; font-size: 17px; font-weight: 500; letter-spacing: -.01em; color: var(--ks-o700); white-space: nowrap; } .ks-bag-unit { display: block; margin-top: 2px; font-size: 12px; color: var(--ks-ink-2); white-space: nowrap; } .ks-bag-old { display: block; margin-bottom: 1px; font-size: 12px; white-space: nowrap; } .ks-bag-total.is-reduced { color: var(--ks-error); } .ks-bag-old { color: var(--ks-o500); } /* One rule for reduced prices everywhere: prices are orange, a reduced price turns red, the former price stays small in orange with only the amount struck through */ #product-offer .product-info .product-offer > div.row:first-of-type .price_wrapper .price.special-price { color: var(--ks-error); } #content .old-price-dynamic.text-danger { color: var(--ks-o500) !important; text-decoration: none; font-size: 13px; } #content .old-price-dynamic .old-price-value { text-decoration: line-through; } /* wider item column: NOVA splits 7 + 4 columns with an empty one between */ @media (min-width: 992px) { .basket > .row > .col-lg-7 { flex: 0 0 64%; max-width: 64%; } .basket > .row > .col-lg-4 { flex: 0 0 32%; max-width: 32%; } } /* Summary card */ .basket .cart-summary { top: calc(var(--ks-header-h, 69px) + 20px); } .basket .cart-summary .basket-heading { font-size: 20px; margin-bottom: 14px; } .basket .cart-summary .card-gray, .basket .basket-summary { border: 0; border-radius: 18px; background: var(--ks-bg); box-shadow: none; } .basket .basket-summary > .card-body { display: flex; flex-direction: column; gap: 14px; padding: 22px; } .ks-sum { display: flex; flex-direction: column; gap: 6px; } .ks-sum-row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--ks-ink); } .ks-sum-total { align-items: baseline; font-size: 17px; font-weight: 500; } .ks-sum-total .total-sum { font-size: 24px; font-weight: 500; letter-spacing: -.01em; } .ks-sum-tax { font-size: 12px; color: var(--ks-ink-2); } .ks-sum-ship { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ks-ink-2); } .ks-sum-ship a { color: inherit; text-decoration: underline; } .basket .basket-summary .ks-fs { padding: 12px 14px; border-radius: 12px; background: #FFFFFF; } .basket .basket-summary #cart-checkout-btn { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; font-size: 16px; } .basket .basket-summary-notice-weight-wrapper { margin: 14px 0 0; font-size: 13px; color: var(--ks-ink-2); } /* Shipping estimate folded */ .ks-ship-calc { margin-top: 8px; border-top: 1px solid var(--ks-line); border-bottom: 1px solid var(--ks-line); } .ks-ship-calc > summary { display: flex; align-items: center; gap: 12px; padding: 16px 0; list-style: none; font-size: 14px; font-weight: 500; color: var(--ks-ink); cursor: pointer; } .ks-ship-calc > summary::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--ks-ink-2); -webkit-mask: var(--ks-ic-truck) center / contain no-repeat; mask: var(--ks-ic-truck) center / contain no-repeat; } .ks-ship-calc > summary::-webkit-details-marker { display: none; } .ks-ship-calc > summary::after { content: ""; width: 16px; height: 16px; background: var(--ks-ink-2); -webkit-mask: var(--ks-ic-chevron-right) center / contain no-repeat; mask: var(--ks-ic-chevron-right) center / contain no-repeat; margin-left: auto; transform: rotate(90deg); transition: transform .2s ease; } .ks-ship-calc[open] > summary::after { transform: rotate(-90deg); } .ks-ship-calc .shipping-calculator-main-heading { display: none; } .ks-ship-calc form { padding-bottom: 16px; } /* Phones: bottom bar with total and checkout */ .ks-cartbar { display: none; } @media (max-width: 991.98px) { .ks-cartbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1020; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: 0 -1px 0 rgba(0, 0, 0, .08); transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .ks-cartbar.is-hidden { transform: translateY(110%); } .ks-cartbar-sum { display: flex; flex-direction: column; line-height: 1.2; } .ks-cartbar-sum span { font-size: 12px; color: var(--ks-ink-2); } .ks-cartbar-sum strong { font-size: 20px; font-weight: 500; } .ks-cartbar .btn { flex: 0 0 auto; min-height: 46px; padding: 0 26px; display: inline-flex; align-items: center; } html:has(.ks-cartbar:not(.is-hidden)) .smoothscroll-top { bottom: 84px; } .basket .cart-summary { margin-top: 32px; } } @media (max-width: 575.98px) { .ks-bag-item { grid-template-columns: 80px minmax(0, 1fr) auto; grid-template-areas: "img info info" "img qty price" "actions actions actions"; align-items: center; gap: 10px 14px; padding: 18px 0; } .ks-bag-item.is-extra { grid-template-areas: "info info price"; } .ks-bag-img { width: 80px; height: 80px; padding: 6px; border-radius: 12px; } .ks-bag-name { font-size: 15px; } .ks-bag-qty .qty-wrapper { width: 108px; } .ks-bag-qty .form-counter { height: 34px; } .ks-bag-price { min-width: 0; } } .ks-bag-actions .wishlist-button-inner { display: inline-flex; align-items: center; gap: 5px; } .ks-bag-actions .wishlist-button-text { text-decoration: none !important; border: 0; } .ks-bag-qty .form-counter .btn { flex: 0 0 36px; width: 36px; min-width: 36px; padding: 0; } .ks-bag-qty .form-counter .form-control { flex: 1 1 auto; min-width: 28px; padding: 0; text-align: center; } @media (max-width: 991.98px) { html:has(.ks-cartbar:not(.is-hidden)) #consent-manager #consent-settings-btn { bottom: 84px; } #consent-manager #consent-settings-btn { transition: bottom .25s cubic-bezier(.2, .8, .2, 1); } } /* buy button: the trolley a little larger than the inline glyph size */ .btn-basket-check .fa-shopping-cart { width: 24px; height: 24px; margin-left: 6px; vertical-align: -6px; } /* ---------- "Frage zum Artikel" window and modal titles ---------- */ .modal .modal-title { font-family: var(--ks-font); font-size: 20px; font-weight: 500; letter-spacing: -.01em; } .ks-qa-item { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 10px 12px; border-radius: 12px; background: var(--ks-bg); font-size: 14px; font-weight: 500; line-height: 1.35; color: var(--ks-ink); } .ks-qa-item img { flex: none; width: 48px; height: 48px; border-radius: 8px; object-fit: contain; background: #FFFFFF; } .ks-qa-item span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } #article_question legend { margin: 0 0 8px; padding: 0; border: 0; font-size: 13px; font-weight: 500; color: var(--ks-ink-2); } #article_question fieldset + fieldset legend { display: none; } #article_question fieldset { margin-bottom: 4px; } /* consent: same weight checked or not (NOVA turned it bold, the text jumped); label and explanation start on one line */ .snippets-checkbox-wrapper .custom-control-label, .snippets-checkbox-wrapper .custom-control-input:checked ~ .custom-control-label { padding-left: 8px; font-size: 14px; font-weight: 500 !important; color: var(--ks-ink); } .snippets-checkbox-wrapper .moreinfo a { color: var(--ks-link); } .snippets-checkbox-wrapper .form-text { margin: 6px 0 0 32px; font-size: 12px; line-height: 1.5; color: var(--ks-ink-2) !important; } #article_question .btn-primary { min-height: 46px; padding: 0 28px; } @media (max-width: 575.98px) { #article_question .ml-auto-util { width: 100%; } } /* ---------- Content pages opened in a window ("Lesen", AGB, Versand ...) ---------- */ /* legal texts bring their own h1: JTL's page heading above it would repeat it (popup and page) */ #content:has(> .well h1, > div > .container h1) > .index-heading-wrapper { display: none; } .modal:not([id]) .modal-dialog.modal-xl { max-width: 760px; } .modal:not([id]) .modal-header { position: sticky; top: 0; z-index: 2; justify-content: flex-end; padding: 12px 12px 0; border: 0; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .modal:not([id]) .modal-body { padding: 0 40px 40px; } .modal:not([id]) .modal-body .container { max-width: none; padding: 0; } .modal:not([id]) .modal-body .well { padding: 0; border: 0; background: none; } .modal:not([id]) .modal-body h1 { margin: 0 0 20px; font-size: 28px; font-weight: 500; letter-spacing: -.02em; } .modal:not([id]) .modal-body h2 { margin: 28px 0 10px; font-size: 19px; font-weight: 500; letter-spacing: -.01em; } .modal:not([id]) .modal-body h3 { margin: 20px 0 8px; font-size: 16px; font-weight: 500; } .modal:not([id]) .modal-body p, .modal:not([id]) .modal-body li { font-size: 15px; line-height: 1.6; color: var(--ks-ink); } @media (max-width: 575.98px) { .modal:not([id]) .modal-body { padding: 0 20px 28px; } .modal:not([id]) .modal-body h1 { font-size: 24px; } } .ks-sum-free { font-size: 14px; } .ks-sum-free a { color: inherit; text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .25); text-underline-offset: 3px; } .ks-sum-free span:last-child { font-weight: 500; color: var(--ks-ok); } .ks-sum-free span:last-child::first-letter { text-transform: uppercase; } .ks-sum-shipname { margin: -2px 0 0; font-size: 12px; color: var(--ks-ink-2); } /* ---------- Mega menu (snippets/categories_mega.tpl) ---------- */ @media (min-width: 992px) { .ks-mm { padding: 8px 0 12px; } .ks-mm-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; } .ks-mm-grid.no-top { grid-template-columns: minmax(0, 1fr); } .ks-mm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; margin: 0; padding: 0; list-style: none; } .ks-mm-tiles.is-few { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ks-mm-tile { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 18px; color: var(--ks-ink); text-decoration: none; transition: background-color .2s ease; } .ks-mm-tile:hover, .ks-mm-tile:focus-visible { background: var(--ks-bg); color: var(--ks-ink); text-decoration: none; } .ks-mm-img { flex: none; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden; border-radius: 14px; background: var(--ks-bg); transition: background-color .2s ease; } .ks-mm-tile:hover .ks-mm-img { background: #FFFFFF; } .ks-mm-img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } .ks-mm-tile:hover .ks-mm-img img { transform: scale(1.08); } .ks-mm-text { min-width: 0; } .ks-mm-name { display: block; font-size: 16px; font-weight: 500; letter-spacing: -.01em; line-height: 1.25; } .ks-mm-hint { display: block; margin-top: 2px; font-size: 13px; color: var(--ks-ink-2); } .ks-mm-all { display: inline-flex; align-items: center; gap: 4px; margin: 16px 0 0 10px; font-size: 14px; font-weight: 500; color: var(--ks-link); text-decoration: none; } .ks-mm-all span { width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--ks-ic-chevron-right) center / contain no-repeat; mask: var(--ks-ic-chevron-right) center / contain no-repeat; transition: transform .2s ease; } .ks-mm-all:hover { color: var(--ks-link); text-decoration: none; } .ks-mm-all:hover span { transform: translateX(3px); } .ks-mm-top { display: flex; flex-direction: column; gap: 6px; padding-left: 32px; border-left: 1px solid var(--ks-line); } .ks-mm-label { margin: 0 0 4px 8px; font-size: 13px; font-weight: 500; color: var(--ks-ink-2); } .ks-mm-product { display: grid; grid-template-columns: 80px minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; gap: 4px 14px; padding: 8px; border-radius: 18px; color: var(--ks-ink); text-decoration: none; transition: background-color .2s ease; } .ks-mm-product:hover { background: var(--ks-bg); color: var(--ks-ink); text-decoration: none; } .ks-mm-pimg { grid-row: 1 / span 2; display: grid; place-items: center; width: 80px; height: 80px; overflow: hidden; border-radius: 14px; background: var(--ks-bg); } .ks-mm-product:hover .ks-mm-pimg { background: #FFFFFF; } .ks-mm-pimg img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .5s cubic-bezier(.2, .8, .2, 1); } .ks-mm-product:hover .ks-mm-pimg img { transform: scale(1.06); } .ks-mm-pname { align-self: end; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 500; line-height: 1.3; } .ks-mm-price { align-self: start; font-size: 15px; font-weight: 500; color: var(--ks-o700); } .ks-mm-price.is-reduced { color: var(--ks-error); } /* opening: the panel slides in softly, the tiles follow one after another */ .dropdown-full > .dropdown-menu.show .ks-mm-tiles > li, .dropdown-full > .dropdown-menu.show .ks-mm-product, .dropdown-full > .dropdown-menu.show .ks-mm-all { animation: ksMmIn .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 28ms); } .dropdown-full > .dropdown-menu.show { animation: ksMmPanel .3s cubic-bezier(.2, .8, .2, 1) both; } } @keyframes ksMmIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes ksMmPanel { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .dropdown-full > .dropdown-menu.show, .dropdown-full > .dropdown-menu.show * { animation: none !important; } } /* the page behind the open menu: blurred with a light veil instead of NOVA's grey */ .modal-backdrop.zindex-dropdown.show { opacity: 1; background: rgba(247, 247, 247, .35); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); transition: opacity .25s ease; } .modal-backdrop.zindex-dropdown.fade:not(.show) { opacity: 0; } @media (min-width: 992px) { .ks-mm a, .ks-mm span { white-space: normal; } } @media (min-width: 992px) { /* whole picture inside the tile: product photos are often white around the motive */ .ks-mm-img img, .ks-mm-pimg img { object-fit: contain; padding: 4px; } /* few subcategories: bigger tiles instead of a wide empty panel */ .ks-mm-tiles.is-few { gap: 10px 16px; } .ks-mm-tiles.is-few .ks-mm-tile { gap: 18px; padding: 12px; } .ks-mm-tiles.is-few .ks-mm-img { width: 96px; height: 96px; border-radius: 18px; } .ks-mm-tiles.is-few .ks-mm-name { font-size: 18px; } .ks-mm-tiles.is-few .ks-mm-hint { font-size: 14px; } } /* Bestseller column, Temu-like: a warm orange card, flame pill, rank on the photo, big orange price */ @media (min-width: 992px) { .ks-mm-top { gap: 8px; padding: 16px; border: 0; border-radius: 22px; background: var(--ks-o100); } .ks-mm-label { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin: 0 0 4px; padding: 6px 12px 6px 10px; border-radius: 999px; background: var(--ks-o500); font-size: 13px; font-weight: 500; color: #FFFFFF; } .ks-mm-flame { width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--ks-ic-flame) center / contain no-repeat; mask: var(--ks-ic-flame) center / contain no-repeat; } .ks-mm-product { padding: 10px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(234, 116, 36, .1); transition: transform .2s ease, box-shadow .2s ease; } .ks-mm-product:hover { background: #FFFFFF; transform: translateY(-2px); box-shadow: 0 10px 22px -10px rgba(234, 116, 36, .45); } .ks-mm-pimg { position: relative; background: var(--ks-bg); overflow: visible; } .ks-mm-pimg img { border-radius: 14px; } .ks-mm-product:hover .ks-mm-pimg { background: var(--ks-bg); } .ks-mm-rank { position: absolute; top: -6px; left: -6px; display: grid; place-items: center; width: 24px; height: 24px; border: 2px solid #FFFFFF; border-radius: 50%; background: var(--ks-o500); font-size: 12px; font-weight: 500; color: #FFFFFF; } .ks-mm-price { font-size: 17px; font-weight: 500; letter-spacing: -.01em; } } /* ---------- Type weights: fine by default (500), only what must pop a little denser ---------- */ .ks-sum-total .total-sum, .ks-cartbar-sum strong { font-weight: 600; } .ks-badge-sale .ks-badge-ic, .ks-mm-rank { font-weight: 600; } .ks-bag-total.is-reduced, #product-offer .product-info .product-offer > div.row:first-of-type .price_wrapper .price.special-price { font-weight: 600; } /* ---------- Plain category head: title, the intro below it, left aligned ---------- */ .ks-cat-head.is-plain { display: block; padding: 20px 0 28px; } .ks-cat-head.is-plain .ks-cat-title { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -.03em; max-width: 22em; text-wrap: balance; } .ks-cat-head.is-plain .ks-cat-side { text-align: left; max-width: 62ch; margin-top: 12px; padding: 0; } .ks-cat-head.is-plain .ks-cat-side p { font-size: 17px; line-height: 1.5; font-weight: 400; letter-spacing: -.01em; color: var(--ks-ink); } /* ---------- Subcategory tiles ---------- */ .ks-subcats { margin: 0 0 28px; } .ks-subcats .ks-track { gap: 12px; } .ks-sc { flex: 0 0 auto; width: 148px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 12px 14px; border-radius: 18px; background: #FFFFFF; border: 1px solid var(--ks-line); color: var(--ks-ink); text-decoration: none; text-align: center; transition: border-color 200ms var(--ks-out), box-shadow 300ms var(--ks-out), transform 300ms var(--ks-out); } .ks-sc:hover { color: var(--ks-g800); text-decoration: none; border-color: var(--ks-o300); box-shadow: 0 8px 24px rgba(43, 42, 40, .08); transform: translateY(-2px); } .ks-sc-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 84px; } .ks-sc-img img { max-width: 100%; max-height: 84px; object-fit: contain; border-radius: 10px; } .ks-sc-img .ks-key { width: 64px; border-radius: 13px; } .ks-sc-img .ks-key .l { left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; font-size: 27px; } .ks-sc-name { font-size: 14px; line-height: 1.3; font-weight: 400; } @media (max-width: 575.98px) { .ks-sc { width: 120px; padding: 12px 10px; } .ks-sc-img { height: 64px; } .ks-sc-img img { max-height: 64px; } .ks-sc-name { font-size: 13px; } } /* ---------- Subcategory bar: pinned under the shop header while scrolling a category, names only ---------- */ .ks-subbar { position: fixed; left: 0; right: 0; top: var(--ks-header-h, 69px); z-index: 1020; background: var(--ks-sub-bg); box-shadow: 0 1px 0 rgba(0, 0, 0, .05); transform: translateY(-100%); opacity: 0; visibility: hidden; pointer-events: none; transition: transform 260ms var(--ks-out), opacity 200ms var(--ks-out), visibility 0s linear 260ms; } .ks-subbar.is-on { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform 260ms var(--ks-out), opacity 200ms var(--ks-out); } /* while a mega menu is open the bar and the tab step aside, fading in place, so the dropdown hangs straight off the header */ html.ks-menu-open .ks-subbar.is-on { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 120ms var(--ks-out), visibility 0s linear 120ms; } .ks-subbar-in { display: flex; align-items: center; justify-content: center; max-width: 1600px; height: min(var(--ks-header-h, 69px), 52px); margin: 0 auto; padding: 0 22px; } /* desktop: the active menu item turns into a tab of the bar's grey. The tab runs down to the header's bottom edge (--ks-tab-gap, measured in ks.js) and flares out into the bar with two inverted corners, like a browser tab. */ /* only while the tab shows: a positioned li would make NOVA's full-width mega menu hang off the item instead of the header */ html.ks-subbar-on:not(.ks-menu-open) #jtl-nav-wrapper .navbar-nav > li.active { position: relative; } html.ks-menu-open #jtl-nav-wrapper .navbar-nav > li.active::before, html.ks-menu-open #jtl-nav-wrapper .navbar-nav > li.active::after { content: none; } /* without the tab the li is not positioned: its corners would sit at the window's edge and widen the page */ html:not(.ks-subbar-on) #jtl-nav-wrapper .navbar-nav > li.active::before, html:not(.ks-subbar-on) #jtl-nav-wrapper .navbar-nav > li.active::after { content: none; } #jtl-nav-wrapper .navbar-nav > li.active > .nav-link { border-radius: 12px 12px 0 0; transition: background-color 220ms var(--ks-out), box-shadow 220ms var(--ks-out), color 220ms var(--ks-out); } html.ks-subbar-on:not(.ks-menu-open) #jtl-nav-wrapper .navbar-nav > li.active > .nav-link { background: var(--ks-sub-bg); box-shadow: 0 calc(var(--ks-tab-gap, 6px) + 3px) 0 var(--ks-sub-bg); color: var(--ks-g800); } /* NOVA's menu row clips its overflow 1.5px above the header's edge; clipping 8px further out (layout untouched) lets the tab overlap the bar, so no seam shows */ #jtl-nav-wrapper .ks-head-cats .navbar-collapse { overflow: clip; overflow-clip-margin: 8px; } html.ks-subbar-on:not(.ks-menu-open) #jtl-nav-wrapper .navbar-nav > li.active > .nav-link::before { opacity: 0; } #jtl-nav-wrapper .navbar-nav > li.active::before, #jtl-nav-wrapper .navbar-nav > li.active::after { content: ""; position: absolute; bottom: calc(-1 * var(--ks-tab-gap, 6px)); width: 12px; height: 12px; opacity: 0; transition: opacity 220ms var(--ks-out); pointer-events: none; } #jtl-nav-wrapper .navbar-nav > li.active::before { right: 100%; background: radial-gradient(circle at 0 0, transparent 11.5px, var(--ks-sub-bg) 12px); } #jtl-nav-wrapper .navbar-nav > li.active::after { left: 100%; background: radial-gradient(circle at 100% 0, transparent 11.5px, var(--ks-sub-bg) 12px); } html.ks-subbar-on:not(.ks-menu-open) #jtl-nav-wrapper .navbar-nav > li.active::before, html.ks-subbar-on:not(.ks-menu-open) #jtl-nav-wrapper .navbar-nav > li.active::after { opacity: 1; } /* phones have no menu row: there the category name leads the bar, back to the top on tap */ .ks-subbar-title, .ks-subbar-sep { display: none; } .ks-subbar-links { display: flex; align-items: center; gap: 26px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .ks-subbar-links::-webkit-scrollbar { display: none; } .ks-subbar-links a { white-space: nowrap; font-size: 14px; color: var(--ks-g700); text-decoration: none; transition: color 200ms var(--ks-out); } .ks-subbar-links a:hover { color: var(--ks-link); text-decoration: none; } /* where you are: a white pill, the same one that carries the category name on phones */ .ks-subbar-links:has(a[aria-current]) { padding: 4px 12px; margin: -4px -12px; } .ks-subbar-links a[aria-current] { margin: 0 -12px; padding: 5px 12px; border-radius: 999px; background: #fff; color: var(--ks-g800); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .06); } @media (max-width: 1199.98px) { .ks-subbar-in { justify-content: flex-start; } .ks-subbar-title { flex: none; display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 14px; background: #FFFFFF; color: var(--ks-g800); font-size: 13px; font-weight: 500; white-space: nowrap; text-decoration: none; } .ks-subbar-title:hover { color: var(--ks-g800); text-decoration: none; } .ks-subbar-sep { display: block; flex: none; width: 7px; height: 7px; margin: 0 14px 0 10px; border-right: 1.5px solid var(--ks-g500); border-top: 1.5px solid var(--ks-g500); transform: rotate(45deg); } } @media (max-width: 767.98px) { .ks-subbar-in { height: 44px; padding: 0 16px; } .ks-subbar-links { gap: 20px; } .ks-subbar-links a { font-size: 13px; } /* names scrolled off either side fade out instead of being cut */ .ks-subbar-links { -webkit-mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, transparent, #000 30px, #000 calc(100% - 30px), transparent); } } @media (prefers-reduced-motion: reduce) { .ks-subbar, .ks-subbar.is-on { transition: none; transform: none; } } /* ---------- Filter button in the subcategory bar, and the panel it opens (filter table moved in by ks.js) ---------- */ .ks-subbar-fcount { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ks-o500); color: #fff; font-size: 11px; font-weight: 500; line-height: 18px; text-align: center; } /* the filter table drops down full width right under the bar, like a mega menu; the page below dims */ .ks-fdrawer { position: fixed; left: 0; right: 0; top: var(--ks-fd-top, 0px); bottom: 0; z-index: 1019; --ks-fd-pad: max(22px, calc((100vw - 1600px) / 2 + 22px)); } .ks-fdrawer[hidden] { display: none; } .ks-fdrawer-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .22); opacity: 0; transition: opacity 260ms var(--ks-out); } .ks-fdrawer-panel { position: relative; display: flex; flex-direction: column; max-height: calc(100% - 32px); background: var(--ks-g50); border-radius: 0 0 22px 22px; outline: 0; box-shadow: 0 18px 40px rgba(0, 0, 0, .14); opacity: 0; transform: translateY(-12px); transition: opacity 220ms var(--ks-out), transform 320ms var(--ks-out); } .ks-fdrawer.is-open .ks-fdrawer-backdrop { opacity: 1; } .ks-fdrawer.is-open .ks-fdrawer-panel { opacity: 1; transform: none; } .ks-fdrawer-head { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; gap: 16px; padding: 14px var(--ks-fd-pad) 4px; color: var(--ks-g800); } /* like .ks-h2 at 21px: one size, the lead-in in grey, the category in the heading colour */ .ks-fdrawer-title { min-width: 0; margin: 0; font-size: 21px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; color: var(--ks-g800); } .ks-fdrawer-title b { font-weight: inherit; } .ks-fdrawer-title span { color: var(--ks-ink-2); } .ks-fdrawer-tools { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } /* the result button wears the chosen chip's look */ .ks-fdrawer-go { height: 34px; padding: 0 16px; border: 1px solid var(--ks-o400); border-radius: 980px; background: var(--ks-o50); color: var(--ks-o800); font: inherit; font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color 150ms ease-out, border-color 150ms ease-out; } .ks-fdrawer-go:hover { background: var(--ks-o100); border-color: var(--ks-o500); } .ks-fdrawer-go:active { transform: scale(.97); } .ks-fdrawer-x { position: relative; width: 32px; height: 32px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); cursor: pointer; transition: background-color 200ms var(--ks-out); } .ks-fdrawer-x:hover { background: var(--ks-g100); } .ks-fdrawer-x::before, .ks-fdrawer-x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 13px; height: 1.5px; border-radius: 1px; background: var(--ks-g700); } .ks-fdrawer-x::before { transform: translate(-50%, -50%) rotate(45deg); } .ks-fdrawer-x::after { transform: translate(-50%, -50%) rotate(-45deg); } .ks-fdrawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 10px var(--ks-fd-pad) 14px; } .ks-fdrawer-body.has-more { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); } /* low screens: the panel covers the shop header too and uses the whole height */ .ks-fdrawer.is-full { z-index: 1070; } .ks-fdrawer.is-full .ks-fdrawer-panel { max-height: calc(100% - 16px); } html.ks-fdrawer-open { overflow: hidden; } /* the same table as on the page, sorting included; no card frame of its own */ .ks-fdrawer .ks-filter-card { background: #fff; border-radius: 18px; box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 8px 24px -12px rgba(0, 0, 0, .08); } /* filters only: sorting has its own place above the products */ .ks-fdrawer .ks-filter-sort { display: none; } /* the panel shows every row (ks.js), so "Alle Filter anzeigen" has no job there */ .ks-fdrawer .ks-filter-toggle { display: none; } .ks-fdrawer .ks-filter-foot:not(:has(.ks-filter-reset)) { display: none; } /* while it is open the tab steps back and the bar's button shows it is pressed */ html.ks-fdrawer-open .ks-subbar-ftab { opacity: 0; pointer-events: none; } /* the round floating buttons (cookie settings, back to top) would sit on the open table */ html.ks-fdrawer-open #consent-settings-btn, html.ks-fdrawer-open .smoothscroll-top { opacity: 0; pointer-events: none; } @media (max-width: 767.98px) { .ks-fdrawer { --ks-fd-pad: 16px; } .ks-fdrawer-panel { max-height: calc(100% - 24px); border-radius: 0 0 20px 20px; } .ks-fdrawer-body { padding: 8px 12px 12px; } .ks-fdrawer-head { align-items: flex-start; } .ks-fdrawer-go { padding: 0 12px; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .ks-fdrawer-backdrop, .ks-fdrawer-panel { transition: none; } } /* Filter handle: an orange rounded button sitting on the bar's lower edge (--ks-ftab-up reaches into the bar), half in the bar, half hanging below it */ .ks-subbar-ftab { --ks-ftab-up: 15px; position: absolute; top: calc(100% - var(--ks-ftab-up)); right: max(22px, calc((100vw - 1600px) / 2 + 22px)); display: inline-flex; align-items: center; gap: 6px; height: calc(var(--ks-ftab-up) * 2); padding: 0 14px; --ks-ftab-bg: var(--ks-o500); border: 0; border-radius: 12px; background: var(--ks-ftab-bg); color: #fff; font: inherit; font-size: 14px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; box-shadow: 0 6px 12px -6px rgba(184, 91, 28, .45); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ks-out), background-color 200ms var(--ks-out); } .ks-subbar-ftab[hidden] { display: none; } .ks-subbar-ftab.is-on { opacity: 1; pointer-events: auto; } .ks-subbar-ftab:hover { --ks-ftab-bg: var(--ks-o600); } .ks-subbar-ftab .ks-subbar-fcount { min-width: 16px; height: 16px; padding: 0 4px; background: #fff; color: var(--ks-o700); font-size: 10px; font-weight: 600; line-height: 16px; } @media (max-width: 767.98px) { .ks-subbar-ftab { --ks-ftab-up: 14px; right: 16px; padding: 0 12px; font-size: 13px; } } /* below 1200px the names scroll from the left: they stop short of the tab's upper half */ @media (max-width: 1199.98px) { .ks-subbar:has(.ks-subbar-ftab.is-on) .ks-subbar-links { margin-right: 96px; } } @media (prefers-reduced-motion: reduce) { .ks-subbar-ftab { transition: none; } } /* ---------- No product photo yet: instead of JTL's keinBild.gif a calm tile with the KS mark in pale grey ---------- */ .square-image .inner:has(> img[src*="keinBild"]) { background: var(--ks-g50); } .square-image .inner > img[src*="keinBild"] { opacity: 0; } .square-image .inner:has(> img[src*="keinBild"])::after { content: ""; position: absolute; left: 50%; top: 50%; width: 34%; aspect-ratio: 446 / 298; transform: translate(-50%, -50%); background: var(--ks-g200); pointer-events: none; -webkit-mask: url("../img/logo-ks.svg") center / contain no-repeat; mask: url("../img/logo-ks.svg") center / contain no-repeat; } /* nothing to enlarge: the placeholder does not open NOVA's fullscreen gallery */ #gallery:has(img[src*="keinBild"]) { pointer-events: none; cursor: default; } #gallery_wrapper:has(img[src*="keinBild"]) .product-images-zoom-btn, #gallery_wrapper:has(img[src*="keinBild"]) [data-toggle="gallery-fullscreen"] { display: none; } /* ---------- Fullscreen product gallery ---------- The photo column is sticky, and a sticky box traps the gallery's z-index: the info column painted over it. While the gallery is open the column lets go; the gallery gets a solid white stage instead of NOVA's grey veil. */ #product-offer .product-gallery:has(#image_wrapper.fullscreen) { position: static; } #image_wrapper.fullscreen { background: #fff; } html:has(#image_wrapper.fullscreen) { overflow: hidden; } /* thumbnails: a slim row of 4:3 tiles under the main image (NOVA's slick strip, only the look changes); the others dimmed, the current one full with a thin graphite ring */ #gallery_preview .slick-slide { position: relative; height: auto; align-self: center; border: 0; border-radius: 11px; overflow: hidden; background: var(--ks-g50); opacity: .72; transition: opacity .25s var(--ks-out); } #gallery_preview .slick-slide.square-image::before { display: block; padding-bottom: 75%; } #product-offer #gallery_preview .inner { padding: 0; } #gallery_preview .inner img { width: 100%; height: 100%; object-fit: cover; } #gallery_preview .slick-slide:hover { opacity: 1; } #gallery_preview .slick-slide.slick-current { opacity: 1; } #gallery_preview .slick-slide.slick-current::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 1.5px var(--ks-g900), inset 0 0 0 3.5px #fff; pointer-events: none; } @media (prefers-reduced-motion: reduce) { #gallery_preview .slick-slide { transition: none; } } #image_wrapper.fullscreen #gallery .inner { border-radius: 18px; overflow: hidden; } /* ---------- NOVA's remaining Font Awesome glyphs, drawn as our line icons (same family, same mask technique) ---------- */ :root { --ks-ic-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E"); --ks-ic-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='7' height='7' rx='1.6'/%3E%3Crect x='13' y='4' width='7' height='7' rx='1.6'/%3E%3Crect x='4' y='13' width='7' height='7' rx='1.6'/%3E%3Crect x='13' y='13' width='7' height='7' rx='1.6'/%3E%3C/svg%3E"); --ks-ic-question: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M9.5 9.3a2.6 2.6 0 0 1 5 .9c0 1.7-2.5 2.2-2.5 3.8M12 17.2h.01'/%3E%3C/svg%3E"); --ks-ic-info: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.8h.01'/%3E%3C/svg%3E"); --ks-ic-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.3 4.4 2.7 17.5a2 2 0 0 0 1.7 3h15.2a2 2 0 0 0 1.7-3L13.7 4.4a2 2 0 0 0-3.4 0Z'/%3E%3Cpath d='M12 9.5v4.5M12 17.2h.01'/%3E%3C/svg%3E"); --ks-ic-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); --ks-ic-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); --ks-ic-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M5.6 18.4l1.8-1.8M16.6 7.4l1.8-1.8'/%3E%3C/svg%3E"); --ks-ic-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5.5v13l10.5-6.5Z'/%3E%3C/svg%3E"); --ks-ic-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5.5v13M15 5.5v13'/%3E%3C/svg%3E"); --ks-ic-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v11M7.5 10.5 12 15l4.5-4.5M5 19.5h14'/%3E%3C/svg%3E"); --ks-ic-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); --ks-ic-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a9 9 0 1 0 9 9'/%3E%3C/svg%3E"); --ks-ic-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2.5'/%3E%3Cpath d='M8 10.5V7.5a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); --ks-ic-comments: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 0 1-12.4 7.5L3.5 21l1.5-4.4A8.5 8.5 0 1 1 20.5 12Z'/%3E%3C/svg%3E"); --ks-ic-logout: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 4.5H6.5a2 2 0 0 0-2 2v11a2 2 0 0 0 2 2h3M14.5 8l4 4-4 4M18.5 12H9'/%3E%3C/svg%3E"); --ks-ic-undo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 4.5 4 9l4.5 4.5M4.5 9H14a5.5 5.5 0 0 1 0 11h-3'/%3E%3C/svg%3E"); --ks-ic-save: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h10l3.5 3.5v11a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 18V6a2.5 2.5 0 0 1 2.5-2.5Z'/%3E%3Cpath d='M8 3.5v5h7v-5M8 20.5v-6h8v6'/%3E%3C/svg%3E"); --ks-ic-news: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='15' rx='2.5'/%3E%3Cpath d='M7.5 9h9M7.5 12.5h9M7.5 16h5'/%3E%3C/svg%3E"); --ks-ic-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-6.2-6.5-11.2a6.5 6.5 0 0 1 13 0C18.5 14.8 12 21 12 21Z'/%3E%3Ccircle cx='12' cy='9.8' r='2.3'/%3E%3C/svg%3E"); --ks-ic-home: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10.5 12 4l8 6.5V19a1.5 1.5 0 0 1-1.5 1.5h-4v-6h-5v6h-4A1.5 1.5 0 0 1 4 19Z'/%3E%3C/svg%3E"); --ks-ic-filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16l-6.2 7.3v5.7l-3.6 1.8v-7.5Z'/%3E%3C/svg%3E"); --ks-ic-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4.5h5.5V10M19.5 4.5 11 13M17 14v4.5a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V9.5a2 2 0 0 1 2-2h4.5'/%3E%3C/svg%3E"); --ks-ic-weight: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 7a2.5 2.5 0 1 1 5 0'/%3E%3Cpath d='M6.5 9.5h11l2.5 10.5H4Z'/%3E%3C/svg%3E"); --ks-ic-square: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='4.5' width='15' height='15' rx='3'/%3E%3C/svg%3E"); --ks-ic-heading: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 5v14M18 5v14M6 12h12'/%3E%3C/svg%3E"); --ks-ic-check-circle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='m8 12.3 2.7 2.7L16 9.7'/%3E%3C/svg%3E"); } .fa-th-list, .fa-list, .fa-list-ol, .fa-th-large, .fa-question-circle, .fa-info-circle, .fa-exclamation-triangle, .fa-exclamation-circle, .fa-search, .fa-eye, .fa-cogs, .fa-cog, .fa-play, .fa-pause, .fa-download, .fa-calendar, .fa-calendar-alt, .fa-spinner, .fa-lock, .fa-comments, .fa-comment, .fa-sign-out-alt, .fa-undo, .fa-save, .fa-newspaper, .fa-map-marker-alt, .fa-home, .fa-filter, .fa-external-link-alt, .fa-weight-hanging, .fa-square, .fa-square-o, .fa-heading, .fa-check-circle, .fa-check, .fa-retweet, .fa-cart-plus, .fa-trash-alt, .fa-trash, .fa-envelope, .fa-gifts, .fa-gift, .fa-user, .fa-user-check, .fa-print, .fa-phone, .fa-credit-card { display: inline-block; width: 1.2em; height: 1.2em; vertical-align: -.22em; } .fa-th-list::before, .fa-list::before, .fa-list-ol::before, .fa-th-large::before, .fa-question-circle::before, .fa-info-circle::before, .fa-exclamation-triangle::before, .fa-exclamation-circle::before, .fa-search::before, .fa-eye::before, .fa-cogs::before, .fa-cog::before, .fa-play::before, .fa-pause::before, .fa-download::before, .fa-calendar::before, .fa-calendar-alt::before, .fa-spinner::before, .fa-lock::before, .fa-comments::before, .fa-comment::before, .fa-sign-out-alt::before, .fa-undo::before, .fa-save::before, .fa-newspaper::before, .fa-map-marker-alt::before, .fa-home::before, .fa-filter::before, .fa-external-link-alt::before, .fa-weight-hanging::before, .fa-square::before, .fa-square-o::before, .fa-heading::before, .fa-check-circle::before, .fa-check::before, .fa-retweet::before, .fa-cart-plus::before, .fa-trash-alt::before, .fa-trash::before, .fa-envelope::before, .fa-gifts::before, .fa-gift::before, .fa-user::before, .fa-user-check::before, .fa-print::before, .fa-phone::before, .fa-credit-card::before { content: ""; display: block; width: 100%; height: 100%; background: currentColor; -webkit-mask: var(--ks-fi) center / contain no-repeat; mask: var(--ks-fi) center / contain no-repeat; } .fa-th-list { --ks-fi: var(--ks-ic-list); } .fa-list { --ks-fi: var(--ks-ic-list); } .fa-list-ol { --ks-fi: var(--ks-ic-list); } .fa-th-large { --ks-fi: var(--ks-ic-grid); } .fa-question-circle { --ks-fi: var(--ks-ic-question); } .fa-info-circle { --ks-fi: var(--ks-ic-info); } .fa-exclamation-triangle { --ks-fi: var(--ks-ic-warning); } .fa-exclamation-circle { --ks-fi: var(--ks-ic-warning); } .fa-search { --ks-fi: var(--ks-ic-search); } .fa-eye { --ks-fi: var(--ks-ic-eye); } .fa-cogs { --ks-fi: var(--ks-ic-settings); } .fa-cog { --ks-fi: var(--ks-ic-settings); } .fa-play { --ks-fi: var(--ks-ic-play); } .fa-pause { --ks-fi: var(--ks-ic-pause); } .fa-download { --ks-fi: var(--ks-ic-download); } .fa-calendar { --ks-fi: var(--ks-ic-calendar); } .fa-calendar-alt { --ks-fi: var(--ks-ic-calendar); } .fa-spinner { --ks-fi: var(--ks-ic-spinner); } .fa-lock { --ks-fi: var(--ks-ic-lock); } .fa-comments { --ks-fi: var(--ks-ic-comments); } .fa-comment { --ks-fi: var(--ks-ic-comments); } .fa-sign-out-alt { --ks-fi: var(--ks-ic-logout); } .fa-undo { --ks-fi: var(--ks-ic-undo); } .fa-save { --ks-fi: var(--ks-ic-save); } .fa-newspaper { --ks-fi: var(--ks-ic-news); } .fa-map-marker-alt { --ks-fi: var(--ks-ic-pin); } .fa-home { --ks-fi: var(--ks-ic-home); } .fa-filter { --ks-fi: var(--ks-ic-filter); } .fa-external-link-alt { --ks-fi: var(--ks-ic-external); } .fa-weight-hanging { --ks-fi: var(--ks-ic-weight); } .fa-square { --ks-fi: var(--ks-ic-square); } .fa-square-o { --ks-fi: var(--ks-ic-square); } .fa-heading { --ks-fi: var(--ks-ic-heading); } .fa-check-circle { --ks-fi: var(--ks-ic-check-circle); } .fa-check { --ks-fi: var(--ks-ic-check); } .fa-retweet { --ks-fi: var(--ks-ic-compare); } .fa-cart-plus { --ks-fi: var(--ks-ic-bag); } .fa-trash-alt { --ks-fi: var(--ks-ic-trash); } .fa-trash { --ks-fi: var(--ks-ic-trash); } .fa-envelope { --ks-fi: var(--ks-ic-mail); } .fa-gifts { --ks-fi: var(--ks-ic-gift); } .fa-gift { --ks-fi: var(--ks-ic-gift); } .fa-user { --ks-fi: var(--ks-ic-account); } .fa-user-check { --ks-fi: var(--ks-ic-account-ok); } .fa-print { --ks-fi: var(--ks-ic-print); } .fa-phone { --ks-fi: var(--ks-ic-phone); } .fa-credit-card { --ks-fi: var(--ks-ic-card); } /* the spinner keeps turning: Font Awesome's fa-spin rotates the element, our mask turns with it */ /* OPC content saved with NOVA's light blue-grey as an inline background: shown in our lightest grey */ .opc-Container[style*="245, 247, 250"], .opc-Container[style*="#f5f7fa" i] { background-color: var(--ks-g50) !important; } /* ---------- JTL's short notices (eModal, e.g. "Artikelmenge nicht verfügbar"): a small centred card ---------- */ /* ks.js marks them .ks-notice, adds the icon and the OK button; the text stays JTL's */ .modal.ks-notice:not([id]) .modal-dialog.modal-xl { width: auto; max-width: 420px; min-height: calc(100% - 3.5rem); margin: 1.75rem auto; display: flex; align-items: center; } .modal.ks-notice:not([id]) .modal-content { width: 100%; padding: 36px 32px 28px; text-align: center; } .modal.ks-notice:not([id]) .modal-header { position: static; flex-direction: column; align-items: center; gap: 16px; padding: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .modal.ks-notice:not([id]) .modal-title { display: block; margin: 0; font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: var(--ks-ink); } .modal.ks-notice:not([id]) .modal-title small:empty { display: none; } .modal.ks-notice:not([id]) .modal-header .close { position: absolute; top: 14px; right: 14px; margin: 0; } /* the picture: three stacked item cards, the front one with a parcel; any product, not only stickers. For quantity notices ks.js adds the amount asked for as a dark tag */ .ks-notice-ic { position: relative; display: block; width: 84px; height: 70px; } .ks-notice-ic > i { position: absolute; left: 12px; width: 58px; height: 44px; border-radius: 10px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--ks-g200), 0 4px 10px rgba(0, 0, 0, .06); } .ks-notice-ic > i:nth-child(1) { top: 0; transform: rotate(-8deg); } .ks-notice-ic > i:nth-child(2) { top: 6px; transform: rotate(5deg); } .ks-notice-ic > i:nth-child(3) { top: 14px; display: grid; place-items: center; color: var(--ks-o500); } .ks-notice-ic > i:nth-child(3)::before { content: ""; width: 24px; height: 24px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 7.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='m4 7.5 8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 7.5v9L12 21l-8-4.5v-9z'/%3E%3Cpath d='m4 7.5 8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E") center / contain no-repeat; } .ks-notice-ic > b { position: absolute; right: -2px; top: 40px; min-width: 30px; height: 30px; padding: 0 9px; border-radius: 15px; display: grid; place-items: center; background: var(--ks-ink); color: #FFFFFF; font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 3px #FFFFFF; } .modal.ks-notice:not([id]) .modal-body { max-height: none; padding: 10px 0 0; overflow: visible; } .modal.ks-notice:not([id]) .modal-body ul { margin: 0; padding: 0; list-style: none; } .modal.ks-notice:not([id]) .modal-body li { font-size: 16px; line-height: 1.5; color: var(--ks-ink-2); } .modal.ks-notice:not([id]) .modal-body li + li { margin-top: 8px; } .ks-notice-foot { padding-top: 28px; } @media (max-width: 575.98px) { .modal.ks-notice:not([id]) .modal-dialog.modal-xl { margin: 1rem; } .modal.ks-notice:not([id]) .modal-content { padding: 32px 22px 22px; } } /* our own words for the quantity notice on a German product page (ks.js): title and text in the header, JTL's title and list step aside; the second button is quiet */ .modal.ks-notice:not([id])[data-ks-mode="make"] .modal-title, .modal.ks-notice:not([id])[data-ks-mode="left"] .modal-title, .modal.ks-notice:not([id])[data-ks-mode="full"] .modal-title, .modal.ks-notice:not([id])[data-ks-mode="make"] .modal-body, .modal.ks-notice:not([id])[data-ks-mode="left"] .modal-body, .modal.ks-notice:not([id])[data-ks-mode="full"] .modal-body { display: none; } .ks-notice-copy:empty { display: none; } .ks-notice-t { margin: 2px 0 8px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--ks-ink); } .ks-notice-m { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ks-ink-2); } .ks-notice-m b { font-weight: 500; color: var(--ks-ink); } .ks-notice-foot .btn-primary { display: flex; align-items: center; justify-content: center; gap: 8px; } .ks-notice-foot .btn-primary svg { width: 20px; height: 20px; flex: none; } .ks-notice-foot .ks-notice-2nd { height: 48px; margin-top: 8px; border: 0; border-radius: 980px; background: var(--ks-g100); color: var(--ks-ink); font-size: 16px; box-shadow: none; } .ks-notice-foot .ks-notice-2nd:hover { background: var(--ks-g200); color: var(--ks-ink); } /* the machine: the gantry runs down the sheet, the head shuttles, printed keys appear behind it */ .ks-notice-ic.is-machine { width: 220px; height: 132px; } .ks-mc-bed { position: absolute; left: 30px; right: 30px; bottom: 0; height: 8px; border-radius: 4px; background: var(--ks-g200); } .ks-mc-rail { position: absolute; top: 6px; bottom: 6px; left: 30px; width: 8px; border-radius: 4px; background: linear-gradient(180deg, var(--ks-g50), var(--ks-g200)); } .ks-mc-rail.is-r { left: auto; right: 30px; } .ks-mc-sheet { position: absolute; left: 50px; right: 50px; top: 14px; height: 108px; border-radius: 8px; background: #FFFFFF; box-shadow: 0 0 0 1px var(--ks-g200), 0 6px 14px rgba(0, 0, 0, .07); } .ks-mc-rows { position: absolute; top: 12px; left: 12px; right: 12px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; } .ks-mc-rows i { height: 11px; border-radius: 3px; background: var(--ks-o400); transform: scale(0); animation: ks-mc-dot 4s ease-out infinite; } /* a few keys stay unprinted, so it reads as a layout */ .ks-mc-rows i:nth-child(9), .ks-mc-rows i:nth-child(16), .ks-mc-rows i:nth-child(22), .ks-mc-rows i:nth-child(29) { background: var(--ks-g200); } .ks-mc-gantry { position: absolute; left: 22px; right: 22px; top: 2px; height: 22px; z-index: 2; border-radius: 11px; background: linear-gradient(180deg, #FFFFFF, var(--ks-g50)); box-shadow: 0 0 0 1px var(--ks-g200), 0 8px 18px rgba(0, 0, 0, .12); animation: ks-mc-down 4s cubic-bezier(.4, 0, .2, 1) infinite; } .ks-mc-head { position: absolute; top: -6px; left: 22px; width: 30px; height: 28px; border-radius: 8px; background: var(--ks-ink); box-shadow: 0 5px 10px rgba(0, 0, 0, .2); animation: ks-mc-travel .5s cubic-bezier(.65, 0, .35, 1) infinite alternate; } .ks-mc-head::before { content: ""; position: absolute; left: 6px; top: 6px; width: 5px; height: 5px; border-radius: 50%; background: var(--ks-o400); box-shadow: 0 0 6px var(--ks-o400); animation: ks-mc-blink .3s steps(2) infinite; } .ks-mc-head::after { content: ""; position: absolute; left: 11px; bottom: -8px; width: 8px; height: 9px; border-radius: 0 0 4px 4px; background: var(--ks-g600); } .ks-notice-ic.is-machine > b { right: 4px; top: auto; bottom: 14px; z-index: 4; white-space: nowrap; padding: 0 11px; } @keyframes ks-mc-down { 0% { transform: translateY(0); } 80%, 92% { transform: translateY(84px); } 100% { transform: translateY(0); } } @keyframes ks-mc-travel { from { transform: translateX(0); } to { transform: translateX(118px); } } @keyframes ks-mc-blink { to { opacity: .3; } } @keyframes ks-mc-dot { 0% { transform: scale(0); } 6% { transform: scale(1.15); } 9%, 92% { transform: scale(1); } 100% { transform: scale(0); } } .ks-mc-rows i:nth-child(1) { animation-delay: 0.15s; } .ks-mc-rows i:nth-child(2) { animation-delay: 0.20s; } .ks-mc-rows i:nth-child(3) { animation-delay: 0.25s; } .ks-mc-rows i:nth-child(4) { animation-delay: 0.30s; } .ks-mc-rows i:nth-child(5) { animation-delay: 0.35s; } .ks-mc-rows i:nth-child(6) { animation-delay: 0.40s; } .ks-mc-rows i:nth-child(7) { animation-delay: 0.77s; } .ks-mc-rows i:nth-child(8) { animation-delay: 0.82s; } .ks-mc-rows i:nth-child(9) { animation-delay: 0.87s; } .ks-mc-rows i:nth-child(10) { animation-delay: 0.92s; } .ks-mc-rows i:nth-child(11) { animation-delay: 0.97s; } .ks-mc-rows i:nth-child(12) { animation-delay: 1.02s; } .ks-mc-rows i:nth-child(13) { animation-delay: 1.39s; } .ks-mc-rows i:nth-child(14) { animation-delay: 1.44s; } .ks-mc-rows i:nth-child(15) { animation-delay: 1.49s; } .ks-mc-rows i:nth-child(16) { animation-delay: 1.54s; } .ks-mc-rows i:nth-child(17) { animation-delay: 1.59s; } .ks-mc-rows i:nth-child(18) { animation-delay: 1.64s; } .ks-mc-rows i:nth-child(19) { animation-delay: 2.01s; } .ks-mc-rows i:nth-child(20) { animation-delay: 2.06s; } .ks-mc-rows i:nth-child(21) { animation-delay: 2.11s; } .ks-mc-rows i:nth-child(22) { animation-delay: 2.16s; } .ks-mc-rows i:nth-child(23) { animation-delay: 2.21s; } .ks-mc-rows i:nth-child(24) { animation-delay: 2.26s; } .ks-mc-rows i:nth-child(25) { animation-delay: 2.63s; } .ks-mc-rows i:nth-child(26) { animation-delay: 2.68s; } .ks-mc-rows i:nth-child(27) { animation-delay: 2.73s; } .ks-mc-rows i:nth-child(28) { animation-delay: 2.78s; } .ks-mc-rows i:nth-child(29) { animation-delay: 2.83s; } .ks-mc-rows i:nth-child(30) { animation-delay: 2.88s; } @media (prefers-reduced-motion: reduce) { .ks-mc-gantry, .ks-mc-head, .ks-mc-head::before, .ks-mc-rows i { animation: none; } .ks-mc-rows i { transform: none; } .ks-mc-gantry { transform: translateY(84px); } } /* ---------- Phone menu (off-canvas, snippets/categories_mega.tpl): rows with pictures, subcategories as tiles ---------- */ .ks-mn-text { display: inline; } @media (max-width: 991.98px) { #mainNavigation.navbar-collapse { width: 100%; max-width: 100%; background: #FFFFFF; } #mainNavigation .nav-mobile-header { padding: 10px 18px 0; } #mainNavigation .nav-mobile-header-hr { display: none; } #mainNavigation .nav-mobile-header .navbar-toggler { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--ks-g100); display: grid; place-items: center; } #mainNavigation .nav-offcanvas-title { font-size: 15px; font-weight: 500; color: var(--ks-g800); } /* close button on the right, title or back pill on the left (NOVA has them the other way round) */ #mainNavigation .nav-mobile-header > .row { flex-direction: row-reverse; flex-wrap: nowrap; } #mainNavigation .nav-mobile-header-toggler { display: flex; justify-content: flex-end; } #mainNavigation .nav-mobile-header-name { margin-left: 0 !important; } #mainNavigation span.nav-offcanvas-title { display: block; padding-left: 4px; font-size: 20px; font-weight: 500; letter-spacing: -.01em; } #mainNavigation a.nav-offcanvas-title[data-menu-back] { height: 40px; padding: 0 16px 0 10px; border-radius: 980px; background: var(--ks-g100); color: var(--ks-g800); align-items: center; gap: 4px; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: background-color 150ms ease-out, transform 120ms var(--ks-out); } #mainNavigation a.nav-offcanvas-title[data-menu-back]:not(.d-none) { display: inline-flex; } #mainNavigation a.nav-offcanvas-title[data-menu-back]:active { background: var(--ks-g200, #E1E0DF); transform: scale(.97); } #mainNavigation a.nav-offcanvas-title[data-menu-back] .fas { display: none; } #mainNavigation a.nav-offcanvas-title[data-menu-back]::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 4.5 7 10l5.5 5.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M12.5 4.5 7 10l5.5 5.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } /* NOVA slides the first level away by its own width: no side padding here, or its edge stays visible */ #mainNavigation .nav-mobile-body { padding: 8px 0 32px; overflow-x: hidden; } #mainNavigation .nav-mobile-body > .navbar-nav { padding-left: 14px; padding-right: 14px; } /* first level: picture, name, the first subcategory names */ #mainNavigation .nav-mobile-body > .navbar-nav > .nav-item > .nav-link { display: flex; align-items: center; gap: 14px; min-height: 76px; padding: 9px 6px; border-radius: 18px; font-size: 17px; font-weight: 500; color: var(--ks-g800); } #mainNavigation .nav-mobile-body > .navbar-nav > .nav-item > .nav-link:active { background: var(--ks-g50); } .ks-mn-img { flex: none; width: 58px; height: 58px; border-radius: 16px; overflow: hidden; background: var(--ks-g50); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .04); } .ks-mn-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .ks-mn-text { display: block; flex: 1; min-width: 0; } .ks-mn-text .nav-mobile-heading, .ks-mn-text .text-truncate { display: block; white-space: normal; line-height: 1.25; } .ks-mn-hint { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; line-height: 1.35; color: var(--ks-ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* wishlist and compare below the categories: quiet rows */ #mainNavigation .nav-mobile-body > .navbar-nav > li.d-lg-none hr { margin: 12px 6px; border-color: var(--ks-g100); } #mainNavigation .nav-mobile-body > .navbar-nav > .wl-nav-scrollbar-item > .nav-link, #mainNavigation .nav-mobile-body > .navbar-nav > .comparelist-nav-scrollbar-item > .nav-link { min-height: 48px; font-size: 15px; font-weight: 400; color: var(--ks-ink); } /* second level: title with "Alle anzeigen", picture tiles in two columns */ .ks-mn-sub { padding: 4px 18px 24px; } /* tiles and heading line up with the back pill and the close button (18px edge) */ #mainNavigation .dropdown-menu > .dropdown-body:has(> .ks-mn-sub) { padding: 0; } /* wishlist and compare counters: quiet grey pills instead of NOVA's orange squares */ #mainNavigation .nav-mobile-body .badge.product-count { min-width: 24px; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--ks-g100); color: var(--ks-g800); font-size: 12px; font-weight: 500; line-height: 22px; } .ks-mn-subhead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 6px 0 14px; } .ks-mn-subtitle { font-size: 22px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: var(--ks-g800); } #mainNavigation .ks-mn-all { flex: none; padding: 0; font-size: 14px; font-weight: 500; color: var(--ks-o600); } .ks-mn-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } @media (min-width: 576px) { .ks-mn-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } } #mainNavigation .ks-mn-tile { display: block; height: 100%; padding: 10px; border-radius: 18px; background: var(--ks-g50); color: var(--ks-g800); text-decoration: none; } .ks-mn-tile:active { background: var(--ks-g100); } .ks-mn-timg { display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #FFFFFF; } .ks-mn-timg img { width: 100%; height: 100%; object-fit: cover; display: block; } .ks-mn-tname { display: block; margin: 8px 2px 0; font-size: 14px; font-weight: 500; line-height: 1.3; } .ks-mn-thint { display: block; margin: 1px 2px 0; font-size: 12px; color: var(--ks-ink-2); } } /* Anrede, Titel, Vorname, Nachname in one row (SPEC_FORM 5, checkout/inc_billing_address_form.tpl and checkout/customer_shipping_address.tpl). The form row is the size container, so the columns follow the width of the form (registration, checkout, account), not of the window. "Keine Anrede" needs about 175 px per column: 4/12 from 540 px row width, 3/12 from 720 px. Without container queries NOVA's 6 / 6, 6 stays. */ .form-row:has(> .ks-nr), .row:has(> .ks-nr) { container-type: inline-size; } @container (min-width: 540px) { .ks-nr.ks-m4 { flex: 0 0 33.333333%; max-width: 33.333333%; } .ks-nr-d540 { display: none; } } @container (min-width: 720px) { .ks-nr.ks-w2 { flex: 0 0 16.666667%; max-width: 16.666667%; } .ks-nr.ks-w3 { flex: 0 0 25%; max-width: 25%; } .ks-nr.ks-w4 { flex: 0 0 33.333333%; max-width: 33.333333%; } .ks-nr.ks-w5 { flex: 0 0 41.666667%; max-width: 41.666667%; } .ks-nr-d720 { display: none; } } /* ---------- Product page proof blocks (snippets/ks/pd_proof.tpl, 3.19.0) ---------- "Nahaufnahme": the sticker's layers in 3D, exploded when the block comes into view. "Ihre Taste messen": choose the measured key size, get a plain answer. Full-bleed grey band without overflow: the band is painted by box-shadow and clip-path, the content keeps the container width. The key face is the article's picture (--ks-face). */ @property --ks-e { syntax: ""; inherits: true; initial-value: 0; } .ks-proof { margin: 48px 0 0; } /* pinned while the layers open (top and wrapper height come from ks.js) */ .ks-close-pin .ks-close { position: sticky; } /* the grey band keeps only its own inner padding, not the page's section spacing */ .ks-proof .ks-close { padding-top: 0; padding-bottom: 0; } .ks-close { position: relative; background: var(--ks-g100); box-shadow: 0 0 0 100vmax var(--ks-g100); clip-path: inset(0 -100vmax); } .ks-close-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: center; padding: 20px 0; } .ks-close-h, .ks-fit-h { margin: 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; font-weight: 500; letter-spacing: -.03em; color: var(--ks-g900); text-wrap: balance; } .ks-close-sub { margin: 16px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.5; color: var(--ks-g700); } .ks-close-note { margin: 24px 0 0; max-width: 40ch; font-size: 14px; color: var(--ks-g600); } .ks-close-btn { display: inline-flex; align-items: center; gap: 10px; height: 48px; margin-top: 28px; padding: 0 22px; border: 0; border-radius: 980px; background: #FFFFFF; color: var(--ks-g900); font-size: 15px; font-weight: 500; box-shadow: inset 0 0 0 1px var(--ks-g300); cursor: pointer; transition: box-shadow 160ms var(--ks-out), transform 140ms var(--ks-out); } .ks-close-btn:hover { box-shadow: inset 0 0 0 1px var(--ks-g500); } .ks-close-btn:active { transform: scale(.98); } .ks-close-btn:focus-visible { outline: 0; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ks-o600); } .ks-close-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ks-xk { position: relative; container-type: inline-size; height: 530px; --ks-e: 0; transition: --ks-e 1.1s var(--ks-out); cursor: pointer; -webkit-tap-highlight-color: transparent; } .ks-xk.is-open { --ks-e: 1; } /* scroll-driven: ks.js sets --ks-e every frame, the transition would only lag behind */ .ks-xk.is-scrub { transition: none; } .ks-xk-view { position: absolute; left: 32%; top: 420px; width: 0; height: 0; perspective: 2400px; } .ks-xk-rig { position: absolute; left: -130px; top: -130px; width: 260px; height: 260px; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-38deg); } .ks-xk-rig > * { position: absolute; inset: 0; transform-style: preserve-3d; } .ks-xk-shadow { inset: -40px !important; border-radius: 60px; background: radial-gradient(closest-side, rgba(43, 42, 40, .32), rgba(43, 42, 40, 0)); transform: translateZ(-2px) translate(14px, 14px); filter: blur(6px); } .ks-xk-sl { border-radius: 30px; background: #1E1D1C; } .ks-xk-sl.is-top { background: linear-gradient(135deg, #3B3A37, #2A2927); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } .ks-xk-layer { inset: 9px !important; border-radius: 22px; } .ks-xk-glue { background: radial-gradient(rgba(255, 255, 255, .75) 1.2px, transparent 1.6px) 0 0 / 9px 9px, rgba(236, 232, 224, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65); transform: translateZ(calc(36.5px + var(--ks-e) * 60px)); opacity: calc(.25 + var(--ks-e) * .75); } .ks-xk-print { background: #2E2D2B var(--ks-face) center / cover no-repeat; transform: translateZ(calc(37px + var(--ks-e) * 170px)); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .25); } .ks-xk-top { background: linear-gradient(118deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .14) 30%, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, .06) 70%, rgba(255, 255, 255, .34) 100%); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75), 0 0 0 .5px rgba(43, 42, 40, .12); transform: translateZ(calc(38px + var(--ks-e) * 290px)); } /* transparent stickers: a matte film instead of the glossy laminate */ /* opaque stickers: glue, white film, print, laminate; spread a little wider so the four labels keep apart */ .ks-xk-film { background: #F7F6F3; box-shadow: inset 0 0 0 1px rgba(43, 42, 40, .08); transform: translateZ(calc(36.8px + var(--ks-e) * 113px)); } .ks-close-opaque .ks-xk-glue { transform: translateZ(calc(36.5px + var(--ks-e) * 20px)); } .ks-close-opaque .ks-xk-print { transform: translateZ(calc(37px + var(--ks-e) * 192px)); } .ks-close-opaque .ks-xk-lb-print { top: calc(-1px * (37 + var(--ks-e) * 192) * .829 - 8px); } .ks-xk-lb-film { top: calc(-1px * (36.8 + var(--ks-e) * 113) * .829 - 8px); } /* not much room for four labels: below 300 px of label width only their titles */ @container (max-width: 750px) { .ks-close-opaque .ks-xk-lb span { display: none; } } .ks-close-opaque .ks-xk-lb-glue { top: calc(-1px * (36.5 + var(--ks-e) * 20) * .829 - 8px); } .ks-close-clear .ks-xk-top { background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); } /* transparent stickers are printed on the film itself, nothing lies above the print: print on top, film below */ .ks-close-clear .ks-xk-print { transform: translateZ(calc(38px + var(--ks-e) * 290px)); } .ks-close-clear .ks-xk-top { transform: translateZ(calc(37px + var(--ks-e) * 170px)); } .ks-xk-labels { position: absolute; left: 32%; top: 420px; width: 0; height: 0; } /* labels end inside the picture's column: no overflow to the right on narrower windows */ .ks-xk-lb { position: absolute; left: 200px; width: min(290px, calc(68cqw - 210px)); --lw: 66px; transform: translateY(-50%); opacity: var(--ks-e); pointer-events: none; } /* while the layers are still close together the labels would overlap: they fade in over the last part only */ .ks-xk-lb:not(.ks-xk-lb-key) { opacity: clamp(0, calc((var(--ks-e) - .65) * 2.86), 1); } .ks-xk-lb::before { content: ""; position: absolute; right: calc(100% + 10px); top: 50%; width: var(--lw); height: 1px; background: var(--ks-g400); transform-origin: right; transform: scaleX(var(--ks-e)); } .ks-xk-lb::after { content: ""; position: absolute; right: calc(100% + 6px + var(--lw)); top: calc(50% - 3px); width: 7px; height: 7px; border-radius: 50%; background: var(--ks-g900); box-shadow: 0 0 0 3px var(--ks-g100); } .ks-xk-lb b { display: block; font-size: 17px; font-weight: 500; color: var(--ks-g900); letter-spacing: -.01em; } .ks-xk-lb span { display: block; margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--ks-g700); } .ks-xk-lb-top { top: calc(-1px * (38 + var(--ks-e) * 290) * .829 - 8px); } .ks-xk-lb-print { top: calc(-1px * (37 + var(--ks-e) * 170) * .829 - 8px); } .ks-xk-lb-glue { top: calc(-1px * (36.5 + var(--ks-e) * 60) * .829 - 8px); } .ks-xk-lb-key { top: 6px; } .ks-xk-lb-key b { font-weight: 400; color: var(--ks-g700); } .ks-fit-in { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 56px; align-items: start; padding: 24px 0 72px; } /* the block keeps only its own inner padding, not the page's section spacing */ .ks-proof .ks-fit { padding-top: 0; padding-bottom: 0; } .ks-fit-howto { margin: 16px 0 0; max-width: 72ch; font-size: 16px; color: var(--ks-g700); } .ks-fit-steps { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 0; padding: 0; border: 0; } .ks-fit-steps legend { margin-bottom: 12px; padding: 0; font-size: 15px; font-weight: 500; color: var(--ks-g900); } .ks-fit-kc[hidden] { display: none; } .ks-fit-seg { position: relative; margin: 0; } .ks-fit-seg input { position: absolute; opacity: 0; } .ks-fit-seg span { display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border-radius: 980px; box-shadow: inset 0 0 0 1px var(--ks-g300); font-size: 15px; color: var(--ks-g900); cursor: pointer; font-variant-numeric: tabular-nums; transition: box-shadow 160ms var(--ks-out), background-color 160ms var(--ks-out), color 160ms var(--ks-out); } .ks-fit-seg span:hover { box-shadow: inset 0 0 0 1px var(--ks-g500); } .ks-fit-seg input:checked + span { background: var(--ks-g900); color: #FFFFFF; box-shadow: none; } .ks-fit-seg input:focus-visible + span { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ks-o600); } .ks-fit-seg span { transition: box-shadow 160ms var(--ks-out), background-color 160ms var(--ks-out), color 160ms var(--ks-out), transform 120ms var(--ks-out); } .ks-fit-seg:active span { transform: scale(.97); } @media (prefers-reduced-motion: reduce) { .ks-fit-seg:active span { transform: none; } } .ks-fit-answer[hidden] { display: none; } .ks-fit-answer { display: flex; gap: 14px; align-items: flex-start; min-height: 104px; margin: 26px 0 0; } .ks-fit-col { min-height: 0; margin-top: 18px; } .ks-fit-badge { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--ks-ok); color: #FFFFFF; } .ks-fit-badge svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ks-fit-answer.is-no .ks-fit-badge { background: #FFFFFF; color: var(--ks-o700); box-shadow: inset 0 0 0 1.5px var(--ks-o700); } .ks-fit-answer b { display: block; font-size: 21px; font-weight: 500; letter-spacing: -.01em; color: var(--ks-g900); } .ks-fit-answer.is-no b { color: var(--ks-o700); } .ks-fit-answer p { margin: 2px 0 0; max-width: 72ch; font-size: 15px; color: var(--ks-g700); } /* nothing measured yet: a quiet prompt, no verdict */ .ks-fit-answer.is-idle .ks-fit-badge { background: var(--ks-g100); color: var(--ks-g700); } .ks-fit-answer.is-idle p { margin-top: 9px; font-size: 16px; color: var(--ks-g900); } .ks-fit-link { display: inline-block; margin-top: 8px; font-size: 15px; color: var(--ks-o800); text-decoration: underline; text-underline-offset: 3px; } .ks-fit-link:hover { color: var(--ks-o800); } /* the verdict card on top of the panel: same height in every state */ /* the verdict: a calm tinted surface, the status word carries the colour; no frame, no side stripe */ .ks-fit-verdict { width: 100%; max-width: 560px; min-height: 128px; margin-top: 28px; padding: 18px 20px 18px; border-radius: 18px; background: rgba(26, 127, 55, .07); --v: var(--ks-ok); } .ks-fit-verdict.is-no { background: rgba(215, 0, 21, .055); --v: var(--ks-error); } .ks-fit-verdict.is-idle { background: var(--ks-g100); --v: var(--ks-g500); } .ks-fit-verdict.is-place { min-height: 0; background: none; padding: 0; } .ks-fit-verdict.is-place .ks-fit-v-top, .ks-fit-verdict.is-place .ks-fit-v-text { display: none; } .ks-fit-v-top { display: flex; align-items: center; gap: 8px; } .ks-fit-verdict .ks-fit-badge { width: 22px; height: 22px; background: none; color: var(--v); box-shadow: none; } .ks-fit-verdict .ks-fit-badge svg { width: 22px; height: 22px; stroke-width: 2.2; } .ks-fit-verdict b { font-size: 21px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--v); } .ks-fit-verdict.is-idle b { color: var(--ks-g900); } .ks-fit-verdict.is-idle .ks-fit-badge { display: none; } .ks-fit-v-text { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--ks-g800); } .ks-fit-v-size { display: flex; justify-content: center; align-items: center; gap: 28px; width: 100%; max-width: 420px; margin: 0 auto 20px; } .ks-fit-v-size > i { width: 1px; height: 32px; background: var(--ks-g300); } .ks-fit-stat { text-align: center; } .ks-fit-stat span { display: block; margin-bottom: 2px; font-size: 13px; font-weight: 400; color: var(--ks-g700); } .ks-fit-stat b { display: block; font-size: 22px; font-weight: 500; letter-spacing: -.01em; color: #1E1D1C; font-variant-numeric: tabular-nums; white-space: nowrap; } @media (max-width: 575.98px) { .ks-fit-v-size { gap: 20px; margin-bottom: 14px; } .ks-fit-stat b { font-size: 19px; } } /* buttons for a fitting size or a better colour of this article */ .ks-fit-chips { margin-top: 10px; } .ks-fit-chips[hidden] { display: none; } .ks-fit-chips > span { display: block; margin-bottom: 6px; font-size: 13px; color: var(--ks-g700); } .ks-fit-chips > div { display: flex; flex-wrap: wrap; gap: 6px; } .ks-fit-chip { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 14px; border: 0; border-radius: 980px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ks-g300); font-size: 13px; color: var(--ks-g900); cursor: pointer; transition: box-shadow 160ms var(--ks-out), transform 120ms var(--ks-out); } .ks-fit-chip:hover { box-shadow: inset 0 0 0 1px var(--ks-g600); } .ks-fit-chip:active { transform: scale(.97); } .ks-fit-chip:focus-visible { outline: 0; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ks-o600); } .ks-fit-chip img { width: 18px; height: 18px; margin-left: -6px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } .ks-fit-col p { margin: 0; } .ks-fit-col .ks-fit-chips { margin-top: 8px; } .ks-fit-verdict .ks-fit-link { margin-top: 10px; font-size: 15px; font-weight: 500; color: var(--ks-g900); text-decoration: none; } .ks-fit-verdict .ks-fit-link::after { content: " \203A"; } .ks-fit-verdict .ks-fit-link:hover { color: var(--ks-g900); text-decoration: underline; } .ks-fit-link[hidden] { display: none; } /* dark or light keys, small, under the drawing; the colour verdict as one line below */ .ks-fit-kc { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin-top: 14px; } .ks-fit-kc > span { font-size: 13px; color: var(--ks-g700); } .ks-fit-kc .ks-fit-switch .ks-fit-seg span { min-width: 0; height: 28px; padding: 0 14px; font-size: 13px; } /* the colour answer: a small tinted card like the size answer, a check or a cross, the sentence in ink */ .ks-fit-col { position: relative; width: 100%; margin: 12px 0 0; padding: 11px 10px 11px 36px; border-radius: 14px; background: rgba(26, 127, 55, .08); font-size: 14px; line-height: 1.4; letter-spacing: -.005em; color: var(--ks-g900); } .ks-fit-col::before { content: ""; position: absolute; left: 11px; top: 12px; width: 18px; height: 18px; background: var(--ks-ok); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; } .ks-fit-col.is-weak { background: rgba(215, 0, 21, .055); } .ks-fit-col.is-weak p { color: var(--ks-error); } .ks-fit-col.is-weak::before { background: var(--ks-error); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E"); } .ks-fit-col[hidden] { display: none; } /* colour note under the colour tiles (transparent stickers) */ .ks-fit-ruler { display: grid; place-items: center; padding: 28px; border-radius: 28px; background: var(--ks-g50); } /* 2/3 to 1/3 only where the drawing still gets enough room */ @media (min-width: 992px) and (max-width: 1199.98px) { .ks-fit-in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; } } /* desktop: the drawing stays in view while the customer works through the choices on the left */ @media (min-width: 992px) { .ks-fit-ruler { position: sticky; top: calc(var(--ks-header-h, 69px) + 24px); } } /* "not square?" opens the height row */ .ks-fit-sq { display: inline-flex; align-items: center; gap: 10px; margin: 16px 0 0; font-size: 15px; color: var(--ks-g900); cursor: pointer; } .ks-fit-sq input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ks-fit-sq i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--ks-g400); transition: background-color 160ms var(--ks-out), box-shadow 160ms var(--ks-out); } .ks-fit-sq i svg { width: 14px; height: 14px; fill: none; stroke: #FFFFFF; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transition: opacity 120ms var(--ks-out); } .ks-fit-sq:hover i { box-shadow: inset 0 0 0 1.5px var(--ks-g600); } .ks-fit-sq input:checked + i { background: var(--ks-g900); box-shadow: none; } .ks-fit-sq input:checked + i svg { opacity: 1; } .ks-fit-sq input:focus-visible + i { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ks-o600); } .ks-fit-sq[hidden], .ks-fit-hs[hidden] { display: none; } .ks-fit-hs { margin-top: 18px; } /* dark or light keys: one switch, the white thumb on the chosen side */ .ks-fit-switch { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: 980px; background: var(--ks-g200); } .ks-fit-switch .ks-fit-seg span { justify-content: center; min-width: 92px; height: 38px; padding: 0 18px; box-shadow: none; color: var(--ks-g700); } /* each half as wide as the wider word: the white thumb fills its half on both sides */ .ks-fit-switch .ks-fit-seg { display: flex; } .ks-fit-switch .ks-fit-seg span { flex: 1; } .ks-fit-switch .ks-fit-seg span:hover { box-shadow: none; color: var(--ks-g900); } .ks-fit-switch .ks-fit-seg input:checked + span { background: #FFFFFF; color: var(--ks-g900); box-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .06); } .ks-fit-switch .ks-fit-seg input:focus-visible + span { box-shadow: 0 0 0 2px var(--ks-o600); } .ks-fit-ruler svg { width: 100%; max-width: 420px; height: auto; overflow: visible; font-family: var(--ks-font); } @media (max-width: 991.98px) { .ks-close-in, .ks-fit-in { grid-template-columns: 1fr; gap: 24px; } .ks-close-in { padding: 40px 0 28px; } .ks-fit-in { padding: 16px 0 48px; } /* phones and tablets: the key alone, the layer names as a list under it */ .ks-xk { height: auto; padding-top: 500px; cursor: default; overflow: hidden; } .ks-xk-view { left: 50%; top: 360px; } .ks-xk-labels { position: static; width: auto; height: auto; display: grid; gap: 14px; } .ks-xk-lb, .ks-xk-lb:not(.ks-xk-lb-key) { position: static; width: auto; transform: none; opacity: 1; padding-left: 18px; } .ks-xk-lb::before { display: none; } .ks-xk-lb::after { right: auto; left: 0; top: 8px; } .ks-xk-lb-key { display: none; } .ks-fit-ruler { padding: 14px; } /* phones: title, how to measure, the drawing, then the choices and the answer */ .ks-fit-txt { display: contents; } .ks-fit-h { order: 1; } .ks-fit-howto { order: 2; margin-top: -8px; } .ks-fit-ruler { order: 3; } .ks-fit-steps { order: 4; margin-top: 0; } .ks-fit-sq { order: 4; } .ks-fit-verdict { order: 5; margin: -8px 0 0; scroll-margin-bottom: calc(var(--ks-pd-bar-h, 72px) + 16px); } .ks-fit-verdict b { font-size: 18px; } .ks-fit-v-text { font-size: 16px; } } @media (max-width: 575.98px) { .ks-xk { padding-top: 440px; } .ks-xk-view { top: 315px; transform: scale(.8); } } @media (prefers-reduced-motion: reduce) { .ks-xk { transition: none; } } /* ---------- Product page FAQ (productdetails/tabs.tpl, 3.20.0) ---------- The product's own questions from the Wawi description and the shared sticker questions, one quiet accordion. */ .ks-faq { border-bottom: 1px solid var(--ks-g200); } .ks-faq-item { border-top: 1px solid var(--ks-g200); } .ks-faq-item > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 0; list-style: none; cursor: pointer; font-size: 17px; font-weight: 500; line-height: 1.35; color: var(--ks-g900); } .ks-faq-item > summary::-webkit-details-marker { display: none; } .ks-faq-item > summary:focus-visible { outline: 0; border-radius: 6px; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ks-o600); } .ks-faq-item > summary svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--ks-g700); stroke-width: 1.8; stroke-linecap: round; transition: transform 200ms var(--ks-out); } .ks-faq-item[open] > summary svg { transform: rotate(45deg); } .ks-faq-a { padding: 0 40px 20px 0; font-size: var(--ks-text); line-height: var(--ks-text-lh); color: var(--ks-ink); } .ks-faq-a > :last-child { margin-bottom: 0; } .ks-faq-a p { margin: 0 0 var(--ks-text-gap); } @media (prefers-reduced-motion: reduce) { .ks-faq-item > summary svg { transition: none; } } /* ---------- Buy zone (3.21.0): variation steps and summary card ---------- productdetails/variation.tpl, productdetails/basket.tpl, snippets/ks/buy_summary.tpl, ks.js initBuy. Design source: _preview/buy/steps.html (phase 1: all steps open). */ /* availability moves into the summary card: the band above keeps only the price (JTL's microdata stays in the DOM) */ #product-offer .product-info .product-offer > div.row:first-of-type:has(~ .ks-sum) { flex-direction: row; justify-content: flex-start; border-bottom: 0; padding-bottom: 4px; margin-bottom: 0; } #product-offer .product-info .product-offer > div.row:first-of-type:has(~ .ks-sum) > .col-12 { display: none; } #product-offer .product-info .product-offer > div.row:first-of-type:has(~ .ks-sum) > .col:first-child { text-align: left; } #product-offer .product-info .product-offer > div.row:first-of-type:has(~ .ks-sum) .price_wrapper .price { color: var(--ks-g900); } /* steps */ #product-offer .ks-steps { margin-top: 20px; border-top: 1px solid var(--ks-line); } #product-offer .ks-steps .variations { margin: 0; } #product-offer .ks-steps .variations > .col { padding: 0; } #product-offer .ks-steps .variations dl { margin: 0; } #product-offer .ks-steps .variation-wrapper { border-bottom: 1px solid var(--ks-line); padding-bottom: 14px; } #product-offer .ks-steps .variation-wrapper dd { margin: 0; padding: 0; } #product-offer .ks-steps .variation-wrapper dd.form-group { margin-bottom: 0; } .ks-step-head { display: flex; align-items: center; gap: 14px; min-height: 60px; margin: 0; padding: 12px 2px 10px; font-weight: 400; scroll-margin-top: calc(var(--ks-header-h, 69px) + 24px); } .ks-step-num { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; font-size: 13px; font-weight: 500; color: var(--ks-g600); font-variant-numeric: tabular-nums; } .ks-step-ring { position: absolute; inset: 0; width: 28px; height: 28px; transform: rotate(-90deg); fill: none; stroke-width: 1.5; } .ks-step-ring .b { stroke: var(--ks-g300); transition: stroke .3s var(--ks-out); } .ks-step-ring .f { stroke: var(--ks-ok); stroke-dasharray: 84; stroke-dashoffset: 84; stroke-linecap: round; transition: stroke-dashoffset .5s var(--ks-out); } .ks-step-n { position: relative; transition: opacity .2s var(--ks-out), transform .3s var(--ks-out); } .ks-step-ck { position: absolute; width: 15px; height: 15px; fill: none; stroke: var(--ks-ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; stroke-dashoffset: 20; transition: stroke-dashoffset .3s var(--ks-out); } .ks-step-head.is-done .ks-step-ring .b { stroke: transparent; } .ks-step-head.is-done .ks-step-ring .f { stroke-dashoffset: 0; } .ks-step-head.is-done .ks-step-n { opacity: 0; transform: scale(.6); } .ks-step-head.is-done .ks-step-ck { stroke-dashoffset: 0; transition-delay: .3s; } .ks-step-name { flex: none; font-size: 16px; font-weight: 500; color: var(--ks-g900); } .ks-step-val { display: flex; align-items: center; gap: 8px; min-width: 0; margin-left: auto; font-size: 15px; color: var(--ks-g700); } .ks-step-vt { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .ks-step-vt.is-miss { color: var(--ks-o700); } .ks-step-sw { flex: none; width: 18px; height: 18px; border-radius: 5px; object-fit: cover; box-shadow: 0 0 0 1px var(--ks-g200); } /* the buy button points here while this step is missing */ .ks-step-head.is-nudge { animation: ks-nudge .5s var(--ks-out); } .ks-step-head.is-nudge .ks-step-ring .b { stroke: var(--ks-o500); } .ks-step-head.is-nudge .ks-step-n { color: var(--ks-o700); } @keyframes ks-nudge { 30% { transform: translateX(5px); } 60% { transform: translateX(-3px); } } /* one option: hover is a light background only; chosen: pale green fill, thin green ring, green check */ .ks-steps .ks-opt { position: relative; margin: 0; border-radius: 14px; cursor: pointer; transition: background-color .2s, box-shadow .2s; } .ks-steps .ks-opt:hover { background: rgba(240, 239, 239, .55); } .ks-steps .ks-opt.is-sel { background: var(--ks-ok-bg); box-shadow: inset 0 0 0 1px var(--ks-ok-ring); } .ks-steps .ks-opt:has(input:focus-visible) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ks-o600); } .ks-steps .ks-opt.not-available { opacity: .45; } /* colour tiles */ #product-offer .ks-steps .ks-tiles { display: grid; grid-template-columns: repeat(var(--ks-cols, 4), minmax(0, 1fr)); gap: 6px; margin: 0; flex-wrap: nowrap; overflow: visible; } .ks-tile { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 4px 10px; text-align: center; } .ks-tile-img { position: relative; display: block; width: 42px; height: 42px; } .ks-tile-img img, .ks-tile-ph { display: block; width: 42px; height: 42px; border-radius: 10px; object-fit: cover; box-shadow: 0 0 0 1px var(--ks-g200); transition: transform .45s var(--ks-out); } .ks-tile-ph { background: var(--ks-g100); } .ks-tile.is-sel .ks-tile-img img { transform: scale(1.06); } .ks-tile-ck { position: absolute; right: -8px; top: -7px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(43, 42, 40, .2); opacity: 0; transform: scale(.4); transition: transform .45s var(--ks-out), opacity .15s; } .ks-tile-ck svg { width: 12px; height: 12px; fill: none; stroke: var(--ks-ok); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .ks-tile.is-sel .ks-tile-ck { opacity: 1; transform: none; } /* "Meistgekauft" on a tile: the flame alone in the warm pill colours, top left of the swatch */ .ks-tile-best { position: absolute; left: -8px; top: -7px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ks-best-bg); box-shadow: inset 0 0 0 1px var(--ks-best-ring); } .ks-tile-best .ks-flame { width: 12px; height: 14px; margin: -1px 0 0; } .ks-tile-name { font-size: 12.5px; line-height: 1.25; color: var(--ks-g800); overflow-wrap: anywhere; } .ks-tile.is-sel .ks-tile-name { color: var(--ks-g900); font-weight: 500; } .ks-tile-diff { min-height: 15px; font-size: 12px; line-height: 1.25; color: var(--ks-g600); font-variant-numeric: tabular-nums; } /* text rows (sizes) */ .ks-fitrow { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 2px 8px; } .ks-fitrow-l { font-size: 13px; color: var(--ks-g700); } .ks-fitrow-a { font-size: 13px; color: var(--ks-o800); white-space: nowrap; text-decoration: none; } .ks-fitrow-a:hover { color: var(--ks-o800); text-decoration: underline; text-underline-offset: 3px; } .ks-rows { display: grid; gap: 2px; } .ks-row { display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 12px; } .ks-row-txt { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; line-height: 1.3; } .ks-row-name { font-size: 15px; color: var(--ks-g900); font-variant-numeric: tabular-nums; } .ks-row-hint { flex-basis: 100%; order: 9; margin-top: -2px; font-size: 12.5px; color: var(--ks-g600); font-variant-numeric: tabular-nums; } .ks-row-end { display: flex; align-items: center; gap: 10px; margin-left: auto; font-size: 13px; color: var(--ks-g700); white-space: nowrap; font-variant-numeric: tabular-nums; } .ks-row-ck { width: 18px; height: 18px; fill: none; stroke: var(--ks-ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: transform .45s var(--ks-out), opacity .15s; } .ks-row.is-sel .ks-row-ck { opacity: 1; transform: none; } /* "Meistgekauft": flat warm pill, thin orange ring, no shadow; the flame sways, one light sweep when it appears */ .ks-tag { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 980px; background: var(--ks-best-bg); box-shadow: inset 0 0 0 1px var(--ks-best-ring); font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: .01em; color: var(--ks-best-ink); white-space: nowrap; animation: ks-tag-in .5s var(--ks-out) both; } .ks-tag::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .85) 50%, transparent 70%); transform: translateX(-120%); animation: ks-tag-shine 1.1s .25s cubic-bezier(.4, 0, .2, 1) both; } .ks-tag .ks-flame { width: 14px; height: 16px; margin: -2px 0 -1px; } .ks-flame { flex: none; overflow: visible; } .ks-flame path { transform-box: fill-box; } .ks-flame .s1 { stop-color: var(--ks-flame-a); } .ks-flame .s2 { stop-color: var(--ks-flame-b); } .ks-flame .s3 { stop-color: var(--ks-flame-c); } .ks-flame .ks-fl-out { transform-origin: 50% 92%; animation: ks-flame 1.6s ease-in-out infinite; } .ks-flame .ks-fl-in { fill: var(--ks-flame-core); transform-origin: 50% 95%; animation: ks-flame-in 1.1s ease-in-out infinite; } @keyframes ks-flame { 0%, 100% { transform: scale(1, 1) rotate(-2deg); } 30% { transform: scale(.96, 1.07) rotate(2deg); } 60% { transform: scale(1.03, .95) rotate(-1deg); } } @keyframes ks-flame-in { 0%, 100% { transform: scale(1, 1); opacity: 1; } 50% { transform: scale(.9, 1.12); opacity: .85; } } @keyframes ks-tag-in { from { opacity: 0; transform: scale(.6) translateY(3px); } to { opacity: 1; transform: none; } } @keyframes ks-tag-shine { to { transform: translateX(120%); } } /* summary card */ #product-offer .ks-sum { margin-top: 24px; padding: 20px; border-radius: 22px; background: var(--ks-g50); } .ks-sum-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .ks-sel-pill { display: inline-flex; align-items: center; height: 30px; padding: 0 13px; border-radius: 980px; background: var(--ks-g200); font-size: 14px; color: var(--ks-g900); white-space: nowrap; } .ks-sel-pill.is-miss { background: transparent; box-shadow: inset 0 0 0 1px var(--ks-g300); color: var(--ks-g600); } .ks-sum-price { margin-left: auto; display: flex; align-items: baseline; gap: 8px; font-size: 18px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; color: var(--ks-g900); } .ks-sum-price small { font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ks-g600); } .ks-avail { display: grid; gap: 10px; margin: 16px 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--ks-g200); } .ks-sum > .ks-avail:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .ks-av { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: 12px; align-items: start; font-size: 14px; line-height: 1.4; color: var(--ks-g700); } .ks-av[hidden] { display: none; } .ks-av b { font-weight: 500; color: var(--ks-g900); } /* what matters most: available, when it ships, the delivery dates */ .ks-av b.ks-av-key { font-weight: 600; } .ks-av-line { color: var(--ks-g900); } .ks-av-sub { display: block; margin-top: 1px; font-size: 12.5px; color: var(--ks-g600); } .ks-av-ic { width: 20px; height: 20px; fill: none; stroke: var(--ks-g800); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ks-av .ks-cd { color: var(--ks-o800); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .4s var(--ks-out); } .ks-av .ks-cd.is-soon { color: var(--ks-ok); } .ks-clock .ks-hand { transform-box: view-box; transform-origin: 12px 13px; transition: transform .18s cubic-bezier(.3, 1.4, .5, 1); } /* availability dot in JTL's status colour, a slow ring while available */ .ks-live { position: relative; justify-self: center; width: 8px; height: 8px; margin-top: 6px; border-radius: 50%; background: var(--ks-ok); } .ks-live-1 { background: var(--ks-o500); } .ks-live-0 { background: var(--ks-error); } .ks-live-2::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--ks-ok); animation: ks-live 2.4s var(--ks-out) infinite; } @keyframes ks-live { 0% { transform: scale(1); opacity: .35; } 70%, 100% { transform: scale(3.2); opacity: 0; } } /* buy row inside the card: quantity and button side by side, PayPal below with a little air */ #product-offer .ks-sum #add-to-cart { margin: 0; } #product-offer .ks-sum #add-to-cart .basket-form-inline { margin-bottom: 0; row-gap: 10px; } #product-offer .ks-sum #add-to-cart .basket-form-inline > [class*="col"] { margin-bottom: 0; } #product-offer .ks-sum #add-to-cart .basket-form-inline .btn { margin-bottom: 0; } #product-offer .ks-sum #add-to-cart .form-counter { background: #fff; box-shadow: inset 0 0 0 1px var(--ks-g300); } /* PayPal plugin buttons and its instalment note: only spacing, the markup stays the plugin's */ #product-offer .ks-sum #ppc-productDetails-horizontal-container:not(:empty) { margin-top: 10px; } /* the instalment banner is usually empty but still built a line: no height unless PayPal fills it */ #product-offer #ppc-productDetails-instalment-banner { margin: 0 !important; line-height: 0; font-size: 0; } #product-offer .ppc-standalone-buttons { line-height: 0; } /* one express button in the buy box (PayPal), "Später bezahlen" stays for the cart; full width, one row */ #product-offer #productDetails-ppc-paylater-standalone-button { display: none !important; } #product-offer #productDetails-ppc-paypal-standalone-button { flex: 0 0 100%; max-width: 100%; } /* graphite while a variation is missing (buy column and bottom bar), copper again when all is chosen */ #add-to-cart .btn-primary.ks-need-btn, #add-to-cart .btn-primary.ks-need-btn:not(:disabled):not(.disabled):active, .ks-pd-bar-btn.btn-primary.ks-need, .ks-pd-bar-btn.btn-primary.ks-need:not(:disabled):not(.disabled):active { --ks-b-top: var(--ks-btn-top); --ks-b-base: var(--ks-btn-base); --ks-b-glow: var(--ks-btn-glow); } .ks-need-btn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 575.98px) { #product-offer .ks-sum { padding: 16px 14px 18px; border-radius: 18px; } /* phone: chips and sum stay on one line whatever the sum (owner 2026-11-10: from 10 € it jumped below); the colour chip gives way first, a long colour name ends in "…"; the size stays whole */ .ks-sum-line { flex-wrap: nowrap; gap: 6px; } .ks-sel-pill { flex: none; } .ks-sel-pill:has(.ks-pill-sw) { flex: 0 1 auto; min-width: 0; } .ks-sel-pill:not(.is-miss) { gap: 6px; padding: 0 11px; } .ks-sel-pill:not(.is-miss):has(.ks-pill-sw) { padding-left: 4px; } .ks-pill-sw { flex: none; } .ks-pill-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ks-sum-price { flex: none; gap: 6px; } /* phone: quantity and buy button stay in one row, as in the bottom bar */ #product-offer .ks-sum #add-to-cart .basket-form-inline { flex-wrap: nowrap; column-gap: 10px; margin-left: 0; margin-right: 0; } #product-offer .ks-sum #add-to-cart .basket-form-inline > .col:first-child:has(.form-counter) { flex: 0 0 116px; max-width: 116px; padding: 0; } /* the − and + were 56px each and left the number about 4px; narrower buttons, the number gets the middle */ #product-offer .ks-sum #add-to-cart .form-counter .input-group-prepend, #product-offer .ks-sum #add-to-cart .form-counter .input-group-append { flex: 0 0 38px; } #product-offer .ks-sum #add-to-cart .form-counter .btn { width: 38px; min-width: 38px; padding: 0; } #product-offer .ks-sum #add-to-cart .form-counter .form-control { flex: 1 1 auto; width: auto; min-width: 3ch; padding: 0; font-size: 17px; } #product-offer .ks-sum #add-to-cart .basket-form-inline > .col:first-child:has(.form-counter) + .col { flex: 1 1 0; max-width: none; min-width: 0; padding: 0; } #product-offer .ks-sum #add-to-cart .btn-primary { padding-left: 10px; padding-right: 10px; white-space: nowrap; } #product-offer .ks-sum #add-to-cart .btn-basket-check .fa-shopping-cart { display: none; } .ks-tile { padding: 10px 2px 8px; } .ks-row { padding: 8px 10px; } } @media (prefers-reduced-motion: reduce) { .ks-tag, .ks-tag::after, .ks-flame .ks-fl-out, .ks-flame .ks-fl-in, .ks-live-2::after, .ks-step-head.is-nudge { animation: none; } .ks-tag::after { display: none; } .ks-step-ring .f, .ks-step-ck, .ks-step-n, .ks-tile-ck, .ks-row-ck, .ks-tile-img img, .ks-clock .ks-hand { transition: none; } } /* ---------- Buy zone choice, compact (3.21.1) ---------- The buy column is wider than in the mockup, so the open lists grew long and pale. Options are now filled cards in a grid: colours as swatch + name side by side, sizes as small cards, "Meistgekauft" sits on the card's top edge. Same markup (productdetails/variation.tpl), CSS only. */ #product-offer .ks-steps .variation-wrapper { padding-bottom: 18px; } #product-offer .ks-steps .ks-opt { background: var(--ks-g100); box-shadow: inset 0 0 0 1px transparent; transition: background-color .2s var(--ks-out), box-shadow .2s var(--ks-out), transform .15s var(--ks-out); } #product-offer .ks-steps .ks-opt:hover { background: var(--ks-g200); } #product-offer .ks-steps .ks-opt:active { transform: scale(.98); } #product-offer .ks-steps .ks-opt.is-sel { background: var(--ks-ok-bg); box-shadow: inset 0 0 0 1.5px var(--ks-ok); } #product-offer .ks-steps .ks-opt:has(input:focus-visible) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ks-o600); } /* colours: swatch left, name right */ #product-offer .ks-steps .ks-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; } #product-offer .ks-steps .ks-tile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 60px; padding: 9px 12px 9px 9px; text-align: left; } #product-offer .ks-steps .ks-tile-img, #product-offer .ks-steps .ks-tile-img img, #product-offer .ks-steps .ks-tile-ph { flex: none; width: 40px; height: 40px; } #product-offer .ks-steps .ks-tile-name { flex: 1 1 auto; min-width: 0; font-size: 14px; line-height: 1.25; color: var(--ks-g900); } #product-offer .ks-steps .ks-tile-diff { position: absolute; right: 10px; bottom: 7px; min-height: 0; font-size: 11.5px; } #product-offer .ks-steps .ks-tile-diff:empty { display: none; } #product-offer .ks-steps .ks-tile.is-sel .ks-tile-img img { transform: none; } #product-offer .ks-steps .ks-tile-ck { right: auto; left: 29px; top: -6px; } /* sizes: small cards, name and key hint, check top right, "Meistgekauft" on the top edge */ #product-offer .ks-steps .ks-rows { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px 8px; padding-top: 6px; } #product-offer .ks-steps .ks-row { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 64px; padding: 12px 14px; } #product-offer .ks-steps .ks-row-txt { display: block; } #product-offer .ks-steps .ks-row-name { display: block; font-size: 15px; font-weight: 500; } #product-offer .ks-steps .ks-row-hint { display: block; margin-top: 2px; font-size: 12px; line-height: 1.3; } #product-offer .ks-steps .ks-row-end { position: absolute; right: 10px; top: 10px; margin: 0; } #product-offer .ks-steps .ks-row-diff:empty { display: none; } #product-offer .ks-steps .ks-row-ck { width: 16px; height: 16px; } #product-offer .ks-steps .ks-row .ks-tag { position: absolute; left: 10px; top: -10px; z-index: 1; padding: 2px 8px 2px 6px; font-size: 11px; } #product-offer .ks-steps .ks-fitrow { margin: 0 0 10px; } @media (max-width: 575.98px) { #product-offer .ks-steps .ks-tiles, #product-offer .ks-steps .ks-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- Transparent stickers without a close-up photo (3.21.2) ---------- The print layer becomes clear film with one letter in the chosen colour (--ks-ink, sampled in ks.js), in the corner from Merkmal "Position" (data-c: tr, br, bl, tl). */ .ks-xk-glyph { display: none; position: absolute; font-size: 92px; line-height: 1; font-weight: 400; color: var(--ks-ink, #E1251B); } .ks-proof.is-letter .ks-xk-print { background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); } .ks-proof.is-letter .ks-xk-glyph { display: block; } /* opaque sticker drawn from its Wawi colours: film colour, main language top left, second language bottom right */ .ks-xk-glyph2 { display: none; position: absolute; line-height: 1; font-weight: 400; } /* the key's own letter, shown under a small sticker */ .ks-xk-base { display: none; position: absolute; inset: 0; place-items: center; line-height: 1; font-weight: 400; color: rgba(255, 255, 255, .9); } /* the key's own letter: under every sticker (shines through a transparent one, is covered by an opaque one) */ .ks-proof[data-base]:not([data-base=""]) .ks-xk-base { display: grid; } /* small stickers (5x6 mm): the layers at their real size in their corner of the key, the letter in their middle */ .ks-proof.is-small .ks-xk-rig > .ks-xk-layer { inset: auto !important; left: var(--ks-lx) !important; top: var(--ks-ly) !important; width: var(--ks-lw); height: var(--ks-lh); border-radius: 14px; } .ks-proof.is-small[data-c][data-kind] .ks-xk-glyph { inset: 0; display: grid; place-items: center; } .ks-proof.is-look .ks-xk-print { background: var(--ks-look-bg, #1E1D1C); } .ks-proof.is-look[data-c][data-kind] .ks-xk-glyph { display: grid; place-items: center; inset: 0; color: var(--ks-look-ink, #FFFFFF); } .ks-proof.is-look.has-2[data-c][data-kind] .ks-xk-glyph { display: block; inset: auto; top: 14px; left: 20px; } .ks-proof.is-look.has-2 .ks-xk-glyph2 { display: block; right: 20px; bottom: 12px; color: var(--ks-look-ink2); } /* opaque sticker with only a colour swatch: a plain "A" in the middle of the print layer */ .ks-proof.is-plain[data-c] .ks-xk-glyph { display: grid; place-items: center; inset: 0; font-weight: 400; color: var(--ks-plain-ink, #FFFFFF); } /* the letter alone is the top layer; the film it is printed on is the layer below */ .ks-proof.is-letter .ks-close-clear .ks-xk-print { background: none; box-shadow: none; } /* the second language close to its corner, about 0.7 mm from the sticker's edges */ .ks-proof[data-c="tr"] .ks-xk-glyph { top: 4px; right: 14px; } .ks-proof[data-c="br"] .ks-xk-glyph { bottom: 12px; right: 14px; } .ks-proof[data-c="bl"] .ks-xk-glyph { bottom: 12px; left: 14px; } .ks-proof[data-c="tl"] .ks-xk-glyph { top: 4px; left: 14px; } /* ---------- "Kunden kauften dazu" (snippets/ks/xsell_buy.tpl, js/ks.js initXsell) ---------- Words left, a row of cards that runs to the right edge of the window. --ks-xb-l / --ks-xb-r: distance from the block to the window edges, set by ks.js. */ .ks-xb { --ks-xb-card: clamp(240px, calc(16.67vw + 20px), 400px); --ks-xb-gap: 20px; --ks-xb-l: 0px; --ks-xb-r: 0px; --ks-xb-out: cubic-bezier(.23, 1, .32, 1); padding: 72px 0 88px; } .ks-xb-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; align-items: start; } /* the words stay under the header while the row beside them is in view, as in the description block */ .ks-xb-copy { position: sticky; top: calc(var(--ks-header-h, 168px) + 24px); padding-top: 6px; } .ks-xb-h { margin: 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; font-weight: 500; letter-spacing: -.03em; color: var(--ks-g900); text-wrap: balance; } .ks-xb-lead { margin: 16px 0 0; max-width: 36ch; font-size: 17px; line-height: 1.5; color: var(--ks-g700); text-wrap: pretty; } .ks-xb-ctrl { display: flex; align-items: center; gap: 10px; margin-top: 40px; } .ks-xb-arr { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: #FFFFFF; color: var(--ks-g900); box-shadow: inset 0 0 0 1px var(--ks-g300); transition: transform 150ms var(--ks-xb-out), box-shadow 200ms var(--ks-xb-out), opacity 200ms, background 200ms; } .ks-xb-arr svg, .ks-xb-hint svg, .ks-xc-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ks-xb-arr:hover { box-shadow: inset 0 0 0 1px var(--ks-g500); background: var(--ks-g50); } .ks-xb-arr:active { transform: scale(.94); } .ks-xb-arr svg { grid-area: 1 / 1; transition: opacity 200ms var(--ks-xb-out), transform 300ms var(--ks-xb-out); } .ks-xb-next .i-start { opacity: 0; transform: rotate(-90deg) scale(.6); } .ks-xb-next.is-end .i-next { opacity: 0; transform: translateX(6px) scale(.6); } .ks-xb-next.is-end .i-start { opacity: 1; transform: none; } .ks-xb-arr[disabled] { opacity: .35; cursor: default; box-shadow: inset 0 0 0 1px var(--ks-g300); background: #FFFFFF; } .ks-xb-prog { position: relative; flex: 1; max-width: 132px; height: 2px; margin-left: 14px; border-radius: 2px; background: var(--ks-g200); overflow: hidden; } .ks-xb-prog i { position: absolute; inset: 0 auto 0 0; width: 30%; border-radius: 2px; background: var(--ks-g900); transition: transform 120ms linear; } .ks-xb-hint { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: 13px; color: var(--ks-g600); } .ks-xb-hint svg { width: 18px; height: 18px; } .ks-xb.is-static .ks-xb-ctrl, .ks-xb.is-static .ks-xb-hint { display: none; } .ks-xb-rail { position: relative; min-width: 0; margin-right: calc(var(--ks-xb-r) * -1); } .ks-xb-track { --lf: 0px; display: flex; gap: var(--ks-xb-gap); overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 12px calc(var(--ks-xb-r) + 48px) 24px 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--lf), #000 calc(100% - 128px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--lf), #000 calc(100% - 128px), transparent 100%); cursor: grab; user-select: none; -webkit-user-select: none; outline: none; } .ks-xb-track::-webkit-scrollbar { display: none; } .ks-xb-track.is-free { scroll-snap-type: none; } .ks-xb-track.is-drag { cursor: grabbing; } .ks-xb-track.is-drag a { pointer-events: none; } .ks-xb-track img { -webkit-user-drag: none; } .ks-xc { flex: none; width: var(--ks-xb-card); scroll-snap-align: start; display: flex; flex-direction: column; } .ks-xc-link { display: flex; flex-direction: column; color: inherit; text-decoration: none; } .ks-xc-link:hover { color: inherit; text-decoration: none; } .ks-xc-media { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: clamp(22px, 1.6vw, 28px); background: var(--ks-g50); overflow: hidden; transition: transform 380ms var(--ks-xb-out), box-shadow 380ms var(--ks-xb-out); } .ks-xc-media img { position: absolute; inset: 7%; width: 86%; height: 86%; object-fit: contain; mix-blend-mode: multiply; border-radius: 10px; transition: transform 600ms var(--ks-xb-out), filter 600ms var(--ks-xb-out); } .ks-xc-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 16px; padding: 0 4px; font-size: clamp(16px, calc(.42vw + 10px), 18px); line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--ks-g900); text-wrap: pretty; } .ks-xc-meta { display: flex; align-items: center; min-width: 0; margin-top: 4px; padding: 0 4px; font-size: clamp(13px, calc(.21vw + 10px), 14px); line-height: 1.4; color: var(--ks-g600); white-space: nowrap; } .ks-xc-meta-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ks-xc-meta-c { flex: none; display: inline-flex; align-items: center; gap: 5px; color: var(--ks-g800); } .ks-xc-meta-t + .ks-xc-meta-c::before { content: ""; width: 3px; height: 3px; margin: 0 8px 0 3px; border-radius: 50%; background: var(--ks-g400); } .ks-xc-meta-c img { width: 12px; height: 12px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); } .ks-xc-sw { display: inline-flex; margin-right: 2px; } .ks-xc-sw img { margin-right: -3px; box-shadow: 0 0 0 1.5px #FFFFFF, 0 0 0 2px rgba(0, 0, 0, .1); } .ks-xc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding: 14px 4px 0; } .ks-xc-foot form { margin: 0; } .ks-xc-price { font-size: 17px; font-weight: 500; color: var(--ks-g900); font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .ks-xc-price s { margin-left: 6px; font-size: 13px; font-weight: 400; color: var(--ks-g600); } .ks-xc-cart, .ks-xc-go { flex: none; width: 58px; height: 40px; padding: 0; border: 0; border-radius: 980px; display: grid; place-items: center; cursor: pointer; transition: transform 150ms var(--ks-xb-out), box-shadow 200ms var(--ks-xb-out), background 200ms; } .ks-xc-cart { background: linear-gradient(180deg, var(--ks-buy-top), var(--ks-buy-base)); color: #FFFFFF; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px rgba(var(--ks-buy-glow), .3); } .ks-xc-cart:hover { transform: scale(1.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 16px rgba(var(--ks-buy-glow), .45); } .ks-xc-cart:active { transform: scale(.94); } .ks-xc-cart svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } .io-loading .ks-xc-cart { pointer-events: none; opacity: .6; } .ks-xc-go { color: var(--ks-g900); background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ks-g300); } .ks-xc-go:hover { color: var(--ks-g900); } .ks-xc-go svg { width: 18px; height: 18px; stroke-width: 2; transition: transform 300ms var(--ks-xb-out); } @media (hover: hover) { .ks-xc:hover .ks-xc-media { transform: translateY(-2px); box-shadow: 0 10px 24px -18px rgba(43, 42, 40, .22); } .ks-xc:hover .ks-xc-media img { transform: scale(1.02); filter: brightness(1.02); } .ks-xc:hover .ks-xc-go { box-shadow: inset 0 0 0 1px var(--ks-g700); } .ks-xc:hover .ks-xc-go svg { transform: translateX(2px); } } /* NOVA clears box-shadow on focused buttons and links ("button:focus", ":focus"); our rings are box-shadows, so after a click the arrow lost its outline. Same rings with more weight, plus a visible keyboard focus. */ .ks-xb .ks-xb-arr, .ks-xb .ks-xb-arr:focus, .ks-xb .ks-xc-go, .ks-xb .ks-xc-go:focus { box-shadow: inset 0 0 0 1px var(--ks-g300); } .ks-xb .ks-xb-arr:not([disabled]):hover { box-shadow: inset 0 0 0 1px var(--ks-g500); } .ks-xb .ks-xc-cart, .ks-xb .ks-xc-cart:focus { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 12px rgba(var(--ks-buy-glow), .3); } .ks-xb .ks-xc-cart:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 6px 16px rgba(var(--ks-buy-glow), .45); } .ks-xb .ks-xb-arr:focus-visible, .ks-xb .ks-xc-go:focus-visible { box-shadow: inset 0 0 0 1px var(--ks-g500), 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ks-o600); } .ks-xb .ks-xc-cart:focus-visible { box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ks-o600); } @media (hover: hover) { .ks-xb .ks-xc:hover .ks-xc-go { box-shadow: inset 0 0 0 1px var(--ks-g700); } } /* arrival when the block comes into view */ .ks-xb.pre .ks-xc { opacity: 0; transform: translateX(48px); } .ks-xb.in .ks-xc { transition: opacity 600ms var(--ks-xb-out), transform 800ms var(--ks-xb-out); transition-delay: calc(min(var(--i, 0), 5) * 70ms); } @media (max-width: 991.98px) { .ks-xb { --ks-xb-card: 228px; --ks-xb-gap: 14px; padding: 48px 0 56px; } .ks-xb-in { grid-template-columns: 1fr; } .ks-xb-copy { position: static; padding: 0; } .ks-xb-ctrl, .ks-xb-hint { display: none; } .ks-xb-rail { margin: 24px calc(var(--ks-xb-r) * -1) 0 calc(var(--ks-xb-l) * -1); } .ks-xb-track { padding: 8px calc(var(--ks-xb-r) + 24px) 20px var(--ks-xb-l); scroll-padding-left: var(--ks-xb-l); cursor: auto; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 56px), transparent); } } @media (prefers-reduced-motion: reduce) { .ks-xb .ks-xc, .ks-xb .ks-xc-media, .ks-xb .ks-xc-media img { transition: none; } .ks-xb.pre .ks-xc { opacity: 1; transform: none; } } /* ========================================================================== "Nicht ganz das Richtige?" (snippets/ks/similar_config.tpl, js/ks.js initSimilarConfig) One big photo of this article; a click on a value on the right shrinks it and slides the choice in beside it, their Merkmale compared below. Tiles carry "Ihr Artikel" / "Ihre Auswahl"; a value that only exists together with other values is pale and says what else changes. ========================================================================== */ .ks-sim { --ks-sim-e: cubic-bezier(.32, .72, 0, 1); padding: 72px 0 88px; } .ks-sim-head { margin-bottom: 40px; } .ks-sim-h { margin: 0; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.08; font-weight: 500; letter-spacing: -.03em; color: var(--ks-g900); text-wrap: balance; } .ks-sim-lead { margin: 14px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.5; color: var(--ks-g700); text-wrap: pretty; } .ks-sim-in { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); column-gap: 64px; align-items: start; } .ks-sim-stage { position: sticky; top: calc(var(--ks-header-h, 168px) + 24px); } .ks-sim-cols { display: grid; grid-template-columns: minmax(0, 1fr) 0px minmax(0, 0fr); align-items: start; transition: grid-template-columns 680ms var(--ks-sim-e); } .ks-sim.is-two .ks-sim-cols { grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); } .ks-sim-arr { display: none; justify-content: center; color: var(--ks-g400); } .ks-sim-arr svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ks-sim-col { min-width: 0; } .ks-sim-pick { grid-column: 3; overflow: hidden; opacity: 0; transform: translateX(28px); transition: opacity 260ms ease, transform 680ms var(--ks-sim-e); } .ks-sim.is-two .ks-sim-pick { opacity: 1; transform: none; transition: opacity 460ms ease 180ms, transform 680ms var(--ks-sim-e); } .ks-sim-pic { position: relative; aspect-ratio: 1; border-radius: 28px; background: var(--ks-g50); overflow: hidden; transition: border-radius 680ms var(--ks-sim-e); } .ks-sim.is-two .ks-sim-pic { border-radius: 22px; } .ks-sim-pic img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; mix-blend-mode: multiply; transition: opacity 380ms ease, transform 520ms var(--ks-sim-e); } .ks-sim-pic img.is-out { opacity: 0; transform: scale(.96); } .ks-sim-txt { margin-top: 16px; } .ks-sim-pick .ks-sim-txt { width: max(100%, 200px); } .ks-sim-lab { height: 28px; max-width: 100%; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 980px; font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ks-sim-lab svg, .ks-sim-mark svg { flex: none; width: 14px; height: 14px; fill: none; stroke: var(--ks-ok); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .ks-sim-lab.is-mine { color: var(--ks-g900); background: var(--ks-o50); box-shadow: inset 0 0 0 1px var(--ks-o200); } .ks-sim-lab.is-pick { color: #FFFFFF; background: var(--ks-g900); } .ks-sim-t { margin-top: 10px; font-size: 17px; line-height: 1.35; font-weight: 500; color: var(--ks-g900); text-wrap: balance; transition: font-size 480ms var(--ks-sim-e); } .ks-sim.is-two .ks-sim-t { font-size: 15px; min-height: 2.7em; } .ks-sim-p { margin-top: 2px; font-size: 15px; color: var(--ks-g600); font-variant-numeric: tabular-nums; } .ks-sim-p .d { margin-left: 6px; font-size: 13px; } .ks-sim .up { color: var(--ks-o700); } .ks-sim .down { color: var(--ks-ok); } /* from one choice to another: the words fade shortly, the photo crossfades */ .ks-sim-sw { transition: opacity 170ms ease; } .ks-sim.is-swap .ks-sim-sw { opacity: 0; } .ks-sim-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 680ms var(--ks-sim-e), opacity 220ms ease; } .ks-sim.is-two .ks-sim-more { grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows 680ms var(--ks-sim-e), opacity 460ms ease 240ms; } .ks-sim-more-in { min-height: 0; overflow: hidden; } .ks-sim-specs { margin-top: 18px; } .ks-sim-r { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr); padding: 7px 0 6px; border-top: 1px solid var(--ks-g200); } .ks-sim-r h4 { grid-column: 1 / -1; margin: 0 0 3px; font-size: 12px; font-weight: 500; letter-spacing: .01em; color: var(--ks-g600); } .ks-sim-v { font-size: 14px; line-height: 1.4; color: var(--ks-g900); text-wrap: balance; } .ks-sim-v:last-child { grid-column: 3; } .ks-sim-v.is-eq { color: var(--ks-g500); } .ks-sim-v.is-diff { color: var(--ks-o700); font-weight: 500; } .ks-sim-v.is-diff::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ks-o500); margin: 0 7px 2px 0; vertical-align: middle; } .ks-sim-sum, .ks-sim-lab-m { display: none; } .ks-sim-act { position: relative; margin-top: 18px; min-height: 48px; } .ks-sim-hint { margin: 0; padding-top: 12px; font-size: 14px; line-height: 1.45; color: var(--ks-g500); transition: opacity 300ms ease; } .ks-sim.is-two .ks-sim-hint { opacity: 0; } .ks-sim-go { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; gap: 18px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity 260ms ease, transform 480ms var(--ks-sim-e); } .ks-sim.is-two .ks-sim-go { opacity: 1; transform: none; pointer-events: auto; transition: opacity 420ms ease 300ms, transform 520ms var(--ks-sim-e) 300ms; } .ks-sim .ks-sim-clear { padding: 0; border: 0; background: none; font-size: 14px; color: var(--ks-g600); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ks-g300); } .ks-sim .ks-sim-clear:hover { color: var(--ks-g900); } .ks-sim-btn, .ks-sim-btn:focus { text-decoration: none; } .ks-sim-btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 24px; border-radius: 980px; background: var(--ks-g900); color: #FFFFFF; font-size: 16px; font-weight: 500; transition: background 200ms ease, transform 150ms ease; } .ks-sim-btn:hover { background: #000000; color: #FFFFFF; text-decoration: none; } .ks-sim-btn:active { transform: scale(.97); } .ks-sim-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* right side: groups of values */ .ks-sim-groups { display: flex; flex-direction: column; gap: 36px; } .ks-sim-g h3 { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 500; letter-spacing: -.015em; color: var(--ks-g900); } .ks-sim-g h3 span { color: var(--ks-g500); } .ks-sim-opts { margin-top: 14px; padding-top: 6px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 10px; } .ks-sim .ks-sim-o, .ks-sim .ks-sim-o:focus { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 72px; padding: 12px 18px; border: 0; border-radius: 16px; text-align: left; cursor: pointer; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ks-g300); transition: box-shadow 200ms ease, transform 150ms ease, background 200ms ease; } .ks-sim .ks-sim-o:hover { box-shadow: inset 0 0 0 1px var(--ks-g500); } .ks-sim .ks-sim-o:active { transform: scale(.98); } .ks-sim .ks-sim-o:focus-visible { box-shadow: inset 0 0 0 1px var(--ks-g500), 0 0 0 2px #FFFFFF, 0 0 0 4px var(--ks-o600); } .ks-sim-o b { font-size: 16px; line-height: 1.3; font-weight: 500; color: var(--ks-g900); text-wrap: balance; } .ks-sim-o i { margin-top: 2px; font-style: normal; font-size: 13px; line-height: 1.35; color: var(--ks-g600); } .ks-sim-o .pd { position: absolute; right: 16px; top: 13px; font-size: 13px; } .ks-sim-o.has-pd b { padding-right: 64px; } .ks-sim .ks-sim-o[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--ks-g900); animation: ks-sim-on 260ms ease; } @keyframes ks-sim-on { from { box-shadow: inset 0 0 0 1px var(--ks-g300); } } .ks-sim .ks-sim-o.is-other { background: var(--ks-g50); box-shadow: inset 0 0 0 1px var(--ks-g200); } .ks-sim .ks-sim-o.is-other:hover { box-shadow: inset 0 0 0 1px var(--ks-g400); } .ks-sim-o.is-other b { color: var(--ks-g600); } .ks-sim-o.is-other i { color: var(--ks-g500); } .ks-sim .ks-sim-o.is-more { align-items: center; color: var(--ks-g700); font-size: 15px; background: transparent; box-shadow: inset 0 0 0 1px var(--ks-g200); } .ks-sim-opts.is-cut .ks-sim-o:nth-child(n+6):not(.is-more) { display: none; } .ks-sim-mark { position: absolute; top: -10px; right: 14px; height: 20px; display: inline-flex; align-items: center; gap: 4px; padding: 0 9px; border-radius: 980px; font-size: 11.5px; font-weight: 500; font-style: normal; line-height: 1; white-space: nowrap; pointer-events: none; } .ks-sim-mark svg { width: 11px; height: 11px; stroke-width: 2.6; } .ks-sim-mark.is-mine { color: var(--ks-g900); background: var(--ks-o50); box-shadow: inset 0 0 0 1px var(--ks-o200); } .ks-sim-mark.is-pick { color: #FFFFFF; background: var(--ks-g900); opacity: 0; } .ks-sim-o[aria-pressed="true"] .ks-sim-mark.is-pick { opacity: 1; animation: ks-sim-mark 320ms var(--ks-sim-e); } @keyframes ks-sim-mark { from { opacity: 0; transform: translateY(3px) scale(.92); } } /* without JavaScript: a plain list */ .ks-sim-plain { margin: 0; padding: 0; list-style: none; } .ks-sim-plain li { padding: 10px 0; border-top: 1px solid var(--ks-g200); font-size: 15px; } .ks-sim-plain span { color: var(--ks-g600); } @media (max-width: 991.98px) { .ks-sim { padding: 48px 0 64px; } .ks-sim-head { margin-bottom: 20px; } .ks-sim-in { grid-template-columns: 1fr; } /* the photo becomes a small bar that stays under the header while choosing */ /* the phone header scrolls away, so the bar sticks to the very top */ .ks-sim-stage { top: 0; z-index: 4; margin: 0 -16px; padding: 10px 16px 12px; background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--ks-g200); } .ks-sim-cols { align-items: center; } .ks-sim.is-two .ks-sim-cols { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); } .ks-sim.is-two .ks-sim-arr { display: flex; } /* a small comparison card: two halves (picture, label, price), under them only what changes */ .ks-sim-col { display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: 10px; align-items: center; } .ks-sim.is-two .ks-sim-col { grid-template-columns: 56px minmax(0, 1fr); column-gap: 8px; } .ks-sim-pic, .ks-sim.is-two .ks-sim-pic { border-radius: 12px; } .ks-sim-txt { margin: 0; } .ks-sim-pick .ks-sim-txt { width: auto; } .ks-sim-lab { height: 22px; padding: 0 8px; font-size: 11.5px; } .ks-sim.is-two .ks-sim-lab { padding: 0 7px; font-size: 11px; } .ks-sim.is-two .ks-sim-own .ks-sim-lab svg { display: none; } .ks-sim-pick [data-sc-plab] { display: none; } .ks-sim-lab-m { display: inline-flex; } .ks-sim-t { margin-top: 4px; font-size: 13px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ks-sim.is-two .ks-sim-t { display: none; } .ks-sim-p { margin-top: 4px; font-size: 14px; font-weight: 500; color: var(--ks-g900); } .ks-sim-p .d { display: block; margin: 1px 0 0; font-size: 12px; font-weight: 400; } .ks-sim-specs, .ks-sim-hint { display: none; } .ks-sim-sum { display: grid; gap: 5px; margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--ks-g200); font-size: 13px; line-height: 1.35; } .ks-sim-sum:empty { display: none; } .ks-sim-dl { display: grid; grid-template-columns: 76px minmax(0, 1fr); column-gap: 8px; } .ks-sim-dl .k { color: var(--ks-g500); } .ks-sim-dl .v { color: var(--ks-g400); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ks-sim-dl .a { color: var(--ks-g600); } .ks-sim-dl b { font-weight: 500; color: var(--ks-o700); } .ks-sim-act { margin-top: 0; min-height: 0; } .ks-sim-go { position: static; display: none; margin-top: 8px; } .ks-sim.is-two .ks-sim-go { display: flex; } .ks-sim .ks-sim-clear { font-size: 13px; } .ks-sim-btn { height: 38px; padding: 0 16px; font-size: 14px; } .ks-sim-groups { margin-top: 28px; gap: 28px; } .ks-sim-g h3 { font-size: 19px; } .ks-sim-opts { gap: 16px 8px; } .ks-sim .ks-sim-o, .ks-sim .ks-sim-o:focus { min-height: 64px; padding: 10px 14px; } .ks-sim-o b { font-size: 15px; } .ks-sim-o .pd { position: static; margin-top: 2px; } .ks-sim-o.has-pd b { padding-right: 0; } } @media (prefers-reduced-motion: reduce) { .ks-sim-pick, .ks-sim.is-two .ks-sim-pick { transform: none; } .ks-sim-cols, .ks-sim-more { transition-duration: 240ms; } } /* ---------- buy zone review 3.36 ---------- the old price as a quiet struck-through figure next to the price; "Meistgekauft" as a small text pill on tiles too; no step numbers (only the check once chosen), no step ring at all for a single step; 2 size options in 2 columns */ #product-offer .price_wrapper .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px; } #product-offer .price_wrapper .price .ks-old { font-size: 18px; font-weight: 400; color: var(--ks-g500); letter-spacing: 0; } #product-offer .price_wrapper .old-price-dynamic[hidden] { display: none !important; } .ks-tile-tag { margin-top: -3px; font-size: 11.5px; font-weight: 600; line-height: 1.2; letter-spacing: .01em; color: var(--ks-best-ink); } .ks-tile-tag + .ks-tile-diff:empty { display: none; } .ks-tag { animation: none; } .ks-tag::after { display: none; } .ks-step-n { display: none; } #product-offer .ks-steps:not(:has(.ks-step-head ~ .ks-step-head)) .ks-step-num { display: none; } #product-offer .ks-steps .ks-rows:has(> .ks-row:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } #product-offer .ks-steps .ks-tiles:has(> .ks-tile:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ks-fitrow { justify-content: flex-end; } /* ---------- buy zone 3.37 ---------- chosen values in bold; the colour note as two small keys (dark and light) with the chosen colour on them and the better colours as chips; free delivery line in place of the PayPal buttons (those stay in the cart) */ .ks-step-vt:not(.is-miss) { font-weight: 600; color: var(--ks-g900); } .ks-sel-pill:not(.is-miss) { font-weight: 600; } #product-offer .ks-sum #ppc-productDetails-horizontal-container, #product-offer .ks-sum .ppc-standalone-buttons, #product-offer #ppc-productDetails-instalment-banner { display: none !important; } .ks-free { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--ks-g200); } .ks-free-ic { flex: none; width: 22px; height: 22px; fill: none; stroke: var(--ks-g800); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .ks-free-body { flex: 1; min-width: 0; } .ks-free-text { margin: 0 0 7px; font-size: 14px; line-height: 1.35; color: var(--ks-g800); } .ks-free-text b { font-weight: 600; color: var(--ks-g900); } .ks-free-bar { display: block; height: 4px; border-radius: 4px; background: var(--ks-g200); overflow: hidden; } .ks-free-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ks-o600); transition: width .6s var(--ks-out), background-color .3s; } .ks-free.is-done .ks-free-bar i { background: var(--ks-ok); } .ks-free.is-done .ks-free-text b { color: var(--ks-ok); } .ks-free.is-done .ks-free-ic { stroke: var(--ks-ok); } /* colour tiles in a row (swatch left): "Meistgekauft" as a second line under the name, the name keeps its width */ #product-offer .ks-steps .ks-tile:has(.ks-tile-tag) .ks-tile-name { padding-bottom: 16px; } #product-offer .ks-steps .ks-tile-tag { position: absolute; left: 61px; bottom: 12px; margin: 0; white-space: nowrap; } /* help card above the colour tiles: "Unsicher bei der Farbe?" and the keyboard colour switch; colours hard to see on those keys dimmed; each names the reason, in red */ .ks-kchelp { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; padding: 12px 12px 12px 16px; border-radius: 16px; background: var(--ks-g50); } .ks-kchelp p { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 1.35; color: var(--ks-g700); } .ks-kchelp b { display: block; font-size: 14px; font-weight: 600; color: var(--ks-g900); } .ks-kcsw { flex: none; } .ks-kcsw.ks-fit-switch .ks-fit-seg span { min-width: 0; height: 30px; padding: 0 15px; font-size: 13.5px; } .ks-tile .ks-tile-img, .ks-tile .ks-tile-name { transition: opacity .3s var(--ks-out); } .ks-tile[data-ks-weak] .ks-tile-img, .ks-tile[data-ks-weak] .ks-tile-name { opacity: .38; } .ks-tile[data-ks-weak].is-sel .ks-tile-img, .ks-tile[data-ks-weak].is-sel .ks-tile-name { opacity: .75; } .ks-tile:has(.ks-tile-hint) .ks-tile-tag { display: none; } .ks-tile-hint { margin-top: -3px; font-size: 11.5px; font-weight: 600; line-height: 1.2; color: var(--ks-error); } #product-offer .ks-steps .ks-tile:has(.ks-tile-hint) .ks-tile-name { padding-bottom: 16px; } #product-offer .ks-steps .ks-tile-hint { position: absolute; left: 61px; bottom: 12px; margin: 0; white-space: nowrap; } /* the chosen colour looks the same everywhere: a white pill with a round swatch and the name (step head and summary); the summary's other values in the same white pill without a swatch */ .ks-step-val:has(.ks-step-sw) { flex: none; gap: 8px; height: 36px; padding: 0 14px 0 5px; border-radius: 980px; background: #fff; box-shadow: inset 0 0 0 1px var(--ks-g300); } .ks-step-val .ks-step-sw { width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); } .ks-step-val:has(.ks-step-sw) .ks-step-vt { font-size: 15px; font-weight: 500; } .ks-sel-pill:not(.is-miss) { gap: 8px; height: 36px; padding: 0 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--ks-g300); font-weight: 500; } .ks-sel-pill:not(.is-miss):has(.ks-pill-sw) { padding-left: 5px; } .ks-pill-sw { flex: none; width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } .ks-pill-sw, .ks-step-val .ks-step-sw { outline: 1px solid rgba(0, 0, 0, .1); outline-offset: -1px; } /* "Welche Größe passt?" directly under the step name "Größe" */ .ks-step-nm { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .ks-step-nm .ks-fitrow-a { font-size: 13px; line-height: 1.3; } .ks-step-nm .ks-fitrow-a[hidden] { display: none; } /* colours, 3.38.6: "Meistgekauft" as our flame in the tile's top right corner; NOVA's big swatch preview over the gallery on hover is never shown; narrower tiles (4 in a row where the buy column allows, 2 on phones) */ #product-offer .variation-image-preview { display: none !important; } #product-offer .ks-steps .ks-tile .ks-tile-best { left: auto; right: 6px; top: 6px; width: 20px; height: 20px; } #product-offer .ks-steps .ks-tile .ks-tile-best .ks-flame { width: 12px; height: 14px; } @media (min-width: 576px) { #product-offer .ks-steps .ks-tiles { grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); } #product-offer .ks-steps .ks-tile { gap: 10px; min-height: 54px; padding: 8px 10px 8px 8px; } #product-offer .ks-steps .ks-tile:has(.ks-tile-best) { padding-right: 26px; } #product-offer .ks-steps .ks-tile-img, #product-offer .ks-steps .ks-tile-img img, #product-offer .ks-steps .ks-tile-ph { width: 34px; height: 34px; } #product-offer .ks-steps .ks-tile-name { font-size: 13.5px; } #product-offer .ks-steps .ks-tile-ck { left: 23px; } #product-offer .ks-steps .ks-tile-hint { left: 52px; bottom: 9px; } #product-offer .ks-steps .ks-tile:has(.ks-tile-hint) .ks-tile-name { padding-bottom: 15px; } } /* "noch nicht gemessen" in the stat block: words at text size, same line height as the figures */ .ks-fit-stat b.is-open { font-size: 15px; font-weight: 400; line-height: 26px; letter-spacing: 0; color: var(--ks-g600); } @media (max-width: 575.98px) { .ks-fit-stat b.is-open { font-size: 14px; line-height: 23px; } } /* ---------- language keys in the categories (snippets/ks/lang_key.tpl) ---------- the key of "Nahaufnahme" in warm dark grey: slices in 3D, letters on the top face, turned back by 3deg; bi = German letter top left, the language letter in its corner (Wawi "Position"), mono = one letter in the middle. Angles and sizes: shop owner, _preview/lang-key-tuner.html */ .ks-3k { position: relative; display: block; width: 104px; height: 80px; flex: none; perspective: 2400px; } .ks-3k-rig { position: absolute; left: 50%; top: 50%; width: 66px; height: 66px; margin: -36px 0 0 -33px; transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-36deg); transition: transform .45s var(--ks-out); } .ks-3k-rig > span { position: absolute; inset: 0; border-radius: 10px; } .ks-3k-sh { inset: -14px !important; border-radius: 26px !important; background: radial-gradient(closest-side, rgba(40, 38, 35, .24), rgba(40, 38, 35, 0)); transform: translate(9px, 9px); filter: blur(6px); } .ks-3k-con { inset: 1px !important; background: rgba(30, 28, 25, .30); filter: blur(1.4px); transform: translate(1.5px, 1.5px); } .ks-3k-top { display: block; transform: translateZ(9px) scale(.95); background: radial-gradient(120% 120% at 30% 25%, #E9E8E5 0%, #DCDAD6 55%, #CFCDC8 100%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .7), inset 0 0 0 .5px rgba(0, 0, 0, .06), inset 0 2px 6px rgba(0, 0, 0, .03); } .ks-3k-top span { position: absolute; font-weight: 400; line-height: 1; color: #46433F; transform: rotateZ(-3deg); } .ks-3k-top .b { left: 8px; top: 6px; font-size: 26px; } .ks-3k-top .f { right: 8px; bottom: 6px; font-size: 26px; color: #D7341A; } .ks-3k.c-tr .ks-3k-top .f { top: 6px; bottom: auto; } .ks-3k.is-mono .ks-3k-top .b { display: none; } .ks-3k.is-mono .ks-3k-top .f { left: 50%; top: 50%; right: auto; bottom: auto; font-size: 30px; color: #46433F; transform: translate(-50%, -50%) rotateZ(-3deg); } .ks-lk[aria-current] .ks-3k-top { box-shadow: inset 0 0 0 2px var(--ks-blue); } .ks-lk .ks-3k { width: 104px; height: 80px; } .ks-sc-img .ks-3k { height: 84px; } /* the key 1.42 times as large inside the subcategory tiles (drawn larger, the tile layout stays); the narrow row of other languages keeps the normal size, there the keys would overlap */ .ks-sc-img .ks-3k-rig { scale: 1.42 1.42 1.42; } @media (max-width: 575.98px) { .ks-sc-img .ks-3k-rig { scale: 1.25 1.25 1.25; } } @media (max-width: 575.98px) { .ks-sc-img .ks-3k { height: 64px; transform: scale(.8); } } @media (prefers-reduced-motion: reduce) { .ks-3k-rig { transition: none; } } /* language keys in the mega menu: the same key, scaled to the picture box (desktop 64 px / 96 px, phone tile) */ .ks-mm-img.is-key { overflow: visible; } .ks-mm-img.is-key .ks-3k, .ks-mn-timg.is-key .ks-3k { width: 100%; height: 100%; } .ks-mm-img.is-key .ks-3k-rig { scale: .68 .68 .68; translate: 0 3px; } .ks-mm-tiles.is-few .ks-mm-img.is-key .ks-3k-rig { scale: 1.1 1.1 1.1; } .ks-mn-timg.is-key { display: block; overflow: visible; } .ks-mn-timg.is-key .ks-3k-rig { scale: 1.5 1.5 1.5; } @media (min-width: 576px) { .ks-mn-timg.is-key .ks-3k-rig { scale: 1.3 1.3 1.3; } } /* subcategory tiles filled grey like the filter pills (ks-fchip): grey at rest, white with the copper line on hover */ .ks-sc { background: var(--ks-g50); border-color: var(--ks-g100); transition: border-color 200ms var(--ks-out), background-color 200ms var(--ks-out), box-shadow 300ms var(--ks-out), transform 300ms var(--ks-out); } .ks-sc:hover { background: #FFFFFF; } /* category names under the tiles and language keys: larger and bolder, the language reads at first glance */ .ks-sc-name { font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; color: var(--ks-g900); } .ks-lk { font-size: 14.5px; font-weight: 600; } @media (max-width: 575.98px) { .ks-sc-name { font-size: 14.5px; } } /* inside a language: the other languages as the same grey tiles, the current one white with the copper line */ .ks-langrow.ks-subcats { margin-bottom: 20px; } .ks-sc[aria-current] { background: #FFFFFF; border-color: var(--ks-o500); box-shadow: inset 0 0 0 1px var(--ks-o500); } /* special keys (category_config.tpl $ksSpecialKeys): the same 3D key in another look */ /* contrast: black key, large yellow letter, the look of the stickers for the visually impaired */ .ks-3k.st-contrast .ks-3k-top { background: radial-gradient(120% 120% at 30% 25%, #3A3836 0%, #262523 55%, #1C1B1A 100%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 .5px rgba(0, 0, 0, .4); } .ks-3k.st-contrast .ks-3k-sh { background: radial-gradient(closest-side, rgba(20, 19, 18, .34), rgba(20, 19, 18, 0)); } .ks-3k.is-mono.st-contrast .ks-3k-top .f { font-size: 36px; font-weight: 500; color: #FFED00; } /* lern: a light blue sticker on the grey key, the home row letter with its bump below */ .ks-3k.st-lern .ks-3k-top::before { content: ""; position: absolute; inset: 4px; border-radius: 7px; background: radial-gradient(120% 120% at 30% 25%, #CDEBFA 0%, #A9DAF4 60%, #8DCBEE 100%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .6), 0 .5px 0 rgba(0, 0, 0, .16); } .ks-3k.is-mono.st-lern .ks-3k-top .f { color: #1E1D1C; margin-top: -3px; } .ks-3k.st-lern .ks-3k-top .bump { left: 50%; top: 50%; width: 8px; height: 2.4px; margin: 11px 0 0 -5px; border-radius: 2px; background: #2A2826; transform: rotateZ(-3deg); } /* colour tiles with long names (variation.tpl is-wide): three in a row, the name in full at its normal size */ @media (min-width: 576px) { #product-offer .ks-steps .ks-tiles.is-wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } } #product-offer .ks-steps .ks-tile-name { overflow-wrap: break-word; word-break: normal; hyphens: manual; } /* "Welche Art passt?": the same tiles as the language tiles (grey, drawn 3D key, bold name), four in a row, larger */ .ks-types { gap: 14px; } .ks-type { background: var(--ks-g50); border: 1px solid var(--ks-g100); border-radius: 22px; box-shadow: none; padding: 18px 20px 20px; transition: border-color 200ms var(--ks-out), background-color 200ms var(--ks-out), box-shadow 300ms var(--ks-out), transform 300ms var(--ks-out); } .ks-type:hover { background: #FFFFFF; border-color: var(--ks-o300); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(43, 42, 40, .08); } .ks-type[aria-expanded="true"] { background: #FFFFFF; border-color: var(--ks-o500); box-shadow: inset 0 0 0 1px var(--ks-o500); } .ks-type .stage { position: relative; height: 170px; margin: 0 0 14px; display: block; } .ks-type .stage .ks-3k { position: absolute; inset: 0; width: 100%; height: 100%; } .ks-type .stage .ks-3k-rig { scale: 2.05 2.05 2.05; } .ks-type .h { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ks-g900); margin-top: 4px; } /* Oben-Rechts: the key's own letter sits in the middle (keyboards with it low left do not exist), the corner top right is free for the sticker (shop owner 2026-11-09); the same on every Oben-Rechts key */ .ks-3k.is-bi.c-tr .ks-3k-top .b { left: 46%; top: 58%; transform: translate(-50%, -50%) rotateZ(-3deg); } .ks-3k.is-bi.c-tr .ks-3k-top .f { right: 6px; top: 5px; font-size: 19px; } /* mini: one small sticker in the corner, its edge just visible */ .ks-3k.st-mini .ks-3k-top .f { right: 6px; bottom: 6px; padding: 2px 3px 1px; font-size: 14px; border-radius: 2px; background: rgba(255, 255, 255, .5); box-shadow: 0 0 0 .6px rgba(43, 42, 40, .22); } /* deck: opaque film over the whole key, light main letter, the language letter in its colour */ .ks-3k.st-deck .ks-3k-top { background: radial-gradient(120% 120% at 30% 25%, #3A3836 0%, #262523 55%, #1C1B1A 100%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 .5px rgba(0, 0, 0, .4); } .ks-3k.st-deck .ks-3k-top .b { color: #F4F3F0; } .ks-3k.st-deck .ks-3k-top .f { color: #57C1EC; } @media (max-width: 991.98px) { .ks-type .stage { height: 140px; } .ks-type .stage .ks-3k-rig { scale: 1.7 1.7 1.7; } } @media (max-width: 575.98px) { .ks-type { padding: 12px 12px 16px; } .ks-type .stage { height: 110px; margin-bottom: 8px; } .ks-type .stage .ks-3k-rig { scale: 1.35 1.35 1.35; } .ks-type .h { font-size: 17px; } } /* ---------- filter bar above the products (snippets/ks/filter_table.tpl, mockup _preview/cat-filter-B.html) ---------- */ .ks-filter.is-src { display: none; } .ks-fbar { position: relative; z-index: 20; display: flex; align-items: center; gap: 12px; min-height: 52px; margin: 6px 0 14px; } .ks-fbar-l { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; } .ks-fbar-r { margin-left: auto; display: flex; align-items: center; gap: 18px; white-space: nowrap; } .ks-fbar-cnt { font-size: 14px; color: var(--ks-g500); } .ks-fbar-ic { display: none; position: relative; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; border: 1px solid var(--ks-g100); background: var(--ks-g50); color: var(--ks-g800); cursor: pointer; flex: none; } .ks-fbar-ic b { position: absolute; top: -3px; right: -3px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px; background: var(--ks-g900); color: #fff; font-size: 10.5px; font-weight: 500; display: grid; place-items: center; box-shadow: 0 0 0 2px #fff; } .ks-fbar-reset { font-size: 13.5px; color: var(--ks-link); margin-left: 4px; white-space: nowrap; } /* a control at rest looks like the filter chips: grey, copper line on hover; chosen = the white pill of the buy box */ .ks-fc { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px 0 15px; border-radius: 980px; border: 1px solid var(--ks-g100); background: var(--ks-g50); color: var(--ks-g800); font: inherit; font-size: 14px; white-space: nowrap; cursor: pointer; flex: none; transition: border-color 150ms ease-out, background-color 150ms ease-out; } .ks-fc:hover { background: #fff; border-color: var(--ks-o300); } .ks-fpop.is-open > .ks-fc { background: #fff; border-color: var(--ks-g300); } .ks-fc.is-set { background: #fff; border-color: transparent; box-shadow: inset 0 0 0 1px var(--ks-g300); font-weight: 500; color: var(--ks-g900); } .ks-fc-lbl { font-weight: 400; color: var(--ks-g500); } .ks-fc-chev { width: 10px; height: 10px; flex: none; opacity: .65; transition: transform 200ms var(--ks-out); } .ks-fpop.is-open .ks-fc-chev { transform: rotate(180deg); opacity: 1; } .ks-fc-n { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--ks-g800); color: #fff; font-size: 11px; font-weight: 500; } /* Art: a switch, two or three values */ .ks-seg { display: inline-flex; padding: 3px; border-radius: 980px; background: var(--ks-g100); flex: none; } .ks-seg > * { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 14px; border-radius: 980px; font-size: 14px; color: var(--ks-g700); white-space: nowrap; text-decoration: none; } .ks-seg > a:hover { color: var(--ks-g900); text-decoration: none; } .ks-seg > .on { background: #fff; color: var(--ks-g900); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .05); } .ks-seg small { font-size: 12px; color: var(--ks-g400); font-weight: 400; } /* sorting on the right: plain text with a chevron */ .ks-fsort { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; border: 0; background: none; font: inherit; font-size: 14px; color: var(--ks-g800); cursor: pointer; } .ks-fsort > span { color: var(--ks-g500); } /* the small list under a button */ .ks-fpop { position: relative; } .ks-fpop-panel { position: absolute; left: 0; top: calc(100% + 10px); z-index: 30; width: 320px; padding: 8px; border-radius: 18px; background: #fff; translate: var(--ks-fpop-shift, 0) 0; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 14px 40px rgba(43, 42, 40, .14), 0 2px 6px rgba(43, 42, 40, .06); animation: ks-fpop-in 180ms var(--ks-out); } .ks-fpop-panel[hidden] { display: none; } .ks-fpop.is-right .ks-fpop-panel { left: auto; right: 0; width: 260px; } @keyframes ks-fpop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .ks-fpop-h { margin: 8px 12px 6px; font-size: 13px; color: var(--ks-g500); } .ks-fopt { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; color: var(--ks-g900); text-decoration: none; } .ks-fpop-panel.is-keys .ks-fopt { padding: 6px 12px 6px 6px; } .ks-fopt:hover { background: var(--ks-g50); color: var(--ks-g900); text-decoration: none; } .ks-fopt-ico { position: relative; width: 56px; height: 46px; flex: none; border-radius: 10px; background: var(--ks-g50); overflow: hidden; } .ks-fopt:hover .ks-fopt-ico { background: #fff; } .ks-fopt-ico .ks-3k { position: absolute; inset: 0; width: 100%; height: 100%; } .ks-fopt-ico .ks-3k-rig { scale: .78 .78 .78; } .ks-fopt-t { flex: 1; min-width: 0; } .ks-fopt-t b { display: block; font-size: 15px; font-weight: 500; } .ks-fopt-t i { display: block; font-style: normal; font-size: 13px; color: var(--ks-g500); margin-top: 1px; } .ks-fopt-c { font-size: 13px; color: var(--ks-g400); min-width: 14px; text-align: right; } .ks-fopt-chk { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--ks-g300); flex: none; } .ks-fopt-chk svg { width: 12px; height: 12px; opacity: 0; } .ks-fopt.is-sel .ks-fopt-chk { background: var(--ks-o500); box-shadow: none; } .ks-fopt.is-sel .ks-fopt-chk svg { opacity: 1; } .ks-fpop-f { margin: 6px 4px 2px; padding: 10px 8px 4px; border-top: 1px solid var(--ks-g100); font-size: 13.5px; } .ks-fpop-f a { color: var(--ks-link); } /* NOVA's sort, items per page and view switch: replaced by the bar (the page numbers stay) */ #main-wrapper:has(.ks-fbar) .productlist-page-nav-header-m .displayoptions { display: none; } /* phones: one line that scrolls sideways, a round filter button first; count and sorting go into the sheet */ @media (max-width: 767.98px) { .ks-fbar { margin: 0 -16px 10px; padding: 0 16px; } .ks-fbar-l { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 4px 0; } .ks-fbar-l::-webkit-scrollbar { display: none; } .ks-fbar-ic { display: inline-grid; } .ks-fbar-r, .ks-fc-more, .ks-fbar-reset { display: none; } .ks-fpop { position: static; } .ks-fpop-panel { left: 16px; right: 16px; width: auto; translate: none; } /* the full filter comes up from below as a sheet, with the sorting */ .ks-fdrawer { top: 0 !important; } .ks-fdrawer-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 88%; border-radius: 22px 22px 0 0; transform: translateY(24px); } .ks-fdrawer-panel::before { content: ""; display: block; width: 36px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--ks-g300); } .ks-fdrawer .ks-filter-sort { display: table-row; } } /* the bar sits right under "Alle ... Aufkleber."; the count is in the bar, NOVA's row above the grid goes unless it pages */ #main-wrapper:has(.ks-fbar) .ks-advisor { padding-bottom: 0; } #main-wrapper:has(.ks-fbar) .ks-advisor #ks-alle { margin-bottom: 4px; } #main-wrapper:has(.ks-fbar) .productlist-page-nav-header-m:not(:has(.pagination)) { display: none; } /* the filter controls inside the sticky bar after scrolling (ks.js initSubBar): the current category, a thin line, then the same controls a little smaller; the other categories step aside meanwhile */ .ks-subbar-f { display: none; } .ks-subbar.is-merged .ks-subbar-in { justify-content: flex-start; } .ks-subbar.is-merged .ks-subbar-links { flex: none; overflow: visible; -webkit-mask-image: none; mask-image: none; } .ks-subbar.is-merged .ks-subbar-links > a:not([aria-current]) { display: none; } .ks-subbar.is-merged .ks-subbar-f { display: flex; align-items: center; min-width: 0; margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--ks-g200); } .ks-subbar-f .ks-fbar-l { flex-wrap: nowrap; } .ks-subbar-f .ks-fc { height: 34px; background: #fff; } .ks-subbar-f .ks-fc.is-set { box-shadow: inset 0 0 0 1px var(--ks-g300); } .ks-subbar-f .ks-seg { background: rgba(0, 0, 0, .06); } .ks-subbar-f .ks-seg > * { height: 28px; } .ks-subbar-f .ks-fpop-panel { top: calc(100% + 12px); } @media (max-width: 767.98px) { /* phones: the round filter button and the chosen filters only; everything opens in the sheet */ .ks-subbar.is-merged .ks-subbar-f { margin-left: 10px; padding-left: 10px; } .ks-subbar-f .ks-fpop:not(:has(.is-set)), .ks-subbar-f .ks-seg { display: none; } .ks-subbar-f .ks-fbar-ic { width: 32px; height: 32px; background: #fff; } .ks-subbar-f .ks-fpop-panel { position: fixed; top: calc(var(--ks-header-h, 56px) + 52px); } } @media (max-width: 767.98px) { /* little room on phones: no parent crumb while merged, the chosen filter without its label */ .ks-subbar.is-merged .ks-subbar-title, .ks-subbar.is-merged .ks-subbar-sep { display: none; } .ks-subbar-f .ks-fc-lbl, .ks-subbar-f .ks-fc-chev { display: none; } .ks-subbar-f .ks-fbar-l { overflow: hidden; } .ks-subbar-f .ks-fc.is-set { max-width: 44vw; overflow: hidden; padding: 0 12px; } } /* "Welche Art passt?" on a full-width grey band (as "Nahaufnahme"), the tiles white on it */ .ks-adv-band { position: relative; margin: 8px 0 48px; padding: 52px 0 56px; background: var(--ks-g100); box-shadow: 0 0 0 100vmax var(--ks-g100); clip-path: inset(0 -100vmax); } .ks-adv-band > .ks-h2 { margin-top: 0; } .ks-adv-band .ks-type { background: #FFFFFF; border-color: transparent; } .ks-adv-band .ks-type:hover { background: #FFFFFF; border-color: var(--ks-o300); box-shadow: 0 12px 30px rgba(43, 42, 40, .10); } .ks-adv-band .ks-type[aria-expanded="true"] { border-color: var(--ks-o500); } .ks-adv-band .ks-type-info, .ks-adv-band .ks-type-info::before { background: #FFFFFF; } @media (max-width: 575.98px) { .ks-adv-band { padding: 36px 0 40px; margin-bottom: 32px; } } /* "Im Vergleich" on a grey band too (trial, shop owner 2026-11-09): white table on grey, alternating with the white grid */ .ks-cmp-band { position: relative; margin-top: 56px; padding: 52px 0 56px; background: var(--ks-g100); box-shadow: 0 0 0 100vmax var(--ks-g100); clip-path: inset(0 -100vmax); } .ks-cmp-band > .ks-h2 { margin-top: 0; } .ks-cmp-band .ks-cmp { background: #FFFFFF; box-shadow: none; } @media (max-width: 575.98px) { .ks-cmp-band { padding: 36px 0 40px; margin-top: 40px; } } /* ---------- category title on a graphite band with a large product photo (language categories, trial) ---------- */ .ks-cat-head.has-hero { position: relative; isolation: isolate; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; min-height: 380px; margin: 4px 0 56px; padding: 64px 0 68px; color: #F4F2EE; background: #201F1D; box-shadow: 0 0 0 100vmax #201F1D; clip-path: inset(0 -100vmax); } .ks-cat-head.has-hero > :not(.ks-cat-hero) { position: relative; z-index: 1; } .ks-cat-head.has-hero .ks-cat-title { color: #FFFFFF; max-width: 9em; } .ks-cat-head.has-hero .ks-cat-side { text-align: left; max-width: 26em; padding: 0; } .ks-cat-head.has-hero .ks-cat-side p { color: #CFCAC2; } .ks-cat-head.has-hero .ks-more { color: #F2A36B; } .ks-cat-head.has-hero .ks-more:hover { color: #FFC9A0; } .ks-cat-head.has-hero > .ks-cat-hero { position: absolute; z-index: 0; top: 0; bottom: 0; left: 38%; right: calc(50% - 50vw); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); } .ks-cat-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } @media (max-width: 767.98px) { .ks-cat-head.has-hero { min-height: 0; padding: 220px 0 36px; margin-bottom: 36px; } .ks-cat-head.has-hero > .ks-cat-hero { left: calc(50% - 50vw); top: 0; bottom: auto; height: 240px; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); } } /* the band and its photo reach the screen edges; nothing may scroll sideways because of them */ #main-wrapper:has(.ks-cat-head.has-hero) { overflow-x: clip; } /* two photos in the band: the second fades in and out slowly over the first (no motion when reduced) */ .ks-cat-hero.is-duo img { position: absolute; inset: 0; } .ks-cat-hero.is-duo img + img { opacity: 0; animation: ks-hero-duo 14s var(--ks-out) 3s infinite; } @keyframes ks-hero-duo { 0%, 8% { opacity: 0; } 22%, 58% { opacity: 1; } 72%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ks-cat-hero.is-duo img + img { animation: none; } } /* plain categories with a band (Weitere Aufkleber): the same title layout as the language categories */ .ks-cat-head.is-plain.has-hero { display: flex; padding: 64px 0 68px; } .ks-cat-head.is-plain.has-hero .ks-cat-title { font-size: clamp(40px, 5.4vw, 76px); line-height: 1.03; letter-spacing: -.04em; max-width: 9em; } .ks-cat-head.is-plain.has-hero .ks-cat-side { margin-top: 0; } .ks-cat-head.is-plain.has-hero .ks-cat-side p { color: #CFCAC2; } /* three photos: the first stays below, the second and the third take turns over it (18 s round) */ .ks-cat-hero.is-trio img { position: absolute; inset: 0; } .ks-cat-hero.is-trio img:nth-child(n+4) { display: none; } .ks-cat-hero.is-trio img:nth-child(2) { opacity: 0; animation: ks-hero-t2 18s var(--ks-out) 2s infinite; } .ks-cat-hero.is-trio img:nth-child(3) { opacity: 0; animation: ks-hero-t3 18s var(--ks-out) 2s infinite; } @keyframes ks-hero-t2 { 0%, 26% { opacity: 0; } 34%, 60% { opacity: 1; } 68%, 100% { opacity: 0; } } @keyframes ks-hero-t3 { 0%, 60% { opacity: 0; } 68%, 92% { opacity: 1; } 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ks-cat-hero.is-trio img { animation: none !important; } } /* the band keeps one height: title two lines at most, the line under it two lines at most */ .ks-cat-head.has-hero .ks-cat-side { max-width: 30em; } .ks-cat-head.has-hero .ks-cat-side p { font-size: 16.5px; line-height: 1.45; } /* one height for every band, also with the advisor link under the line (Russische) */ /* the text starts at a fixed height from the top: up to three lines under the title fit, and the link under it (Russische: "Welche passen zu mir?") hangs below without lifting anything */ @media (min-width: 768px) { .ks-cat-head.has-hero, .ks-cat-head.is-plain.has-hero { justify-content: flex-start; min-height: 440px; padding: 92px 0 56px; } } /* the breadcrumb above the title (plain categories) hangs above it, the title keeps its place */ .ks-cat-head.has-hero .ks-cat-titlebox { position: relative; } .ks-cat-head.has-hero .ks-cat-titlebox .ks-bc { position: absolute; left: 0; bottom: 100%; margin: 0 0 12px; } /* the dark band goes straight into the grey "Welche Art passt?" band; without it a short gap to the filter bar */ .ks-cat-head.has-hero { margin-bottom: 28px; } .ks-cat-head.has-hero + .ks-advisor { padding-top: 0; margin-top: -28px; } .ks-cat-head.has-hero + .ks-advisor .ks-adv-band { margin-top: 0; } /* ---------- language switch inside a language category (prototype _preview/lang-switch.html) ---------- */ .ks-lsw { position: relative; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: center; margin: 0 0 0; padding: 26px 0 30px; } /* grey field from the chosen language to the left screen edge */ .ks-lsw::before { content: ""; position: absolute; z-index: 0; top: 0; bottom: 0; right: calc(100% - 300px - 28px); width: 100vw; background: var(--ks-g100); } .ks-lsw > * { position: relative; z-index: 1; } .ks-lsw-cur { display: flex; flex-direction: column; align-items: center; gap: 10px; } .ks-lsw-key { position: relative; display: block; width: 100%; height: 196px; } .ks-lsw-key .ks-3k { position: absolute; inset: 0; width: 100%; height: 100%; } .ks-lsw-key .ks-3k-rig { scale: 3.05 3.05 3.05; translate: -1px 8px; transition: none; } .ks-lsw-lbl { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; } .ks-lsw-tag { font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--ks-g500); } .ks-lsw-name { font-size: 27px; font-weight: 500; letter-spacing: -.02em; color: var(--ks-g900); } .ks-lsw-h { margin: 0 0 14px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: var(--ks-g900); } .ks-lsw-h span { color: var(--ks-g500); } .ks-lsw-h a { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ks-link); white-space: nowrap; } .ks-lsw-list { columns: 2; column-gap: 40px; max-width: 560px; margin: 0; padding: 0; list-style: none; } .ks-lsw-list li { break-inside: avoid; } .ks-lsw-list a { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 14px; padding: 11px 2px; border-bottom: 1px solid var(--ks-g100); font-size: 16.5px; color: var(--ks-g800); text-decoration: none; transition: color 200ms var(--ks-out); } .ks-lsw-list a:hover { color: var(--ks-link); text-decoration: none; } /* two pills in one: the white one with the count, the arrow on the grey one (same 3 px all round the white one) */ .ks-lsw-list small { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 3px 11px 3px 3px; border-radius: 980px; background: var(--ks-g100); font-size: 12px; color: var(--ks-g600); white-space: nowrap; transition: background-color 200ms var(--ks-out), color 200ms var(--ks-out); } .ks-lsw-list small:empty { display: none; } .ks-lsw-list small em { font-style: normal; padding: 2px 9px; border-radius: 980px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06); color: var(--ks-g700); } .ks-lsw-list small::after { content: ""; width: 6px; height: 6px; border-right: 1.3px solid currentColor; border-top: 1.3px solid currentColor; transform: rotate(45deg); flex: none; } .ks-lsw-list a:hover small { background: var(--ks-o100); color: var(--ks-o700); } @media (max-width: 767.98px) { .ks-lsw { grid-template-columns: 1fr; gap: 22px; padding-top: 0; } .ks-lsw::before { right: auto; left: calc(50% - 50vw); width: 100vw; bottom: auto; height: 230px; top: 0; } .ks-lsw-cur { padding-top: 14px; height: 216px; } .ks-lsw-key { height: 150px; } .ks-lsw-key .ks-3k-rig { scale: 2.3 2.3 2.3; translate: 0 6px; } .ks-lsw-name { font-size: 23px; } .ks-lsw-h { font-size: 18px; } .ks-lsw-h a { margin: 4px 0 0; display: flex; } .ks-lsw-list { columns: 1; } } .ks-lsw-h a, .ks-lsw-h a:hover { text-decoration: none; } /* ---------- mega menu with many subcategories (categories_mega.tpl, prototype _preview/megamenu-list.html) ---------- */ .ks-mm-split { display: grid; grid-template-columns: 404px minmax(0, 1fr); gap: 40px; align-items: start; } .ks-mm-cap { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--ks-g500); } .ks-mm-four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ks-mm-four .ks-mm-cap { grid-column: 1 / -1; margin-bottom: -2px; } .ks-mm-big { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 12px 14px; border-radius: 18px; background: var(--ks-g50); border: 1px solid var(--ks-g100); color: var(--ks-g900); text-decoration: none; transition: background-color 200ms var(--ks-out), border-color 200ms var(--ks-out); } .ks-mm-big:hover { background: #fff; border-color: var(--ks-o300); color: var(--ks-g900); text-decoration: none; } .ks-mm-bigkey { position: relative; display: block; width: 100%; height: 104px; } .ks-mm-bigkey .ks-3k { position: absolute; inset: 0; width: 100%; height: 100%; } .ks-mm-bigkey .ks-3k-rig { scale: 1.42 1.42 1.42; } /* no lift on hover in the menu (shop owner) */ .ks-mm-big:hover .ks-3k-rig { transform: rotateX(56deg) rotateZ(-36deg); } .ks-mm-bigname { font-size: 15.5px; font-weight: 600; letter-spacing: -.005em; } .ks-mm-list { columns: 2; column-gap: 32px; margin: 0; padding: 0; list-style: none; } .ks-mm-list li { break-inside: avoid; } .ks-mm-list a { display: grid; grid-template-columns: minmax(0, 1fr) 112px; align-items: center; gap: 12px; padding: 10px 2px; border-bottom: 1px solid var(--ks-g100); font-size: 15.5px; color: var(--ks-g800); text-decoration: none; transition: color 200ms var(--ks-out); } .ks-mm-list a:hover { color: var(--ks-link); text-decoration: none; } /* the four best selling ones carry our flame, as "Meistgekauft" everywhere else */ .ks-mm-best { display: inline-flex; vertical-align: -1px; margin-left: 7px; font-style: normal; } .ks-mm-best .ks-flame { width: 11px; height: 13px; } .ks-mm-list small { justify-self: start; display: inline-flex; align-items: center; gap: 8px; padding: 3px 11px 3px 3px; border-radius: 980px; background: var(--ks-g100); font-size: 12px; color: var(--ks-g600); white-space: nowrap; transition: background-color 200ms var(--ks-out), color 200ms var(--ks-out); } .ks-mm-list small em { font-style: normal; padding: 2px 9px; border-radius: 980px; background: #fff; box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06); color: var(--ks-g700); } .ks-mm-list small::after { content: ""; width: 6px; height: 6px; border-right: 1.3px solid currentColor; border-top: 1.3px solid currentColor; transform: rotate(45deg); flex: none; } .ks-mm-list a:hover small { background: var(--ks-o100); color: var(--ks-o700); } @media (max-width: 1299.98px) { .ks-mm-split { grid-template-columns: 330px minmax(0, 1fr); gap: 28px; } .ks-mm-list { columns: 1; } } /* names stay on one line; two columns only where both fit, else one */ .ks-mm-list a { grid-template-columns: minmax(0, 1fr) 100px; gap: 10px; } .ks-mm-list a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 1599.98px) { .ks-mm-list { columns: 1; max-width: 340px; } } /* the menu panel is narrow: one column, nothing cut off */ .ks-mm-list { columns: 1; max-width: 380px; } .ks-mm-list a { padding: 8px 2px; } /* the open mega menu as wide as the header and the page (1600 px), not NOVA's 1250 px container */ @media (min-width: 992px) { .ks-mm > .container { max-width: 1600px; padding-left: 16px; padding-right: 16px; } .ks-mm-split { grid-template-columns: 420px minmax(0, 1fr); gap: 48px; } } /* with the room back: the list in two columns again where it fits */ @media (min-width: 1400px) { .ks-mm-list { columns: 2; column-gap: 40px; max-width: 760px; } } /* head lines in the menu like the language switch inside a category: one size, the place in grey, a link at the end */ .ks-mm-h { margin: 0 0 12px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; line-height: 1.2; color: var(--ks-g900); } .ks-mm-h span { color: var(--ks-g500); } .ks-mm-h a { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; font-size: 14px; font-weight: 400; letter-spacing: 0; color: var(--ks-link); white-space: nowrap; text-decoration: none; } .ks-mm-h a:hover { text-decoration: none; color: var(--ks-o800); } .ks-mm-four .ks-mm-h { grid-column: 1 / -1; margin-bottom: 0; } .ks-mm-all.is-hidden { display: none; } #mainNavigation .ks-mm .ks-mm-h a { color: var(--ks-link); } #mainNavigation .ks-mm .ks-mm-h a:hover { color: var(--ks-o800); } /* count pills of one width, also "7 Artikel" next to "45 Artikel" (menu and language switch) */ .ks-mm-list small em, .ks-lsw-list small em { min-width: 72px; text-align: center; } /* room for four digits ("1200 Artikel") without the pills changing width */ .ks-mm-list small em, .ks-lsw-list small em { min-width: 80px; } .ks-mm-list a { grid-template-columns: minmax(0, 1fr) 112px; } /* ---------- parent category with many subcategories: popular ones as tiles, all as a list (header.tpl) ---------- */ .ks-catsw { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 48px; align-items: start; margin: 8px 0 36px; } .ks-catsw-four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .ks-catsw-four .ks-mm-h { grid-column: 1 / -1; margin-bottom: 0; } .ks-catsw .ks-mm-list { columns: 2; column-gap: 40px; max-width: 820px; } @media (min-width: 1500px) { .ks-catsw .ks-mm-list { columns: 3; max-width: none; } } @media (max-width: 991.98px) { .ks-catsw { grid-template-columns: 1fr; gap: 28px; } .ks-catsw .ks-mm-list { columns: 1; max-width: none; } } @media (max-width: 575.98px) { .ks-catsw .ks-mm-bigkey { height: 84px; } .ks-catsw .ks-mm-bigkey .ks-3k-rig { scale: 1.15 1.15 1.15; } } /* the switch above the band, as high as the language switch inside a language (323 px): smaller tiles, key beside the name */ .ks-catsw { margin: 0; padding: 26px 0 30px; height: 323px; } .ks-catsw-four { grid-auto-rows: 1fr; align-self: stretch; grid-template-rows: auto 1fr 1fr; } .ks-catsw .ks-mm-big { flex-direction: row; justify-content: flex-start; gap: 4px; padding: 6px 14px 6px 4px; } .ks-catsw .ks-mm-bigkey { width: 104px; height: 92px; flex: none; } .ks-catsw .ks-mm-bigkey .ks-3k-rig { scale: 1.1 1.1 1.1; } .ks-catsw .ks-mm-bigname { font-size: 15.5px; } .ks-catsw-all { align-self: start; } @media (max-width: 991.98px) { .ks-catsw { height: auto; } } /* phones: the name under the key again, nothing cut off */ @media (max-width: 767.98px) { .ks-catsw { padding-top: 18px; } .ks-catsw .ks-mm-big { flex-direction: column; justify-content: center; gap: 2px; padding: 8px 8px 12px; } .ks-catsw .ks-mm-bigkey { width: 100%; height: 80px; } .ks-catsw .ks-mm-bigname { font-size: 14.5px; } } /* ---------- the category switch exactly like the language switch (.ks-lsw): same grid, field, list and height ---------- */ .ks-lsw.ks-catsw { grid-template-columns: 300px minmax(0, 1fr); gap: 56px; align-items: center; margin: 0; padding: 26px 0 30px; height: 323px; } .ks-catsw-four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; align-self: stretch; align-content: center; } .ks-catsw-h { grid-column: 1 / -1; margin: 0 0 6px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--ks-g500); text-align: center; } /* no frame, no fill: the keys stand on the grey field, the name under the key */ .ks-catsw-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: var(--ks-g900); text-decoration: none; } .ks-catsw-tile:hover { color: var(--ks-link); text-decoration: none; } .ks-catsw-key { position: relative; display: block; width: 100%; height: 84px; } .ks-catsw-key .ks-3k { position: absolute; inset: 0; width: 100%; height: 100%; } .ks-catsw-key .ks-3k-rig { scale: 1.15 1.15 1.15; transition: none; } .ks-catsw-tile:hover .ks-3k-rig { transform: rotateX(56deg) rotateZ(-36deg); } .ks-catsw-name { font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; } .ks-lsw.ks-catsw .ks-lsw-list { columns: 2; } @media (max-width: 767.98px) { .ks-lsw.ks-catsw { height: auto; padding-top: 0; } .ks-lsw.ks-catsw::before { height: 300px; } .ks-catsw-four { padding-top: 16px; } } /* one step up from a language to the category of all languages: a round button in the corner of the grey field */ .ks-lsw-cur { position: relative; } .ks-lsw-up { position: absolute; z-index: 2; top: -10px; left: 0; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #fff; color: var(--ks-g700); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--ks-g200); transition: color 200ms var(--ks-out), box-shadow 200ms var(--ks-out); } .ks-lsw-up:hover { color: var(--ks-link); box-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 0 0 1px var(--ks-o300); } @media (max-width: 767.98px) { .ks-lsw-up { top: 6px; } } /* the list head starts at the same height in both switches, however long the list is */ @media (min-width: 768px) { .ks-lsw > .ks-lsw-more { align-self: start; margin-top: 9px; } } /* both switches 350 px high; the grey field runs up to the header, no white strip in between */ @media (min-width: 768px) { .ks-lsw, .ks-lsw.ks-catsw { height: 350px; } .ks-lsw::before { top: -40px; } .ks-lsw.ks-catsw { margin-top: -12px; } } /* "Beliebte Sprachen" in the size of the other head lines */ .ks-catsw-h { margin: 0 0 8px; font-size: 21px; font-weight: 500; letter-spacing: -.02em; color: var(--ks-g900); text-align: left; } /* the lists use the room there is: three columns on wide screens, the same in both switches */ @media (min-width: 1200px) { .ks-lsw-list, .ks-lsw.ks-catsw .ks-lsw-list { columns: 3; max-width: none; } } /* "Beliebte Sprachen" on one line with "Alle Sprachen": both columns start at the same height */ @media (min-width: 768px) { .ks-lsw.ks-catsw > .ks-catsw-four { align-self: start; align-content: start; margin-top: 9px; } } /* the head lines 11 px higher (100 px from the page top instead of 111), in both switches */ @media (min-width: 768px) { .ks-lsw > .ks-lsw-more, .ks-lsw.ks-catsw > .ks-catsw-four { margin-top: -2px; } } /* the four keys spread evenly over the height under "Beliebte Sprachen": two equal rows down to the block's bottom */ @media (min-width: 768px) { .ks-lsw.ks-catsw > .ks-catsw-four { align-self: stretch; align-content: stretch; grid-template-rows: auto 1fr 1fr; } .ks-catsw-tile { justify-content: center; } } /* the four keys symmetric: equal space left, between and right, and equal space under the head line, between the rows and down to the bottom of the grey field (measured: head ends 56 px in, two rows of 107 px, 350 px block) */ @media (min-width: 768px) { .ks-lsw.ks-catsw > .ks-catsw-four { align-self: start; grid-template-columns: repeat(2, 107px); justify-content: space-evenly; grid-template-rows: auto 107px 107px; row-gap: 27px; column-gap: 0; } .ks-lsw.ks-catsw .ks-catsw-h { justify-self: start; margin: 0 0 0 calc((300px - 214px) / -3); } } /* the keys larger and lower, close to their names: key 1.35x, rows lower under the head line */ @media (min-width: 768px) { .ks-lsw.ks-catsw > .ks-catsw-four { grid-template-columns: repeat(2, 126px); grid-template-rows: auto 109px 109px; row-gap: 24px; } .ks-lsw.ks-catsw .ks-catsw-h { margin: 0 0 10px calc((300px - 252px) / -3); } .ks-catsw-key { height: 84px; } .ks-catsw-key .ks-3k-rig { scale: 1.35 1.35 1.35; translate: 0 5px; } .ks-catsw-tile { gap: 0; } } /* 10 px left and right of the keys, the rest between them */ @media (min-width: 768px) { .ks-lsw.ks-catsw > .ks-catsw-four { justify-content: space-between; padding: 0 10px; } .ks-lsw.ks-catsw .ks-catsw-h { margin-left: -10px; } } /* the grey field reaches 28 px past the column: the keys share that visible width evenly (left, middle, right equal) */ @media (min-width: 768px) { .ks-lsw.ks-catsw > .ks-catsw-four { margin-right: -28px; padding: 0; justify-content: space-evenly; } .ks-lsw.ks-catsw .ks-catsw-h { margin-left: 0; } } /* the first row of keys starts level with the first line of the list ("Russisch") */ @media (min-width: 768px) { .ks-lsw.ks-catsw .ks-catsw-h { margin-bottom: -10px; } } /* wider grey field (shop owner: it should reach the menu item "Tastaturaufkleber"): column 340 px, field ends 28 px further, the same in the category and in every language */ @media (min-width: 768px) { .ks-lsw, .ks-lsw.ks-catsw { grid-template-columns: 340px minmax(0, 1fr); } .ks-lsw::before { right: calc(100% - 340px - 28px); } } /* hover on a key tile: the key does not lift, its shadow grows darker (shop owner 2026-11-09). Same look at rest (shadow .44 at 55 % = .24 as before), on hover the full .44 */ .ks-3k-sh { background: radial-gradient(closest-side, rgba(40, 38, 35, .44), rgba(40, 38, 35, 0)) !important; opacity: .55; transition: opacity 260ms var(--ks-out); } :is(a, button):hover .ks-3k-sh, :is(a, button):focus-visible .ks-3k-sh { opacity: 1; } /* no lift anywhere on hover, only the shadow */ :is(a, button):hover .ks-3k-rig { transform: rotateX(56deg) rotateZ(-36deg) !important; } @media (prefers-reduced-motion: reduce) { .ks-3k-sh { transition: none; } } /* the darker shadow spreads on all sides, not only to the lower right: on hover it moves under the key and grows */ .ks-3k-sh { transition: opacity 260ms var(--ks-out), transform 320ms var(--ks-out); } :is(a, button):hover .ks-3k-sh, :is(a, button):focus-visible .ks-3k-sh { transform: translate(4px, 4px) scale(1.14); } /* the line of facts under the text in the title band: small, quiet */ .ks-cat-head.has-hero .ks-cat-side .ks-cat-facts { margin: 16px 0 0; font-size: 13.5px; line-height: 1.5; color: #A9A49C; } /* phones: the category switch in one column like the language switch (the 300/340 px columns above are for wider screens) */ @media (max-width: 767.98px) { .ks-lsw.ks-catsw { grid-template-columns: 1fr; gap: 22px; padding-top: 0; height: auto; } .ks-lsw.ks-catsw .ks-lsw-list { columns: 1; } } /* "Welche Art passt?": every transparent sticker letter has the same size (3,5 mm on Oben-Rechts, Unten-Rechts and Mini 5x6 mm alike, shop owner 2026-11-09); the mini film just frames it */ .ks-type .ks-3k:not(.st-deck) .ks-3k-top .f { font-size: 20px; } .ks-type .ks-3k.st-mini .ks-3k-top .f { right: 5px; bottom: 5px; padding: 2px 3px 1px; } /* one-language opaque sticker (German, English, French, Italian): the whole key covered, only its own letter, light */ .ks-3k.is-mono.st-deck .ks-3k-top .f { color: #F4F3F0; } /* ---------- page not found (page/404.tpl): a key with a question mark, the search, popular languages ---------- */ .ks-404 { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 640px; margin: 24px auto 72px; padding: 0 16px; } .ks-404-key { position: relative; width: 220px; height: 170px; } .ks-404-key .ks-3k { position: absolute; inset: 0; width: 100%; height: 100%; } .ks-404-key .ks-3k-rig { scale: 2.3 2.3 2.3; } .ks-404-h { margin: 8px 0 10px; font-size: clamp(26px, 3vw, 36px); line-height: 1.15; font-weight: 500; letter-spacing: -.025em; color: var(--ks-g900); text-wrap: balance; } .ks-404-t { margin: 0 0 26px; font-size: 17px; line-height: 1.5; color: var(--ks-g600); text-wrap: balance; } .ks-404-search { display: flex; gap: 8px; width: 100%; max-width: 480px; } .ks-404-field { flex: 1; display: flex; align-items: center; gap: 10px; height: 48px; margin: 0; padding: 0 16px; border-radius: 980px; background: var(--ks-g100); color: var(--ks-g600); } .ks-404-field svg { width: 18px; height: 18px; flex: none; } .ks-404-field input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; color: var(--ks-g900); outline: none; } .ks-404-field:focus-within { box-shadow: 0 0 0 2px var(--ks-o300); } .ks-404-go { height: 48px; padding: 0 22px; border: 0; border-radius: 980px; background: var(--ks-g900); color: #FFFFFF; font-size: 15.5px; font-weight: 500; } .ks-404-go:hover { background: #000000; } .ks-404-cap { margin: 40px 0 6px; font-size: 13px; font-weight: 500; color: var(--ks-g600); } .ks-404-langs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; margin: 0; padding: 0; list-style: none; } .ks-404-langs a { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 4px 10px; border-radius: 18px; font-size: 15px; font-weight: 500; color: var(--ks-g900); text-decoration: none; transition: background-color 200ms var(--ks-out); } .ks-404-langs a:hover { background: var(--ks-g50); color: var(--ks-g900); text-decoration: none; } .ks-404-lk { position: relative; display: block; width: 100%; height: 92px; } .ks-404-lk .ks-3k { position: absolute; inset: 0; width: 100%; height: 100%; } .ks-404-lk .ks-3k-rig { scale: 1.2 1.2 1.2; } .ks-404-home { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; font-size: 15px; font-weight: 500; color: var(--ks-link); } @media (max-width: 575.98px) { .ks-404-key { width: 170px; height: 130px; } .ks-404-key .ks-3k-rig { scale: 1.8 1.8 1.8; } .ks-404-t { font-size: 16px; } .ks-404-langs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===================== start page (page/index.tpl, snippets/ks/home.tpl; prototype _preview/home.html) ===================== */ #main-wrapper.ks-is-home { overflow-x: clip; } /* the same column as the category pages (NOVA container-fluid-xl: 1650 px, 16 px inside), so every text block starts where the category title starts, on every screen width */ /* the whole start page on the Apple Store margin (owner 2026-11-10): 22 px at 1024, 95 at 1280, 140 from 1440 on, the same line as the language mosaic, so no step between the blocks */ .ks-home { --ks-home-band: #201F1D; --ks-home-pad: clamp(22px, calc(28.37vw - 268.5px), 140px); padding: 0 var(--ks-home-pad); } .ks-home .ks-h2 { margin-bottom: 22px; } .ks-home-sec { padding-top: 56px; } /* bands reach both screen edges like the category title band */ .ks-home-hero, .ks-home-langs { position: relative; isolation: isolate; clip-path: inset(0 -100vmax); } /* 1. title band */ .ks-home-hero { display: flex; flex-direction: column; justify-content: flex-start; min-height: 440px; margin: 4px 0 0; padding: 92px 0 56px; background: var(--ks-home-band); box-shadow: 0 0 0 100vmax var(--ks-home-band); color: #F4F2EE; } .ks-home-hero-img { position: absolute; z-index: 0; top: 0; bottom: 0; left: 38%; right: calc(50% - 50vw); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 38%); mask-image: linear-gradient(90deg, transparent 0, #000 38%); } .ks-home-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .ks-home-hero-img.is-trio img:nth-child(2) { opacity: 0; animation: ks-hero-t2 18s var(--ks-out) 2s infinite; } .ks-home-hero-img.is-trio img:nth-child(3) { opacity: 0; animation: ks-hero-t3 18s var(--ks-out) 2s infinite; } .ks-home-hero-img.is-trio img:nth-child(n+4) { display: none; } @media (prefers-reduced-motion: reduce) { .ks-home-hero-img img { animation: none !important; } } .ks-home-hero-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .ks-home-h1 { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: .02em; color: #A9A49C; } .ks-home-display { margin: -6px 0 0; max-width: 8em; font-size: clamp(40px, 5.4vw, 76px); line-height: 1.03; font-weight: 500; letter-spacing: -.04em; color: #FFFFFF; } .ks-home-lead { margin: 0; max-width: 30em; font-size: 16.5px; line-height: 1.45; color: #CFCAC2; } .ks-home-facts { margin: 0; font-size: 13.5px; color: #A9A49C; } .ks-home-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } .ks-home-pill { display: inline-flex; align-items: center; height: 46px; padding: 0 22px; border-radius: 980px; font-size: 15.5px; font-weight: 500; text-decoration: none; transition: background-color 200ms var(--ks-out), box-shadow 200ms var(--ks-out), transform 160ms var(--ks-out); } .ks-home-pill:hover { text-decoration: none; } .ks-home-pill:active { transform: scale(.97); } .ks-home-pill.is-main { background: #B85B1C; color: #FFFFFF; } .ks-home-pill.is-main:hover { background: #A9531A; color: #FFFFFF; } .ks-home-pill.is-ghost { color: #F4F2EE; box-shadow: inset 0 0 0 1px rgba(244, 242, 238, .35); } .ks-home-pill.is-ghost:hover { color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(244, 242, 238, .7); } .ks-home-hero :focus-visible { outline-color: #F2A36B; } @media (max-width: 767.98px) { .ks-home-hero { min-height: 0; padding: 158px 0 34px; } .ks-home-hero-in { gap: 14px; } .ks-home-hero-img { left: calc(50% - 50vw); bottom: auto; height: 190px; -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 45%, transparent 100%); } .ks-home-lead { font-size: 15.5px; } } /* the 3D keys on the start page */ .ks-home-lk, .ks-home-stage { position: relative; display: block; } .ks-home-lk .ks-3k, .ks-home-stage .ks-3k { position: absolute; inset: 0; width: 100%; height: 100%; } .ks-home-lk .ks-3k-rig, .ks-home-stage .ks-3k-rig { transition: none; } .ks-home-lg:hover .ks-3k-rig, .ks-home-prob:hover .ks-3k-rig { transform: rotateX(56deg) rotateZ(-36deg); } /* 2. languages: grey band, six keys, the rest as a list beside the second row */ .ks-home-langs { padding: 52px 0 56px; background: var(--ks-g100); box-shadow: 0 0 0 100vmax var(--ks-g100); } .ks-home-lsplit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 12px; max-width: 1180px; } .ks-home-lg { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 4px 14px; border-radius: 18px; color: var(--ks-g900); text-decoration: none; transition: background-color 200ms var(--ks-out); } .ks-home-lg:hover { background: rgba(255, 255, 255, .7); color: var(--ks-g900); text-decoration: none; } .ks-home-lk { width: 150px; height: 118px; } .ks-home-lk .ks-3k-rig { scale: 1.5 1.5 1.5; } .ks-home-lg-n { font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; } .ks-home-lg small { font-size: 12.5px; color: var(--ks-g600); } .ks-home-lrest { grid-column: 3 / -1; align-self: center; padding: 0 0 6px 20px; } .ks-home-lrest p { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--ks-g600); } .ks-home-lrest ul { columns: 2; column-gap: 28px; margin: 0; padding: 0; list-style: none; } .ks-home-lrest li { break-inside: avoid; } .ks-home-lrest li a { display: flex; justify-content: space-between; gap: 10px; padding: 9px 2px; border-bottom: 1px solid var(--ks-g200); font-size: 15px; color: var(--ks-g800); text-decoration: none; transition: color 200ms var(--ks-out); } .ks-home-lrest li a:hover { color: var(--ks-link); text-decoration: none; } .ks-home-lrest li small { font-size: 12.5px; color: var(--ks-g600); white-space: nowrap; } .ks-home-more, .ks-home-go, .ks-home-links a, .ks-home-shead a { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--ks-link); text-decoration: none; } .ks-home-more { min-height: 44px; margin-top: 4px; } .ks-home-more::after, .ks-home-go::after, .ks-home-links a::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); } .ks-home-more:hover, .ks-home-links a:hover, .ks-home-shead a:hover { color: var(--ks-o700); text-decoration: none; } @media (max-width: 991.98px) { .ks-home-lsplit { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ks-home-lrest { grid-column: 1 / -1; padding: 12px 0 0; } } @media (max-width: 767.98px) { .ks-home-langs { padding: 36px 0 40px; } .ks-home-lsplit { gap: 4px; } .ks-home-lk { width: 108px; height: 88px; } .ks-home-lk .ks-3k-rig { scale: 1.1 1.1 1.1; } .ks-home-lg-n { font-size: 14.5px; } .ks-home-lrest ul { columns: 1; } } /* 3. problems: the .ks-type look */ .ks-home-probs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .ks-home-prob { display: flex; flex-direction: column; padding: 18px 20px 20px; border-radius: 22px; background: var(--ks-g50); border: 1px solid var(--ks-g100); color: var(--ks-g900); text-decoration: none; transition: border-color 200ms var(--ks-out), background-color 200ms var(--ks-out), box-shadow 300ms var(--ks-out), transform 300ms var(--ks-out); } .ks-home-prob:hover { background: #FFFFFF; border-color: var(--ks-o300); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(43, 42, 40, .08); color: var(--ks-g900); text-decoration: none; } .ks-home-stage { height: 150px; margin-bottom: 12px; } .ks-home-stage .ks-3k-rig { scale: 1.9 1.9 1.9; } .ks-home-when { font-size: 12px; font-weight: 500; color: var(--ks-o700); letter-spacing: .01em; } .ks-home-h { margin-top: 4px; font-size: 20px; font-weight: 500; letter-spacing: -.015em; } .ks-home-p { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--ks-g600); } .ks-home-prob .ks-home-go { margin-top: auto; padding-top: 14px; } @media (max-width: 1199.98px) { .ks-home-probs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .ks-home-probs { gap: 10px; } .ks-home-prob { padding: 12px 12px 16px; } .ks-home-stage { height: 104px; margin-bottom: 6px; } .ks-home-stage .ks-3k-rig { scale: 1.3 1.3 1.3; } .ks-home-h { font-size: 17px; } .ks-home-p { font-size: 14px; } } /* 4. what we make */ .ks-home-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .ks-home-way { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--ks-g100); color: var(--ks-g900); text-decoration: none; transition: box-shadow 300ms var(--ks-out); } .ks-home-way:hover { box-shadow: 0 10px 30px rgba(43, 42, 40, .10); color: var(--ks-g900); text-decoration: none; } .ks-home-way-ph { display: block; aspect-ratio: 4 / 3; } .ks-home-way-ph img { width: 100%; height: 100%; object-fit: contain; padding: 28px 28px 4px; mix-blend-mode: multiply; transition: transform 700ms var(--ks-out); } .ks-home-way:hover .ks-home-way-ph img { transform: scale(1.03); } .ks-home-way-tx { display: flex; flex-direction: column; padding: 14px 22px 22px; } .ks-home-way .ks-home-go { margin-top: 12px; } .ks-home-links { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 14px; } .ks-home-links a { min-height: 44px; font-weight: 400; } @media (max-width: 991.98px) { .ks-home-ways { grid-template-columns: 1fr 1fr; } } @media (max-width: 575.98px) { .ks-home-ways { grid-template-columns: 1fr; } } /* 5. bestsellers */ .ks-home-shead { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .ks-home-shead a { min-height: 44px; font-weight: 400; white-space: nowrap; } .ks-home-shelf { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } .ks-home-card { display: flex; flex-direction: column; gap: 8px; color: var(--ks-g900); text-decoration: none; } .ks-home-card:hover { color: var(--ks-g900); text-decoration: none; } .ks-home-card-im { display: block; aspect-ratio: 1 / 1; border-radius: 18px; background: var(--ks-g100); overflow: hidden; } .ks-home-card-im img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; transition: transform 500ms var(--ks-out); } .ks-home-card:hover .ks-home-card-im img { transform: scale(1.04); } .ks-home-card-n { font-size: 15px; line-height: 1.35; font-weight: 400; color: var(--ks-g800); } .ks-home-card-n small { display: block; margin-top: 2px; font-size: 13px; color: var(--ks-g600); } .ks-home-card-p { font-size: 17px; font-weight: 500; color: var(--ks-g900); } @media (max-width: 991.98px) { .ks-home-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .ks-home-shelf { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; gap: 12px; margin: 0 -16px; padding: 0 16px 6px; scrollbar-width: none; } .ks-home-shelf::-webkit-scrollbar { display: none; } .ks-home-card { flex: 0 0 68%; scroll-snap-align: start; } } /* 6. the OPC text at the end as a reference list (owner 2026-11-10, Variante B; built by ks.js initHomeFaq): left the title (sticky) and the intro, right rows with a thin line and a plus that open to their text. The plain OPC rules stay as the look without script. */ .ks-home-seo { position: relative; margin-top: 72px; padding: 88px clamp(22px, calc(28.37vw - 268.5px), 140px) 96px; background: var(--ks-g100); box-shadow: 0 0 0 100vmax var(--ks-g100); clip-path: inset(0 -100vmax); } .ks-home-seo .opc-Container, .ks-home-seo .container, .ks-home-seo .container-fluid { max-width: none; padding-left: 0; padding-right: 0; background: none; } .ks-home-seo h1, .ks-home-seo h2, .ks-home-seo .h1, .ks-home-seo .h2 { margin: 0 0 12px; font-size: 21px !important; font-weight: 500; letter-spacing: -.02em; line-height: 1.25; color: var(--ks-g900); } .ks-home-seo p, .ks-home-seo li { max-width: none; font-size: 16px; line-height: 1.6; color: var(--ks-g800); } /* same grid as the category description (.ks-desc-block): 1 : 2, gap 56, from the 16 px page edge like the category pages (owner 2026-11-10: only this block, the rest of the start page keeps the Apple margin); the right column uses the full 2/3, like the category text */ .ks-home-seo:has(.ks-guide) { padding-left: 16px; padding-right: 16px; } /* the category pages sit in NOVA's container-fluid (max 1650 incl. 16 px padding), centred on wide screens */ .ks-guide { max-width: 1618px; margin: 0 auto; } .ks-guide-group { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 56px; align-items: start; } .ks-guide-list { max-width: none; } /* the category description (productlist/index.tpl) uses the full 2/3 as well, up to the right edge of the products (owner 2026-11-10); the product page sections keep their 46em */ .ks-desc-block[aria-labelledby="ks-desc-h"] .ks-desc { max-width: none; } /* the FAQ is a band of its own: white from screen edge to screen edge, so the two groups read as two parts */ .ks-guide-group.is-faq { position: relative; margin: 96px 0 -96px; padding: 88px 0 96px; background: #FFFFFF; box-shadow: 0 0 0 100vmax #FFFFFF; clip-path: inset(0 -100vmax); } .ks-guide-group.is-faq .ks-guide-list, .ks-guide-group.is-faq .ks-guide-row { border-color: var(--ks-g200); } .ks-guide-head { position: sticky; top: 112px; } .ks-home-seo .ks-guide-title { margin: 0 0 20px; font-size: clamp(28px, 2.6vw, 40px) !important; font-weight: 500; line-height: 1.12; letter-spacing: -.025em; color: var(--ks-g900); text-wrap: balance; } .ks-home-seo .ks-guide-head p { max-width: none; margin: 0 0 12px; font-size: 17px; line-height: 1.55; color: var(--ks-g600); } .ks-guide-list { border-top: 1px solid var(--ks-g300); } .ks-guide-row { border-bottom: 1px solid var(--ks-g300); } .ks-guide-row > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; padding: 20px 0; } .ks-guide-row > summary::-webkit-details-marker { display: none; } .ks-guide-row > summary h3 { margin: 0; font-size: var(--ks-text-h); font-weight: 500; line-height: 1.25; letter-spacing: -.012em; color: var(--ks-g900); transition: color 160ms ease; } /* the plus: two thin strokes; open, only the flat one stays (a minus) */ .ks-guide-row > summary::after { content: ""; flex: none; width: 16px; height: 16px; margin-right: 2px; background: linear-gradient(var(--ks-g700), var(--ks-g700)) center / 16px 1.5px no-repeat, linear-gradient(var(--ks-g700), var(--ks-g700)) center / 1.5px 16px no-repeat; transition: transform 240ms var(--ks-out); } .ks-guide-row[open] > summary::after { background: linear-gradient(var(--ks-g700), var(--ks-g700)) center / 16px 1.5px no-repeat; transform: rotate(180deg); } .ks-guide-row > summary:hover h3 { color: var(--ks-o500); } .ks-guide-row > summary:focus-visible { outline: 2px solid var(--ks-o500); outline-offset: 4px; border-radius: 4px; } .ks-guide-body { padding: 0 48px 28px 0; animation: ks-guide-in 260ms var(--ks-out); } .ks-guide-body > :last-child { margin-bottom: 0; } /* the text inside a row: the same format as the category description (.ks-desc-block .ks-desc), one size for all, OPC's notes and bold leads included */ .ks-home-seo .ks-guide-body p { margin: 0 0 var(--ks-text-gap); font-size: var(--ks-text); line-height: var(--ks-text-lh); color: var(--ks-ink); } .ks-home-seo .ks-guide-body ul, .ks-home-seo .ks-guide-body ol { margin: 0 0 var(--ks-text-gap); padding-left: 1.2em; } .ks-home-seo .ks-guide-body li { margin: 0 0 3px; font-size: var(--ks-text); line-height: var(--ks-text-lh); color: var(--ks-ink); } .ks-home-seo .ks-guide-body small { font-size: inherit; } .ks-home-seo .ks-guide-body li::marker { color: var(--ks-g400); } @keyframes ks-guide-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ks-guide-body { animation: none; } .ks-guide-row > summary::after { transition: none; } } @media (max-width: 991.98px) { .ks-home-seo { padding-top: 56px; padding-bottom: 64px; } .ks-guide-group { grid-template-columns: minmax(0, 1fr); row-gap: 20px; } .ks-guide-group.is-faq { margin: 56px 0 -64px; padding: 48px 0 56px; } .ks-guide-head { position: static; } .ks-guide-row > summary { min-height: 60px; padding: 16px 0; } .ks-guide-body { padding-right: 0; } } /* ===================== start page: languages as a mosaic (snippets/ks/home.tpl; prototype _preview/lang-switch-color.html, owner's plan Menue_Aufkleber_Home.svg 1900 x 520: large field 400 x 520, five tiles 300 x 280, the list 1500 x 240). The block runs from the left screen edge to the right one; its texts start on the Apple Store margin (22 px at 1024, 95 at 1280, 140 from 1440 on). Everything inside is measured in parts of the block's width (cqw), so it scales like one picture; texts keep a readable minimum. Colours: CSS variables, one palette per page view (ks.js initMosaic). ===================== */ .ks-mos-wrap { --ks-mos-pad: clamp(22px, calc(28.37vw - 268.5px), 140px); --m0: #003049; --m1: #F18328; --m2: #FCBF49; --m3: #C5453D; --m4: #EAE2B7; --m5: #91B0C5; --m6: #F0F8FE; --i0: #FFFFFF; --i1: #2B2A28; --i2: #2B2A28; --i3: #FFFFFF; --i4: #2B2A28; --i5: #2B2A28; --i6: #2B2A28; position: relative; width: 100vw; margin: 0 0 0 calc(50% - 50vw); padding: 0 0 0 var(--ks-mos-pad) !important; background: var(--m0); } .ks-mos-box { container-type: inline-size; } .ks-mos { display: grid; grid-template-columns: 21.053cqw repeat(5, minmax(0, 1fr)); grid-template-rows: 14.737cqw minmax(12.632cqw, auto); } .ks-mos-tile { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; text-decoration: none; transition: filter 300ms var(--ks-out); } .ks-mos-tile:hover { filter: brightness(1.05); text-decoration: none; } .ks-mos-tile > span:not(.ks-mos-k), .ks-mos-tile > small { position: relative; z-index: 1; } /* the large field: the entrance (nothing chosen yet), the question, the key (70 % of the field), the way to all languages; the space between the text and the key equals the space between the key and the link */ .ks-mos-big { grid-row: 1 / span 2; background: var(--m0); color: var(--i0); align-items: flex-start; padding: 2.1cqw 1.6cqw 2.1cqw 0; } .ks-mos-big:hover { color: var(--i0); } .ks-mos-h { margin: 0; font-size: max(22px, 2cqw); line-height: 1.06; font-weight: 500; letter-spacing: -.03em; color: inherit; } .ks-mos-big p { margin: .5cqw 0 0; font-size: max(13px, .74cqw); line-height: 1.45; opacity: .82; max-width: 15cqw; } .ks-mos-big .ks-mos-k { align-self: stretch; margin: auto -1.6cqw auto 0; --ks: 10.55cqw; height: 9.41cqw; } .ks-mos-go { display: inline-flex; align-items: center; gap: .45cqw; font-size: max(14px, .82cqw); font-weight: 500; } .ks-mos-go::after { content: ""; width: .42cqw; height: .42cqw; min-width: 7px; min-height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); transition: translate 200ms var(--ks-out); } .ks-mos-big:hover .ks-mos-go::after { translate: 3px 0; } /* the five best selling languages: key 55 % of the tile, equal space above it and between it and the name */ .ks-mos-small { padding: 0 .6cqw 1.1cqw; font-size: max(16px, 1.2cqw); font-weight: 500; letter-spacing: -.01em; text-align: center; line-height: 1.25; } .ks-mos-small:nth-of-type(2) { background: var(--m1); color: var(--i1); } .ks-mos-small:nth-of-type(3) { background: var(--m2); color: var(--i2); } .ks-mos-small:nth-of-type(4) { background: var(--m3); color: var(--i3); } .ks-mos-small:nth-of-type(5) { background: var(--m4); color: var(--i4); } .ks-mos-small:nth-of-type(6) { background: var(--m5); color: var(--i5); } .ks-mos-small small { margin-top: .15cqw; font-size: max(12px, .7cqw); font-weight: 400; opacity: .75; } .ks-mos-small .ks-mos-k { width: 100%; margin: auto 0; --ks: 6.22cqw; height: 5.55cqw; } /* every language as a list, on the lightest colour, to the right screen edge */ .ks-mos-list { grid-column: 2 / -1; display: flex; flex-direction: column; justify-content: center; padding: 1.9cqw 2cqw 1.6cqw; background: var(--m6); color: var(--i6); } .ks-mos-list h3 { margin: 0 0 .6cqw; font-size: max(17px, 1.05cqw); font-weight: 500; letter-spacing: -.02em; color: inherit; } .ks-mos-list h3 span { opacity: .55; } .ks-mos-list ul { columns: 3; column-gap: 2.6cqw; margin: 0; padding: 0; list-style: none; } .ks-mos-list li { break-inside: avoid; } .ks-mos-list a { display: flex; justify-content: space-between; align-items: baseline; gap: .6cqw; padding: max(5px, .42cqw) 0; border-bottom: 1px solid color-mix(in srgb, currentColor 14%, transparent); font-size: max(13px, .68cqw); color: inherit; text-decoration: none; } .ks-mos-list a:hover { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .ks-mos-list small { font-size: max(11px, .52cqw); opacity: .7; white-space: nowrap; } /* the 3D key (snippets/ks/lang_key.tpl) inside the mosaic: sized by --ks instead of 66 px, so it scales with the block */ .ks-mos-k { position: relative; display: block; flex: none; } .ks-mos-k .ks-3k { position: absolute; inset: 0; width: 100%; height: 100%; perspective: none; } .ks-mos-k .ks-3k-rig { top: 50%; width: var(--ks); height: var(--ks); margin: calc(var(--ks) * -.46) 0 0 calc(var(--ks) * -.5); transition: none; scale: none; translate: none; } .ks-mos-k .ks-3k-rig > span { border-radius: calc(var(--ks) * .15); } .ks-mos-k .ks-3k-sl:nth-child(3) { transform: translateZ(0) !important; } .ks-mos-k .ks-3k-sl:nth-child(4) { transform: translateZ(calc(var(--ks) * .0195)) !important; } .ks-mos-k .ks-3k-sl:nth-child(5) { transform: translateZ(calc(var(--ks) * .039)) !important; } .ks-mos-k .ks-3k-sl:nth-child(6) { transform: translateZ(calc(var(--ks) * .0585)) !important; } .ks-mos-k .ks-3k-sl:nth-child(7) { transform: translateZ(calc(var(--ks) * .078)) !important; } .ks-mos-k .ks-3k-sl:nth-child(8) { transform: translateZ(calc(var(--ks) * .0975)) !important; } .ks-mos-k .ks-3k-sl:nth-child(9) { transform: translateZ(calc(var(--ks) * .117)) !important; } .ks-mos-k .ks-3k-top { transform: translateZ(calc(var(--ks) * .136)) scale(.95); } .ks-mos-k .ks-3k-top span { font-size: calc(var(--ks) * .39); } .ks-mos-k .ks-3k-top .b { left: 12%; top: 9%; } .ks-mos-k .ks-3k-top .f { right: 12%; bottom: 9%; } .ks-mos-k .ks-3k.is-mono .ks-3k-top .f { left: 50%; top: 50%; right: auto; bottom: auto; font-size: calc(var(--ks) * .45); } .ks-mos-k .ks-3k-con { display: none; } /* the key lies on the surface (owner 2026-11-10): a contact shadow the shape of its base, the soft one hidden under it */ .ks-mos-k .ks-3k-sh { inset: 0 !important; border-radius: calc(var(--ks) * .15) !important; background: rgba(20, 18, 16, .42); opacity: 1; transform: translate(calc(var(--ks) * .02), calc(var(--ks) * .03)); filter: blur(calc(var(--ks) * .035)); box-shadow: calc(var(--ks) * .015) calc(var(--ks) * .03) calc(var(--ks) * .18) rgba(20, 18, 16, .22); transition: background-color 300ms var(--ks-out), box-shadow 300ms var(--ks-out); } .ks-mos-tile:hover .ks-3k-sh { opacity: 1; transform: translate(calc(var(--ks) * .02), calc(var(--ks) * .03)); background: rgba(20, 18, 16, .5); box-shadow: calc(var(--ks) * .015) calc(var(--ks) * .03) calc(var(--ks) * .2) rgba(20, 18, 16, .3); } .ks-mos-tile:hover .ks-3k-rig { transform: rotateX(56deg) rotateZ(-36deg); } /* start page bestsellers (owner 2026-11-10): four and a half cards in view, the half one fades out to the right edge of the screen; arrows next to "Alle ansehen" and a step of one card every few seconds (ks.js initHomeShelf) */ .ks-home-sctl { display: flex; align-items: center; gap: 8px; } .ks-home-sctl a { margin-right: 8px; } /* quiet line under "Bestseller" (owner 2026-11-10): stickers ordered in 7 days, the last ordered product; a small green dot says it is live data */ .ks-home-stitle { min-width: 0; } .ks-home .ks-home-stitle .ks-h2 { margin-bottom: 6px; } .ks-home-bstat { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 0 0 22px; font-size: 14px; line-height: 1.45; font-weight: 400; color: var(--ks-g600); } .ks-home-bstat span:first-child::before { content: ''; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--ks-ok); vertical-align: 1px; } .ks-home-bstat a { color: var(--ks-g800); text-decoration: none; } .ks-home-bstat a:hover { color: var(--ks-link); text-decoration: none; } .ks-home-sbtn { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: var(--ks-g100); color: var(--ks-g800); cursor: pointer; transition: background-color 200ms var(--ks-out), color 200ms var(--ks-out), opacity 200ms var(--ks-out); } .ks-home-sbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ks-home-sbtn:hover { background: var(--ks-g200); color: var(--ks-g900); } .ks-home-sbtn:disabled { opacity: .35; cursor: default; } .ks-home-shelf { --gap: 14px; display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; margin: 0 calc(-1 * var(--ks-home-pad)); padding: 0 var(--ks-home-pad); scroll-padding-left: var(--ks-home-pad); --ks-fl: 0px; --ks-fr: 12%; transition: --ks-fl .3s ease, --ks-fr .3s ease; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--ks-fl), #000 calc(100% - var(--ks-fr)), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 var(--ks-fl), #000 calc(100% - var(--ks-fr)), transparent 100%); } /* the cards slide out at the left screen edge, not at the text line */ .ks-home-shelf::-webkit-scrollbar { display: none; } /* symmetric fades (owner 2026-11-10): the left one only once the row is scrolled, inside the left margin, so the first card stays sharp on the text line; the right one goes away at the end of the row. Animated via registered properties. */ @property --ks-fl { syntax: ''; inherits: false; initial-value: 0px; } @property --ks-fr { syntax: ''; inherits: false; initial-value: 12%; } .ks-home-shelf.is-scrolled { --ks-fl: max(var(--ks-home-pad), 48px); } .ks-home-shelf.is-end { --ks-fr: 0%; } .ks-home-shelf .ks-home-card { flex: 0 0 calc((100% + var(--ks-home-pad) - 4 * var(--gap)) / 4.5); scroll-snap-align: start; } @media (max-width: 991.98px) { .ks-home-shelf .ks-home-card { flex-basis: calc((100% + var(--ks-home-pad) - 2 * var(--gap)) / 2.5); } } @media (max-width: 767.98px) { .ks-home-sbtn { display: none; } .ks-home-shelf { margin: 0 calc(-1 * var(--ks-home-pad)); padding: 0 var(--ks-home-pad) 6px; scroll-padding-left: var(--ks-home-pad); } .ks-home-shelf .ks-home-card { flex-basis: 68%; } } @media (prefers-reduced-motion: reduce) { .ks-home-shelf { scroll-behavior: auto; } } /* lists without a category (productlist/header.tpl .ks-list-head): the dark band of the categories; on the right three tiles with the first articles of the list, edge to edge to the right screen edge, no rounded corners (like the start page mosaic); product photos on white stay on white */ .ks-cat-head.has-hero > .ks-list-tiles { position: absolute; z-index: 0; top: 0; bottom: 0; right: calc(50% - 50vw); width: 46vw; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: #ECEBE8; } .ks-list-tiles span { position: relative; display: block; background: #FFFFFF; } .ks-list-tiles img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 12%; } .ks-list-head .ks-cat-title, .ks-list-head .ks-cat-side { max-width: min(30em, calc(100% - 46vw - 40px)); } @media (max-width: 1199.98px) { .ks-cat-head.has-hero > .ks-list-tiles { width: 40vw; grid-template-columns: repeat(2, minmax(0, 1fr)); } .ks-list-tiles span:nth-child(3) { display: none; } .ks-list-head .ks-cat-title, .ks-list-head .ks-cat-side { max-width: calc(100% - 40vw - 32px); } } @media (max-width: 767.98px) { .ks-list-head.has-hero { padding-top: 200px; } .ks-cat-head.has-hero > .ks-list-tiles { left: calc(50% - 50vw); width: auto; bottom: auto; height: 180px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .ks-list-tiles span:nth-child(3) { display: block; } .ks-list-head .ks-cat-title, .ks-list-head .ks-cat-side { max-width: none; } } /* ===================== checkout (Bestellvorgang): the slim header and the three steps (owner 2026-11-10) ===================== */ /* the header of the checkout: our logo size, on the same column as the checkout (NOVA #checkout.container, 1250 px) */ body.is-checkout header .hide-navbar { max-width: 1250px; margin: 0 auto; padding: 0 16px !important; } body.is-checkout header .nav-logo-wrapper { padding-left: 16px; flex: 0 0 auto; width: auto; } /* only the full logo; the short one is for the narrow sticky menu */ body.is-checkout header .navbar-brand img.ks-logo-short { display: none !important; } body.is-checkout header .navbar-brand { padding: 0; margin: 0; } body.is-checkout header .navbar-brand img { display: block; height: 26px; width: auto; max-width: none; } @media (max-width: 767.98px) { body.is-checkout header .navbar-brand img { height: 21px; } } /* the three steps: no NOVA arrows; a thin bar on top of each step, number and name below; done steps dark with a tick, the current one in the accent colour, the next ones grey */ .checkout-steps.stepper { display: flex; flex-wrap: nowrap; gap: 10px; margin: 28px 0 40px; padding: 0; border: 0; background: none; box-shadow: none; } .checkout-steps.stepper .step { flex: 1 1 0; max-width: none; padding: 12px 0 0; margin: 0; border: 0; border-top: 3px solid var(--ks-g200); background: none !important; clip-path: none !important; } .checkout-steps.stepper .step::before, .checkout-steps.stepper .step::after, .checkout-steps.stepper .step-content::before, .checkout-steps.stepper .step-content::after { display: none !important; content: none !important; } .checkout-steps.stepper .step.step-active { border-top-color: var(--ks-g900); } .checkout-steps.stepper .step.step-current { border-top-color: var(--ks-o500); } .checkout-steps.stepper .step a { color: inherit; text-decoration: none; } .checkout-steps.stepper .step-content { display: flex; align-items: center; justify-content: flex-start; gap: 10px; padding: 0; background: none !important; height: auto; min-height: 0; } .checkout-steps.stepper .badge { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border-radius: 50%; background: var(--ks-g100); color: var(--ks-g600); font-size: 13px; font-weight: 500; line-height: 1; box-shadow: none; } .checkout-steps.stepper .step-active .badge { background: var(--ks-g900); color: #FFFFFF; } .checkout-steps.stepper .step-current .badge { background: var(--ks-o500); color: #FFFFFF; } .checkout-steps.stepper .step-text { font-size: 14.5px; font-weight: 500; letter-spacing: -.005em; color: var(--ks-g500); } .checkout-steps.stepper .step-active .step-text { color: var(--ks-g800); } .checkout-steps.stepper .step-current .step-text { color: var(--ks-g900); } .checkout-steps.stepper .step-check { margin-left: auto; font-size: 13px; color: var(--ks-g900); } .checkout-steps.stepper .step a:hover .step-text { color: var(--ks-g900); } @media (max-width: 767.98px) { .checkout-steps.stepper { gap: 6px; margin: 18px 0 28px; } .checkout-steps.stepper .step:not(.step-current) .step-text { display: none !important; } } /* phones (owner 2026-11-11, variant B): "Schritt 2 von 3" with three dots, the name of the step under it (checkout/inc_steps.tpl); NOVA's three steps only from 768px on */ .ks-steps-m { display: none; } @media (max-width: 767.98px) { .checkout-steps.stepper { display: none !important; } .ks-steps-m { display: block; margin: 18px 0 26px; } .ks-steps-m-top { display: flex; align-items: center; gap: 12px; } .ks-steps-m-dots { display: flex; align-items: center; gap: 6px; } .ks-steps-m-dot { position: relative; display: block; width: 8px; height: 8px; border-radius: 4px; background: var(--ks-g200); transition: width 250ms var(--ks-out), background-color 150ms ease; } .ks-steps-m-dot.is-done { background: var(--ks-g900); } .ks-steps-m-dot.is-done::after { content: ""; position: absolute; inset: -14px -5px; } .ks-steps-m-dot.is-now { width: 22px; background: var(--ks-o500); } .ks-steps-m-k { font-size: 13px; color: var(--ks-g500); font-variant-numeric: tabular-nums; } .ks-steps-m-n { margin: 4px 0 0; font-size: 19px; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--ks-g900); } } /* ---------- 3.70.8 (owner 2026-11-10) ---------- 1. While the filter bar (.ks-subbar) hangs under the header, pinned titles of the category page sit below it, not under it; the bar is min(header, 52px) high. 2. Category description and "Gut zu wissen" on laptop and tablet widths: more air at the sides than the 16 px page edge the product cards use, the text no longer runs to the screen edge. From 1400px on as before. */ html.ks-subbar-on .ks-desc-title, html.ks-subbar-on .ks-help > :first-child, html.ks-subbar-on .ks-desc-aside { top: calc(var(--ks-header-h, 69px) + min(var(--ks-header-h, 69px), 52px) + 24px); } @media (min-width: 576px) and (max-width: 991.98px) { .ks-desc-block, .ks-help { padding-left: 16px; padding-right: 16px; } } @media (min-width: 992px) and (max-width: 1745.98px) { .ks-desc-block, .ks-help { column-gap: 48px; } /* the side air comes from the page gutter below (3.75.0) */ } /* ---------- 3.71.3 language mosaic on smaller screens (owner 2026-11-10: "on small screens it only shrinks, nothing is readable; stretch the text list across"; then "four tiles instead of five; on narrow screens the large field left, 2 x 2 tiles right, the list below"). From 1200px the mosaic as drawn, its second row grows with the list, the list runs over the whole width. Below, the block runs edge to edge, four tiles (the fifth is in the list anyway): 576 to 1199px the large field left, the tiles 2 x 2 right, the list below in 3 or 2 columns; phone the large field as a band (text left, key right), the tiles 2 x 2, the list in one column. */ @media (max-width: 1199.98px) { .ks-mos-wrap { padding: 0 !important; } .ks-mos { grid-template-columns: minmax(0, 1.25fr) repeat(2, minmax(0, 1fr)); grid-template-rows: none; } .ks-mos-small:nth-of-type(6) { display: none; } .ks-mos-big { grid-row: 1 / span 2; padding: 36px 20px 32px var(--ks-mos-pad); } .ks-mos-big .ks-mos-k { margin: auto 0; --ks: min(19cqw, 190px); height: min(17cqw, 172px); } .ks-mos-go { font-size: 16px; gap: 8px; } .ks-mos-go::after { width: 7px; height: 7px; } .ks-mos-h { font-size: clamp(28px, 3.4vw, 38px); } .ks-mos-big p { max-width: 28ch; margin-top: 10px; font-size: 16px; } .ks-mos-small { min-height: min(24cqw, 240px); padding: 0 6px 16px; font-size: 17px; } .ks-mos-small small { margin-top: 2px; font-size: 13px; } .ks-mos-small .ks-mos-k { --ks: min(13cqw, 120px); height: min(12cqw, 110px); } .ks-mos-list { grid-column: 1 / -1; padding: 32px var(--ks-mos-pad) 36px; } .ks-mos-list h3 { margin-bottom: 12px; font-size: 19px; } .ks-mos-list ul { column-gap: 32px; } .ks-mos-list a { gap: 12px; padding: 10px 0; font-size: 16px; } .ks-mos-list small { font-size: 13px; } } @media (max-width: 767.98px) { .ks-mos-list ul { columns: 2; } } @media (max-width: 575.98px) { .ks-mos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ks-mos-big { grid-column: 1 / -1; grid-row: auto; display: grid; grid-template-columns: minmax(0, 1fr) 40%; grid-template-areas: "t k" "g k"; align-items: start; padding: 32px 16px 28px var(--ks-mos-pad); } .ks-mos-big > span:first-child { grid-area: t; } .ks-mos-big .ks-mos-k { grid-area: k; align-self: center; margin: 0; --ks: 27cqw; height: 26cqw; } .ks-mos-go { grid-area: g; align-self: end; margin-top: 20px; } .ks-mos-h { font-size: 28px; } .ks-mos-big p { font-size: 15px; } .ks-mos-small { min-height: 46cqw; padding-bottom: 16px; font-size: 17px; } .ks-mos-small .ks-mos-k { --ks: 24cqw; height: 22cqw; } .ks-mos-list { padding: 28px var(--ks-mos-pad) 32px; } .ks-mos-list ul { columns: 1; } } /* ---------- 3.72.1 language tiles: the name as a pill like the start page's hero buttons (.ks-home-pill.is-ghost), flat, no shadow (owner 2026-11-10): ring and hover exactly as on "Zweisprachige Tastaturen", a hairline in the tile's text colour at 35 %, on hover 70 %, pressed a little smaller. The count sits quietly under the pill. */ .ks-mos-pill { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 40px; max-width: calc(100% - 16px); padding: 0 18px; border-radius: 980px; background: transparent; font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: transform 200ms var(--ks-out); } /* the ring is its own layer in the text colour; only its opacity changes (a transition of a color-mix() with currentColor dropped the ring for a moment before it came back darker) */ .ks-mos-pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 1px solid currentColor; opacity: .35; pointer-events: none; transition: opacity 150ms var(--ks-out); } .ks-mos-small:hover .ks-mos-pill::after { opacity: .7; } .ks-mos-small:active .ks-mos-pill { transform: scale(.97); } .ks-mos-tile:focus-visible .ks-mos-pill::after { opacity: 1; border-width: 2px; } .ks-mos-small > small { margin-top: 8px; font-size: 13px; } @media (prefers-reduced-motion: reduce) { .ks-mos-pill, .ks-mos-pill::after { transition: none; } } @media (max-width: 575.98px) { .ks-mos-pill { height: 38px; padding: 0 16px; font-size: 15px; } .ks-mos-small > small { margin-top: 6px; } } /* ---------- 3.72.4 mosaic hover without lag (owner 2026-11-10) ---------- The tile used to brighten with filter: brightness(), which made the browser repaint the 3D key (nine layers) in every frame of the 300ms fade, so the hover came late and the pill ring lagged behind. Now the tile itself stays as it is (owner: only the pill reacts; a layer on the large field also missed the strip left of it), the key turns smoothly. */ .ks-mos-tile { transition: none; } .ks-mos-tile:hover { filter: none; } .ks-mos-k .ks-3k-rig { transition: transform 260ms var(--ks-out); } .ks-mos-pill { transition-duration: 150ms; } @media (prefers-reduced-motion: reduce) { .ks-mos-k .ks-3k-rig { transition: none; } } /* ---------- 3.74.0 shipping page (page/shipping.tpl, owner 2026-11-10): JTL's shipping methods as cards ---------- The rhythm of the category description: the section title left (sticky), the content right, 1 : 2, gap 56. One card per method: the carrier's logo tile as in the footer (DHL and Deutsche Post on their yellow), name and delivery days, the price steps as quiet rows, the free shipping amount in green, the countries in small type. */ /* the full central block of the category pages (1650), not NOVA's 1250 container; the page title goes along (owner 2026-11-11) */ .ks-ship, main:has(.ks-ship) .index-heading-wrapper { max-width: 1650px; } .ks-ship { padding-bottom: 72px; } .ks-ship-lead { margin: 4px 0 40px; font-size: 19px; line-height: 1.5; color: var(--ks-g700); } .ks-ship-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; padding: 40px 0; border-top: 1px solid var(--ks-g200); } .ks-ship-h { position: sticky; top: calc(var(--ks-header-h, 69px) + 24px); margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; color: var(--ks-g900); } .ks-ship-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 16px; } .ks-ship-card { display: flex; flex-direction: column; gap: 16px; padding: 22px 22px 20px; border-radius: 22px; background: var(--ks-g50); } .ks-ship-head { display: flex; align-items: center; gap: 16px; } .ks-ship-logo { flex: none; display: flex; align-items: center; justify-content: center; width: 112px; height: 40px; padding: 0 12px; border-radius: 10px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--ks-g200); } .ks-ship-logo img { display: block; max-width: 100%; max-height: 20px; width: auto; height: auto; } .ks-ship-logo.is-yellow { padding: 0; overflow: hidden; background: #FFCC00; box-shadow: none; } .ks-ship-logo.is-yellow img { width: 100%; max-height: none; } .ks-ship-name { margin: 0; font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -.01em; color: var(--ks-g900); } .ks-ship-days { margin: 2px 0 0; font-size: 14px; line-height: 1.4; color: var(--ks-g600); } .ks-ship-steps { margin: 0; } .ks-ship-steps > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-top: 1px solid var(--ks-g200); font-size: var(--ks-text, 15px); } .ks-ship-steps > div:last-child { border-bottom: 1px solid var(--ks-g200); } .ks-ship-steps dt { font-weight: 400; color: var(--ks-g700); } .ks-ship-steps dd { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ks-g900); white-space: nowrap; } .ks-ship-free { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 14px; font-weight: 500; color: var(--ks-ok); } .ks-ship-free::before { content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ks-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5.2 9.3l2.4 2.4 5.2-5.4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat; } .ks-ship-countries { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ks-g600); } .ks-ship-countries span { display: block; margin-bottom: 2px; font-weight: 500; color: var(--ks-g800); } .ks-ship-vat { margin: -16px 0 0; padding: 0 0 8px; font-size: 13px; color: var(--ks-g600); } @media (min-width: 992px) { .ks-ship-vat { margin-left: calc((100% - 56px) / 3 + 56px); } } .ks-ship-text { max-width: none; } .ks-ship-text p { margin: 0 0 var(--ks-text-gap, 12px); font-size: var(--ks-text, 15px); line-height: 1.6; color: var(--ks-g800); } .ks-ship-ask { margin: 0; padding: 28px 0 0; border-top: 1px solid var(--ks-g200); font-size: 15px; color: var(--ks-g700); } .ks-ship-ask a { margin-left: 6px; font-weight: 500; color: var(--ks-link); } @media (max-width: 991.98px) { .ks-ship-sec { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 32px 0; } .ks-ship-h { position: static; } .ks-ship-lead { font-size: 17px; margin-bottom: 28px; } .ks-ship-vat { margin-top: -8px; } } @media (max-width: 575.98px) { .ks-ship-card { padding: 18px 16px; border-radius: 18px; } .ks-ship-head { gap: 12px; } .ks-ship-logo { width: 96px; height: 36px; } } /* in the popup behind "zzgl. Versand": no sticky titles, one column */ .modal .ks-ship-sec { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 0; } .modal .ks-ship-h { position: static; font-size: 22px; } .modal .ks-ship-vat { margin-left: 0; } /* 3.74.7 shipping page on laptop and tablet widths (owner 2026-11-11, MacBook): the same air at the sides as the category description there (48 / 32 px instead of the 16 px page edge), the page title along */ @media (min-width: 576px) and (max-width: 1399.98px) { .ks-ship.container, main:has(.ks-ship) .index-heading-wrapper { padding-left: 32px; padding-right: 32px; } } /* up to 1746 px: below that the 1650 block touches the screen edges, above it stands centred with its own margin (MacBook Air M1 = 1440, owner 2026-11-11) */ @media (min-width: 992px) and (max-width: 1745.98px) { .ks-ship.container, main:has(.ks-ship) .index-heading-wrapper { padding-left: 48px; padding-right: 48px; } .ks-ship-sec { column-gap: 48px; } .ks-ship-vat { margin-left: calc((100% - 48px) / 3 + 48px); } } /* ---------- 3.75.0 one page gutter on laptops (owner 2026-11-11, MacBook Air M1 = 1440 px) ---------- From 992 to 1745 px the 1650 px central block touches the screen edges, and 16 px at the sides felt cramped. There the category pages, the start page's reference list and the footer on every page (with the trust band) keep 48 px to the screen edge, like the shipping page. From 1746 px the block stands centred with its own margin, as before; phones and tablets keep their gutters. The start page's other sections already use the wider Apple margin (--ks-mos-pad / --ks-home-pad). */ @media (min-width: 992px) and (max-width: 1745.98px) { #main-wrapper > .container-fluid.is-item-list, #footer > .container, .ks-home-seo:has(.ks-guide) { padding-left: 48px; padding-right: 48px; } } /* ---------- 3.75.2 the header on the same line as the page (owner 2026-11-11) ---------- Header, the grey bar under it and the open mega menu now span the page's central block (1650 px, was 1600), so the logo stands above the page's left edge on every screen; on laptops they take the same 48 px gutter. */ #jtl-nav-wrapper .ks-head { max-width: 1650px; } .ks-subbar-in { max-width: 1650px; padding-left: 16px; padding-right: 16px; } @media (min-width: 992px) { .ks-mm > .container { max-width: 1650px; } } @media (min-width: 992px) and (max-width: 1745.98px) { #jtl-nav-wrapper .ks-head, .ks-subbar-in, .ks-mm > .container { padding-left: 48px; padding-right: 48px; } } /* 3.75.3 start page: the title band right under the header (owner 2026-11-11). The 20 px white strip between them was NOVA's top padding of #content-wrapper (16 px) plus the band's own 4 px margin. */ #main-wrapper.ks-is-home #content-wrapper { padding-top: 0; } #main-wrapper.ks-is-home .ks-home-hero { margin-top: 0; } /* ---------- 3.77.0 newsletter page (newsletter/index.tpl, owner 2026-11-11, Variante A) ---------- The page grid of the category description: the head left (what the newsletter is), right the one card to subscribe (e-mail and button on one line, JTL's checkbox and privacy note under it) and below it the quiet line "Newsletter abbestellen?" that opens the unsubscribe form. Fields white on the grey card. Phones: one column. */ .ks-nl { max-width: 1650px; padding-top: 16px; padding-bottom: 72px; } .ks-nl-eyebrow { margin: 0 0 10px; font-size: 14px; font-weight: 500; color: var(--ks-o600); } .ks-nl-h { margin: 0 0 14px; font-size: clamp(30px, 3vw, 44px); font-weight: 500; line-height: 1.1; letter-spacing: -.03em; color: var(--ks-g900); text-wrap: balance; } .ks-nl-lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ks-g700); } .ks-nl-content { margin-top: 24px; } .ks-nl-card { margin: 0; padding: 32px; border-radius: 22px; background: var(--ks-g50); --ks-field-bg: #FFFFFF; --ks-field-bg-hover: #FFFFFF; } .ks-nl fieldset { margin: 0; padding: 0; border: 0; } .ks-nl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; } .ks-nl-field .form-group { margin-bottom: 0; } .ks-nl-btn.btn { height: var(--ks-field-h, 56px); padding: 0 28px; white-space: nowrap; } .ks-nl .simple-captcha-wrapper { margin: 16px 0 0; } .ks-nl-checks { margin-top: 18px; } .ks-nl-checks .form-group { margin-bottom: 8px; } .ks-nl-consent { margin: 12px 0 0; font-size: 13px; line-height: 1.5; color: var(--ks-g600); } .ks-nl-consent a { color: inherit; text-decoration: underline; text-underline-offset: 2px; } /* the quiet line */ .ks-nl-off { margin: 20px 0 0; padding: 0 4px; } /* NOVA gives .newsletter-subscribe 80 px below; ours sit together */ .ks-nl-off > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; font-size: 15px; color: var(--ks-g700); } .ks-nl-off > summary::-webkit-details-marker { display: none; } .ks-nl-off > summary::after { content: ""; width: 7px; height: 7px; margin-top: -3px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 200ms var(--ks-out), margin 200ms var(--ks-out); } .ks-nl-off[open] > summary::after { margin-top: 3px; transform: rotate(-135deg); } .ks-nl-off > summary:hover { color: var(--ks-link); } .ks-nl-off > summary:focus-visible { outline: 2px solid var(--ks-o500); outline-offset: 4px; border-radius: 4px; } .ks-nl-off-body { padding-top: 14px; } .ks-nl-off-body p { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ks-g600); } @media (min-width: 992px) { /* two parts: the head left, everything else (.ks-nl-main) right */ .ks-nl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 56px; align-items: start; padding-top: 40px; } } @media (min-width: 992px) and (max-width: 1745.98px) { .ks-nl.container { padding-left: 48px; padding-right: 48px; } .ks-nl { column-gap: 48px; } } @media (max-width: 991.98px) { .ks-nl-head { margin-bottom: 24px; } } @media (max-width: 575.98px) { .ks-nl-card { padding: 20px 16px; border-radius: 18px; } .ks-nl-row { grid-template-columns: minmax(0, 1fr); } .ks-nl-btn.btn { width: 100%; } } /* ---------- 3.78.0 legal text pages (.ks-legal, written into the CMS text; first: Batteriegesetzhinweise) ---------- The shipping page's rhythm: a lead over the full width, then sections with the title left (sticky) and the text right, 1 : 2, on the central block (1650, 48 px gutter on laptops). .ks-batt: the battery symbols as cards; the crossed-out wheelie bin is a CSS mask, so the admin editor cannot break it. */ main:has(.ks-legal) .link-content.container, main:has(.ks-legal) .index-heading-wrapper { max-width: 1650px; } @media (min-width: 992px) and (max-width: 1745.98px) { main:has(.ks-legal) .link-content.container, main:has(.ks-legal) .index-heading-wrapper { padding-left: 48px; padding-right: 48px; } } .ks-legal { padding-bottom: 56px; } .ks-legal-lead { margin: 4px 0 40px; font-size: 19px; line-height: 1.5; color: var(--ks-g700); } .ks-legal-sec { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 56px; align-items: start; padding: 40px 0; border-top: 1px solid var(--ks-g200); } .ks-legal-sec > h2 { position: sticky; top: calc(var(--ks-header-h, 69px) + 24px); margin: 0; font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; color: var(--ks-g900); } .ks-legal-body > :last-child { margin-bottom: 0; } .ks-legal-body p { margin: 0 0 14px; font-size: var(--ks-text, 15px); line-height: 1.6; color: var(--ks-g800); } .ks-legal-body strong { font-weight: 600; color: var(--ks-g900); } .ks-legal-body a, .ks-legal-ask a { color: var(--ks-link); text-decoration: underline; text-underline-offset: 3px; } .ks-legal-list { margin: 0 0 16px; padding: 0; list-style: none; } .ks-legal-list li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--ks-g200); font-size: var(--ks-text, 15px); line-height: 1.55; color: var(--ks-g800); } .ks-legal-list li:last-child { border-bottom: 1px solid var(--ks-g200); } .ks-legal-list li::before { content: ""; position: absolute; left: 2px; top: 19px; width: 6px; height: 6px; border-radius: 50%; background: var(--ks-o500); } .ks-legal-ask { margin: 0; padding: 28px 0 0; border-top: 1px solid var(--ks-g200); font-size: 15px; color: var(--ks-g700); } /* the four symbols */ .ks-batt-signs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; } .ks-batt-signs li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 22px 14px 18px; border-radius: 18px; background: var(--ks-g50); text-align: center; } .ks-batt-bin { display: block; width: 52px; height: 60px; margin-bottom: 4px; background: var(--ks-g900); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 60' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 17h22l-2.6 27H17.6z'/%3E%3Cpath d='M12 17h28M22 17v-3.5h8V17'/%3E%3Cpath d='M37 21l4 0'/%3E%3Ccircle cx='20' cy='48' r='2.6'/%3E%3Ccircle cx='33' cy='48' r='2.6'/%3E%3Cpath d='M8 8l36 46M44 8L8 54'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 60' fill='none' stroke='black' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 17h22l-2.6 27H17.6z'/%3E%3Cpath d='M12 17h28M22 17v-3.5h8V17'/%3E%3Cpath d='M37 21l4 0'/%3E%3Ccircle cx='20' cy='48' r='2.6'/%3E%3Ccircle cx='33' cy='48' r='2.6'/%3E%3Cpath d='M8 8l36 46M44 8L8 54'/%3E%3C/svg%3E") center / contain no-repeat; } .ks-batt-chem { margin: -2px 0 4px; font-size: 17px; font-weight: 700; line-height: 1; color: var(--ks-g900); } .ks-batt-signs strong { font-size: 15px; font-weight: 600; color: var(--ks-g900); } .ks-batt-signs span:not(.ks-batt-bin) { font-size: 13px; line-height: 1.4; color: var(--ks-g600); } .ks-batt-signs li:first-child .ks-batt-bin { margin-bottom: 25px; } @media (max-width: 991.98px) { .ks-legal-sec { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 32px 0; } .ks-legal-sec > h2 { position: static; } .ks-legal-lead { font-size: 17px; margin-bottom: 28px; } .ks-batt-signs { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* registration numbers as quiet rows */ .ks-legal-facts { margin: 0 0 16px; } .ks-legal-facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 10px 0; border-top: 1px solid var(--ks-g200); font-size: var(--ks-text, 15px); } .ks-legal-facts > div:last-child { border-bottom: 1px solid var(--ks-g200); } .ks-legal-facts dt { font-weight: 400; color: var(--ks-g600); } .ks-legal-facts dd { margin: 0; font-weight: 500; text-align: right; color: var(--ks-g900); } /* ---------- 3.79.0 sitemap (page/sitemap.tpl, owner 2026-11-11) ---------- No NOVA cards: a lead, then one section per kind (range, pages, ...) with a large title and columns of groups, each a small bold title over a plain list, in the manner of a store sitemap. Central block 1650, 48 px on laptops. */ main:has(.ks-sm) .index-heading-wrapper, .ks-sm { max-width: 1650px; } @media (min-width: 992px) and (max-width: 1745.98px) { main:has(.ks-sm) .index-heading-wrapper, .ks-sm.container { padding-left: 48px; padding-right: 48px; } } .ks-sm { padding-bottom: 72px; } .ks-sm-lead { margin: 4px 0 40px; font-size: 19px; line-height: 1.5; color: var(--ks-g700); } .ks-sm-sec { padding: 40px 0 8px; border-top: 1px solid var(--ks-g200); } .ks-sm-h { margin: 0 0 28px; font-size: clamp(24px, 2.4vw, 32px); font-weight: 500; line-height: 1.15; letter-spacing: -.025em; color: var(--ks-g900); } .ks-sm-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 40px; align-items: start; } .ks-sm-group { padding-bottom: 32px; break-inside: avoid; } .ks-sm-gh { margin: 0 0 10px; font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--ks-g900); } .ks-sm-gh a { color: inherit; text-decoration: none; } .ks-sm-gh a:hover { color: var(--ks-link); } .ks-sm-list { margin: 0; padding: 0; list-style: none; } .ks-sm-list li { margin: 0; } .ks-sm-list a { display: inline-block; padding: 4px 0; font-size: 14px; line-height: 1.45; color: var(--ks-g700); text-decoration: none; transition: color 150ms var(--ks-out); } .ks-sm-list a:hover { color: var(--ks-link); text-decoration: none; } .ks-sm-list.is-sub { margin: 0 0 6px; padding-left: 14px; border-left: 1px solid var(--ks-g200); } .ks-sm-list.is-sub a { font-size: 13px; color: var(--ks-g600); } .ks-sm-list.is-flow { columns: 4 200px; column-gap: 40px; padding-bottom: 32px; } @media (max-width: 575.98px) { .ks-sm-lead { font-size: 17px; margin-bottom: 28px; } .ks-sm-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; } .ks-sm-sec { padding-top: 32px; } .ks-sm-h { margin-bottom: 20px; } } /* ===== Start page block 2: four ways (owner 2026-11-11, prototype _preview/home-ways.html) ===== A light grey band from edge to edge, white cards like the Apple Store. Each card is a subgrid of six rows (picture, title, "Ideal, wenn", advantages, "Gut zu wissen", price), so these rows sit on one level across the cards. */ .ks-ways-band { position: relative; width: 100vw; margin: 56px 0 0 calc(50% - 50vw); padding: 64px 0 72px; background: var(--ks-g50); } /* the same edges as "Was stört" and the mosaic (owner 2026-11-11): the margin of the start page, no max width */ .ks-ways-in { max-width: none; margin: 0; padding: 0 var(--ks-home-pad, 48px); } .ks-ways-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 28px; } .ks-ways-head .ks-h2 { margin: 0; } .ks-ways-more { display: flex; flex-wrap: wrap; gap: 8px; } .ks-ways-more a { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 16px; border-radius: 18px; background: #FFFFFF; color: var(--ks-g800); font-size: 14px; text-decoration: none; box-shadow: inset 0 0 0 1px var(--ks-g200); transition: box-shadow 200ms ease, color 200ms ease; } .ks-ways-more a::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); } .ks-ways-more a:hover { color: var(--ks-o700); text-decoration: none; box-shadow: inset 0 0 0 1px var(--ks-o300); } .ks-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .ks-way { display: grid; grid-row: span 6; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 0 0 26px; border-radius: 28px; overflow: hidden; background: #FFFFFF; color: var(--ks-g900); text-decoration: none; box-shadow: 0 4px 12px rgba(43, 42, 40, .06); transition: box-shadow 300ms cubic-bezier(0, 0, .5, 1), transform 300ms cubic-bezier(0, 0, .5, 1); } .ks-way:hover { color: var(--ks-g900); text-decoration: none; transform: scale(1.01); box-shadow: 0 4px 16px rgba(43, 42, 40, .12); } .ks-way:active { transform: scale(.995); } .ks-way:focus-visible { outline: 2px solid var(--ks-o500); outline-offset: 3px; } /* the picture zone grows with the card up to 240 px high; the keys keep their size, a wider card shows more of them */ .ks-way-ph { position: relative; display: block; aspect-ratio: 16 / 11; max-height: 240px; width: 100%; margin: 0 0 22px; padding: 26px 30px 6px; } .ks-way-ph img { display: block; width: 100%; height: 100%; object-fit: contain; } .ks-way-t { margin: 0; padding: 0 28px; font-size: 22px; line-height: 1.2; font-weight: 600; letter-spacing: -.015em; color: inherit; } .ks-way-ideal { margin: 8px 0 0; padding: 0 28px; font-size: 16px; line-height: 1.4; color: var(--ks-g700); } .ks-way-ul { list-style: none; margin: 18px 0 0; padding: 16px 28px 0; border-top: 1px solid var(--ks-g100); display: flex; flex-direction: column; gap: 9px; } .ks-way-ul li { position: relative; padding-left: 26px; font-size: 15px; line-height: 1.35; color: var(--ks-g800); } .ks-way-ul li::before { content: ""; position: absolute; left: 2px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--ks-ok); } .ks-way-ul li::after { content: ""; position: absolute; left: 6.5px; top: 6px; width: 3px; height: 6px; border: solid #FFFFFF; border-width: 0 1.6px 1.6px 0; transform: rotate(45deg); } .ks-way-know { margin: 16px 0 0; padding: 0 28px; font-size: 13px; line-height: 1.4; color: var(--ks-g500); align-self: start; } .ks-way-know b { font-weight: 500; color: var(--ks-g600); } .ks-way-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 22px 0 0; padding: 0 28px; align-self: end; } .ks-way-price { font-size: 15px; color: var(--ks-g600); } .ks-way-price b { font-size: 19px; font-weight: 600; color: var(--ks-g900); letter-spacing: -.01em; } .ks-way-go { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 500; color: var(--ks-link); white-space: nowrap; } .ks-way-go::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 200ms cubic-bezier(0, 0, .5, 1); } .ks-way:hover .ks-way-go::after { transform: translateX(3px) rotate(45deg); } /* 3D keys in the picture zone: one at a time (sticker card) or a row running on beyond the card (keyboards), all the same size; the row follows the key's own axis (rotateX 56, rotateZ -36), the middle key in the centre */ .ks-way-ph:has(.ks-3k) { padding: 0; overflow: hidden; } .ks-way-key, .ks-way-rk { position: absolute; inset: 0; } .ks-way-key .ks-3k, .ks-way-rk .ks-3k { position: absolute; inset: 0; width: 100%; height: 100%; } .ks-way-key .ks-3k-rig, .ks-way-rk .ks-3k-rig { scale: 2.65 2.65 2.65; translate: 0 18px; } .ks-way-key { opacity: 0; transform: scale(.96); transition: opacity 600ms cubic-bezier(0, 0, .5, 1), transform 600ms cubic-bezier(0, 0, .5, 1); } .ks-way-key.is-on { opacity: 1; transform: none; } /* the piece of keyboard lies on ONE plane (owner 2026-11-11: "the keys do not lie evenly"): the plane carries the tilt of the single keys (rotateX 56, rotateZ -36) and their size, the keys sit flat on it in a grid of --p (key 66 + gap), so all gaps are the same and the browser sorts the keys in depth itself */ .ks-way-plane { position: absolute; left: 50%; top: calc(50% + 18px); width: 0; height: 0; transform-style: preserve-3d; transform: perspective(2400px) rotateX(56deg) rotateZ(-36deg) scale3d(2.65, 2.65, 2.65); --p: 76px; } .ks-way-ph.is-mac .ks-way-plane { --p: 70px; } .ks-way-plane .ks-way-rk { position: absolute; inset: auto; left: calc(var(--i) * var(--p) - var(--w, 1) * var(--p) / 2 + (var(--p) - 66px) / 2); top: calc(var(--r) * var(--p) - 33px); width: calc(var(--w, 1) * var(--p) - (var(--p) - 66px)); height: calc(var(--h, 1) * var(--p) - (var(--p) - 66px)); transform-style: preserve-3d; } .ks-way-plane .ks-way-rk .ks-3k { position: absolute; inset: 0; width: 100%; height: 100%; perspective: none; transform-style: preserve-3d; } .ks-way-ph .ks-way-plane .ks-3k-rig { width: 100%; height: 100%; } /* Tab, Caps, Shift, Strg, Alt, space: wider keys with a small label in the corner, as on a real keyboard */ .ks-way-plane .ks-way-rk.is-mod .ks-3k-top .b, .ks-way-plane .ks-way-rk.is-mod .ks-3k-top .f { left: 10px; top: 9px; right: auto; bottom: auto; font-size: 19px; font-weight: 400; transform: none; } .ks-way-ph.is-glow .ks-way-plane .ks-way-rk.is-mod .ks-3k.is-mono.st-contrast .ks-3k-top .f { font-size: 22px; transform: none; } .ks-way-ph.is-mac .ks-way-plane .ks-way-rk.is-mod .ks-3k-top .b { font-size: 16px; top: auto; bottom: 9px; } .ks-way-ph .ks-way-plane .ks-3k-rig { left: 0; top: 0; margin: 0; transform: none !important; scale: none; translate: none; transition: none; } /* keyboards (owner 2026-11-11): no sticker film, the letters sit on the key itself. print: the light key's face is the key, letters printed (German dark, Russian red); glow: black key, the large letter burnt in and lit from below in bright white. Rows touch, so no drop shadow per key, only the contact shadow. */ .ks-way-ph.is-board .ks-3k-sh { display: none; } /* the keys sit on the keyboard: a grey case under the light keys, a black one under the black keys */ .ks-way-ph.is-print { background: #A9A6A1; } .ks-way-ph.is-glow { background: #1A1918; } /* the cap: its top a little smaller than the body and a shade lighter, a soft rim of light on the upper edges and a darker lower edge, so the face reads apart from the sides without looking like a film */ .ks-way-ph.is-board .ks-3k-top { transform: translateZ(9px) scale(.97); } .ks-way-ph.is-print .ks-3k-top { background: radial-gradient(130% 130% at 30% 25%, #E4E2DE 0%, #DAD8D4 60%, #D1CFCA 100%); box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, .55), inset -1.5px -1.5px 0 rgba(0, 0, 0, .07), inset 0 0 6px rgba(0, 0, 0, .05); } .ks-way-ph.is-print .ks-3k-top .b { color: #34312E; font-weight: 500; } .ks-way-ph.is-print .ks-3k-top .f { color: #C7361D; font-weight: 500; font-size: 22px; } .ks-way-ph.is-glow .ks-3k-top { background: radial-gradient(130% 130% at 30% 25%, #45433F 0%, #3C3A37 60%, #353331 100%); box-shadow: inset 1.5px 1.5px 0 rgba(255, 255, 255, .13), inset -1.5px -1.5px 0 rgba(0, 0, 0, .35), inset 0 0 6px rgba(0, 0, 0, .25); } .ks-way-ph.is-glow .ks-3k.is-mono.st-contrast .ks-3k-top .f { font-size: 44px; font-weight: 400; color: #F2F4F6; text-shadow: 0 0 2px rgba(255, 255, 255, .7), 0 0 7px rgba(235, 244, 255, .55), 0 0 14px rgba(200, 225, 255, .3); } /* the keys in this block keep their shadow on hover (owner 2026-11-11: no shadows popping up) */ .ks-way:hover .ks-3k-sh, .ks-way:focus-visible .ks-3k-sh { opacity: .55; transform: none; } /* the sticker card: four zones in colours of the mosaic palette (ks.js); a zone reaching into the gap of the next row does so with padding plus an equal negative margin, so the rows keep the height of the white cards */ .ks-way.is-lead { --wz-k: #F0F8FE; --wz-h: #EAE2B7; --wz-l: #FCBF49; --wz-f: #003049; --wf-k: #1E1C1A; --wf-h: #1E1C1A; --wf-l: #1E1C1A; --wf-f: #FFFFFF; --wf2-k: rgba(30, 28, 26, .72); --wf2-h: rgba(30, 28, 26, .72); --wf2-l: rgba(30, 28, 26, .72); --wf2-f: rgba(255, 255, 255, .78); background: var(--wz-l); color: var(--wf-l); } .ks-way.is-lead .ks-way-ph { background: var(--wz-k); } .ks-way.is-lead .ks-way-t { margin-top: -22px; padding-top: 22px; background: var(--wz-h); color: var(--wf-h); } .ks-way.is-lead .ks-way-ideal { margin: 0 0 -18px; padding-top: 8px; padding-bottom: 18px; background: var(--wz-h); color: var(--wf2-h); } .ks-way.is-lead .ks-way-ul { border-top: 0; } .ks-way.is-lead .ks-way-ul li { color: var(--wf-l); } .ks-way.is-lead .ks-way-ul li::before { background: var(--wf-l); } .ks-way.is-lead .ks-way-ul li::after { border-color: var(--wz-l); } .ks-way.is-lead .ks-way-know { color: var(--wf2-l); } .ks-way.is-lead .ks-way-know b { color: var(--wf-l); } .ks-way.is-lead .ks-way-foot { margin: 18px 0 -26px; padding-top: 22px; padding-bottom: 26px; background: var(--wz-f); } .ks-way.is-lead .ks-way-price { color: var(--wf2-f); } .ks-way.is-lead .ks-way-price b, .ks-way.is-lead .ks-way-go { color: var(--wf-f); } @media (max-width: 1399.98px) { .ks-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .ks-ways-band { margin-top: 44px; padding: 44px 0 48px; } .ks-ways-head { margin-bottom: 20px; } .ks-ways { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-rows: repeat(6, auto); gap: 0 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--ks-home-pad, 16px); margin: 0 calc(-1 * var(--ks-home-pad, 16px)); padding: 4px var(--ks-home-pad, 16px) 18px; scrollbar-width: none; } .ks-ways::-webkit-scrollbar { display: none; } .ks-way { grid-row: 1 / span 6; scroll-snap-align: start; border-radius: 24px; } .ks-way:hover { transform: none; } .ks-way-t { font-size: 20px; } .ks-way-ph { padding: 22px 24px 4px; } .ks-way-t, .ks-way-ideal, .ks-way-ul, .ks-way-know, .ks-way-foot { padding-left: 22px; padding-right: 22px; } } @media (prefers-reduced-motion: reduce) { .ks-way, .ks-way-go::after, .ks-way-key { transition: none; } } /* Tiles across the shop: the Apple Store hover (owner 2026-11-11: our lift was too strong): no lift, the tile grows by one percent and its shadow deepens a little */ .ks-home-prob, .ks-type, .ks-sc, .ks-mm-product { transition: background-color 300ms cubic-bezier(0, 0, .5, 1), border-color 300ms cubic-bezier(0, 0, .5, 1), box-shadow 300ms cubic-bezier(0, 0, .5, 1), transform 300ms cubic-bezier(0, 0, .5, 1); } .ks-home-prob:hover, .ks-type:hover, .ks-sc:hover, .ks-mm-product:hover { transform: scale(1.01) !important; box-shadow: 0 4px 16px rgba(43, 42, 40, .10) !important; } /* start page block 2, silicone covers (owner 2026-11-11): a MacBook keyboard under our clear silicone cover, low black keys with small corners on the space grey case seen through the clear silicone, German and Russian letters both white and thin (as printed on the cover, see the product photo 697) */ .ks-way-ph.is-mac { background: radial-gradient(140% 120% at 30% 20%, #57585D 0%, #4B4C51 55%, #424347 100%); } /* MacBook keys sit closer together than desktop keys */ /* MacBook keys sit closer together than desktop keys: see --p in .ks-way-plane */ .ks-way-ph.is-mac .ks-3k-rig > span { border-radius: 4px; } .ks-way-ph.is-mac .ks-3k-sl:nth-child(n+6) { display: none; } /* the sides are silicone too, the colour of the case seen through it; only the top is painted black */ .ks-way-ph.is-mac .ks-3k-sl:nth-child(3) { background: #3C3D41 !important; } .ks-way-ph.is-mac .ks-3k-sl:nth-child(4) { background: #424347 !important; } .ks-way-ph.is-mac .ks-3k-sl:nth-child(5) { background: #47484C !important; } .ks-way-ph.is-mac .ks-3k-con { background: rgba(20, 20, 22, .35); } .ks-way-ph.is-mac .ks-3k-con { background: rgba(30, 30, 32, .45); filter: blur(1.6px); } .ks-way-ph.is-mac .ks-3k-top { transform: translateZ(3.4px) scale(.985); background: radial-gradient(130% 130% at 30% 25%, #2C2C2E 0%, #232325 60%, #1D1D1F 100%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .10), inset -1px -1px 0 rgba(0, 0, 0, .4); } .ks-way-ph.is-mac .ks-3k-top .b { left: 10px; top: 8px; font-size: 24px; font-weight: 300; color: #F5F5F7; } .ks-way-ph.is-mac .ks-3k-top .f { right: 11px; bottom: 9px; font-size: 22px; font-weight: 300; color: #F5F5F7; } /* == ks-pk: start page block 1 keyboards (tools/ks_probs_mock.py template) == */ /* the keyboard of the tile */ .ks-pk-stage .ks-way-plane{transform:perspective(2400px) rotateX(56deg) rotateZ(-36deg) scale3d(var(--s),var(--s),var(--s));top:calc(50% + 10px)} .ks-pk-stage .ks-3k-sh{display:none} .ks-pk-stage .ks-way-plane .ks-3k-rig{left:0;top:0;margin:0;width:100%;height:100%;transform:none!important;scale:none;translate:none;transition:none} .ks-pk-stage .ks-3k-top{transform:translateZ(9px) scale(.97);background:radial-gradient(130% 130% at 30% 25%,#4D4B47 0%,#43413E 60%,#3B3936 100%); box-shadow:inset 1.5px 1.5px 0 rgba(255,255,255,.17),inset -1.5px -1.5px 0 rgba(0,0,0,.35),inset 0 0 6px rgba(0,0,0,.25)} .ks-pk-stage .ks-3k-top .b{color:#EDECEA;font-weight:400} /* laptop keys: smaller corners, sides a shade darker than the top and a fine light rim around the top, so the face reads apart from the sides (owner 2026-11-11) */ .ks-pk-stage .ks-3k-rig > span{border-radius:6px} .ks-pk-stage .ks-3k-top{box-shadow:inset 0 0 0 1px rgba(255,255,255,.10),inset 1.5px 1.5px 0 rgba(255,255,255,.16),inset -1.5px -1.5px 0 rgba(0,0,0,.4),inset 0 0 6px rgba(0,0,0,.2)} .ks-pk-stage .ks-3k-sl:nth-child(3){background:#121110!important} .ks-pk-stage .ks-3k-sl:nth-child(4){background:#151413!important} .ks-pk-stage .ks-3k-sl:nth-child(5){background:#181716!important} .ks-pk-stage .ks-3k-sl:nth-child(6){background:#1B1A19!important} .ks-pk-stage .ks-3k-sl:nth-child(7){background:#1E1D1C!important} .ks-pk-stage .ks-3k-sl:nth-child(8){background:#21201F!important} .ks-pk-stage .ks-3k-sl:nth-child(9){background:#2A2928!important} .ks-pk-stage .ks-3k-rig > .ks-pk-stk{border-radius:5px} .ks-pk-stage .ks-way-rk.is-mod .ks-3k-top .b{left:10px;top:9px;font-size:19px;font-weight:400;transform:none} /* worn keys: the letters half rubbed off */ .ks-pk-stage.is-worn .ks-3k-top .b{opacity:.18;filter:blur(.4px)} .ks-pk-stage.is-worn .ks-way-rk:nth-child(3n) .ks-3k-top .b{opacity:.08} /* small letters, hard to read */ .ks-pk-stage.is-small .ks-3k-top .b{color:#A6A4A2} /* one worn key next to the sticker (owner 2026-11-11): the H almost rubbed off, patchy */ .ks-pk-stage .ks-way-rk.is-rubbed .ks-3k-top .b{opacity:.6;filter:blur(.3px); -webkit-mask:linear-gradient(#000,#000),radial-gradient(circle at 72% 55%,#000 0 14%,transparent 24%);-webkit-mask-composite:xor; mask:linear-gradient(#000,#000),radial-gradient(circle at 72% 55%,#000 0 14%,transparent 24%);mask-composite:exclude} /* the sticker: lies on the key top, comes down from above when the tile shows up (and again on hover) */ .ks-3k-rig > .ks-pk-stk{position:absolute;inset:3.5px;border-radius:7px;transform:translateZ(9.6px);transition:transform 750ms cubic-bezier(.2,.9,.25,1)} .ks-home-prob:not(.ks-pk-on) .ks-pk-stk{transform:translateZ(34px) translate(-4px,-3px) rotateZ(-5deg);transition-duration:0ms} .ks-pk-stk::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none} .ks-pk-stk.is-film{background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)} .ks-pk-stk.is-film::after{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%)} .ks-pk-stk.is-film .ks-pk-stk-f{position:absolute;right:8px;bottom:6px;font-size:22px;font-weight:500;line-height:1;color:#57C1EC;transform:rotateZ(-3deg)} .ks-pk-stk.is-deck{background:radial-gradient(120% 120% at 30% 25%,#2E2D2B 0%,#1F1E1D 55%,#171615 100%);box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),0 0 0 .6px rgba(255,255,255,.12)} .ks-pk-stk.is-deck::after{background:linear-gradient(135deg,rgba(255,255,255,.18),rgba(255,255,255,0) 40%)} .ks-pk-stk.is-deck .ks-pk-stk-b{position:absolute;left:8px;top:6px;font-size:26px;line-height:1;color:#F4F3F0;transform:rotateZ(-3deg)} .ks-pk-stk.is-deck .ks-pk-stk-f{position:absolute;right:8px;bottom:6px;font-size:22px;line-height:1;color:#57C1EC;transform:rotateZ(-3deg)} .ks-pk-stk.is-big{background:radial-gradient(120% 120% at 30% 25%,#2E2D2B 0%,#1F1E1D 55%,#171615 100%);box-shadow:inset 1px 1px 0 rgba(255,255,255,.22),0 0 0 .6px rgba(255,255,255,.12)} .ks-pk-stk.is-big .ks-pk-stk-c,.ks-pk-stk.is-lern .ks-pk-stk-c{position:absolute;left:50%;top:50%;line-height:1;transform:translate(-50%,-50%) rotateZ(-3deg)} .ks-pk-stk.is-big .ks-pk-stk-c{font-size:45px;font-weight:500;color:#FFED00} .ks-pk-stk.is-one .ks-pk-stk-c{position:absolute;left:50%;top:50%;font-size:30px;font-weight:400;line-height:1;color:#F4F3F0;transform:translate(-50%,-50%) rotateZ(-3deg)} .ks-pk-stk.is-lern{background:#9FD6F2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.4)} .ks-pk-stk.is-lern .ks-pk-stk-c{font-size:28px;font-weight:500;color:#1E1D1C;margin-top:-4px} .ks-pk-stk.is-finger{background:var(--c);box-shadow:inset 1px 1px 0 rgba(255,255,255,.28)} .ks-pk-stk.is-finger::after{background:linear-gradient(135deg,rgba(255,255,255,.22),rgba(255,255,255,0) 45%)} .ks-pk-stk.is-finger .ks-pk-stk-c{position:absolute;left:50%;top:50%;font-size:26px;font-weight:500;line-height:1;color:#fff;transform:translate(-50%,-50%) rotateZ(-3deg)} .ks-pk-stk.is-finger.is-dark .ks-pk-stk-c{color:#1E1D1C} .ks-pk-stk.is-finger.is-mod .ks-pk-stk-c{font-size:17px;font-weight:400} .ks-pk-stk.is-finger i{position:absolute;left:50%;bottom:8px;width:12px;height:3px;margin-left:-6px;border-radius:2px;background:#2A2826} .ks-home-prob:not(.ks-pk-on) .ks-pk-stk.is-fixed{transform:translateZ(9.6px)} .ks-pk-stk.is-lern i{position:absolute;left:50%;top:50%;width:9px;height:2.6px;margin:12px 0 0 -4.5px;border-radius:2px;background:#2A2826} /* the shadow of the sticker on the key: wide and soft while it hangs above, gone once it lies on the key */ .ks-pk-stage .ks-3k-top{position:relative} @media (prefers-reduced-motion:reduce){.ks-pk-stk,.ks-home-prob:not(.ks-pk-on) .ks-pk-stk{transform:translateZ(9.6px);transition:none}} /* the block: questions on the left, a stack of cards on the right; the page scrolls through four steps while the block stands (sticky); each card comes up from below over the last, then the scroll lowers its sticker */ .ks-sd{position:relative;height:calc(var(--steps, 4) * 100vh + 40vh)} .ks-sd-pin{position:sticky;top:max(calc(var(--ks-header-h, 110px) + 16px), calc(50vh - 330px))} .ks-sd-tabs{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2.2fr);gap:28px;align-items:start} .ks-sd-qs{display:flex;flex-direction:column;gap:6px;padding-top:8px} .ks-sd-q{position:relative;display:grid;grid-template-columns:28px 1fr;align-items:center;gap:12px;width:100%;padding:18px 18px 20px;border:0;border-radius:18px;background:transparent; color:var(--ks-g600);font:inherit;font-size:18px;font-weight:500;line-height:1.3;text-align:left;cursor:pointer;transition:background-color 300ms ease,color 300ms ease} .ks-sd-q:hover{color:var(--ks-g900)} .ks-sd-q:focus-visible{outline:2px solid var(--ks-o500);outline-offset:2px} .ks-sd-q.is-active{background:var(--ks-g50);color:var(--ks-g900)} .ks-sd-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--ks-g100);font-size:13px;font-weight:600;color:var(--ks-g600);transition:background-color 300ms ease,color 300ms ease} .ks-sd-q.is-active .ks-sd-n{background:var(--ks-g900);color:#fff} .ks-sd-bar{position:absolute;left:58px;right:18px;bottom:10px;height:2px;border-radius:1px;overflow:hidden} .ks-sd-q.is-active .ks-sd-bar{background:var(--ks-g200)} .ks-sd-bar i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--ks-g900)} .ks-sd-q:not(.is-active) .ks-sd-bar i{width:0} .ks-sd-deck{position:relative;height:min(640px, calc(100vh - var(--ks-header-h, 110px) - 40px));border-radius:28px;overflow:hidden;background:var(--ks-g50)} .ks-sd-card{position:absolute;inset:0;z-index:var(--z);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);border-radius:28px;overflow:hidden;background:var(--ks-g50); transform:translateY(calc((1 - var(--e,1)) * 102%)) scale(calc(1 - var(--b,0) * .05));transform-origin:50% 0; box-shadow:0 -18px 40px rgba(20,18,16,calc(var(--e,1) * (1 - var(--e,1)) * .9));will-change:transform} .ks-sd-card:not(:first-child){--e:0} .ks-sd-card::after{content:"";position:absolute;inset:0;background:#000;opacity:calc(var(--b,0) * .35);pointer-events:none} .ks-sd-stage{position:relative;background:#1A1918;overflow:hidden} .ks-sd-stage .ks-pk-stage{position:absolute;inset:0;margin:0;height:auto} .ks-sd-copy{padding:44px 40px;align-self:center} .ks-sd-t{margin:0;font-size:32px;line-height:1.15;font-weight:600;letter-spacing:-.02em;color:var(--ks-g900)} .ks-sd-p{margin:12px 0 0;font-size:18px;line-height:1.5;color:var(--ks-g600)} .ks-sd-ul{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px} .ks-sd-ul li{position:relative;padding-left:26px;font-size:15px;line-height:1.4;color:var(--ks-g800)} .ks-sd-ul li::before{content:"";position:absolute;left:1px;top:3px;width:15px;height:15px;border-radius:50%;background:var(--ks-ok)} .ks-sd-ul li::after{content:"";position:absolute;left:6px;top:6px;width:3.5px;height:6.5px;border:solid #fff;border-width:0 1.7px 1.7px 0;transform:rotate(45deg)} .ks-sd-go{display:inline-flex;align-items:center;gap:8px;margin-top:22px;height:44px;padding:0 22px;border-radius:22px;background:var(--ks-g900);color:#fff;font-size:15px;font-weight:500;text-decoration:none} .ks-sd-go:hover{color:#fff;text-decoration:none;background:#000} .ks-sd-go::after{content:"";width:7px;height:7px;border-right:1.7px solid currentColor;border-top:1.7px solid currentColor;transform:rotate(45deg)} /* the sticker follows the scroll: --l = 0 hangs above the key, 1 lies on it */ .ks-sd-card .ks-3k-rig > .ks-pk-stk{transition:none;transform:translateZ(calc(9.6px + (1 - var(--l,0)) * 30px)) translate(calc((var(--l,0) - 1) * 5px), calc((var(--l,0) - 1) * 4px)) rotateZ(calc((var(--l,0) - 1) * 6deg))} .ks-sd-card .ks-3k-rig > .ks-pk-stk.is-fixed{transform:translateZ(9.6px)} @media (max-width:1199.98px){.ks-sd-tabs{grid-template-columns:1fr}.ks-sd-qs{flex-direction:row;overflow-x:auto;scrollbar-width:none;padding-top:0} .ks-sd-qs::-webkit-scrollbar{display:none} .ks-sd-q{width:auto;flex:none;font-size:15px;padding:10px 16px 12px;white-space:nowrap}.ks-sd-bar{left:16px;right:16px;bottom:5px}} @media (max-width:767.98px){.ks-sd-pin{top:calc(var(--ks-header-h, 64px) + 8px)}.ks-sd-deck{height:calc(100vh - var(--ks-header-h, 64px) - 80px)} .ks-sd-card{grid-template-columns:1fr;grid-template-rows:42% 1fr}.ks-sd-copy{padding:20px 22px;align-self:start} .ks-sd-t{font-size:22px}.ks-sd-p{font-size:15px;margin-top:8px}.ks-sd-ul{margin-top:12px;gap:6px}.ks-sd-ul li{font-size:14px}.ks-sd-go{margin-top:14px}} @media (prefers-reduced-motion:reduce){.ks-sd-card .ks-3k-rig > .ks-pk-stk{transform:translateZ(9.6px)}} /* title band, block 2 and the languages in one frame (owner 2026-11-11): the frame scrolls normally until block 2 sits in the middle of the screen (lower part of the title band above, top of the languages below), then it stands (sticky with a negative top, set by ks.js) while the scroll runs the four cards; block 2 is about as high as the title band. Without the script the frame simply scrolls and block 2 shows its first card. */ .ks-sd-wrap{position:relative} .ks-sd-frame{position:sticky;top:var(--sd-top, 0px)} .ks-sd-sec{position:relative;height:var(--sd-h, 560px);padding:28px 0 26px;background:#fff} .ks-sd-sec .ks-sd{height:100%} .ks-sd-sec .ks-sd-pin{position:static;height:100%;display:flex;flex-direction:column} .ks-sd-sec .ks-sd-pin > .ks-h2{margin:0 0 18px;flex:none} .ks-sd-sec .ks-sd-tabs{flex:1;min-height:0} .ks-sd-sec .ks-sd-deck{height:100%} @media (max-width:1199.98px){.ks-sd-sec .ks-sd-tabs{display:flex;flex-direction:column;align-items:stretch;gap:12px}.ks-sd-sec .ks-sd-qs{flex:none}.ks-sd-sec .ks-sd-deck{flex:1;height:auto}} @media (max-width:767.98px){.ks-sd-sec{padding:18px 0 14px}.ks-sd-sec .ks-sd-pin > .ks-h2{margin-bottom:12px}} /* the heading split over the columns on wide screens: the h2 gives its two parts to the grid */ .ks-sd-sec .ks-sd-h{margin:0} .ks-sd-sec .ks-sd-h .ks-sd-h1{color:var(--ks-g900)} @media (min-width:1200px){.ks-sd-sec .ks-sd-tabs{grid-template-rows:auto minmax(0,1fr);row-gap:16px} .ks-sd-sec .ks-sd-h{display:contents}.ks-sd-sec .ks-sd-h1,.ks-sd-sec .ks-sd-h2{align-self:end} .ks-sd-sec .ks-sd-h1{padding-left:18px}.ks-sd-sec .ks-sd-qs{grid-column:1;grid-row:2}.ks-sd-sec .ks-sd-deck{grid-column:2;grid-row:2} /* the questions larger and in the middle of the height of the cards (owner 2026-11-11) */ .ks-sd-sec .ks-sd-qs{align-self:center;gap:8px;padding-top:0} .ks-sd-sec .ks-sd-q{grid-template-columns:34px 1fr;gap:14px;padding:20px 20px 22px;font-size:21px} .ks-sd-sec .ks-sd-n{width:34px;height:34px;font-size:15px} .ks-sd-sec .ks-sd-bar{left:68px;right:20px;bottom:11px} .ks-sd-sec .ks-sd-h1{padding-left:20px}} @media (max-width:1199.98px){.ks-sd-sec .ks-sd-h{flex:none;margin-bottom:4px}} /* the text side tells the scene along with the scroll (owner 2026-11-11): a large step number behind the text, the three advantages tick one after the other while the sticker comes down (--l from ks.js, 0 hangs .. 1 lies), the price "ab" from the shop beside the button. Without the script --l is 1: everything is simply there. */ .ks-sd-card{--l:1} .ks-sd-copy{position:relative;overflow:hidden} .ks-sd-num{position:absolute;right:-.06em;top:-.16em;z-index:0;font-size:clamp(120px, 13vw, 230px);font-weight:700;line-height:1;letter-spacing:-.07em; color:rgba(43,42,40,.045);-webkit-text-stroke:1.5px rgba(43,42,40,.09);pointer-events:none;user-select:none; transform:translateY(calc((1 - var(--e, 1)) * 60px))} .ks-sd-txt{position:relative;z-index:1;max-width:470px} .ks-sd-t{transform:translateY(calc((1 - var(--e, 1)) * 26px))} .ks-sd-ul li{--t:clamp(0, calc(var(--l, 1) * 3.4 - var(--k, 0) - .25), 1);opacity:calc(.3 + var(--t) * .7); transform:translateX(calc((1 - var(--t)) * -8px))} .ks-sd-ul li::before{transform:scale(var(--t))} .ks-sd-ul li::after{opacity:var(--t)} .ks-sd-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:20px;opacity:clamp(.35, calc(var(--l, 1) * 2.4 - 1.3), 1)} .ks-sd-sec .ks-sd-cta .ks-sd-go,.ks-sd-cta .ks-sd-go{margin-top:0} .ks-sd-from{font-size:15px;color:var(--ks-g600);white-space:nowrap} .ks-sd-from b{font-size:21px;font-weight:600;letter-spacing:-.01em;color:var(--ks-g900)} @media (max-width:767.98px){.ks-sd-num{font-size:96px}.ks-sd-cta{margin-top:14px}.ks-sd-from b{font-size:18px}} /* the text gets its stickers too (owner 2026-11-11: "surprise me, not old fashioned"): the *marked* words of the title are a sticker in the colour of the scene that lands on the text together with the sticker on the key, and the three advantages are small stickers that stick one after the other */ .ks-sd-card:nth-child(1){--hl:#57C1EC;--hl-fg:#06222D} .ks-sd-card:nth-child(2){--hl:#1E1D1C;--hl-fg:#FFFFFF} .ks-sd-card:nth-child(3){--hl:#FFED00;--hl-fg:#1E1D1C} .ks-sd-card:nth-child(4){--hl:#02A14D;--hl-fg:#FFFFFF} .ks-sd-sec .ks-sd-t{font-size:clamp(28px, 2.3vw, 38px);font-weight:700;line-height:1.12;letter-spacing:-.025em} /* calmer (owner 2026-11-11: "too many effects"): the marked words are a still sticker, the advantages are large pills under each other that only fade in one after the other while the sticker on the key comes down */ .ks-sd-mark{display:inline-block;margin:0 -.04em;padding:.02em .28em .08em;border-radius:.24em;background:var(--hl);color:var(--hl-fg);transform:rotate(-1.5deg)} .ks-sd-card:nth-child(3) .ks-sd-mark{box-shadow:inset 0 0 0 1.5px #1E1D1C} @media (min-width:768px){.ks-sd-sec .ks-sd-card{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}} /* the text side as large facts (owner 2026-11-12, _preview/home-block2-facts.html): title, three facts with a short line each, button. One type scale for the block: card titles = the heading (28), facts = the questions (21), small 15. The facts fade in one after the other while the sticker comes down (--l from ks.js). */ .ks-sd-sec .ks-sd-t{font-size:clamp(22px, 1.85vw, 28px);font-weight:500;line-height:1.15;letter-spacing:-.02em} .ks-sd-sec .ks-sd-mark{font-weight:600} .ks-sd-facts{display:grid;gap:clamp(8px, 1.6vh, 14px);margin:clamp(12px, 2.4vh, 20px) 0 0;padding:0} .ks-sd-fact{--t:clamp(0, calc(var(--l, 1) * 3.4 - var(--k, 0) - .25), 1);margin:0;opacity:calc(.2 + var(--t) * .8); transform:translateY(calc((1 - var(--t)) * 10px))} .ks-sd-fact dt{font-size:clamp(17px, 1.5vw, 21px);line-height:1.2;font-weight:500;letter-spacing:-.01em;color:var(--ks-g900)} .ks-sd-fact dd{margin:2px 0 0;font-size:15px;line-height:1.35;font-weight:400;color:var(--ks-g500)} .ks-sd-sec .ks-sd-cta{margin-top:clamp(12px, 2.4vh, 20px)} .ks-sd-sec .ks-sd-go{margin-top:0;height:40px;padding:0 20px;font-size:15px} @media (min-width:768px){.ks-sd-sec .ks-sd-copy{padding:clamp(18px, 3.4vh, 28px) 30px}} @media (max-width:767.98px){.ks-sd-sec .ks-sd-copy{padding:18px 20px}.ks-sd-fact dd{font-size:14px}} /* the questions closer together, the list in the middle of the card height with air above and below (owner 2026-11-12) */ @media (min-width:1200px){.ks-sd-sec .ks-sd-qs{gap:4px}.ks-sd-sec .ks-sd-q{padding:13px 20px 15px;line-height:1.25}.ks-sd-sec .ks-sd-bar{bottom:6px}} /* low windows (laptops with dock and browser bars) and small phones: the short lines go, title and facts stay */ @media (min-width:768px) and (max-height:620px){.ks-sd-fact dd{display:none}} @media (prefers-reduced-motion:reduce){.ks-sd-fact{opacity:1;transform:none}} /* phones (owner 2026-11-12): no scroll story, the block scrolls like any other and a tap on a question (or a swipe on the card) changes the whole card at once (ks.js initProbDeck, class is-on). The cards lie in one grid cell, so the block keeps the height of the longest card and nothing below jumps. The keyboard is smaller, more keys around S, and each fact has its short line on the right. */ @media (max-width:767.98px){ .ks-sd-wrap{height:auto!important} .ks-sd-frame{position:relative;top:auto} .ks-sd-sec{height:auto;padding:22px 0 18px} .ks-sd-sec .ks-sd,.ks-sd-sec .ks-sd-pin{height:auto} .ks-sd-sec .ks-sd-deck{display:grid;flex:none;height:auto;overflow:visible;background:transparent} .ks-sd-sec .ks-sd-card{--e:1;--b:0;--l:1;position:relative;inset:auto;grid-area:1/1;grid-template-rows:200px auto;transform:none;box-shadow:none; opacity:0;visibility:hidden;transition:opacity 220ms ease,visibility 0s linear 220ms} .ks-sd-sec .ks-sd-card.is-on,.ks-sd-sec .ks-sd-card:first-child:not(.is-off){opacity:1;visibility:visible;transition:opacity 220ms ease} .ks-sd-sec .ks-sd-card::after{display:none} .ks-sd-sec .ks-sd-stage .ks-way-plane{--s:2.3} .ks-sd-sec .ks-sd-copy{align-self:stretch} .ks-sd-sec .ks-sd-bar{display:none} .ks-sd-sec .ks-sd-facts{grid-template-columns:8em minmax(0,1fr);gap:10px 14px;align-items:baseline} .ks-sd-sec .ks-sd-fact{display:contents} .ks-sd-sec .ks-sd-fact dt{font-size:15px} .ks-sd-sec .ks-sd-facts{font-size:15px} /* the fixed left column (8em) is the same in all four cards, nothing jumps (owner 2026-11-12) */ .ks-sd-sec .ks-sd-fact dd{margin:0;font-size:14px} } /* phones: the chosen question large, under it the steps 1 --- 2 --- 3 --- 4 (owner 2026-11-12): light grey, the chosen step black and bold; the question texts of the buttons stay for screen readers only. The question is the one place where the page stops once while scrolling past (ks.js, class ks-snap on html). */ .ks-sd-qt{display:none} @media (max-width:767.98px){ .ks-sd-sec .ks-sd-tabs{gap:0} .ks-sd-qt{display:grid;margin:12px 0 8px;font-size:21px;line-height:1.25;font-weight:500;letter-spacing:-.01em;color:var(--ks-g900); scroll-margin-top:calc(var(--ks-header-h, 64px) + 14px)} .ks-sd-qt > span{grid-area:1/1;visibility:hidden} .ks-sd-qt > span.is-on,.ks-sd-qt > span:first-child:not(.is-off){visibility:visible} .ks-sd-sec .ks-sd-qs{position:relative;display:flex;overflow:visible;gap:0;margin:0 0 10px;padding:0 2px} .ks-sd-sec .ks-sd-q{display:flex;align-items:center;width:auto;flex:none;padding:3px 0;background:transparent;white-space:normal} .ks-sd-sec .ks-sd-q.is-active{background:transparent} .ks-sd-sec .ks-sd-q:not(:first-child){flex:1} .ks-sd-sec .ks-sd-q:not(:first-child)::before{content:"";flex:1;height:2px;margin:0 8px;border-radius:1px;background:var(--ks-g200)} .ks-sd-sec .ks-sd-q > span:nth-child(2){position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .ks-sd-sec .ks-sd-n{width:26px;height:26px;font-size:13px;font-weight:500;background:var(--ks-g100);color:var(--ks-g400)} .ks-sd-sec .ks-sd-q.is-active .ks-sd-n{background:var(--ks-g900);color:#fff;font-weight:700} /* the finger in the middle of the steps (owner 2026-11-12: smaller and quieter, stays): moves to the side twice when the block comes into view */ .ks-sd-swipe{position:absolute;left:50%;top:50%;width:24px;height:20px;margin:-10px 0 0 -12px;padding:0 4px;background:#fff;color:var(--ks-g400);pointer-events:none; animation:ks-sd-swipe 1.6s cubic-bezier(.65,0,.35,1) .5s 2} .ks-sd-swipe svg{display:block;width:16px;height:16px;margin-top:2px} /* light, half transparent arrows on the picture: previous and next card */ .ks-sd-sec .ks-sd-deck{position:relative} .ks-sd-arr{position:absolute;top:100px;z-index:8;display:flex;align-items:center;justify-content:center;width:36px;height:36px;margin-top:-18px;padding:0;border:0;border-radius:50%; background:rgba(255,255,255,.16);color:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;transition:transform 160ms ease-out} .ks-sd-arr:active{transform:scale(.94)} .ks-sd-arr.is-prev{left:10px} .ks-sd-arr.is-next{right:10px} .ks-sd-arr svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} } .ks-sd-swipe,.ks-sd-arr{display:none} /* desktop deck (owner 2026-11-12, half painted cards in Safari): a card wholly covered, or not next in line, is not drawn (ks.js sets is-gone), each card moves on its own layer so the board inside is not painted again while it slides */ .ks-sd-card.is-gone{visibility:hidden} @media (min-width:768px){.ks-sd-card{will-change:transform}} /* the sticker follows the customer's slider (--lift 0 lies, 1 lifted, owner 2026-11-12), no longer the scroll */ .ks-sd-board{display:contents} .ks-sd-card{--lz:56px} .ks-sd-deck .ks-sd-card .ks-3k-rig > .ks-pk-stk:not(.is-fixed){transition:none;transform:translateZ(calc(9.6px + var(--lift,0) * var(--lz))) translate(calc(var(--lift,0) * 14px), calc(var(--lift,0) * -2px)) rotateZ(calc(var(--lift,0) * 10deg))} .ks-sd-deck .ks-sd-card.is-nudge .ks-3k-rig > .ks-pk-stk:not(.is-fixed){transition:transform .6s cubic-bezier(.77,0,.175,1)} .ks-sd-lift{position:absolute;right:14px;top:50%;z-index:4;display:flex;flex-direction:column;align-items:center;gap:7px;transform:translateY(-50%);font-size:10.5px;line-height:1;font-weight:500;letter-spacing:.04em;color:rgba(255,255,255,.86);padding:9px 6px;border-radius:17px;background:rgba(22,21,20,.36);-webkit-backdrop-filter:blur(12px) saturate(1.2);backdrop-filter:blur(12px) saturate(1.2);box-shadow:0 2px 12px rgba(0,0,0,.18);user-select:none;-webkit-user-select:none} .ks-sd-lift-rail{position:relative;display:block;width:26px;height:150px;border-radius:13px;touch-action:none;cursor:grab;background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)} .ks-sd-lift-rail:active{cursor:grabbing} .ks-sd-lift-rail:focus-visible{outline:2px solid #fff;outline-offset:3px} .ks-sd-lift-rail::before{content:"";position:absolute;left:50%;top:13px;bottom:13px;width:1.5px;margin-left:-.75px;border-radius:1px;background:rgba(255,255,255,.26)} .ks-sd-lift-fill{position:absolute;left:50%;bottom:13px;width:1.5px;margin-left:-.75px;border-radius:1px;background:rgba(255,255,255,.9);height:calc(var(--lift,0) * (100% - 26px))} .ks-sd-lift-knob{position:absolute;left:4px;bottom:calc(4px + var(--lift,0) * (100% - 26px));width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.3);transition:transform .16s ease-out} .ks-sd-lift-rail:active .ks-sd-lift-knob{transform:scale(1.12)} .ks-sd-card.is-nudge .ks-sd-lift-knob,.ks-sd-card.is-nudge .ks-sd-lift-fill{transition:bottom .6s cubic-bezier(.77,0,.175,1),height .6s cubic-bezier(.77,0,.175,1)} @media (max-width:767.98px){.ks-sd-card{--lz:30px}.ks-sd-lift{right:10px;top:84px;gap:6px}.ks-sd-lift-rail{height:80px}.ks-sd-deck .ks-sd-arr{top:174px}} /* a frame and the sign after it stay together on one line, the sign just clear of the tilted frame (owner 2026-11-12) */ .ks-sd-mw{white-space:nowrap} .ks-sd-sec .ks-sd-card .ks-sd-mw .ks-sd-mark{margin-right:.07em} /* desktop details (owner 2026-11-12): the next card covers the last one without shrinking it, the covered card goes lighter instead of darker; the step number is one plain digit, whole, its top at the top edge of the card */ .ks-sd-card{transform:translateY(calc((1 - var(--e,1)) * 102%))} .ks-sd-card::after{display:none} .ks-sd-stage::after{content:"";position:absolute;inset:0;z-index:2;background:#fff;opacity:calc(var(--b,0) * .6);pointer-events:none} .ks-sd-copy > *{opacity:calc(1 - var(--b,0) * .6)} /* the text fades on its own grey, so no seam to the grey on the right */ .ks-sd-num{top:-.148em;right:.14em;letter-spacing:0;color:rgba(43,42,40,.07);-webkit-text-stroke:0} /* wide screens: the questions spread over the height of the cards, 10 % air, four rows of 20 %, 10 % air; the grey of the cards runs on to the right edge of the screen */ @media (min-width:1200px){ .ks-sd-sec .ks-sd-qs{align-self:stretch;display:grid;grid-template-rows:1fr repeat(4, 2fr) 1fr;gap:0} .ks-sd-sec .ks-sd-qs::before,.ks-sd-sec .ks-sd-qs::after{content:""} .ks-sd-sec .ks-sd-q{align-self:center} .ks-sd-sec .ks-sd-deck{border-radius:28px 0 0 28px;box-shadow:calc(100vmax + 40px) 0 0 100vmax var(--ks-g50);clip-path:inset(0 -300vmax 0 0)} .ks-sd-sec .ks-sd-card{border-radius:28px 0 0 28px;box-shadow:none} /* the grey takes the whole right part of block 2, from the top of the section (with "Dafür haben wir eine Lösung.") to its bottom and on to the right edge of the screen (owner 2026-11-12) */ .ks-sd-sec .ks-sd-tabs{position:relative;z-index:0} .ks-sd-sec .ks-sd-q{border-radius:18px 0 0 18px} /* the chosen question flows into the grey like a tab (owner 2026-11-12) */ .ks-sd-sec .ks-sd-h1{grid-column:1;grid-row:1} .ks-sd-sec .ks-sd-h2{grid-column:2;grid-row:1} .ks-sd-sec .ks-sd-tabs::before{content:"";grid-column:2;grid-row:1 / 3;align-self:stretch;z-index:-1;margin:-28px 0 -26px -36px;background:var(--ks-g50); box-shadow:0 0 0 100vmax var(--ks-g50);clip-path:inset(0 -100vmax 0 0)} .ks-sd-sec .ks-sd-copy{align-self:stretch;display:flex;flex-direction:column;justify-content:center} /* full card height, so the number can sit at its top */ } /* the marked words of the card titles (owner 2026-11-12, _preview/home-block2-marks.html variant 4): no fill, a thin dark frame, slightly tilted like a sticker; the same in all four cards, never like a button */ .ks-sd-sec .ks-sd-card .ks-sd-mark{margin:0;background:transparent;color:var(--ks-g900);box-shadow:inset 0 0 0 1.5px var(--ks-g900);border-radius:.2em;padding:0 .26em .06em;font-weight:600} /* phones: heading and question centred, the answer part of the heading on its own line, the question in the shop orange (owner 2026-11-12) */ @media (max-width:767.98px){ .ks-sd-sec .ks-sd-h{text-align:center} .ks-sd-sec .ks-sd-h .ks-sd-h2{display:block} .ks-sd-qt{text-align:center;color:var(--ks-o500);font-weight:600;font-size:20px} } /* phones: the block holds at the top for a short stretch while the page scrolls past (owner 2026-11-12) */ @media (max-width:767.98px){ .ks-sd-sec .ks-sd::after{content:"";display:block;height:30vh} .ks-sd-sec .ks-sd-pin{position:sticky;top:var(--sd-pin-top, calc(var(--ks-header-h, 64px) + 10px));background:#fff} } @media (max-width:767.98px){.ks-sd-arr{display:flex}.ks-sd-swipe{display:block;animation-play-state:paused}.ks-sd-wrap.is-seen .ks-sd-swipe{animation-play-state:running}} @keyframes ks-sd-swipe{0%,100%{transform:translateX(0)}35%{transform:translateX(-6px) rotate(-6deg)}70%{transform:translateX(5px) rotate(3deg)}} @media (prefers-reduced-motion:reduce){.ks-sd-swipe{animation:none}} /* wide screens too (owner 2026-11-12): no scroll story; the block scrolls like the rest, a click on a question fades its card in, the sticker is lifted with the slider. No hold at the top here (owner 2026-11-13: the empty stretch below looked bare and a mouse wheel scrolls slowly anyway); phones keep their hold */ @media (min-width:768px){ .ks-sd-wrap{height:auto!important} .ks-sd-frame{position:relative;top:auto} .ks-sd-sec{height:auto} .ks-sd-sec .ks-sd,.ks-sd-sec .ks-sd-pin{height:auto} .ks-sd-sec .ks-sd-deck{flex:none;height:clamp(420px, calc(100vh - var(--ks-header-h, 110px) - 190px), 560px)} .ks-sd-sec .ks-sd-deck .ks-sd-card{--e:1;--b:0;--l:1;transform:none;opacity:0;visibility:hidden;transition:opacity 220ms ease,visibility 0s linear 220ms} .ks-sd-sec .ks-sd-deck .ks-sd-card.is-on,.ks-sd-sec .ks-sd-deck .ks-sd-card:first-child:not(.is-off){opacity:1;visibility:visible;transition:opacity 220ms ease} .ks-sd-sec .ks-sd-pin{position:relative;top:auto} } /* == ks-pk end == */ /* ---------- 3.85.4 checkout step 2: shipping and payment as grouped lists (owner 2026-11-11, _preview/checkout-mobile.html). Shipping markup is ours (checkout/step3_shipping_options.tpl), the payment rows come from JTL and the PayPal plugin and are only restyled here. ---------- */ @media (max-width: 767.98px) { body.is-checkout .ks-co-h1 { display: none; } } body.is-checkout .checkout-shipping-form .ks-co-label { margin: 28px 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ks-g500); } body.is-checkout .checkout-shipping-form .ks-co-label:first-child { margin-top: 8px; } body.is-checkout .checkout-shipping-form-change { margin: 0 0 12px; font-size: 14px; line-height: 1.45; color: var(--ks-g600); } body.is-checkout .checkout-shipping-form-change .btn { padding: 0 0 0 4px; vertical-align: baseline; font-size: 14px; color: var(--ks-o700); } body.is-checkout #fieldset-payment > hr { display: none; } /* the grouped card and its rows */ .ks-co-list, body.is-checkout .checkout-payment-options > [role="group"] { border-radius: 18px; background: var(--ks-g50); overflow: hidden; } .ks-co-list { margin-bottom: 0; } body.is-checkout .checkout-payment-options { margin: 0; display: block; } .ks-co-opt { position: relative; } .ks-co-opt + .ks-co-opt, body.is-checkout .checkout-payment-method + .checkout-payment-method { box-shadow: inset 0 1px 0 var(--ks-g200); } .ks-co-in { position: absolute; opacity: 0; pointer-events: none; } .ks-co-row { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; margin: 0; padding: 14px 16px 14px 50px; cursor: pointer; } .ks-co-row::before, body.is-checkout .checkout-payment-method > .custom-control > .custom-control-label::before { content: ""; position: absolute; left: 16px; top: 30px; width: 22px; height: 22px; margin-top: -11px; border: 0; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px var(--ks-g300); transition: box-shadow 180ms var(--ks-out); } .ks-co-in:checked + .ks-co-row::before, body.is-checkout .checkout-payment-method > .custom-control > .custom-control-input:checked ~ .custom-control-label::before { background: #FFFFFF; box-shadow: inset 0 0 0 7px var(--ks-o500); } .ks-co-in:focus-visible + .ks-co-row::before, body.is-checkout .checkout-payment-method > .custom-control > .custom-control-input:focus-visible ~ .custom-control-label::before { box-shadow: inset 0 0 0 1.5px var(--ks-g300), 0 0 0 3px rgba(184, 91, 28, .3); } .ks-co-opt:has(.ks-co-in:checked), body.is-checkout .checkout-payment-method:has(> .custom-control > .custom-control-input:checked) { background: #FFFFFF; border-radius: 18px; box-shadow: inset 0 0 0 1.5px var(--ks-o500); } .ks-co-opt:has(.ks-co-in:checked) + .ks-co-opt, body.is-checkout .checkout-payment-method:has(> .custom-control > .custom-control-input:checked) + .checkout-payment-method { box-shadow: none; } .ks-co-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ks-co-name, body.is-checkout .checkout-payment-method .title, body.is-checkout .checkout-payment-method .funding-name { font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--ks-g900); } .ks-co-ship-logo { display: block; height: 16px; width: auto; margin: 0 0 6px auto; border-radius: 2px; } .ks-co-sub { font-size: 13.5px; line-height: 1.35; color: var(--ks-g600); } .ks-co-price { flex: none; text-align: right; font-size: 16px; font-weight: 500; color: var(--ks-g900); font-variant-numeric: tabular-nums; } .ks-co-price small { display: block; font-size: 12px; font-weight: 400; color: var(--ks-g600); } /* payment rows: name on the left, the small logo on the right, a note under the name */ body.is-checkout .checkout-payment-method { flex: none; max-width: none; width: 100%; padding: 0; position: relative; } body.is-checkout .checkout-payment-method > .custom-control:not(.collapse) { display: block; margin: 0; padding: 0; min-height: 0; } body.is-checkout .checkout-payment-method > .collapse.custom-control { margin: 0; min-height: 0; } body.is-checkout .checkout-payment-method > .custom-control > .custom-control-label { position: static; display: flex; flex-wrap: wrap; align-items: center; column-gap: 12px; row-gap: 2px; width: 100%; min-height: 60px; margin: 0; padding: 14px 16px 14px 50px; cursor: pointer; } body.is-checkout .checkout-payment-method > .custom-control > .custom-control-label::after { display: none; } body.is-checkout .checkout-payment-method .content { flex: 1 1 auto; order: 1; } body.is-checkout .checkout-payment-method .checkout-payment-method-note { flex: 0 0 100%; order: 3; font-size: 13.5px; line-height: 1.35; color: var(--ks-g600); } body.is-checkout .checkout-payment-method .checkout-payment-method-note small { font-size: inherit; } body.is-checkout .checkout-payment-method .checkout-payment-method-note:has(small:empty) { display: none; } body.is-checkout .checkout-payment-method .funding-name { flex: 1 1 auto; order: 1; margin: 0 !important; } body.is-checkout .checkout-payment-method .ppc-option-img, body.is-checkout .checkout-payment-method > .custom-control > label > img { order: 2; margin-left: auto; display: flex !important; align-items: center; height: 22px; width: auto !important; } body.is-checkout .checkout-payment-method .ppc-option-img > div, body.is-checkout .checkout-payment-method .paypal-marks { display: flex; align-items: center; width: auto !important; height: 22px; } body.is-checkout .checkout-payment-method .ppc-option-img .paypal-mark { width: auto !important; height: 22px; padding: 0; border: 0; background: none; display: flex; align-items: center; } body.is-checkout .checkout-payment-method .ppc-option-img img { height: 20px !important; width: auto !important; } body.is-checkout .checkout-payment-method > .custom-control > label > img { height: 20px; max-width: 90px; object-fit: contain; } /* PayPal itself brings only its logo: the name is the brand */ body.is-checkout #za_ppc_paypal > .custom-control > .custom-control-label::after, body.is-checkout #kPlugin_45_googlepay > .custom-control > .custom-control-label::after, body.is-checkout #kPlugin_45_applepay > .custom-control > .custom-control-label::after { content: "PayPal"; display: block; position: static; order: 1; flex: 1 1 auto; width: auto; height: auto; border: 0; background: none; font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--ks-g900); } body.is-checkout #kPlugin_45_googlepay > .custom-control > .custom-control-label::after { content: "Google Pay"; } body.is-checkout #kPlugin_45_applepay > .custom-control > .custom-control-label::after { content: "Apple Pay"; } /* Pay Later: the words of the PayPal mark become the name, the PP mark goes right, the extra word PayPal goes */ body.is-checkout #za_ppc_paylater .ppc-option-img { order: 1; margin-left: 0; flex: 1 1 auto; } body.is-checkout #za_ppc_paylater .ppc-option-img > div, body.is-checkout #za_ppc_paylater .paypal-marks { width: 100% !important; } body.is-checkout #za_ppc_paylater .paypal-mark { flex-direction: row-reverse; justify-content: space-between; width: 100% !important; gap: 8px; } body.is-checkout #za_ppc_paylater .paypal-button-text { font-size: 16px !important; font-weight: 500 !important; color: var(--ks-g900) !important; font-family: inherit !important; } body.is-checkout #za_ppc_paylater .funding-name { display: none !important; } /* the card form of the chosen card payment sits inside its row */ body.is-checkout .checkout-payment-method #acdc_card { margin: 0; padding: 0 16px 16px 50px; } body.is-checkout .checkout-payment-method #acdc_card .card { border: 0; background: none; box-shadow: none; } body.is-checkout .checkout-payment-method #acdc_card .card-header { display: none; } body.is-checkout .checkout-payment-method #acdc_card .card-body { padding: 0; } body.is-checkout #ppc-cc-icon { display: none; } body.is-checkout .checkout-payment-method { margin: 0 !important; } body.is-checkout #checkout-shipping-payment { margin-bottom: 0; } body.is-checkout .ks-co-row, body.is-checkout .ks-co-in:checked + .ks-co-row { font-weight: 400; } body.is-checkout .ks-co-sub { font-weight: 400; } /* no floating "to the top" button over the payment fields */ body.is-checkout .smoothscroll-top { display: none !important; } body.is-checkout #acdc_card .custom-checkbox .custom-control-label { font-size: 14px; font-weight: 400; color: var(--ks-g600); } /* ---------- 3.86.0 checkout step 3 "Zusammenfassung" (owner 2026-11-11, _preview/checkout-step3.html, checkout/step5_confirmation.tpl): details as rows of one card, the order with picture and variant, totals, legal text and the button. Phones one column, from 992px two. ---------- */ .ks-cf-lay { display: grid; gap: 26px; } .ks-cf-lbl { margin: 0 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ks-g500); } .ks-cf-grp { border-radius: 18px; background: var(--ks-g50); overflow: hidden; } .ks-cf-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; padding: 14px 16px; } .ks-cf-row + .ks-cf-row { box-shadow: inset 0 1px 0 var(--ks-g200); } .ks-cf-t { grid-column: 1; font-size: 13px; color: var(--ks-g500); } .ks-cf-v { grid-column: 1; font-size: 15.5px; line-height: 1.4; color: var(--ks-g900); } .ks-cf-v small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.4; color: var(--ks-g600); } .ks-cf-addr ul { margin: 0; padding: 0; list-style: none; } .ks-cf-addr ul li:nth-child(n+4) { font-size: 13.5px; color: var(--ks-g600); } .ks-cf-ed { grid-column: 2; grid-row: 1 / span 2; align-self: center; font-size: 14px; font-weight: 500; color: var(--ks-o700); text-decoration: none; } .ks-cf-ed:hover { color: var(--ks-o800); text-decoration: underline; } .ks-cf-cmt { margin-top: 12px; } .ks-cf-cmt summary { display: inline-flex; align-items: center; gap: 6px; padding: 6px 0; list-style: none; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--ks-o700); } .ks-cf-cmt summary::-webkit-details-marker { display: none; } .ks-cf-cmt summary::before { content: "+"; font-size: 16px; line-height: 1; transition: transform 200ms var(--ks-out); } .ks-cf-cmt[open] summary::before { transform: rotate(45deg); } .ks-cf-cmt textarea.form-control { margin-top: 8px; min-height: 92px; padding: 16px var(--ks-field-pad); } /* NOVA sets padding 0 on .checkout-confirmation-comment */ .ks-cf-extra { margin-top: 24px; } .ks-cf-sum { border-radius: 22px; background: var(--ks-g50); padding: 4px 16px 18px; } .ks-cf-it { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 0; } .ks-cf-it + .ks-cf-it { box-shadow: inset 0 1px 0 var(--ks-g200); } .ks-cf-img, .ks-cf-img img { display: block; width: 64px; height: 64px; border-radius: 12px; object-fit: contain; background: #FFFFFF; } .ks-cf-it-main { min-width: 0; display: flex; flex-direction: column; gap: 3px; } .ks-cf-nm { font-size: 15px; font-weight: 500; line-height: 1.35; color: var(--ks-g900); text-decoration: none; } .ks-cf-nm:hover { color: var(--ks-o700); text-decoration: none; } .ks-cf-var { font-size: 13.5px; line-height: 1.35; color: var(--ks-g600); } .ks-cf-pr { font-size: 15px; font-weight: 500; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ks-g900); } .ks-cf-q { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; color: var(--ks-g500); } .ks-cf-tot { margin-top: 2px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--ks-g200); font-variant-numeric: tabular-nums; } .ks-cf-line, .ks-cf-all, .ks-cf-vat { display: flex; justify-content: space-between; gap: 12px; } .ks-cf-line { padding: 4px 0; font-size: 15px; color: var(--ks-g600); } .ks-cf-line > span:last-child, .ks-cf-all > span:last-child, .ks-cf-vat > span:last-child { white-space: nowrap; } .ks-cf-all { margin-top: 6px; padding-top: 12px; box-shadow: inset 0 1px 0 var(--ks-g200); font-size: 19px; font-weight: 600; color: var(--ks-g900); } .ks-cf-vat { padding-top: 2px; font-size: 13px; color: var(--ks-g500); } .ks-cf-chg { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--ks-o700); text-decoration: none; } .ks-cf-eu { border-radius: 18px; background: var(--ks-g50); padding: 14px; } .ks-cf-eu .warranty-label-checkout img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; border-radius: 8px; } .ks-cf-legal p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ks-g600); } .ks-cf-legal a { text-decoration: underline; text-underline-offset: 2px; } .ks-cf-checks { margin-top: 14px; } .ks-cf-checks .form-group, .ks-cf-checks .checkbox { margin-bottom: 8px; } .ks-cf-checks .custom-control-label { font-size: 14px; color: var(--ks-g900); } .ks-cf-checks p, .ks-cf-checks .small, .ks-cf-checks small { font-size: 12.5px; line-height: 1.45; color: var(--ks-g500); } /* the consent text: one line, "Mehr anzeigen" opens it (ks.js initCheckTexts); the button sits under the text */ .ks-cf-checks .d-flex.flex-column-reverse { flex-direction: column !important; } .ks-cf-checks .custom-control { order: 0; } .ks-cf-checks .ks-cf-more { order: 2; align-self: flex-start; margin: 2px 0 0 32px; padding: 4px 0; border: 0; background: none; font: inherit; font-size: 13px; font-weight: 500; color: var(--ks-o700); cursor: pointer; } .ks-cf-checks .form-text { order: 1; margin: 4px 0 0 32px; } .ks-cf-checks .form-text.ks-cf-clamp:not(.is-open) { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .ks-cf-buyw .ks-cf-buy { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 56px; margin-top: 16px; border-radius: 28px; font-size: 17px; font-weight: 500; } /* PayPal, Google Pay, Apple Pay hide our button (jQuery hide) and put theirs into #paypal-button-container: same height and rounding as ours (owner 2026-11-11, iPhone: both buttons showed) */ .ks-cf-buyw #paypal-button-container { margin-top: 16px; } .ks-cf-buyw .gpay-button-fill, .ks-cf-buyw .gpay-button-fill > button, .ks-cf-buyw .gpay-card-info-container-fill { height: 56px !important; border-radius: 28px !important; overflow: hidden; } .ks-cf-buyw apple-pay-button { --apple-pay-button-height: 56px; --apple-pay-button-border-radius: 28px; width: 100%; } .ks-cf-buy-sum { font-weight: 400; opacity: .75; font-variant-numeric: tabular-nums; } @media (min-width: 992px) { .ks-cf-lay { grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "det sum" "eu buy"; column-gap: 40px; row-gap: 28px; align-items: start; } .ks-cf-det { grid-area: det; } .ks-cf-sumw { grid-area: sum; } .ks-cf-eu { grid-area: eu; } .ks-cf-buyw { grid-area: buy; } } /* ---------- 3.87.0 page after the order (owner 2026-11-11, _preview/order-completed.html, checkout/order_completed.tpl) ---------- */ .ks-oc { padding: 12px 0 56px; } .ks-oc-top { max-width: 560px; margin: 0 auto 30px; text-align: center; } .ks-oc-ok { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; display: grid; place-items: center; background: var(--ks-ok-bg); box-shadow: inset 0 0 0 1.5px rgba(26, 127, 55, .25); color: var(--ks-ok); } .ks-oc-ok svg { width: 30px; height: 30px; } .ks-oc-top h1 { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -.02em; color: var(--ks-g900); } .ks-oc-sub { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--ks-g600); } .ks-oc-no { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 8px 16px; border-radius: 20px; background: var(--ks-g50); font-size: 15px; color: var(--ks-g600); } .ks-oc-no b { font-weight: 600; color: var(--ks-g900); letter-spacing: .01em; font-variant-numeric: tabular-nums; } .ks-oc-lay { display: grid; gap: 26px; } .ks-oc-lbl { margin: 0 0 10px; font-size: 13px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; color: var(--ks-g500); } .ks-oc-pay { margin-bottom: 26px; padding: 18px 18px 16px; border-radius: 22px; background: var(--ks-o50); box-shadow: inset 0 0 0 1px var(--ks-o200); } .ks-oc-pay h2 { margin: 0 0 4px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--ks-g900); } .ks-oc-pay > p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--ks-g600); } .ks-oc-bank { border-radius: 16px; background: #FFFFFF; overflow: hidden; } .ks-oc-br { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; row-gap: 2px; padding: 11px 14px; } .ks-oc-br + .ks-oc-br { box-shadow: inset 0 1px 0 var(--ks-g100); } .ks-oc-t { font-size: 12.5px; color: var(--ks-g500); } .ks-oc-v { grid-column: 1; font-size: 16px; font-weight: 500; color: var(--ks-g900); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .ks-oc-v.is-big { font-size: 18px; letter-spacing: .01em; } /* copy buttons as icons (owner 2026-11-13): the copy sign, a green tick when the text is on the clipboard */ .ks-oc-cp { grid-column: 2; grid-row: 1 / span 2; position: relative; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: var(--ks-g100); color: var(--ks-g800); cursor: pointer; transition: background-color 150ms ease, transform 160ms ease-out; } .ks-oc-cp::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ks-ic-copy) center / contain no-repeat; mask: var(--ks-ic-copy) center / contain no-repeat; } .ks-oc-cp:hover { background: var(--ks-g200); } .ks-oc-cp:active { transform: scale(.94); } .ks-oc-cp.is-done { background: var(--ks-ok-bg); color: var(--ks-ok); } .ks-oc-cp.is-done::after { -webkit-mask-image: var(--ks-ic-check); mask-image: var(--ks-ic-check); animation: ks-cp-pop 260ms cubic-bezier(.23, 1, .32, 1); } @keyframes ks-cp-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } .ks-oc-hint { margin: 12px 0 0 !important; font-size: 13.5px !important; line-height: 1.45; color: var(--ks-o800) !important; } .ks-oc-next { margin: 0; padding: 0; list-style: none; border-radius: 18px; background: var(--ks-g50); } .ks-oc-next li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; padding: 14px 16px; } .ks-oc-next li + li { box-shadow: inset 0 1px 0 var(--ks-g200); } .ks-oc-next i { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 13px; font-weight: 600; background: #FFFFFF; color: var(--ks-g600); box-shadow: inset 0 0 0 1.5px var(--ks-g200); } .ks-oc-next li.is-now i { background: var(--ks-o500); color: #FFFFFF; box-shadow: none; } .ks-oc-next b { display: block; font-size: 15.5px; font-weight: 500; color: var(--ks-g900); } .ks-oc-next span { font-size: 13.5px; line-height: 1.45; color: var(--ks-g600); } .ks-oc-sum { border-radius: 22px; background: var(--ks-g50); padding: 4px 16px 16px; } .ks-oc-it { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 0; } .ks-oc-it:not(:has(img)) { grid-template-columns: minmax(0, 1fr) auto; } .ks-oc-it + .ks-oc-it { box-shadow: inset 0 1px 0 var(--ks-g200); } .ks-oc-it img, .ks-oc-img { display: block; width: 56px; height: 56px; border-radius: 12px; object-fit: contain; background: #FFFFFF; } .ks-oc-nm { font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--ks-g900); } .ks-oc-q { font-size: 13px; color: var(--ks-g500); } .ks-oc-pr { font-size: 15px; font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ks-g900); } .ks-oc-tot { padding-top: 10px; box-shadow: inset 0 1px 0 var(--ks-g200); font-variant-numeric: tabular-nums; } .ks-oc-tot div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14.5px; color: var(--ks-g600); } .ks-oc-tot div.is-all { margin-top: 4px; font-size: 17px; font-weight: 600; color: var(--ks-g900); } /* contact: the question on its own line, mail and phone as two links with the footer's icons (owner 2026-11-11: "all in one line" broke the number) */ .ks-oc-help { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 18px; } .ks-oc-help p { flex: 0 0 100%; margin: 0; font-size: 13.5px; color: var(--ks-g600); } .ks-oc-help a { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; font-size: 14.5px; font-weight: 500; color: var(--ks-g900); text-decoration: none; } .ks-oc-help a::before { content: ""; width: 16px; height: 16px; background: var(--ks-g600); -webkit-mask: var(--ks-ti) center / contain no-repeat; mask: var(--ks-ti) center / contain no-repeat; } .ks-oc-help a:hover { color: var(--ks-o700); } .ks-oc .ks-oc-btn { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; margin-top: 22px; border-radius: 27px; font-size: 16.5px; font-weight: 500; } @media (min-width: 992px) { .ks-oc-top h1 { font-size: 34px; } .ks-oc-lay { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 40px; align-items: start; max-width: 1080px; margin: 0 auto; } .ks-oc .ks-oc-btn { display: inline-flex; width: auto; padding: 0 34px; } } /* ---------- 3.111.0 one order in the customer account (owner 2026-11-13, mockup _preview/order-details.html, account/order_details.tpl): A the status card, B items like the cart, C white cards in the style of the trust band ---------- */ .ks-od { max-width: 1080px; margin: 0 auto; padding: 4px 0 56px; } .ks-od-top h1 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 600; letter-spacing: -.02em; color: var(--ks-g900); } .ks-od-nw { white-space: nowrap; } .ks-od-sub { margin: 6px 0 0; font-size: 15px; color: var(--ks-g600); font-variant-numeric: tabular-nums; } /* A: the status card, its colour follows the state */ .ks-od-st { margin: 22px 0 28px; padding: 18px 16px; border-radius: 26px; background: var(--ks-o50); box-shadow: inset 0 0 0 1px var(--ks-o200); } .ks-od-st[data-s="sent"] { background: var(--ks-ok-bg); box-shadow: inset 0 0 0 1px rgba(26, 127, 55, .22); } .ks-od-st[data-s="gone"] { background: #FDF4F3; box-shadow: inset 0 0 0 1px rgba(196, 43, 28, .2); } .ks-od-head { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 14px; align-items: start; } .ks-od-head .ks-qi { width: 60px; height: 60px; } .ks-od-head h2 { margin: 0 0 3px; font-size: 18px; line-height: 1.25; font-weight: 600; letter-spacing: -.01em; color: var(--ks-g900); } .ks-od-head p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ks-g700); } .ks-od-head p.ks-od-note { margin-top: 6px; font-size: 13.5px; color: var(--ks-g600); } .ks-od-act { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .ks-od-act .btn { flex: 1 1 auto; height: 46px; border-radius: 23px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; font-weight: 500; } .ks-od .ks-od-btn-ok { background: var(--ks-ok); border-color: var(--ks-ok); color: #FFFFFF; } .ks-od .ks-od-btn-ok:hover { filter: brightness(.94); color: #FFFFFF; } .ks-od .ks-od-btn-soft { background: #FFFFFF; border: 0; box-shadow: inset 0 0 0 1px var(--ks-g200); color: var(--ks-g900); } .ks-od .ks-od-btn-soft:hover { background: var(--ks-g50); } .ks-od .btn:active { transform: scale(.97); } /* the bank details inside the card, the GiroCode beside them on bigger screens (hidden on a phone) */ .ks-od-pay { margin-top: 16px; } .ks-od-payw { display: grid; gap: 16px; align-items: start; } .ks-od-qr { display: none; } .ks-od-pay .ks-oc-bank { box-shadow: 0 1px 2px rgba(0, 0, 0, .04); border-radius: 18px; } /* the pictures of the status card (snippets/ks/od_icon.tpl), next to the .ks-qi-* of the quiet note */ .ks-qi-line { fill: var(--ks-g200, #E1E0DF); } .ks-qi-eur { font: 700 11px/1 var(--ks-font, inherit); fill: #FFFFFF; text-anchor: middle; } .ks-qi-hop { animation: ks-qi-hop 2.2s cubic-bezier(.45, 0, .55, 1) infinite; } @keyframes ks-qi-hop { 0%, 100% { transform: none; } 30% { transform: translateY(-9px); } 50% { transform: none; } 60% { transform: translateY(-2px); } 70% { transform: none; } } .ks-qi-road { fill: none; stroke: rgba(0, 0, 0, .18); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 6; animation: ks-qi-road .9s linear infinite; } @keyframes ks-qi-road { to { stroke-dashoffset: 12; } } .ks-qi-speed { fill: none; stroke: var(--ks-ok); stroke-width: 2.2; stroke-linecap: round; animation: ks-qi-speed 1.2s ease-in-out infinite; } @keyframes ks-qi-speed { 0%, 100% { transform: none; opacity: .2; } 50% { transform: translateX(-3px); opacity: .7; } } .ks-qi-ride { animation: ks-qi-ride .45s ease-in-out infinite alternate; } @keyframes ks-qi-ride { to { transform: translateY(-1.2px); } } .ks-qi-okb { fill: var(--ks-ok); } .ks-qi-tick { fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .ks-qi-grey { fill: var(--ks-g100); stroke: var(--ks-g300); stroke-width: 1.2; } .ks-qi-greyt { fill: var(--ks-g200); } .ks-qi-xb { fill: #C42B1C; } .ks-od-st .ks-qi-plate { fill: rgba(0, 0, 0, .08); } /* the steps: discs with our icons, done green, now orange with a soft pulse, later grey; left, centre, right, the line across the card, green up to the step reached (--p) */ .ks-od-track { position: relative; display: flex; justify-content: space-between; margin: 22px 0 0; padding: 18px 0 0; list-style: none; box-shadow: inset 0 1px 0 rgba(0, 0, 0, .07); } .ks-od-track::before, .ks-od-track::after { content: ""; position: absolute; top: 37px; left: 20px; height: 3px; border-radius: 2px; } .ks-od-track::before { right: 20px; background: rgba(0, 0, 0, .08); } .ks-od-track::after { width: calc((100% - 40px) * var(--p, 0)); background: var(--ks-ok); } .ks-od-track li { position: relative; z-index: 1; flex: 1 1 0; padding-top: 50px; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; } .ks-od-track li:nth-child(2) { align-items: center; text-align: center; } .ks-od-track li:last-child { align-items: flex-end; text-align: right; } .ks-od-track i { position: absolute; top: 0; width: 40px; height: 40px; border-radius: 50%; background: #FFFFFF; box-shadow: inset 0 0 0 2px var(--ks-g200); } .ks-od-track i::after { content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px; background: var(--ks-g400); -webkit-mask: var(--ks-ti) center / contain no-repeat; mask: var(--ks-ti) center / contain no-repeat; } .ks-od-track li:first-child i { left: 0; } .ks-od-track li:nth-child(2) i { left: calc(50% - 20px); } .ks-od-track li:last-child i { right: 0; } .ks-od-track li.is-done i { background: var(--ks-ok); box-shadow: none; } .ks-od-track li.is-now i { background: var(--ks-o500); box-shadow: none; animation: ks-od-pulse 2s ease-out infinite; } .ks-od-track li.is-done i::after, .ks-od-track li.is-now i::after { background: #FFFFFF; } @keyframes ks-od-pulse { 0% { box-shadow: 0 0 0 0 rgba(234, 116, 36, .35); } 70%, 100% { box-shadow: 0 0 0 10px rgba(234, 116, 36, 0); } } .ks-od-track b { font-size: 15px; font-weight: 500; color: var(--ks-g500); } .ks-od-track li.is-done b, .ks-od-track li.is-now b { color: var(--ks-g900); } .ks-od-track span { font-size: 13px; color: var(--ks-g500); font-variant-numeric: tabular-nums; min-height: 1em; } /* layout below the card; C: white cards with a soft shadow */ .ks-od-lay { display: grid; gap: 26px; } .ks-od-card { border-radius: 22px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 6px 22px -8px rgba(0, 0, 0, .12); } .ks-od-pad { padding: 4px 18px; } .ks-od-text { margin: 0; padding: 14px 0; font-size: 15px; line-height: 1.5; color: var(--ks-g900); white-space: pre-line; } .ks-od-gap { margin-top: 26px; } /* B: items like the cart */ .ks-od-items { padding: 6px 16px 16px; } .ks-od-it { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; padding: 16px 0; } .ks-od-it + .ks-od-it { box-shadow: inset 0 1px 0 var(--ks-g100); } .ks-od-it img, .ks-od-noimg { display: block; width: 72px; height: 72px; border-radius: 14px; object-fit: contain; background: var(--ks-g50); } .ks-od-nm { font-size: 15.5px; font-weight: 500; line-height: 1.35; color: var(--ks-g900); text-decoration: none; } a.ks-od-nm:hover { color: var(--ks-o700); } .ks-od-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .ks-od-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 14px; background: var(--ks-g50); box-shadow: inset 0 0 0 1px var(--ks-g100); font-size: 13px; font-weight: 500; color: var(--ks-g700); } .ks-od-chip i { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); } .ks-od-meta { margin-top: 8px; font-size: 12.5px; color: var(--ks-g500); } .ks-od-again { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--ks-o700); text-decoration: none; } .ks-od-again::before { content: ""; width: 15px; height: 15px; background: currentColor; -webkit-mask: var(--ks-ic-undo) center / contain no-repeat; mask: var(--ks-ic-undo) center / contain no-repeat; } .ks-od-again:hover { text-decoration: underline; } .ks-od-pr { grid-column: 2; display: flex; gap: 8px; align-items: baseline; white-space: nowrap; } .ks-od-pr b { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ks-g900); } .ks-od-pr span { font-size: 12.5px; color: var(--ks-g500); } .ks-od-tot { margin-top: 4px; padding-top: 14px; box-shadow: inset 0 1px 0 var(--ks-g100); font-variant-numeric: tabular-nums; } .ks-od-tot div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 14.5px; color: var(--ks-g600); } .ks-od-tot div.is-all { margin-top: 6px; font-size: 18px; font-weight: 600; color: var(--ks-g900); } .ks-od-tot div.is-tax { font-size: 13px; color: var(--ks-g500); } /* C: the side card like the trust band (.ks-trust-item): a round disc with our icon, the fact as the line */ .ks-od-info { padding: 6px 18px; } .ks-od-row { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; padding: 16px 0; } .ks-od-row.is-top { align-items: start; } .ks-od-row + .ks-od-row { box-shadow: inset 0 1px 0 var(--ks-g100); } .ks-od-ic { position: relative; flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--ks-g100); } .ks-od-ic::after { content: ""; position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; background: var(--ks-g900); -webkit-mask: var(--ks-ti) center / contain no-repeat; mask: var(--ks-ti) center / contain no-repeat; } .ks-od-row b { display: block; font-size: 17px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; color: var(--ks-g900); } .ks-od-row p { margin: 2px 0 0; font-size: 15px; line-height: 1.45; color: var(--ks-g600); } .ks-od-row p.is-ok { color: var(--ks-ok); } .ks-od-row p.ks-od-cap { margin: 0 0 2px; font-size: 13px; color: var(--ks-g500); } .ks-od-mail { overflow-wrap: anywhere; } .ks-od-help { margin-top: 16px; padding: 16px 18px; } .ks-od-help p { margin: 0 0 6px; font-size: 15px; color: var(--ks-g600); } .ks-od-help a { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 16px; align-items: center; padding: 6px 0; font-size: 17px; font-weight: 500; color: var(--ks-g900); text-decoration: none; overflow-wrap: anywhere; } .ks-od-help a:hover { color: var(--ks-o700); } .ks-od .ks-od-wide { display: flex; align-items: center; justify-content: center; width: 100%; height: 50px; margin-top: 16px; border-radius: 25px; font-weight: 500; } @media (prefers-reduced-motion: reduce) { .ks-od-track i, .ks-oc-cp.is-done::after { animation: none !important; } } @media (min-width: 601px) { .ks-od-it { grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px; } .ks-od-it img, .ks-od-noimg { width: 88px; height: 88px; border-radius: 16px; } .ks-od-pr { grid-column: auto; display: block; text-align: right; } .ks-od-pr b { display: block; } .ks-od-items { padding: 6px 18px 18px; } .ks-od-act .btn { flex: 0 0 auto; } } @media (min-width: 768px) { .ks-od-payw.has-qr { grid-template-columns: minmax(0, 1fr) 220px; align-items: stretch; } .ks-od-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 16px; border-radius: 18px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); } .ks-od-qr svg { display: block; width: 100%; max-width: 200px; height: auto; aspect-ratio: 1; } .ks-od-qr b { font-size: 15px; font-weight: 600; color: var(--ks-g900); } .ks-od-qr span { max-width: 240px; font-size: 13px; line-height: 1.4; text-align: center; color: var(--ks-g600); } /* the page after the order has a narrow column: the code goes under the rows as a strip, code left, words right */ .ks-oc-pay .ks-od-payw.has-qr { grid-template-columns: minmax(0, 1fr); } .ks-oc-pay .ks-od-qr { display: grid; grid-template-columns: 132px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 18px; row-gap: 4px; align-items: center; justify-items: start; padding: 14px 18px 14px 14px; } .ks-oc-pay .ks-od-qr svg { grid-row: 1 / span 2; max-width: 132px; } .ks-oc-pay .ks-od-qr b { align-self: end; } .ks-oc-pay .ks-od-qr span { align-self: start; text-align: left; max-width: none; } } @media (min-width: 992px) { .ks-od-top h1 { font-size: 32px; } .ks-od-st { padding: 24px 26px; } .ks-od-head { grid-template-columns: 88px minmax(0, 1fr); gap: 22px; align-items: center; } .ks-od-head .ks-qi { width: 88px; height: 88px; } .ks-od-head h2 { font-size: 22px; } .ks-od-lay { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 32px; align-items: start; } /* the code sits exactly above the side card (360px column, 32px gap, minus the card padding of 26px) */ .ks-od-pay .ks-od-payw.has-qr { grid-template-columns: minmax(0, 1fr) 334px; column-gap: 32px; } .ks-od-qr svg { max-width: 220px; } } /* Start page on phones: each block holds at the top for a short stretch while the page scrolls past (owner 2026-11-12, ks.js initHomeHold wraps the blocks); same stretch as block 2 (30vh) */ @media (max-width:767.98px){ .ks-hold::after{content:"";display:block;height:30vh} .ks-hold > *{position:sticky;top:var(--ks-header-h, 64px)} } /* mobile menu (owner 2026-11-12): keyboards and silicone covers show the drawn piece of keyboard of the start page card "Aufkleber, Tastatur oder Abdeckung?" (snippets/ks/menu_board.tpl), smaller: the row picture and the tiles */ .ks-mn-img.is-board, .ks-mn-timg.is-board { position: relative; overflow: hidden; } .ks-mn-img.is-board .ks-way-ph, .ks-mn-timg.is-board .ks-way-ph { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; aspect-ratio: auto; max-height: none; } .ks-mn-timg.is-board .ks-way-plane { top: calc(50% + 10px); transform: perspective(2400px) rotateX(56deg) rotateZ(-36deg) scale3d(1.5, 1.5, 1.5); } .ks-mn-img.is-board .ks-way-plane { top: calc(50% + 5px); transform: perspective(2400px) rotateX(56deg) rotateZ(-36deg) scale3d(.62, .62, .62); } /* wishlist and compare in the mobile menu with our icons */ #mainNavigation .nav-mobile-body > .navbar-nav > .wl-nav-scrollbar-item { --ks-ti: var(--ks-ic-wish); } #mainNavigation .nav-mobile-body > .navbar-nav > .comparelist-nav-scrollbar-item { --ks-ti: var(--ks-ic-compare); } #mainNavigation .nav-mobile-body > .navbar-nav > .wl-nav-scrollbar-item > .nav-link::before, #mainNavigation .nav-mobile-body > .navbar-nav > .comparelist-nav-scrollbar-item > .nav-link::before { content: ""; flex: none; width: 20px; height: 20px; background: var(--ks-g600); -webkit-mask: var(--ks-ti) center / contain no-repeat; mask: var(--ks-ti) center / contain no-repeat; } #mainNavigation .nav-mobile-body > .navbar-nav > .wl-nav-scrollbar-item > .nav-link, #mainNavigation .nav-mobile-body > .navbar-nav > .comparelist-nav-scrollbar-item > .nav-link { display: flex; align-items: center; gap: 12px; } #mainNavigation .nav-mobile-body .wl-nav-scrollbar-item .badge, #mainNavigation .nav-mobile-body .comparelist-nav-scrollbar-item .badge { margin-left: auto; } /* holiday note in the cart (ks_urlaub plugin, owner 2026-11-12): the icon beside the title only, the text below starts at the left edge, so the note is lower */ div.ks-urlaub-note { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 10px; align-items: center; } div.ks-urlaub-note > div { display: contents; } div.ks-urlaub-note > svg { grid-column: 1; grid-row: 1; margin-top: 0; } div.ks-urlaub-note .ks-urlaub-note-t { grid-column: 2; grid-row: 1; margin-bottom: 0; } div.ks-urlaub-note .ks-urlaub-note-x, div.ks-urlaub-note .ks-urlaub-note-d { grid-column: 1 / -1; } div.ks-urlaub-note .ks-urlaub-note-x { margin-top: 6px; } /* consent checkboxes (Datenschutz) in the address form: the whole width, not NOVA's col-8 with offset */ /* only the address form of the checkout (NOVA col-8 offset-md-4); the contact form keeps its two columns */ [class*="offset-md-4"]:has(> .snippets-checkbox-wrapper) { flex: 0 0 100%; max-width: 100%; margin-left: 0; } /* the FAQ band holds too (owner 2026-11-12): its stretch stays white like the band, from screen edge to screen edge */ .ks-hold:has(> .ks-guide-group.is-faq)::after { background: #FFFFFF; box-shadow: 0 0 0 100vmax #FFFFFF; clip-path: inset(0 -100vmax); } @media (max-width: 767.98px) { .ks-hold > .ks-guide-group.is-faq { position: sticky; top: var(--ks-header-h, 64px); } } /* the FAQ band stays above its own white stretch while it holds (that stretch is a layer of its own) */ @media (max-width: 767.98px) { .ks-hold > .ks-guide-group.is-faq { z-index: 1; } } /* start page, the four ways: "ab" and the price on one line in every card (owner 2026-11-12) */ .ks-way-price { white-space: nowrap; } /* footer: the Lacerto logo, the address right under it (owner 2026-11-12) */ .ks-ft-lacerto { display: block; width: auto; height: 40px; margin: 20px 0 0; } .ks-ft-contact .ks-ft-lacerto + address { margin-top: -8px; } /* the logo file keeps empty room under the word (the lizard tail reaches lower) */ /* start page, Bestseller: the last ordered product may wrap on phones (owner 2026-11-12) */ .ks-home-bstat a { white-space: normal; display: inline; min-height: 0; } .ks-home-shead > .ks-home-stitle { flex: 1; } /* start page block 6, news and the last orders (owner 2026-11-13, variant A): two equal columns; left the holiday card (plugin ks_urlaub, while on) and a list of news, right six product tiles. */ .ks-hn-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } .ks-hn.is-solo .ks-hn-grid { grid-template-columns: minmax(0, 1fr); } .ks-hn-news.is-nonews:has(> .ks-hn-hero.is-empty) { display: none; } .ks-hn:not(:has(.ks-hn-rec)):has(.ks-hn-news.is-nonews > .ks-hn-hero.is-empty) { display: none; } .ks-hn-news.is-nonews:has(> .ks-hn-hero.is-empty) + .ks-hn-rec { grid-column: 1 / -1; } .ks-hn-col { min-width: 0; display: flex; flex-direction: column; } .ks-hn-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 0 0 16px; } .ks-home .ks-hn-h { display: flex; align-items: center; gap: 10px; margin: 0; } .ks-hn-sub { font-size: 14px; color: var(--ks-g600); white-space: nowrap; } .ks-hn-all { display: inline-flex; align-items: center; gap: 2px; font-size: 15px; font-weight: 500; color: var(--ks-link); white-space: nowrap; } a.ks-hn-all { text-decoration: none; } a.ks-hn-all:hover { color: var(--ks-o800); text-decoration: none; } .ks-hn-all svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ks-hn-dot { position: relative; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ks-ok); } .ks-hn-dot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ks-hn-pulse 2.4s cubic-bezier(.23, 1, .32, 1) infinite; } @keyframes ks-hn-pulse { 0% { transform: scale(1); opacity: .5; } 70%, 100% { transform: scale(2.8); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .ks-hn-dot::after { animation: none; } } /* the holiday card (markup from ks_urlaub 1.1.3, texts and dates from its settings): light orange, quiet */ .ks-hn-hero.is-empty { display: none; } .ks-hn-holi { display: block; padding: 20px 22px 18px; border-radius: 20px; background: var(--ks-o50); box-shadow: inset 0 0 0 1px var(--ks-o100); color: var(--ks-g900); } .ks-hn-holi-t { display: flex; flex-direction: column; gap: 4px; } .ks-hn-holi-t small { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 500; color: var(--ks-o700); } .ks-hn-holi-t small svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; } .ks-hn-holi-t b { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; } .ks-hn-holi-t > span { font-size: 15px; line-height: 1.5; color: var(--ks-g700); } .ks-hn-holi .ks-urlaub-more { align-self: flex-start; margin: 4px 0 0; padding: 6px 0; color: var(--ks-link); font-size: 15px; font-weight: 500; } .ks-hn-holi .ks-urlaub-more:hover { color: var(--ks-o800); } .ks-hn-holi-d { display: none; } /* the news list: three, or two under the holiday card */ .ks-hn-row { display: flex; flex-direction: column; } .ks-hn-hero:not(.is-empty) + .ks-hn-row { margin-top: 6px; } .ks-hn-row > .ks-hn-n:nth-child(n+4), .ks-hn-hero.is-urlaub + .ks-hn-row > .ks-hn-n:nth-child(3) { display: none; } a.ks-hn-n { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--ks-g100); color: var(--ks-g900); text-decoration: none; } .ks-hn-row > a.ks-hn-n:first-child { border-top: 0; } .ks-hn-hero.is-empty + .ks-hn-row > a.ks-hn-n:first-child { padding-top: 0; } a.ks-hn-n:hover { color: var(--ks-g900); text-decoration: none; } a.ks-hn-n:hover b { color: var(--ks-link); } .ks-hn-ni { flex: none; width: 104px; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: var(--ks-g100); } .ks-hn-ni img { width: 100%; height: 100%; object-fit: cover; } .ks-hn-nb { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ks-hn-nb small { font-size: 13px; color: var(--ks-g600); } .ks-hn-nb b { font-size: 16px; line-height: 1.35; font-weight: 500; transition: color .2s ease; } /* six tiles of the last ordered products, the newest with a green dot */ .ks-hn-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } a.ks-hn-t { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 8px 8px 11px; border-radius: 18px; background: var(--ks-g50); color: var(--ks-g900); text-decoration: none; transition: background-color .2s ease; } a.ks-hn-t:hover { background: var(--ks-g100); color: var(--ks-g900); text-decoration: none; } .ks-hn-ti { display: block; aspect-ratio: 4 / 3; margin-bottom: 7px; border-radius: 12px; overflow: hidden; background: #FFFFFF; } .ks-hn-ti img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.18); transition: transform .5s cubic-bezier(.23, 1, .32, 1); } a.ks-hn-t:hover .ks-hn-ti img { transform: scale(1.28); } .ks-hn-tn { padding: 0 4px; font-size: 14px; line-height: 1.3; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ks-hn-ta { padding: 0 4px; font-size: 12.5px; color: var(--ks-g600); } .ks-hn-t.is-new .ks-hn-ta { color: var(--ks-ok); font-weight: 500; } /* the bought colour (owner 2026-11-13): the swatches of the shop (drawn from the Wawi Merkmale) and the colour name, several overlapping swatches and "Mehrere Farben" when one product was bought in different colours */ .ks-hn-tc { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 0 4px; margin: 1px 0 1px; } .ks-hn-td { display: flex; flex: none; } .ks-hn-td img { display: block; width: 16px; height: 16px; border-radius: 4px; box-shadow: 0 0 0 1.5px var(--ks-g50); } .ks-hn-td img + img { margin-left: -5px; } .ks-hn-tl { min-width: 0; font-size: 12.5px; line-height: 1.3; color: var(--ks-g700); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a.ks-hn-t:hover .ks-hn-td img { box-shadow: 0 0 0 1.5px var(--ks-g100); } .ks-hn-t.is-new::after { content: ''; position: absolute; top: 15px; left: 15px; width: 9px; height: 9px; border-radius: 50%; background: var(--ks-ok); box-shadow: 0 0 0 2.5px #FFFFFF; } /* an hour without orders (owner 2026-11-13): a light note above the tiles, the live dot rests */ .ks-hn-quiet { margin: 0 0 14px; padding: 18px 22px; border-radius: 20px; background: var(--ks-o50); box-shadow: inset 0 0 0 1px var(--ks-o100); animation: ks-hn-qin 400ms cubic-bezier(.23, 1, .32, 1) both; } .ks-hn-quiet[hidden], .ks-hn-q[hidden] { display: none; } .ks-hn-q { display: flex; align-items: center; gap: 18px; } .ks-hn-q > p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ks-g700); } .ks-hn-q b { display: block; margin: 0 0 2px; font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; color: var(--ks-g900); } /* the pictures (snippets/ks/hn_quiet_icon.tpl): white things with orange, the shadow of the tear-off calendar */ .ks-qi { flex: none; display: block; width: 64px; height: 64px; } .ks-qi svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .14)); } .ks-qi-paper { fill: #FFFFFF; } .ks-qi-or { fill: var(--ks-o500, #C8661F); } .ks-qi-or2 { fill: var(--ks-o300, #F2B98E); } .ks-qi-plate { fill: var(--ks-g200, #E1E0DF); } .ks-qi-handle { fill: none; stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round; } .ks-qi-steam { fill: none; stroke: var(--ks-g400, #A8A6A3); stroke-width: 2; stroke-linecap: round; opacity: 0; animation: ks-qi-steam 2.4s ease-out var(--d) infinite; } @keyframes ks-qi-steam { 0% { opacity: 0; transform: translateY(4px); } 40% { opacity: .9; } 100% { opacity: 0; transform: translateY(-6px); } } /* the printer: a dark body like our keyboards, a green working light, a sticker sheet comes out, again and again */ .ks-qi-body { fill: var(--ks-g800, #494745); } .ks-qi-slot { fill: var(--ks-g900, #2B2A28); } .ks-qi-key { fill: var(--ks-g600, #77746F); } .ks-qi-led { fill: var(--ks-ok, #2E9E5B); animation: ks-qi-led 1.2s ease-in-out infinite; } @keyframes ks-qi-led { 50% { opacity: .35; } } .ks-qi-sheet { animation: ks-qi-print 3.6s cubic-bezier(.45, 0, .55, 1) infinite; } @keyframes ks-qi-print { 0% { transform: translateY(-10px); opacity: 1; } 70% { transform: translateY(9px); opacity: 1; } 85%, 100% { transform: translateY(11px); opacity: 0; } } /* printer variants B (plotter) and C (roll to roll), owner 2026-11-13: not a desk printer, a big machine with rolls */ .ks-qi-leg { fill: none; stroke: var(--ks-g700, #5E5B57); stroke-width: 2.4; stroke-linecap: round; } .ks-qi-roll { fill: #FFFFFF; stroke: var(--ks-g200, #E1E0DF); stroke-width: 1; } .ks-qi-hub { fill: var(--ks-g300, #CFCDCA); } .ks-qi-head { animation: ks-qi-head 1.4s ease-in-out infinite alternate; } @keyframes ks-qi-head { to { transform: translateX(28px); } } .ks-qi-feed { transform-origin: 28px 26px; animation: ks-qi-feed 4.2s cubic-bezier(.45, 0, .55, 1) infinite; } @keyframes ks-qi-feed { 0% { transform: scaleY(.12); opacity: 1; } 75% { transform: none; opacity: 1; } 90%, 100% { transform: none; opacity: 0; } } .ks-qi-sheetb { stroke: var(--ks-g100, #F0EFEF); stroke-width: .8; } .ks-qi-stand { fill: var(--ks-g600, #77746F); } .ks-qi-webline { fill: none; stroke: var(--ks-g200, #E1E0DF); stroke-width: 6.2; stroke-linejoin: round; } .ks-qi-web { fill: none; stroke: #FFFFFF; stroke-width: 4.6; stroke-linejoin: round; } .ks-qi-marks { fill: none; stroke: var(--ks-o500, #C8661F); stroke-width: 3.4; stroke-dasharray: 3.4 3.6; animation: ks-qi-run 1.1s linear infinite; } @keyframes ks-qi-run { to { stroke-dashoffset: -7; } } .ks-qi-frame { fill: none; stroke: var(--ks-g600, #77746F); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ks-qi-coil { fill: none; stroke: var(--ks-g200, #E1E0DF); stroke-width: 1; } .ks-qi-notch { fill: var(--ks-o300, #F2B98E); } .ks-qi-window { fill: var(--ks-g700, #5E5B57); } .ks-qi-sweep { fill: #FFFFFF; opacity: .45; animation: ks-qi-sweep 1.6s ease-in-out infinite alternate; } @keyframes ks-qi-sweep { to { transform: translateX(10.5px); } } .ks-qi-spoke { fill: none; stroke: var(--ks-g200, #E1E0DF); stroke-width: 1.4; stroke-linecap: round; } .ks-qi-spin { transform-box: fill-box; transform-origin: center; animation: ks-qi-spin 4s linear infinite; } .ks-qi-spin2 { animation-duration: 3s; } @keyframes ks-qi-spin { to { transform: rotate(360deg); } } /* the tear-off calendar: yesterday's page tears off once, today stays (the number filled in by ks.js) */ .ks-qi-num { font: 600 19px/1 var(--ks-font, inherit); text-anchor: middle; fill: var(--ks-g900, #2B2A28); } .ks-qi-old { fill: var(--ks-g500, #8F8C88); } .ks-qi-page { stroke: var(--ks-g100, #F0EFEF); stroke-width: 1; } .ks-qi-ring { fill: none; stroke: var(--ks-g700, #5E5B57); stroke-width: 2.6; stroke-linecap: round; } .ks-qi-tear { transform-origin: 12px 18px; animation: ks-qi-tear 900ms cubic-bezier(.55, 0, .45, 1) 500ms both; } @keyframes ks-qi-tear { 0% { transform: none; opacity: 1; } 35% { transform: rotate(-7deg); opacity: 1; } 100% { transform: translate(-8px, 26px) rotate(-28deg); opacity: 0; } } /* packing (an order came in less than 10 minutes ago): a sticker sheet drops into the open box, again and again */ .ks-qi-inside { fill: var(--ks-o400, #E9965A); opacity: .55; } .ks-qi-flap-l { transform-origin: 10px 28px; animation: ks-qi-flapl 2.6s ease-in-out infinite; } .ks-qi-flap-r { transform-origin: 46px 28px; animation: ks-qi-flapr 2.6s ease-in-out infinite; } @keyframes ks-qi-flapl { 0%, 100% { transform: none; } 55% { transform: rotate(-6deg); } 70% { transform: none; } } @keyframes ks-qi-flapr { 0%, 100% { transform: none; } 55% { transform: rotate(6deg); } 70% { transform: none; } } .ks-qi-in { animation: ks-qi-in 2.6s cubic-bezier(.55, 0, .45, 1) infinite; } @keyframes ks-qi-in { 0% { transform: translateY(-6px); opacity: 0; } 15% { opacity: 1; } 35% { transform: translateY(-6px); } 70%, 100% { transform: translateY(24px); opacity: 1; } } /* the boxes: packed, the last one lands on the stack */ .ks-qi-box { fill: var(--ks-o200, #FADECA); stroke: var(--ks-o400, #E9965A); stroke-width: 1.2; } .ks-qi-tape { fill: var(--ks-o300, #F2B98E); } .ks-qi-drop { animation: ks-qi-drop 700ms cubic-bezier(.23, 1, .32, 1) 300ms both; } @keyframes ks-qi-drop { 0% { transform: translateY(-14px); opacity: 0; } 60% { transform: translateY(1.5px); opacity: 1; } 100% { transform: none; opacity: 1; } } /* the night: a warm moon, twinkling stars, two sleepy z */ .ks-qi-moon { fill: var(--ks-o400, #E9965A); } .ks-qi-star { fill: var(--ks-o300, #F2B98E); animation: ks-qi-tw 2.4s ease-in-out var(--d) infinite; transform-box: fill-box; transform-origin: center; } @keyframes ks-qi-tw { 50% { opacity: .3; transform: scale(.7); } } .ks-qi-z { font: 600 11px/1 var(--ks-font, inherit); fill: var(--ks-g600, #77746F); opacity: 0; animation: ks-qi-z 3s ease-out var(--d) infinite; } .ks-qi-zs { font-size: 8px; } @keyframes ks-qi-z { 0% { opacity: 0; transform: translate(-3px, 5px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(3px, -6px); } } @media (prefers-reduced-motion: reduce) { .ks-qi *, .ks-qi-tear, .ks-qi-drop { animation: none !important; } .ks-qi-tear { display: none; } .ks-qi-steam, .ks-qi-z { opacity: .8; } } @media (max-width: 767.98px) { .ks-hn-quiet { padding: 16px 18px; } .ks-hn-q { gap: 14px; align-items: flex-start; } .ks-qi { width: 52px; height: 52px; } .ks-hn-q b { font-size: 17px; } } .ks-hn-rec.is-quiet .ks-hn-dot { background: var(--ks-g300); } .ks-hn-rec.is-quiet .ks-hn-dot::after, .ks-hn-rec.is-quiet .ks-hn-t.is-new::after { animation: none; opacity: 0; } .ks-hn-rec.is-quiet .ks-hn-t.is-new .ks-hn-ta { color: var(--ks-g600); font-weight: 400; } @keyframes ks-hn-qin { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ks-hn-quiet { animation: none; } } /* a new order slides in as the first tile (ks.js initHomeRecent) */ a.ks-hn-t.is-in { animation: ks-hn-in 600ms cubic-bezier(.23, 1, .32, 1) both; } @keyframes ks-hn-in { from { opacity: 0; transform: translateY(-10px) scale(.94); } to { opacity: 1; transform: none; } } @media (max-width: 991.98px) { .ks-hn-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } } @media (max-width: 767.98px) { .ks-hn-holi { padding: 18px; } .ks-hn-ni { width: 86px; } .ks-hn-nb b { font-size: 15.5px; } .ks-hn-tiles { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--ks-gutter, 16px)); padding: 0 var(--ks-gutter, 16px) 4px; scroll-padding: 0 var(--ks-gutter, 16px); scrollbar-width: none; } .ks-hn-tiles::-webkit-scrollbar { display: none; } a.ks-hn-t { flex: 0 0 42%; min-width: 0; scroll-snap-align: start; } /* min-width 0: a long product name (nowrap) must not widen the tile (owner 2026-11-13: tiles differed on phones) */ .ks-hn-tn { font-size: 12.5px; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: calc(2 * 1.3em); } .ks-hn-ta { font-size: 11.5px; } /* phones: the name on up to two lines (owner 2026-11-13: one line said too little) */ .ks-hn-td img { width: 14px; height: 14px; } .ks-hn-tl { font-size: 11.5px; } } /* blog post page (owner 2026-11-13, variant B): text left, a column on the right that moves along. Only shop parts: the description typography above, the post rows of the start page block (.ks-hn-n), the order page help links (.ks-oc-help), the shop buttons and the light orange card of the holiday notice. */ .ks-bd.container { padding-top: 40px; padding-bottom: 64px; } .ks-bd-kick { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0 0 12px; font-size: 15px; color: var(--ks-g600); } .ks-bd-kick a { font-weight: 500; color: var(--ks-link); text-decoration: none; } .ks-bd-kick a + time::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 10px 3px 0; border-radius: 50%; background: var(--ks-g300); vertical-align: middle; } .ks-bd-h1 { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.03em; text-wrap: balance; } .ks-bd-lead { margin: 14px 0 0; font-size: var(--ks-text-h); line-height: 1.45; color: var(--ks-g700); } .ks-bd-hero { margin: 28px 0 0; } .ks-bd-hero img { display: block; width: 100%; height: auto; border-radius: 22px; } .ks-bd .ks-bd-body { max-width: none; margin-top: 32px; } .ks-bd-art .ks-bd-kick:empty { display: none; } .ks-bd-foot { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ks-g100); } .ks-bd-back { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 500; color: var(--ks-link); text-decoration: none; } .ks-bd-back:hover { color: var(--ks-o800); text-decoration: none; } .ks-bd-back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .ks-bd-side { position: sticky; top: calc(var(--ks-header-h, 110px) + 24px); display: flex; flex-direction: column; gap: 16px; } .ks-bd-box { padding: 20px 22px; border-radius: 20px; background: var(--ks-g50); } .ks-bd-box.is-cta { display: flex; flex-direction: column; gap: 4px; background: var(--ks-o50); box-shadow: inset 0 0 0 1px var(--ks-o100); } .ks-bd-box.is-cta small { font-size: 13.5px; font-weight: 500; color: var(--ks-o700); } .ks-bd-box.is-cta b { font-size: 19px; line-height: 1.3; font-weight: 600; letter-spacing: -.01em; } .ks-bd-box.is-cta span { font-size: 15px; line-height: 1.5; color: var(--ks-g700); } .ks-bd-box.is-cta .btn { align-self: flex-start; margin-top: 10px; } .ks-bd-side-h { margin: 0 0 8px; font-size: 15px; font-weight: 600; } .ks-bd-list a.ks-hn-n { gap: 12px; padding: 10px 0; } .ks-bd-list a.ks-hn-n:first-child { border-top: 0; padding-top: 0; } .ks-bd-list .ks-hn-ni { width: 76px; } .ks-bd-list .ks-hn-ni img { width: 100%; height: 100%; object-fit: cover; } .ks-bd-list .ks-hn-nb b { font-size: 14.5px; } .ks-bd-list .ks-hn-nb small { font-size: 12.5px; } .ks-bd-box .ks-oc-help { margin-top: 0; } @media (max-width: 991.98px) { .ks-bd-side { position: static; } } @media (max-width: 767.98px) { .ks-bd-hero { margin-top: 22px; } .ks-bd-hero img { border-radius: 16px; } } /* frame of the footer pages (owner 2026-11-13, variant A "volle Breite", snippets/ks/frame_open.tpl + frame_close.tpl): the shop width like the shipping page, the page left in the full width, the footer menu group of the page on the right (admin link groups). Inside, NOVA's own containers lose their width and side padding, the text gets the description typography of the product page. */ .ks-ip.container { max-width: 1650px; padding-top: 40px; padding-bottom: 64px; } @media (min-width: 992px) and (max-width: 1745.98px) { .ks-ip.container { padding-left: 48px; padding-right: 48px; } } .ks-ip-cols { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 72px; align-items: start; } .ks-ip-main { min-width: 0; } .ks-ip-main .container, .ks-ip-main .container-fluid, .ks-ip-main .ks-ship.container { max-width: none; width: auto; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } .ks-ip-main > .ks-bd-h1 + * { margin-top: 28px; } .ks-ip-main .ks-ip-body, .ks-ip-main .well { margin-top: 28px; max-width: none; font-size: var(--ks-text); line-height: var(--ks-text-lh); color: var(--ks-ink); } .ks-ip-main .well { padding: 0; border: 0; background: none; box-shadow: none; } .ks-ip-main .ks-ip-body > :first-child, .ks-ip-main .well > :first-child { margin-top: 0; } .ks-ip-main .ks-ip-body h1, .ks-ip-main .well h1, .ks-ip-main .ks-ip-body h2, .ks-ip-main .well h2, .ks-ip-main .ks-ip-body h3, .ks-ip-main .well h3 { font-size: var(--ks-text-h); line-height: 1.25; letter-spacing: -.02em; margin: 28px 0 8px; } .ks-ip-main .ks-ip-body p, .ks-ip-main .well p { margin: 0 0 var(--ks-text-gap); } .ks-ip-main .ks-ip-body ul, .ks-ip-main .ks-ip-body ol, .ks-ip-main .well ul, .ks-ip-main .well ol { padding-left: 1.2em; margin: 0 0 var(--ks-text-gap); } .ks-ip-main .ks-ip-body li, .ks-ip-main .well li { margin-bottom: 3px; } .ks-ip-main .ks-ip-body a, .ks-ip-main .well a { color: var(--ks-link); } .ks-ip-nav ul { list-style: none; margin: 0; padding: 0; } .ks-ip-nav li a { display: block; padding: 7px 10px; margin: 0 -10px; border-radius: 10px; font-size: 15px; color: var(--ks-g800); text-decoration: none; transition: background-color .2s ease; } .ks-ip-nav li a:hover { background: var(--ks-g100); color: var(--ks-g900); text-decoration: none; } .ks-ip-nav li a.is-on { background: #FFFFFF; color: var(--ks-g900); font-weight: 500; box-shadow: 0 1px 2px rgba(0, 0, 0, .05), inset 0 0 0 1px var(--ks-g100); } /* pages that bring their own head (newsletter) or grid (shipping) keep it, only the frame is ours */ .ks-ip-main .ks-nl { padding-top: 0; } @media (max-width: 991.98px) { .ks-ip-cols { grid-template-columns: minmax(0, 1fr); gap: 40px; } .ks-ip .ks-bd-side { position: static; } } @media (max-width: 767.98px) { .ks-ip.container { padding-top: 24px; } } /* pages in the frame name their group above the title, so JTL's breadcrumb ("News", "Kategorie des News-Systems") goes */ body:has(.ks-ip) .ks-bc { display: none; } /* blog overview (owner 2026-11-13, blog/overview.tpl): the categories as filter chips, the posts as cards */ .ks-bl-cats { margin: 28px 0 24px; } .ks-bl-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; } a.ks-bl-card { display: flex; flex-direction: column; border-radius: 20px; overflow: hidden; background: #FFFFFF; color: var(--ks-g900); text-decoration: none; box-shadow: 0 0 0 1px var(--ks-g100); transition: transform .25s cubic-bezier(.23, 1, .32, 1), box-shadow .25s ease; } a.ks-bl-card:hover { color: var(--ks-g900); text-decoration: none; transform: translateY(-3px); box-shadow: 0 0 0 1px var(--ks-g100), 0 14px 30px rgba(0, 0, 0, .07); } .ks-bl-im { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ks-g100); } .ks-bl-im img { display: block; width: 100%; height: 100%; object-fit: cover; } .ks-bl-tx { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 20px; } .ks-bl-tx small { font-size: 13px; color: var(--ks-g600); } .ks-bl-tx b { font-size: 17px; line-height: 1.35; font-weight: 500; } .ks-bl-pv { font-size: 14.5px; line-height: 1.45; color: var(--ks-g700); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ks-ip-main .pagination-wrapper, .ks-ip-main .pagination { margin-top: 28px; } @media (max-width: 1199.98px) { .ks-bl-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .ks-bl-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; } .ks-bl-cats { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(-1 * var(--ks-gutter, 16px)); margin-right: calc(-1 * var(--ks-gutter, 16px)); padding: 0 var(--ks-gutter, 16px) 4px; scrollbar-width: none; } .ks-bl-cats .ks-fchip { flex: none; } } /* footer on phones: the Lacerto logo smaller, the address close under it */ @media (max-width: 767.98px) { .ks-ft-lacerto { height: 28px; margin-top: 20px; } .ks-ft-contact .ks-ft-lacerto + address { margin-top: -5px; } } /* footer on phones: the links larger and darker (owner 2026-11-12: "too small") */ @media (max-width: 767.98px) { #footer .box .nav-link { padding: 5px 0; font-size: 17px; line-height: 1.35; color: var(--ks-g800); } #footer .box .nav-item { margin-bottom: 0; } .ks-ft-contact address { font-size: 15px; } } /* held blocks are no anchor for the browser's scroll anchoring: otherwise an opened list (footer, FAQ) pushed the page up instead of opening downwards (owner 2026-11-12) */ .ks-hold { overflow-anchor: none; } /* start page on computers (owner 2026-11-12: "the same everywhere"): one step of 56 px between the blocks: from the end of one block to the heading of the next, and inside a coloured band above and below its content */ @media (min-width: 992px) { :root { --ks-step: 56px; } .ks-ways-band { margin-top: 0; padding-top: var(--ks-step); padding-bottom: var(--ks-step); } .ks-home-sec { padding-top: var(--ks-step); padding-bottom: var(--ks-step); } .ks-home-seo { margin-top: 0; padding-top: var(--ks-step); padding-bottom: var(--ks-step); } .ks-guide-group.is-faq { margin: var(--ks-step) 0 calc(-1 * var(--ks-step)); padding: var(--ks-step) 0; } } /* desktop mega menu: keyboards and covers as the drawn piece of keyboard (snippets/ks/menu_board.tpl) */ .ks-mm-img.is-board { position: relative; overflow: hidden; } .ks-mm-img.is-board .ks-way-ph { position: absolute; inset: 0; width: auto; height: auto; margin: 0; padding: 0; aspect-ratio: auto; max-height: none; } .ks-mm-img.is-board .ks-way-plane { top: calc(50% + 6px); transform: perspective(2400px) rotateX(56deg) rotateZ(-36deg) scale3d(.95, .95, .95); } /* language switch in the header (owner 2026-11-12, _preview/lang-switch-header.html variant C, snippets/language_dropdown.tpl) */ .ks-lng { position: relative; display: flex; align-items: center; } .ks-lng-btn { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border: 0; border-radius: 18px; background: transparent; font: inherit; font-size: 14px; font-weight: 500; letter-spacing: .02em; color: var(--ks-g800); cursor: pointer; transition: background-color .15s ease; } .ks-lng-btn:hover, .ks-lng.is-open .ks-lng-btn { background: var(--ks-g100); } .ks-lng-btn:focus-visible { outline: 2px solid var(--ks-o500); outline-offset: 2px; } .ks-lng-chev { width: 16px; height: 16px; transition: transform .2s cubic-bezier(.23, 1, .32, 1); } .ks-lng.is-open .ks-lng-chev { transform: rotate(180deg); } .ks-lng-panel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1100; min-width: 184px; padding: 6px; border-radius: 16px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 12px 32px rgba(20, 18, 16, .12); opacity: 0; visibility: hidden; transform: translateY(-4px) scale(.98); transform-origin: top right; transition: opacity .15s ease, transform .18s cubic-bezier(.23, 1, .32, 1), visibility 0s linear .18s; } .ks-lng.is-open .ks-lng-panel { opacity: 1; visibility: visible; transform: none; transition: opacity .15s ease, transform .18s cubic-bezier(.23, 1, .32, 1); } .ks-lng-item { display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 15px; font-weight: 400; color: var(--ks-g800); text-decoration: none; white-space: nowrap; } .ks-lng-item:hover, .ks-lng-item:focus-visible { background: var(--ks-g50); color: var(--ks-g900); text-decoration: none; } .ks-lng-item.is-on { font-weight: 500; color: var(--ks-g900); } .ks-lng-ck { flex: none; width: 16px; height: 16px; } .ks-lng-ck svg { display: block; width: 16px; height: 16px; } .ks-lng-item b { flex: 1; font-weight: inherit; } .ks-lng-item small { font-size: 12px; letter-spacing: .04em; color: var(--ks-g500); } @media (prefers-reduced-motion: reduce) { .ks-lng-panel, .ks-lng-chev { transition: none; } } /* header with the holiday notch (ks_urlaub plugin) on computers (owner 2026-11-12, _preview/header-notch.html): logo and icons stay on the top line beside the notch, only the menu in the middle goes below it; the notch height comes from ks.js (--ks-notch-h). Without the notch the header is one line as before. */ @media (min-width: 992px) { header:has(> .ks-urlaub) .ks-head { margin-top: calc(-1 * var(--ks-notch-h, 40px)); } header:has(> .ks-urlaub) .ks-head-nav { align-items: flex-start; } header:has(> .ks-urlaub) .ks-head-logo { align-self: flex-start; display: flex; align-items: center; height: 72px; } header:has(> .ks-urlaub) .ks-head-icons { align-self: flex-start; } /* a margin, not a position: the mega menu keeps the header as its frame and stays full width */ header:has(> .ks-urlaub) .ks-head-cats { margin-top: var(--ks-notch-h, 40px); } header > .ks-urlaub { position: relative; z-index: 5; pointer-events: none; } header > .ks-urlaub * { pointer-events: auto; } }