/* shop-embed-reset.css */
.sf-embed-root :where(*, ::before, ::after) { box-sizing: border-box; margin: 0; padding: 0; border: 0 solid; }
.sf-embed-root :where(h1, h2, h3, h4, h5, h6) { font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-transform: none; color: inherit; }
.sf-embed-root :where(ol, ul, menu) { list-style: none; }
.sf-embed-root :where(img, svg, video, canvas, audio, iframe, embed, object) { display: block; vertical-align: middle; }
.sf-embed-root :where(img, video) { max-width: 100%; height: auto; }
.sf-embed-root :where(a) { color: inherit; font: inherit; text-decoration: inherit; }
.sf-embed-root :where(button, input, select, textarea) { font: inherit; letter-spacing: inherit; text-transform: none; color: inherit; background-color: transparent; border-radius: 0; opacity: 1; }
.sf-embed-root :where(button, [role="button"]) { cursor: pointer; }
.sf-embed-root :where(table) { border-collapse: collapse; text-indent: 0; border-color: inherit; }
.sf-embed-root :where(summary) { display: list-item; }
.sf-embed-root :where(b, strong) { font-weight: bolder; }
.sf-embed-root :where(small) { font-size: 80%; }
.sf-embed-root :where(hr) { height: 0; color: inherit; border-top-width: 1px; }
.sf-embed-root :where(p, blockquote, figure, dl, dd) { font-size: inherit; }
.sf-embed-root [hidden] { display: none !important; }
.sf-embed-root .sf-ad-pixel { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
/* tokens.css */
@font-face { font-family: "SF Dynamik"; src: url("/web/ai-magazine/a908005fba44b0d31f497a7606f5440fbb0bac2a.ttf") format("truetype"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Werbung"; src: url("/web/ai-magazine/e5dcd9f7e79d021db801afce57de00c48c50381f.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Werbung"; src: url("/web/ai-magazine/b701e627960a326ac73e01525595f34a694ea724.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Werbung"; src: url("/web/ai-magazine/bbd6169a86719c1896373f7b40a0fc8654ca6437.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "SF Galada"; src: url("/web/ai-magazine/407bf05a491a3e1a7a6a58b65337dde9cb1d3ad7.ttf") format("truetype"); font-display: swap; }
.sf-embed-root { --sf-blue: #0375b4; --sf-white: #fff; --sf-ink: #1a1a1a; --sf-surface: #f4f5f6; --sf-text-min: 0px; --sf-size-9: max(9px, var(--sf-text-min)); --sf-size-10: max(10px, var(--sf-text-min)); --sf-size-11: max(11px, var(--sf-text-min)); --sf-size-12: max(12px, var(--sf-text-min)); --sf-size-13: max(13px, var(--sf-text-min)); --sf-size-14: max(14px, var(--sf-text-min)); --sf-size-15: max(15px, var(--sf-text-min)); --sf-size-16: max(16px, var(--sf-text-min)); --sf-size-17: max(17px, var(--sf-text-min)); --sf-size-18: max(18px, var(--sf-text-min)); --sf-size-19: max(19px, var(--sf-text-min)); --sf-size-20: max(20px, var(--sf-text-min)); --sf-display-scale: 1; --sf-heading-weight: 800; --sf-heading-leading: 1; --sf-heading-case: uppercase; --sf-label-case: uppercase; --sf-display-condensed: "SF Dynamik", "Barlow Condensed", Impact, sans-serif; --sf-ui-arial: Arial, Helvetica, sans-serif; --sf-blue-bright: #007db8; --sf-neutral-180: #dedee2; --sf-neutral-190: #ddd; --sf-neutral-200: #d9d9d9; --sf-neutral-250: #ccc; --sf-neutral-300: #bbb; --sf-neutral-400: #999; --sf-neutral-50: #f6f6f6; --sf-neutral-580: #666; --sf-neutral-600: #626262; --sf-neutral-610: #5b5b5b; --sf-neutral-620: #595959; --sf-neutral-650: #555; --sf-neutral-700: #4c4c4c; --sf-neutral-800: #333; --sf-neutral-900: #202020; --sf-neutral-950: #191919; --sf-overlay-60: #0009; --sf-overlay-73: #000b; --sf-overlay-80: #000c; --sf-overlay-grey-40: #8886; --sf-overlay-ink-60: #1119; --sf-overlay-white-50: #ffffff80; --sf-tint-blue-100: #f0f3f5; --sf-tint-blue-200: #e8edf0; --sf-tint-blue-40: #f3f5f5; --sf-tint-blue-60: #f2f4f5; --sf-tint-blue-80: #f1f3f4; --sf-tint-forest-900: #2b3026; --sf-tint-green-40: #f5f6f5; --sf-tint-sand-20: #f7f5f2; --sf-tint-sand-200: #eae6dc; --sf-tint-sand-40: #f4f4f2; --sf-tint-sky-100: #e9f3f9; --sf-tint-sky-80: #eaf2f7; --sf-tint-violet-100: #eeeaf3; --sf-tint-violet-300: #d6cce0; }
.sf-embed-root { --sf-st-titel: 30px; --sf-st-titel-breit: 40px; --sf-st-satz: 19px; --sf-st-logo: 38px; --sf-st-marke: 22px; --sf-st-gross-hoehe: 460px; --sf-st-profil: 26px; --sf-st-play: 40px; --sf-st-kopf-hoehe: 440px; --sf-st-kopf-hoehe-breit: 560px; --sf-str-breite: 42%; --sf-str-breite-mittel: 23%; --sf-str-breite-breit: 15.4%; --sf-str-marke: 17px; --sf-str-titel: 15px; --sf-st-motive-luft: 230px; --sf-st-motive-hoehe-breit: 640px; --sf-st-motive-h1: 60px; --sf-st-motive-h1-breit: 108px; --sf-st-motive-saison: 12.5px; --sf-st-motive-saison-breit: 13.5px; --sf-st-motive-strich: #f2a27c; --sf-st-motive-nachweis: 11.5px; --sf-st-motive-punkt: 14px; --sf-st-motive-grund: #0a0e10; --sf-st-motive-steuer-grund: rgba(10, 14, 16, 0.62); --sf-st-motive-linie: rgba(255, 255, 255, 0.55); --sf-st-motive-schleier: linear-gradient( 180deg, rgba(8, 12, 16, 0.05) 0%, rgba(8, 12, 16, 0.12) 30%, rgba(8, 12, 16, 0.72) 52%, rgba(8, 12, 16, 0.94) 78%, rgba(8, 12, 16, 0.97) 100% ); --sf-st-motive-schleier-breit: linear-gradient( 90deg, rgba(8, 12, 16, 0.62) 0%, rgba(8, 12, 16, 0.2) 30%, rgba(8, 12, 16, 0) 46% ), linear-gradient( 180deg, rgba(8, 12, 16, 0) 32%, rgba(8, 12, 16, 0.7) 58%, rgba(8, 12, 16, 0.93) 100% ); --sf-str-breite-profil: 40%; --sf-str-profil-marke: 16px; --sf-str-profil-marke-breit: 19px; --sf-str-profil-titel: 13.5px; --sf-str-profil-titel-breit: 14px; --sf-str-zeichen-breite: 0.48; --sf-str-profil-schleier: linear-gradient( 180deg, rgba(10, 14, 16, 0.62) 0%, rgba(10, 14, 16, 0) 34%, rgba(10, 14, 16, 0) 50%, rgba(10, 14, 16, 0.84) 100% ); --sf-str-profil-station: rgba(255, 255, 255, 0.75); --sf-str-gesehen: rgba(255, 255, 255, 0.38); }
.sf-embed-root { --sf-sortiment: #176b58; --sf-sortiment-tint: #edf5f1; --sf-as-h1: clamp(44px, 7vw, 88px); --sf-as-h2: clamp(26px, 3.2vw, 38px); --sf-as-versprechen: clamp(18px, 2vw, 24px); --sf-as-kapitel: 12px; --sf-as-marke: 13px; --sf-as-name: 16px; --sf-as-zeile: 14px; --sf-as-fein: 12px; --sf-as-linie: #dedfe1; --sf-as-fach-grund: #f4f5f3; --sf-as-dunkel: #1a1a1a; --sf-as-hell-text: rgba(255, 255, 255, 0.86); }
.sf-embed-root { --sf-cf-schrift: "SF Werbung", "Source Sans 3", Arial, sans-serif; --sf-cf-galada: "SF Galada", "Brush Script MT", cursive; --sf-cf-blau: #0375b4; --sf-cf-blau-tief: #02507e; --sf-cf-sale: #d01642; --sf-cf-sale-tief: #8f0b20; --sf-cf-signal: #ffd23f; --sf-cf-nacht: #0d1b2a; --sf-cf-lila: #7143a6; --sf-cf-lila-tief: #4e2c77; --sf-cf-club-tint: #f3eff8; --sf-cf-eis: #5ac8fa; --sf-cf-flaeche: #f4f5f6; --sf-cf-linie: #dedfe1; --sf-cf-ink: #1a1a1a; --sf-cf-text: #4a4a4a; --sf-cf-grau: #656565; --sf-cf-travel: #a84b27; --sf-cf-weiss: #fff; --sf-cf-weiss-18: rgba(255, 255, 255, 0.18); --sf-cf-weiss-35: rgba(255, 255, 255, 0.35); --sf-cf-weiss-55: rgba(255, 255, 255, 0.55); --sf-cf-weiss-16: rgba(255, 255, 255, 0.16); --sf-cf-weiss-10: rgba(255, 255, 255, 0.1); --sf-cf-ink-08: rgba(26, 26, 26, 0.08); --sf-cf-ink-12: rgba(26, 26, 26, 0.12); --sf-cf-lila-18: rgba(78, 44, 119, 0.18); --sf-cf-h1: clamp(40px, 10vw, 64px); --sf-cf-titel: clamp(28px, 9.2cqi, 42px); --sf-cf-zahl: clamp(80px, 28cqi, 130px); --sf-cf-coupon: clamp(54px, 19cqi, 92px); --sf-cf-coupon-schmal: 15cqi; --sf-cf-podest: clamp(28px, 9.5cqi, 44px); --sf-cf-karte-name: 8cqi; --sf-cf-karte-punkte: 15cqi; --sf-cf-karte-klein: 3.4cqi; --sf-cf-s20: 20px; --sf-cf-s18: 18px; --sf-cf-s17: 17px; --sf-cf-s15: 15px; --sf-cf-s14: 14px; --sf-cf-s13: 13px; --sf-cf-s12: 12px; --sf-cf-s11: 11px; --sf-cf-s10: 10px; }
.sf-embed-root { --sf-cl-nacht: #0f1c20; --sf-cl-creme: #f2eee6; --sf-cl-rot: #b03a1e; --sf-cl-kuerbis: #d9772b; --sf-cl-tinte-08: rgba(15, 28, 32, 0.08); --sf-cl-tinte-20: rgba(15, 28, 32, 0.2); --sf-cl-karte-glanz: rgba(255, 255, 255, 0.14); --sf-cl-karte-linie: rgba(255, 255, 255, 0.45); --sf-cl-h2: clamp(24px, 2.8vw, 34px); --sf-cl-plus: 24px; --sf-cl-h1: clamp(44px, 9vw, 64px); --sf-cl-h1-breit: 88px; --sf-cl-buehne-h1: clamp(46px, 12vw, 64px); --sf-cl-buehne-h1-breit: 96px; --sf-cl-lage: 19px; --sf-cl-lage-breit: 22px; --sf-cl-zahl: 44px; --sf-cl-zahl-breit: 56px; --sf-cl-marke: clamp(32px, 4.4vw, 48px); --sf-cl-st-zahl: 72px; --sf-cl-st-label: 20px; --sf-cl-karte-name: 20px; --sf-cl-karte-name-breit: 26px; --sf-cl-schrift-17: 17px; --sf-cl-schrift-16: 16px; --sf-cl-schrift-15: 15px; --sf-cl-schrift-14: 14px; --sf-cl-schrift-13: 13px; --sf-cl-schrift-12: 12px; --sf-cl-schrift-11: 11px; --sf-cl-gutschein-gross: 52px; --sf-cl-tafel-alles: 40px; --sf-cl-tafel-alles-breit: 56px; --sf-cl-tafel-logo: 34px; --sf-cl-tafel-wort: 19px; --sf-cl-reihe-label: 15px; --sf-cl-schleier-oben: rgba(15, 28, 32, 0.55); --sf-cl-af-riesig: 27cqi; --sf-cl-af-gross: 19cqi; --sf-cl-af-titel: 9.4cqi; --sf-cl-af-vor: 8.6cqi; --sf-cl-af-name: 7.4cqi; --sf-cl-af-zahl: 13cqi; --sf-cl-af-klein: 3.4cqi; --sf-cl-af-schnee: #eef0f2; --sf-cl-tinte-35: rgba(15, 28, 32, 0.35); --sf-cl-ek-gross: clamp(72px, 30cqi, 120px); --sf-cl-af-linie: rgba(15, 28, 32, 0.12); --sf-cl-af-spur: rgba(15, 28, 32, 0.35); --sf-cl-af-schatten: 0 16px 30px rgba(15, 28, 32, 0.18); --sf-cl-af-glanz: rgba(255, 255, 255, 0.16); --sf-cl-af-weiss-30: rgba(255, 255, 255, 0.3); --sf-cl-af-rubbel: repeating-linear-gradient(-45deg, #e3e2e6 0 7px, #f3f2f5 7px 14px); }
.sf-embed-root { --sf-app-schrift-24px: 24px; --sf-app-schrift-32px: 32px; --sf-bs-farbe-0d1b2a: #0d1b2a; --sf-bs-farbe-4a5563: #4a5563; --sf-bs-farbe-c8102e: #c8102e; --sf-bs-farbe-e30613: #e30613; --sf-bs-farbe-e9e3d6: #e9e3d6; --sf-bs-farbe-f1ece3: #f1ece3; --sf-bs-farbe-f3efe7: #f3efe7; --sf-bs-farbe-f4f3f0: #f4f3f0; --sf-bs-farbe-schwarz: #000; --sf-bs-farbe-schwarz-18: rgb(0 0 0 / 0.18); --sf-bs-farbe-schwarz-20: rgb(0 0 0 / 0.2); --sf-bs-farbe-schwarz-25: rgb(0 0 0 / 0.25); --sf-bs-farbe-schwarz-35: rgb(0 0 0 / 0.35); --sf-bs-farbe-schwarz-45: rgb(0 0 0 / 0.45); --sf-bs-farbe-schwarz-50: rgb(0 0 0 / 0.5); --sf-bs-farbe-weiss: #fff; --sf-bs-farbe-weiss-14: rgb(255 255 255 / 0.14); --sf-bs-farbe-weiss-5: rgb(255 255 255 / 0.05); --sf-bs-farbe-weiss-86: rgb(255 255 255 / 0.86); --sf-bs-schrift-0-6rem: 0.6rem; --sf-bs-schrift-0-72rem: 0.72rem; --sf-bs-schrift-0-7rem: 0.7rem; --sf-bs-schrift-0-85rem: 0.85rem; --sf-bs-schrift-1-05rem: 1.05rem; --sf-bs-schrift-1-15rem: 1.15rem; --sf-bs-schrift-1-1rem: 1.1rem; --sf-bs-schrift-1-25rem: 1.25rem; --sf-bs-schrift-1-4rem: 1.4rem; --sf-bs-schrift-1-8rem: 1.8rem; --sf-bs-schrift-15rem: 15rem; --sf-bs-schrift-2-4rem: 2.4rem; --sf-bs-schrift-2-9rem: 2.9rem; --sf-bs-schrift-2rem: 2rem; --sf-font-galada: "Galada"; --sf-hm-farbe-5b8fc7: #5b8fc7; --sf-hm-farbe-eef1f4: #eef1f4; --sf-hm-farbe-f5f5f3: #f5f5f3; --sf-shop-farbe-6b6f76: #6b6f76; --sf-shop-farbe-dedfe1: #dedfe1; --sf-shop-farbe-schwarz-8: rgba(0, 0, 0, 0.08); --sf-shop-farbe-weiss: #fff; --sf-xb-farbe-0c121c: #0c121c; --sf-xb-farbe-0c121cef: #0c121cef; --sf-xb-farbe-a1adbb: #a1adbb; --sf-xb-farbe-aab4c0: #aab4c0; --sf-xb-farbe-bac3ce: #bac3ce; --sf-xb-farbe-dbe3ed: #dbe3ed; --sf-xb-farbe-e9c39a: #e9c39a; --sf-xb-farbe-f1f3f5: #f1f3f5; --sf-xb-farbe-f5f7fa: #f5f7fa; --sf-xb-farbe-weiss: #fff; --sf-xb-farbe-weiss-15: #ffffff25; --sf-xb-farbe-weiss-16: #ffffff28; --sf-xb-farbe-weiss-19: #ffffff30; --sf-xb-farbe-weiss-3: #ffffff08; --sf-xb-farbe-weiss-31: #ffffff50; --sf-xb-farbe-weiss-4: #ffffff0b; --sf-xb-farbe-weiss-9: #ffffff16; --sf-xb-schrift-0-75rem: 0.75rem; --sf-xb-schrift-0-7rem: 0.7rem; --sf-xb-schrift-0-85rem: 0.85rem; --sf-xb-schrift-0-95rem: 0.95rem; --sf-xb-schrift-0-9rem: 0.9rem; }
.sf-dynamik { --sf-page: var(--sf-white); --sf-error: #b3261e; --sf-error-tint: #fbeeed; --sf-caution: #8a5a00; --sf-caution-tint: #fdf5e6; --sf-body-size: 16px; --sf-blue: #0375b4; --sf-header-tool-font: 700 var(--sf-size-14) / 1.2 var(--sf-body); --sf-fit: #176b58; --sf-fit-tint: #edf5f1; --sf-advice: #0375b4; --sf-advice-tint: #edf5fa; --sf-travel: #a84b27; --sf-travel-tint: #faf0ea; --sf-club: #7143a6; --sf-club-tint: #f3eff8; --sf-club-member: var(--sf-hl-member-a); --sf-club-member-ink: var(--sf-hl-member-b); --sf-club-premium: var(--sf-hl-premium-a); --sf-club-premium-ink: var(--sf-hl-premium-b); --sf-club-vip: var(--sf-hl-vip-a); --sf-club-vip-ink: var(--sf-hl-vip-b); --sf-club-member-tint: #f5fbff; --sf-club-member-line: #d7ecf9; --sf-club-premium-tint: #f2fbf7; --sf-club-premium-line: #c8ece0; --sf-club-vip-tint: #faf7ff; --sf-club-vip-line: #e6dbfa; --sf-club-night: #03182c; --sf-club-step-title: calc(clamp(28px, 2.8vw, 40px) * var(--sf-display-scale)); --sf-club-step-points: calc(clamp(34px, 3.6vw, 52px) * var(--sf-display-scale)); --sf-club-bonus: calc(clamp(44px, 4.6vw, 64px) * var(--sf-display-scale)); --sf-club-mark: calc(clamp(15px, 1.35vw, 19px) * var(--sf-display-scale)); --sf-club-sub: calc(clamp(22px, 2vw, 26px) * var(--sf-display-scale)); --sf-sport: #b3243a; --sf-sport-tint: #fbf0f2; --sf-weg-leicht: #2563a8; --sf-weg-mittel: #c8322a; --sf-weg-schwer: #161616; --sf-weg-unbekannt: #7c8288; --sf-weg-bahn: #8a1d5c; --sf-weg-wasser: #8fbfe0; --sf-weg-huette: #fff; --sf-weg-sonne: #e7a817; --sf-card-yellow: #e7b416; --sf-on-dark: #fff; --sf-on-dark-muted: #ffffffbb; --sf-on-dark-soft: #ffffffcc; --sf-sport-h2: calc(clamp(34px, 3.4vw, 46px) * var(--sf-display-scale)); --sf-sport-h3: calc(clamp(26px, 2.2vw, 30px) * var(--sf-display-scale)); --sf-sport-lead: calc(clamp(30px, 3.2vw, 44px) * var(--sf-display-scale)); --sf-fp-h1: calc(clamp(34px, 5vw, 56px) * var(--sf-display-scale)); --sf-fp-tag: calc(20px * var(--sf-display-scale)); --sf-sw-alpine: #c8102e; --sf-sw-biathlon: #1f6f50; --sf-sw-ski-jumping: #2b5fab; --sf-sw-cross-country: #3c8d2f; --sf-sw-nordic-combined: #6a4fa3; --sf-sw-snowboard: #d9661f; --sf-sw-freestyle: #c2185b; --sf-sw-ski-mountaineering: #6d5c3d; --sf-sw-luge: #00808a; --sf-sw-bobsleigh: #4a5866; --sf-sw-skeleton: #8c6d00; --sf-wsb-grund: #072a46; --sf-wsb-hell: #f2f5f7; --sf-wsb-leise: #b8c6d6; --sf-lw-rand: rgba(26, 26, 26, 0.18); --sf-lw-glas: rgba(255, 255, 255, 0.88); --sf-lw-schatten: rgba(0, 0, 0, 0.4); --sf-lw-schraffur: #28283a; --sf-lw-kern: #ff9900; --sf-lw-stufe-zahl: 34px; --sf-lw-stufe-name: 24px; --sf-lw-rose-text: 7px; --sf-blue-hover: #025d90; --sf-white: #fff; --sf-ink: #1a1a1a; --sf-text: #4a4a4a; --sf-muted: #656565; --sf-line: #dedfe1; --sf-line-stark: #8a8f94; --sf-surface: #f4f5f6; --sf-display: "SF Dynamik", "Arial Narrow", sans-serif; --sf-display-werbung: "SF Werbung", "Source Sans 3", Arial, sans-serif; --sf-body: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --sf-content: 1320px; --sf-reading: 680px; --sf-gutter: clamp(20px, 4vw, 64px); --sf-section: clamp(48px, 6vw, 88px); --sf-grid-gap: 28px; --sf-stack-gap: 30px; --sf-collection-row-gap: 42px; --sf-title: calc(clamp(56px, 7.1vw, 104px) * var(--sf-display-scale)); --sf-section-title: calc(clamp(36px, 4vw, 54px) * var(--sf-display-scale)); --sf-card-title: calc(clamp(28px, 2.7vw, 38px) * var(--sf-display-scale)); --sf-radius: 0px; --sf-motion: 160ms; --sf-mark-shadow: 0 1px 2px rgb(0 0 0 / 0.45); --sf-text-min: 0px; --sf-size-9: max(9px, var(--sf-text-min)); --sf-size-10: max(10px, var(--sf-text-min)); --sf-size-11: max(11px, var(--sf-text-min)); --sf-size-12: max(12px, var(--sf-text-min)); --sf-size-13: max(13px, var(--sf-text-min)); --sf-size-14: max(14px, var(--sf-text-min)); --sf-size-15: max(15px, var(--sf-text-min)); --sf-size-16: max(16px, var(--sf-text-min)); --sf-size-17: max(17px, var(--sf-text-min)); --sf-size-18: max(18px, var(--sf-text-min)); --sf-size-19: max(19px, var(--sf-text-min)); --sf-size-20: max(20px, var(--sf-text-min)); --sf-display-scale: 1; --sf-heading-weight: 800; --sf-heading-leading: 1; --sf-heading-case: uppercase; --sf-label-case: uppercase; --sf-display-condensed: "SF Dynamik", "Barlow Condensed", Impact, sans-serif; --sf-ui-arial: Arial, Helvetica, sans-serif; --sf-blue-bright: #007db8; --sf-neutral-180: #dedee2; --sf-neutral-190: #ddd; --sf-neutral-200: #d9d9d9; --sf-neutral-250: #ccc; --sf-neutral-300: #bbb; --sf-neutral-400: #999; --sf-neutral-50: #f6f6f6; --sf-neutral-580: #666; --sf-neutral-600: #626262; --sf-neutral-610: #5b5b5b; --sf-neutral-620: #595959; --sf-neutral-650: #555; --sf-neutral-700: #4c4c4c; --sf-neutral-800: #333; --sf-neutral-900: #202020; --sf-neutral-950: #191919; --sf-overlay-60: #0009; --sf-overlay-73: #000b; --sf-overlay-80: #000c; --sf-overlay-grey-40: #8886; --sf-overlay-ink-60: #1119; --sf-overlay-white-50: #ffffff80; --sf-tint-blue-100: #f0f3f5; --sf-tint-blue-200: #e8edf0; --sf-tint-blue-40: #f3f5f5; --sf-tint-blue-60: #f2f4f5; --sf-tint-blue-80: #f1f3f4; --sf-tint-forest-900: #2b3026; --sf-tint-green-40: #f5f6f5; --sf-tint-sand-20: #f7f5f2; --sf-tint-sand-200: #eae6dc; --sf-tint-sand-40: #f4f4f2; --sf-tint-sky-100: #e9f3f9; --sf-tint-sky-80: #eaf2f7; --sf-tint-violet-100: #eeeaf3; --sf-tint-violet-300: #d6cce0; background: var(--sf-page); color: var(--sf-ink); font: max(var(--sf-body-size), var(--sf-text-min))/1.55 var(--sf-body); }
.sf-dynamik[data-density="compact"] { --sf-section: clamp(28px, 3vw, 40px); --sf-grid-gap: 16px; --sf-stack-gap: 16px; --sf-collection-row-gap: 24px; --sf-title: calc(clamp(44px, 5vw, 72px) * var(--sf-display-scale)); --sf-section-title: calc(clamp(30px, 3vw, 42px) * var(--sf-display-scale)); --sf-card-title: calc(clamp(26px, 2.2vw, 32px) * var(--sf-display-scale)); }
.sf-dynamik[data-density="dense"] { --sf-section: 24px; --sf-grid-gap: 12px; --sf-stack-gap: 12px; --sf-collection-row-gap: 18px; --sf-title: calc(clamp(38px, 4vw, 58px) * var(--sf-display-scale)); --sf-section-title: calc(clamp(28px, 2.8vw, 36px) * var(--sf-display-scale)); --sf-card-title: calc(27px * var(--sf-display-scale)); }
.sf-embed-root { --sf-marke-wort: 28px; --sf-marke-wort-schmal: 23px; --sf-marke-wort-shop: 22px; --sf-marke-titel: 30px; --sf-marke-zahl: 34px; --sf-lp-palette-nacht: #0d1b2a; --sf-lp-palette-tinte: #1a1a1a; --sf-lp-palette-tiefblau: #173754; --sf-lp-palette-club-nacht: #03182c; --sf-lp-palette-blau: #0375b4; --sf-lp-palette-blau-tief: #02507e; --sf-lp-palette-rot: #c8102e; --sf-lp-palette-rot-tief: #8f0b20; --sf-lp-palette-rabatt-rot: #d01642; --sf-lp-palette-lila: #7143a6; --sf-lp-palette-lila-tief: #4e2c77; --sf-lp-palette-gold: #9a6a0c; --sf-lp-palette-gold-tief: #694808; --sf-lp-palette-gelb: #ffd23f; --sf-lp-palette-fit: #176b58; --sf-lp-palette-travel: #a84b27; --sf-lp-palette-sport: #b3243a; --sf-lp-palette-weiss: #ffffff; --sf-lp-palette-flaeche: #f4f5f6; --sf-lp-palette-sand: #f7f5f2; --sf-lp-palette-fit-hell: #edf5f1; --sf-lp-palette-advice-hell: #edf5fa; --sf-lp-palette-travel-hell: #faf0ea; --sf-lp-palette-club-hell: #f3eff8; --sf-lp-palette-sport-hell: #fbf0f2; --sf-mw-h1: clamp(34px, 4.6vw, 60px); --sf-mw-h1-shop: 26px; --sf-mw-temp: clamp(44px, 6vw, 64px); --sf-mw-lage-rand: 6px; --sf-mw-logo: 34px; --sf-mst-nacht: #141719; --sf-mst-hell: rgba(255, 255, 255, 0.88); --sf-mst-hell-leise: rgba(255, 255, 255, 0.66); --sf-mst-hell-linie: rgba(255, 255, 255, 0.3); --sf-mst-vermerk-grund: rgba(20, 23, 25, 0.6); --sf-mst-punkt-grund: rgba(20, 23, 25, 0.55); --sf-mst-schleier: linear-gradient( to bottom, rgba(20, 23, 25, 0), rgba(20, 23, 25, 0.6) 45%, #141719 94% ); --sf-mst-schleier-kapitel: linear-gradient(to bottom, rgba(20, 23, 25, 0), #141719 96%); --sf-mst-titel: clamp(46px, 7.2cqi, 104px); --sf-mst-h2: clamp(30px, 3.6cqi, 46px); --sf-mst-h3: clamp(24px, 2.6cqi, 32px); --sf-mst-zwischentitel-gewicht: 600; --sf-mst-zitat-gross: clamp(40px, 6.4cqi, 92px); --sf-mst-zitat-zeile: clamp(30px, 3.2cqi, 44px); --sf-mst-zahl: clamp(88px, 9.6cqi, 132px); --sf-mst-station: 24px; --sf-mst-tafel-titel: clamp(22px, 2cqi, 28px); --sf-mst-punkt: 18px; --sf-mst-kopf-bild: 520px; --sf-mst-kopf-hoehe: 780px; --sf-mwb-std-grund: #13191c; --sf-mwb-std-flaeche: #1e2629; --sf-mwb-std-text: #f2f0eb; --sf-mwb-std-linie: #aab3b0; --sf-mwb-std-akzent: #ffffff; --sf-mwb-std-akzenttext: #1a1a1a; --sf-mwb-plakat-grund: #1a1a1a; --sf-mwb-plakat-text: #ffffff; --sf-mwb-typo-1: #1d4a73; --sf-mwb-typo-2: #e3a62e; --sf-mwb-typo-3: #b3222d; --sf-mwb-typo-4: #d2ab80; --sf-mwb-schleier-oben: linear-gradient(180deg, rgba(10, 14, 16, 0.55), rgba(10, 14, 16, 0)); --sf-mwb-schleier-himmel: linear-gradient(180deg, rgba(8, 20, 38, 0.6), rgba(8, 20, 38, 0)); --sf-mwb-schleier-unten: linear-gradient(180deg, rgba(10, 14, 16, 0) 42%, rgba(10, 14, 16, 0.74)); --sf-mwb-schleier-links: linear-gradient(90deg, rgba(10, 14, 16, 0.7), rgba(10, 14, 16, 0) 70%); --sf-mwb-schatten: 0 18px 40px rgba(0, 0, 0, 0.18); --sf-mwb-held-h: 440px; --sf-mwb-held-h-breit: 560px; --sf-mwb-held-h-weit: 500px; --sf-mwb-held-h-weit-breit: 660px; --sf-mwb-zeile: 78px; --sf-mwb-zeile-breit: 108px; --sf-mwb-name-groesse: clamp(70px, 21cqi, 270px); --sf-mwb-name-weit: clamp(64px, 15cqi, 190px); --sf-mwb-name-stadt: clamp(64px, 19cqi, 170px); --sf-mwb-satz-groesse: clamp(30px, 8cqi, 66px); --sf-mwb-neu-groesse: clamp(21px, 5.6cqi, 36px); --sf-mwb-abschnitt-groesse: clamp(26px, 6cqi, 38px); --sf-mwb-shopband-groesse: clamp(26px, 6cqi, 44px); --sf-mwb-h1-groesse: clamp(36px, 9cqi, 60px); --sf-mwb-pname: 25px; --sf-mwb-pname-breit: 34px; --sf-mwb-pname-mittel: 28px; --sf-mwb-pname-klein: 22px; --sf-mwb-gross-name: clamp(50px, 12.5cqi, 128px); --sf-mwb-vname: 44px; --sf-mwb-vname-breit: clamp(80px, 9cqi, 126px); --sf-mwb-zahl: clamp(54px, 16cqi, 118px); --sf-mwb-ortgross: clamp(30px, 8.5cqi, 62px); --sf-mwb-streifen-name: clamp(40px, 10cqi, 110px); --sf-mwb-quer-name: clamp(28px, 6cqi, 58px); --sf-mwb-alle-name: clamp(26px, 6cqi, 46px); --sf-mwb-alle-pfeil: 30px; --sf-mwb-a-typo: 72px; --sf-mwb-a-name: 42px; --sf-bs-overlay-light: radial-gradient( ellipse 58% 52% at 50% 50%, rgba(0, 0, 0, 0.46) 0%, rgba(0, 0, 0, 0.22) 55%, rgba(0, 0, 0, 0) 82% ), linear-gradient(to top, rgba(0, 0, 0, 0.28), rgba(0, 0, 0, 0) 30%); --sf-bs-stack-value: clamp(44px, 6.4cqi, 92px); --sf-bs-sale-title: clamp(40px, 5cqi, 72px); --sf-bs-drop-shadow: drop-shadow(0 1px 2px #0000001a) drop-shadow(0 1px 1px #0000000f); --sf-bs-hero-text-shadow: 0 1px 8px #0009; --sf-bs-title-shadow: drop-shadow(0 2px 12px #00000073); --sf-bs-sub-shadow: drop-shadow(0 1px 6px #000000b3); --sf-bs-shadow-lg: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a; --sf-bs-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; --sf-bs-text-2xl: 1.5rem; --sf-bs-text-3xl: 1.875rem; --sf-bs-text-4xl: 2.25rem; --sf-bs-chip-dark-bg: #ffffff1f; --sf-bs-chip-dark-border: 2px dashed #fffc; --sf-bs-shadow-md: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a; --sf-bs-finder-shade: linear-gradient(to top, #0000009e, #0000 55%); --sf-mkb-shade: linear-gradient(180deg, #0000 40%, #000000b8); --sf-mkb-reiter-grund: #ffffff59; --sf-mkb-reiter-text: #ffffffc7; --sf-mkb-text-schatten: 0 1px 8px #0009; --sf-mkb-buehne-hoehe: min(56svh, 460px); --sf-hb-bildkopf-hoehe-kompakt: min(52svh, 440px); --sf-hb-bildkopf-hoehe-kompakt-breit: min(52svh, 520px); --sf-mkb-buehne-hoehe-breit: min(60svh, 620px); --sf-bs-finder-text-shadow: 0 1px 8px #00000059; --sf-bs-line-strong: var(--sf-line-strong, #ccc); --sf-bs-shadow-sm: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a; --sf-bs-sale-overlay: linear-gradient(90deg, #0c1627b8 0%, #0c162775 55%, #0c16272e 100%); --sf-bs-caution: #8a5a00; --sf-bs-caution-tint: #fdf5e6; --sf-bs-step-title: calc(clamp(20px, 2.2cqi, 24px) * var(--sf-display-scale)); --sf-bs-leather: #7a5235; --sf-bs-good: #2e7d4f; --sf-bs-dl-count: calc(clamp(30px, 4cqi, 44px) * var(--sf-display-scale)); --sf-gr-gold: #f08624; --sf-gr-gold-deep: #8a4a12; --sf-gr-dusk: #173754; --sf-gr-blue: #0375b4; --sf-gr-cream: #f7efe3; --sf-gr-sky: #0788c5; --sf-gr-band: #0f3556; --sf-gr-sand: #d8c4a8; --sf-gr-amber: #e0a348; --sf-gr-amber-light: #efb65c; --sf-gr-amber-mag: #e2a548; --sf-gr-rust: #a95f3b; --sf-gr-sage: #526762; --sf-gr-black: #000; --sf-gr-text: hsl(0 0% 29%); --sf-gr-muted: hsl(0 0% 45%); --sf-gr-border: hsl(0 0% 90%); --sf-gr-surface: hsl(0 0% 100%); --sf-gr-surface-muted: hsl(210 20% 98%); --sf-gr-leaf-1: #c96a2e; --sf-gr-leaf-2: #a13f2b; --sf-gr-leaf-3: #d79a3c; --sf-gr-leaf-4: #7c7a3f; --sf-gr-tone-gold: linear-gradient(135deg, #f08624, #8a4a12); --sf-gr-tone-forest: linear-gradient(135deg, #3f5744, #22301f); --sf-gr-tone-dusk: linear-gradient(135deg, #173754, #0b1c2e); --sf-gr-level-blue: linear-gradient(160deg, #0496e6, #045f91); --sf-gr-level-platinum: linear-gradient(160deg, #0ea47a, #0b7a5c); --sf-gr-level-gold: linear-gradient(160deg, #6d28d9, #4c1d95); --sf-gr-level-sub: rgba(255, 255, 255, 0.82); --sf-gr-page-bg: radial-gradient(70% 26% at 8% 13%, rgba(221, 161, 58, 0.18), transparent 68%), radial-gradient(58% 23% at 96% 47%, rgba(169, 95, 59, 0.14), transparent 72%), linear-gradient(180deg, #f7efe3 0%, #f4e8d7 34%, #ead7bd 67%, #e6cfac 100%); --sf-gr-slot-gold: linear-gradient(145deg, #d79a3c 0%, #a95f3b 55%, #5e3925 100%); --sf-gr-slot-forest: linear-gradient(145deg, #738064 0%, #3f5744 55%, #233128 100%); --sf-gr-slot-dusk: linear-gradient(145deg, #35506a 0%, #173754 55%, #0b1c2e 100%); --sf-gr-hero-slot: linear-gradient(115deg, #4f311f 0%, #98551d 42%, #a76426 70%, #173754 100%); --sf-gr-hero-shade: linear-gradient( 90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 34%, rgba(0, 0, 0, 0.06) 50%, transparent 58%, rgba(240, 134, 36, 0.3) 78%, rgba(240, 134, 36, 0.55) 100% ); --sf-gr-text-shadow: 0 2px 8px rgba(0, 0, 0, 0.65); --sf-gr-cat-shade: linear-gradient( to top, rgba(20, 12, 2, 0.88) 0%, rgba(20, 12, 2, 0.35) 50%, rgba(20, 12, 2, 0.05) 100% ); --sf-gr-glass-14: rgba(255, 255, 255, 0.14); --sf-gr-glass-18: rgba(255, 255, 255, 0.18); --sf-gr-vis-bg: linear-gradient(120deg, #173754, #071827); --sf-gr-vis-glow: radial-gradient(circle at 76% 44%, rgba(240, 134, 36, 0.5), transparent 25%); --sf-gr-shadow-sm: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --sf-gr-shadow-md: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --sf-gr-shadow-lg: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); --sf-gr-shadow-xl: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1); --sf-gr-white-15: oklab(0.999994 0.0000455678 0.0000200868 / 0.15); --sf-gr-white-25: oklab(0.999994 0.0000455678 0.0000200868 / 0.25); --sf-gr-amber-60: oklab(0.75699 0.0346643 0.123625 / 0.6); --sf-gr-ring-white-25: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 0 1px var(--sf-gr-white-25), 0 0 #0000; --sf-gr-drop: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1)) drop-shadow(0 1px 1px rgb(0 0 0 / 0.06)); --sf-gr-fs-9: 9px; --sf-gr-fs-10: 10px; --sf-gr-fs-11: 11px; --sf-gr-fs-12: 0.75rem; --sf-gr-fs-14: 0.875rem; --sf-gr-fs-16: 1rem; --sf-gr-fs-18: 1.125rem; --sf-gr-fs-20: 1.25rem; --sf-gr-fs-24: 1.5rem; --sf-hl-rust: #a64f39; --sf-hl-ink: #16283a; --sf-hl-text: #1f2124; --sf-hl-sand: #f5eee3; --sf-hl-night: #102d3c; --sf-hl-deep: #0a2232; --sf-hl-rust-55: oklab(0.532091 0.0981629 0.0695236 / 0.55); --sf-hl-shade-90: oklab(0.218942 -0.0206384 -0.0259952 / 0.9); --sf-hl-shade-18: oklab(0.218942 -0.0206384 -0.0259952 / 0.18); --sf-hl-teal-55: oklab(0.278913 -0.029267 -0.0233446 / 0.55); --sf-hl-sky: #8ed7ff; --sf-hl-moss: #526762; --sf-hl-black: #000; --sf-hl-slate-100: oklch(96.8% 0.007 247.896); --sf-hl-slate-200: oklch(92.9% 0.013 255.508); --sf-hl-slate-300: oklch(86.9% 0.022 252.894); --sf-hl-slate-400: oklch(70.4% 0.04 256.788); --sf-hl-slate-500: oklch(55.4% 0.046 257.417); --sf-hl-slate-600: oklch(44.6% 0.043 257.281); --sf-hl-slate-700: oklch(37.2% 0.044 257.287); --sf-hl-shadow: rgb(0 0 0 / 0.1); --sf-hl-shadow-warm: rgba(47, 43, 38, 0.14); --sf-hl-paper-glow: rgba(216, 154, 58, 0.12); --sf-hl-paper-a: #f8f3eb; --sf-hl-paper-b: #f3eadf; --sf-hl-slot: #d9d2c6; --sf-hl-slot-ring: rgba(255, 255, 255, 0.18); --sf-hl-forest-a: #68765f; --sf-hl-forest-b: #344b43; --sf-hl-forest-c: #19333a; --sf-hl-road-a: #ded1bd; --sf-hl-road-b: #ad7651; --sf-hl-road-c: #854431; --sf-hl-dusk-a: #29485d; --sf-hl-dusk-b: #102d42; --sf-hl-dusk-c: #071d2b; --sf-hl-rust-a: #be6548; --sf-hl-rust-b: #8a3f32; --sf-hl-rust-c: #542b29; --sf-hl-member-a: #0496e6; --sf-hl-member-b: #045f91; --sf-hl-premium-a: #0ea47a; --sf-hl-premium-b: #0b7a5c; --sf-hl-vip-a: #6d28d9; --sf-hl-vip-b: #4c1d95; --sf-hl-level-sub: rgba(255, 255, 255, 0.82); --sf-hl-fs-9: 9px; --sf-hl-fs-10: 10px; --sf-hl-fs-11: 11px; --sf-hl-fs-12: 0.75rem; --sf-hl-fs-14: 0.875rem; --sf-hl-fs-16: 1rem; --sf-hl-fs-20: 1.25rem; --sf-hl-fs-24: 1.5rem; --sf-bts-navy: #173754; --sf-bts-blue: #0375b4; --sf-bts-sale: #d01642; --sf-bts-blue-dark: #025f93; --sf-bts-navy-dark: #0d3156; --sf-bts-sand: #f7f6f2; --sf-bts-paper: #fbfaf6; --sf-bts-ice: #edf5f8; --sf-bts-ice-soft: #eaf3fb; --sf-bts-ice-deep: #dceef8; --sf-bts-green: #dcf2cd; --sf-bts-apricot: #fce7d3; --sf-bts-orange: #f08624; --sf-bts-sky: #8bd0f2; --sf-bts-black: #000; --sf-bts-slate-100: oklch(96.8% 0.007 247.896); --sf-bts-slate-200: oklch(92.9% 0.013 255.508); --sf-bts-slate-500: oklch(55.4% 0.046 257.417); --sf-bts-slate-600: oklch(44.6% 0.043 257.281); --sf-bts-slate-900: oklch(20.8% 0.042 265.755); --sf-bts-grid-line: rgba(3, 117, 180, 0.035); --sf-bts-card-shadow: 0 22px 55px -35px rgba(23, 55, 84, 0.38); --sf-bts-focus: rgba(208, 22, 66, 0.55); --sf-bts-shadow: rgb(0 0 0 / 0.1); --sf-bts-shadow-base: 0 0 #0000, 0 0 #0000, 0 0 #0000, 0 0 #0000; --sf-bts-text-shadow-60: rgba(0, 0, 0, 0.6); --sf-bts-ai-shadow: rgba(0, 0, 0, 0.55); --sf-bts-sale-cta-shadow: rgba(208, 22, 66, 0.5); --sf-bts-sale-55: rgba(208, 22, 66, 0.55); --sf-bts-sale-60: rgba(208, 22, 66, 0.6); --sf-bts-sale-0: rgba(208, 22, 66, 0); --sf-bts-green-50: rgba(106, 168, 79, 0.5); --sf-bts-green-0: rgba(106, 168, 79, 0); --sf-bts-moss-50: rgba(74, 124, 45, 0.5); --sf-bts-moss-65: rgba(74, 124, 45, 0.65); --sf-bts-doodle-pencil: #e0973a; --sf-bts-doodle-plane: #173754; --sf-bts-doodle-ruler: #0375b4; --sf-bts-doodle-backpack: #2a8f9e; --sf-bts-doodle-apple: #5a9c5a; --sf-bts-doodle-bulb: #e0b23a; --sf-bts-doodle-spiral: #7c6a9c; --sf-bts-doodle-glasses: #3ba3a3; --sf-bts-doodle-scissors: #c77dab; --sf-bts-text-24: 24px; --sf-bts-text-30: 30px; --sf-bts-text-36: 36px; --sf-bts-text-48: 48px; --sf-bts-navy-25: oklab(0.327955 -0.0236254 -0.0594922 / 0.25); --sf-bts-blue-20: oklab(0.540651 -0.0587226 -0.116522 / 0.2); --sf-rj-storm: #05192b; --sf-rj-night: #072a46; --sf-rj-deep: #0a3c63; --sf-rj-ink: #12212d; --sf-rj-text: #1d2a33; --sf-rj-muted: #5b6b77; --sf-rj-paper: #f2f5f7; --sf-rj-white: #ffffff; --sf-rj-line: #d8e0e6; --sf-rj-blue: #0375b4; --sf-rj-sky: #4fb3ff; --sf-rj-mist: #bfe0f7; --sf-rj-yellow: #ffd23f; --sf-rj-yellow-ink: #3a2e00; --sf-rj-red: #d01642; --sf-rj-green: #0e8a63; --sf-rj-skin: #f0c9a8; --sf-rj-skin-ink: #6b4a33; --sf-rj-glass: rgba(255, 255, 255, 0.1); --sf-rj-glass-line: rgba(255, 255, 255, 0.28); --sf-rj-white-80: rgba(255, 255, 255, 0.8); --sf-rj-white-60: rgba(255, 255, 255, 0.62); --sf-rj-shade: rgba(8, 21, 31, 0.55); --sf-rj-shadow: rgba(13, 34, 49, 0.16); --sf-rj-shadow-hot: rgba(255, 210, 63, 0.55); --sf-rj-water: rgba(79, 179, 255, 0.78); --sf-rj-water-top: rgba(191, 224, 247, 0.95); --sf-rj-vapor: rgba(255, 255, 255, 0.85); --sf-rj-fs-hero: clamp(2.2rem, 5.4cqi, 4.3rem); --sf-rj-fs-h2: clamp(1.7rem, 3.6cqi, 2.7rem); --sf-rj-fs-know: clamp(2.1rem, 5.2cqi, 3.9rem); --sf-rj-fs-lead: clamp(1.05rem, 1.6cqi, 1.25rem); --sf-rj-fs-h3: clamp(1.4rem, 2.6cqi, 2rem); --sf-rj-svg-fs-s: 15px; --sf-rj-svg-fs-m: 19px; --sf-rj-warm: #ff9f43; --sf-rj-warm-ink: #3d1d00; --sf-rj-warm-light: #ffd2a6; --sf-rj-warm-zone-top: #18232d; --sf-rj-warm-zone-bottom: #4a2a1c; --sf-rj-yellow-deep: #e0a800; --sf-rj-clamp: #2b3c49; --sf-rj-white-18: rgba(255, 255, 255, 0.18); --sf-rj-nav-glass: rgba(5, 25, 43, 0.8); --sf-rj-nav-line: rgba(255, 255, 255, 0.16); --sf-rj-shadow-strong: rgba(0, 0, 0, 0.35); --sf-rj-yellow-glow: rgba(255, 210, 63, 0.45); --sf-rj-brand: #0375b4; --sf-rj-brand-bright: #0496e6; --sf-rj-brand-ink: #ffffff; --sf-rj-brand-light: #8fd0ff; --sf-rj-brand-sky: #6cc0ff; --sf-rj-brand-glow: rgba(4, 150, 230, 0.45); --sf-rj-brand-shadow: rgba(3, 117, 180, 0.35); --sf-rj-umbrella-light: #e9f5fd; --sf-rj-umbrella-shaft: #d8e0e6; --sf-rj-section-pad: clamp(40px, 4.6cqi, 60px); --sf-rj-display: var(--sf-display-condensed); --sf-rj-xr-sheen: rgba(255, 255, 255, 0.22); --sf-rj-xr-rip: rgba(255, 255, 255, 0.1); --sf-rj-xr-weave: rgba(0, 0, 0, 0.16); --sf-rj-xr-weave-soft: rgba(0, 0, 0, 0.11); --sf-rj-xr-pore: rgba(58, 46, 0, 0.32); --sf-rj-xr-membrane-hi: #ffe387; --sf-rj-xr-knit: #e3ebf1; --sf-rj-xr-knit-line: rgba(18, 33, 45, 0.08); --sf-rj-xr-film: rgba(230, 237, 242, 0.62); --sf-rj-xr-print: rgba(18, 33, 45, 0.3); --sf-rj-xr-mesh: #cdd7de; --sf-rj-xr-edge: rgba(255, 255, 255, 0.28); --sf-rj-xr-drop-shadow: rgba(0, 0, 0, 0.35); --sf-rj-xr-ring-glow: rgba(3, 117, 180, 0.22); --sf-rj-xr-vapor: rgba(255, 159, 67, 0.9); --sf-rj-xr-vapor-glow: rgba(255, 159, 67, 0.45); --sf-kb-storm: #05192b; --sf-kb-night: #072a46; --sf-kb-deep: #0a3c63; --sf-kb-ink: #12212d; --sf-kb-text: #1d2a33; --sf-kb-muted: #5b6b77; --sf-kb-paper: #f2f5f7; --sf-kb-white: #ffffff; --sf-kb-line: #d8e0e6; --sf-kb-blue: #0375b4; --sf-kb-sky: #4fb3ff; --sf-kb-mist: #bfe0f7; --sf-kb-yellow: #ffd23f; --sf-kb-yellow-ink: #3a2e00; --sf-kb-red: #d01642; --sf-kb-green: #0e8a63; --sf-kb-skin: #f0c9a8; --sf-kb-skin-ink: #6b4a33; --sf-kb-glass: rgba(255, 255, 255, 0.1); --sf-kb-glass-line: rgba(255, 255, 255, 0.28); --sf-kb-white-80: rgba(255, 255, 255, 0.8); --sf-kb-white-60: rgba(255, 255, 255, 0.62); --sf-kb-shade: rgba(8, 21, 31, 0.55); --sf-kb-shadow: rgba(13, 34, 49, 0.16); --sf-kb-shadow-hot: rgba(255, 210, 63, 0.55); --sf-kb-water: rgba(79, 179, 255, 0.78); --sf-kb-water-top: rgba(191, 224, 247, 0.95); --sf-kb-vapor: rgba(255, 255, 255, 0.85); --sf-kb-fs-hero: clamp(2.2rem, 5.4cqi, 4.3rem); --sf-kb-fs-h2: clamp(1.7rem, 3.6cqi, 2.7rem); --sf-kb-fs-know: clamp(2.1rem, 5.2cqi, 3.9rem); --sf-kb-fs-lead: clamp(1.05rem, 1.6cqi, 1.25rem); --sf-kb-fs-h3: clamp(1.4rem, 2.6cqi, 2rem); --sf-kb-svg-fs-s: 15px; --sf-kb-svg-fs-m: 19px; --sf-kb-warm: #ff9f43; --sf-kb-warm-ink: #3d1d00; --sf-kb-warm-light: #ffd2a6; --sf-kb-warm-zone-top: #18232d; --sf-kb-warm-zone-bottom: #4a2a1c; --sf-kb-yellow-deep: #e0a800; --sf-kb-clamp: #2b3c49; --sf-kb-white-18: rgba(255, 255, 255, 0.18); --sf-kb-nav-glass: rgba(5, 25, 43, 0.8); --sf-kb-nav-line: rgba(255, 255, 255, 0.16); --sf-kb-shadow-strong: rgba(0, 0, 0, 0.35); --sf-kb-yellow-glow: rgba(255, 210, 63, 0.45); --sf-kb-brand: #0375b4; --sf-kb-brand-bright: #0496e6; --sf-kb-brand-ink: #ffffff; --sf-kb-brand-light: #8fd0ff; --sf-kb-brand-sky: #6cc0ff; --sf-kb-brand-glow: rgba(4, 150, 230, 0.45); --sf-kb-brand-shadow: rgba(3, 117, 180, 0.35); --sf-kb-umbrella-light: #e9f5fd; --sf-kb-umbrella-shaft: #d8e0e6; --sf-kb-section-pad: clamp(40px, 4.6cqi, 60px); --sf-kb-display: var(--sf-display-condensed); --sf-kb-lk-panel-top: #0c1926; --sf-kb-lk-panel-bottom: #04090f; --sf-kb-lk-panel-glow: rgba(255, 196, 120, 0.07); --sf-kb-lk-panel-line: rgba(170, 200, 230, 0.16); --sf-kb-lk-guide: rgba(200, 220, 240, 0.28); --sf-kb-lk-night: #0e1a27; --sf-kb-lk-light: #fff2da; --sf-kb-lk-glow: rgba(255, 214, 150, 0.55); --sf-kb-lk-shade: #020407; --sf-kb-lk-ground: #8c7151; --sf-kb-lk-humus: #4c3a29; --sf-kb-lk-moss: #6d8243; --sf-kb-lk-leaf-a: #cf8534; --sf-kb-lk-leaf-b: #ecb557; --sf-kb-lk-leaf-c: #9e582a; --sf-kb-lk-leaf-d: #949342; --sf-kb-lk-leaf-e: #c05f30; --sf-kb-lk-needle: #5a4530; --sf-kb-lk-path: #dcc59d; --sf-kb-lk-gravel-a: #eadcbf; --sf-kb-lk-gravel-b: #8e7a5f; --sf-kb-lk-rut: #9a8465; --sf-kb-lk-twig: #4b3826; --sf-kb-lk-stone-a: #aaa69c; --sf-kb-lk-stone-b: #87837a; --sf-kb-lk-stone-light: #d3cdbf; --sf-kb-lk-gloss: #ece6d8; --sf-kb-lk-fern: #62823b; --sf-kb-lk-meadow: #7b8650; --sf-kb-lk-grass: #a6b06a; --sf-kb-lk-root-foot: #352619; --sf-kb-lk-bark: #694832; --sf-kb-lk-bark-ring: #8d6746; --sf-kb-lk-bark-hi: #a77d56; --sf-kb-lk-root: #4a3122; --sf-kb-lk-root-hi: #b88a5c; --sf-kb-lk-root-trunk: #5c402b; --sf-kb-lk-root-shadow: rgba(12, 7, 3, 0.6); --sf-kb-lk-cast: rgba(3, 5, 8, 0.55); --sf-kb-lk-steel: #5d646d; --sf-kb-lk-post-side: #c4c0b6; --sf-kb-lk-crown-shadow: rgba(2, 6, 3, 0.6); --sf-kb-lk-wood: #c99a5e; --sf-kb-lk-wood-dark: #6f4c2e; --sf-kb-lk-sign: #f5c94a; --sf-kb-lk-stripe-red: #d8352b; --sf-kb-lk-stripe-white: #f4efe6; --sf-kb-lk-post: #f2f0ea; --sf-kb-lk-reflex: #ff5a2e; --sf-kb-lk-reflex-glow: rgba(255, 110, 60, 0.5); --sf-kb-lk-crown: #3e5e2d; --sf-kb-lk-crown-hi: #6f9248; --sf-kb-lk-edge: rgba(255, 234, 196, 0.8); --sf-kb-lk-silhouette: #03070b; --sf-kb-lk-rim: rgba(255, 228, 182, 0.5); --sf-kb-lk-drop: rgba(0, 0, 0, 0.6); --sf-kb-lk-pack: #3a4654; --sf-kb-lk-hat: #9aa6b3; --sf-kb-lk-hat-hi: #dfe5eb; --sf-kb-lk-band: #0e1318; --sf-kb-lk-lamp: #e9e5db; --sf-kb-lk-c1: #ffd23f; --sf-kb-lk-c2: #5cc2ff; --sf-kb-lk-c3: #ff8a5c; --sf-kb-lk-fs-zahl: clamp(1.3rem, 2.2cqi, 1.6rem); --sf-kb-lk-fs-weite: clamp(2rem, 3.4cqi, 2.6rem); --sf-xb-night: #060d14; --sf-xb-ink: #0c1822; --sf-xb-deep: #11263a; --sf-xb-text: #1b2730; --sf-xb-muted: #5b6874; --sf-xb-paper: #f2f4f6; --sf-xb-white: #ffffff; --sf-xb-line: #d9dfe5; --sf-xb-blue: #0375b4; --sf-xb-ice: #5cc2ff; --sf-xb-frost: #cdeaff; --sf-xb-yellow: #ffd23f; --sf-xb-yellow-ink: #3a2e00; --sf-xb-yellow-deep: #e0a800; --sf-xb-green: #0e8a63; --sf-xb-amber: #ffb547; --sf-xb-amber-ink: #3d2400; --sf-xb-ember: #ff6b3d; --sf-xb-ember-ink: #ffffff; --sf-xb-shell: #24323f; --sf-xb-shell-hi: #34495b; --sf-xb-glass: rgba(255, 255, 255, 0.1); --sf-xb-glass-line: rgba(255, 255, 255, 0.26); --sf-xb-white-80: rgba(255, 255, 255, 0.8); --sf-xb-white-60: rgba(255, 255, 255, 0.62); --sf-xb-white-30: rgba(255, 255, 255, 0.3); --sf-xb-white-12: rgba(255, 255, 255, 0.12); --sf-xb-shade: rgba(6, 13, 20, 0.62); --sf-xb-frosted: rgba(205, 234, 255, 0.16); --sf-xb-shadow: rgba(12, 24, 34, 0.16); --sf-xb-shadow-strong: rgba(0, 0, 0, 0.38); --sf-xb-shadow-hot: rgba(255, 210, 63, 0.5); --sf-xb-glow-warm: rgba(255, 140, 60, 0.42); --sf-xb-glow-cold: rgba(92, 194, 255, 0.35); --sf-xb-steam: rgba(255, 255, 255, 0.82); --sf-xb-nav-glass: rgba(6, 13, 20, 0.8); --sf-xb-fs-hero: clamp(2.5rem, 6.6cqi, 5.4rem); --sf-xb-fs-h2: clamp(1.9rem, 4.4cqi, 3.2rem); --sf-xb-fs-lead: clamp(1.05rem, 1.6cqi, 1.25rem); --sf-xb-lab-panel: #111f2e; --sf-xb-lab-line: rgba(150, 180, 210, 0.18); --sf-xb-lab-text: #c3cfdb; --sf-xb-lab-muted: #8a9bad; --sf-xb-lab-glass: rgba(11, 22, 34, 0.78); --sf-xb-lab-glow: rgba(127, 211, 255, 0.08); --sf-xb-scan: #7fd3ff; --sf-xb-heat: #ff7a29; --sf-xb-air: #dff4ff; --sf-xb-film: #78e8ff; --sf-xb-ironbow: linear-gradient( 90deg, #0a0a2a, #2b1a7a 20%, #8a1f9a 40%, #d6304a 55%, #f26b1d 70%, #f9c22e 85%, #fffbe0 ); --sf-xb-fs-h3: clamp(1.6rem, 3.2cqi, 2.4rem); --sf-xb-fs-lab-title: clamp(1.45rem, 2.4cqi, 2rem); --sf-xb-fs-readout: clamp(1.6rem, 3.4cqi, 2.4rem); }
.sf-embed-root { --sf-emb-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif; --sf-emb-blue: var(--sf-blue); --sf-emb-blue-deep: #025e91; --sf-emb-blue-bright: #0496e6; --sf-emb-ink: #2b3036; --sf-emb-fg: #5f6368; --sf-emb-mute: #8a9098; --sf-emb-line: #dadae5; --sf-emb-panel: #f3f3f6; --sf-emb-tint: #eef5fa; --sf-emb-tint-line: #cfe1ee; --sf-emb-tile: #dfe9f0; --sf-emb-tile-band: rgba(3, 117, 180, 0.88); --sf-emb-logo-veil: rgba(60, 64, 68, 0.62); --sf-emb-logo-plate: #3c4044; --sf-emb-popular-veil: rgba(255, 255, 255, 0.86); --sf-emb-on-blue-soft: rgba(255, 255, 255, 0.85); --sf-emb-scroll-shade: rgba(43, 48, 54, 0.22); --sf-emb-white-0: rgba(255, 255, 255, 0); --sf-emb-subcat-shade: #dcdbe0; --sf-emb-heading: var(--sf-emb-blue); --sf-emb-size-12: 12px; --sf-emb-size-13: 13px; --sf-emb-size-14: 14px; --sf-emb-size-15: 15px; --sf-emb-size-16: 16px; --sf-emb-size-17: 17px; --sf-emb-size-19: 19px; --sf-emb-size-21: 21px; --sf-emb-size-22: 22px; --sf-emb-size-24: 24px; --sf-emb-size-25: 25px; --sf-emb-size-26: 26px; --sf-emb-size-28: 28px; --sf-emb-size-32: 32px; }
.sf-embed-root { --sf-kb3-blue: var(--sf-emb-blue); --sf-kb3-cta: var(--sf-emb-blue-bright); --sf-kb3-buy: #6a9e06; --sf-kb3-ink: var(--sf-emb-ink); --sf-kb3-fg: var(--sf-emb-fg); --sf-kb3-mute: var(--sf-emb-mute); --sf-kb3-line: var(--sf-emb-line); --sf-kb3-line-hover: #b9c3cf; --sf-kb3-panel: var(--sf-emb-panel); --sf-kb3-soft: #f7f8fa; --sf-kb3-bg: #ffffff; --sf-kb3-on-dark: #ffffff; --sf-kb3-tint: var(--sf-emb-tint); --sf-kb3-tint-line: var(--sf-emb-tint-line); --sf-kb3-warn-bg: #fdf6ea; --sf-kb3-warn-line: #f0ddb4; --sf-kb3-warn-ink: #8a5d0c; --sf-kb3-night: #0f161d; --sf-kb3-night-deep: #05080b; --sf-kb3-night-line: #2b3946; --sf-kb3-night-fg: #dfe6ec; --sf-kb3-night-mut: #93a1ad; --sf-kb3-beam: #ffe9a8; --sf-kb3-beam-hover: #fff3c9; --sf-kb3-beam-ink: #2a2410; --sf-kb3-hero-bg: #1d2a36; --sf-kb3-hero-facts: #cfd8e0; --sf-kb3-hero-veil: linear-gradient( 90deg, rgba(9, 16, 24, 0.82) 0%, rgba(9, 16, 24, 0.55) 45%, rgba(9, 16, 24, 0) 75% ); --sf-kb3-hero-veil-schmal: linear-gradient( 0deg, rgba(9, 16, 24, 0.88) 0%, rgba(9, 16, 24, 0.6) 50%, rgba(9, 16, 24, 0.1) 85% ); --sf-kb3-shadow-opt: 0 2px 8px rgba(3, 117, 180, 0.12); --sf-kb3-shadow-card: 0 6px 18px rgba(20, 24, 28, 0.08); --sf-kb3-size-11: 11px; --sf-kb3-size-20: 20px; --sf-kb3-size-34: 34px; --sf-kb3-red: #d02b2b; --sf-kb3-red-d: #a81f1f; --sf-kb3-red-bg: #fff6f6; --sf-kb3-size-40: 40px; --sf-kb3-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --sf-kb3-ok-bg: #f3f8ea; --sf-kb3-ok-line: #d8e8bb; --sf-kb3-scrim: rgba(20, 24, 28, 0.5); --sf-kb3-shadow-dlg: 0 20px 50px rgba(0, 0, 0, 0.25); --sf-kb3-shadow-bar: 0 -6px 20px rgba(20, 24, 28, 0.12); --sf-kb3-z-schicht: 10000; --sf-kb3-shop-leiste: 70px; --sf-kb3-shop-knopf: 116px; --sf-kb3-night-2: #18222c; --sf-kb3-night-side: #0c1218; --sf-kb3-lk-spur: #223040; --sf-kb3-lk-fuell: linear-gradient(90deg, #6c7a86, #c9d3db); --sf-kb3-lk-strich: #3a4856; --sf-kb3-lk-achse: #43525f; --sf-kb3-lk-tag: rgba(5, 8, 11, 0.7); --sf-kb3-lk-leer: repeating-linear-gradient(135deg, #0a0f14 0 10px, #0d1319 10px 20px); --sf-kb3-gel-himmel: #e6f0f7; --sf-kb3-gel-berg: #cfe1ee; --sf-kb3-gel-gras: #9fbf6a; --sf-kb3-gel-erde: #b9a58a; --sf-kb3-gel-erde-d: #8f7a5e; --sf-kb3-gel-weg: #d9cdb9; --sf-kb3-gel-stein: #8d96a0; --sf-kb3-gel-fels: #6b747e; --sf-kb3-gel-schnee: #ffffff; --sf-kb3-gel-eis: #a9d3ec; --sf-kb3-gel-bein: #c7cdd4; --sf-kb3-gel-schuh: #3b4651; --sf-kb3-gel-kragen: #55616d; --sf-kb3-gel-sohle: #1f2429; }
.sf-embed-root { --sf-mm-font: var(--sf-emb-font); --sf-mm-blue: var(--sf-emb-blue); --sf-mm-cta: var(--sf-emb-blue-bright); --sf-mm-buy: var(--sf-kb3-buy); --sf-mm-buy-d: #5a8705; --sf-mm-red: var(--sf-kb3-red); --sf-mm-red-d: var(--sf-kb3-red-d); --sf-mm-red-bg: var(--sf-kb3-red-bg); --sf-mm-ink: var(--sf-emb-ink); --sf-mm-fg: var(--sf-emb-fg); --sf-mm-mute: var(--sf-emb-mute); --sf-mm-line: var(--sf-emb-line); --sf-mm-field-line: #c9ccd6; --sf-mm-radio-line: #b7bdc6; --sf-mm-panel: var(--sf-emb-panel); --sf-mm-soft: #f7f8fa; --sf-mm-bg: #ffffff; --sf-mm-on-dark: #ffffff; --sf-mm-tint: var(--sf-emb-tint); --sf-mm-tint-line: var(--sf-emb-tint-line); --sf-mm-bar: #9fc3dc; --sf-mm-ok-bg: #f2f8e8; --sf-mm-ok-line: #cfe3ad; --sf-mm-ok-ink: #4c7a04; --sf-mm-warn-bg: var(--sf-kb3-warn-bg); --sf-mm-warn-line: var(--sf-kb3-warn-line); --sf-mm-warn-ink: var(--sf-kb3-warn-ink); --sf-mm-err-bg: #fdf0f0; --sf-mm-err-line: #f1c4c4; --sf-mm-err-ink: #8f1f1f; --sf-mm-shadow-opt: 0 2px 8px rgba(3, 117, 180, 0.12); --sf-mm-focus-ring: 0 0 0 2px rgba(3, 117, 180, 0.18); --sf-mm-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --sf-mm-size-11: 11px; --sf-mm-size-12: 12px; --sf-mm-size-13: 13px; --sf-mm-size-14: 14px; --sf-mm-size-15: 15px; --sf-mm-size-16: 16px; --sf-mm-size-18: 18px; --sf-mm-size-19: 19px; --sf-mm-size-21: 21px; --sf-mm-size-22: 22px; --sf-mm-size-24: 24px; --sf-mm-size-28: 28px; --sf-mm-size-30: 30px; --sf-mm-size-42: 42px; }
.sf-embed-root { --sf-tc-plus: #5f9608; --sf-tc-minus: #cc1236; --sf-tc-mark-ink: #fff; --sf-tc-card-shadow: 0 1px 4px rgba(16, 24, 32, 0.08); }
.sf-embed-root { --sf-emb-fit-yes: #f2f7ea; --sf-emb-fit-yes-line: #cfe2b4; --sf-emb-fit-no: #fbeef1; --sf-emb-fit-no-line: #efc6cf; }
.sf-embed-root { --sf-hm-s1: 4px; --sf-hm-s2: 8px; --sf-hm-s3: 12px; --sf-hm-s4: 16px; --sf-hm-s5: 24px; --sf-hm-s6: 32px; --sf-hm-s7: 48px; --sf-hm-winter: #1f4f73; --sf-hm-kamm: #7d8a6a; --sf-hm-vermerk-grund: rgba(0, 0, 0, 0.45); --sf-hm-karte-land: 30px; --sf-hm-karte-stadt: 26px; --sf-hm-karte-name: 20px; --sf-hm-karte-zahl: 12px; --sf-hm-karte-land-desktop: 19px; --sf-hm-karte-stadt-desktop: 17px; --sf-hm-abschnitt: clamp(32px, 4vw, 48px); --sf-hm-kopf-abstand: clamp(12px, 1.4vw, 16px); --sf-hm-live-gruen: #1f8a4c; --sf-hm-live-gruen-text: #1a7a44; --sf-hm-live-ring: rgba(31, 138, 76, 0.18); --sf-hm-passt: #176b58; --sf-hm-passt-tint: #e6f2ec; --sf-hm-geht: #8a5d00; --sf-hm-geht-tint: #f8efd9; --sf-hm-nicht: #9b2c2c; --sf-hm-nicht-tint: #f8e7e7; --sf-hm-kopf-schleier: linear-gradient( 180deg, rgba(10, 14, 20, 0.1) 0%, rgba(10, 14, 20, 0.45) 40%, rgba(10, 14, 20, 0.85) 100% ); --sf-hm-text-schatten: 0 1px 8px rgba(0, 0, 0, 0.45); --sf-hm-glas: rgba(255, 255, 255, 0.16); --sf-hm-glas-rand: rgba(255, 255, 255, 0.32); --sf-hm-nav-grund: rgba(255, 255, 255, 0.95); --sf-gl-schatten: 0 6px 16px rgba(0, 0, 0, 0.08); --sf-hm-hinweis-grund: rgba(0, 0, 0, 0.45); }
.sf-embed-root { --sf-hm-kopf-zeile: 72px; --sf-hm-kopf-zeile-mitte: 60px; --sf-hm-kopf-navzeile: 44px; --sf-hm-kopf-nav-abstand: 26px; --sf-hm-kopf-werkzeug: 40px; --sf-hm-kopf-suche-offen: 280px; }
.sf-embed-root { --sf-hb-ecke: 0px; --sf-hs-schlagzeile: clamp(28px, 4.2vw, 56px); --sf-hs-einstieg-titel: clamp(38px, 5vw, 72px); --sf-hs-einstieg-knopf: 22px; --sf-hs-einstieg-knopf-breit: 26px; --sf-hs-zahl: clamp(26px, 2.6vw, 36px); --sf-hb-titel-gewicht: 800; --sf-hb-titel-zeile: 1.05; --sf-hb-h2: clamp(28px, 3.4vw, 40px); --sf-hb-h3: 22px; --sf-hb-zahl: clamp(28px, 4vw, 40px); --sf-hb-zahl-klein: 22px; --sf-hb-text: 16px; --sf-hb-text-klein: 14px; --sf-hb-fein: 13px; --sf-hb-mini: 11px; --sf-hb-kapitel: 12px; --sf-hb-steuer-hoehe: 44px; --sf-hb-knopf-hoehe: 44px; --sf-hb-steuer-schrift: 14px; --sf-hb-live-punkt: 8px; --sf-hb-bild: 16 / 9; --sf-hb-buehne-grund: #2c3134; --sf-hb-schleier-oben: rgba(10, 14, 16, 0.72); --sf-hb-schleier-mitte: rgba(10, 14, 16, 0.45); --sf-hb-schleier-unten: rgba(10, 14, 16, 0.8); --sf-hb-vermerk-grund: rgba(10, 14, 16, 0.72); --sf-hb-hell-spur: rgba(255, 255, 255, 0.3); --sf-hb-hell-linie: rgba(255, 255, 255, 0.5); --sf-hb-hell-flaeche: rgba(255, 255, 255, 0.12); --sf-hb-hell-text: rgba(255, 255, 255, 0.86); --sf-hb-relief-grund: #eef0ec; --sf-hb-bildkopf-hoehe: 72svh; --sf-hb-bildkopf-hoehe-breit: 64svh; --sf-hb-bildkopf-titel: clamp(46px, 9vw, 104px); --sf-hb-bildkopf-titel-halb: clamp(46px, 6vw, 84px); --sf-hb-bildkopf-unter: 17px; --sf-hb-bildkopf-unter-breit: 20px; --sf-hb-bildkopf-kachel: 20px; --sf-hb-bildkopf-kachel-breit: 36px; --sf-hb-bildkopf-kachel-halb: 24px; --sf-hb-bildkopf-karte: 20px; --sf-hb-bildkopf-karte-breit: 26px; --sf-hb-bildkopf-karte-bild: 64px; --sf-hb-bildkopf-karte-bild-breit: 88px; --sf-hb-bildkopf-karte-grund: rgba(10, 14, 16, 0.42); --sf-hb-bildkopf-karte-grund-hover: rgba(10, 14, 16, 0.6); --sf-rk-berater-bild: 56px; --sf-kbs-licht: #fff3c2; --sf-kbs-blau-hell: #7cc4ef; --sf-kbs-blau-zart: #edf5fa; --sf-sgl-h1: clamp(34px, 4.2vw, 56px); --sf-sgl-unter: 17px; --sf-hmv-bild: 56px; --sf-hmv-bild-breit: 64px; --sf-hmv-symbol-klein: 44px; --sf-hmv-symbol-grund: #f1ece4; --sf-hb-schleier-null: rgba(10, 14, 16, 0); --sf-hb-schleier-leicht: rgba(10, 14, 16, 0.18); --sf-hb-schleier-tief: rgba(10, 14, 16, 0.9); }
.sf-embed-root { --sf-hb-titel-schrift: var(--sf-body); --sf-hb-seitentitel-schrift: var(--sf-display); --sf-hb-seitentitel-gewicht: 800; --sf-hb-seitentitel-zeile: 1; --sf-hb-zahl-schrift: var(--sf-display); --sf-hb-zahl-gewicht: 800; --sf-hb-titel-gewicht: 700; --sf-hb-titel-zeile: 1.2; --sf-hb-h2: 24px; --sf-hb-h3: 18px; --sf-sgl-h1: 32px; --sf-sgl-unter: 16px; --sf-hb-zahl: 28px; --sf-hb-zahl-klein: 20px; --sf-hb-bildkopf-hoehe: 480px; --sf-hb-bildkopf-hoehe-breit: 520px; --sf-hb-bildkopf-titel: 40px; --sf-hb-bildkopf-titel-halb: 40px; --sf-hs-einstieg-titel: 34px; --sf-hs-einstieg-knopf: 18px; --sf-hs-einstieg-knopf-breit: 20px; --sf-hb-bildkopf-karte: 17px; --sf-hb-bildkopf-karte-breit: 20px; --sf-st-motive-h1: 44px; --sf-st-motive-h1-breit: 72px; --sf-str-zeichen-breite: 0.58; }
.sf-embed-root { --sf-sr-schnee: #0375b4; --sf-sr-schnee-hell: #bcdcf0; --sf-sr-fels: #d9d2c5; --sf-sr-papier: #f4efe5; --sf-sr-h1: clamp(36px, 6vw, 60px); --sf-sr-antwort: clamp(19px, 2.2vw, 24px); --sf-ro-schlagzeile: clamp(24px, 2.6vw, 32px); --sf-ro-cm: 18px; --sf-ro-cm-breit: 22px; --sf-ro-summe: 28px; --sf-swo-nacht: #14212b; --sf-swo-nacht-text: rgba(255, 255, 255, 0.9); --sf-swo-nacht-leise: rgba(255, 255, 255, 0.72); --sf-swo-pin-ring: rgba(255, 255, 255, 0.6); --sf-swo-hinweis-grund: rgba(20, 33, 43, 0.86); --sf-swo-gewaehlt-akzent: #f0b69c; --sf-swo-schnee: #eef4f8; --sf-swo-saeule-rand: #b9c7d2; --sf-swo-h1: clamp(40px, 5.4vw, 76px); --sf-swo-aussage: clamp(17px, 1.5vw, 20px); --sf-swo-h3: clamp(26px, 2.5vw, 34px); --sf-swo-satz: 17px; --sf-swo-wert: clamp(34px, 3.4vw, 44px); --sf-swo-station-name: 20px; --sf-swo-moment-titel: 20px; --sf-swo-pin: 32px; --sf-swo-pin-zahl: 17px; --sf-swo-saeule-hoch: 120px; --sf-rb-grenze: rgba(255, 255, 255, 0.42); --sf-rb-grenze-linie: rgba(255, 255, 255, 0.85); --sf-rb-regen: #3a6fd0; --sf-rb-schnee-1: #e3f0fb; --sf-rb-schnee-2: #a9d1f1; --sf-rb-schnee-3: #5ea4e0; --sf-rb-schnee-4: #2a6fb8; --sf-rb-schnee-linie: #4f93cf; --sf-rb-legende-grund: rgba(255, 255, 255, 0.92); }
.sf-embed-root { --sf-sr-h1: 28px; --sf-sr-antwort: 18px; --sf-ro-schlagzeile: 24px; --sf-swo-h1: 36px; --sf-swo-h3: 26px; --sf-swo-wert: 34px; }
.sf-embed-root { --sf-bw-gipfel: #e9f3fa; --sf-bw-sonne: #f2b630; --sf-bw-nebel: #c9ccd1; --sf-bw-tal: #9aa1a8; --sf-bw-berg: #7d8790; --sf-bw-himmel: #eef6fb; --sf-bw-art: clamp(26px, 3.2vw, 34px); --sf-bw-cm: clamp(40px, 6vw, 60px); --sf-bw-rang: 24px; }
.sf-embed-root { --sf-bw-art: 26px; --sf-bw-cm: 40px; }
.sf-embed-root { --sf-ab-titel-karte: 18px; --sf-ab-titel-karte-breit: 21px; --sf-ab-titel-absicht: 20px; --sf-ab-titel-absicht-breit: 26px; --sf-ab-titel-regal: 28px; --sf-ab-titel-regal-breit: 38px; }
.sf-embed-root { --sf-zz-signal: var(--sf-blue, #0375b4); --sf-zz-signal-text: #6cc4f0; --sf-zz-signal-tinte: #ffffff; --sf-zz-tafel-grund: #072a46; --sf-zz-tafel-linie: rgba(108, 196, 240, 0.35); --sf-zz-schleier: linear-gradient( 180deg, rgba(7, 42, 70, 0.25) 0%, rgba(7, 42, 70, 0.55) 45%, rgba(7, 42, 70, 0.92) 100% ); --sf-zz-kopf-titel: clamp(30px, 4.6vw, 56px); --sf-ss-titel: clamp(32px, 5vw, 56px); --sf-ss-datum-zahl: 26px; --sf-ss-datum-breite: 60px; --sf-ss-bald: var(--sf-blue, #0375b4); --sf-ss-gletscher: var(--sf-hm-winter, #1f4f73); --sf-ss-gletscher-grund: #e6eef5; --sf-zz-tafel-zahl: clamp(20px, 2.4vw, 28px); --sf-zz-motiv-marke: clamp(15px, 10cqi, 28px); --sf-zz-motiv-uhr: clamp(34px, 20cqi, 64px); --sf-zz-k-weltcup: var(--sf-travel, #a84b27); --sf-zz-k-comeback: var(--sf-hm-live-gruen, #1f8a4c); --sf-zz-k-ausfall: var(--sf-error, #b3261e); --sf-zz-k-gebiete: var(--sf-blue, #0375b4); --sf-zz-k-club: var(--sf-club, #7143a6); --sf-zz-k-text: #ffffff; --sf-erg-grund: #17322c; --sf-erg-text: #f7f4e9; --sf-erg-akzent: #c8ec78; --sf-erg-linie-blau: #bce2f4; --sf-erg-linie-orange: #f8c8a9; --sf-erg-trenner: #75917d; --sf-erg-text-leise: #e4eadf; --sf-erg-muted: #5e6b62; --sf-erg-flaeche: #f1f2e9; --sf-erg-kante: #668356; --sf-erg-linie: #b4beb3; --sf-fp-vermerk-grund: rgb(0 0 0 / 0.72); --sf-fp-preis-ring: rgba(255, 255, 255, 0.18); --sf-fp-preis-flaeche: rgba(255, 255, 255, 0.08); --sf-fp-preis-kante: rgba(255, 255, 255, 0.3); --sf-fp-ziffer: 15px; --sf-fp-gewinn-innen: 3px 6px 2px; --sf-fp-bl-zeile: 7px 0; --sf-fp-du-innen: 1px 5px; --sf-wa-plus: 24px; }
.sf-embed-root { --sf-ss-nacht: #0b0f14; --sf-ss-glas: rgba(10, 14, 20, 0.88); --sf-ss-rot-hell: #ff8a80; --sf-ss-gruen: #2bb673; --sf-ss-schatten: rgba(0, 0, 0, 0.3); --sf-ss-weiss: #fff; --sf-ss-linie-fein: rgba(255, 255, 255, 0.14); --sf-ss-linie-zart: rgba(255, 255, 255, 0.1); --sf-ss-flaeche: rgba(255, 255, 255, 0.04); --sf-ss-hud: rgba(255, 255, 255, 0.85); --sf-ss-schnee: #f4f7fb; --sf-ss-schnee-tief: #dfe7f0; --sf-ss-spur: #c9d4e2; --sf-ss-netz: #e0484f; --sf-ss-tor-rot: #d0303a; --sf-ss-tor-blau: #2563a8; --sf-ss-stock: #7b8189; }
.sf-embed-root { --sf-size-live-ad-title: clamp(18px, 1.8vw, 22px); }
.sf-embed-root { --sf-ms-buehne: #1b2124; --sf-ms-buehne-2: #263034; --sf-ms-buehne-text: #f3f5f4; --sf-ms-buehne-leise: rgba(243, 245, 244, 0.64); --sf-ms-buehne-linie: rgba(243, 245, 244, 0.2); --sf-ms-buehne-flaeche: rgba(243, 245, 244, 0.08); --sf-ms-buehne-schleier: rgba(18, 23, 25, 0.78); --sf-ms-papier: #f5f3ee; --sf-ms-papier-linie: #ddd8cc; --sf-ms-tinte: #15191b; --sf-ms-leise: #5a6360; --sf-ms-akzent: #2a7168; --sf-ms-akzent-hell: #e3efec; --sf-ms-gold: #d9a441; --sf-ms-gold-hell: rgba(217, 164, 65, 0.18); --sf-ms-ton-1: #cbb89a; --sf-ms-ton-2: #8ea79f; --sf-ms-ton-3: #d4955a; --sf-ms-ton-4: #2f7d74; --sf-ms-ton-5: #55657d; --sf-ms-gewebe: rgba(255, 255, 255, 0.1); --sf-ms-gewebe-tief: rgba(0, 0, 0, 0.14); --sf-ms-membran: rgba(233, 240, 238, 0.34); --sf-ms-membran-pore: rgba(255, 255, 255, 0.55); --sf-ms-innen: #eae6dc; --sf-ms-innen-naht: rgba(80, 70, 50, 0.16); --sf-ms-schatten: rgba(0, 0, 0, 0.45); --sf-ms-bild-schatten: rgba(10, 14, 16, 0.55); --sf-ms-fs-titel: clamp(40px, 7cqi, 88px); --sf-ms-fs-hoehe: clamp(30px, 4.4cqi, 56px); --sf-ms-fs-station: clamp(26px, 3.4cqi, 40px); --sf-ms-fs-name: clamp(64px, 13cqi, 168px); --sf-ms-fs-name-klein: clamp(34px, 4.6cqi, 52px); --sf-ms-fs-initial: clamp(96px, 14cqi, 180px); --sf-ms-fs-serie: clamp(30px, 4cqi, 46px); --sf-ms-fs-buehne: clamp(24px, 3.4cqi, 40px); }
.sf-embed-root { --sf-bsy-nacht: #0d1218; --sf-bsy-nacht-2: #17202a; --sf-bsy-nacht-3: #0b0f14; --sf-bsy-schnee: #f3f6f8; --sf-bsy-grau: #a9b6c2; --sf-bsy-eis: #7cc4ec; --sf-bsy-signal: #ff5a4e; --sf-bsy-linie: rgba(255, 255, 255, 0.1); --sf-bsy-balken-grund: rgba(255, 255, 255, 0.08); --sf-bsy-nachweis: rgba(255, 255, 255, 0.7); --sf-bsy-schatten: rgba(0, 0, 0, 0.55); --sf-bsy-schleier-0: rgba(13, 18, 24, 0); --sf-bsy-schleier-1: rgba(13, 18, 24, 0.85); --sf-bsy-hell: #e9eef2; --sf-bsy-hell-tinte: #10161d; --sf-bsy-hell-text: #2b3743; --sf-bsy-blau: #1f6fb2; --sf-bsy-produkt-leise: #4b5866; --sf-bsy-fs-kopf: clamp(56px, 16cqi, 120px); --sf-bsy-fs-titel: clamp(36px, 10cqi, 68px); --sf-bsy-fs-titel-klein: clamp(30px, 8.2cqi, 48px); --sf-bsy-fs-zahl: clamp(104px, 34cqi, 220px); --sf-bsy-fs-einheit: clamp(38px, 11cqi, 72px); --sf-bsy-fs-bildzahl: clamp(76px, 24.6cqi, 150px); --sf-bsy-fs-text: clamp(17px, 4.6cqi, 21px); --sf-bsy-fs-platz: 18px; --sf-bsy-fs-wert: 34px; --sf-bsy-fs-marke: 17px; --sf-bsy-fs-weg: 22px; --sf-bsy-fs-partner: 18px; --sf-bsy-fs-partner-titel: clamp(28px, 7.6cqi, 40px); --sf-bsy-b-nacht: #07090c; --sf-bsy-b-schnee: #f2f5f9; --sf-bsy-b-grau: #9aa4b1; --sf-bsy-b-leise: rgba(242, 245, 249, 0.62); --sf-bsy-b-hauch: rgba(242, 245, 249, 0.14); --sf-bsy-b-tafelgrund: rgba(11, 15, 20, 0.84); --sf-bsy-b-eis: #a9bccd; --sf-bsy-b-tinte: #12161c; --sf-bsy-b-rot: #e0313a; --sf-bsy-b-hellrot: #ff5a4e; --sf-bsy-b-gelb: #ffd23f; --sf-bsy-b-gruen: #34d07a; --sf-bsy-b-gruen-tinte: #04130a; --sf-bsy-b-blau: #3b9fe0; --sf-bsy-b-sf: #0375b4; --sf-bsy-b-linie: #d5dbe3; --sf-bsy-b-text-hell: #3d4652; --sf-bsy-b-text-leise: #556070; --sf-bsy-b-weiss: #fff; --sf-bsy-b-nacht-0: rgba(7, 9, 12, 0); --sf-bsy-b-nacht-40: rgba(7, 9, 12, 0.4); --sf-bsy-b-nacht-45: rgba(7, 9, 12, 0.45); --sf-bsy-b-nacht-55: rgba(7, 9, 12, 0.55); --sf-bsy-b-nacht-60: rgba(7, 9, 12, 0.6); --sf-bsy-b-nacht-72: rgba(7, 9, 12, 0.72); --sf-bsy-b-nacht-82: rgba(7, 9, 12, 0.82); --sf-bsy-b-nacht-86: rgba(7, 9, 12, 0.86); --sf-bsy-b-schatten: rgba(0, 0, 0, 0.35); --sf-bsy-b-schnee-80: rgba(255, 255, 255, 0.8); --sf-bsy-b-schnee-0: rgba(255, 255, 255, 0); --sf-bsy-b-schnee-6: rgba(255, 255, 255, 0.06); --sf-bsy-b-schnee-7: rgba(255, 255, 255, 0.07); --sf-bsy-b-nachweis: rgba(242, 245, 249, 0.66); --sf-bsy-b-schnee-28: rgba(242, 245, 249, 0.28); --sf-bsy-b-schnee-86: rgba(242, 245, 249, 0.86); --sf-bsy-b-schnee-92: rgba(242, 245, 249, 0.92); --sf-bsy-b-nebel-0: rgba(205, 213, 222, 0); --sf-bsy-b-nebel-55: rgba(205, 213, 222, 0.55); --sf-bsy-b-himmel: #8fa8c2; --sf-bsy-b-gelb-16: rgba(255, 210, 63, 0.16); --sf-bsy-b-tafel-mitte: rgba(6, 8, 11, 0.25); --sf-bsy-b-tafel-rand: rgba(6, 8, 11, 0.88); --sf-bsy-b-fs-10: 10px; --sf-bsy-b-fs-11: 11px; --sf-bsy-b-fs-12: 12px; --sf-bsy-b-fs-13: 13px; --sf-bsy-b-fs-15: 15px; --sf-bsy-b-fs-16: 16px; --sf-bsy-b-fs-17: 17px; --sf-bsy-b-fs-18: 18px; --sf-bsy-b-fs-19: 19px; --sf-bsy-b-fs-20: 20px; --sf-bsy-b-fs-22: 22px; --sf-bsy-b-fs-26: 26px; --sf-bsy-b-fs-28: 28px; --sf-bsy-b-fs-30: 30px; --sf-bsy-b-fs-44: 44px; --sf-bsy-b-fs-46: 46px; --sf-bsy-b-fs-danach-titel: clamp(36px, 9cqi, 64px); --sf-bsy-b-fs-danach-titel-breit: clamp(40px, 5cqi, 64px); --sf-bsy-b-fs-gross: clamp(44px, 13cqi, 120px); --sf-bsy-b-fs-mittel: clamp(30px, 8.4cqi, 64px); --sf-bsy-b-fs-riesig: clamp(64px, 21cqi, 200px); --sf-bsy-b-fs-satz: clamp(18px, 4.8cqi, 26px); --sf-bsy-b-fs-schluss: clamp(48px, 13cqi, 104px); --sf-bsy-b-fs-termin: clamp(30px, 8cqi, 54px); --sf-bsy-b-fs-termin-klein: clamp(16px, 4.2cqi, 24px); --sf-bsy-b-fs-titeltext: clamp(17px, 4.4cqi, 22px); --sf-bsy-b-fs-14: 14px; --sf-bsy-b-fs-buehnentitel: clamp(44px, 14cqi, 120px); --sf-bsy-b-fs-einstieg-titel: clamp(40px, 10.5cqi, 84px); --sf-bsy-b-fs-einstieg-teaser: clamp(18px, 4.6cqi, 22px); --sf-bsy-b-papier: #fff; --sf-bsy-b-papier-2: #f2f5f9; --sf-bsy-b-text-mittel: #2b3743; }
/* styles.css */
.sf-dynamik *, .sf-dynamik *::before, .sf-dynamik *::after { box-sizing: border-box; }
.sf-dynamik a { color: inherit; text-decoration: none; }
.sf-dynamik button, .sf-dynamik select, .sf-dynamik input { font: inherit; color: inherit; }
.sf-dynamik button, .sf-dynamik select { cursor: pointer; }
.sf-dynamik button { border: 0; }
.sf-dynamik img { max-width: 100%; }
.sf-dynamik h1, .sf-dynamik h2, .sf-dynamik h3 { font-family: var(--sf-display); font-weight: var(--sf-heading-weight); line-height: var(--sf-heading-leading); text-transform: var(--sf-heading-case); margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.sf-dynamik h1, .sf-dynamik .sf-stage-title { font-size: var(--sf-title); letter-spacing: -0.018em; }
.sf-dynamik h2 { font-size: var(--sf-section-title); }
.sf-dynamik h3 { font-size: var(--sf-card-title); }
.sf-dynamik p { margin: 0; }
.sf-dynamik :focus-visible { outline: 2px solid var(--sf-section-accent, var(--sf-blue)); outline-offset: 2px; }
.sf-dynamik .sf-hero-copy :focus-visible { outline-color: white; }
.sf-dynamik h1:focus, .sf-dynamik h2[tabindex]:focus { outline: none; }
.sf-container { width: min(var(--sf-content), calc(100% - var(--sf-gutter) * 2)); margin-inline: auto; }
.sf-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sf-skip { position: fixed; left: 16px; top: -100px; z-index: 20; background: white; padding: 14px; }
.sf-skip:focus { top: 12px; }
.sf-header { border-bottom: 1px solid var(--sf-line); background: white; }
.sf-header-row { display: flex; align-items: center; min-height: 100px; gap: 24px; }
.sf-brand { display: flex; flex: 0 0 194px; }
.sf-brand img { width: 194px; height: auto; }
.sf-brand-label { font-size: var(--sf-size-10); line-height: 1.2; max-width: 60px; text-transform: var(--sf-label-case); letter-spacing: 0.1em; padding-left: 18px; border-left: 1px solid var(--sf-line); }
.sf-desktop-nav { display: flex; margin-left: auto; align-items: center; gap: 24px; font-size: var(--sf-size-13); font-weight: 650; white-space: nowrap; }
.sf-desktop-nav a { padding-block: 36px; border-bottom: 3px solid transparent; }
.sf-desktop-nav a:hover, .sf-desktop-nav a[aria-current] { color: var(--sf-blue); border-bottom-color: var(--sf-blue); }
.sf-header-tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sf-locale select { border: 0; background: white; font-size: var(--sf-size-11); width: 77px; height: 44px; }
.sf-icon-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 8px; background: transparent; }
.sf-icon-button:hover, .sf-icon-button[aria-pressed="true"] { color: var(--sf-blue); background: var(--sf-surface); }
.sf-saved-trigger { position: relative; }
.sf-saved-trigger > span { position: absolute; top: 1px; right: 0; background: var(--sf-blue); color: white; border-radius: 50%; padding: 0 4px; min-width: 16px; font-size: var(--sf-size-10); }
.sf-shop-link { display: flex; gap: 6px; align-items: center; color: var(--sf-blue) !important; font-size: var(--sf-size-12); font-weight: 700; white-space: nowrap; }
.sf-menu-trigger { display: none; }
.sf-action { display: inline-flex; justify-content: space-between; align-items: center; gap: 28px; background: var(--sf-blue); color: white !important; padding: 14px 20px; min-height: 50px; font-size: var(--sf-size-13); font-weight: 750; width: fit-content; border-radius: var(--sf-radius); transition: background var(--sf-motion); }
.sf-action:hover { background: var(--sf-blue-hover); }
.sf-action--inverse { background: white; color: var(--sf-ink) !important; }
.sf-action--inverse:hover { background: var(--sf-tint-sky-100); }
.sf-eyebrow { color: var(--sf-blue); text-transform: var(--sf-label-case); font-size: var(--sf-size-11); font-weight: 800; letter-spacing: 0.12em; line-height: 1.5; }
.sf-home-hero { display: grid; grid-template-columns: 0.95fr 1.25fr; padding-top: 24px; }
.sf-hero-copy { display: flex; align-items: flex-start; flex-direction: column; justify-content: center; padding: clamp(28px, 3.3vw, 48px); background: var(--sf-blue); color: white; min-width: 0; }
.sf-hero-copy .sf-eyebrow { color: white; margin-bottom: 20px; }
.sf-hero-copy :is(h1, .sf-stage-title) { font-size: calc(clamp(62px, 6.7vw, 98px) * var(--sf-display-scale)); line-height: 0.93; text-wrap: initial; }
.sf-hero-copy > p:not(.sf-eyebrow) { font-size: var(--sf-size-15); line-height: 1.5; margin: 23px 0 28px; max-width: 34ch; }
.sf-hero-visual { display: block; position: relative; min-height: 570px; overflow: hidden; background: var(--sf-surface); }
.sf-hero-visual > img { width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: 48% center; transition: transform 450ms; }
.sf-hero-visual:hover > img { transform: scale(1.025); }
.sf-hero-caption { position: absolute; inset: auto 0 0; padding: 64px 28px 28px; color: white; background: linear-gradient(transparent, var(--sf-overlay-73)); display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.sf-hero-caption span { grid-column: 1/-1; text-transform: var(--sf-label-case); letter-spacing: 0.08em; font-size: var(--sf-size-11); }
.sf-hero-caption h2 { font-size: calc(32px * var(--sf-display-scale)); max-width: 20ch; text-align: left; text-wrap: initial; }
.sf-hero-caption svg { align-self: end; }
.sf-section { margin-block: var(--sf-section); }
.sf-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.sf-section-heading h2 { max-width: 22ch; }
.sf-section-heading > a { display: inline-flex; gap: 14px; align-items: center; color: var(--sf-blue); font-size: var(--sf-size-13); font-weight: 700; min-height: 44px; padding-block: 8px; flex-shrink: 0; }
.sf-section-heading > p { max-width: 44ch; color: var(--sf-text); font-size: var(--sf-size-14); }
.sf-story-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-grid-gap); }
.sf-story-card { min-width: 0; display: flex; flex-direction: column; border-bottom: 1px solid var(--sf-line); }
.sf-card-main { display: block; flex: 1; }
.sf-card-media { overflow: hidden; background: var(--sf-surface); aspect-ratio: 1.5; }
.sf-story-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-card-media img { transition: transform 350ms; }
.sf-card-main:hover img { transform: scale(1.035); }
.sf-card-main:hover h3 { color: var(--sf-blue); }
.sf-card-body { padding-top: 17px; }
.sf-card-body .sf-eyebrow { margin-bottom: 9px; }
.sf-card-body h3 { max-width: 24ch; text-align: left; text-wrap: initial; }
.sf-card-body > p:last-child { color: var(--sf-text); font-size: var(--sf-size-14); margin-top: 11px; line-height: 1.6; }
.sf-card-bottom { display: flex; align-items: center; justify-content: space-between; padding-block: 9px; }
.sf-card-bottom > span { font-size: var(--sf-size-11); color: var(--sf-muted); }
.sf-card-bottom > div { display: flex; }
.sf-image-placeholder { width: 100%; height: 100%; min-height: 180px; background: var(--sf-surface); display: grid; place-items: center; color: var(--sf-blue); font: var(--sf-heading-weight) calc(48px * var(--sf-display-scale)) var(--sf-display); }
.sf-topic-section { border-top: 4px solid var(--sf-ink); padding-top: 26px; }
.sf-topic-section > .sf-eyebrow { margin-bottom: 16px; }
.sf-topic-index { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--sf-line); }
.sf-topic-index a { display: flex; gap: 20px; align-items: center; padding: 25px 20px; border-right: 1px solid var(--sf-line); }
.sf-topic-index a:first-child { padding-left: 0; }
.sf-topic-index a:last-child { border: 0; }
.sf-topic-index a > span { color: var(--sf-blue); font-size: var(--sf-size-12); }
.sf-topic-index strong { font: var(--sf-heading-weight) calc(32px * var(--sf-display-scale))/1 var(--sf-display); text-transform: var(--sf-label-case); }
.sf-topic-index svg { margin-left: auto; color: var(--sf-blue); }
.sf-topic-index a:hover strong { color: var(--sf-blue); }
.sf-ad { display: flex; align-items: center; justify-content: space-between; position: relative; gap: 24px; padding: 45px 32px 30px; background: var(--sf-surface); }
.sf-ad-label { position: absolute; top: 12px; left: 32px; color: var(--sf-muted); font-size: var(--sf-size-10); }
.sf-ad h2 { font-size: calc(37px * var(--sf-display-scale)); margin-bottom: 8px; }
.sf-ad p { font-size: var(--sf-size-14); color: var(--sf-text); }
.sf-ad .sf-action { flex-shrink: 0; }
.sf-collection-heading { padding-block: 48px 32px; max-width: 900px; }
.sf-collection-heading .sf-eyebrow { margin-bottom: 16px; }
.sf-collection-heading p:last-child { margin-top: 20px; color: var(--sf-text); max-width: 65ch; }
.sf-topic-nav { display: flex; gap: 8px; flex-wrap: wrap; padding-bottom: 24px; border-bottom: 2px solid var(--sf-ink); }
.sf-topic-nav a { padding: 11px 20px; font-size: var(--sf-size-13); font-weight: 650; border: 1px solid var(--sf-line); }
.sf-topic-nav a:hover, .sf-topic-nav a[aria-current] { background: var(--sf-blue); color: white; border-color: var(--sf-blue); }
.sf-results-toolbar { display: flex; justify-content: space-between; align-items: center; padding-block: 22px; font-size: var(--sf-size-12); }
.sf-results-toolbar label { display: flex; align-items: center; gap: 10px; }
.sf-results-toolbar select { border: 1px solid var(--sf-line); background: white; padding: 10px; }
.sf-collection-results { margin-bottom: var(--sf-section); }
.sf-promo-grid { display: grid; grid-template-columns: repeat(var(--sf-promo-cols, 3), minmax(0, 1fr)); gap: var(--sf-grid-gap); margin-top: 16px; }
.sf-promo-card { min-width: 0; }
.sf-promo-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sf-promo-card h3 { margin: 12px 0 6px; }
@media (max-width: 900px) {
.sf-promo-grid { grid-template-columns: repeat(min(var(--sf-promo-cols, 3), 2), minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.sf-promo-grid { grid-template-columns: minmax(0, 1fr); }
}
.sf-collection-results .sf-story-grid { row-gap: var(--sf-collection-row-gap); }
.sf-empty { padding: 52px 24px; text-align: center; background: var(--sf-surface); }
.sf-empty h2 { font-size: calc(38px * var(--sf-display-scale)); }
.sf-empty p { margin: 18px auto; max-width: 50ch; }
.sf-breadcrumb { display: flex; align-items: center; gap: 12px; font-size: var(--sf-size-12); color: var(--sf-muted); padding-top: 27px; }
.sf-breadcrumb a { padding-block: 8px; }
.sf-breadcrumb a:hover { color: var(--sf-blue); }
.sf-article-heading { max-width: 960px; padding-top: 34px; }
.sf-article-heading .sf-eyebrow { margin-bottom: 16px; }
.sf-article-heading h1 { max-width: 21ch; text-align: left; text-wrap: initial; font-size: calc(clamp(54px, 7.2vw, 104px) * var(--sf-display-scale)); }
.sf-lead { font-size: calc(clamp(17px, 1.6vw, 21px) * var(--sf-display-scale)); line-height: 1.55; max-width: 64ch; color: var(--sf-text); margin-top: 22px !important; }
.sf-article-meta { display: flex; align-items: center; justify-content: space-between; margin: 26px 0; max-width: var(--sf-reading); }
.sf-article-meta > div { display: flex; align-items: center; gap: 13px; }
.sf-author-monogram { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--sf-line); font: var(--sf-heading-weight) calc(24px * var(--sf-display-scale)) var(--sf-display); color: var(--sf-blue); }
.sf-article-meta strong, .sf-article-meta div > span:not(.sf-author-monogram) { display: block; font-size: var(--sf-size-12); }
.sf-article-meta div > span:not(.sf-author-monogram) { color: var(--sf-muted); margin-top: 3px; }
.sf-article-figure { margin: 0; }
.sf-article-figure > img, .sf-article-figure > .sf-image-placeholder { aspect-ratio: 2.1; max-height: 550px; width: 100%; object-fit: cover; }
.sf-article-figure figcaption { font-size: var(--sf-size-11); color: var(--sf-muted); margin-top: 10px; }
.sf-reading-layout { display: grid; grid-template-columns: minmax(0, var(--sf-reading)) minmax(180px, 260px); gap: 80px; justify-content: center; margin-top: 48px; }
.sf-reading { min-width: 0; }
.sf-advice-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sf-essentials { border-top: 4px solid var(--sf-blue); border-bottom: 1px solid var(--sf-line); padding: 23px 0; }
.sf-essentials h2 { font-size: calc(34px * var(--sf-display-scale)); }
.sf-essentials ol { padding: 0; margin: 22px 0 0; list-style: none; }
.sf-essentials li { display: flex; gap: 20px; margin-bottom: 15px; font-size: var(--sf-size-15); }
.sf-essentials li > span { color: var(--sf-blue); font: var(--sf-heading-weight) calc(24px * var(--sf-display-scale)) var(--sf-display); }
.sf-reading-section { margin-top: 40px; scroll-margin-top: 25px; }
.sf-reading-section h2 { font-size: calc(36px * var(--sf-display-scale)); text-align: left; text-wrap: initial; margin-bottom: 18px; }
.sf-reading-section p { font-size: var(--sf-size-18); line-height: 1.85; color: var(--sf-text); margin-bottom: 20px; }
.sf-contents { align-self: start; position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + 28px); border-top: 1px solid var(--sf-line); padding-top: 24px; }
.sf-contents ol { padding: 0; list-style: none; margin-top: 20px; }
.sf-contents button, .sf-contents .sf-contents-link { display: flex; gap: 13px; background: none; width: 100%; text-align: left; padding: 12px 0; font-size: var(--sf-size-13); line-height: 1.45; }
.sf-contents button:hover, .sf-contents .sf-contents-link:hover { color: var(--sf-blue); }
.sf-contents button > span, .sf-contents .sf-contents-link > span { color: var(--sf-blue); font-size: var(--sf-size-11); }
.sf-reading-end { display: flex; gap: 20px; align-items: center; border-block: 1px solid var(--sf-line); padding: 20px 0; margin-top: 30px; color: var(--sf-text); font-size: var(--sf-size-13); }
.sf-reading-end > span { color: var(--sf-blue); font: var(--sf-heading-weight) calc(50px * var(--sf-display-scale)) var(--sf-display); }
.sf-dialog { padding: 0; width: min(760px, calc(100% - 32px)); max-height: calc(100dvh - 48px); overflow: auto; border: 0; color: var(--sf-ink); background: white; }
.sf-dialog::backdrop { background: var(--sf-overlay-ink-60); }
.sf-dialog-inner { padding: 30px; }
.sf-dialog-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 25px; }
.sf-dialog-heading h2 { font-size: calc(40px * var(--sf-display-scale)); }
.sf-search-field { display: flex; gap: 12px; align-items: center; border-bottom: 2px solid var(--sf-ink); margin-bottom: 24px; padding-block: 10px; }
.sf-search-field input { width: 100%; border: 0; font-size: var(--sf-size-18); padding: 8px; background: white; min-width: 0; }
.sf-search-results { display: grid; gap: 20px; }
.sf-search-result { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: center; padding-block: 12px; border-bottom: 1px solid var(--sf-line); }
.sf-search-result img { width: 110px; height: 85px; object-fit: cover; }
.sf-search-result h3 { font-size: calc(28px * var(--sf-display-scale)); margin: 7px 0; }
.sf-mobile-nav a { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; border-bottom: 1px solid var(--sf-line); font: var(--sf-heading-weight) calc(34px * var(--sf-display-scale)) var(--sf-display); text-transform: var(--sf-heading-case); }
.sf-prototype-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--sf-surface); padding: 4px var(--sf-gutter); font-size: var(--sf-size-10); line-height: 1.5; color: var(--sf-neutral-620); }
.sf-prototype-bar button { background: transparent; padding: 6px 0 6px 16px; font-size: var(--sf-size-10); text-decoration: underline; }
.sf-system-panel > p { color: var(--sf-text); font-size: var(--sf-size-14); margin-bottom: 22px; }
.sf-system-panel fieldset { border: 1px solid var(--sf-line); padding: 18px; margin: 18px 0; }
.sf-system-panel legend { font-weight: 700; font-size: var(--sf-size-14); }
.sf-system-panel label { display: flex; gap: 12px; align-items: center; padding: 9px 0; font-size: var(--sf-size-14); }
.sf-system-panel input { accent-color: var(--sf-blue); }
.sf-system-panel code { font-size: var(--sf-size-12); background: var(--sf-surface); }
@media (max-width: 1200px) {
.sf-brand-label { display: none; }
.sf-header-row { gap: 20px; }
.sf-desktop-nav { gap: 17px; }
.sf-header-tools { gap: 4px; }
.sf-shop-link { display: none; }
.sf-topic-index a { gap: 12px; padding-inline: 14px; }
.sf-topic-index strong { font-size: calc(27px * var(--sf-display-scale)); }
}
@media (max-width: 900px) {
.sf-desktop-nav { display: none; }
.sf-menu-trigger { display: inline-flex; }
.sf-header-row { min-height: 82px; }
.sf-home-hero { grid-template-columns: 1fr 1fr; }
.sf-hero-copy :is(h1, .sf-stage-title) { font-size: calc(67px * var(--sf-display-scale)); }
.sf-hero-visual { min-height: 530px; }
.sf-reading-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; max-width: var(--sf-reading); margin-inline: auto; }
.sf-contents { position: static; grid-row: 1; padding: 14px 0; border-bottom: 1px solid var(--sf-line); }
.sf-contents ol { display: flex; flex-wrap: wrap; gap: 4px 24px; margin-bottom: 0; }
.sf-topic-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-topic-index a:nth-child(2n) { border-right: 0; }
.sf-topic-index a:nth-child(n + 3) { border-top: 1px solid var(--sf-line); }
.sf-topic-index a:nth-child(3) { padding-left: 0; }
.sf-story-grid { gap: var(--sf-grid-gap); }
}
@media (max-width: 600px) {
.sf-header-row { min-height: 72px; gap: 6px; }
.sf-brand { flex-basis: 136px; }
.sf-brand img { width: 136px; }
.sf-header-tools { gap: 0; }
.sf-header-tools .sf-icon-button { min-width: 36px; padding: 6px; }
.sf-header-tools .sf-saved-trigger { display: none; }
.sf-locale select { width: 68px; font-size: var(--sf-size-10); }
.sf-home-hero { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
.sf-hero-copy { padding: 27px 25px 30px; }
.sf-hero-copy .sf-eyebrow { font-size: var(--sf-size-10); margin-bottom: 14px; }
.sf-hero-copy :is(h1, .sf-stage-title) { font-size: calc(clamp(55px, 15vw, 79px) * var(--sf-display-scale)); line-height: 0.94; max-width: 14ch; }
.sf-hero-copy > p:not(.sf-eyebrow) { font-size: var(--sf-size-14); margin: 18px 0 22px; }
.sf-hero-visual { min-height: 280px; }
.sf-hero-caption { padding: 55px 22px 20px; }
.sf-hero-caption h2 { font-size: calc(29px * var(--sf-display-scale)); }
.sf-section-heading { align-items: start; gap: 14px; margin-bottom: 22px; }
.sf-section-heading > a { font-size: var(--sf-size-11); gap: 7px; }
.sf-section-heading > p { font-size: var(--sf-size-13); }
.sf-story-grid { grid-template-columns: minmax(0, 1fr); gap: var(--sf-stack-gap); }
.sf-card-media { aspect-ratio: 1.55; }
.sf-card-body h3 { font-size: calc(34px * var(--sf-display-scale)); }
.sf-card-body > p:last-child { max-width: 44ch; }
.sf-topic-section .sf-section-heading { flex-direction: column; }
.sf-topic-index { grid-template-columns: minmax(0, 1fr); }
.sf-topic-index a, .sf-topic-index a:nth-child(n + 3) { padding: 18px 0; gap: 16px; border: 0; border-bottom: 1px solid var(--sf-line); }
.sf-topic-index a:last-child { border-bottom: 0; }
.sf-topic-index strong { font-size: calc(28px * var(--sf-display-scale)); }
.sf-topic-index svg { width: 20px; }
.sf-ad { align-items: start; flex-direction: column; padding: 38px 22px 24px; }
.sf-ad-label { left: 22px; }
.sf-ad h2 { font-size: calc(32px * var(--sf-display-scale)); }
.sf-collection-heading { padding-block: 30px 26px; }
.sf-collection-heading h1 { font-size: calc(64px * var(--sf-display-scale)); }
.sf-collection-heading p:last-child { font-size: var(--sf-size-15); }
.sf-topic-nav { gap: 6px; }
.sf-topic-nav a { font-size: var(--sf-size-12); padding: 10px 14px; }
.sf-results-toolbar { gap: 8px; }
.sf-results-toolbar label { gap: 6px; }
.sf-article-heading { padding-top: 26px; }
.sf-article-heading h1 { font-size: calc(60px * var(--sf-display-scale)); }
.sf-article-meta { gap: 8px; }
.sf-article-meta strong, .sf-article-meta div > span:not(.sf-author-monogram) { font-size: var(--sf-size-11); }
.sf-article-figure > img, .sf-article-figure > .sf-image-placeholder { aspect-ratio: 1.15; }
.sf-reading-layout { margin-top: 26px; }
.sf-reading-section p { font-size: var(--sf-size-17); line-height: 1.8; }
.sf-contents button, .sf-contents .sf-contents-link { font-size: var(--sf-size-12); }
.sf-dialog-inner { padding: 22px; }
.sf-dialog-heading h2 { font-size: calc(34px * var(--sf-display-scale)); }
.sf-search-result { grid-template-columns: 80px minmax(0, 1fr); gap: 14px; }
.sf-search-result img { width: 80px; height: 80px; }
.sf-prototype-bar { font-size: var(--sf-size-9); }
}
@media (prefers-reduced-motion: reduce) {
.sf-dynamik * { transition: none !important; scroll-behavior: auto !important; }
}
.sf-header-tools { margin-left: auto; }
.sf-category-nav { display: flex; align-items: stretch; gap: 26px; }
.sf-category-nav a { display: flex; align-items: center; padding: 14px 0; border-bottom: 3px solid transparent; font-size: var(--sf-size-13); font-weight: 700; line-height: 1.35; }
.sf-category-nav a:hover, .sf-category-nav a[aria-current] { border-color: var(--sf-blue); color: var(--sf-blue); }
.sf-category-nav a:last-child { margin-left: auto; color: var(--sf-blue); white-space: nowrap; }
.sf-topics-strip { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid var(--sf-line); }
.sf-topics-strip > span { flex-shrink: 0; font-size: var(--sf-size-10); text-transform: var(--sf-label-case); letter-spacing: 0.1em; font-weight: 700; }
.sf-topics-strip .sf-topic-nav { flex: 1; min-width: 0; gap: 18px; margin: 0; padding: 0; border: 0; overflow-x: auto; }
.sf-topics-strip .sf-topic-nav a { flex-shrink: 0; padding: 14px 0; background: none; border: none; border-radius: 0; font-size: var(--sf-size-11); color: var(--sf-muted); }
.sf-topics-strip .sf-topic-nav a[aria-current] { color: var(--sf-blue); text-decoration: underline; text-underline-offset: 5px; }
.sf-topics-strip .sf-topic-nav a:first-child { display: none; }
.sf-preview-note { font-size: var(--sf-size-12) !important; line-height: 1.5; color: var(--sf-muted); margin: 18px 0; }
.sf-category-page > .sf-empty { margin-bottom: var(--sf-section); }
.sf-carousel .sf-home-hero { padding-top: 22px; }
.sf-carousel .sf-hero-copy :is(h1, .sf-stage-title) { font-size: calc(clamp(50px, 5.8vw, 82px) * var(--sf-display-scale)); }
.sf-carousel-controls { display: flex; align-items: center; gap: 24px; margin-top: 32px; }
.sf-carousel-controls button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--sf-overlay-white-50); background: transparent; color: white; }
.sf-carousel-controls button:hover { background: var(--sf-blue-hover); }
.sf-carousel-controls > span { font-size: var(--sf-size-12); font-variant-numeric: tabular-nums; }
.sf-carousel-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--sf-line); }
.sf-carousel-tabs :is(button, a) { display: flex; gap: 14px; padding: 18px 20px; text-align: left; background: white; border-top: 4px solid transparent; font-weight: 650; font-size: var(--sf-size-12); line-height: 1.4; }
.sf-carousel-tabs :is(button[aria-pressed="true"], a[aria-current="true"]) { border-color: var(--sf-blue); color: var(--sf-blue); background: var(--sf-surface); }
.sf-carousel-tabs :is(button, a) > span:first-child { font: var(--sf-heading-weight) calc(24px * var(--sf-display-scale)) var(--sf-display); }
.sf-carousel-tabs :is(button, a):hover { color: var(--sf-blue); }
.sf-dynamik[data-density="compact"] .sf-header-row, .sf-dynamik[data-density="dense"] .sf-header-row { min-height: 72px; }
.sf-dynamik[data-density="compact"] .sf-hero-visual { min-height: 410px; }
.sf-dynamik[data-density="compact"] .sf-hero-copy { padding: 28px; }
.sf-dynamik[data-density="compact"] .sf-hero-copy :is(h1, .sf-stage-title) { font-size: calc(clamp(46px, 4.6vw, 66px) * var(--sf-display-scale)); }
.sf-dynamik[data-density="compact"] .sf-card-media { aspect-ratio: 2.15; }
.sf-dynamik[data-density="compact"] .sf-card-body { padding-top: 12px; }
.sf-dynamik[data-density="compact"] .sf-card-body p { font-size: var(--sf-size-13); line-height: 1.5; }
.sf-dynamik[data-density="compact"] .sf-collection-heading { padding-block: 30px; }
.sf-dynamik[data-density="dense"] .sf-hero-visual { min-height: 320px; }
.sf-dynamik[data-density="dense"] .sf-hero-copy { padding: 20px 26px; }
.sf-dynamik[data-density="dense"] .sf-hero-copy :is(h1, .sf-stage-title) { font-size: calc(clamp(40px, 3.8vw, 54px) * var(--sf-display-scale)); }
.sf-dynamik[data-density="dense"] .sf-hero-copy .sf-eyebrow { margin-bottom: 12px; }
.sf-dynamik[data-density="dense"] .sf-hero-copy > p:not(.sf-eyebrow) { margin: 12px 0; font-size: var(--sf-size-13); }
.sf-dynamik[data-density="dense"] .sf-carousel-controls { margin-top: 16px; }
.sf-dynamik[data-density="dense"] .sf-carousel-tabs :is(button, a) { padding: 12px; }
.sf-dynamik[data-density="dense"] .sf-story-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-dynamik[data-density="dense"] .sf-card-main { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 18px; align-items: start; }
.sf-dynamik[data-density="dense"] .sf-card-media { aspect-ratio: 1.2; }
.sf-dynamik[data-density="dense"] .sf-card-body { padding: 0; }
.sf-dynamik[data-density="dense"] .sf-card-body p { font-size: var(--sf-size-13); line-height: 1.5; margin-top: 8px; }
.sf-dynamik[data-density="dense"] .sf-card-bottom { padding-block: 6px; }
.sf-dynamik[data-density="dense"] .sf-collection-heading { padding-block: 24px; }
.sf-dynamik[data-density="compact"] .sf-article-heading, .sf-dynamik[data-density="dense"] .sf-article-heading { padding-block: 20px; }
.sf-dynamik[data-density="compact"] .sf-article-figure > img { max-height: 420px; }
.sf-dynamik[data-density="dense"] .sf-article-figure > img { max-height: 320px; }
.sf-article-blocks { font-size: var(--sf-size-18); line-height: 1.8; color: var(--sf-text); }
.sf-article-blocks > h2, .sf-article-blocks section h2 { font-size: calc(36px * var(--sf-display-scale)); line-height: 1.08; color: var(--sf-ink); margin-bottom: 20px; }
.sf-article-blocks > h2 { margin-top: 48px; scroll-margin-top: 24px; }
.sf-article-blocks > h2:first-child { margin-top: 0; }
.sf-article-blocks > section, .sf-article-blocks > aside { margin-block: 40px; scroll-margin-top: 24px; }
.sf-block-richtext p { margin: 0 0 20px; white-space: pre-line; }
.sf-block-richtext ul { margin: 0 0 24px; padding-left: 23px; }
.sf-block-richtext li { margin-bottom: 10px; }
.sf-block-richtext strong { color: var(--sf-ink); font-weight: 650; }
.sf-block-image { margin: 32px 0; }
.sf-block-image img { width: 100%; max-height: 580px; object-fit: cover; }
.sf-block-image figcaption { font-size: var(--sf-size-12); line-height: 1.5; margin-top: 8px; }
.sf-pros-cons { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; border-top: 4px solid var(--sf-blue); padding-top: 24px; }
.sf-pros-cons > div + div { border-left: 1px solid var(--sf-line); padding-left: 26px; }
.sf-pros-cons h2 { font-size: calc(29px * var(--sf-display-scale)) !important; }
.sf-pros-cons ul { padding-left: 20px; font-size: var(--sf-size-15); line-height: 1.65; }
.sf-pros-cons li { margin-bottom: 12px; }
.sf-decision { border-block: 1px solid var(--sf-line); padding-block: 26px; }
.sf-decision ol { list-style: none; padding: 0; margin: 0; }
.sf-decision li { display: flex; gap: 24px; padding: 22px 0; border-top: 1px solid var(--sf-line); }
.sf-decision li > span { font: var(--sf-heading-weight) calc(38px * var(--sf-display-scale)) var(--sf-display); color: var(--sf-blue); }
.sf-decision h3 { font: 700 var(--sf-size-16)/1.5 var(--sf-body); text-transform: none; letter-spacing: 0; }
.sf-decision li p { font-size: var(--sf-size-16); margin: 8px 0 0; }
.sf-block-cta { padding: 32px; background: var(--sf-blue); color: white; }
.sf-block-cta h2, .sf-block-cta .sf-eyebrow { color: white !important; }
.sf-faq details { border-bottom: 1px solid var(--sf-line); }
.sf-faq summary { min-height: 52px; padding: 18px 0; display: flex; align-items: center; justify-content: space-between; gap: 24px; cursor: pointer; font: 650 var(--sf-size-16)/1.5 var(--sf-body); color: var(--sf-ink); }
.sf-faq summary::-webkit-details-marker { display: none; }
.sf-faq summary > span { color: var(--sf-blue); font-size: calc(28px * var(--sf-display-scale)); }
.sf-faq details[open] summary > span { transform: rotate(45deg); }
.sf-faq .sf-block-richtext { font-size: var(--sf-size-16); }
.sf-disclosure { border-left: 3px solid var(--sf-blue); padding: 20px 24px; background: var(--sf-surface); font-size: var(--sf-size-14); line-height: 1.7; }
.sf-disclosure p { margin: 8px 0 0; }
.sf-discover-block { border-block: 1px solid var(--sf-line); padding-block: 28px; }
.sf-author-box { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 24px; margin-top: 40px; padding-top: 28px; border-top: 4px solid var(--sf-blue); }
.sf-author-box > img { width: 72px; height: 88px; object-fit: cover; }
.sf-author-box h2 { font-size: calc(36px * var(--sf-display-scale)); }
.sf-author-box strong { font-size: var(--sf-size-13); }
.sf-author-box p { font-size: var(--sf-size-14); line-height: 1.75; }
.sf-author-box a { font-size: var(--sf-size-13); color: var(--sf-blue); text-decoration: underline; }
@media (max-width: 1000px) {
.sf-category-nav { overflow-x: auto; gap: 22px; }
.sf-category-nav a { flex-shrink: 0; max-width: 190px; }
.sf-topics-strip { gap: 12px; }
.sf-carousel .sf-hero-copy :is(h1, .sf-stage-title) { font-size: calc(60px * var(--sf-display-scale)); }
.sf-reading-layout { display: flex; flex-direction: column; }
.sf-contents { order: -1; position: static; width: 100%; }
.sf-contents ol { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
}
@media (max-width: 640px) {
.sf-category-nav { gap: 20px; }
.sf-category-nav a { font-size: var(--sf-size-12); padding-block: 12px; }
.sf-topics-strip > span { display: none; }
.sf-topics-strip .sf-topic-nav { display: flex; flex-wrap: nowrap; }
.sf-carousel .sf-home-hero { padding-top: 12px; }
.sf-carousel .sf-hero-copy :is(h1, .sf-stage-title) { font-size: calc(54px * var(--sf-display-scale)); }
.sf-carousel-controls { margin-top: 20px; }
.sf-carousel-tabs :is(button, a) { padding: 12px 7px; gap: 6px; font-size: var(--sf-size-10); }
.sf-carousel-tabs :is(button, a) > span:first-child { font-size: var(--sf-size-18); }
.sf-dynamik[data-density="compact"] .sf-hero-visual { min-height: 0; height: 245px; }
.sf-dynamik[data-density="compact"] .sf-hero-copy :is(h1, .sf-stage-title) { font-size: calc(44px * var(--sf-display-scale)); }
.sf-dynamik[data-density="dense"] .sf-hero-copy :is(h1, .sf-stage-title) { font-size: calc(38px * var(--sf-display-scale)); }
.sf-dynamik[data-density="dense"] .sf-hero-visual { min-height: 0; height: 180px; }
.sf-dynamik[data-density="dense"] .sf-hero-caption h2 { font-size: calc(30px * var(--sf-display-scale)); }
.sf-dynamik[data-density="dense"] .sf-story-grid { grid-template-columns: 1fr; }
.sf-dynamik[data-density="dense"] .sf-card-main { grid-template-columns: 105px minmax(0, 1fr); gap: 14px; }
.sf-dynamik[data-density="dense"] .sf-card-media { aspect-ratio: 0.85; }
.sf-dynamik[data-density="dense"] .sf-card-body h3 { font-size: calc(26px * var(--sf-display-scale)); }
.sf-dynamik[data-density="dense"] .sf-card-body p { font-size: var(--sf-size-12); }
.sf-article-blocks { font-size: var(--sf-size-17); line-height: 1.8; }
.sf-article-blocks > h2, .sf-article-blocks section h2 { font-size: calc(32px * var(--sf-display-scale)); }
.sf-pros-cons { grid-template-columns: 1fr; gap: 18px; }
.sf-pros-cons > div + div { border-left: 0; border-top: 1px solid var(--sf-line); padding: 22px 0 0; }
.sf-contents ol { grid-template-columns: 1fr; }
.sf-author-box { grid-template-columns: 48px minmax(0, 1fr); gap: 16px; }
.sf-author-box > img { width: 48px; height: 60px; }
}
.sf-block-image .sf-image-placeholder { min-height: 260px; }
.sf-dynamik[data-density="compact"] .sf-article-heading h1 { font-size: calc(clamp(44px, 5vw, 72px) * var(--sf-display-scale)); }
.sf-dynamik[data-density="dense"] .sf-article-heading h1 { font-size: calc(clamp(36px, 4vw, 58px) * var(--sf-display-scale)); }
.sf-dynamik[data-density="dense"] .sf-article-heading .sf-lead { font-size: var(--sf-size-17); line-height: 1.6; }
@media (min-width: 1001px) {
.sf-carousel .sf-hero-copy { min-height: 660px; }
.sf-dynamik[data-density="compact"] .sf-carousel .sf-hero-copy { min-height: 490px; }
.sf-dynamik[data-density="dense"] .sf-carousel .sf-hero-copy { min-height: 370px; }
}
@media (max-width: 640px) {
.sf-category-nav, .sf-topics-strip .sf-topic-nav { scrollbar-width: none; }
.sf-category-nav::-webkit-scrollbar, .sf-topics-strip .sf-topic-nav::-webkit-scrollbar { display: none; }
.sf-dynamik[data-density="dense"] .sf-article-heading .sf-lead { font-size: var(--sf-size-15); }
}
@media (max-width: 640px) {
.sf-collection-heading h1 { font-size: calc(46px * var(--sf-display-scale)); }
.sf-dynamik[data-density="compact"] .sf-collection-heading h1 { font-size: calc(40px * var(--sf-display-scale)); }
.sf-dynamik[data-density="dense"] .sf-collection-heading h1 { font-size: calc(34px * var(--sf-display-scale)); }
}
.sf-sports-button { background: none; border: 0; font-size: var(--sf-size-13); font-weight: 700; cursor: pointer; white-space: nowrap; }
.sf-intent-grid, .sf-principles, .sf-stay-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sf-intent-grid > a { display: block; background: var(--sf-tint-blue-80); padding: 30px; text-decoration: none; border-top: 4px solid var(--sf-blue); }
.sf-intent-grid h3, .sf-principles h3, .sf-stay-card h3 { font-size: calc(32px * var(--sf-display-scale)); margin: 16px 0; }
.sf-intent-grid p, .sf-principles p, .sf-stay-card p { font-size: var(--sf-size-17); line-height: 1.6; }
.sf-principles > div { padding: 24px 0; border-top: 2px solid var(--sf-neutral-900); }
.sf-principles b { color: var(--sf-blue); font-size: var(--sf-size-13); letter-spacing: 0.07em; }
.sf-travel-teaser { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.sf-travel-teaser h2 { font-size: calc(clamp(40px, 4.3vw, 68px) * var(--sf-display-scale)); line-height: 1; }
.sf-travel-teaser p { font-size: var(--sf-size-19); line-height: 1.6; }
.sf-travel-teaser > a { position: relative; min-height: 380px; height: 100%; overflow: hidden; }
.sf-travel-teaser > a strong { position: absolute; bottom: 20px; left: 20px; background: white; padding: 14px; color: var(--sf-blue); }
.sf-travel-teaser img { height: 100%; width: 100%; object-fit: cover; }
.sf-sport-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--sf-neutral-300); border-bottom: 1px solid var(--sf-neutral-300); }
.sf-sport-grid a { padding: 30px 18px; text-decoration: none; display: flex; align-items: center; gap: 14px; border-right: 1px solid var(--sf-neutral-300); }
.sf-sport-grid a:last-child { border: 0; }
.sf-sport-grid span { font-size: var(--sf-size-12); color: var(--sf-blue); }
.sf-sport-grid strong { font-family: var(--sf-display-condensed); font-size: calc(32px * var(--sf-display-scale)); }
.sf-sport-grid svg { margin-left: auto; flex-shrink: 0; }
.sf-travel-filters { display: flex; gap: 24px; align-items: end; background: var(--sf-tint-blue-60); padding: 24px; margin: 24px 0; }
.sf-travel-filters label { display: flex; flex-direction: column; gap: 10px; font-weight: 700; flex: 1; }
.sf-travel-filters select { border: 1px solid var(--sf-neutral-300); padding: 13px; background: white; min-width: 0; font: inherit; }
.sf-travel-filters > span { padding: 14px 0; font-size: var(--sf-size-14); }
.sf-stay-card { display: block; text-decoration: none; border-bottom: 1px solid var(--sf-neutral-300); }
.sf-stay-card > div:last-child { padding: 24px 0; }
.sf-stay-card strong { display: flex; align-items: center; gap: 12px; color: var(--sf-blue); }
.sf-stay-art { min-height: 200px; background: var(--sf-tint-blue-200); display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 24px; border-left: 8px solid var(--sf-blue); }
.sf-stay-art span { font-size: var(--sf-size-13); text-transform: var(--sf-label-case); letter-spacing: 0.1em; }
.sf-stay-art strong { font-family: var(--sf-display-condensed); font-size: calc(44px * var(--sf-display-scale)); color: var(--sf-blue); }
.sf-stay-art small { font-size: var(--sf-size-12); color: var(--sf-neutral-650); }
.sf-host-invite { background: var(--sf-tint-blue-100); padding: 40px; margin: 50px 0; }
.sf-host-invite h2 { font-size: calc(42px * var(--sf-display-scale)); }
.sf-host-invite p { max-width: 650px; line-height: 1.6; }
.sf-region-intro { padding-top: 40px; }
.sf-region-intro h1, .sf-stay-header h1 { font-size: calc(clamp(48px, 6vw, 86px) * var(--sf-display-scale)); line-height: 1; margin: 20px 0; }
.sf-region-intro > p, .sf-stay-header > p { max-width: 650px; font-size: var(--sf-size-20); line-height: 1.6; }
.sf-region-image { height: 380px; position: relative; margin-top: 30px; }
.sf-region-image span { position: absolute; bottom: 12px; left: 12px; background: white; padding: 8px; font-size: var(--sf-size-12); }
.sf-concept-breadcrumb { font-size: var(--sf-size-13); margin: 28px 0; color: var(--sf-neutral-650); }
.sf-stay-detail { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; margin-top: 32px; }
.sf-stay-art--large { min-height: 330px; }
.sf-stay-detail .sf-principles { grid-template-columns: 1fr 1fr; }
.sf-host-contact { align-self: start; border-top: 4px solid var(--sf-blue); background: var(--sf-tint-blue-100); padding: 28px; }
.sf-host-contact h2 { font-size: calc(38px * var(--sf-display-scale)); line-height: 1.1; }
.sf-host-contact p { line-height: 1.6; }
.sf-host-contact small { display: block; margin-top: 18px; }
.sf-dynamik[data-density="dense"] .sf-stay-art { min-height: 140px; }
@media (max-width: 1200px) {
.sf-sports-button { display: none; }
}
@media (max-width: 850px) {
.sf-principles, .sf-intent-grid, .sf-stay-grid { gap: 18px; }
.sf-sport-grid { grid-template-columns: 1fr 1fr; }
.sf-stay-detail { grid-template-columns: 1fr; }
.sf-host-contact { margin-bottom: 30px; }
.sf-travel-teaser { gap: 24px; }
}
@media (max-width: 600px) {
.sf-principles, .sf-intent-grid, .sf-stay-grid, .sf-travel-teaser { grid-template-columns: 1fr; }
.sf-travel-teaser > a { min-height: 240px; height: 240px; }
.sf-travel-filters { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px; }
.sf-travel-filters > span { padding: 0; }
.sf-sport-grid a { padding: 22px 10px; gap: 8px; }
.sf-sport-grid strong { font-size: calc(27px * var(--sf-display-scale)); }
.sf-sport-grid svg { width: 18px; }
.sf-region-image { height: 240px; }
.sf-stay-detail .sf-principles { grid-template-columns: 1fr; }
.sf-host-invite { padding: 24px; }
.sf-stay-art--large { min-height: 250px; }
}
@media (max-width: 600px) {
.sf-sport-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-sport-grid a { min-width: 0; flex-wrap: wrap; position: relative; padding: 22px 12px; }
.sf-sport-grid strong { font-size: calc(26px * var(--sf-display-scale)); width: 100%; overflow-wrap: anywhere; }
.sf-sport-grid svg { position: absolute; right: 12px; top: 20px; }
}
.sf-dynamik { --sf-stage-height: 470px; --sf-stage-title: clamp(52px, 4.7vw, 68px); --sf-stage-pad: 36px; --sf-manifesto-space: 48px; }
.sf-dynamik[data-density="compact"] { --sf-stage-height: 420px; --sf-stage-title: clamp(48px, 4.2vw, 60px); --sf-stage-pad: 28px; --sf-manifesto-space: 36px; }
.sf-dynamik[data-density="dense"] { --sf-stage-height: 350px; --sf-stage-title: clamp(44px, 3.7vw, 52px); --sf-stage-pad: 24px; --sf-manifesto-space: 28px; }
.sf-focused-top { display: flex; align-items: center; gap: 32px; min-height: 84px; }
.sf-focused-brand { flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; }
.sf-focused-brand img { width: 172px; height: auto; }
.sf-focused-brand span { font-size: var(--sf-size-10); line-height: 1.3; letter-spacing: 0.055em; font-weight: 600; text-align: right; color: var(--sf-muted); }
.sf-primary { display: flex; gap: 28px; align-items: center; margin: auto; }
.sf-primary a { display: flex; align-items: center; font-size: var(--sf-size-15); font-weight: 700; min-height: 84px; padding: 4px 0 0; white-space: nowrap; border-bottom: 3px solid transparent; }
.sf-primary a[aria-current="page"] { border-color: var(--sf-blue); color: var(--sf-blue); }
.sf-primary a:nth-child(3), .sf-primary a:hover { color: var(--sf-blue); }
.sf-focused-tools { display: flex; align-items: center; gap: 8px; }
.sf-focused-menu { display: none; }
.sf-dynamik .sf-focused-tools > a, .sf-dynamik .sf-focused-tools > button, .sf-dynamik .sf-header-shop { font: var(--sf-header-tool-font); letter-spacing: -0.01em; }
.sf-concept-carousel { margin-top: 12px; }
.sf-concept-carousel .sf-home-hero { padding-top: 0; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); min-height: var(--sf-stage-height); }
.sf-concept-carousel .sf-hero-copy { padding: var(--sf-stage-pad); }
.sf-dynamik .sf-concept-carousel h1 { font-size: var(--sf-stage-title); line-height: 0.98; letter-spacing: -0.012em; white-space: pre-line; }
.sf-concept-carousel .sf-hero-copy .sf-eyebrow { font-size: var(--sf-size-11); letter-spacing: 0.07em; margin: 0 0 18px; }
.sf-dynamik .sf-concept-carousel .sf-hero-copy > p:not(.sf-eyebrow) { max-width: 31ch; font-size: var(--sf-size-17); line-height: 1.5; margin: 20px 0 24px; text-wrap: pretty; }
.sf-concept-carousel .sf-action { min-height: 44px; padding: 12px 18px; font-size: var(--sf-size-13); }
.sf-concept-carousel .sf-hero-visual { min-height: 0; }
.sf-stage-caption { position: absolute; bottom: 20px; left: 24px; right: 24px; display: flex; align-items: center; gap: 12px; width: fit-content; max-width: calc(100% - 48px); background: white; color: var(--sf-ink); padding: 10px 14px; font-size: var(--sf-size-13); line-height: 1.4; }
.sf-stage-caption svg { flex-shrink: 0; color: var(--sf-blue); }
.sf-stage-rail { display: flex; border-bottom: 1px solid var(--sf-line); }
.sf-stage-rail .sf-carousel-tabs { flex: 1; border: 0; }
.sf-stage-rail .sf-carousel-tabs :is(button, a) { align-items: center; min-height: 60px; padding: 12px 16px; font-size: var(--sf-size-13); gap: 10px; border-top: 3px solid transparent; }
.sf-stage-rail .sf-carousel-tabs :is(button[aria-pressed="true"], a[aria-current="true"]) { border-color: var(--sf-blue); }
.sf-stage-rail .sf-carousel-controls { margin: 0; padding: 8px 0 8px 20px; gap: 10px; }
.sf-stage-rail .sf-carousel-controls button { color: var(--sf-blue); border: 1px solid var(--sf-line); }
.sf-stage-rail .sf-carousel-controls button:hover { color: white; }
.sf-manifesto { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); gap: 0; border-block: 1px solid var(--sf-line); padding: var(--sf-manifesto-space) 0; align-items: center; }
.sf-manifesto-mark { display: flex; flex-direction: column; align-items: flex-start; padding-left: 16px; color: var(--sf-blue); font-family: var(--sf-display); font-weight: 800; font-size: calc(clamp(90px, 10vw, 136px) * var(--sf-display-scale)); font-style: italic; line-height: 0.83; letter-spacing: -0.035em; }
.sf-manifesto-mark span { display: block; }
.sf-manifesto > div:last-child { max-width: 510px; padding-left: var(--sf-stage-pad); }
.sf-manifesto .sf-eyebrow { font-size: var(--sf-size-11); letter-spacing: 0.08em; line-height: 1.5; color: var(--sf-blue); margin-bottom: 14px; }
.sf-dynamik .sf-manifesto h2 { font-size: calc(clamp(38px, 3.7vw, 52px) * var(--sf-display-scale)); line-height: 1.02; letter-spacing: -0.012em; text-wrap: initial; margin-bottom: 20px; }
.sf-manifesto p:not(.sf-eyebrow) { font-size: var(--sf-size-17); line-height: 1.65; color: var(--sf-text); max-width: 43ch; margin-bottom: 26px; text-wrap: pretty; }
.sf-manifesto .sf-action { padding: 12px 18px; min-height: 44px; font-size: var(--sf-size-13); }
.sf-dynamik[data-density="dense"] .sf-manifesto-mark { font-size: calc(100px * var(--sf-display-scale)); }
@media (max-width: 1100px) {
.sf-focused-top { gap: 20px; }
.sf-focused-brand img { width: 150px; }
.sf-primary { gap: 18px; }
.sf-primary a { font-size: var(--sf-size-13); }
.sf-focused-saved { display: none; }
.sf-stage-rail .sf-carousel-controls { padding-left: 12px; gap: 6px; }
.sf-stage-rail .sf-carousel-controls > span { display: none; }
.sf-dynamik { --sf-stage-title: 54px; --sf-stage-pad: 28px; }
.sf-dynamik[data-density="compact"] { --sf-stage-title: 50px; --sf-stage-pad: 24px; }
.sf-dynamik[data-density="dense"] { --sf-stage-title: 44px; --sf-stage-pad: 20px; }
}
@media (max-width: 900px) {
.sf-primary { display: none; }
.sf-focused-menu { display: inline-flex; }
.sf-focused-top { min-height: 76px; justify-content: space-between; }
.sf-focused-tools { gap: 4px; }
.sf-concept-carousel .sf-home-hero { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.sf-dynamik { --sf-stage-title: 48px; }
.sf-dynamik[data-density="compact"] { --sf-stage-title: 44px; }
.sf-dynamik[data-density="dense"] { --sf-stage-title: 40px; }
.sf-stage-rail .sf-carousel-tabs :is(button, a) { padding: 10px; font-size: var(--sf-size-11); }
.sf-manifesto-mark { font-size: calc(108px * var(--sf-display-scale)); }
}
@media (max-width: 640px) {
.sf-concept-carousel { margin-top: 8px; }
.sf-concept-carousel .sf-home-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.sf-concept-carousel .sf-hero-visual { grid-row: 1; height: 260px; }
.sf-dynamik[data-density="compact"] .sf-concept-carousel .sf-hero-visual { height: 240px; }
.sf-dynamik[data-density="dense"] .sf-concept-carousel .sf-hero-visual { height: 210px; }
.sf-dynamik { --sf-stage-title: 44px; --sf-stage-pad: 24px; }
.sf-dynamik[data-density="compact"] { --sf-stage-title: 42px; --sf-stage-pad: 22px; }
.sf-dynamik[data-density="dense"] { --sf-stage-title: 38px; --sf-stage-pad: 20px; }
.sf-concept-carousel .sf-hero-copy .sf-eyebrow { margin-bottom: 12px; }
.sf-dynamik .sf-concept-carousel .sf-hero-copy > p:not(.sf-eyebrow) { font-size: var(--sf-size-16); margin: 14px 0 20px; }
.sf-stage-caption { left: 12px; right: 12px; bottom: 12px; max-width: calc(100% - 24px); padding: 8px 10px; font-size: var(--sf-size-11); }
.sf-stage-rail { flex-wrap: wrap; }
.sf-stage-rail .sf-carousel-tabs { flex-basis: 100%; }
.sf-stage-rail .sf-carousel-tabs :is(button, a) { flex-direction: column; align-items: flex-start; justify-content: start; gap: 6px; line-height: 1.3; min-height: 76px; }
.sf-stage-rail .sf-carousel-controls { width: 100%; justify-content: flex-end; padding: 6px 0; border-top: 1px solid var(--sf-line); }
.sf-stage-rail .sf-carousel-controls > span { display: block; margin-inline: 4px; }
.sf-stage-rail .sf-carousel-controls button { width: 40px; height: 40px; }
.sf-manifesto { grid-template-columns: 88px minmax(0, 1fr); gap: 22px; padding-block: 32px; align-items: start; }
.sf-manifesto-mark, .sf-dynamik[data-density="dense"] .sf-manifesto-mark { font-size: calc(64px * var(--sf-display-scale)); padding-left: 3px; line-height: 0.87; }
.sf-manifesto > div:last-child { padding: 0; min-width: 0; }
.sf-manifesto .sf-eyebrow { font-size: var(--sf-size-10); letter-spacing: 0.025em; margin-bottom: 12px; }
.sf-dynamik .sf-manifesto h2 { font-size: calc(32px * var(--sf-display-scale)); margin-bottom: 16px; }
.sf-manifesto p:not(.sf-eyebrow) { font-size: var(--sf-size-15); line-height: 1.6; margin-bottom: 20px; }
.sf-manifesto .sf-action { font-size: var(--sf-size-12); padding: 10px 12px; gap: 12px; }
}
@media (max-width: 360px) {
.sf-focused-top { gap: 10px; }
.sf-focused-brand img { width: 132px; }
.sf-focused-tools { gap: 0; }
.sf-focused-tools .sf-locale select { width: 44px; }
.sf-focused-tools .sf-icon-button { width: 40px; }
.sf-manifesto { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.sf-manifesto-mark, .sf-dynamik[data-density="dense"] .sf-manifesto-mark { flex-direction: row; gap: 8px; font-size: calc(54px * var(--sf-display-scale)); }
}
.sf-focused-top { gap: 22px; }
.sf-focused-brand { gap: 5px; }
.sf-focused-brand .sf-brand-logo { width: 188px; height: auto; }
.sf-focused-brand .sf-brand-claim { width: 140px; height: auto; margin-left: 43px; }
.sf-primary { gap: 22px; }
.sf-primary a { font-size: var(--sf-size-14); }
.sf-focused-tools { gap: 4px; }
.sf-focused-tools .sf-locale select { width: 56px; }
.sf-dynamik .sf-header-shop { display: inline-flex; align-items: center; justify-content: center; gap: 10px; flex-shrink: 0; min-height: 44px; padding: 12px 16px; background: var(--sf-blue); color: white; font-size: var(--sf-size-13); font-weight: 700; white-space: nowrap; }
.sf-dynamik .sf-header-shop:hover { background: var(--sf-blue-hover); }
.sf-header-shop svg { flex-shrink: 0; }
.sf-menu-utilities { display: flex; flex-wrap: wrap; gap: 12px; padding: 0 0 24px; border-bottom: 1px solid var(--sf-line); margin-bottom: 12px; }
.sf-menu-utilities button { display: flex; align-items: center; gap: 8px; background: var(--sf-surface); padding: 12px; }
.sf-menu-utilities label { display: flex; align-items: center; gap: 14px; font-size: var(--sf-size-13); }
.sf-menu-utilities select { padding: 8px; border: 1px solid var(--sf-line); background: white; }
.sf-manifesto { grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); }
.sf-manifesto-mark { display: block; padding: 0 28px 0 10px; font-size: inherit; line-height: 1; }
.sf-manifesto-mark img { display: block; width: 100%; max-width: 360px; height: auto; }
.sf-advice-interlude { padding-block: 12px; }
.sf-advice-interlude .sf-section-heading { margin-top: 10px; }
.sf-travel-discovery { margin: var(--sf-section) 0; padding-top: 32px; border-top: 1px solid var(--sf-line); }
.sf-travel-intro { display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.sf-travel-intro .sf-eyebrow { margin-bottom: 12px; }
.sf-dynamik .sf-travel-intro .sf-travel-index-link { display: inline-flex; align-items: center; gap: 12px; font-size: var(--sf-size-14); font-weight: 700; background: transparent; color: var(--sf-blue); padding: 0 0 6px; min-height: 44px; border-bottom: 1px solid var(--sf-blue); }
.sf-travel-panorama { display: block; position: relative; height: 460px; overflow: hidden; background: var(--sf-surface); }
.sf-travel-panorama > .sf-story-image { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.sf-travel-panorama > .sf-image-placeholder { position: absolute; inset: 0; }
.sf-travel-panorama > div:not(.sf-image-placeholder) { position: absolute; inset: 0; padding: 40px; display: flex; flex-direction: column; justify-content: end; align-items: start; background: linear-gradient(90deg, var(--sf-overlay-60), transparent 85%); color: white; }
.sf-travel-panorama h3 { font-size: calc(clamp(44px, 5vw, 70px) * var(--sf-display-scale)); max-width: 17ch; line-height: 1; margin: 12px 0 16px; text-wrap: initial; }
.sf-travel-panorama p { max-width: 36ch; font-size: var(--sf-size-18); line-height: 1.5; margin-bottom: 24px; }
.sf-travel-panorama span:first-child { font-size: var(--sf-size-12); letter-spacing: 0.07em; text-transform: var(--sf-label-case); }
.sf-travel-panorama-link { display: inline-flex; align-items: center; gap: 20px; font-size: var(--sf-size-14); font-weight: 700; }
.sf-travel-panorama small { position: absolute; bottom: 16px; right: 20px; color: white; background: var(--sf-overlay-60); padding: 4px 8px; font-size: var(--sf-size-10); }
.sf-travel-paths { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--sf-surface); }
.sf-travel-paths a { position: relative; padding: 26px 28px; border-right: 1px solid var(--sf-line); }
.sf-travel-paths a:last-child { border-right: 0; }
.sf-travel-paths a:hover { background: var(--sf-tint-sky-80); }
.sf-travel-paths span { font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.035em; color: var(--sf-blue); }
.sf-travel-paths h3 { font-size: calc(32px * var(--sf-display-scale)); margin: 12px 0 8px; }
.sf-travel-paths p { font-size: var(--sf-size-14); color: var(--sf-text); padding-right: 24px; }
.sf-travel-paths svg { position: absolute; right: 20px; bottom: 26px; color: var(--sf-blue); }
.sf-dynamik[data-density="compact"] .sf-travel-panorama { height: 390px; }
.sf-dynamik[data-density="dense"] .sf-travel-panorama { height: 330px; }
.sf-dynamik[data-density="dense"] .sf-travel-panorama > div:not(.sf-image-placeholder) { padding: 28px; }
.sf-dynamik[data-density="dense"] .sf-travel-panorama h3 { font-size: calc(48px * var(--sf-display-scale)); }
.sf-dynamik[data-density="dense"] .sf-travel-paths a { padding: 18px 22px; }
@media (max-width: 1180px) {
.sf-primary { display: none; }
.sf-focused-menu { display: inline-flex; }
.sf-focused-brand { margin-right: auto; }
.sf-focused-saved { display: inline-flex; }
}
@media (max-width: 900px) {
.sf-focused-top { gap: 12px; }
.sf-focused-brand .sf-brand-logo { width: 160px; }
.sf-focused-brand .sf-brand-claim { width: 120px; margin-left: 36px; }
.sf-focused-tools { order: 2; }
.sf-focused-tools > .sf-locale, .sf-focused-tools > .sf-icon-button:not(.sf-focused-menu) { display: none; }
.sf-header-shop { order: 1; }
.sf-dynamik .sf-header-shop { padding: 10px 12px; }
.sf-travel-intro { align-items: start; }
.sf-travel-paths a { padding: 22px 18px; }
.sf-travel-paths svg { right: 12px; }
.sf-manifesto-mark { padding-right: 22px; }
}
@media (max-width: 640px) {
.sf-focused-brand .sf-brand-logo { width: 140px; }
.sf-focused-brand .sf-brand-claim { width: 106px; margin-left: 30px; }
.sf-focused-top { gap: 8px; }
.sf-dynamik .sf-header-shop { font-size: var(--sf-size-12); padding: 10px; gap: 5px; }
.sf-header-shop svg { width: 14px; }
.sf-manifesto { grid-template-columns: minmax(0, 1fr); gap: 28px; }
.sf-manifesto-mark, .sf-dynamik[data-density="dense"] .sf-manifesto-mark { font-size: inherit; padding: 0; display: block; }
.sf-manifesto-mark img { width: 240px; max-width: 85%; height: auto; }
.sf-manifesto > div:last-child { max-width: 100%; }
.sf-manifesto h2 br { display: none; }
.sf-manifesto p:not(.sf-eyebrow) { max-width: 38ch; }
.sf-travel-intro { flex-direction: column; gap: 16px; margin-bottom: 22px; }
.sf-travel-panorama, .sf-dynamik[data-density="compact"] .sf-travel-panorama, .sf-dynamik[data-density="dense"] .sf-travel-panorama { height: 400px; }
.sf-travel-panorama > div:not(.sf-image-placeholder), .sf-dynamik[data-density="dense"] .sf-travel-panorama > div:not(.sf-image-placeholder) { padding: 24px 22px 48px; background: linear-gradient(0deg, var(--sf-overlay-80), transparent 100%); }
.sf-travel-panorama h3, .sf-dynamik[data-density="dense"] .sf-travel-panorama h3 { font-size: calc(46px * var(--sf-display-scale)); }
.sf-travel-panorama p { font-size: var(--sf-size-16); }
.sf-travel-panorama small { left: 22px; right: auto; bottom: 12px; font-size: var(--sf-size-9); }
.sf-travel-paths { grid-template-columns: minmax(0, 1fr); }
.sf-travel-paths a, .sf-dynamik[data-density="dense"] .sf-travel-paths a { padding: 22px; border-right: 0; border-bottom: 1px solid var(--sf-line); }
.sf-travel-paths h3 { font-size: calc(30px * var(--sf-display-scale)); margin: 8px 0; }
.sf-travel-paths p { max-width: 28ch; }
}
@media (max-width: 360px) {
.sf-focused-brand .sf-brand-logo { width: 112px; }
.sf-focused-brand .sf-brand-claim { width: 85px; margin-left: 24px; }
.sf-focused-top { gap: 4px; }
.sf-dynamik .sf-header-shop { font-size: var(--sf-size-11); padding: 10px 8px; }
.sf-header-shop svg { display: none; }
}
@media (max-width: 640px) {
.sf-focused-top { gap: 4px; }
.sf-focused-brand .sf-brand-logo { width: 132px; }
.sf-focused-brand .sf-brand-claim { width: 100px; margin-left: 28px; }
.sf-dynamik .sf-header-shop { padding: 10px 8px; gap: 4px; }
.sf-focused-tools .sf-icon-button { width: 40px; }
.sf-manifesto h2 br { display: initial; }
}
@media (max-width: 360px) {
.sf-focused-brand .sf-brand-logo { width: 104px; }
.sf-focused-brand .sf-brand-claim { width: 80px; margin-left: 22px; }
.sf-dynamik .sf-header-shop { padding: 10px 6px; }
}
.sf-header--focused .sf-focused-top { display: grid; grid-template-columns: 236px minmax(0, 1fr) auto; grid-template-rows: 50px 46px; column-gap: 32px; row-gap: 0; min-height: 96px; }
.sf-header--focused .sf-focused-brand { grid-column: 1; grid-row: 1 / 3; align-self: center; gap: 3px; margin: 0; }
.sf-header--focused .sf-brand-logo { width: 216px; }
.sf-header--focused .sf-brand-claim { width: 128px; margin-left: 49px; }
.sf-header--focused .sf-primary { display: flex; grid-column: 2 / 4; grid-row: 2; align-self: stretch; align-items: stretch; justify-content: flex-start; gap: clamp(24px, 3vw, 44px); margin: 0; border-top: 1px solid var(--sf-line); }
.sf-header--focused .sf-primary a { min-height: 46px; padding: 0; font-size: var(--sf-size-15); letter-spacing: -0.015em; }
.sf-header--focused .sf-primary a:nth-child(3) { color: var(--sf-ink); }
.sf-header--focused .sf-primary a:hover, .sf-header--focused .sf-primary a[aria-current="page"] { color: var(--sf-blue); }
.sf-header--focused .sf-focused-tools { grid-column: 2; grid-row: 1; justify-self: end; }
.sf-header--focused .sf-header-shop { grid-column: 3; grid-row: 1; min-height: 36px; padding: 8px 14px; font-size: var(--sf-size-12); }
.sf-header--focused .sf-focused-menu { display: none; }
@media (min-width: 901px) and (max-width: 1100px) {
.sf-header--focused .sf-focused-top { grid-template-columns: 200px minmax(0, 1fr) auto; column-gap: 24px; }
.sf-header--focused .sf-brand-logo { width: 190px; }
.sf-header--focused .sf-brand-claim { width: 116px; margin-left: 43px; }
.sf-header--focused .sf-primary { gap: 22px; }
.sf-header--focused .sf-primary a { font-size: var(--sf-size-14); }
}
@media (max-width: 900px) {
.sf-header--focused .sf-focused-top { display: flex; min-height: 76px; gap: 12px; }
.sf-header--focused .sf-focused-brand { margin-right: auto; gap: 3px; }
.sf-header--focused .sf-brand-logo { width: 168px; }
.sf-header--focused .sf-brand-claim { width: 103px; margin-left: 38px; }
.sf-header--focused .sf-primary { display: none; }
.sf-header--focused .sf-focused-menu { display: inline-flex; }
}
@media (max-width: 640px) {
.sf-header--focused .sf-focused-top { gap: 6px; min-height: 72px; }
.sf-header--focused .sf-brand-logo { width: 148px; }
.sf-header--focused .sf-brand-claim { width: 91px; margin-left: 33px; }
.sf-header--focused .sf-header-shop { font-size: var(--sf-size-11); padding: 8px; }
}
@media (max-width: 360px) {
.sf-header--focused .sf-focused-top { gap: 4px; }
.sf-header--focused .sf-brand-logo { width: 122px; }
.sf-header--focused .sf-brand-claim { width: 76px; margin-left: 27px; }
.sf-header--focused .sf-header-shop { padding: 8px 6px; }
}
.sf-dynamik .sf-card-media, .sf-dynamik .sf-hero-visual, .sf-dynamik .sf-article-figure, .sf-dynamik .sf-block-image { position: relative; }
.sf-dynamik .sf-ai-mark { position: absolute; right: 8px; bottom: 8px; display: block; width: var(--sf-size-20); height: var(--sf-size-20); pointer-events: none; }
.sf-dynamik .sf-ai-mark svg { width: 100%; height: 100%; filter: drop-shadow(var(--sf-mark-shadow)); }
/* markenseite.css */
.sf-mks { display: grid; gap: var(--sf-hm-s6); padding-block: var(--sf-hm-s5) var(--sf-hm-s7); }
.sf-mks-kopf { display: grid; gap: var(--sf-hm-s4); max-width: 850px; }
.sf-mks-titel { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-display-condensed)); font-size: var(--sf-hb-bildkopf-titel-halb); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); line-height: var(--sf-hb-seitentitel-zeile, 1); text-transform: var(--sf-heading-case); }
.sf-mks-intro { margin: 0; max-width: 68ch; font-size: var(--sf-size-18); line-height: 1.6; white-space: pre-line; }
.sf-mks-fakten { margin: 0; color: var(--sf-neutral-600); font-size: var(--sf-size-14); }
.sf-mks-shop { color: var(--sf-ink); font-weight: 700; text-underline-offset: 4px; }
.sf-mks-nav { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s5); border-block: 1px solid var(--sf-neutral-200); padding-block: var(--sf-hm-s3); font-size: var(--sf-size-14); font-weight: 700; }
.sf-mks-abschnitt { display: grid; gap: var(--sf-hm-s5); scroll-margin-top: 100px; }
.sf-mks-weiter { display: grid; gap: var(--sf-hm-s4); border-top: 1px solid var(--sf-neutral-200); padding-top: var(--sf-hm-s5); }
.sf-mks-finden { display: grid; gap: var(--sf-hm-s5); padding-block: var(--sf-hm-s6); container-type: inline-size; container-name: sf-lp; scroll-margin-top: 100px; }
.sf-mks-suche { display: grid; gap: var(--sf-hm-s2); max-width: 520px; font-size: var(--sf-size-14); font-weight: 700; }
.sf-mks-suche input { width: 100%; min-height: 48px; border: 1px solid var(--sf-neutral-300); border-radius: 0; background: var(--sf-white); color: var(--sf-ink); padding: var(--sf-hm-s3) var(--sf-hm-s4); font: inherit; font-size: var(--sf-size-16); }
.sf-mks-suche input:focus-visible { outline: 2px solid var(--sf-blue); outline-offset: 2px; }
.sf-mks-az { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1); border-bottom: 1px solid var(--sf-neutral-200); padding-bottom: var(--sf-hm-s4); }
.sf-mks-az a { display: grid; place-items: center; min-width: 32px; min-height: 44px; font-weight: 700; font-size: var(--sf-size-14); color: var(--sf-ink); background: var(--sf-surface); text-decoration: none; }
.sf-mks-az a:hover { background: var(--sf-ink); color: var(--sf-white); }
.sf-mks-az span { display: grid; place-items: center; min-width: 24px; font-size: var(--sf-size-14); color: var(--sf-neutral-580); }
.sf-mks-register { display: grid; gap: var(--sf-hm-s5); }
.sf-mks-buchstabe { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sf-hm-s3); align-content: start; scroll-margin-top: 100px; }
.sf-mks-letter { margin: 0; color: var(--sf-blue); font-family: var(--sf-display-condensed); font-size: var(--sf-hb-zahl); line-height: 1.2; }
.sf-mks-liste { list-style: none; margin: 0; padding: 0; min-width: 0; }
.sf-mks-zeile { border-bottom: 1px solid var(--sf-neutral-200); }
.sf-mks-marke { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sf-hm-s2) var(--sf-hm-s3); color: var(--sf-ink); text-decoration: none; padding-block: var(--sf-hm-s3); }
.sf-mks-marke:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.sf-mks-marke strong { font-size: var(--sf-size-17); }
.sf-mks-zahl { color: var(--sf-neutral-600); font-size: var(--sf-size-12); white-space: nowrap; }
.sf-mks-zeichen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s3); color: var(--sf-neutral-600); font-size: var(--sf-size-12); }
.sf-mks-zeichen span::before { content: "· "; }
.sf-mks-zeichen [data-sf-art="aktion"] { color: var(--sf-fit); }
.sf-mks-leer { color: var(--sf-neutral-600); }
@container sf-lp (min-width: 800px) {
.sf-mks-register { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sf-hm-s6); }
}
.sf-mks-buchstabe[hidden], .sf-mks-zeile[hidden] { display: none; }
.sf-mwu > .sf-mwu-intro { margin-bottom: calc(-1 * var(--sf-hm-s5)); }
.sf-mwu > .sf-mks-finden { padding-top: 0; }
.sf-mwu-intro h1 { font-size: var(--sf-hb-bildkopf-titel-halb); line-height: 1.05; }
.sf-mkb-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sf-mkb-buehne { position: relative; display: grid; }
.sf-mkb-slide { display: flex; flex-direction: column; grid-area: 1 / 1; }
.sf-mkb-slide > .sf-hb-bildkopf { display: flex; flex: 1; flex-direction: column; }
.sf-mkb-slide .sf-hb-bildkopf-buehne { flex: 1; }
.sf-mkb-buehne .sf-mkb-slide .sf-hb-bildkopf-buehne, .sf-mks .sf-hb-bildkopf .sf-hb-bildkopf-buehne { min-height: var(--sf-mkb-buehne-hoehe); }
@container sf-mkb-buehne (min-width: 760px) {
.sf-mkb-buehne .sf-mkb-slide .sf-hb-bildkopf-buehne { min-height: var(--sf-mkb-buehne-hoehe-breit); }
}
.sf-mkb-slide:not([data-sf-aktiv]) { visibility: hidden; opacity: 0; }
.sf-mkb-slide[data-sf-aktiv] { animation: sf-mkb-ein 0.5s ease-out; }
@keyframes sf-mkb-ein { from { opacity: 0.35; } to { opacity: 1; } }
.sf-mkb-buehne { container: sf-mkb-buehne / inline-size; }
.sf-mkb-reiter { position: absolute; top: var(--sf-hm-s4); left: var(--sf-hm-s4); right: var(--sf-hm-s4); z-index: 3; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sf-hm-s2); }
.sf-mkb-reiter.sf-mkb-reiter > button { display: grid; gap: var(--sf-hm-s2); min-width: 0; min-height: 44px; align-content: start; border: 0; background: none; color: var(--sf-mkb-reiter-text); padding: var(--sf-hm-s1) 0; font: inherit; text-align: left; cursor: pointer; }
.sf-mkb-reiter.sf-mkb-reiter > button:focus-visible { outline: 2px solid var(--sf-white); outline-offset: 2px; }
.sf-mkb-reiter-linie { position: relative; display: block; height: 3px; overflow: hidden; background: var(--sf-mkb-reiter-grund); }
.sf-mkb-reiter.sf-mkb-reiter > button[data-sf-vorbei] .sf-mkb-reiter-linie { background: var(--sf-white); }
.sf-mkb-reiter-lauf { position: absolute; inset: 0 auto 0 0; width: 100%; background: var(--sf-white); transform-origin: left; animation: sf-mkb-lauf 7s linear forwards; }
.sf-mkb-buehne[data-sf-pause] .sf-mkb-reiter-lauf { animation-play-state: paused; }
@keyframes sf-mkb-lauf { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.sf-mkb-buehne .sf-hb-bildkopf-kicker, .sf-mkb-buehne .sf-hb-bildkopf-unter, .sf-mkb-reiter-name { text-shadow: var(--sf-mkb-text-schatten); }
.sf-mkb-reiter-name { overflow: hidden; font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.sf-mkb-reiter.sf-mkb-reiter > button[aria-selected="true"] .sf-mkb-reiter-name { color: var(--sf-white); }
@container sf-mkb-buehne (min-width: 760px) {
.sf-mkb-reiter { top: var(--sf-hm-s5); left: max(var(--sf-hm-s6), calc((100% - 1240px) / 2 + var(--sf-hm-s6))); right: auto; width: min(560px, calc(100% - 2 * var(--sf-hm-s6))); }
.sf-mkb-reiter-name { font-size: var(--sf-size-12); }
}
.sf-mkb-praesentiert { display: inline-block; background: var(--sf-white); color: var(--sf-ink); padding: var(--sf-hm-s1) var(--sf-hm-s2); font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sf-mkb-wahl, .sf-mkb-neu, .sf-mkb-galerie, .sf-mkb-abschnitt { display: grid; gap: var(--sf-hm-s5); container-type: inline-size; container-name: sf-lp; scroll-margin-top: 100px; }
.sf-mks-einfuehrung { display: grid; gap: var(--sf-hm-s3); max-width: 68ch; }
.sf-mks-inhalt { display: grid; gap: var(--sf-hm-s7); }
.sf-mkb-seite { padding-top: var(--sf-hm-s5); }
.sf-mkb-kopfzeile { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sf-hm-s4); }
.sf-mkb-kopfzeile > :first-child { flex: 1 1 320px; }
.sf-mkb-unterkopf { display: grid; gap: var(--sf-hm-s3); }
.sf-mkb-h1 { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-display-condensed)); font-size: var(--sf-hb-bildkopf-titel-halb); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); line-height: 1; text-transform: var(--sf-heading-case); }
.sf-mkb-suche { flex: 0 1 320px; }
.sf-mkb-suche input { width: 100%; min-height: 48px; border: 1px solid var(--sf-neutral-300); border-radius: 0; background: var(--sf-white); color: var(--sf-ink); padding: var(--sf-hm-s3) var(--sf-hm-s4); font: inherit; font-size: var(--sf-size-16); }
.sf-mkb-suche input:focus-visible { outline: 2px solid var(--sf-blue); outline-offset: 2px; }
.sf-mkb-reihe { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s3); }
.sf-mkb-marke { position: relative; display: grid; align-content: end; min-height: 150px; overflow: hidden; background: var(--sf-ink); color: var(--sf-white); text-decoration: none; }
.sf-mkb-marke.sf-mkb-marke { color: var(--sf-white); }
.sf-mkb-marke img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sf-mkb-marke::after { content: ""; position: absolute; inset: 0; background: var(--sf-mkb-shade); }
.sf-mkb-marke > span { position: relative; z-index: 1; display: grid; gap: 2px; padding: var(--sf-hm-s3); }
.sf-mkb-marke b { font-family: var(--sf-display-condensed); font-size: var(--sf-hb-zahl); line-height: 1; text-transform: var(--sf-heading-case); overflow-wrap: break-word; hyphens: auto; }
.sf-mkb-marke > .sf-mkb-neu-marke { position: absolute; top: var(--sf-hm-s3); left: var(--sf-hm-s3); z-index: 1; display: block; background: var(--sf-white); color: var(--sf-ink); padding: 2px var(--sf-hm-s2); font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-mkb-marke-mehr { display: -webkit-box; max-height: 0; overflow: hidden; opacity: 0; font-size: var(--sf-size-13); line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; transition: max-height 0.3s ease, opacity 0.3s ease; }
@media (hover: hover) {
.sf-mkb-marke:hover .sf-mkb-marke-mehr, .sf-mkb-marke:focus-visible .sf-mkb-marke-mehr { max-height: 3em; opacity: 1; }
}
.sf-mkb-marke small { font-size: var(--sf-size-12); opacity: 0.9; }
.sf-mkb-marke:hover img, .sf-mkb-marke:focus-visible img { transform: scale(1.04); }
.sf-mkb-marke:focus-visible { outline: 3px solid var(--sf-blue); outline-offset: 2px; }
.sf-mkb-leer { margin: 0; color: var(--sf-neutral-600); }
.sf-mkb-mosaik, .sf-mkb-strom { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-mkb-karte { position: relative; display: grid; align-content: start; gap: var(--sf-hm-s2); min-width: 0; }
.sf-mkb-karte-bild { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sf-surface); }
.sf-mkb-karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sf-mkb-karte:hover .sf-mkb-karte-bild img { transform: scale(1.03); }
.sf-mkb-art { position: absolute; top: var(--sf-hm-s3); left: var(--sf-hm-s3); background: var(--sf-white); color: var(--sf-ink); padding: 2px var(--sf-hm-s2); font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-mkb-karte-zeile { color: var(--sf-neutral-600); font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sf-mkb-karte-titel { margin: 0; font-size: var(--sf-size-18); line-height: 1.25; }
.sf-mkb-karte-link { color: var(--sf-ink); text-decoration: none; }
.sf-mkb-karte-link::after { content: ""; position: absolute; inset: 0; }
.sf-mkb-karte-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.sf-mkb-karte-link:focus-visible { outline: 2px solid var(--sf-blue); outline-offset: 2px; }
.sf-mkb-karte[data-sf-gross] .sf-mkb-karte-titel { font-family: var(--sf-display-condensed); font-size: var(--sf-hb-zahl); line-height: 1.05; text-transform: var(--sf-heading-case); }
.sf-mkb-karte-text { margin: 0; color: var(--sf-text); font-size: var(--sf-size-16); line-height: 1.5; }
.sf-mkb-az { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1); border-block: 1px solid var(--sf-neutral-200); padding-block: var(--sf-hm-s3); }
.sf-mkb-az a, .sf-mkb-az span { display: grid; place-items: center; min-width: 32px; min-height: 44px; font-size: var(--sf-size-14); font-weight: 700; }
.sf-mkb-az a { background: var(--sf-surface); color: var(--sf-ink); text-decoration: none; }
.sf-mkb-az a:hover { background: var(--sf-ink); color: var(--sf-white); }
.sf-mkb-az span { color: var(--sf-neutral-580); }
.sf-mkb-index { columns: 2 130px; column-gap: var(--sf-hm-s4); }
.sf-mkb-buchstabe { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--sf-hm-s3); align-content: start; break-inside: avoid; padding-bottom: var(--sf-hm-s4); scroll-margin-top: 100px; }
.sf-mkb-buchstabe[hidden], .sf-mkb-reihe li[hidden], .sf-mkb-buchstabe li[hidden] { display: none; }
.sf-mkb-letter { margin: 0; color: var(--sf-ink); font-family: var(--sf-display-condensed); font-size: var(--sf-hb-zahl); line-height: 1.1; }
.sf-mkb-buchstabe ul { list-style: none; margin: 0; padding: var(--sf-hm-s1) 0 0; display: grid; gap: var(--sf-hm-s1); }
.sf-mkb-buchstabe li { display: flex; align-items: baseline; gap: var(--sf-hm-s2); }
.sf-mkb-buchstabe a { color: var(--sf-ink); font-size: var(--sf-size-16); text-decoration: none; }
.sf-mkb-buchstabe a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sf-mkb-buchstabe [data-sf-auftritt] a { font-weight: 700; }
.sf-mkb-buchstabe small { color: var(--sf-neutral-600); font-size: var(--sf-size-12); }
.sf-mkb-mehr { justify-self: center; min-height: 48px; border: 1px solid var(--sf-ink); background: var(--sf-white); color: var(--sf-ink); padding: 0 var(--sf-hm-s5); font: inherit; font-weight: 700; cursor: pointer; }
.sf-mkb-mehr:hover { background: var(--sf-ink); color: var(--sf-white); }
.sf-mkb-mehr:focus-visible { outline: 2px solid var(--sf-blue); outline-offset: 2px; }
@container sf-lp (min-width: 600px) {
.sf-mkb-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-mkb-marke { min-height: 190px; }
.sf-mkb-mosaik, .sf-mkb-strom { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-mkb-mosaik > .sf-mkb-karte[data-sf-gross], .sf-mkb-strom > .sf-mkb-karte[data-sf-gross] { grid-column: 1 / -1; }
}
@container sf-lp (min-width: 960px) {
.sf-mkb-reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-mkb-mosaik:not([data-sf-anzahl="1"]), .sf-mkb-strom { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-mkb-mosaik:not([data-sf-anzahl="1"]) > .sf-mkb-karte[data-sf-gross] { grid-column: span 2; grid-row: span 2; }
.sf-mkb-strom > .sf-mkb-karte[data-sf-gross] { grid-column: span 2; }
.sf-mkb-strom[data-sf-anzahl="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-mkb-index { columns: 5; }
}
@media (prefers-reduced-motion: reduce) {
.sf-mkb-slide[data-sf-aktiv] { animation: none; }
.sf-mkb-reiter-lauf { animation: none; }
.sf-mkb-marke-mehr { transition: none; }
.sf-mkb-marke img, .sf-mkb-karte-bild img { transition: none; }
}
.sf-mks-mehr { max-width: 68ch; }
.sf-mks-mehr summary { cursor: pointer; color: var(--sf-ink); font-size: var(--sf-size-16); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sf-mks-mehr p { margin: var(--sf-hm-s3) 0 0; color: var(--sf-text); font-size: var(--sf-size-16); line-height: 1.6; }
.sf-mks-filter { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-mks-filter button { min-height: 40px; border: 1px solid var(--sf-neutral-300); border-radius: 999px; background: var(--sf-white); color: var(--sf-ink); padding: 0 var(--sf-hm-s4); font: inherit; font-size: var(--sf-size-14); font-weight: 700; cursor: pointer; }
.sf-mks-filter button[aria-pressed="true"] { border-color: var(--sf-ink); background: var(--sf-ink); color: var(--sf-white); }
.sf-mks-filter button:focus-visible { outline: 2px solid var(--sf-blue); outline-offset: 2px; }
.sf-mks-inhalte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); }
.sf-mks-eintrag { position: relative; display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: var(--sf-hm-s3); }
.sf-mks-eintrag-bild { display: block; aspect-ratio: 1; overflow: hidden; background: var(--sf-surface); }
.sf-mks-eintrag-bild img { width: 100%; height: 100%; object-fit: cover; }
.sf-mks-eintrag-text { display: grid; gap: var(--sf-hm-s1); min-width: 0; }
.sf-mks-eintrag-titel { margin: 0; font-size: var(--sf-size-16); line-height: 1.3; }
.sf-mks-gebucht { color: var(--sf-neutral-600); font-size: var(--sf-size-12); }
.sf-mks-reihe { list-style: none; margin: 0; padding: 0 0 var(--sf-hm-s2); display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 70%); gap: var(--sf-hm-s3); overflow-x: auto; scroll-snap-type: x mandatory; }
.sf-mks-reihe > li { scroll-snap-align: start; }
.sf-mks-chip { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: var(--sf-hm-s3); min-height: 64px; border: 1px solid var(--sf-neutral-200); background: var(--sf-white); text-decoration: none; }
.sf-mks-chip.sf-mks-chip { color: var(--sf-ink); }
.sf-mks-chip img { width: 64px; height: 64px; object-fit: cover; }
.sf-mks-chip span { display: grid; gap: 2px; padding-right: var(--sf-hm-s3); }
.sf-mks-chip small { color: var(--sf-neutral-600); font-size: var(--sf-size-12); }
.sf-mks-chip:focus-visible { outline: 2px solid var(--sf-blue); outline-offset: 2px; }
.sf-mks-aehnlich .sf-mkb-marke { min-height: 120px; }
@container sf-lp (min-width: 600px) {
.sf-mks-inhalte { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s5) var(--sf-hm-s5); }
.sf-mks-eintrag { grid-template-columns: 120px minmax(0, 1fr); }
.sf-mks-reihe { grid-auto-columns: minmax(220px, 1fr); }
}
@container sf-lp (min-width: 960px) {
.sf-mks-inhalte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-mks-reihe { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow-x: visible; }
.sf-mks-aehnlich { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@container sf-lp (min-width: 760px) {
.sf-mks-inhalt .sf-mkb-mosaik .sf-mkb-karte-bild { aspect-ratio: 16 / 9; }
.sf-mks-inhalt .sf-mkb-mosaik[data-sf-anzahl="1"] { grid-template-columns: minmax(0, 1fr); }
.sf-mks-inhalt .sf-mkb-mosaik[data-sf-anzahl="1"] > .sf-mkb-karte { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-content: center; column-gap: var(--sf-hm-s5); }
.sf-mks-inhalt .sf-mkb-mosaik[data-sf-anzahl="1"] > .sf-mkb-karte > .sf-mkb-karte-bild { grid-row: 1 / span 4; grid-column: 1; }
.sf-mks-inhalt .sf-mkb-mosaik[data-sf-anzahl="1"] > .sf-mkb-karte > :not(.sf-mkb-karte-bild) { grid-column: 2; }
}
/* markenbuehne-wand.css */
.sf-mwb-buehne { --sf-mwb-g: var(--sf-mwb-std-grund); --sf-mwb-f: var(--sf-mwb-std-flaeche); --sf-mwb-t: var(--sf-mwb-std-text); --sf-mwb-l: var(--sf-mwb-std-linie); --sf-mwb-a: var(--sf-mwb-std-akzent); --sf-mwb-at: var(--sf-mwb-std-akzenttext); container: sf-mwb / inline-size; background: var(--sf-mwb-g); color: var(--sf-mwb-t); font-family: var(--sf-body); }
.sf-mwb-in { width: min(var(--sf-content), calc(100% - var(--sf-gutter) * 2)); margin-inline: auto; }
.sf-mwb-held { position: relative; overflow: hidden; }
.sf-mwb-held > img, .sf-mwb-stadt-bild > img { display: block; width: 100%; height: var(--sf-mwb-held-h); object-fit: cover; }
.sf-mwb-held::after { content: ""; position: absolute; inset: auto 0 0 0; height: 55%; background: linear-gradient(180deg, transparent, var(--sf-mwb-g)); pointer-events: none; }
.sf-mwb-held::before { content: ""; position: absolute; inset: 0 0 auto 0; z-index: 1; height: 28%; background: var(--sf-mwb-schleier-oben); pointer-events: none; }
.sf-mwb-ober { position: absolute; inset: 0 0 auto 0; z-index: 2; padding-top: var(--sf-hm-s4); color: var(--sf-white); }
.sf-mwb-unter { position: absolute; inset: auto 0 0 0; z-index: 2; }
.sf-mwb-name.sf-mwb-name { margin: 0; font: var(--sf-heading-weight) var(--sf-mwb-name-groesse) / 0.78 var(--sf-display-condensed); letter-spacing: -0.012em; text-transform: none; text-wrap: balance; color: inherit; }
.sf-mwb-buehne[data-sf-stil="nah"] .sf-mwb-unter { padding-bottom: 6px; }
.sf-mwb-buehne[data-sf-stil="weit"] .sf-mwb-held > img { height: var(--sf-mwb-held-h-weit); }
.sf-mwb-buehne[data-sf-stil="weit"] .sf-mwb-held::before { height: 60%; background: var(--sf-mwb-schleier-himmel); }
.sf-mwb-buehne[data-sf-stil="weit"] .sf-mwb-name.sf-mwb-name { margin-top: 18px; color: var(--sf-white); font-size: var(--sf-mwb-name-weit); }
.sf-mwb-stadt { display: grid; }
.sf-mwb-stadt-bild { position: relative; overflow: hidden; }
.sf-mwb-stadt-bild > img { height: auto; aspect-ratio: 4 / 3; }
.sf-mwb-stapel { display: grid; padding-block: 18px 4px; }
.sf-mwb-stapel-name.sf-mwb-stapel-name { margin: 0; text-transform: none; color: var(--sf-mwb-t); }
.sf-mwb-stapel-name > span { display: block; font: var(--sf-heading-weight) var(--sf-mwb-name-stadt) / 0.8 var(--sf-display-condensed); letter-spacing: -0.01em; }
.sf-mwb-stapel-name > .sf-mwb-hohl { color: transparent; -webkit-text-stroke: 2px var(--sf-mwb-t); }
.sf-mwb-stapel-name > .sf-mwb-akz { color: var(--sf-mwb-a); }
.sf-mwb-mitte { padding-top: 20px; }
.sf-mwb-cta { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-mwb-k1.sf-mwb-k1, .sf-mwb-k2.sf-mwb-k2 { display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; font: 700 var(--sf-size-15) / 1 var(--sf-body); text-decoration: none; }
.sf-mwb-k1.sf-mwb-k1 { border: 1px solid var(--sf-mwb-a); background: var(--sf-mwb-a); color: var(--sf-mwb-at); }
.sf-mwb-k2.sf-mwb-k2 { border: 1px solid var(--sf-mwb-t); color: var(--sf-mwb-t); }
.sf-mwb-steck.sf-mwb-steck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 22px 0 0; border-top: 1px solid var(--sf-mwb-t); border-bottom: 1px solid color-mix(in srgb, var(--sf-mwb-t) 20%, transparent); }
.sf-mwb-steck > div { min-width: 0; padding: 10px 10px 11px 0; }
.sf-mwb-steck dt { font: 700 var(--sf-size-10) / 1 var(--sf-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-mwb-l); }
.sf-mwb-steck dd { margin: 6px 0 0; font: 700 var(--sf-size-14) / 1.25 var(--sf-body); hyphens: auto; overflow-wrap: break-word; }
.sf-mwb-oben2 { margin-top: 34px; }
.sf-mwb-satz.sf-mwb-satz { max-width: 17ch; margin: 28px 0 22px; font: var(--sf-heading-weight) var(--sf-mwb-satz-groesse) / 0.98 var(--sf-display-condensed); text-wrap: balance; }
.sf-mwb-neu.sf-mwb-neu { display: grid; gap: 4px; padding-block: 12px; border-top: 1px solid var(--sf-mwb-t); border-bottom: 1px solid var(--sf-mwb-t); color: inherit; text-decoration: none; }
.sf-mwb-neu > span { font: 700 var(--sf-size-10) / 1 var(--sf-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-mwb-l); }
.sf-mwb-neu > b { font: var(--sf-heading-weight) var(--sf-mwb-neu-groesse) / 1 var(--sf-display-condensed); text-wrap: balance; }
.sf-mwb-neu > .sf-mwb-neu-weiter { font: 500 var(--sf-size-13) / 1.3 var(--sf-body); letter-spacing: 0; text-transform: none; }
.sf-mwb-abschnitt { margin-top: 28px; }
.sf-mwb-abkopf { display: flex; align-items: end; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--sf-mwb-t); }
.sf-mwb-abkopf > h3.sf-mwb-abtitel { margin: 0; font: var(--sf-heading-weight) var(--sf-mwb-abschnitt-groesse) / 1 var(--sf-display-condensed); text-transform: none; color: inherit; }
.sf-mwb-link.sf-mwb-link { padding-bottom: 1px; border-bottom: 1px solid currentColor; font: 700 var(--sf-size-14) / 1.2 var(--sf-body); color: inherit; text-decoration: none; }
.sf-mwb-strecke { display: grid; grid-auto-flow: column; grid-auto-columns: 78%; gap: 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sf-mwb-strecke::-webkit-scrollbar { display: none; }
.sf-mwb-strecke > figure { display: grid; align-content: start; gap: 6px; margin: 0; scroll-snap-align: start; }
.sf-mwb-bild { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--sf-mwb-f); }
.sf-mwb-bild > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-mwb-strecke figcaption { padding-bottom: 6px; font: 500 var(--sf-size-13) / 1.4 var(--sf-body); color: var(--sf-mwb-l); }
.sf-mwb-prod { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.sf-mwb-prod > a.sf-mwb-produkt { display: grid; align-content: start; gap: 6px; color: inherit; text-decoration: none; }
.sf-mwb-pbild { position: relative; display: block; aspect-ratio: 1; background: var(--sf-white); }
.sf-mwb-pbild > img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; }
.sf-mwb-produkt > b { font: 700 var(--sf-size-13) / 1.25 var(--sf-body); }
.sf-mwb-produkt > small { font: 500 var(--sf-size-12) / 1.2 var(--sf-body); color: var(--sf-mwb-l); }
.sf-mwb-shopband.sf-mwb-shopband { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px; background: var(--sf-mwb-a); color: var(--sf-mwb-at); font: var(--sf-heading-weight) var(--sf-mwb-shopband-groesse) / 1 var(--sf-display-condensed); text-decoration: none; }
.sf-mwb-ende { height: 44px; }
@container sf-mwb (min-width: 760px) {
.sf-mwb-held > img { height: var(--sf-mwb-held-h-breit); }
.sf-mwb-buehne[data-sf-stil="weit"] .sf-mwb-held > img { height: var(--sf-mwb-held-h-weit-breit); }
.sf-mwb-ober { padding-top: 26px; }
.sf-mwb-steck dd { font-size: var(--sf-size-17); }
.sf-mwb-oben2 { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: end; }
.sf-mwb-satz.sf-mwb-satz { margin: 0 0 6px; }
.sf-mwb-neu.sf-mwb-neu { gap: 6px; padding-block: 16px; }
.sf-mwb-abschnitt { margin-top: 36px; }
.sf-mwb-strecke { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.sf-mwb-prod { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sf-mwb-stadt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sf-mwb-stadt-bild > img { aspect-ratio: auto; height: 100%; min-height: var(--sf-mwb-held-h-breit); }
.sf-mwb-stapel { align-content: end; padding: 26px 30px; }
}
.sf-mwb-wand { container: sf-mwb-wand / inline-size; padding-top: 34px; font-family: var(--sf-body); color: var(--sf-ink); }
.sf-mwb-wkopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 14px 24px; margin-bottom: 16px; }
.sf-mwb-wkopf > div { display: grid; gap: 8px; }
.sf-mwb-kicker.sf-mwb-kicker { margin: 0; font: 700 var(--sf-size-11) / 1.2 var(--sf-body); letter-spacing: 0.14em; text-transform: uppercase; }
.sf-mwb-h1.sf-mwb-h1 { margin: 0; font: var(--sf-heading-weight) var(--sf-mwb-h1-groesse) / 0.95 var(--sf-display-condensed); letter-spacing: 0; text-transform: none; text-wrap: balance; }
.sf-mwb-wkopf .sf-mwb-link.sf-mwb-link { color: var(--sf-ink); }
.sf-mwb-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.sf-mwb-chip.sf-mwb-chip { min-height: 40px; padding: 10px 12px; border: 1px solid var(--sf-line-stark); background: var(--sf-white); color: var(--sf-ink); font: 600 var(--sf-size-14) / 1 var(--sf-body); cursor: pointer; }
.sf-mwb-chip.sf-mwb-chip[aria-pressed="true"] { border-color: var(--sf-ink); background: var(--sf-ink); color: var(--sf-white); }
.sf-mwb-rahmen { position: relative; }
.sf-mwb-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: var(--sf-mwb-zeile); gap: 3px; }
.sf-mwb-p.sf-mwb-p { --sf-mwb-ton: var(--sf-mwb-plakat-grund); --sf-mwb-txt: var(--sf-mwb-plakat-text); position: relative; display: block; grid-column: var(--sf-mwb-mc) / span var(--sf-mwb-mw); grid-row: var(--sf-mwb-mr) / span var(--sf-mwb-mh); overflow: hidden; margin: 0; padding: 0; background: var(--sf-mwb-ton); color: var(--sf-mwb-txt); text-align: left; text-decoration: none; cursor: pointer; transition: opacity 0.3s, filter 0.3s; }
.sf-mwb-p[data-sf-ton="1"] { --sf-mwb-ton: var(--sf-mwb-typo-1); --sf-mwb-txt: var(--sf-white); }
.sf-mwb-p[data-sf-ton="2"] { --sf-mwb-ton: var(--sf-mwb-typo-2); --sf-mwb-txt: var(--sf-ink); }
.sf-mwb-p[data-sf-ton="3"] { --sf-mwb-ton: var(--sf-mwb-typo-3); --sf-mwb-txt: var(--sf-white); }
.sf-mwb-p[data-sf-ton="4"] { --sf-mwb-ton: var(--sf-mwb-typo-4); --sf-mwb-txt: var(--sf-ink); }
.sf-mwb-p > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.sf-mwb-p:hover > img { transform: scale(1.035); }
.sf-mwb-p.sf-mwb-p:focus-visible { outline: 3px solid var(--sf-blue); outline-offset: -3px; }
.sf-mwb-p.sf-mwb-p[data-sf-aus] { opacity: 0.14; filter: grayscale(1); }
.sf-mwb-schleier::after { content: ""; position: absolute; inset: 0; background: var(--sf-mwb-schleier-unten); pointer-events: none; }
.sf-mwb-txt { position: absolute; inset: auto 0 0 0; z-index: 2; display: grid; gap: 4px; padding: 10px 11px; }
.sf-mwb-pname { display: block; margin: 0; font: var(--sf-heading-weight) var(--sf-mwb-pname) / 0.92 var(--sf-display-condensed); letter-spacing: 0.005em; }
.sf-mwb-ort { font: 700 var(--sf-size-10) / 1.25 var(--sf-body); letter-spacing: 0.12em; text-transform: uppercase; }
.sf-mwb-tag { justify-self: start; padding: 5px 6px; background: var(--sf-white); color: var(--sf-ink); font: 700 var(--sf-size-10) / 1 var(--sf-body); letter-spacing: 0.12em; text-transform: uppercase; }
.sf-mwb-psatz { display: none; max-width: 40ch; font: 500 var(--sf-size-15) / 1.35 var(--sf-body); }
.sf-mwb-p-gross .sf-mwb-pname { font-size: var(--sf-mwb-gross-name); line-height: 0.8; }
.sf-mwb-p-gross .sf-mwb-txt { gap: 8px; }
.sf-mwb-p-hoch > img { left: 30%; width: 70%; }
.sf-mwb-feld { position: absolute; inset: 0 auto 0 0; z-index: 1; display: flex; align-items: flex-end; justify-content: center; width: 30%; overflow: hidden; padding: 10px 0; background: var(--sf-mwb-ton); }
.sf-mwb-vname { display: block; margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); font: var(--sf-heading-weight) var(--sf-mwb-vname) / 0.78 var(--sf-display-condensed); color: var(--sf-mwb-txt); }
.sf-mwb-p-hoch .sf-mwb-txt { left: 30%; color: var(--sf-white); }
.sf-mwb-typo { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: space-between; height: 100%; padding: 10px 11px; }
.sf-mwb-zahl { display: block; margin: 0; font: var(--sf-heading-weight) var(--sf-mwb-zahl) / 0.8 var(--sf-display-condensed); letter-spacing: -0.01em; }
.sf-mwb-ortgross { display: block; margin: 0; font: var(--sf-heading-weight) var(--sf-mwb-ortgross) / 0.86 var(--sf-display-condensed); text-transform: uppercase; text-wrap: balance; }
.sf-mwb-typo .sf-mwb-pname { font-size: var(--sf-mwb-pname-klein); }
.sf-mwb-klein { display: none; font: 500 var(--sf-size-12) / 1.3 var(--sf-body); opacity: 0.85; }
.sf-mwb-typofuss { display: grid; gap: 3px; }
.sf-mwb-p-band > img { height: 68%; }
.sf-mwb-bandfeld { position: absolute; inset: auto 0 0 0; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 32%; padding: 8px 11px; background: var(--sf-mwb-ton); color: var(--sf-mwb-txt); }
.sf-mwb-p-streifen .sf-mwb-txt { top: 0; display: flex; flex-direction: column; justify-content: center; padding-inline: 14px; background: var(--sf-mwb-schleier-links); color: var(--sf-white); }
.sf-mwb-p-streifen .sf-mwb-pname { font-size: var(--sf-mwb-streifen-name); line-height: 0.82; }
.sf-mwb-akzent { color: var(--sf-mwb-akz, var(--sf-white)); }
.sf-mwb-etikett { position: absolute; inset: 0 auto auto 0; z-index: 2; display: grid; gap: 3px; max-width: 80%; padding: 9px 12px 10px; background: var(--sf-mwb-ton); color: var(--sf-mwb-txt); }
.sf-mwb-etikett .sf-mwb-pname { font-size: var(--sf-mwb-quer-name); }
.sf-mwb-p-produkt .sf-mwb-txt { right: auto; max-width: 78%; background: var(--sf-white); color: var(--sf-ink); }
.sf-mwb-p-bild .sf-mwb-txt, .sf-mwb-p-bild-hoch .sf-mwb-txt, .sf-mwb-p-gross .sf-mwb-txt { color: var(--sf-white); }
.sf-mwb-p.sf-mwb-alle { display: flex; flex-direction: column; justify-content: space-between; padding: 12px; background: var(--sf-ink); color: var(--sf-white); }
.sf-mwb-alle > b { font: var(--sf-heading-weight) var(--sf-mwb-alle-name) / 0.92 var(--sf-display-condensed); text-wrap: balance; }
.sf-mwb-alle > span { font: var(--sf-heading-weight) var(--sf-mwb-alle-pfeil) / 1 var(--sf-display-condensed); }
.sf-mwb-aushang { position: absolute; left: 0; right: 0; z-index: 4; display: grid; border: 1px solid var(--sf-ink); background: var(--sf-white); color: var(--sf-ink); box-shadow: var(--sf-mwb-schatten); }
.sf-mwb-aushang[hidden] { display: none; }
.sf-mwb-a-bild { position: relative; overflow: hidden; aspect-ratio: 16 / 9; background: var(--sf-mwb-ton, var(--sf-ink)); color: var(--sf-mwb-txt, var(--sf-white)); }
.sf-mwb-a-bild > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-mwb-a-typo { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 16px; font: var(--sf-heading-weight) var(--sf-mwb-a-typo) / 0.8 var(--sf-display-condensed); }
.sf-mwb-a-text { display: grid; gap: 12px; padding: 16px 16px 18px; }
.sf-mwb-a-name.sf-mwb-a-name { margin: 0; font: var(--sf-heading-weight) var(--sf-mwb-a-name) / 0.92 var(--sf-display-condensed); text-transform: none; }
.sf-mwb-a-satz.sf-mwb-a-satz { margin: 0; font-size: var(--sf-size-15); }
.sf-mwb-a-steck.sf-mwb-a-steck { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--sf-ink); border-bottom: 1px solid var(--sf-line); }
.sf-mwb-a-steck > div { min-width: 0; padding: 9px 10px 9px 0; }
.sf-mwb-a-steck dt { font: 700 var(--sf-size-10) / 1 var(--sf-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-muted); }
.sf-mwb-a-steck dd { margin: 5px 0 0; font: 600 var(--sf-size-14) / 1.3 var(--sf-body); overflow-wrap: break-word; }
.sf-mwb-a-neu.sf-mwb-a-neu { display: grid; gap: 3px; margin: 0; font-size: var(--sf-size-14); }
.sf-mwb-a-neu > span { font: 700 var(--sf-size-10) / 1 var(--sf-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-muted); }
.sf-mwb-a-neu > a.sf-mwb-a-neulink { font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.sf-mwb-a-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-mwb-knopf.sf-mwb-knopf { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid var(--sf-ink); background: var(--sf-white); color: var(--sf-ink); font: 700 var(--sf-size-14) / 1 var(--sf-body); text-decoration: none; }
.sf-mwb-knopf.sf-mwb-knopf-voll { background: var(--sf-ink); color: var(--sf-white); }
.sf-mwb-a-foto.sf-mwb-a-foto { margin: 0; font-size: var(--sf-size-11); color: var(--sf-muted); }
.sf-mwb-a-zu.sf-mwb-a-zu { position: absolute; top: 0; right: 0; z-index: 3; min-height: 44px; padding: 11px 12px; border: 0; background: var(--sf-ink); color: var(--sf-white); font: 700 var(--sf-size-13) / 1 var(--sf-body); cursor: pointer; }
@container sf-mwb-wand (min-width: 760px) {
.sf-mwb-wand { padding-top: 48px; }
.sf-mwb-raster { grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: var(--sf-mwb-zeile-breit); gap: 4px; }
.sf-mwb-p.sf-mwb-p { grid-column: var(--sf-mwb-dc) / span var(--sf-mwb-dw); grid-row: var(--sf-mwb-dr) / span var(--sf-mwb-dh); }
.sf-mwb-txt { padding: 16px 18px; }
.sf-mwb-p-gross .sf-mwb-txt { padding: 26px 28px; }
.sf-mwb-p-gross .sf-mwb-psatz { display: block; }
.sf-mwb-pname { font-size: var(--sf-mwb-pname-breit); }
.sf-mwb-p-band .sf-mwb-pname, .sf-mwb-typo .sf-mwb-pname { font-size: var(--sf-mwb-pname-mittel); }
.sf-mwb-typo { padding: 16px 18px; }
.sf-mwb-klein { display: block; }
.sf-mwb-bandfeld { padding: 10px 18px; }
.sf-mwb-p-streifen .sf-mwb-txt { padding-inline: 30px; }
.sf-mwb-etikett { padding: 12px 16px 14px; }
.sf-mwb-p.sf-mwb-alle { padding: 18px; }
.sf-mwb-vname { font-size: var(--sf-mwb-vname-breit); }
.sf-mwb-aushang { left: auto; right: 0; width: min(560px, 46cqi); }
.sf-mwb-aushang[data-sf-links] { right: auto; left: 0; }
.sf-mwb-a-text { padding: 20px 22px 22px; }
}
/* storys.css */
.sf-st-seite { container: sf-st / inline-size; display: grid; gap: var(--sf-hm-s5); padding-block: var(--sf-hm-s4) var(--sf-hm-abschnitt); min-width: 0; }
.sf-st-kopf { display: grid; gap: var(--sf-hm-s2); padding-bottom: var(--sf-hm-s4); border-bottom: 1px solid var(--sf-line); }
.sf-st-h1.sf-st-h1 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-bildkopf-titel-halb); font-weight: var(--sf-hb-titel-gewicht); line-height: 0.98; letter-spacing: 0; text-transform: none; color: var(--sf-ink); }
.sf-st-unter.sf-st-unter { margin: 0; max-width: 62ch; font-family: var(--sf-body); font-size: var(--sf-hb-text); line-height: 1.45; color: var(--sf-text); }
.sf-st-saison.sf-st-saison { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-travel); }
.sf-st-kopf-text { position: relative; display: grid; gap: var(--sf-hm-s2); min-width: 0; }
.sf-st-kopf--bild.sf-st-kopf--bild { position: relative; align-content: end; gap: var(--sf-hm-s5); min-height: var(--sf-st-kopf-hoehe); padding: var(--sf-hm-s7) var(--sf-hm-s4) var(--sf-hm-s4); border-bottom: 0; overflow: hidden; background: var(--sf-ink); color: var(--sf-white); }
.sf-st-kopf--bild::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, var(--sf-hb-schleier-null) 0%, var(--sf-hb-schleier-null) 22%, var(--sf-hb-schleier-mitte) 58%, var(--sf-hb-schleier-tief) 100% ); }
.sf-st-stimmung.sf-st-stimmung { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-st-kopf--bild .sf-st-kopf-text, .sf-st-kopf--bild .sf-str-rahmen { position: relative; z-index: 2; }
.sf-st-kopf--bild .sf-st-saison.sf-st-saison, .sf-st-kopf--bild .sf-st-h1.sf-st-h1, .sf-st-kopf--bild .sf-st-unter.sf-st-unter { color: var(--sf-white); text-shadow: 0 1px 10px var(--sf-hb-schleier-mitte); }
@container sf-st (min-width: 960px) {
.sf-st-kopf--bild.sf-st-kopf--bild { min-height: var(--sf-st-kopf-hoehe-breit); padding: var(--sf-hm-s7) var(--sf-hm-s6) var(--sf-hm-s5); }
}
.sf-st-kopf--motive.sf-st-kopf--motive { position: relative; isolation: isolate; align-content: end; gap: var(--sf-hm-s5); padding: var(--sf-st-motive-luft) var(--sf-hm-s4) var(--sf-hm-s4); border-bottom: 0; overflow: hidden; background: var(--sf-st-motive-grund); color: var(--sf-white); }
.sf-st-kopf--motive::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: var(--sf-st-motive-schleier); }
.sf-st-kopf--motive .sf-st-kopf-text, .sf-st-kopf--motive .sf-str-rahmen { position: relative; z-index: 2; }
.sf-st-kopf--motive .sf-st-kopf-text { justify-self: start; }
.sf-st-kopf--motive .sf-st-saison.sf-st-saison { display: flex; align-items: center; gap: 10px; font-size: var(--sf-st-motive-saison); line-height: 1; letter-spacing: 0.12em; color: var(--sf-white); }
.sf-st-kopf--motive .sf-st-saison.sf-st-saison::before { content: ""; width: 22px; height: 2px; background: var(--sf-st-motive-strich); }
.sf-st-kopf--motive .sf-st-h1.sf-st-h1 { font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-size: var(--sf-st-motive-h1); font-weight: 800; line-height: 0.88; color: var(--sf-white); }
.sf-st-motive { position: absolute; inset: 0; z-index: 0; overflow: hidden; container: sf-st-motive / size; }
.sf-st-motiv.sf-st-motiv { --sf-st-zx: 0.5; --sf-st-zy: calc((var(--sf-st-motive-luft) - 10px) / 2); --sf-st-z: var(--sf-st-zs, 1); --sf-st-mw: calc(max(100cqw, 100cqh * var(--sf-st-q, 1.5)) * var(--sf-st-z)); --sf-st-mh: calc(var(--sf-st-mw) / var(--sf-st-q, 1.5)); position: absolute; left: clamp( calc(100cqw - var(--sf-st-mw)), calc(var(--sf-st-zx) * 100cqw - var(--sf-st-fx, 0.5) * var(--sf-st-mw)), 0px ); top: clamp( calc(100cqh - var(--sf-st-mh)), calc(var(--sf-st-zy) - var(--sf-st-fy, 0.5) * var(--sf-st-mh)), 0px ); width: var(--sf-st-mw); height: var(--sf-st-mh); max-width: none; max-height: none; object-fit: cover; opacity: 0; transition: opacity 1.6s ease 1.6s; }
.sf-st-motiv[data-sf-aktiv] { opacity: 1; transition-delay: 0s; }
@container sf-st-motive (min-width: 960px) {
.sf-st-motiv.sf-st-motiv { --sf-st-zx: 0.7; --sf-st-zy: calc((100cqh - 19.25cqw - 32px) / 2); --sf-st-z: var(--sf-st-zb, 1); }
}
.sf-st-motiv-steuer { position: absolute; z-index: 3; top: var(--sf-hm-s3); right: var(--sf-hm-s3); display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 9px; background: var(--sf-st-motive-steuer-grund); }
.sf-st-motiv-nachweise { display: grid; justify-items: end; }
.sf-st-motiv-nachweis.sf-st-motiv-nachweis { grid-area: 1 / 1; font-family: var(--sf-body); font-size: var(--sf-st-motive-nachweis); font-weight: 600; line-height: 1.2; color: var(--sf-hb-hell-text); text-align: right; white-space: nowrap; opacity: 0; transition: opacity 0.6s ease; }
.sf-st-motiv-nachweis[data-sf-aktiv] { opacity: 1; }
.sf-st-stationen { position: relative; display: flex; gap: 14px; padding: 4px 2px; }
.sf-st-stationen::before { content: ""; position: absolute; top: 50%; left: 8px; right: 8px; height: 1.5px; background: var(--sf-st-motive-linie); }
.sf-st-punkt.sf-st-punkt { position: relative; box-sizing: border-box; display: block; width: var(--sf-st-motive-punkt); height: var(--sf-st-motive-punkt); min-width: 0; min-height: 0; margin: 0; padding: 0; border: 2px solid var(--sf-white); border-radius: 50%; background: var(--sf-st-motive-grund); transition: transform 0.3s ease; }
.sf-st-punkt::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--sf-travel); opacity: 0; transition: opacity 0.3s ease; }
.sf-st-stationen[role="group"] .sf-st-punkt { cursor: pointer; }
.sf-st-stationen[role="group"] .sf-st-punkt::after { content: ""; position: absolute; inset: -14px; }
.sf-st-punkt[data-sf-aktiv] { transform: scale(1.15); }
.sf-st-punkt[data-sf-aktiv]::before { opacity: 1; }
.sf-st-punkt.sf-st-punkt:focus-visible { outline: 3px solid var(--sf-st-motive-strich); outline-offset: 2px; }
@container sf-st (min-width: 960px) {
.sf-st-kopf--motive.sf-st-kopf--motive { align-content: space-between; min-height: var(--sf-st-motive-hoehe-breit); padding: var(--sf-hm-s7) var(--sf-hm-s6) var(--sf-hm-s5); }
.sf-st-kopf--motive::before { background: var(--sf-st-motive-schleier-breit); }
.sf-st-kopf--motive .sf-st-saison.sf-st-saison { font-size: var(--sf-st-motive-saison-breit); }
.sf-st-kopf--motive .sf-st-h1.sf-st-h1 { font-size: var(--sf-st-motive-h1-breit); }
.sf-st-motiv-steuer { top: 22px; right: 28px; }
}
.sf-embed-root.sf-motion .sf-st-kopf--motive[data-sf-motive="2"] .sf-st-motiv { animation: sf-st-motiv-2 16s ease infinite; animation-delay: calc((var(--sf-st-i) - 2) * 8s - 1.6s); }
.sf-embed-root.sf-motion .sf-st-kopf--motive[data-sf-motive="3"] .sf-st-motiv { animation: sf-st-motiv-3 24s ease infinite; animation-delay: calc((var(--sf-st-i) - 3) * 8s - 1.6s); }
.sf-embed-root.sf-motion .sf-st-kopf--motive[data-sf-motive="4"] .sf-st-motiv { animation: sf-st-motiv-4 32s ease infinite; animation-delay: calc((var(--sf-st-i) - 4) * 8s - 1.6s); }
.sf-embed-root.sf-motion .sf-st-kopf--motive[data-sf-motive="2"] .sf-st-motiv-nachweis, .sf-embed-root.sf-motion .sf-st-kopf--motive[data-sf-motive="2"] .sf-st-punkt::before { animation: sf-st-nachweis-2 16s linear infinite; animation-delay: calc((var(--sf-st-i) - 2) * 8s - 1.6s); }
.sf-embed-root.sf-motion .sf-st-kopf--motive[data-sf-motive="3"] .sf-st-motiv-nachweis, .sf-embed-root.sf-motion .sf-st-kopf--motive[data-sf-motive="3"] .sf-st-punkt::before { animation: sf-st-nachweis-3 24s linear infinite; animation-delay: calc((var(--sf-st-i) - 3) * 8s - 1.6s); }
.sf-embed-root.sf-motion .sf-st-kopf--motive[data-sf-motive="4"] .sf-st-motiv-nachweis, .sf-embed-root.sf-motion .sf-st-kopf--motive[data-sf-motive="4"] .sf-st-punkt::before { animation: sf-st-nachweis-4 32s linear infinite; animation-delay: calc((var(--sf-st-i) - 4) * 8s - 1.6s); }
@keyframes sf-st-motiv-2 { 0%, 50% { opacity: 1; } 60%, 90% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sf-st-motiv-3 { 0%, 33% { opacity: 1; } 40%, 93% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sf-st-motiv-4 { 0%, 25% { opacity: 1; } 30%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes sf-st-nachweis-2 { 0% { opacity: 0; } 5%, 45% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes sf-st-nachweis-3 { 0% { opacity: 0; } 3%, 30% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes sf-st-nachweis-4 { 0% { opacity: 0; } 3%, 22% { opacity: 1; } 25%, 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
.sf-st-motiv.sf-st-motiv, .sf-st-motiv-nachweis.sf-st-motiv-nachweis, .sf-st-punkt.sf-st-punkt, .sf-st-punkt::before { transition: none; }
.sf-embed-root.sf-motion .sf-st-kopf--motive[data-sf-motive] .sf-st-motiv, .sf-embed-root.sf-motion .sf-st-kopf--motive[data-sf-motive] .sf-st-motiv-nachweis, .sf-embed-root.sf-motion .sf-st-kopf--motive[data-sf-motive] .sf-st-punkt::before { animation: none; }
}
.sf-st-feed { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); margin: 0; padding: 0; list-style: none; }
.sf-st-feed li { min-width: 0; scroll-margin-top: var(--sf-hm-s5); }
.sf-st-feed li[hidden] { display: none; }
.sf-st-ende { display: grid; justify-items: center; gap: var(--sf-hm-s4); }
.sf-st-mehr.sf-st-mehr { min-height: var(--sf-hb-knopf-hoehe); padding: 0 var(--sf-hm-s6); border: 0; background: var(--sf-ink); color: var(--sf-white); font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; cursor: pointer; }
.sf-st-mehr.sf-st-mehr[hidden] { display: none; }
.sf-st { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sf-hb-buehne-grund); color: var(--sf-white); border-radius: var(--sf-hb-ecke); }
.sf-st-oben { position: absolute; inset: 0 0 auto; z-index: 2; padding: var(--sf-hm-s3) var(--sf-hm-s3) 0; pointer-events: none; }
.sf-st-profil { display: block; width: 100%; height: var(--sf-st-profil); overflow: visible; }
.sf-st-weg { fill: none; stroke: var(--sf-hb-hell-spur); stroke-width: 2; }
.sf-st-geschafft { fill: none; stroke: var(--sf-white); stroke-width: 2.5; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--sf-st-fort, 0)); transition: stroke-dashoffset 0.45s ease; }
.sf-st-station { fill: var(--sf-hb-hell-linie); transition: r 0.2s ease, fill 0.2s ease; }
.sf-st-station[data-sf-da] { fill: var(--sf-white); }
.sf-st-station[data-sf-jetzt] { fill: var(--sf-travel); stroke: var(--sf-white); stroke-width: 2; }
.sf-st-zeile { position: absolute; top: calc(var(--sf-hm-s3) + var(--sf-st-profil) + var(--sf-hm-s2)); left: var(--sf-hm-s3); right: var(--sf-hm-s3); z-index: 2; display: flex; align-items: center; gap: var(--sf-hm-s2); pointer-events: none; text-shadow: var(--sf-hm-text-schatten); }
.sf-st-play.sf-st-play { flex: none; display: grid; place-items: center; width: var(--sf-st-play); height: var(--sf-st-play); margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: var(--sf-hb-schleier-mitte); color: var(--sf-white); cursor: pointer; pointer-events: auto; }
.sf-st-play.sf-st-play:focus-visible { outline: 3px solid var(--sf-white); outline-offset: 2px; }
.sf-st-play svg { width: 55%; height: 55%; fill: currentColor; }
.sf-st-play[aria-pressed="true"] .sf-st-play-start, .sf-st-play[aria-pressed="false"] .sf-st-play-pause { display: none; }
.sf-st-play.sf-st-play[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
.sf-st-play.sf-st-play { display: none; }
}
.sf-st-zur.sf-st-zur { flex: none; display: inline-flex; align-items: center; gap: var(--sf-hm-s1); min-height: 44px; margin: 0 0 0 auto; padding: 0 var(--sf-hm-s3) 0 var(--sf-hm-s2); border-radius: 999px; background: var(--sf-hb-schleier-mitte); color: var(--sf-white); font-family: var(--sf-body); font-size: var(--sf-size-14); font-weight: 700; line-height: 1; text-decoration: none; text-shadow: none; white-space: nowrap; pointer-events: auto; }
.sf-st-zur.sf-st-zur:focus-visible { outline: 3px solid var(--sf-white); outline-offset: 2px; }
.sf-st-zur svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sf-st-zur ~ .sf-st-ton.sf-st-ton, .sf-st-zur ~ .sf-st-play.sf-st-play { margin-left: 0; }
.sf-st-zur.sf-st-zur:has(~ .sf-st-ton) { justify-content: center; width: var(--sf-st-play); min-height: var(--sf-st-play); padding: 0; }
.sf-st-zur:has(~ .sf-st-ton) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-st-ton.sf-st-ton { flex: none; display: grid; place-items: center; width: var(--sf-st-play); height: var(--sf-st-play); margin: 0 0 0 auto; padding: 0; border: 0; border-radius: 50%; background: var(--sf-hb-schleier-mitte); color: var(--sf-white); cursor: pointer; pointer-events: auto; }
.sf-st-ton.sf-st-ton:focus-visible { outline: 3px solid var(--sf-white); outline-offset: 2px; }
.sf-st-ton svg { width: 58%; height: 58%; }
.sf-st-ton-box { fill: currentColor; }
.sf-st-ton-wellen, .sf-st-ton-stumm { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.sf-st-ton[aria-pressed="true"] .sf-st-ton-stumm, .sf-st-ton[aria-pressed="false"] .sf-st-ton-wellen { display: none; }
.sf-st-ton ~ .sf-st-play.sf-st-play { margin-left: 0; }
.sf-st-audio.sf-st-audio { display: none; }
.sf-st-clip.sf-st-clip { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; gap: var(--sf-hm-s2); padding: var(--sf-hm-s4); background: var(--sf-hb-schleier-mitte); color: var(--sf-white); }
.sf-st[data-sf-bewegt] .sf-st-bild[data-sf-aktiv] .sf-st-foto { animation: sf-st-fahrt 7s ease-out both; }
@keyframes sf-st-fahrt { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.09) translate(-2%, -1.5%); } }
@media (prefers-reduced-motion: reduce) {
.sf-st[data-sf-bewegt] .sf-st-bild[data-sf-aktiv] .sf-st-foto { animation: none; }
}
.sf-st-logo { flex: none; display: grid; place-items: center; width: var(--sf-st-logo); height: var(--sf-st-logo); border-radius: 50%; background: var(--sf-white); color: var(--sf-ink); font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-weight: 800; font-size: var(--sf-hb-text); text-shadow: none; }
.sf-st-wer.sf-st-wer { min-width: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-st-marke); font-weight: 800; line-height: 1.05; overflow-wrap: break-word; hyphens: auto; }
.sf-st-bilder { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; cursor: pointer; }
.sf-st-bilder::-webkit-scrollbar { display: none; }
.sf-st-bilder:focus-visible { outline: 3px solid var(--sf-white); outline-offset: -3px; }
.sf-st-bild { position: relative; flex: 0 0 100%; height: 100%; overflow: hidden; scroll-snap-align: start; }
.sf-st-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-st-schleier { position: absolute; inset: 0; background: linear-gradient( var(--sf-hb-schleier-mitte) 0%, var(--sf-hb-schleier-null) 24%, var(--sf-hb-schleier-null) 52%, var(--sf-hb-schleier-unten) 100% ); }
.sf-st-bild[data-sf-art="kern"] .sf-st-schleier, .sf-st-bild[data-sf-art="shop"] .sf-st-schleier, .sf-st-bild[data-sf-art="weiter"] .sf-st-schleier { background: linear-gradient( var(--sf-hb-schleier-mitte) 0%, var(--sf-hb-schleier-null) 24%, var(--sf-hb-schleier-null) 38%, var(--sf-hb-schleier-tief) 100% ); }
.sf-st-inhalt { position: absolute; inset: auto 0 0; z-index: 1; text-shadow: var(--sf-hm-text-schatten); display: grid; gap: var(--sf-hm-s2); padding: var(--sf-hm-s4) var(--sf-hm-s4) var(--sf-hm-s5); }
.sf-st-kicker { font-size: var(--sf-hb-kapitel); font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-hb-hell-text); }
.sf-st-titel { font-family: var(--sf-hb-seitentitel-schrift, var(--sf-display)); font-weight: 800; font-size: var(--sf-st-titel); line-height: 1; text-transform: uppercase; text-wrap: balance; overflow-wrap: anywhere; }
.sf-st-titel[data-sf-lang] { font-size: var(--sf-st-satz); line-height: 1.1; }
.sf-st-satz { max-width: 28ch; font-size: var(--sf-st-satz); line-height: 1.35; color: var(--sf-white); }
.sf-st-shop.sf-st-shop { text-shadow: none; display: grid; gap: var(--sf-hm-s1); padding: var(--sf-hm-s3) var(--sf-hm-s4); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-st-shop.sf-st-shop small { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-st-shop.sf-st-shop b { font-size: var(--sf-hb-text); font-weight: 700; }
.sf-st-shop.sf-st-shop:hover b, .sf-st-shop.sf-st-shop:focus-visible b { text-decoration: underline; }
.sf-st-bild-nachweis { position: absolute; right: var(--sf-hm-s3); bottom: var(--sf-hm-s3); z-index: 1; font-size: var(--sf-hb-mini); color: var(--sf-hb-hell-text); text-shadow: var(--sf-hm-text-schatten); }
.sf-st-produkte { position: absolute; inset: 0; z-index: 1; display: grid; align-content: center; gap: var(--sf-hm-s4); padding: calc(var(--sf-st-profil) + var(--sf-st-logo) + var(--sf-hm-s5)) var(--sf-hm-s4) var(--sf-hm-s5); background: var(--sf-hb-buehne-grund); color: var(--sf-white); }
.sf-st-produkt-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-hm-s3); }
.sf-st-produkt.sf-st-produkt { display: grid; gap: var(--sf-hm-s1); align-content: start; min-width: 0; color: var(--sf-white); font-size: var(--sf-hb-fein); line-height: 1.25; text-decoration: none; }
.sf-st-produkt.sf-st-produkt img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: var(--sf-hm-s2); background: var(--sf-white); border-radius: var(--sf-hb-ecke); }
.sf-st-produkt.sf-st-produkt span { overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.sf-st-produkt.sf-st-produkt[href]:hover span { text-decoration: underline; }
.sf-st-knoepfe { display: grid; gap: var(--sf-hm-s2); }
.sf-st-knopf.sf-st-knopf { display: flex; align-items: center; justify-content: center; min-height: var(--sf-hb-knopf-hoehe); padding: 0 var(--sf-hm-s4); border: 1.5px solid var(--sf-hb-hell-linie); color: var(--sf-white); font-weight: 700; font-size: var(--sf-hb-text-klein); text-align: center; text-decoration: none; }
.sf-st-knopf.sf-st-knopf:first-child { text-shadow: none; background: var(--sf-white); border-color: var(--sf-white); color: var(--sf-ink); }
.sf-st-knopf.sf-st-knopf:hover { border-color: var(--sf-white); }
.sf-st-nachweis { position: absolute; top: calc(var(--sf-hm-s3) + var(--sf-st-profil) + var(--sf-st-logo) + var(--sf-hm-s3)); right: var(--sf-hm-s3); z-index: 2; font-size: var(--sf-hb-mini); color: var(--sf-hb-hell-text); pointer-events: none; }
.sf-st-feed-gross { grid-column: 1 / -1; }
.sf-st-gross.sf-st-gross { position: relative; display: block; min-height: var(--sf-st-gross-hoehe); overflow: hidden; background: var(--sf-hb-buehne-grund); color: var(--sf-white); border-radius: var(--sf-hb-ecke); text-decoration: none; }
.sf-st-gross.sf-st-gross img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease; }
.sf-st-gross.sf-st-gross:hover img { transform: scale(1.02); }
.sf-st-gross-text { position: absolute; inset: auto 0 0; z-index: 1; display: grid; gap: var(--sf-hm-s2); padding: var(--sf-hm-s5); }
.sf-st-gross-knopf { justify-self: start; margin-top: var(--sf-hm-s2); padding: var(--sf-hm-s2) var(--sf-hm-s4); background: var(--sf-white); color: var(--sf-ink); font-size: var(--sf-hb-text-klein); font-weight: 700; }
.sf-st-marken { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s3) var(--sf-hm-s6); margin: 0; font-weight: 700; }
.sf-st-marken.sf-st-marken a { color: var(--sf-ink); }
@container sf-st (min-width: 620px) {
.sf-st-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-st-gross.sf-st-gross { min-height: 0; aspect-ratio: 21 / 9; }
}
@container sf-st (min-width: 960px) {
.sf-st-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-hm-s6) var(--sf-hm-s5); }
.sf-st-gross-text .sf-st-titel { font-size: var(--sf-st-titel-breit); }
}
@media (prefers-reduced-motion: reduce) {
.sf-st-geschafft, .sf-st-station, .sf-st-gross.sf-st-gross img { transition: none; }
}
/* story-reihe.css */
.sf-str-rahmen { container: sf-str / inline-size; min-width: 0; }
.sf-str { display: grid; grid-auto-flow: column; grid-auto-columns: var(--sf-str-breite); gap: var(--sf-hm-s3); margin: 0; padding: 0 0 var(--sf-hm-s2); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sf-str::-webkit-scrollbar { display: none; }
.sf-str-eintrag.sf-str-eintrag { min-width: 0; margin: 0; scroll-snap-align: start; }
.sf-str-kachel.sf-str-kachel { position: relative; display: grid; align-content: space-between; gap: var(--sf-hm-s2); aspect-ratio: 4 / 5; padding: var(--sf-hm-s3); overflow: hidden; background: var(--sf-ink); color: var(--sf-white); text-decoration: none; }
.sf-str--hell .sf-str-kachel.sf-str-kachel { box-shadow: 0 0 0 2px var(--sf-white); }
.sf-str-bild.sf-str-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sf-str-kachel.sf-str-kachel:hover .sf-str-bild { transform: scale(1.04); }
.sf-str-schleier { position: absolute; inset: 0; background: linear-gradient( 180deg, var(--sf-hb-schleier-mitte) 0%, var(--sf-hb-schleier-null) 30%, var(--sf-hb-schleier-null) 45%, var(--sf-hb-schleier-unten) 100% ); }
.sf-str-marke.sf-str-marke, .sf-str-kicker.sf-str-kicker, .sf-str-titel.sf-str-titel { position: relative; min-width: 0; text-shadow: 0 1px 8px var(--sf-hb-schleier-mitte); }
.sf-str-marke.sf-str-marke { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-str-marke); font-weight: 800; line-height: 1.05; overflow-wrap: anywhere; }
.sf-str-kicker.sf-str-kicker { font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sf-str-titel.sf-str-titel { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; font-family: var(--sf-body); font-size: var(--sf-str-titel); font-weight: 700; line-height: 1.22; }
.sf-str-kachel.sf-str-kachel:focus-visible { outline: 3px solid var(--sf-travel); outline-offset: 2px; }
.sf-str--profil { grid-auto-columns: var(--sf-str-breite-profil); }
.sf-str--profil .sf-str-kachel.sf-str-kachel { display: block; padding: 0; container: sf-str-kachel / inline-size; }
.sf-str--hell.sf-str--profil .sf-str-kachel.sf-str-kachel { box-shadow: none; }
.sf-str--profil .sf-str-kachel.sf-str-kachel::after { content: ""; position: absolute; inset: 0; z-index: 3; border: 2px solid var(--sf-white); pointer-events: none; transition: border-color 0.3s ease, border-width 0.3s ease; }
.sf-str--profil .sf-str-kachel[data-sf-gesehen]::after { border-width: 1px; border-color: var(--sf-str-gesehen); }
.sf-str--profil .sf-str-schleier { z-index: 1; background: var(--sf-str-profil-schleier); }
.sf-str-profil.sf-str-profil { position: absolute; z-index: 2; top: 9px; left: 9px; display: block; width: calc(100% - 18px); height: auto; overflow: visible; }
.sf-str-profil-weg { fill: none; stroke: var(--sf-hb-hell-linie); stroke-width: 2.4; }
.sf-str-profil-station { fill: var(--sf-str-profil-station); }
.sf-str-profil-jetzt { fill: var(--sf-travel); stroke: var(--sf-white); stroke-width: 2.4; }
.sf-str-kachel[data-sf-gesehen] .sf-str-profil-weg { stroke: var(--sf-white); }
.sf-str-kachel[data-sf-gesehen] .sf-str-profil-station { fill: var(--sf-white); }
.sf-str--profil .sf-str-marke.sf-str-marke, .sf-str--profil .sf-str-kicker.sf-str-kicker { position: absolute; z-index: 2; top: 30px; left: 10px; right: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; overflow-wrap: normal; }
.sf-str--profil .sf-str-marke.sf-str-marke { font-size: max( var(--sf-size-12), min( var(--sf-str-profil-marke), calc((100cqi - 20px) / (var(--sf-str-zeichen, 10) * var(--sf-str-zeichen-breite, 0.5))) ) ); line-height: 1.02; }
.sf-str--profil .sf-str-titel.sf-str-titel { position: absolute; z-index: 2; left: 10px; right: 10px; bottom: 10px; -webkit-line-clamp: 3; font-size: var(--sf-str-profil-titel); line-height: 1.25; }
@container sf-str (min-width: 960px) {
.sf-str-profil.sf-str-profil { top: 11px; left: 11px; width: calc(100% - 22px); }
.sf-str--profil .sf-str-marke.sf-str-marke, .sf-str--profil .sf-str-kicker.sf-str-kicker { top: 34px; left: 12px; right: 12px; }
.sf-str--profil .sf-str-marke.sf-str-marke { font-size: max( var(--sf-size-12), min( var(--sf-str-profil-marke-breit), calc((100cqi - 24px) / (var(--sf-str-zeichen, 10) * var(--sf-str-zeichen-breite, 0.5))) ) ); }
.sf-str--profil .sf-str-titel.sf-str-titel { left: 12px; right: 12px; bottom: 12px; font-size: var(--sf-str-profil-titel-breit); }
}
@container sf-str (min-width: 620px) {
.sf-str { grid-auto-columns: var(--sf-str-breite-mittel); }
}
@container sf-str (min-width: 960px) {
.sf-str { grid-auto-columns: var(--sf-str-breite-breit); }
}
@media (prefers-reduced-motion: reduce) {
.sf-str-bild.sf-str-bild { transition: none; }
}
/* ausgesucht.css */
.sf-as { container: sf-as / inline-size; display: grid; gap: var(--sf-hm-s7, 48px); min-width: 0; padding: var(--sf-hm-s4, 16px) 0 var(--sf-hm-s7, 48px); color: var(--sf-ink); }
.sf-as-buehne { display: grid; gap: var(--sf-hm-s5, 24px); }
.sf-as-buehne-text { display: grid; gap: var(--sf-hm-s3, 12px); align-content: end; }
.sf-as-h1.sf-as-h1 { margin: 0; font: 800 var(--sf-as-h1) / 0.95 var(--sf-display); letter-spacing: -0.01em; text-transform: uppercase; }
.sf-as-versprechen.sf-as-versprechen { margin: 0; font: 600 var(--sf-as-versprechen) / 1.3 var(--sf-body); color: var(--sf-sortiment); }
.sf-as-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2, 8px); margin-top: var(--sf-hm-s2, 8px); }
.sf-as-knopf.sf-as-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sf-hm-s4, 16px); border: 2px solid var(--sf-ink); background: var(--sf-white); color: var(--sf-ink); font: 700 var(--sf-as-name) / 1 var(--sf-body); text-decoration: none; }
.sf-as-knopf-dunkel.sf-as-knopf-dunkel { background: var(--sf-ink); color: var(--sf-white); }
.sf-as-knopf-hell.sf-as-knopf-hell { border-color: var(--sf-white); background: var(--sf-white); color: var(--sf-ink); }
.sf-as-regal.sf-as-regal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 2px; list-style: none; background: var(--sf-ink); }
.sf-as-fach.sf-as-fach { margin: 0; min-width: 0; background: var(--sf-white); }
.sf-as-fach:nth-child(n + 10) { display: none; }
.sf-as-fach a { display: grid; gap: var(--sf-hm-s1, 4px); height: 100%; padding: var(--sf-hm-s2, 8px); color: var(--sf-ink); text-decoration: none; }
.sf-as-fach img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: var(--sf-white); }
.sf-as-fach-name { display: -webkit-box; overflow: hidden; font: 600 var(--sf-as-fein) / 1.25 var(--sf-body); -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sf-as-abschnitt { display: grid; gap: var(--sf-hm-s4, 16px); scroll-margin-top: 80px; }
.sf-as-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sf-hm-s2, 8px) var(--sf-hm-s4, 16px); padding-top: var(--sf-hm-s3, 12px); border-top: 2px solid var(--sf-ink); }
.sf-as-kapitel.sf-as-kapitel { display: block; margin: 0 0 var(--sf-hm-s1, 4px); color: var(--sf-sortiment); font: 800 var(--sf-as-kapitel) / 1.2 var(--sf-body); letter-spacing: 0.08em; text-transform: uppercase; }
.sf-as-h2.sf-as-h2 { display: block; margin: 0; font: 800 var(--sf-as-h2) / 1.05 var(--sf-display); text-transform: uppercase; }
.sf-as-weiter.sf-as-weiter { color: var(--sf-ink); font: 700 var(--sf-as-zeile) / 1.3 var(--sf-body); text-decoration: underline; text-underline-offset: 3px; }
.sf-as-satz.sf-as-satz { display: block; max-width: 62ch; margin: 0; font: 400 var(--sf-as-name) / 1.5 var(--sf-body); }
.sf-as-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s4, 16px) var(--sf-hm-s3, 12px); }
.sf-as-stueck.sf-as-stueck, .sf-as-stimme.sf-as-stimme { display: grid; align-content: start; gap: var(--sf-hm-s2, 8px); min-width: 0; color: var(--sf-ink); text-decoration: none; }
.sf-as-stueck-bild { position: relative; display: block; border: 1px solid var(--sf-as-linie); background: var(--sf-white); }
.sf-as-stueck-bild img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: var(--sf-hm-s2, 8px); }
.sf-as-stimme img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.sf-as-rang { position: absolute; top: 0; left: 0; padding: var(--sf-hm-s1, 4px) var(--sf-hm-s2, 8px); background: var(--sf-ink); color: var(--sf-white); font: 800 var(--sf-as-fein) / 1.2 var(--sf-body); letter-spacing: 0.04em; text-transform: uppercase; }
.sf-as-stueck-text { display: grid; gap: 2px; }
.sf-as-marke { font: 800 var(--sf-as-marke) / 1.2 var(--sf-body); letter-spacing: 0.04em; text-transform: uppercase; }
.sf-as-name { font: 600 var(--sf-as-name) / 1.3 var(--sf-body); }
.sf-as-zeile { margin-top: 2px; color: var(--sf-muted); font: 400 var(--sf-as-zeile) / 1.45 var(--sf-body); }
.sf-as-shoplink { margin-top: var(--sf-hm-s1, 4px); color: var(--sf-sortiment); font: 700 var(--sf-as-zeile) / 1.3 var(--sf-body); }
.sf-as-quelle.sf-as-quelle { margin: 0; color: var(--sf-muted); font: 400 var(--sf-as-fein) / 1.4 var(--sf-body); }
.sf-as-gruppen { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-as-gruppen a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--sf-hm-s3, 12px); border: 1px solid var(--sf-ink); color: var(--sf-ink); font: 700 var(--sf-as-zeile) / 1 var(--sf-body); text-decoration: none; }
.sf-as-gruppen a:hover { background: var(--sf-ink); color: var(--sf-white); }
.sf-as-gruppe { display: grid; gap: var(--sf-hm-s3, 12px); padding-top: var(--sf-hm-s3, 12px); border-top: 1px solid var(--sf-as-linie); scroll-margin-top: 80px; }
.sf-as-h3.sf-as-h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s1, 4px) var(--sf-hm-s2, 8px); margin: 0; font: 800 var(--sf-as-name) / 1.3 var(--sf-body); letter-spacing: 0.04em; text-transform: uppercase; }
.sf-as-h3 span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--sf-muted); }
.sf-as-reihe-club > :nth-child(n + 5) { display: none; }
.sf-as-geschichte.sf-as-geschichte { display: grid; background: var(--sf-as-dunkel); color: var(--sf-white); }
.sf-as-geschichte-bild.sf-as-geschichte-bild { display: block; min-width: 0; height: 100%; }
.sf-as-geschichte-bild img { display: block; width: 100%; height: 100%; min-height: 240px; max-height: 520px; object-fit: cover; }
.sf-as-geschichte-text { display: grid; align-content: center; gap: var(--sf-hm-s3, 12px); padding: var(--sf-hm-s5, 24px); }
.sf-as-geschichte .sf-as-kapitel, .sf-as-geschichte .sf-as-h2 { color: var(--sf-white); }
.sf-as-geschichte .sf-as-satz { color: var(--sf-as-hell-text); }
.sf-as-podest { display: grid; grid-template-columns: repeat(3, minmax(0, 72px)); gap: var(--sf-hm-s2, 8px); }
.sf-as-podest-fach { display: block; background: var(--sf-white); }
.sf-as-podest-fach img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; padding: var(--sf-hm-s1, 4px); }
.sf-as-geschichte .sf-as-knopf { justify-self: start; }
@container sf-as (min-width: 640px) {
.sf-as-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-as-reihe-club > :nth-child(n + 5) { display: grid; }
.sf-as-regal.sf-as-regal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-as-fach:nth-child(n + 10) { display: block; }
}
@container sf-as (min-width: 960px) {
.sf-as-buehne { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: end; }
.sf-as-reihe { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sf-as-regal.sf-as-regal { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sf-as-geschichte.sf-as-geschichte { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sf-as-geschichte-text { padding: var(--sf-hm-s6, 32px); }
}
/* themes.css */
.sf-dynamik { --sf-area: var(--sf-blue); --sf-area-tint: #edf5fa; --sf-event: var(--sf-area); --sf-on-event: white; --sf-theme-bg: white; --sf-theme-ink: #1a1a1a; --sf-theme-panel: #f4f5f6; }
.sf-dynamik .sf-primary a[aria-current="page"] { color: var(--sf-area); border-color: var(--sf-area); }
.sf-dynamik .sf-concept-carousel .sf-hero-copy, .sf-dynamik .sf-hub-hero { background: var(--sf-event); color: var(--sf-on-event); }
.sf-dynamik .sf-concept-carousel .sf-hero-copy :is(h1, .sf-stage-title), .sf-dynamik .sf-concept-carousel .sf-hero-copy p { color: inherit; }
.sf-dynamik .sf-concept-carousel .sf-hero-copy .sf-action { background: var(--sf-on-event); color: var(--sf-event) !important; }
.sf-dynamik[data-area]:not([data-area="home"]) .sf-category-page > .sf-collection-heading .sf-eyebrow { color: var(--sf-area); }
.sf-dynamik [data-story-area="fit"] .sf-card-body .sf-eyebrow { color: var(--sf-fit); }
.sf-dynamik [data-story-area="advice"] .sf-card-body .sf-eyebrow { color: var(--sf-ink); }
.sf-dynamik [data-story-area="travel"] .sf-card-body .sf-eyebrow { color: var(--sf-travel); }
.sf-dynamik [data-story-area="club"] .sf-card-body .sf-eyebrow { color: var(--sf-club); }
.sf-dynamik [data-story-area="sport"] .sf-card-body .sf-eyebrow { color: var(--sf-sport); }
.sf-dynamik[data-takeover="true"] { background: var(--sf-theme-bg); color: var(--sf-theme-ink); }
.sf-dynamik[data-takeover="true"] .sf-header { background: var(--sf-theme-bg); color: var(--sf-theme-ink); }
.sf-dynamik[data-takeover="true"] .sf-focused-brand { background: white; padding: 8px; width: max-content; }
.sf-dynamik[data-takeover="true"] .sf-primary a { color: var(--sf-theme-ink); }
.sf-dynamik[data-takeover="true"] main > .sf-container:not(.sf-hub-page) { background: white; color: var(--sf-ink); }
.sf-campaign-banner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; background: var(--sf-event); color: var(--sf-on-event); padding: 10px max(20px, 4vw); font-size: var(--sf-size-14); font-weight: 700; }
.sf-campaign-banner a { text-decoration: underline; }
.sf-hub-entry { display: flex; flex-wrap: wrap; gap: 12px; padding-block: 16px; border-bottom: 1px solid var(--sf-line); font-size: var(--sf-size-13); }
.sf-hub-entry a { border-bottom: 2px solid var(--sf-area); padding: 4px 0; }
.sf-hub-entry span { color: var(--sf-muted); }
.sf-hub-page { padding-block: 24px 64px; background: var(--sf-theme-bg); color: var(--sf-theme-ink); }
.sf-hub-hero { margin-top: 20px; padding: clamp(24px, 4vw, 48px); }
.sf-hub-hero h1 { font-size: calc(clamp(44px, 6vw, 80px) * var(--sf-display-scale)); line-height: 1; max-width: 18ch; margin: 16px 0; }
.sf-hub-hero p { max-width: 55ch; margin: 16px 0; }
.sf-hub-hero span { font-size: var(--sf-size-11); }
.sf-hub-tabs { display: flex; flex-wrap: wrap; gap: 20px; border-bottom: 1px solid var(--sf-overlay-grey-40); }
.sf-hub-tabs button { padding: 18px 0; font-weight: 700; border-bottom: 3px solid transparent; }
.sf-hub-tabs button[aria-pressed="true"] { border-color: var(--sf-event); }
.sf-hub-demo { margin-top: 18px; font-size: var(--sf-size-13); }
.sf-hub-demo label { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 12px 0; }
.sf-hub-demo select { background: white; color: var(--sf-ink); padding: 8px; border: 1px solid var(--sf-neutral-250); }
.sf-hub-modules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.sf-hub-panel { padding: clamp(20px, 3vw, 32px); background: var(--sf-theme-panel); min-width: 0; }
.sf-hub-panel h2 { font-size: calc(clamp(30px, 3vw, 42px) * var(--sf-display-scale)); margin: 12px 0 24px; }
.sf-hub-panel h3 { font-size: calc(28px * var(--sf-display-scale)); margin: 12px 0; }
.sf-hub-panel p { margin: 14px 0; }
.sf-hub-panel small { font-size: var(--sf-size-12); }
.sf-hub-panel a { display: block; margin: 16px 0; text-decoration: underline; }
.sf-hub-panel button { padding: 12px 18px; background: var(--sf-event); color: var(--sf-on-event); font-weight: 700; margin-top: 18px; }
.sf-hub-panel button:disabled { opacity: 0.4; }
.sf-hub-panel label { display: flex; gap: 12px; align-items: center; margin: 16px 0; }
.sf-hub-panel .sf-eyebrow { color: inherit; }
.sf-score { display: flex; gap: 20px; align-items: center; justify-content: space-between; font-variant-numeric: tabular-nums; }
.sf-score strong { font-family: var(--sf-display); font-size: calc(56px * var(--sf-display-scale)); white-space: nowrap; }
.sf-metrics { display: grid; gap: 20px; }
.sf-metrics dt { font-size: var(--sf-size-13); }
.sf-metrics dd { font-size: calc(32px * var(--sf-display-scale)); font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-liveblog { padding-left: 20px; }
.sf-liveblog li { border-bottom: 1px solid var(--sf-overlay-grey-40); padding-bottom: 20px; margin-bottom: 20px; }
.sf-hub-wide { grid-column: 1/-1; }
@media (max-width: 640px) {
.sf-hub-modules { grid-template-columns: minmax(0, 1fr); }
.sf-hub-tabs { gap: 14px; font-size: var(--sf-size-12); }
.sf-score { gap: 10px; }
.sf-score strong { font-size: calc(44px * var(--sf-display-scale)); }
.sf-hub-hero h1 { font-size: calc(44px * var(--sf-display-scale)); }
}
.sf-dynamik .sf-header--focused .sf-primary a[aria-current="page"] { color: var(--sf-area); border-color: var(--sf-area); }
.sf-dynamik[data-takeover="true"] .sf-header--focused .sf-primary a { color: var(--sf-theme-ink); }
.sf-dynamik[data-takeover="true"] .sf-header--focused .sf-primary a[aria-current="page"] { border-color: var(--sf-event); }
.sf-dynamik[data-takeover="true"] .sf-focused-brand { padding: 0; width: auto; }
.sf-dynamik[data-takeover="true"] .sf-locale select { color: var(--sf-ink); background: white; }
.sf-dynamik .sf-hub-tabs button { background: transparent; color: inherit; }
.sf-dynamik .sf-hub-hero .sf-eyebrow { color: inherit; }
.sf-dynamik .sf-campaign-banner button { background: transparent; color: inherit; text-decoration: underline; }
.sf-dynamik .sf-dialog { color: var(--sf-ink); }
.sf-dynamik[data-area="fit"] .sf-section-heading .sf-eyebrow { color: var(--sf-area); }
.sf-area-scope[data-section-area="fit"] { --sf-section-accent: var(--sf-fit); --sf-section-tint: var(--sf-fit-tint); }
.sf-area-scope[data-section-area="advice"] { --sf-section-accent: var(--sf-ink); --sf-section-tint: var(--sf-surface); }
.sf-area-scope[data-section-area="stories"] { --sf-section-accent: var(--sf-ink); --sf-section-tint: var(--sf-surface); }
.sf-area-scope[data-section-area="travel"] { --sf-section-accent: var(--sf-travel); --sf-section-tint: var(--sf-travel-tint); }
.sf-area-scope[data-section-area="club"] { --sf-section-accent: var(--sf-club); --sf-section-tint: var(--sf-club-tint); }
.sf-area-scope[data-section-area="sport"] { --sf-section-accent: var(--sf-sport); --sf-section-tint: var(--sf-sport-tint); }
.sf-dynamik .sf-area-scope .sf-eyebrow, .sf-dynamik .sf-area-scope .sf-section-heading > a, .sf-dynamik .sf-area-scope .sf-travel-index-link, .sf-dynamik .sf-area-scope .sf-travel-paths a > span, .sf-dynamik .sf-area-scope .sf-travel-paths svg, .sf-dynamik .sf-area-scope .sf-principles b { color: var(--sf-section-accent); }
.sf-dynamik .sf-area-scope .sf-action { background: var(--sf-section-accent); color: white; }
.sf-dynamik .sf-concept-carousel.sf-area-scope { --sf-event: var(--sf-campaign-accent, var(--sf-section-accent)); --sf-on-event: var(--sf-campaign-on-accent, white); }
.sf-dynamik .sf-concept-carousel.sf-area-scope .sf-hero-copy .sf-eyebrow { color: inherit; }
.sf-dynamik .sf-concept-carousel.sf-area-scope .sf-hero-copy .sf-action { background: var(--sf-on-event); color: var(--sf-event); }
.sf-dynamik .sf-stage-rail .sf-carousel-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-dynamik .sf-stage-rail .sf-carousel-tabs :is(button, a) { border-top-color: var(--sf-section-tint); color: var(--sf-neutral-800); background: white; }
.sf-dynamik .sf-stage-rail .sf-carousel-tabs :is(button, a) > span:first-child { color: var(--sf-section-accent); }
.sf-dynamik .sf-stage-rail .sf-carousel-tabs :is(button[aria-pressed="true"], a[aria-current="true"]) { border-top-color: var(--sf-section-accent); color: var(--sf-section-accent); background: var(--sf-section-tint); }
.sf-dynamik .sf-area-scope .sf-stage-caption svg { color: var(--sf-section-accent); }
.sf-dynamik .sf-section.sf-area-scope > .sf-eyebrow { border-left: 4px solid var(--sf-section-accent); padding-left: 12px; }
.sf-dynamik .sf-travel-discovery.sf-area-scope { border-top: 4px solid var(--sf-section-accent); }
.sf-dynamik .sf-area-scope .sf-travel-paths { background: var(--sf-section-tint); }
.sf-dynamik .sf-area-scope .sf-host-invite { background: var(--sf-section-tint); border-top: 3px solid var(--sf-section-accent); }
.sf-dynamik .sf-club-intro { max-width: 66ch; line-height: 1.6; margin: 0 0 24px; color: var(--sf-neutral-700); }
.sf-dynamik .sf-deal-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 12px; }
.sf-dynamik .sf-deal-filters button { display: flex; align-items: center; gap: 12px; background: white; border: 1px solid var(--sf-neutral-200); padding: 12px 18px; color: var(--sf-neutral-900); font: inherit; font-weight: 700; cursor: pointer; }
.sf-dynamik .sf-deal-filters button[aria-pressed="true"] { background: var(--sf-section-accent); color: white; border-color: var(--sf-section-accent); }
.sf-dynamik .sf-deal-filters button span { font-size: var(--sf-size-12); opacity: 0.8; }
.sf-dynamik .sf-deal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.sf-dynamik .sf-deal-card { min-width: 0; display: flex; flex-direction: column; background: white; border: 1px solid var(--sf-neutral-180); color: var(--sf-neutral-900); }
.sf-dynamik .sf-deal-card > img { width: 100%; aspect-ratio: 1.8; object-fit: contain; background: var(--sf-neutral-50); }
.sf-dynamik .sf-deal-body { display: flex; flex: 1; flex-direction: column; padding: 22px; gap: 12px; }
.sf-dynamik .sf-deal-access { color: var(--sf-section-accent); font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.055em; text-transform: var(--sf-label-case); }
.sf-dynamik .sf-deal-body h3 { font-size: calc(clamp(25px, 2.4vw, 35px) * var(--sf-display-scale)); line-height: 1.08; margin: 0; }
.sf-dynamik .sf-deal-body p { font-size: var(--sf-size-15); line-height: 1.5; margin: 0; color: var(--sf-neutral-650); }
.sf-dynamik .sf-deal-bottom { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.sf-dynamik .sf-deal-bottom small, .sf-dynamik .sf-deal-bottom > a:last-child { font-size: var(--sf-size-12); color: var(--sf-neutral-610); line-height: 1.5; }
.sf-dynamik .sf-deal-bottom > a:last-child { text-decoration: underline; text-underline-offset: 3px; }
.sf-dynamik .sf-deal-note { font-size: var(--sf-size-12); line-height: 1.5; color: var(--sf-neutral-580); margin: 14px 0 24px; }
.sf-dynamik .sf-club-explainer { margin: 64px 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 8%; padding: clamp(24px, 4vw, 56px); background: var(--sf-section-tint); border-top: 4px solid var(--sf-section-accent); color: var(--sf-neutral-900); }
.sf-dynamik .sf-club-explainer h2 { font-size: calc(clamp(38px, 4.5vw, 64px) * var(--sf-display-scale)); line-height: 1; margin: 16px 0; }
.sf-dynamik .sf-club-explainer p { max-width: 48ch; font-size: var(--sf-size-17); line-height: 1.6; margin: 0 0 24px; }
.sf-dynamik .sf-club-login { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: var(--sf-size-14); font-weight: 700; }
.sf-dynamik .sf-club-facts { margin: 0; display: flex; flex-direction: column; justify-content: center; }
.sf-dynamik .sf-club-facts > div { padding: 20px 0; border-bottom: 1px solid var(--sf-tint-violet-300); }
.sf-dynamik .sf-club-facts > div:last-child { border-bottom: 0; }
.sf-dynamik .sf-club-facts dt { font-family: var(--sf-display); font-size: calc(48px * var(--sf-display-scale)); font-weight: 800; line-height: 1.1; color: var(--sf-section-accent); }
.sf-dynamik .sf-club-facts dd { margin: 8px 0 0; font-size: var(--sf-size-15); }
.sf-dynamik .sf-club-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; color: var(--sf-neutral-900); }
.sf-dynamik .sf-club-levels article { background: white; border-top: 3px solid var(--sf-section-accent); padding: 24px 20px; border-bottom: 1px solid var(--sf-neutral-190); }
.sf-dynamik .sf-club-levels article > span { color: var(--sf-section-accent); font-weight: 800; }
.sf-dynamik .sf-club-levels h3 { font-size: calc(36px * var(--sf-display-scale)); margin: 16px 0 10px; }
.sf-dynamik .sf-club-levels b { font-size: var(--sf-size-14); }
.sf-dynamik .sf-club-levels p { font-size: var(--sf-size-15); line-height: 1.6; min-height: 3.2em; }
.sf-dynamik .sf-club-levels button { background: none; border: 0; padding: 12px 0; color: var(--sf-section-accent); display: flex; align-items: center; gap: 12px; font: inherit; font-weight: 700; cursor: pointer; }
.sf-dynamik .sf-club-account { margin-top: 48px; border-block: 1px solid var(--sf-neutral-190); padding: 32px 0; display: flex; align-items: center; gap: 32px; justify-content: space-between; }
.sf-dynamik .sf-club-account h3 { font-size: calc(28px * var(--sf-display-scale)); margin: 12px 0; }
.sf-dynamik .sf-club-account p { max-width: 60ch; font-size: var(--sf-size-16); line-height: 1.5; }
.sf-dynamik .sf-club-account .sf-action { flex-shrink: 0; }
.sf-dynamik[data-density="dense"] .sf-deal-grid { gap: 16px; }
.sf-dynamik[data-density="dense"] .sf-deal-body { padding: 16px; }
.sf-dynamik[data-density="dense"] .sf-club-explainer { margin: 36px 0; padding: 28px; }
@media (max-width: 1000px) {
.sf-deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-club-account { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
.sf-dynamik .sf-stage-rail .sf-carousel-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-dynamik .sf-stage-rail .sf-carousel-tabs :is(button, a) { min-height: 54px; flex-direction: row; padding: 10px; font-size: var(--sf-size-12); align-items: center; }
.sf-deal-grid, .sf-club-levels, .sf-club-explainer { grid-template-columns: 1fr; }
.sf-club-explainer { margin: 40px 0; gap: 20px; }
.sf-club-facts dt { font-size: calc(36px * var(--sf-display-scale)); }
.sf-club-facts > div { padding: 16px 0; }
.sf-deal-body { padding: 20px; }
.sf-deal-filters button { padding: 10px 12px; font-size: var(--sf-size-14); }
.sf-club-levels { gap: 12px; }
}
.sf-dynamik .sf-host-details { margin-top: 20px; max-width: 70ch; }
.sf-dynamik .sf-host-details summary { color: var(--sf-section-accent); font-weight: 700; cursor: pointer; padding: 12px 0; }
.sf-dynamik .sf-host-details p { margin: 12px 0; font-size: var(--sf-size-15); line-height: 1.6; }
@media (max-width: 1000px) {
.sf-dynamik .sf-deal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-dynamik .sf-club-account { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 640px) {
.sf-dynamik .sf-deal-grid, .sf-dynamik .sf-club-levels, .sf-dynamik .sf-club-explainer { grid-template-columns: 1fr; }
.sf-dynamik .sf-club-explainer { margin: 40px 0; gap: 20px; }
.sf-dynamik .sf-club-facts dt { font-size: calc(36px * var(--sf-display-scale)); }
.sf-dynamik .sf-club-facts > div { padding: 16px 0; }
.sf-dynamik .sf-deal-body { padding: 20px; }
.sf-dynamik .sf-deal-filters button { padding: 10px 12px; font-size: var(--sf-size-14); }
.sf-dynamik .sf-club-levels { gap: 12px; }
}
@media (max-width: 640px) {
.sf-dynamik .sf-club-section .sf-section-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
.sf-dynamik .sf-club-section .sf-section-heading > p { white-space: nowrap; }
}
/* delivery.css */
.sf-delivery.sf-area-scope { --sf-area: var(--sf-section-accent, var(--sf-blue)); }
.sf-delivery { min-height: 100vh; background: var(--sf-page); }
.sf-delivery-preview { margin: 0; padding: 6px 20px; background: var(--sf-surface); font-size: var(--sf-size-12); text-align: center; }
.sf-delivery .sf-focused-top { min-height: 112px; }
.sf-delivery .sf-delivery-title { padding-block: 20px 28px; }
.sf-delivery .sf-delivery-title h1 { font-size: calc(clamp(36px, 5vw, 66px) * var(--sf-display-scale)); max-width: 25ch; overflow-wrap: anywhere; }
.sf-delivery .sf-delivery-title--auswahl { padding-block: 12px 16px; }
.sf-delivery .sf-delivery-title--auswahl h1 { font-size: calc(clamp(30px, 3.5vw, 44px) * var(--sf-display-scale)); margin-block: 0 8px; }
.sf-delivery .sf-delivery-title--auswahl p { max-width: 76ch; margin-block: 0; font-size: var(--sf-size-16); line-height: 1.45; }
.sf-delivery .sf-delivery-subnav { display: flex; gap: 24px; padding-block: 12px; overflow: auto; border-bottom: 1px solid var(--sf-line); }
.sf-delivery .sf-delivery-subnav a { flex-shrink: 0; padding-block: 8px; }
.sf-delivery [aria-current="page"] { color: var(--sf-area, var(--sf-blue)); font-weight: 750; }
.sf-delivery .sf-delivery-intro { margin-block: 20px; max-width: 1000px; }
.sf-delivery .sf-delivery-library { margin-block: 32px; }
.sf-delivery .sf-delivery-search { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; flex-wrap: wrap; }
.sf-delivery .sf-delivery-search input { flex: 1 1 240px; border: 2px solid var(--sf-ink); border-radius: 0; padding: 11px 14px; font-size: var(--sf-size-17); max-width: 560px; min-width: 0; background: var(--sf-white); }
.sf-delivery .sf-delivery-search input:focus-visible { outline: 3px solid var(--sf-section-accent, var(--sf-ink)); outline-offset: 2px; }
.sf-delivery .sf-delivery-search button { padding: 13px 20px; background: var(--sf-ink); color: var(--sf-white); font-weight: 700; }
.sf-delivery .sf-delivery-pagination { display: flex; flex-wrap: wrap; gap: 12px; margin-block: 24px; }
.sf-delivery .sf-delivery-pagination a { padding: 8px 14px; border: 1px solid var(--sf-line); }
.sf-delivery .sf-delivery-pagination a[aria-current="page"] { background: var(--sf-ink); border-color: var(--sf-ink); color: var(--sf-white); }
.sf-delivery .sf-delivery-pagination .sf-delivery-pagination-step { font-weight: 700; }
.sf-delivery .sf-mobile-links { display: flex; flex-direction: column; gap: 16px; padding-block: 16px; }
.sf-delivery .sf-story-card h3, .sf-delivery .sf-stage-title { overflow-wrap: anywhere; }
.sf-delivery .sf-stage-title { font-size: calc(clamp(32px, 4vw, 64px) * var(--sf-display-scale)); }
.sf-live-ad-placeholder, .sf-live-ad { margin: 32px auto; width: 100%; }
.sf-live-ad small { display: block; color: var(--sf-neutral-600); margin-bottom: 6px; font-size: var(--sf-size-12); }
.sf-live-ad img, .sf-live-ad video { width: 100%; height: auto; object-fit: contain; }
.sf-live-ad a { display: block; border: 1px solid var(--sf-line); }
.sf-live-ad[data-sf-ad-form="breit"] { container-type: inline-size; }
.sf-live-ad[data-sf-ad-form="breit"] img { max-height: 56cqi; object-fit: cover; object-position: center 40%; }
.sf-live-ad a > div { padding: 20px; }
.sf-live-ad h2 { font-size: calc(clamp(24px, 3vw, 36px) * var(--sf-display-scale)); }
.sf-ad-ton { --sf-ad-grund: var(--sf-lp-palette-nacht); --sf-ad-schrift: var(--sf-lp-palette-weiss); --sf-ad-leise: var(--sf-on-dark-soft); --sf-ad-knopf: var(--sf-lp-palette-weiss); --sf-ad-knopf-schrift: var(--sf-lp-palette-tinte); }
.sf-ad-ton[data-sf-ton="nacht"], .sf-ad-ton[data-sf-ton="tinte"], .sf-ad-ton[data-sf-ton="rabatt-rot"], .sf-ad-ton[data-sf-ton="gold-tief"], .sf-ad-ton[data-sf-ton="lila-tief"] { --sf-ad-knopf: var(--sf-lp-palette-gelb); }
.sf-ad-ton[data-sf-ton="tinte"] { --sf-ad-grund: var(--sf-lp-palette-tinte); }
.sf-ad-ton[data-sf-ton="tiefblau"] { --sf-ad-grund: var(--sf-lp-palette-tiefblau); }
.sf-ad-ton[data-sf-ton="rabatt-rot"] { --sf-ad-grund: var(--sf-lp-palette-rabatt-rot); }
.sf-ad-ton[data-sf-ton="sport"] { --sf-ad-grund: var(--sf-lp-palette-sport); }
.sf-ad-ton[data-sf-ton="gold-tief"] { --sf-ad-grund: var(--sf-lp-palette-gold-tief); }
.sf-ad-ton[data-sf-ton="lila-tief"] { --sf-ad-grund: var(--sf-lp-palette-lila-tief); }
.sf-ad-ton[data-sf-ton="fit"] { --sf-ad-grund: var(--sf-lp-palette-fit); }
.sf-ad-ton[data-sf-ton="blau-tief"] { --sf-ad-grund: var(--sf-lp-palette-blau-tief); }
.sf-live-ad-placeholder--quer { min-height: 112px; }
.sf-live-ad[data-sf-ad-form="quer"] { position: relative; margin: var(--sf-hm-s5, 24px) 0; background: var(--sf-ad-grund, var(--sf-lp-palette-nacht)); color: var(--sf-ad-schrift, var(--sf-white)); border-radius: var(--sf-radius); overflow: hidden; }
.sf-live-ad[data-sf-ad-form="quer"] > .sf-live-ad-label { position: absolute; top: 10px; left: calc(96px + 2 * var(--sf-hm-s3, 12px)); right: var(--sf-hm-s3, 12px); margin: 0; color: var(--sf-ad-leise, var(--sf-on-dark-soft)); font: 700 var(--sf-size-11) / 1.3 var(--sf-body); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.sf-live-ad[data-sf-ad-form="quer"] a { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: var(--sf-hm-s3, 12px); padding: var(--sf-hm-s3, 12px); border: 0; background: transparent; color: inherit; text-decoration: none; }
.sf-live-ad[data-sf-ad-form="quer"] a > img { display: block; width: 100%; height: auto; max-height: 96px; object-fit: contain; border-radius: calc(var(--sf-radius) / 2); }
.sf-live-ad[data-sf-ad-form="quer"] a > div { display: grid; justify-items: start; gap: 6px; padding: 16px 0 0; }
.sf-live-ad[data-sf-ad-form="quer"] h2 { margin: 0; color: inherit; font: 700 var(--sf-size-17) / 1.2 var(--sf-body); letter-spacing: normal; text-transform: none; }
.sf-live-ad[data-sf-ad-form="quer"] p { display: none; margin: 0; color: var(--sf-ad-leise, var(--sf-on-dark-soft)); font-size: var(--sf-hb-text-klein, 14px); line-height: 1.4; }
.sf-live-ad[data-sf-ad-form="quer"] .sf-live-ad-cta { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 12px; background: var(--sf-ad-knopf, var(--sf-white)); color: var(--sf-ad-knopf-schrift, var(--sf-ink)); border-radius: var(--sf-radius); font: 700 var(--sf-size-13) / 1.2 var(--sf-body); white-space: nowrap; }
.sf-live-ad[data-sf-ad-form="quer"] a:hover .sf-live-ad-cta, .sf-live-ad[data-sf-ad-form="quer"] a:focus-visible .sf-live-ad-cta { background: var(--sf-white); color: var(--sf-ad-grund, var(--sf-ink)); }
.sf-live-ad[data-sf-ad-form="quer"] a:focus-visible { outline: 3px solid var(--sf-ad-knopf, var(--sf-white)); outline-offset: -3px; }
@media (min-width: 640px) {
.sf-live-ad[data-sf-ad-form="quer"] > .sf-live-ad-label { top: 18px; left: calc(200px + var(--sf-hm-s2, 8px) + var(--sf-hm-s5, 24px)); }
.sf-live-ad[data-sf-ad-form="quer"] a { grid-template-columns: 200px minmax(0, 1fr); gap: var(--sf-hm-s5, 24px); padding: var(--sf-hm-s2, 8px) var(--sf-hm-s5, 24px) var(--sf-hm-s2, 8px) var(--sf-hm-s2, 8px); }
.sf-live-ad[data-sf-ad-form="quer"] a > img { max-height: 128px; }
.sf-live-ad[data-sf-ad-form="quer"] h2 { font: 700 var(--sf-hb-h3) / 1.15 var(--sf-display); }
.sf-live-ad[data-sf-ad-form="quer"] p { display: block; }
.sf-live-ad[data-sf-ad-form="quer"] a > div { grid-template-columns: minmax(0, 1fr) auto; align-content: center; column-gap: var(--sf-hm-s5, 24px); padding: 30px 0 10px; }
.sf-live-ad[data-sf-ad-form="quer"] a > div > h2, .sf-live-ad[data-sf-ad-form="quer"] a > div > p { grid-column: 1; }
.sf-live-ad[data-sf-ad-form="quer"] .sf-live-ad-cta { grid-column: 2; grid-row: 1 / span 2; align-self: center; min-height: 44px; padding: var(--sf-hm-s2, 8px) var(--sf-hm-s5, 24px); font-size: var(--sf-size-15); }
}
.sf-ak-platzhalter { min-height: 280px; }
.sf-dynamik .sf-ak { container: sf-ak / inline-size; display: grid; gap: 12px; width: 100%; margin: 32px auto; padding-top: 12px; border-top: 4px solid var(--sf-ak-farbe, var(--sf-blue)); }
.sf-dynamik .sf-ak-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sf-dynamik .sf-ak-kopf .sf-live-ad-label { margin: 0; color: var(--sf-neutral-600); font: 700 var(--sf-size-11) / 1.3 var(--sf-body); letter-spacing: 0.1em; text-transform: uppercase; }
.sf-dynamik .sf-ak-logo { display: inline-flex; padding: 4px 6px; background: var(--sf-ak-farbe, var(--sf-blue)); }
.sf-dynamik .sf-ak-logo img { display: block; width: auto; height: 14px; }
.sf-dynamik .sf-ak-uhr { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--sf-ink); white-space: nowrap; font: 700 var(--sf-size-13) / 1 var(--sf-body); font-variant-numeric: tabular-nums; }
.sf-dynamik .sf-ak-uhr::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-ak-farbe, var(--sf-blue)); animation: sf-ak-puls 2s ease-in-out infinite; }
@keyframes sf-ak-puls { 50% { opacity: 0.3; } }
.sf-dynamik .sf-ak a { color: inherit; text-decoration: none; }
.sf-dynamik .sf-ak h2 { margin: 0; font-family: var(--sf-display); font-size: calc(clamp(24px, 2.6vw, 32px) * var(--sf-display-scale)); line-height: 1.05; text-transform: uppercase; text-wrap: balance; }
.sf-dynamik .sf-ak-titel:hover h2, .sf-dynamik .sf-ak-titel:focus-visible h2 { color: var(--sf-ak-farbe, var(--sf-blue)); }
.sf-dynamik .sf-ak-wege { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sf-dynamik .sf-ak-weg { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 12px; align-items: center; height: 100%; padding: 6px 12px 6px 6px; background: var(--sf-surface); transition: background-color 0.2s ease; }
.sf-dynamik .sf-ak-weg:hover, .sf-dynamik .sf-ak-weg:focus-visible { background: var(--sf-tint-sky-100); }
.sf-dynamik .sf-ak-weg figure { grid-column: 1; margin: 0; overflow: hidden; aspect-ratio: 1; }
.sf-dynamik .sf-ak-weg img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.sf-dynamik .sf-ak-weg:hover img { transform: scale(1.05); }
.sf-dynamik .sf-ak-weg span { grid-column: 2; display: grid; gap: 2px; min-width: 0; }
.sf-dynamik .sf-ak-weg small { color: var(--sf-ak-farbe, var(--sf-blue)); font: 700 var(--sf-size-11) / 1.25 var(--sf-body); letter-spacing: 0.08em; text-transform: uppercase; }
.sf-dynamik .sf-ak-weg strong { font: 700 var(--sf-size-15) / 1.25 var(--sf-body); }
.sf-dynamik .sf-ak-weg em { grid-column: 3; color: var(--sf-ak-farbe, var(--sf-blue)); font-style: normal; font-weight: 700; }
@container sf-ak (min-width: 640px) {
.sf-dynamik .sf-ak-wege { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 16px; }
.sf-dynamik .sf-ak-weg { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 10px; padding: 0; background: none; }
.sf-dynamik .sf-ak-weg:hover, .sf-dynamik .sf-ak-weg:focus-visible { background: none; }
.sf-dynamik .sf-ak-weg figure { aspect-ratio: 12 / 5; }
.sf-dynamik .sf-ak-weg span { grid-column: 1; }
.sf-dynamik .sf-ak-weg:hover strong { color: var(--sf-ak-farbe, var(--sf-blue)); }
.sf-dynamik .sf-ak-weg em { display: none; }
}
.sf-dynamik .sf-ak-einzel { display: grid; gap: 12px; background: var(--sf-surface); }
.sf-dynamik .sf-ak-einzel figure { margin: 0; }
.sf-dynamik .sf-ak-einzel img { display: block; width: 100%; height: auto; max-height: 240px; object-fit: cover; }
.sf-dynamik .sf-ak-einzel > div { display: grid; gap: 8px; align-content: center; padding: 0 16px 16px; }
.sf-dynamik .sf-ak-einzel p { margin: 0; color: var(--sf-muted); }
.sf-dynamik .sf-ak-einzel .sf-live-ad-cta { color: var(--sf-ak-farbe, var(--sf-blue)); }
@container sf-ak (min-width: 640px) {
.sf-dynamik .sf-ak-einzel { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 24px; }
.sf-dynamik .sf-ak-einzel > div { padding: 16px 16px 16px 0; }
}
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] { gap: 8px; padding: 12px; border-top: 0; border-radius: var(--sf-radius); background: var(--sf-ad-grund); color: var(--sf-ad-schrift); }
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-kopf .sf-live-ad-label, .sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-uhr, .sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-einzel p { color: var(--sf-ad-leise); }
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-einzel { grid-template-columns: 96px minmax(0, 1fr); align-items: center; background: transparent; color: inherit; }
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-einzel img { max-height: 110px; object-fit: contain; border-radius: calc(var(--sf-radius) / 2); }
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-einzel > div { justify-items: start; gap: 6px; padding: 0; }
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-einzel h2 { color: inherit; font-size: var(--sf-size-20); hyphens: auto; overflow-wrap: break-word; }
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-einzel p { display: none; }
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-live-ad-cta { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 14px; background: var(--sf-ad-knopf); color: var(--sf-ad-knopf-schrift); border-radius: var(--sf-radius); }
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-einzel:hover .sf-live-ad-cta, .sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-einzel:focus-visible .sf-live-ad-cta { background: var(--sf-white); color: var(--sf-ad-grund); }
.sf-dynamik .sf-ak--leiste.sf-ad-ton[data-sf-ton] .sf-ak-einzel, .sf-dynamik .sf-ak--leiste.sf-ad-ton[data-sf-ton] .sf-ak-einzel:has(figure) { grid-template-columns: 72px minmax(0, 1fr) auto; }
.sf-dynamik .sf-ak--leiste.sf-ad-ton[data-sf-ton] .sf-ak-einzel:not(:has(figure)) { grid-template-columns: minmax(0, 1fr) auto; }
.sf-dynamik .sf-ak--leiste.sf-ad-ton[data-sf-ton] .sf-ak-einzel::after { color: var(--sf-ad-knopf); }
.sf-dynamik .sf-ak--leiste.sf-ad-ton[data-sf-ton] .sf-ak-einzel:hover { background: transparent; }
.sf-dynamik .sf-ak--leiste.sf-ad-ton[data-sf-ton] .sf-ak-einzel figure { background: transparent; }
.sf-dynamik .sf-ak--leiste.sf-ad-ton[data-sf-ton] .sf-live-ad-cta { display: none; }
@container sf-ak (min-width: 640px) {
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] { padding: 14px 24px 16px 16px; }
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-einzel { grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-einzel img { max-height: 180px; }
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-einzel h2 { font-size: calc(clamp(24px, 2.6vw, 34px) * var(--sf-display-scale, 1)); }
.sf-dynamik .sf-ak.sf-ad-ton[data-sf-ton] .sf-ak-einzel p { display: block; }
}
.sf-dynamik .sf-ak--check { padding: 14px 16px 16px; background: var(--sf-tint-forest-900); color: var(--sf-on-dark); }
.sf-dynamik .sf-ak--check .sf-ak-kopf .sf-live-ad-label { color: var(--sf-on-dark-muted); }
.sf-dynamik .sf-ak--check .sf-ak-uhr { color: var(--sf-on-dark); }
.sf-dynamik .sf-ak--check .sf-ak-uhr::before { background: var(--sf-on-dark); }
.sf-dynamik .sf-ak-check { display: grid; gap: 12px; }
.sf-dynamik .sf-ak--check .sf-ak-frage { color: var(--sf-on-dark); }
.sf-dynamik .sf-ak-antworten { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-dynamik .sf-ak-antwort { display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--sf-on-dark-muted); background: none; color: var(--sf-on-dark); font: 600 var(--sf-size-16) / 1.25 var(--sf-body); text-align: left; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.sf-dynamik .sf-ak-antwort em { font-style: normal; font-weight: 700; }
.sf-dynamik .sf-ak-antwort:hover, .sf-dynamik .sf-ak-antwort:focus-visible { border-color: var(--sf-on-dark); outline: none; }
.sf-dynamik .sf-ak-antwort[aria-pressed="true"] { border-color: var(--sf-on-dark); background: var(--sf-on-dark); color: var(--sf-ink); }
.sf-dynamik .sf-ak-ergebnis-platz:empty { display: none; }
.sf-dynamik .sf-ak a.sf-ak-ergebnis { color: var(--sf-ink); }
.sf-dynamik .sf-ak-ergebnis { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px; background: var(--sf-white); color: var(--sf-ink); animation: sf-ak-ein 0.3s ease; }
.sf-dynamik .sf-ak-ergebnis:has(figure) { grid-template-columns: 72px minmax(0, 1fr); }
.sf-dynamik .sf-ak-ergebnis figure { margin: 0; overflow: hidden; aspect-ratio: 1; }
.sf-dynamik .sf-ak-ergebnis img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-dynamik .sf-ak-ergebnis span { display: grid; gap: 4px; }
.sf-dynamik .sf-ak-ergebnis strong { font: 700 var(--sf-size-16) / 1.25 var(--sf-body); }
.sf-dynamik .sf-ak-ergebnis em { color: var(--sf-ak-farbe, var(--sf-blue)); font-style: normal; font-weight: 700; }
@keyframes sf-ak-ein { from { opacity: 0; transform: translateY(4px); } }
@container sf-ak (min-width: 720px) {
.sf-dynamik .sf-ak--check { padding: 18px 24px 24px; }
.sf-dynamik .sf-ak-check { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: 32px; align-items: start; }
.sf-dynamik .sf-ak--check .sf-ak-frage { font-size: calc(clamp(28px, 3vw, 40px) * var(--sf-display-scale)); }
.sf-dynamik .sf-ak-ergebnis-platz { grid-column: 2; }
}
.sf-ak-platzhalter--leiste { min-height: 96px; }
.sf-dynamik .sf-ak--leiste { max-width: var(--sf-reading, 720px); margin: 24px 0; padding-top: 10px; border-top-width: 3px; }
.sf-dynamik .sf-ak--leiste .sf-ak-einzel, .sf-dynamik .sf-ak--leiste .sf-ak-einzel:has(figure) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; }
.sf-dynamik .sf-ak--leiste .sf-ak-einzel:has(figure) { grid-template-columns: 72px minmax(0, 1fr) auto; }
.sf-dynamik .sf-ak--leiste .sf-ak-einzel figure { overflow: hidden; aspect-ratio: 1; background: var(--sf-white, var(--sf-surface)); }
.sf-dynamik .sf-ak--leiste .sf-ak-einzel img { height: 100%; max-height: none; object-fit: contain; }
.sf-dynamik .sf-ak--leiste .sf-ak-einzel > div { display: grid; gap: 2px; padding: 0; }
.sf-dynamik .sf-ak--leiste h2 { font-family: var(--sf-body); font-size: var(--sf-size-16); line-height: 1.25; text-transform: none; }
.sf-dynamik .sf-ak--leiste .sf-ak-einzel p { font-size: var(--sf-size-13); line-height: 1.35; }
.sf-dynamik .sf-ak--leiste .sf-live-ad-cta { display: none; }
.sf-dynamik .sf-ak--leiste .sf-ak-einzel::after { content: "→"; color: var(--sf-ak-farbe, var(--sf-blue)); font-weight: 700; }
.sf-dynamik .sf-ak--leiste .sf-ak-einzel:hover { background: var(--sf-tint-sky-100); }
@container sf-ak (max-width: 420px) {
.sf-dynamik .sf-ak-logo { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.sf-dynamik .sf-ak-uhr::before, .sf-dynamik .sf-ak-ergebnis, .sf-dynamik .sf-ak-weg img { animation: none; transition: none; }
}
.sf-live-ad-placeholder--article { min-height: 180px; }
.sf-dynamik aside.sf-live-ad--article { container-type: inline-size; width: 100%; max-width: none; margin-inline: 0; background: var(--sf-ad-grund, var(--sf-tint-forest-900)); color: var(--sf-ad-schrift, var(--sf-on-dark)); border-radius: var(--sf-radius); overflow: hidden; }
.sf-dynamik .sf-live-ad--article > .sf-live-ad-label { display: inline-block; margin: 14px 20px 0; padding: 3px 8px; background: var(--sf-ad-schrift, var(--sf-on-dark)); color: var(--sf-ad-grund, var(--sf-tint-forest-900)); font: 700 var(--sf-size-12) / 1.4 var(--sf-body); letter-spacing: 0.1em; text-transform: uppercase; }
.sf-dynamik .sf-live-ad--article > a { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 20px; align-items: center; padding: 12px 20px 20px; border: 0; color: inherit; overflow-wrap: normal; }
.sf-dynamik .sf-live-ad--article > a > div { padding: 0; min-width: 0; }
.sf-dynamik .sf-live-ad--article img, .sf-dynamik .sf-live-ad--article video { display: block; width: 100%; height: auto; max-width: 100%; object-fit: contain; }
.sf-dynamik aside.sf-live-ad--article h2.sf-live-ad-title { margin: 0 0 8px; color: var(--sf-on-dark); font: 700 var(--sf-size-live-ad-title) / 1.2 var(--sf-body); letter-spacing: normal; text-transform: none; }
.sf-dynamik aside.sf-live-ad--article p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; margin: 0 0 14px; color: var(--sf-ad-leise, var(--sf-on-dark-soft)); font-size: var(--sf-size-15); line-height: 1.45; }
.sf-dynamik .sf-live-ad--article .sf-live-ad-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; background: var(--sf-ad-knopf, var(--sf-on-dark)); color: var(--sf-ad-knopf-schrift, var(--sf-tint-forest-900)); border-radius: var(--sf-radius); font: 700 var(--sf-size-15) / 1.2 var(--sf-body); transition: background var(--sf-motion), color var(--sf-motion); }
.sf-dynamik .sf-live-ad--article > a:hover .sf-live-ad-cta, .sf-dynamik .sf-live-ad--article > a:focus-visible .sf-live-ad-cta { background: var(--sf-white); color: var(--sf-ad-grund, var(--sf-blue)); }
.sf-dynamik .sf-live-ad--article > a:focus-visible { outline: 3px solid var(--sf-ad-knopf, var(--sf-blue)); outline-offset: -3px; }
.sf-dynamik .sf-live-ad--article img, .sf-dynamik .sf-live-ad--article video { height: auto; max-height: 180px; object-fit: contain; border-radius: calc(var(--sf-radius) / 2); }
@container (max-width: 560px) {
.sf-dynamik .sf-live-ad--article > .sf-live-ad-label { margin: 12px 16px 0; }
.sf-dynamik .sf-live-ad--article > a { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 10px 16px 16px; }
.sf-dynamik .sf-live-ad--article img, .sf-dynamik .sf-live-ad--article video { max-height: 110px; }
.sf-dynamik aside.sf-live-ad--article h2.sf-live-ad-title { font-size: var(--sf-size-17); }
.sf-dynamik aside.sf-live-ad--article p { display: none; }
.sf-dynamik .sf-live-ad--article .sf-live-ad-cta { min-height: 36px; padding: 6px 12px; font-size: var(--sf-size-14); }
}
@media (max-width: 700px) {
.sf-delivery .sf-focused-top { min-height: 92px; }
.sf-delivery .sf-focused-tools > a { display: none; }
.sf-delivery .sf-delivery-subnav { gap: 20px; }
.sf-delivery .sf-delivery-search { align-items: stretch; }
.sf-delivery .sf-delivery-search label { width: 100%; }
.sf-delivery .sf-delivery-search input { flex: 1; }
.sf-delivery .sf-stage-title { font-size: calc(36px * var(--sf-display-scale)); }
}
.sf-delivery .sf-content-stage .sf-stage-title { font-size: calc(clamp(30px, 3.2vw, 46px) * var(--sf-display-scale)); line-height: 1.04; }
.sf-delivery .sf-content-stage .sf-hero-copy { padding: 24px 28px; }
.sf-delivery .sf-content-stage .sf-hero-copy > p:not(.sf-eyebrow) { font-size: var(--sf-size-15); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sf-delivery .sf-content-stage .sf-carousel-tabs :is(button, a) > span:last-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-delivery .sf-focused-tools { gap: 16px; }
.sf-delivery .sf-header-shop-short { display: none; }
@media (max-width: 700px) {
.sf-delivery .sf-header--focused .sf-focused-top { display: grid; grid-template-columns: 1fr auto auto; grid-template-areas: "brand shop tools"; grid-template-rows: auto; align-items: center; gap: 12px; min-height: 64px; padding-block: 8px; }
.sf-delivery .sf-focused-brand { grid-area: brand; }
.sf-delivery .sf-focused-tools { grid-area: tools; gap: 12px; white-space: nowrap; }
.sf-delivery .sf-header-shop { grid-area: shop; min-height: 34px; padding: 6px 12px; border-radius: 999px; }
.sf-delivery .sf-header-shop-long { display: none; }
.sf-delivery .sf-header-shop-short { display: inline; }
.sf-delivery .sf-header--focused .sf-primary { display: none; }
.sf-delivery .sf-content-stage .sf-stage-title { font-size: calc(30px * var(--sf-display-scale)); }
}
.sf-travel-detail { padding-block: 16px 40px; }
.sf-travel-head { border-top: 4px solid var(--sf-area); padding: 24px 0; }
.sf-travel-head h1 { font-size: calc(clamp(38px, 5vw, 70px) * var(--sf-display-scale)); max-width: 24ch; }
.sf-travel-lead { max-width: 68ch; font-size: calc(clamp(18px, 2vw, 22px) * var(--sf-display-scale)); line-height: 1.55; margin-block: 16px; }
.sf-travel-facts, .sf-travel-links { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 18px; }
.sf-travel-facts span { background: var(--sf-paper, var(--sf-tint-sand-40)); padding: 6px 12px; font-size: var(--sf-size-14); }
.sf-travel-links a { color: var(--sf-area); font-weight: 700; }
.sf-travel-highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 24px; margin-top: 20px; }
.sf-travel-highlights h3 { font-size: calc(28px * var(--sf-display-scale)); margin-bottom: 10px; }
.sf-travel-stay-card { padding: 24px; border: 1px solid var(--sf-line); border-top: 4px solid var(--sf-area); }
.sf-travel-stay-card:hover { background: var(--sf-tint-sand-20); }
.sf-travel-stay-card strong { display: block; color: var(--sf-area); margin-top: 20px; }
.sf-travel-criteria > div { display: grid; grid-template-columns: minmax(140px, 1fr) 3fr; gap: 20px; padding-block: 20px; border-bottom: 1px solid var(--sf-line); }
.sf-travel-criteria dt { font-weight: 700; color: var(--sf-area); }
.sf-travel-criteria dd { margin: 0; max-width: 65ch; }
.sf-travel-note, .sf-travel-sources { font-size: var(--sf-size-14); color: var(--sf-neutral-600); margin-top: 24px; }
.sf-travel-sources summary { cursor: pointer; }
@media (max-width: 600px) {
.sf-travel-criteria > div { grid-template-columns: 1fr; gap: 8px; }
}
.sf-delivery .sf-travel-head .sf-eyebrow, .sf-delivery .sf-travel-detail > .sf-section > .sf-eyebrow { color: var(--sf-area); }
.sf-sponsored-tag { display: inline; }
.sf-sponsored-tag::after { content: " · "; }
.sf-travel-detail { --sf-sport-tint: var(--sf-travel-tint); }
.sf-travel-detail .sf-sport-webcams ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.sf-travel-magazine .sf-story-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.sf-home-regions { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 24px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--sf-line); }
.sf-home-regions a { display: grid; gap: 10px; }
.sf-home-regions strong { color: var(--sf-section-accent); }
.sf-home-regions span { font-size: var(--sf-size-15); line-height: 1.5; }
.sf-delivery .sf-travel-panorama h3 { font-size: calc(clamp(30px, 3.5vw, 52px) * var(--sf-display-scale)); max-width: 24ch; }
.sf-delivery .sf-travel-panorama p { max-width: 55ch; }
.sf-delivery .sf-pulse-page > h1 { font-size: calc(clamp(34px, 5vw, 60px) * var(--sf-display-scale)); max-width: 26ch; margin-block: 20px; overflow-wrap: anywhere; }
.sf-delivery .sf-directory-title { padding-block: 20px 24px; }
.sf-delivery .sf-directory-title h1 { font-size: calc(clamp(32px, 4vw, 54px) * var(--sf-display-scale)); margin-bottom: 8px; }
.sf-region-directory { margin-bottom: 48px; }
.sf-region-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.sf-region-feature { border-bottom: 2px solid var(--sf-area-accent, var(--sf-blue)); }
.sf-region-feature figure { margin: 0; }
.sf-region-feature figure img { width: 100%; height: auto; aspect-ratio: 2/1; object-fit: cover; display: block; }
.sf-region-feature figcaption { font-size: var(--sf-size-11); line-height: 1.4; color: var(--sf-muted); padding-top: 6px; }
.sf-region-feature figcaption a { text-decoration: underline; }
.sf-region-feature-copy { padding: 20px 0; }
.sf-region-feature-copy h2 { font-size: calc(clamp(28px, 3vw, 40px) * var(--sf-display-scale)); margin: 6px 0 12px; }
.sf-region-feature-copy > p:not(.sf-eyebrow) { font-size: var(--sf-size-15); line-height: 1.55; }
.sf-region-feature-highlight { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--sf-line); }
.sf-region-feature-highlight strong { display: block; margin-bottom: 5px; }
.sf-region-feature-cta { display: flex; justify-content: space-between; font-weight: 700; padding: 14px 0 8px; }
.sf-region-stays-link { display: block; font-size: var(--sf-size-13); margin-top: 8px; }
.sf-directory-search { display: flex; gap: 16px; margin-bottom: 24px; }
@media (max-width: 700px) {
.sf-region-directory-grid { grid-template-columns: 1fr; }
}
.sf-delivery .sf-travel-credit { font-size: var(--sf-size-12); line-height: 1.4; color: var(--sf-neutral-580); margin: 6px 0 0; }
.sf-travel-credit a { text-decoration: underline; }
.sf-brand-worlds { --sf-brand-tile: var(--sf-ink); }
.sf-brand-worlds [data-brand-area="fit"] { --sf-brand-tile: var(--sf-fit); }
.sf-brand-worlds [data-brand-area="advice"] { --sf-brand-tile: var(--sf-advice); }
.sf-brand-worlds [data-brand-area="travel"] { --sf-brand-tile: var(--sf-travel); }
.sf-brand-worlds [data-brand-area="club"] { --sf-brand-tile: var(--sf-club); }
.sf-brand-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 8px; }
.sf-brand-jump > * { border: 1px solid var(--sf-line); padding: 9px 14px; font-size: var(--sf-size-13); color: var(--sf-text); white-space: nowrap; }
.sf-brand-jump-all { border: 2px solid var(--sf-ink); color: var(--sf-ink); font-weight: 700; text-transform: uppercase; padding-block: 8px; }
.sf-brand-jump a:hover { border-color: var(--sf-blue); color: var(--sf-blue); }
.sf-brand-band { margin-top: 40px; scroll-margin-top: 24px; }
.sf-brand-band-head { display: flex; align-items: baseline; gap: 14px; border-bottom: 2px solid var(--sf-ink); padding-bottom: 10px; }
.sf-brand-band-head > span { font-size: var(--sf-size-13); color: var(--sf-muted); }
.sf-brand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-grid-gap); margin-top: 22px; }
.sf-brand-tile { min-width: 0; border: 1px solid var(--sf-line); }
.sf-brand-tile-main { display: flex; flex-direction: column; height: 100%; }
.sf-brand-tile-rule { display: block; height: 5px; background: var(--sf-brand-tile); }
.sf-brand-tile-media { display: block; overflow: hidden; background: var(--sf-surface); aspect-ratio: 1.5; position: relative; }
.sf-brand-tile-media img { transition: transform 350ms; }
.sf-brand-tile-main:hover img { transform: scale(1.035); }
.sf-brand-tile-main:hover h3 { text-decoration: underline; }
.sf-brand-tile-body { display: flex; flex-direction: column; gap: 9px; padding: 18px 18px 20px; flex: 1; }
.sf-brand-tile-body .sf-eyebrow { color: var(--sf-brand-tile); }
.sf-brand-tile-body h3 { text-align: left; text-wrap: initial; }
.sf-brand-tile-teaser { color: var(--sf-text); font-size: var(--sf-size-14); line-height: 1.6; }
.sf-brand-tile-cta { margin-top: auto; padding-top: 8px; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-ink); }
.sf-brand-advice { margin: 48px 0 12px; padding: 28px; background: var(--sf-surface); }
.sf-brand-advice > p { max-width: 52ch; color: var(--sf-text); margin: 8px 0 14px; }
@media (max-width: 900px) {
.sf-brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
.sf-brand-grid { grid-template-columns: 1fr; }
.sf-brand-jump { flex-wrap: nowrap; overflow-x: auto; }
.sf-brand-advice { padding: 22px 20px; }
}
.sf-brand-intro { max-width: 34ch; padding: 28px 0 4px; }
.sf-brand-intro > p:last-child { color: var(--sf-text); margin-top: 12px; line-height: 1.55; }
.sf-brand-lead { display: grid; grid-template-columns: 1.35fr 1fr; background: var(--sf-ink); color: var(--sf-white); min-height: 380px; }
.sf-brand-lead-media { display: block; overflow: hidden; position: relative; background: var(--sf-surface); }
.sf-brand-lead-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 400ms; }
.sf-brand-lead:hover .sf-brand-lead-media img { transform: scale(1.03); }
.sf-brand-lead-copy { display: flex; flex-direction: column; gap: 12px; padding: 36px 34px 34px; border-top: 5px solid var(--sf-brand-tile, var(--sf-blue)); }
.sf-brand-lead-copy .sf-eyebrow { color: var(--sf-white); opacity: 0.8; }
.sf-brand-lead-title { font: var(--sf-heading-weight) calc(46px * var(--sf-display-scale)) / 1 var(--sf-display); text-transform: uppercase; }
.sf-brand-lead-teaser { line-height: 1.55; opacity: 0.92; max-width: 40ch; }
.sf-brand-lead-cta { margin-top: auto; align-self: start; background: var(--sf-white); color: var(--sf-ink); font-weight: 700; padding: 13px 20px; }
@media (max-width: 860px) {
.sf-brand-lead { grid-template-columns: 1fr; min-height: 0; }
.sf-brand-lead-media { aspect-ratio: 1.5; }
.sf-brand-lead-copy { padding: 26px 20px 28px; }
.sf-brand-lead-title { font-size: calc(34px * var(--sf-display-scale)); }
}
.sf-dynamik a.sf-brand-lead, .sf-dynamik a.sf-brand-lead:hover { color: var(--sf-white); }
.sf-dynamik a.sf-brand-lead .sf-brand-lead-title, .sf-dynamik a.sf-brand-lead .sf-brand-lead-teaser { color: var(--sf-white); }
.sf-dynamik a.sf-brand-lead .sf-brand-lead-cta { color: var(--sf-ink); }
.sf-mwu { --sf-section-accent: var(--sf-ink); display: grid; gap: var(--sf-hm-abschnitt); padding-bottom: var(--sf-hm-s7); }
.sf-mwu .sf-brand-band, .sf-mwu .sf-brand-jump { margin-top: 0; }
.sf-mwu .sf-brand-jump.sf-brand-jump { flex-wrap: wrap; overflow: visible; }
.sf-mwu-intro { display: grid; gap: var(--sf-hm-s3); align-content: start; min-width: 0; }
.sf-mwu-intro h1 { margin: 0; }
.sf-mwu-lead { max-width: 46ch; color: var(--sf-text); line-height: 1.55; }
.sf-mwu-buehne { display: grid; gap: var(--sf-hm-s3); align-content: start; min-width: 0; }
.sf-mwu-buehne-kicker { margin: 0; font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-muted); }
.sf-dynamik a.sf-mwu-buehne-titel { font-family: var(--sf-display); font-weight: 800; font-size: var(--sf-hb-h3); line-height: 1.05; text-transform: uppercase; color: var(--sf-ink); text-decoration: none; }
.sf-mwu-anker { display: block; scroll-margin-top: var(--sf-hm-s5); }
.sf-mwu-momente { display: grid; gap: var(--sf-hm-kopf-abstand, var(--sf-hm-s4)); scroll-margin-top: var(--sf-hm-s5); }
.sf-mwu-mosaik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 210px; gap: var(--sf-hm-s2); }
.sf-mwu-moment { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-width: 0; overflow: hidden; background: var(--sf-ink); color: var(--sf-white); }
.sf-mwu-moment[data-sf-gross] { grid-column: span 2; grid-row: span 2; }
.sf-mwu-moment:last-child:nth-child(even) { grid-column: span 2; }
.sf-mwu-moment::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to bottom, var(--sf-hb-schleier-null) 30%, var(--sf-hb-schleier-mitte) 62%, var(--sf-hb-schleier-tief) 100% ); }
.sf-mwu-moment-bild.sf-mwu-moment-bild { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; z-index: -1; object-fit: cover; transition: transform 0.6s ease; }
.sf-mwu-moment:hover .sf-mwu-moment-bild { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
.sf-mwu-moment-bild.sf-mwu-moment-bild { transition: none; }
}
.sf-mwu-moment-nachweis.sf-mwu-moment-nachweis { position: absolute; top: var(--sf-hm-s2); right: var(--sf-hm-s2); z-index: 1; margin: 0; padding: 2px 6px; font-size: var(--sf-hb-mini, 11px); color: var(--sf-white); background: var(--sf-overlay-60); }
.sf-mwu-moment-text { display: grid; gap: var(--sf-hm-s1); width: 100%; padding: var(--sf-hm-s4); }
.sf-mwu-moment-einsatz.sf-mwu-moment-einsatz { margin: 0; font-size: var(--sf-hb-mini, 11px); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-white); }
.sf-mwu-moment-titel.sf-mwu-moment-titel { margin: 0; font-family: var(--sf-display-condensed); font-weight: 800; font-size: calc(22px * var(--sf-display-scale)); line-height: 1; text-wrap: balance; }
.sf-mwu-moment[data-sf-gross] .sf-mwu-moment-titel { font-size: calc(clamp(30px, 3.4vw, 46px) * var(--sf-display-scale)); }
.sf-dynamik a.sf-mwu-moment-link { color: var(--sf-white); text-decoration: none; }
.sf-dynamik a.sf-mwu-moment-link::before { content: ""; position: absolute; inset: 0; }
.sf-dynamik a.sf-mwu-moment-link:focus-visible { outline: none; }
.sf-dynamik a.sf-mwu-moment-link:focus-visible::before { outline: 3px solid var(--sf-white); outline-offset: -6px; }
.sf-mwu-moment-satz.sf-mwu-moment-satz { display: none; margin: 0; max-width: 40ch; font-size: var(--sf-hb-text-klein); line-height: 1.4; color: var(--sf-white); }
.sf-mwu-moment[data-sf-gross] .sf-mwu-moment-satz { display: block; }
.sf-mwu-moment-marken.sf-mwu-moment-marken { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1); margin: var(--sf-hm-s2) 0 0; padding: 0; list-style: none; }
.sf-dynamik .sf-mwu-moment-marken a { display: inline-block; padding: 5px 8px; font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-ink); background: var(--sf-white); text-decoration: none; }
.sf-dynamik .sf-mwu-moment-marken a:hover { background: var(--sf-surface); }
.sf-mwu-moment-marken[data-sf-satz] { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s1); }
.sf-dynamik .sf-mwu-moment-marken[data-sf-satz] a { display: grid; gap: 2px; padding: var(--sf-hm-s2) var(--sf-hm-s3); }
.sf-mwu-moment-marken[data-sf-satz] strong { font-size: var(--sf-hb-text-klein); }
.sf-mwu-moment-marken[data-sf-satz] span { font-weight: 400; color: var(--sf-text); }
.sf-mwu-ausserdem.sf-mwu-ausserdem { margin: 0; font-size: var(--sf-hb-text-klein); color: var(--sf-text); }
.sf-dynamik .sf-mwu-ausserdem a { color: var(--sf-ink); font-weight: 700; }
.sf-mwu-anzeige { display: grid; gap: var(--sf-hm-s3); }
.sf-mwu-anzeige-kopf { display: grid; gap: var(--sf-hm-s2); }
.sf-mwu-anzeige-kopf .sf-mw-kennzeichnung { max-width: none; margin: 0; padding: 0; }
.sf-mwu-anzeige .sf-mw-modul { padding: var(--sf-hm-s4); }
.sf-mwu-abschnitt { display: grid; gap: var(--sf-hm-kopf-abstand); }
.sf-mwu-fuss { display: grid; gap: var(--sf-hm-s5); }
.sf-mwu-service, .sf-mwu-berater { display: grid; gap: var(--sf-hm-s2); align-content: start; padding: var(--sf-hm-s5); background: var(--sf-surface); }
.sf-mwu-service p, .sf-mwu-berater p { margin: 0; font-size: var(--sf-hb-text-klein); line-height: 1.6; }
@media (min-width: 1024px) {
.sf-mwu-intro h1 { font-size: calc(76px * var(--sf-display-scale)); }
.sf-mwu-mosaik { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 250px; }
.sf-mwu-moment:last-child:nth-child(even) { grid-column: auto; }
.sf-mwu-mosaik[data-sf-anzahl="4"] .sf-mwu-moment:last-child { grid-column: span 2; }
.sf-mwu-mosaik[data-sf-anzahl="3"] { grid-template-columns: 2fr 1fr; }
.sf-mwu-mosaik[data-sf-anzahl="2"] { grid-template-columns: 1fr 1fr; }
.sf-mwu-mosaik[data-sf-anzahl="2"] .sf-mwu-moment[data-sf-gross], .sf-mwu-mosaik[data-sf-anzahl="1"] .sf-mwu-moment[data-sf-gross] { grid-column: auto; }
.sf-mwu-mosaik[data-sf-anzahl="1"] { grid-template-columns: 1fr; }
.sf-mwu-moment[data-sf-gross] { grid-column: auto; }
.sf-mwu-moment-satz.sf-mwu-moment-satz { display: block; }
.sf-mwu-moment[data-sf-gross] .sf-mwu-moment-text { padding: var(--sf-hm-s5); }
.sf-mwu-moment[data-sf-gross] .sf-mwu-moment-marken[data-sf-satz] { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.sf-mwu-anzeige .sf-mw-modul { padding: var(--sf-hm-s6); }
.sf-mwu-anzeige .sf-mw-regler { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sf-hm-s6); }
.sf-mwu-anzeige .sf-shop-list[data-layout="grid"] { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.sf-mwu-fuss { grid-template-columns: 2fr 1fr; }
.sf-mwu-buehne--bild .sf-brand-lead { min-height: 470px; }
}
.sf-sport-page { --sf-sport: var(--sf-travel); --sf-sport-tint: var(--sf-travel-tint); padding-block: 8px 64px; }
.sf-sport-page h1, .sf-sport-page h2 { letter-spacing: -0.018em; }
.sf-sport-page .sf-eyebrow { font-size: var(--sf-size-12); letter-spacing: 0.14em; text-transform: var(--sf-label-case); font-weight: 700; }
.sf-sport-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); background: var(--sf-sport); color: var(--sf-white); min-height: 480px; }
.sf-sport-stage--solo { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.sf-sport-stage-copy { display: flex; flex-direction: column; gap: 20px; padding: 48px 48px 40px; }
.sf-delivery .sf-sport-stage .sf-eyebrow { color: var(--sf-white); opacity: 0.85; }
.sf-sport-stage h1 { color: var(--sf-white); font-size: calc(clamp(44px, 5.3vw, 76px) * var(--sf-display-scale)); line-height: 1.02; max-width: 16ch; }
.sf-sport-stage-lead { font-size: var(--sf-size-19); line-height: 1.5; max-width: 34ch; }
.sf-sport-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.sf-sport-switch a, .sf-sport-switch span { border: 1px solid var(--sf-overlay-white-50); color: var(--sf-white); padding: 10px 16px; font-size: var(--sf-size-14); white-space: nowrap; }
.sf-sport-switch a:hover { background: var(--sf-white); color: var(--sf-sport); }
.sf-sport-switch span[aria-current] { background: var(--sf-white); border-color: var(--sf-white); color: var(--sf-sport); font-weight: 700; }
.sf-sport-stage-image { margin: 0; background: var(--sf-sport-tint); }
.sf-sport-stage-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-sport-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border: 1px solid var(--sf-line); border-top: 0; }
.sf-sport-facts > div { display: flex; flex-direction: column; gap: 6px; padding: 24px 26px; border-right: 1px solid var(--sf-line); }
.sf-sport-facts > div:last-child { border-right: 0; }
.sf-sport-facts dt { font-family: var(--sf-display); font-weight: var(--sf-heading-weight); font-size: calc(clamp(34px, 3.4vw, 48px) * var(--sf-display-scale)); line-height: 1.02; letter-spacing: -0.018em; color: var(--sf-sport); }
.sf-sport-facts dd { margin: 0; font-size: var(--sf-size-14); color: var(--sf-text); }
.sf-sport-today { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 36px; margin-top: 20px; padding: 16px 26px; background: var(--sf-sport-tint); font-size: var(--sf-size-15); }
.sf-delivery .sf-sport-today h2.sf-eyebrow { font-family: var(--sf-body); color: var(--sf-sport); margin: 0; }
.sf-sport-today dl { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 0; }
.sf-sport-today dl > div { display: flex; gap: 6px; align-items: baseline; }
.sf-sport-today dt { color: var(--sf-text); }
.sf-sport-today dd { margin: 0; font-weight: 700; order: -1; }
.sf-sport-today p { margin-left: auto; font-size: var(--sf-size-13); color: var(--sf-muted); }
.sf-sport-map { margin-top: 32px; }
.sf-sport-intro { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; margin-top: 56px; }
.sf-sport-jump { display: flex; flex-direction: column; gap: 12px; align-self: start; position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + 96px); font-size: var(--sf-size-15); }
.sf-delivery .sf-sport-jump .sf-eyebrow { color: var(--sf-muted); }
.sf-sport-jump a { color: var(--sf-blue); }
.sf-sport-jump a:hover { color: var(--sf-blue-hover); }
.sf-sport-fit { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sf-sport-fit-lists { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 28px; }
.sf-sport-fit-lists > div { border-top: 4px solid var(--sf-fit); padding-top: 18px; }
.sf-sport-fit-lists > .sf-sport-fit-bad { border-top-color: var(--sf-muted); }
.sf-delivery .sf-sport-fit-good .sf-eyebrow { color: var(--sf-fit); }
.sf-delivery .sf-sport-fit-bad .sf-eyebrow { color: var(--sf-muted); }
.sf-sport-fit ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 12px; }
.sf-sport-fit li, .sf-sport-fit-text { font-size: var(--sf-size-17); line-height: 1.5; }
.sf-sport-fit-text { color: var(--sf-text); line-height: 1.65; max-width: 68ch; }
.sf-sport-more summary { cursor: pointer; font-weight: 700; color: var(--sf-blue); }
.sf-sport-more[open] summary { margin-bottom: 16px; }
.sf-sport-text { max-width: var(--sf-reading); }
.sf-sport-block { display: flex; flex-direction: column; gap: 24px; margin-top: 72px; }
.sf-sport-block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; border-bottom: 2px solid var(--sf-ink); padding-bottom: 12px; }
.sf-sport-block-head a { font-weight: 700; font-size: var(--sf-size-15); color: var(--sf-blue); }
.sf-sport-tips { list-style: none; counter-reset: sport-tip; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 28px; }
.sf-sport-tips li { counter-increment: sport-tip; display: flex; flex-direction: column; gap: 8px; padding: 22px; background: var(--sf-surface); }
.sf-sport-tips li::before { content: counter(sport-tip, decimal-leading-zero); font-family: var(--sf-display); font-weight: var(--sf-heading-weight); font-size: calc(30px * var(--sf-display-scale)); line-height: 1; color: var(--sf-sport); }
.sf-sport-tips strong { font-size: var(--sf-size-17); }
.sf-sport-tips p, .sf-sport-timeline p:not(.sf-eyebrow) { font-size: var(--sf-size-15); line-height: 1.55; color: var(--sf-text); }
.sf-sport-gear { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sf-sport-gear a { position: relative; }
.sf-sport-gear a, .sf-sport-gear li > strong { display: flex; flex-direction: column; gap: 8px; color: var(--sf-ink); }
.sf-sport-gear figure { position: relative; margin: 0 0 4px; aspect-ratio: 1; border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-sport-gear img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.sf-sport-gear em { position: absolute; top: 8px; left: 8px; padding: 2px 8px; background: var(--sf-sport); color: var(--sf-white); font-style: normal; font-weight: 700; font-size: var(--sf-size-13); }
.sf-sport-gear-brand { font-size: var(--sf-size-11); letter-spacing: 0.14em; text-transform: var(--sf-label-case); font-weight: 700; color: var(--sf-muted); }
.sf-sport-gear strong { font-weight: 600; }
.sf-sport-gear a:hover strong { text-decoration: underline; }
.sf-sport-gear-price { font-weight: 700; }
.sf-sport-gear-price s { margin-left: 8px; font-weight: 400; color: var(--sf-muted); }
.sf-sport-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 4px solid var(--sf-sport); }
.sf-sport-timeline li { display: flex; flex-direction: column; gap: 8px; padding: 20px 24px 0; border-left: 1px solid var(--sf-line); }
.sf-sport-timeline li:first-child { padding-left: 0; border-left: 0; }
.sf-delivery .sf-sport-timeline .sf-eyebrow { color: var(--sf-sport); }
.sf-sport-timeline strong { font-size: var(--sf-size-18); }
.sf-sport-stays { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.sf-sport-stay { display: flex; flex-direction: column; border: 1px solid var(--sf-line); color: var(--sf-ink); }
.sf-sport-stay img { display: block; width: 100%; height: 180px; object-fit: cover; background: var(--sf-sport-tint); }
.sf-sport-stay-body { display: flex; flex-direction: column; gap: 8px; padding: 18px; }
.sf-sport-stay-body strong { font-size: var(--sf-size-18); }
.sf-sport-stay-body span { font-size: var(--sf-size-15); line-height: 1.5; color: var(--sf-text); }
.sf-sport-stay-body em { font-style: normal; font-size: var(--sf-size-12); font-weight: 700; color: var(--sf-sport); }
.sf-sport-stay:hover strong { text-decoration: underline; }
.sf-sport-more-links { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; margin-top: 72px; }
.sf-sport-readon, .sf-sport-apps { display: flex; flex-direction: column; gap: 14px; }
.sf-delivery .sf-sport-readon .sf-eyebrow { color: var(--sf-muted); }
.sf-sport-readon a { font-size: var(--sf-size-20); font-weight: 700; color: var(--sf-ink); border-bottom: 1px solid var(--sf-line); padding-bottom: 12px; }
.sf-sport-apps { gap: 10px; padding: 22px; background: var(--sf-sport-tint); }
.sf-delivery .sf-sport-apps .sf-eyebrow { color: var(--sf-sport); }
.sf-sport-apps a { font-weight: 700; color: var(--sf-ink); }
.sf-sport-readon a:hover, .sf-sport-apps a:hover { color: var(--sf-blue); }
.sf-sport-sources { margin-top: 48px; font-size: var(--sf-size-13); color: var(--sf-muted); }
@media (max-width: 900px) {
.sf-sport-stage { grid-template-columns: minmax(0, 1fr); min-height: 0; }
.sf-sport-stage-copy { gap: 14px; padding: 26px 20px 22px; }
.sf-sport-stage h1 { font-size: calc(46px * var(--sf-display-scale)); }
.sf-sport-stage-lead { font-size: var(--sf-size-16); }
.sf-sport-switch { flex-wrap: wrap; }
.sf-sport-stage-image img { height: 220px; }
.sf-sport-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-sport-facts > div { padding: 18px 20px; border-bottom: 1px solid var(--sf-line); }
.sf-sport-facts > div:nth-child(2n) { border-right: 0; }
.sf-sport-facts dt { font-size: calc(34px * var(--sf-display-scale)); }
.sf-sport-facts dd { font-size: var(--sf-size-13); }
.sf-sport-today { flex-direction: column; align-items: flex-start; padding: 14px 20px; font-size: var(--sf-size-14); }
.sf-sport-today p { margin-left: 0; font-size: var(--sf-size-12); }
.sf-sport-intro { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 36px; }
.sf-sport-jump { display: none; }
.sf-sport-fit li, .sf-sport-fit-text { font-size: var(--sf-size-16); }
.sf-sport-page h2 { font-size: calc(36px * var(--sf-display-scale)); }
.sf-sport-block, .sf-sport-more-links { margin-top: 40px; gap: 14px; }
.sf-sport-tips { gap: 12px; }
.sf-sport-tips li { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 16px; }
.sf-sport-tips li::before { grid-row: span 2; font-size: calc(26px * var(--sf-display-scale)); }
.sf-sport-gear { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.sf-sport-gear li { flex: 0 0 150px; scroll-snap-align: start; }
.sf-sport-timeline { grid-template-columns: minmax(0, 1fr); border-top: 0; border-left: 4px solid var(--sf-sport); padding-left: 14px; gap: 14px; }
.sf-sport-timeline li, .sf-sport-timeline li:first-child { padding: 0; border-left: 0; }
.sf-sport-stays, .sf-sport-more-links { grid-template-columns: minmax(0, 1fr); }
.sf-sport-stay img { height: 150px; }
.sf-sport-webcams ul { grid-template-columns: minmax(0, 1fr); }
}
.sf-sport-webcams h2 { font-size: 1.5rem; margin: 0 0 6px; }
.sf-sport-webcams > p { margin: 0 0 20px; color: var(--sf-ink-soft, inherit); }
.sf-sport-webcams ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px; margin: 0; padding: 0; list-style: none; }
.sf-sport-webcams.sf-sport-webcams-einzeln ul, .sf-travel-detail .sf-sport-webcams.sf-sport-webcams-einzeln ul { grid-template-columns: minmax(0, 1fr); }
.sf-sport-webcams.sf-sport-webcams-einzeln img { aspect-ratio: 21 / 9; }
.sf-sport-webcams figure { display: flex; flex-direction: column; margin: 0; border: 1px solid var(--sf-line); background: var(--sf-sport-tint); }
.sf-sport-webcams img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sf-sport-webcams figcaption { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 14px; }
.sf-sport-webcams figcaption span { font-size: 0.875rem; color: var(--sf-ink-soft, inherit); }
.sf-sport-webcams figcaption small { font-size: 0.75rem; color: var(--sf-ink-soft, inherit); }
.sf-sport-webcams figcaption a { align-self: flex-start; font-size: 0.875rem; }
.sf-sport-webcam-start { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 100%; aspect-ratio: 16 / 9; border: 0; background: var(--sf-sport-tint); color: var(--sf-ink); font: inherit; font-weight: 600; cursor: pointer; }
.sf-sport-webcam-start:hover, .sf-sport-webcam-start:focus-visible { background: var(--sf-line); }
.sf-sport-webcam-start span[aria-hidden] { font-size: 1.5rem; line-height: 1; }
.sf-sport-webcam-start-name { font-weight: 400; font-size: 0.8125rem; color: var(--sf-ink-soft, inherit); padding: 0 12px; text-align: center; }
.sf-sport-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; margin-top: 20px; }
.sf-sport-tile { display: grid; gap: 8px; padding: 20px; border: 1px solid var(--sf-line); border-top: 4px solid var(--sf-area); }
.sf-sport-tile:hover { background: var(--sf-tint-sand-20); }
.sf-sport-tile strong { font-size: calc(26px * var(--sf-display-scale)); text-transform: var(--sf-heading-case); }
.sf-sport-tile em { font-style: normal; font-weight: 700; color: var(--sf-area); }
.sf-topbar-ad { display: flex; align-items: stretch; margin: 12px 0 4px; padding: 0; background: var(--sf-ad-grund, var(--sf-white)); border-radius: var(--sf-radius); overflow: hidden; }
.sf-topbar-ad a { display: flex; flex: 1; align-items: center; gap: 16px; min-width: 0; padding: 8px 12px 8px 8px; color: var(--sf-ad-schrift, var(--sf-ink)); text-decoration: none; }
.sf-topbar-ad img { flex-shrink: 0; width: 96px; height: 56px; object-fit: contain; }
.sf-topbar-ad-copy { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; gap: 2px; min-width: 0; }
.sf-topbar-ad .sf-live-ad-label { margin: 0; color: var(--sf-ad-leise, var(--sf-muted)); font: 700 var(--sf-size-11) / 1.3 var(--sf-body); letter-spacing: 0.08em; text-transform: uppercase; }
.sf-topbar-ad-zeile { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.sf-topbar-ad .sf-live-ad-title { font: 700 var(--sf-size-20) / 1.1 var(--sf-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-topbar-ad-text { font-size: var(--sf-size-14); color: var(--sf-ad-leise, var(--sf-muted)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-topbar-ad .sf-live-ad-cta { display: inline-flex; flex-shrink: 0; align-items: center; min-height: 40px; padding: 0 16px; background: var(--sf-ad-knopf, var(--sf-ink)); color: var(--sf-ad-knopf-schrift, var(--sf-white)); border-radius: var(--sf-radius); font: 700 var(--sf-size-14) / 1 var(--sf-body); }
.sf-topbar-ad a:hover .sf-live-ad-cta, .sf-topbar-ad a:focus-visible .sf-live-ad-cta { background: var(--sf-white); color: var(--sf-ad-grund, var(--sf-blue)); }
.sf-topbar-ad a:focus-visible { outline: 3px solid var(--sf-ad-knopf, var(--sf-blue)); outline-offset: -3px; }
.sf-topbar-ad-close { flex-shrink: 0; align-self: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--sf-ad-leise, var(--sf-muted)); font-size: var(--sf-size-20); line-height: 1; cursor: pointer; }
@media (max-width: 700px) {
.sf-topbar-ad a { gap: 10px; padding: 8px 4px 8px 10px; }
.sf-topbar-ad-text, .sf-topbar-ad img { display: none; }
.sf-topbar-ad .sf-live-ad-title { display: -webkit-box; font-size: var(--sf-size-17); white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sf-topbar-ad .sf-live-ad-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--sf-size-12); letter-spacing: 0; text-transform: none; }
.sf-topbar-ad .sf-live-ad-cta { min-height: 36px; padding: 0 10px; font-size: var(--sf-size-12); }
.sf-topbar-ad-close { width: 36px; }
}
.sf-rail-ad { margin-top: 24px; max-width: 300px; }
.sf-rail-ad .sf-live-ad { margin: 0; }
.sf-rail-ad .sf-live-ad a > div { padding: 12px; }
.sf-rail-ad .sf-live-ad h2 { font-size: var(--sf-size-17); }
@media (max-width: 1000px) {
.sf-rail-ad { display: none; }
}
.sf-presented-ad { display: flex; justify-content: flex-end; margin: 0 0 var(--sf-hm-s2); }
.sf-dynamik .sf-mwu-intro .sf-eyebrow { color: var(--sf-ink); }
.sf-livebild-start { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 0; border: 0; background: transparent; color: var(--sf-white); font-size: var(--sf-size-20); cursor: pointer; }
.sf-livebild-start:focus-visible { outline: 3px solid var(--sf-white); outline-offset: -6px; }
.sf-livebild-video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--sf-ink); }
.sf-livebild-hinweis { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 8px 12px; background: var(--sf-ink); color: var(--sf-white); font-size: var(--sf-size-14); }
.sf-livebild-rundum.sf-livebild-rundum { position: absolute; inset: 0; display: grid; place-items: start; margin: 0; padding: var(--sf-hm-s2, 8px); border: 0; background: transparent; color: var(--sf-white); font: 700 var(--sf-size-14) / 1 var(--sf-body); text-decoration: none; cursor: pointer; }
.sf-livebild-rundum.sf-livebild-rundum span { padding: 6px 12px; border: 1px solid var(--sf-white); background: var(--sf-ink); color: var(--sf-white); font: 700 var(--sf-size-14) / 1 var(--sf-body); }
.sf-livebild-rundum:focus-visible { outline: 3px solid var(--sf-white); outline-offset: -6px; }
.sf-livebild-panorama { display: block; width: 100%; height: 100%; border: 0; background: var(--sf-ink); }
.sf-gb-cam-buehne:has(video) .sf-gb-cam-zeile { top: 0; bottom: auto; }
.sf-sport-webcams figure > .sf-livebild-rahmen { position: relative; }
.sf-sport-webcams .sf-livebild-video { aspect-ratio: 16 / 9; }
.sf-dynamik .sf-sport-unterzeile { margin: var(--sf-hm-s2, 8px) 0 0; font: 600 var(--sf-size-18) / 1.35 var(--sf-body); color: inherit; max-width: 40ch; text-wrap: balance; }
.sf-presented-ad { display: flex; justify-content: flex-start; margin: 0 0 var(--sf-hm-s3, 12px); }
.sf-presented-ad .sf-hb-praesentiert.sf-hb-praesentiert:not(.sf-hb-praesentiert--hell) { gap: 12px; padding: 6px 14px 6px 12px; background: var(--sf-white); border: 1px solid var(--sf-line); border-left: 3px solid var(--sf-section-accent, var(--sf-ink)); }
.sf-presented-ad .sf-hb-praesentiert.sf-hb-praesentiert img { height: 32px; max-width: 140px; }
.sf-presented-ad .sf-hb-praesentiert.sf-hb-praesentiert strong { font-size: var(--sf-size-15); }
.sf-presented-ad .sf-hb-praesentiert.sf-hb-praesentiert::after { content: "→"; font-weight: 700; color: var(--sf-section-accent, var(--sf-ink)); }
.sf-presented-ad .sf-hb-praesentiert--hell.sf-hb-praesentiert--hell::after { color: var(--sf-white); }
.sf-live-ad:not(.sf-live-ad--article):not([data-sf-ad-form="quer"]) { background: var(--sf-ad-grund, var(--sf-white)); color: var(--sf-ad-schrift, var(--sf-ink)); border-radius: var(--sf-radius); overflow: hidden; }
.sf-live-ad:not(.sf-live-ad--article):not([data-sf-ad-form="quer"]) > .sf-live-ad-label { margin: 0; padding: 8px 14px; color: var(--sf-ad-leise, var(--sf-muted)); font: 700 var(--sf-size-11) / 1.3 var(--sf-body); letter-spacing: 0.08em; text-transform: uppercase; }
.sf-live-ad:not(.sf-live-ad--article):not([data-sf-ad-form="quer"]) > a { border: 0; color: inherit; text-decoration: none; }
.sf-live-ad:not(.sf-live-ad--article):not([data-sf-ad-form="quer"]) > a > div { display: grid; justify-items: start; gap: 8px; padding: 16px 18px 18px; }
.sf-live-ad:not(.sf-live-ad--article):not([data-sf-ad-form="quer"]) h2.sf-live-ad-title { margin: 0; font: 700 calc(clamp(22px, 2.4vw, 32px) * var(--sf-display-scale, 1)) / 1.05 var(--sf-display); color: inherit; }
.sf-live-ad:not(.sf-live-ad--article):not([data-sf-ad-form="quer"]) > a p { margin: 0; color: var(--sf-ad-leise, var(--sf-muted)); font-size: var(--sf-size-15); line-height: 1.45; }
.sf-live-ad:not(.sf-live-ad--article):not([data-sf-ad-form="quer"]) .sf-live-ad-cta { display: inline-flex; align-items: center; min-height: 40px; margin-top: 4px; padding: 0 16px; background: var(--sf-ad-knopf, var(--sf-ink)); color: var(--sf-ad-knopf-schrift, var(--sf-white)); border-radius: var(--sf-radius); font: 700 var(--sf-size-14) / 1 var(--sf-body); }
.sf-live-ad:not(.sf-live-ad--article):not([data-sf-ad-form="quer"]) > a:hover .sf-live-ad-cta, .sf-live-ad:not(.sf-live-ad--article):not([data-sf-ad-form="quer"]) > a:focus-visible .sf-live-ad-cta { background: var(--sf-white); color: var(--sf-ad-grund, var(--sf-blue)); }
.sf-dynamik .sf-ak--startschuss { padding: 0; border-top-color: var(--sf-sport); background: var(--sf-ink); color: var(--sf-on-dark); gap: 0; }
.sf-dynamik .sf-ak--startschuss .sf-ak-kopf { padding: 10px 16px 0; }
.sf-dynamik .sf-ak--startschuss .sf-ak-kopf .sf-live-ad-label, .sf-dynamik .sf-ak--startschuss .sf-ak-uhr { color: var(--sf-on-dark-muted); }
.sf-dynamik .sf-ak--startschuss .sf-ak-uhr::before { background: var(--sf-on-dark-muted); }
.sf-dynamik .sf-sts-in { display: grid; grid-template-columns: 1fr; }
.sf-dynamik .sf-sts-text { display: grid; align-content: center; gap: 6px; min-width: 0; padding: 8px 16px 14px; }
.sf-dynamik .sf-sts-titel { margin: 0; color: var(--sf-on-dark); font: 800 calc(clamp(28px, 7cqi, 44px) * var(--sf-display-scale, 1)) / 0.98 var(--sf-display); text-transform: uppercase; text-wrap: balance; }
.sf-dynamik .sf-sts-unter { margin: 0; color: var(--sf-on-dark-muted); font: 400 var(--sf-size-15) / 1.4 var(--sf-body); }
.sf-dynamik .sf-sts-gewinn { margin: 0; padding-left: 10px; border-left: 3px solid var(--sf-ss-gruen); color: var(--sf-on-dark); font: 600 var(--sf-size-15) / 1.4 var(--sf-body); text-align: left; }
.sf-dynamik .sf-sts-buehne { position: relative; aspect-ratio: 4 / 3; max-width: 100%; margin: 0; overflow: hidden; background: var(--sf-ss-schnee); cursor: pointer; outline: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: pan-y; }
.sf-dynamik .sf-sts-buehne:focus-visible { box-shadow: inset 0 0 0 3px var(--sf-ss-gruen); }
.sf-dynamik .sf-sts-buehne canvas, .sf-dynamik .sf-sts-buehne img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sf-dynamik .sf-sts-buehne img { object-fit: cover; }
.sf-dynamik .sf-sts-hud { position: absolute; inset: 10px 10px auto; display: flex; justify-content: space-between; pointer-events: none; color: var(--sf-ss-nacht); font: 800 calc(20px * var(--sf-display-scale)) / 1 var(--sf-display); font-variant-numeric: tabular-nums; }
.sf-dynamik .sf-sts-hud span { padding: 5px 8px 3px; border-radius: 3px; background: var(--sf-ss-hud); }
.sf-dynamik .sf-sts-hinweis { position: absolute; left: 50%; bottom: 14px; display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; border-radius: 999px; transform: translateX(-50%); background: var(--sf-ss-nacht); box-shadow: 0 6px 20px var(--sf-ss-schatten); color: var(--sf-ss-weiss); pointer-events: none; font: 800 calc(18px * var(--sf-display-scale)) / 1 var(--sf-display); letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; }
.sf-dynamik .sf-sts-hinweis svg { width: 26px; height: 26px; fill: var(--sf-ss-weiss); animation: sf-sts-wisch 1.4s ease-in-out infinite; }
@keyframes sf-sts-wisch { 0%, 100% { transform: translateX(-6px) rotate(-8deg); } 50% { transform: translateX(6px) rotate(8deg); } }
.sf-dynamik .sf-sts-ende { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 16px; background: var(--sf-ss-glas); color: var(--sf-ss-weiss); text-align: center; }
.sf-dynamik .sf-sts-ende strong { font: 800 calc(clamp(44px, 14cqi, 72px) * var(--sf-display-scale)) / 0.9 var(--sf-display); text-transform: uppercase; }
.sf-dynamik .sf-sts-ende p { max-width: 32ch; margin: 0; font: 400 var(--sf-size-16) / 1.35 var(--sf-body); }
.sf-dynamik .sf-sts-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 16px; margin-top: 4px; }
.sf-dynamik .sf-sts-ziel { display: inline-flex; align-items: center; height: 46px; padding: 0 18px; background: var(--sf-ss-weiss); color: var(--sf-ink); font: 700 var(--sf-size-16) / 1 var(--sf-body); text-decoration: none; white-space: nowrap; }
.sf-dynamik .sf-sts-direkt, .sf-dynamik .sf-sts-nochmal { justify-self: start; padding: 4px 0; border: 0; background: none; color: var(--sf-ss-weiss); font: 600 var(--sf-size-15) / 1.2 var(--sf-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sf-dynamik .sf-sts-wege { display: grid; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sf-ss-linie-fein); }
.sf-dynamik .sf-sts-weg { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 10px; height: 100%; padding: 11px 16px; border-bottom: 1px solid var(--sf-ss-linie-zart); background: var(--sf-ss-flaeche); color: var(--sf-ss-weiss); text-decoration: none; }
.sf-dynamik .sf-sts-wege li:last-child .sf-sts-weg { border-bottom: 0; }
.sf-dynamik .sf-sts-weg small { color: var(--sf-ss-rot-hell); font: 700 var(--sf-size-11) / 1.2 var(--sf-body); letter-spacing: 0.1em; text-transform: uppercase; }
.sf-dynamik .sf-sts-weg strong { font: 700 calc(18px * var(--sf-display-scale)) / 1.05 var(--sf-display); text-transform: uppercase; }
.sf-dynamik .sf-sts-ziel:focus-visible, .sf-dynamik .sf-sts-direkt:focus-visible, .sf-dynamik .sf-sts-nochmal:focus-visible, .sf-dynamik .sf-sts-weg:focus-visible { outline: 3px solid var(--sf-ss-gruen); outline-offset: 2px; }
@container sf-ak (min-width: 640px) {
.sf-dynamik .sf-sts-in { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.sf-dynamik .sf-sts-text { order: 2; gap: 10px; padding: 20px 26px; }
.sf-dynamik .sf-sts-buehne { aspect-ratio: auto; height: 300px; }
.sf-dynamik .sf-sts-wege { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.sf-dynamik .sf-sts-weg { flex-direction: column; border-bottom: 0; border-right: 1px solid var(--sf-ss-linie-zart); }
.sf-dynamik .sf-sts-wege li:last-child .sf-sts-weg { border-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
.sf-dynamik .sf-sts-hinweis svg { animation: none; }
}
.sf-dynamik .sf-ak--startschuss .sf-sts-titel.sf-sts-titel { color: var(--sf-on-dark); font-size: calc(clamp(28px, 7cqi, 44px) * var(--sf-display-scale, 1)); }
.sf-dynamik .sf-ak--startschuss a.sf-sts-ziel.sf-sts-ziel { display: inline-flex; flex: 0 0 auto; align-items: center; width: auto; height: 46px; padding: 0 18px; background: var(--sf-ss-weiss); color: var(--sf-ink); white-space: nowrap; text-decoration: none; }
.sf-dynamik .sf-ak--startschuss a.sf-sts-direkt.sf-sts-direkt, .sf-dynamik .sf-ak--startschuss a.sf-sts-weg.sf-sts-weg, .sf-dynamik .sf-ak--startschuss button.sf-sts-nochmal.sf-sts-nochmal { color: var(--sf-ss-weiss); }
/* sport.css */
.sf-dynamik .sf-sb { --sf-sb-accent: var(--sf-section-accent, var(--sf-sport)); }
.sf-dynamik .sf-sb .num { font-variant-numeric: tabular-nums; }
.sf-dynamik .sf-sb .sf-eyebrow { color: var(--sf-sb-accent); text-transform: uppercase; font-size: var(--sf-size-11); font-weight: 800; letter-spacing: 0.12em; line-height: 1.5; }
.sf-dynamik .sf-sb a:hover { color: var(--sf-sb-accent); }
.sf-dynamik .sf-sb-note { color: var(--sf-muted); font-size: var(--sf-size-13); line-height: 1.5; }
.sf-dynamik .sf-sb-empty { padding: 28px; background: var(--sf-surface); display: grid; gap: 6px; font-size: var(--sf-size-15); color: var(--sf-text); }
.sf-dynamik .sf-sb-empty strong { color: var(--sf-ink); }
.sf-dynamik .sf-sb h3 { font-size: var(--sf-sport-h3); }
.sf-dynamik .sf-sb .sf-sb-button { display: inline-flex; gap: 28px; align-items: center; background: var(--sf-sb-accent); color: var(--sf-on-dark); padding: 14px 20px; min-height: 50px; font-size: var(--sf-size-13); font-weight: 750; flex-shrink: 0; }
.sf-dynamik .sf-sb .sf-sb-button:hover { color: var(--sf-on-dark); }
.sf-dynamik .sf-sb-shop { margin-block: var(--sf-stack-gap); padding: clamp(20px, 3vw, 40px); background: color-mix(in srgb, var(--sf-sb-accent) 7%, var(--sf-white)); }
.sf-dynamik .sf-sb-shop h2 { margin-bottom: 24px; }
/* sport-editorial.css */
.sf-dynamik .sf-se { padding-bottom: var(--sf-stack-gap); }
.sf-dynamik .sf-se-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sf-stack-gap); padding-block: var(--sf-stack-gap); }
.sf-dynamik .sf-se-heading h1 { font-size: var(--sf-sport-h2); margin: 0; }
.sf-dynamik .sf-se-heading > p { color: var(--sf-muted); font-size: var(--sf-size-18); max-width: 38em; }
.sf-dynamik .sf-se-feature { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); background: var(--sf-sb-accent); color: var(--sf-on-dark); }
.sf-dynamik .sf-se-feature-copy { padding: clamp(24px, 3vw, 48px); display: flex; flex-direction: column; align-items: start; gap: 16px; }
.sf-dynamik .sf-se-feature h2 { font-size: var(--sf-sport-lead); line-height: var(--sf-heading-leading); margin: 0; }
.sf-dynamik .sf-se-feature .sf-eyebrow, .sf-dynamik .sf-se-feature .sf-se-date, .sf-dynamik .sf-se-feature a:hover { color: inherit; }
.sf-dynamik .sf-se-feature .sf-eyebrow { opacity: 0.85; }
.sf-dynamik .sf-se-date { font-size: var(--sf-size-12); color: var(--sf-muted); margin-block: 0 8px; }
.sf-dynamik .sf-se-teaser { font-size: var(--sf-size-16); line-height: 1.6; }
.sf-dynamik .sf-se-read { margin-top: auto; padding-top: 16px; display: flex; gap: 24px; font-weight: 750; font-size: var(--sf-size-14); }
.sf-dynamik .sf-se-feature-image { min-width: 0; position: relative; min-height: 320px; }
.sf-dynamik .sf-se-feature-image img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.sf-dynamik .sf-se-section { margin-block: var(--sf-hm-abschnitt); }
.sf-dynamik .sf-se .sf-section-heading { margin-bottom: var(--sf-hm-kopf-abstand); gap: var(--sf-hm-s4); }
.sf-dynamik .sf-se .sf-section-heading h2 { font-size: var(--sf-sport-h2); }
.sf-dynamik .sf-se .sf-section-heading p { color: var(--sf-muted); font-size: var(--sf-size-16); margin-top: 8px; }
.sf-dynamik .sf-se-archive-link { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-block: var(--sf-stack-gap); border-top: 1px solid var(--sf-line); }
.sf-dynamik .sf-se-archive-link h2 { font-size: var(--sf-sport-h2); }
.sf-dynamik .sf-se-archive-link p { color: var(--sf-muted); margin-top: 8px; }
.sf-dynamik .sf-se .sf-sb-shop > p { color: var(--sf-muted); margin-bottom: 24px; }
@media (max-width: 900px) {
.sf-dynamik .sf-se-heading { display: block; }
.sf-dynamik .sf-se-heading > p { margin-top: 8px; }
}
@media (max-width: 600px) {
.sf-dynamik .sf-se-feature { grid-template-columns: minmax(0, 1fr); }
.sf-dynamik .sf-se-feature-image { grid-row: 1; min-height: 0; aspect-ratio: 16/10; }
.sf-dynamik .sf-se-feature-copy { padding: 24px; }
.sf-dynamik .sf-se-feature h2 { font-size: var(--sf-sport-h2); }
.sf-dynamik .sf-se-archive-link { flex-direction: column; align-items: start; }
}
/* fahrplan.css */
.sf-dynamik .sf-fp-seite { display: flex; flex-direction: column; gap: var(--sf-hm-abschnitt); padding-bottom: var(--sf-hm-abschnitt); }
.sf-dynamik .sf-fp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-dynamik .sf-fp-leise { color: var(--sf-muted); }
.sf-dynamik .sf-fp-fein { margin: 0; font-size: var(--sf-hb-mini); color: var(--sf-muted); }
.sf-dynamik .sf-fp-abschnitt { display: flex; flex-direction: column; gap: var(--sf-hm-s3); }
.sf-dynamik [data-sf-sport="alpine"] { --sf-fp-farbe: var(--sf-sw-alpine); }
.sf-dynamik [data-sf-sport="biathlon"] { --sf-fp-farbe: var(--sf-sw-biathlon); }
.sf-dynamik [data-sf-sport="ski_jumping"] { --sf-fp-farbe: var(--sf-sw-ski-jumping); }
.sf-dynamik [data-sf-sport="cross_country"] { --sf-fp-farbe: var(--sf-sw-cross-country); }
.sf-dynamik [data-sf-sport="nordic_combined"] { --sf-fp-farbe: var(--sf-sw-nordic-combined); }
.sf-dynamik [data-sf-sport="snowboard"] { --sf-fp-farbe: var(--sf-sw-snowboard); }
.sf-dynamik [data-sf-sport="freestyle"] { --sf-fp-farbe: var(--sf-sw-freestyle); }
.sf-dynamik [data-sf-sport="ski_mountaineering"] { --sf-fp-farbe: var(--sf-sw-ski-mountaineering); }
.sf-dynamik [data-sf-sport="luge"] { --sf-fp-farbe: var(--sf-sw-luge); }
.sf-dynamik [data-sf-sport="bobsleigh"] { --sf-fp-farbe: var(--sf-sw-bobsleigh); }
.sf-dynamik [data-sf-sport="skeleton"] { --sf-fp-farbe: var(--sf-sw-skeleton); }
.sf-dynamik .sf-fp-punkt { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-fp-farbe, var(--sf-muted)); }
.sf-dynamik .sf-hb-wahl .sf-fp-punkt { margin-right: var(--sf-hm-s2); vertical-align: 1px; }
.sf-dynamik .sf-fp-kopf { display: flex; flex-direction: column; gap: var(--sf-hm-s2); padding-top: var(--sf-hm-s4); }
.sf-dynamik .sf-fp-h1 { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-size: var(--sf-fp-h1); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); line-height: var(--sf-hb-seitentitel-zeile, var(--sf-hb-titel-zeile)); letter-spacing: 0; text-transform: none; color: var(--sf-ink); }
.sf-dynamik .sf-fp-lead { margin: 0; max-width: 58ch; font-size: var(--sf-hb-text); line-height: 1.5; color: var(--sf-text); }
.sf-dynamik .sf-fp-steuer { position: sticky; top: var(--sf-kopf-klebt, 0px); z-index: 5; display: flex; flex-direction: column; gap: var(--sf-hm-s2); padding-block: var(--sf-hm-s2); background: var(--sf-white); border-bottom: 1px solid var(--sf-line); }
.sf-dynamik .sf-fp-wochen { display: flex; gap: var(--sf-hm-s2); overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; }
.sf-dynamik .sf-fp-wochen::-webkit-scrollbar { display: none; }
.sf-dynamik .sf-fp-woche { flex: 0 0 auto; display: grid; gap: 2px; min-width: 92px; min-height: 56px; padding: var(--sf-hm-s2) var(--sf-hm-s3); border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-white); color: var(--sf-ink); font: inherit; text-align: left; cursor: pointer; scroll-snap-align: start; }
.sf-dynamik .sf-fp-wochenwahl { display: grid; grid-template-columns: var(--sf-hb-knopf-hoehe) minmax(0, 1fr) var(--sf-hb-knopf-hoehe); gap: var(--sf-hm-s2); align-items: stretch; }
.sf-dynamik .sf-fp-schritt { border: 1px solid var(--sf-ink); border-radius: var(--sf-hb-ecke); background: var(--sf-white); color: var(--sf-ink); font-size: var(--sf-hb-h3); font-weight: 700; line-height: 1; cursor: pointer; }
.sf-dynamik .sf-fp-schritt:disabled { border-color: var(--sf-line); color: var(--sf-line); cursor: default; }
.sf-dynamik .sf-fp-schritt:hover:not(:disabled), .sf-dynamik .sf-fp-woche:hover { border-color: var(--sf-ink); }
.sf-dynamik .sf-fp-woche-datum { font-size: var(--sf-hb-fein); font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-dynamik .sf-fp-woche small { font-size: var(--sf-hb-mini); color: var(--sf-muted); }
.sf-dynamik .sf-fp-woche-punkte { display: flex; gap: 2px; min-height: 6px; }
.sf-dynamik .sf-fp-woche-punkte .sf-fp-punkt { width: 6px; height: 6px; }
.sf-dynamik .sf-fp-woche[aria-pressed="true"] { border-color: var(--sf-ink); background: var(--sf-ink); color: var(--sf-white); }
.sf-dynamik .sf-fp-woche[aria-pressed="true"] small { color: var(--sf-white); opacity: 0.75; }
.sf-dynamik .sf-fp-woche:focus-visible, .sf-dynamik .sf-fp-tag-kopf:focus-visible, .sf-dynamik .sf-fp-hp:focus-visible { outline: 2px solid var(--sf-section-accent); outline-offset: 2px; }
.sf-dynamik .sf-fp-raster { display: flex; flex-direction: column; gap: var(--sf-hm-abschnitt); }
.sf-dynamik .sf-fp-haupt { display: flex; flex-direction: column; gap: var(--sf-hm-s4); min-width: 0; }
.sf-dynamik .sf-fp-rand { display: flex; flex-direction: column; gap: var(--sf-hm-abschnitt); min-width: 0; }
.sf-dynamik .sf-fp-haupt .sf-hb-kopf { margin: 0; }
.sf-dynamik .sf-fp-jetzt { display: grid; gap: var(--sf-hm-s1); padding: var(--sf-hm-s2) var(--sf-hm-s3); border: 1px solid var(--sf-line); border-left: 3px solid var(--sf-hm-live-gruen); font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-fp-jetzt p { margin: 0; }
.sf-dynamik .sf-fp-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-hm-live-gruen-text); }
.sf-dynamik .sf-fp-live::before { content: ""; width: var(--sf-hb-live-punkt); height: var(--sf-hb-live-punkt); border-radius: 50%; background: var(--sf-hm-live-gruen); box-shadow: 0 0 0 4px var(--sf-hm-live-ring); }
.sf-dynamik .sf-fp-tage { display: flex; flex-direction: column; gap: var(--sf-hm-s2); }
.sf-dynamik .sf-fp-tag { display: flex; flex-direction: column; gap: var(--sf-hm-s3); }
.sf-dynamik .sf-fp-tag-h { margin: 0; font: inherit; }
.sf-dynamik .sf-fp-tag-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sf-hm-s2); width: 100%; padding: var(--sf-hm-s2) 0; border: 0; border-bottom: 1px solid var(--sf-line); background: none; color: var(--sf-ink); font: inherit; text-align: left; cursor: pointer; }
.sf-dynamik .sf-fp-tag[data-sf-offen] .sf-fp-tag-kopf { border-bottom: 2px solid var(--sf-ink); }
.sf-dynamik .sf-fp-tag-name { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-fp-tag); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; text-transform: uppercase; }
.sf-dynamik .sf-fp-tag-name em { font-style: normal; color: var(--sf-section-accent); }
.sf-dynamik .sf-fp-tag-info { font-size: var(--sf-hb-mini); color: var(--sf-muted); white-space: nowrap; }
.sf-dynamik button.sf-fp-tag-kopf .sf-fp-tag-info::after { content: " ›"; font-weight: 700; }
.sf-dynamik .sf-fp-tag[data-sf-offen] button.sf-fp-tag-kopf .sf-fp-tag-info::after { content: " ˅"; }
.sf-dynamik .sf-fp-stationen { display: flex; flex-direction: column; gap: var(--sf-hm-s4); }
@media (max-width: 999px) {
.sf-dynamik .sf-fp-tag:not([data-sf-offen]) .sf-fp-stationen { display: none; }
}
.sf-dynamik .sf-fp-station { padding-left: var(--sf-hm-s3); border-left: 3px solid var(--sf-fp-farbe, var(--sf-line)); }
.sf-dynamik .sf-fp-station-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sf-hm-s2); margin: 0; font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-fp-station-kopf strong { font-size: var(--sf-hb-text); color: var(--sf-ink); }
.sf-dynamik .sf-fp-land { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.04em; color: var(--sf-muted); }
.sf-dynamik .sf-fp-sport { font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-fp-farbe, var(--sf-muted)); }
.sf-dynamik .sf-fp-hin { margin-left: auto; font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-travel); text-decoration: none; white-space: nowrap; }
.sf-dynamik .sf-fp-rennliste { margin: 0; padding: 0; list-style: none; }
.sf-dynamik .sf-fp-rennen { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 2px var(--sf-hm-s2); align-items: baseline; padding: 6px 0; border-top: 1px solid var(--sf-surface); font-size: var(--sf-hb-text-klein); color: var(--sf-ink); }
.sf-dynamik .sf-fp-zeit { font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-dynamik .sf-fp-zeit[data-sf-art="offen"], .sf-dynamik .sf-fp-zeit[data-sf-art="ungefaehr"], .sf-dynamik .sf-fp-zeit[data-sf-art="spanne"] { font-size: var(--sf-hb-mini); font-weight: 500; color: var(--sf-muted); }
.sf-dynamik .sf-fp-rennen[data-sf-stand="ergebnis"] .sf-fp-zeit, .sf-dynamik .sf-fp-rennen[data-sf-stand="ergebnis_folgt"] .sf-fp-zeit, .sf-dynamik .sf-fp-rennen[data-sf-stand="abgesagt"] .sf-fp-zeit { font-weight: 500; color: var(--sf-muted); }
.sf-dynamik .sf-fp-rennen[data-sf-stand="abgesagt"] .sf-fp-titel { text-decoration: line-through; color: var(--sf-muted); }
.sf-dynamik .sf-fp-details { color: var(--sf-muted); }
.sf-dynamik .sf-fp-anlass { display: block; font-size: var(--sf-hb-mini); font-style: normal; font-weight: 700; letter-spacing: 0.02em; color: var(--sf-section-accent); }
.sf-dynamik .sf-fp-titelv { display: block; font-size: var(--sf-hb-mini); color: var(--sf-muted); }
.sf-dynamik .sf-fp-fuehrt { margin: 0 0 var(--sf-hm-s3); font-size: var(--sf-hb-mini); color: var(--sf-muted); }
.sf-dynamik .sf-fp-fuehrt strong { color: var(--sf-ink); }
.sf-dynamik .sf-fp-stand { font-size: var(--sf-hb-fein); text-align: right; white-space: nowrap; }
.sf-dynamik .sf-fp-sieger span { color: var(--sf-muted); }
.sf-dynamik .sf-fp-podest { grid-column: 2 / -1; font-size: var(--sf-hb-fein); }
.sf-dynamik .sf-fp-podest summary { color: var(--sf-muted); cursor: pointer; }
.sf-dynamik .sf-fp-podest ol { margin: var(--sf-hm-s1) 0 0; padding-left: var(--sf-hm-s4); }
.sf-dynamik .sf-fp-unterkuenfte { margin: 0; font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-dynamik .sf-fp-unterkuenfte a { font-weight: 700; color: var(--sf-travel); text-decoration: none; }
.sf-dynamik .sf-fp-zuletzt { margin: 0; padding: 0; list-style: none; }
.sf-dynamik .sf-fp-zuletzt li { display: grid; gap: 2px; padding: var(--sf-hm-s2) 0 var(--sf-hm-s2) var(--sf-hm-s3); border-top: 1px solid var(--sf-line); border-left: 3px solid var(--sf-fp-farbe, var(--sf-line)); font-size: var(--sf-hb-fein); }
.sf-dynamik .sf-fp-zuletzt strong { font-size: var(--sf-hb-text-klein); color: var(--sf-ink); }
.sf-dynamik .sf-fp-hoehepunkte { margin: 0; padding: 0; list-style: none; }
.sf-dynamik .sf-fp-hoehepunkte li { border-top: 1px solid var(--sf-line); }
.sf-dynamik .sf-fp-hoehepunkte li[data-sf-vorbei] { opacity: 0.55; }
.sf-dynamik .sf-fp-hp { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: var(--sf-hm-s2); align-items: baseline; width: 100%; padding: var(--sf-hm-s2) 0; border: 0; background: none; color: var(--sf-ink); font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.sf-dynamik span.sf-fp-hp { cursor: default; }
.sf-dynamik .sf-fp-hp-datum { font-size: var(--sf-hb-fein); font-variant-numeric: tabular-nums; color: var(--sf-muted); }
.sf-dynamik .sf-fp-hp-name { display: grid; font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-fp-hp-name .sf-fp-leise { font-size: var(--sf-hb-fein); }
.sf-dynamik .sf-fp-pfeil { font-weight: 700; color: var(--sf-section-accent); }
.sf-dynamik .sf-fp-geschichten-reihe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); }
.sf-dynamik .sf-fp-geschichten-reihe > * { min-width: 0; }
@media (min-width: 700px) {
.sf-dynamik .sf-fp-geschichten-reihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-dynamik .sf-fp-saison-liste { margin: 0; padding: 0; list-style: none; }
.sf-dynamik .sf-fp-sz { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: var(--sf-hm-s2); align-items: baseline; padding: var(--sf-hm-s2) 0 var(--sf-hm-s2) var(--sf-hm-s3); border-top: 1px solid var(--sf-line); border-left: 3px solid var(--sf-fp-farbe, var(--sf-line)); font-size: var(--sf-hb-fein); }
.sf-dynamik .sf-fp-sz[data-sf-vorbei] { opacity: 0.55; }
.sf-dynamik .sf-fp-sz-datum { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-fp-sz-ort { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sf-hm-s2); min-width: 0; }
.sf-dynamik .sf-fp-sz-ort strong { font-size: var(--sf-hb-text-klein); color: var(--sf-ink); }
.sf-dynamik .sf-fp-sz-info { flex-basis: 100%; color: var(--sf-muted); }
.sf-dynamik .sf-fp-monat { display: flex; flex-direction: column; gap: var(--sf-hm-s2); }
.sf-dynamik .sf-fp-monat h3, .sf-dynamik .sf-fp-monat summary { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-fp-tag); font-weight: var(--sf-hb-titel-gewicht); text-transform: uppercase; color: var(--sf-ink); }
.sf-dynamik .sf-fp-quellen { margin: 0; }
@media (prefers-reduced-motion: no-preference) {
.sf-dynamik .sf-fp-live::before { animation: sf-fp-puls 2s ease-out infinite; }
}
@keyframes sf-fp-puls { 0% { box-shadow: 0 0 0 0 var(--sf-hm-live-ring); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (min-width: 1000px) {
.sf-dynamik .sf-fp-wochenwahl { display: none; }
.sf-dynamik .sf-fp-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sf-hm-s6); align-items: start; }
.sf-dynamik .sf-fp-rand { gap: var(--sf-hm-s6); }
.sf-dynamik .sf-fp-tage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-hm-s5); align-items: start; }
.sf-dynamik .sf-fp-tag[data-sf-werktag] { grid-column: 1 / -1; }
.sf-dynamik .sf-fp-tag[data-sf-werktag] .sf-fp-stationen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-hm-s5); }
.sf-dynamik button.sf-fp-tag-kopf { cursor: default; }
.sf-dynamik button.sf-fp-tag-kopf .sf-fp-tag-info::after { content: ""; }
.sf-dynamik .sf-fp-tag .sf-fp-tag-kopf { border-bottom: 2px solid var(--sf-ink); }
.sf-dynamik .sf-fp-rand .sf-hb-karten--wischen { display: flex; flex-direction: column; overflow: visible; }
.sf-dynamik .sf-fp-seite > .sf-fp-abschnitt .sf-fp-hoehepunkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sf-hm-s6); }
.sf-dynamik .sf-fp-geschichten-reihe { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; }
}
.sf-dynamik .sf-fp-raster { gap: var(--sf-hm-s6); }
.sf-dynamik .sf-fp-nebeninfos { display: grid; gap: var(--sf-hm-s6); min-width: 0; border-top: 1px solid var(--sf-line); padding-top: var(--sf-hm-s5); }
.sf-dynamik .sf-fp-nebeninfos > * { min-width: 0; }
.sf-dynamik .sf-fp-ortswissen { margin-top: var(--sf-hm-s5); }
.sf-dynamik .sf-fp-ortsreihe { display: grid; gap: var(--sf-hm-s5); }
.sf-dynamik .sf-fp-ortsportraet { display: grid; align-content: start; gap: var(--sf-hm-s3); border-top: 2px solid var(--sf-ink); padding-top: var(--sf-hm-s3); min-width: 0; }
.sf-dynamik .sf-fp-ortsbild { position: relative; margin: 0; aspect-ratio: 16/9; background: var(--sf-surface); }
.sf-dynamik .sf-fp-ortsbild img { display: block; height: 100%; width: 100%; object-fit: cover; }
.sf-dynamik .sf-fp-ortsbild figcaption { position: absolute; bottom: 0; left: 0; padding: var(--sf-hm-s1) var(--sf-hm-s2); max-width: 100%; font-size: var(--sf-hb-mini); background: var(--sf-fp-vermerk-grund); color: white; }
.sf-dynamik .sf-fp-ortsportraet p { margin: 0; font-size: var(--sf-hb-text-klein); line-height: 1.55; }
.sf-dynamik .sf-fp-ortsportraet h3, .sf-dynamik .sf-fp-ausblick h3, .sf-dynamik .sf-fp-bildziel h3 { margin: 0; font: var(--sf-hb-titel-gewicht) var(--sf-hb-h3)/var(--sf-hb-titel-zeile) var(--sf-hb-titel-schrift, var(--sf-display)); }
.sf-dynamik .sf-fp-ortsnummer, .sf-dynamik .sf-fp-reiseart { display: block; font-size: var(--sf-hb-mini); font-weight: 700; color: var(--sf-muted); }
.sf-dynamik .sf-fp-ortskopf { display: grid; gap: var(--sf-hm-s1); }
.sf-dynamik .sf-fp-ortsanlage { color: var(--sf-muted); }
.sf-dynamik .sf-fp-ortswerte { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); gap: var(--sf-hm-s3); padding: var(--sf-hm-s3) 0; border-top: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); }
.sf-dynamik .sf-fp-ortswerte > div { display: flex; flex-direction: column-reverse; gap: var(--sf-hm-s1); }
.sf-dynamik .sf-fp-ortswerte dt { color: var(--sf-muted); font-size: var(--sf-hb-mini); }
.sf-dynamik .sf-fp-ortswerte dd { margin: 0; font: var(--sf-hb-titel-gewicht) var(--sf-hb-zahl-klein)/1 var(--sf-hb-titel-schrift, var(--sf-display)); }
.sf-dynamik .sf-fp-ortstipp { border-left: 3px solid var(--sf-section-accent); padding-left: var(--sf-hm-s3); }
.sf-dynamik .sf-fp-ortsweg.sf-fp-ortsweg { font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-section-accent); text-decoration: none; }
.sf-dynamik .sf-fp-ortsquellen { font-size: var(--sf-hb-mini); color: var(--sf-muted); overflow-wrap: anywhere; }
.sf-dynamik .sf-fp-ortsquellen summary { cursor: pointer; min-height: 32px; display: list-item; align-content: center; }
.sf-dynamik .sf-fp-ortsquellen ul { margin: var(--sf-hm-s2) 0; padding-left: var(--sf-hm-s4); }
.sf-dynamik .sf-fp-mehrorte { border-top: 1px solid var(--sf-line); padding-top: var(--sf-hm-s3); }
.sf-dynamik .sf-fp-mehrorte > summary { cursor: pointer; padding-bottom: var(--sf-hm-s3); font-weight: 700; min-height: 44px; }
.sf-dynamik .sf-fp-ausblick { display: grid; gap: var(--sf-hm-s2); margin-top: var(--sf-hm-s4); padding: var(--sf-hm-s4); background: var(--sf-surface); }
.sf-dynamik .sf-fp-ausblick p { margin: 0; font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-fp-weitere-gebiete { margin: 0; padding: 0; list-style: none; font-weight: 700; }
.sf-dynamik .sf-fp-kalenderwahl { display: grid; gap: var(--sf-hm-s3); }
.sf-dynamik .sf-fp-reisewochen { display: grid; gap: var(--sf-hm-s4); }
.sf-dynamik .sf-fp-reisewoche { min-width: 0; border: 1px solid var(--sf-line); }
.sf-dynamik .sf-fp-reisewoche[data-sf-jetzt] { border-top: 3px solid var(--sf-hm-live-gruen); }
.sf-dynamik .sf-fp-reisewahl.sf-fp-reisewahl { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sf-hm-s2); width: 100%; padding: var(--sf-hm-s4); color: var(--sf-ink); background: var(--sf-surface); border: 0; text-align: left; text-decoration: none; font-family: var(--sf-body); cursor: pointer; }
.sf-dynamik .sf-fp-reisewahl strong { font: var(--sf-hb-titel-gewicht) var(--sf-hb-h3)/var(--sf-hb-titel-zeile) var(--sf-hb-titel-schrift, var(--sf-display)); }
.sf-dynamik .sf-fp-reisedatum { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.04em; }
.sf-dynamik .sf-fp-reisejetzt { color: var(--sf-hm-live-gruen-text); font-size: var(--sf-hb-mini); font-weight: 700; }
.sf-dynamik .sf-fp-reisewoche[data-sf-gewaehlt] .sf-fp-reisewahl { background: var(--sf-ink); color: white; }
.sf-dynamik .sf-fp-reisewoche[data-sf-gewaehlt] .sf-fp-fein { color: inherit; }
.sf-dynamik .sf-fp-reiseorte { display: grid; gap: var(--sf-hm-s4); padding: var(--sf-hm-s4); margin: 0; list-style: none; }
.sf-dynamik .sf-fp-reiseorte > li { display: grid; gap: var(--sf-hm-s1); padding-left: var(--sf-hm-s3); border-left: 3px solid var(--sf-fp-farbe, var(--sf-line)); }
.sf-dynamik .sf-fp-reiseorte > li > strong { font-size: var(--sf-hb-text); }
.sf-dynamik .sf-fp-reiseorte details { font-size: var(--sf-hb-mini); }
.sf-dynamik .sf-fp-reiseorte summary { cursor: pointer; min-height: 36px; align-content: center; }
.sf-dynamik .sf-fp-reiseorte details ul { padding-left: var(--sf-hm-s4); }
.sf-dynamik .sf-fp-reisekalender--kompakt .sf-fp-reiseart { padding: var(--sf-hm-s2) var(--sf-hm-s3); }
.sf-dynamik .sf-fp-reisewahl:focus-visible, .sf-dynamik .sf-fp-ortsweg:focus-visible { outline: 3px solid var(--sf-section-accent); outline-offset: 3px; }
.sf-dynamik .sf-fp-saisonbilder { display: grid; gap: var(--sf-hm-s5); }
.sf-dynamik .sf-fp-bildziel.sf-fp-bildziel { display: grid; gap: var(--sf-hm-s2); text-decoration: none; color: var(--sf-ink); align-content: start; }
.sf-dynamik .sf-fp-bildziel figure { position: relative; margin: 0 0 var(--sf-hm-s2); aspect-ratio: 16/9; background: var(--sf-surface); }
.sf-dynamik .sf-fp-bildziel img { display: block; height: 100%; width: 100%; object-fit: cover; }
.sf-dynamik .sf-fp-bildziel figcaption { position: absolute; bottom: 0; left: 0; padding: var(--sf-hm-s1) var(--sf-hm-s2); max-width: 100%; font-size: var(--sf-hb-mini); background: var(--sf-fp-vermerk-grund); color: white; }
.sf-dynamik .sf-fp-bildziel p { margin: 0; font-size: var(--sf-hb-text-klein); line-height: 1.45; }
@media (min-width: 700px) {
.sf-dynamik .sf-fp-nebeninfos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-dynamik .sf-fp-saisonbilder { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-dynamik .sf-fp-reisewochen { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.sf-dynamik .sf-fp-reisekalender--kompakt .sf-fp-reisewochen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.sf-dynamik .sf-fp-tage { display: flex; flex-direction: column; gap: var(--sf-hm-s4); }
.sf-dynamik .sf-fp-tag .sf-fp-stationen, .sf-dynamik .sf-fp-tag[data-sf-werktag] .sf-fp-stationen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s4); }
.sf-dynamik .sf-fp-raster[data-sf-umfang="kurz"] .sf-fp-stationen { grid-template-columns: minmax(0, 1fr); }
.sf-dynamik .sf-fp-tag .sf-fp-station:only-child { grid-column: 1 / -1; }
.sf-dynamik .sf-fp-ortsreihe { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-dynamik .sf-fp-ortsportraet:only-child { grid-column: 1 / -1; }
.sf-dynamik .sf-fp-raster { grid-template-columns: minmax(0, 1fr) 320px; }
.sf-dynamik .sf-fp-nebeninfos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.sf-dynamik .sf-fp-saisonhoehepunkte > summary { font-size: var(--sf-hb-text-klein); font-weight: 700; cursor: pointer; min-height: 44px; align-content: center; }
.sf-dynamik .sf-fp-kalenderstand { margin: 0; font-size: var(--sf-hb-text-klein); border-left: 3px solid var(--sf-hm-live-gruen); padding-left: var(--sf-hm-s3); }
@media (max-width: 699px) {
.sf-dynamik .sf-fp-saisonbilder { grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); }
}
@media (min-width: 1000px) {
.sf-dynamik .sf-fp-tage { align-items: stretch; }
.sf-dynamik .sf-fp-tag { width: 100%; }
}
@media (min-width: 1000px) {
.sf-dynamik .sf-fp-raster:has(> .sf-fp-rand:empty) { grid-template-columns: minmax(0, 1fr); }
}
.sf-dynamik .sf-fp-reiseprogramm > summary { padding: var(--sf-hm-s3) var(--sf-hm-s4); min-height: 44px; font-size: var(--sf-hb-text-klein); font-weight: 700; cursor: pointer; }
@media (min-width: 700px) {
.sf-dynamik .sf-fp-reisekalender:not(.sf-fp-reisekalender--kompakt) .sf-fp-reisewochen { grid-template-columns: minmax(0, 1fr); }
.sf-dynamik .sf-fp-reiseorte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.sf-dynamik .sf-fp-reiseorte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-dynamik .sf-fp-beitrag.sf-fp-beitrag { display: grid; gap: var(--sf-hm-s2); align-content: start; color: var(--sf-ink); text-decoration: none; border-top: 1px solid var(--sf-line); padding-top: var(--sf-hm-s3); }
.sf-dynamik .sf-fp-beitrag h3 { margin: 0; font: var(--sf-hb-titel-gewicht) var(--sf-hb-h3)/var(--sf-hb-titel-zeile) var(--sf-hb-titel-schrift, var(--sf-display)); }
.sf-dynamik .sf-fp-beitrag p { margin: 0; font-size: var(--sf-hb-text-klein); line-height: 1.5; }
.sf-fp-slalom .sf-spiel { margin-top: var(--sf-hm-kopf-abstand, 16px); }
.sf-fp-slalom-bild { display: block; margin-top: var(--sf-hm-kopf-abstand, 16px); text-decoration: none; }
.sf-fp-slalom-bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sf-fp-preise.sf-fp-preise { display: grid; gap: var(--sf-hm-s4, 16px); margin: var(--sf-hm-s4, 16px) 0 0; padding: var(--sf-hm-s4, 16px) var(--sf-hm-s4, 16px) var(--sf-hm-s3, 12px); background: var(--sf-ink); color: var(--sf-white); border-top: 4px solid var(--sf-section-accent, var(--sf-sport)); }
.sf-fp-preise-kopf.sf-fp-preise-kopf { display: grid; gap: var(--sf-hm-s1, 4px); }
.sf-fp-preise-marke.sf-fp-preise-marke { display: flex; align-items: center; gap: var(--sf-hm-s2, 8px); margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-kapitel, 12px); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-white); opacity: 0.85; }
.sf-fp-preise-punkt.sf-fp-preise-punkt { width: 8px; height: 8px; background: var(--sf-section-accent, var(--sf-sport)); box-shadow: 0 0 0 3px var(--sf-fp-preis-ring); }
.sf-fp-preise-titel.sf-fp-preise-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3, 22px); font-weight: var(--sf-hb-titel-gewicht, 800); line-height: var(--sf-hb-titel-zeile, 1.05); color: var(--sf-white); }
.sf-fp-preise-staffel.sf-fp-preise-staffel { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: var(--sf-hm-s2, 8px); margin: 0; padding: 0; list-style: none; }
.sf-fp-preis.sf-fp-preis { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--sf-hm-s1, 4px); min-height: 84px; margin: 0; padding: var(--sf-hm-s3, 12px); background: var(--sf-fp-preis-flaeche); border-top: 3px solid var(--sf-fp-preis-kante); }
.sf-fp-preis.sf-fp-preis[data-sf-platz="1"] { min-height: 104px; background: var(--sf-section-accent, var(--sf-sport)); border-top-color: var(--sf-white); }
.sf-fp-preis.sf-fp-preis span { font-family: var(--sf-body); font-size: var(--sf-hb-mini, 11px); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-white); opacity: 0.85; }
.sf-fp-preis.sf-fp-preis b { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl, 36px); font-weight: var(--sf-hb-zahl-gewicht, 800); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sf-white); }
.sf-fp-preis.sf-fp-preis[data-sf-platz="rest"] b { font-size: var(--sf-hb-zahl-klein, 22px); }
.sf-fp-preise-schritte.sf-fp-preise-schritte { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2, 8px) var(--sf-hm-s5, 24px); margin: 0; padding: 0; list-style: none; font-family: var(--sf-body); font-size: var(--sf-hb-text-klein, 14px); line-height: 1.35; color: var(--sf-white); }
.sf-fp-preise-schritte.sf-fp-preise-schritte li { display: flex; align-items: baseline; gap: var(--sf-hm-s2, 8px); margin: 0; }
.sf-fp-preise-schritte.sf-fp-preise-schritte b { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-fp-ziffer); font-weight: 800; line-height: 1; color: var(--sf-ink); background: var(--sf-white); }
.sf-fp-preise-fein.sf-fp-preise-fein { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein, 13px); line-height: 1.45; color: var(--sf-white); opacity: 0.8; }
.sf-fp-preise-fein.sf-fp-preise-fein a { color: var(--sf-white); text-decoration: underline; }
.sf-fp-bestenliste.sf-fp-bestenliste { margin-top: var(--sf-hm-s4, 16px); padding: var(--sf-hm-s4, 16px); background: var(--sf-white); border: 1px solid var(--sf-line); border-top: 4px solid var(--sf-ink); }
.sf-fp-bl-kopf.sf-fp-bl-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sf-hm-s1, 4px) var(--sf-hm-s4, 16px); margin-bottom: var(--sf-hm-s3, 12px); }
.sf-fp-bestenliste-titel.sf-fp-bestenliste-titel { margin: 0; font-family: var(--sf-body); font-weight: 700; font-size: var(--sf-hb-kapitel, 12px); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-ink); }
.sf-fp-bl-stand.sf-fp-bl-stand { margin: 0; font-size: var(--sf-hb-fein, 13px); color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-fp-bl-podest.sf-fp-bl-podest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--sf-hm-s2, 8px); margin: 0; padding: 0; list-style: none; }
.sf-fp-bl-stufe.sf-fp-bl-stufe { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rang gewinn" "name name" "zeit zeit" "abstand abstand"; align-content: end; gap: 2px var(--sf-hm-s2, 8px); margin: 0; padding: var(--sf-hm-s3, 12px); background: var(--sf-surface); border-top: 4px solid var(--sf-line); }
.sf-fp-bl-stufe.sf-fp-bl-stufe[data-sf-platz="1"] { order: 2; min-height: 150px; background: var(--sf-ink); color: var(--sf-white); border-top-color: var(--sf-section-accent, var(--sf-sport)); }
.sf-fp-bl-stufe.sf-fp-bl-stufe[data-sf-platz="2"] { order: 1; min-height: 128px; border-top-color: var(--sf-ink); }
.sf-fp-bl-stufe.sf-fp-bl-stufe[data-sf-platz="3"] { order: 3; min-height: 112px; border-top-color: var(--sf-ink); }
.sf-fp-bl-stufe.sf-fp-bl-stufe .sf-fp-bl-rang { grid-area: rang; font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl, 36px); font-weight: 800; line-height: 1; }
.sf-fp-bl-stufe.sf-fp-bl-stufe .sf-fp-bl-gewinn { grid-area: gewinn; align-self: start; }
.sf-fp-bl-stufe.sf-fp-bl-stufe .sf-fp-bl-name { grid-area: name; margin-top: var(--sf-hm-s2, 8px); font-weight: 700; overflow-wrap: anywhere; }
.sf-fp-bl-stufe.sf-fp-bl-stufe .sf-fp-bl-zeit { grid-area: zeit; font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl-klein, 22px); font-weight: 800; font-variant-numeric: tabular-nums; }
.sf-fp-bl-stufe.sf-fp-bl-stufe .sf-fp-bl-abstand { grid-area: abstand; font-size: var(--sf-hb-fein, 13px); color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-fp-bl-stufe.sf-fp-bl-stufe[data-sf-platz="1"] .sf-fp-bl-abstand { color: var(--sf-white); opacity: 0.75; }
.sf-fp-bl-gewinn.sf-fp-bl-gewinn:not(:empty) { padding: var(--sf-fp-gewinn-innen); font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-fp-ziffer); font-weight: 800; line-height: 1.1; white-space: nowrap; color: var(--sf-white); background: var(--sf-section-accent, var(--sf-sport)); }
.sf-fp-bl-liste.sf-fp-bl-liste { margin: var(--sf-hm-s3, 12px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--sf-ink); }
.sf-fp-bl-liste.sf-fp-bl-liste li { display: grid; grid-template-columns: 2.2ch minmax(0, 1fr) auto auto 4.2em; align-items: baseline; gap: var(--sf-hm-s3, 12px); margin: 0; padding: var(--sf-fp-bl-zeile); border-bottom: 1px solid var(--sf-line); font-size: var(--sf-hb-text-klein, 14px); font-variant-numeric: tabular-nums; }
.sf-fp-bl-liste.sf-fp-bl-liste .sf-fp-bl-rang { font-weight: 700; color: var(--sf-muted); }
.sf-fp-bl-liste.sf-fp-bl-liste .sf-fp-bl-name { display: flex; align-items: baseline; min-width: 0; }
.sf-fp-bl-text.sf-fp-bl-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-fp-bl-liste.sf-fp-bl-liste .sf-fp-bl-abstand { color: var(--sf-muted); font-size: var(--sf-hb-fein, 13px); }
.sf-fp-bl-liste.sf-fp-bl-liste .sf-fp-bl-gewinn { justify-self: end; }
.sf-fp-bl-liste.sf-fp-bl-liste .sf-fp-bl-gewinn:not(:empty) { color: var(--sf-ink); background: transparent; padding: 0; }
.sf-fp-bl-liste.sf-fp-bl-liste li[data-sf-du] { background: var(--sf-surface); box-shadow: inset 4px 0 0 var(--sf-section-accent, var(--sf-sport)); padding-left: var(--sf-hm-s2, 8px); }
.sf-fp-bl-stufe.sf-fp-bl-stufe[data-sf-du] { outline: 3px solid var(--sf-section-accent, var(--sf-sport)); outline-offset: -3px; }
.sf-fp-bl-du.sf-fp-bl-du { display: inline-block; margin-left: var(--sf-hm-s2, 8px); padding: var(--sf-fp-du-innen); font-family: var(--sf-body); font-size: var(--sf-hb-mini, 11px); font-style: normal; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 2px; color: var(--sf-white); background: var(--sf-section-accent, var(--sf-sport)); }
.sf-fp-bl-regel.sf-fp-bl-regel, .sf-fp-bl-eigene.sf-fp-bl-eigene { margin: var(--sf-hm-s3, 12px) 0 0; font-size: var(--sf-hb-fein, 13px); line-height: 1.45; color: var(--sf-muted); }
.sf-fp-bl-eigene.sf-fp-bl-eigene { padding: var(--sf-hm-s2, 8px) var(--sf-hm-s3, 12px); color: var(--sf-ink); background: var(--sf-surface); border-left: 4px solid var(--sf-section-accent, var(--sf-sport)); }
.sf-fp-slalom-bild span { display: inline-block; margin-top: var(--sf-hm-s3, 12px); font-weight: 700; }
.sf-dynamik .sf-fp-liste { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sf-line); }
.sf-dynamik .sf-fp-liste > li { display: flex; flex-direction: column; gap: var(--sf-hm-s1); padding: var(--sf-hm-s3) 0; border-bottom: 1px solid var(--sf-line); }
.sf-dynamik .sf-fp-liste .sf-se-date { margin: 0; }
.sf-dynamik .sf-fp-liste-titel { font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-fp-liste-titel:hover { color: var(--sf-blue); }
.sf-dynamik .sf-fp-liste p { margin: 0; max-width: 70ch; color: var(--sf-muted); }
@media (min-width: 700px) {
.sf-dynamik .sf-fp-liste[data-sf-band="portraets"] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sf-hm-s5); }
}
@media (min-width: 1000px) {
.sf-dynamik .sf-fp-liste[data-sf-band="portraets"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-dynamik .sf-fp-sprung { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); margin: var(--sf-hm-s2) 0 0; }
.sf-dynamik .sf-fp-sprung a { padding: var(--sf-hm-s1) var(--sf-hm-s3); border: 1px solid var(--sf-line); background: var(--sf-white); font-size: var(--sf-hb-steuer-schrift); font-weight: 700; color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-fp-sprung a:hover { border-color: var(--sf-section-accent); color: var(--sf-section-accent); }
.sf-dynamik .sf-fp-sprung a:focus-visible { outline: 2px solid var(--sf-section-accent); outline-offset: 2px; }
.sf-dynamik .sf-fp-sprung-fuss { max-width: 560px; }
.sf-dynamik .sf-fp-sprung-fuss:empty { display: none; }
.sf-dynamik .sf-fp-seite [id^="wb-g-"] { scroll-margin-top: var(--sf-hm-s7); }
.sf-dynamik .sf-fp-reihe .sf-card-body .sf-eyebrow { display: none; }
@media (min-width: 1024px) {
.sf-dynamik .sf-fp-reihe[data-sf-spalten="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-dynamik .sf-fp-reihe[data-sf-spalten="4"] .sf-card-body > p:last-child { display: none; }
}
@media (min-width: 601px) and (max-width: 1023px) {
.sf-dynamik .sf-fp-reihe[data-sf-spalten="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.sf-dynamik .sf-fp-reihe { gap: 0; border-top: 1px solid var(--sf-line); }
.sf-dynamik .sf-fp-reihe .sf-story-card { border-bottom: 1px solid var(--sf-line); }
.sf-dynamik .sf-fp-reihe .sf-card-main { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--sf-hm-s3); align-items: start; padding: var(--sf-hm-s3) 0; }
.sf-dynamik .sf-fp-reihe .sf-card-media { aspect-ratio: 4 / 3; }
.sf-dynamik .sf-fp-reihe .sf-card-body { padding-top: 0; }
.sf-dynamik .sf-fp-reihe .sf-card-body h3 { font-size: var(--sf-hb-text); }
.sf-dynamik .sf-fp-reihe .sf-card-body > p:last-child { display: none; }
.sf-dynamik .sf-fp-reihe .sf-se-date { margin: var(--sf-hm-s3) 0 0; }
.sf-dynamik .sf-fp-reihe[data-sf-spalten="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s4) var(--sf-hm-s3); border-top: 0; }
.sf-dynamik .sf-fp-reihe[data-sf-spalten="4"] .sf-story-card { border-bottom: 0; }
.sf-dynamik .sf-fp-reihe[data-sf-spalten="4"] .sf-card-main { display: flex; flex-direction: column; gap: var(--sf-hm-s2); padding: 0; }
.sf-dynamik .sf-fp-reihe[data-sf-spalten="4"] .sf-card-media { aspect-ratio: 3 / 2; }
.sf-dynamik .sf-fp-reihe[data-sf-spalten="4"] > div:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 601px) and (max-width: 1023px) {
.sf-dynamik .sf-fp-reihe[data-sf-spalten="4"] > div:last-child:nth-child(2n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
.sf-dynamik .sf-fp-reihe[data-sf-spalten="4"] > div:last-child:nth-child(4n + 1) { grid-column: 1 / -1; }
}
@media (min-width: 601px) {
.sf-dynamik .sf-fp-reihe[data-sf-spalten="3"] > div:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.sf-dynamik .sf-fp-reihe[data-sf-spalten="3"] > div:last-child:nth-child(3n + 1) .sf-card-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--sf-grid-gap); align-items: start; }
.sf-dynamik .sf-fp-reihe[data-sf-spalten="3"] > div:last-child:nth-child(3n + 1) .sf-card-body { padding-top: 0; }
}
.sf-dynamik .sf-fp-ortsraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s4) var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-dynamik .sf-fp-ort { min-width: 0; }
.sf-dynamik .sf-fp-ort-link { display: flex; flex-direction: column; gap: var(--sf-hm-s1); color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-fp-ort-bild { position: relative; display: block; margin-bottom: var(--sf-hm-s1); overflow: hidden; aspect-ratio: 3 / 2; background: var(--sf-surface); }
.sf-dynamik .sf-fp-ort-bild img { transition: transform 350ms; }
.sf-dynamik .sf-fp-ort-beitrag.sf-fp-ort-beitrag { display: inline-block; margin-top: var(--sf-hm-s1); font-size: var(--sf-hb-fein); font-weight: 600; color: var(--sf-section-accent); text-decoration: none; }
.sf-dynamik .sf-fp-ort-beitrag.sf-fp-ort-beitrag:hover { text-decoration: underline; }
.sf-dynamik .sf-fp-ort-bild > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-dynamik .sf-fp-ort-bild > small { position: absolute; right: var(--sf-hm-s1); bottom: var(--sf-hm-s1); padding: 0 var(--sf-hm-s1); background: var(--sf-white); color: var(--sf-muted); font-size: var(--sf-hb-mini); }
.sf-dynamik .sf-fp-ort-link:hover img { transform: scale(1.035); }
.sf-dynamik .sf-fp-ort-marke { position: absolute; left: var(--sf-hm-s2); bottom: var(--sf-hm-s2); padding: 2px var(--sf-hm-s2); background: var(--sf-ink); color: var(--sf-white); font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-dynamik .sf-fp-ort-link strong { font-family: var(--sf-display); font-size: var(--sf-hb-text); line-height: 1.2; }
.sf-dynamik .sf-fp-ort-link:hover strong { color: var(--sf-section-accent); }
.sf-dynamik .sf-fp-ort-termin, .sf-dynamik .sf-fp-ort-hinweis { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-dynamik .sf-fp-ort-link:focus-visible, .sf-dynamik .sf-fp-erleben-link:focus-visible { outline: 2px solid var(--sf-section-accent); outline-offset: 2px; }
@media (max-width: 600px) {
.sf-dynamik .sf-fp-ortsraster > li:last-child:nth-child(odd) .sf-fp-ort-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sf-hm-s3); align-content: start; }
.sf-dynamik .sf-fp-ortsraster > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sf-dynamik .sf-fp-ortsraster > li:last-child:nth-child(odd) .sf-fp-ort-bild { grid-row: 1 / span 3; }
}
@media (min-width: 601px) and (max-width: 1023px) {
.sf-dynamik .sf-fp-ortsraster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-dynamik .sf-fp-ortsraster > li:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
.sf-dynamik .sf-fp-ortsraster > li:last-child:nth-child(3n + 1) .sf-fp-ort-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--sf-grid-gap); align-content: start; }
.sf-dynamik .sf-fp-ortsraster > li:last-child:nth-child(3n + 1) .sf-fp-ort-bild { grid-row: 1 / span 3; }
}
@media (min-width: 1024px) {
.sf-dynamik .sf-fp-ortsraster { gap: var(--sf-hm-s5) var(--sf-grid-gap); }
.sf-dynamik .sf-fp-ortsraster[data-sf-spalten="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-dynamik .sf-fp-ortsraster[data-sf-spalten="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-dynamik .sf-fp-ortsraster[data-sf-spalten="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-dynamik .sf-fp-erleben { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-grid-gap); margin: 0; padding: 0; list-style: none; }
@media (min-width: 801px) {
.sf-dynamik .sf-fp-erleben[data-sf-anzahl="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-dynamik .sf-fp-erleben-link { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); height: 100%; border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-fp-erleben-link[data-sf-bild="ohne"] { grid-template-columns: minmax(0, 1fr); border-top: 3px solid var(--sf-section-accent); }
.sf-dynamik .sf-fp-erleben-link:hover { border-color: var(--sf-section-accent); }
.sf-dynamik .sf-fp-erleben-bild { position: relative; display: block; min-height: 160px; overflow: hidden; background: var(--sf-surface); }
.sf-dynamik .sf-fp-erleben-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-dynamik .sf-fp-erleben-bild small { position: absolute; right: var(--sf-hm-s1); bottom: var(--sf-hm-s1); padding: 0 var(--sf-hm-s1); background: var(--sf-white); color: var(--sf-muted); font-size: var(--sf-hb-mini); }
.sf-dynamik .sf-fp-erleben-text { display: flex; flex-direction: column; gap: var(--sf-hm-s2); padding: var(--sf-hm-s4); }
.sf-dynamik .sf-fp-erleben-text strong { font-family: var(--sf-display); font-size: var(--sf-hb-h3); line-height: 1.15; }
.sf-dynamik .sf-fp-erleben-text span { font-size: var(--sf-hb-text-klein); color: var(--sf-muted); }
.sf-dynamik .sf-fp-erleben-text em { margin-top: auto; font-style: normal; font-weight: 700; font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-fp-erleben-link:hover em { color: var(--sf-section-accent); }
@media (max-width: 600px) {
.sf-dynamik .sf-fp-erleben-link:not([data-sf-bild="ohne"]) { grid-template-columns: 112px minmax(0, 1fr); }
.sf-dynamik .sf-fp-erleben-bild { min-height: 0; }
.sf-dynamik .sf-fp-erleben-text { padding: var(--sf-hm-s3); }
.sf-dynamik .sf-fp-erleben-text strong { font-size: var(--sf-hb-text); }
}
.sf-dynamik .sf-fp-ausgaben { margin-top: var(--sf-hm-s5); }
.sf-dynamik .sf-fp-sl-monat { margin-top: var(--sf-hm-s5); scroll-margin-top: var(--sf-hm-s7); }
.sf-dynamik .sf-fp-sl-monat .sf-fp-sl-monatsname { margin: 0 0 var(--sf-hm-s2); font-family: var(--sf-display); font-size: var(--sf-hb-h3); line-height: 1.15; color: var(--sf-ink); }
.sf-dynamik .sf-fp-sl-monatsname small { font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 400; color: var(--sf-muted); }
.sf-dynamik .sf-fp-sl-wochen { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--sf-ink); }
.sf-dynamik .sf-fp-sl-woche { border-bottom: 1px solid var(--sf-line); }
.sf-dynamik .sf-fp-sl-link { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sf-hm-s2) var(--sf-hm-s4); padding: var(--sf-hm-s3) var(--sf-hm-s2); color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-fp-sl-datum { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s1) var(--sf-hm-s2); font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-fp-sl-datum em { font-style: normal; font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-section-accent); }
.sf-dynamik .sf-fp-sl-zahl { grid-column: 2; grid-row: 1; justify-self: end; font-size: var(--sf-hb-fein); font-weight: 700; white-space: nowrap; color: var(--sf-muted); }
.sf-dynamik .sf-fp-sl-orte { grid-column: 1 / -1; display: grid; gap: var(--sf-hm-s1); margin: 0; padding: 0; list-style: none; }
.sf-dynamik .sf-fp-sl-orte > li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sf-hm-s2); font-size: var(--sf-hb-text-klein); line-height: 1.4; }
.sf-dynamik .sf-fp-sl-orte > li > span { color: var(--sf-muted); }
.sf-dynamik .sf-fp-sl-orte .sf-fp-sl-rennen { display: none; }
.sf-dynamik .sf-fp-sl-orte .sf-fp-sl-mehr { color: var(--sf-muted); font-size: var(--sf-hb-fein); }
.sf-dynamik .sf-fp-sl-woche[data-sf-jetzt] { border-left: 3px solid var(--sf-section-accent); background: var(--sf-white); }
.sf-dynamik .sf-fp-sl-woche[data-sf-vorbei] .sf-fp-sl-link { color: var(--sf-muted); }
.sf-dynamik .sf-fp-sl-woche[data-sf-vorbei] .sf-fp-punkt { opacity: 0.5; }
@media (min-width: 768px) {
.sf-dynamik .sf-fp-sl-link { grid-template-columns: 180px minmax(0, 1fr) auto; align-items: start; padding: var(--sf-hm-s3) var(--sf-hm-s3); }
.sf-dynamik .sf-fp-sl-datum { flex-direction: column; gap: var(--sf-hm-s1); }
.sf-dynamik .sf-fp-sl-orte { grid-column: 2; grid-row: 1; }
.sf-dynamik .sf-fp-sl-zahl { grid-column: 3; grid-row: 1; }
.sf-dynamik .sf-fp-sl-orte .sf-fp-sl-rennen { display: inline; }
.sf-dynamik .sf-fp-sl-orte .sf-fp-sl-rennen::before { content: "· "; }
}
.sf-dynamik .sf-fp-kal-filter { margin-bottom: var(--sf-hm-s4); }
.sf-dynamik .sf-fp-kal { display: grid; gap: var(--sf-hm-s5); }
.sf-dynamik .sf-fp-kal-monat { min-width: 0; padding-top: var(--sf-hm-s2); border-top: 2px solid var(--sf-ink); }
.sf-dynamik .sf-fp-kal .sf-fp-kal-monatsname { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sf-hm-s2); margin: 0 0 var(--sf-hm-s2); font-family: var(--sf-display); font-size: var(--sf-hb-h3); line-height: 1.15; color: var(--sf-ink); }
.sf-dynamik .sf-fp-kal-monatsname small { font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 400; color: var(--sf-muted); }
.sf-dynamik .sf-fp-kal-felder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s2); margin: 0; padding: 0; list-style: none; }
.sf-dynamik .sf-fp-kal-feld { min-width: 0; }
.sf-dynamik .sf-fp-kal-feld > a { display: grid; align-content: start; gap: 2px; height: 100%; padding: var(--sf-hm-s2); border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-fp-kal-feld > a:hover { border-color: var(--sf-ink); }
.sf-dynamik .sf-fp-kal-feld > a:focus-visible { outline: 2px solid var(--sf-section-accent); outline-offset: 1px; }
.sf-dynamik .sf-fp-kal-datum { display: flex; flex-wrap: wrap; gap: 0 var(--sf-hm-s2); font-size: var(--sf-hb-fein); font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-dynamik .sf-fp-kal-datum em { font-style: normal; font-size: var(--sf-hb-mini); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-section-accent); }
.sf-dynamik .sf-fp-kal-ort { font-size: var(--sf-hb-text-klein); line-height: 1.25; overflow-wrap: anywhere; }
.sf-dynamik .sf-fp-kal-mehr { font-size: var(--sf-hb-mini); color: var(--sf-muted); }
.sf-dynamik .sf-fp-kal-sport { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s1); margin-top: var(--sf-hm-s1); }
.sf-dynamik .sf-fp-kal-sport small { margin-left: auto; font-size: var(--sf-hb-mini); color: var(--sf-muted); }
.sf-dynamik .sf-fp-kal-feld[data-sf-jetzt] > a { border-color: var(--sf-section-accent); box-shadow: inset 3px 0 0 var(--sf-section-accent); }
.sf-dynamik .sf-fp-kal-feld[data-sf-hoehepunkt] .sf-fp-kal-ort::before { content: "◆ "; color: var(--sf-section-accent); }
.sf-dynamik .sf-fp-kal-feld[data-sf-vorbei] > a { background: transparent; color: var(--sf-muted); }
.sf-dynamik .sf-fp-kal-feld[data-sf-vorbei] .sf-fp-punkt { opacity: 0.5; }
@media (min-width: 768px) {
.sf-dynamik .sf-fp-kal { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-hm-s5) var(--sf-hm-s3); }
}
@media (min-width: 1100px) {
.sf-dynamik .sf-fp-kal { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.sf-dynamik .sf-fp-kal .sf-fp-kal-felder { grid-template-columns: minmax(0, 1fr); }
}
.sf-dynamik .sf-fp-sl-orte .sf-fp-sl-ort { font-weight: 700; color: var(--sf-ink); text-decoration: underline; text-decoration-color: var(--sf-line); text-underline-offset: 3px; }
.sf-dynamik .sf-fp-sl-orte .sf-fp-sl-ort:hover { color: var(--sf-section-accent); text-decoration-color: currentColor; }
.sf-dynamik .sf-fp-sl-woche[data-sf-vorbei] .sf-fp-sl-ort { color: var(--sf-muted); }
.sf-dynamik .sf-fp-sl-woche { scroll-margin-top: 96px; }
.sf-dynamik .sf-wb-bild.sf-wsb-buehne { display: grid; grid-template-rows: minmax(0, 1fr) auto; aspect-ratio: auto; background: var(--sf-wsb-grund); color: var(--sf-wsb-hell); }
.sf-dynamik .sf-wb-bild.sf-wsb-buehne img { width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: contain; }
.sf-dynamik .sf-wb-bild.sf-wsb-buehne[data-sf-ablauf="an"] img { animation: sf-wsb-ablauf 2.4s steps(8, end) 0.3s both; }
.sf-dynamik .sf-wb-bild.sf-wsb-buehne[data-sf-ablauf="wartet"] img { clip-path: inset(0 100% 0 0); }
@keyframes sf-wsb-ablauf { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) {
.sf-dynamik .sf-wb-bild.sf-wsb-buehne[data-sf-ablauf] img { animation: none; clip-path: none; }
}
@media (min-width: 900px) {
.sf-dynamik .sf-wb-bild.sf-wsb-buehne { align-self: start; min-height: 0; }
.sf-dynamik .sf-wb-bild.sf-wsb-buehne[data-sf-ablauf] { position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + var(--sf-hm-s7) + var(--sf-hm-s4)); }
.sf-dynamik .sf-wb-bild.sf-wsb-buehne img { height: auto; }
}
.sf-dynamik .sf-wb-bild.sf-wsb-buehne figcaption { position: static; display: flex; align-items: center; gap: var(--sf-hm-s3); padding: 0 var(--sf-hm-s4) var(--sf-hm-s4); background: none; color: inherit; font-size: var(--sf-hb-fein); }
.sf-dynamik .sf-wsb-signet { flex: none; width: 44px; height: 44px; color: var(--sf-wsb-hell); }
.sf-dynamik .sf-wsb-zeiger { color: var(--sf-sport); stroke: var(--sf-sport); transform-box: view-box; transform-origin: 16px 16px; }
.sf-dynamik .sf-wsb-buehne[data-sf-ablauf="an"] .sf-wsb-zeiger { animation: sf-wsb-zeiger 2.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
@keyframes sf-wsb-zeiger { from { transform: rotate(-150deg); } to { transform: rotate(0deg); } }
.sf-dynamik .sf-wsb-zahlblock { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-dynamik .sf-wsb-zahl, .sf-dynamik .sf-wsb-titel { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-weight: var(--sf-hb-zahl-gewicht, 700); line-height: 0.95; font-variant-numeric: tabular-nums; }
.sf-dynamik .sf-wsb-zahl { font-size: var(--sf-hb-zahl); }
.sf-dynamik .sf-wsb-titel { font-size: var(--sf-hb-zahl-klein); }
.sf-dynamik .sf-wsb-zahlblock small { font-size: var(--sf-hb-mini); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-wsb-leise); }
.sf-dynamik .sf-wsb-zahlblock .sf-wsb-weitere { text-transform: none; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) {
.sf-dynamik .sf-wsb-buehne[data-sf-ablauf] .sf-wsb-zeiger { animation: none; }
}
.sf-dynamik .sf-fp-bildziel .sf-wsb-karte { background: var(--sf-wsb-grund); }
.sf-dynamik .sf-fp-bildziel .sf-wsb-karte img { object-fit: contain; }
.sf-dynamik .sf-wsb-aus { position: absolute; inset: 0; display: block; overflow: hidden; background: var(--sf-wsb-grund); }
.sf-dynamik .sf-wsb-aus img { position: absolute; width: 300%; max-width: none; height: auto; left: clamp(-200%, calc(50% - var(--sf-wsb-x, 50%) * 3), 0%); top: clamp(-200%, calc(50% - var(--sf-wsb-y, 50%) * 3), 0%); }
.sf-dynamik .sf-wsb-zeichen { position: absolute; top: var(--sf-hm-s2); left: var(--sf-hm-s2); width: 40px; height: 40px; overflow: hidden; border: 2px solid var(--sf-wsb-hell); border-radius: 50%; background: var(--sf-wsb-grund); }
.sf-dynamik .sf-wsb-zeichen img { position: absolute; width: 800%; max-width: none; height: auto; left: clamp(-700%, calc(50% - var(--sf-wsb-x, 50%) * 8), 0%); top: clamp(-433.33%, calc(50% - var(--sf-wsb-y, 50%) * 5.3333), 0%); }
.sf-dynamik .sf-fp-ort-link:hover .sf-wsb-zeichen img, .sf-dynamik .sf-fp-ort-link:hover .sf-wsb-aus img { transform: none; }
.sf-fp-spielwahl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s2, 8px); margin: var(--sf-hm-s6, 24px) 0 0; }
.sf-fp-spielwahl-k { flex-basis: 100%; font-weight: 700; font-size: var(--sf-hb-fein); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-muted); }
.sf-wb-bereichskopf .sf-hb-bildkopf .sf-hb-bildkopf-buehne { min-height: var(--sf-hb-bildkopf-hoehe-kompakt); }
@container sf-hb-bildkopf (min-width: 760px) {
.sf-wb-bereichskopf .sf-hb-bildkopf .sf-hb-bildkopf-buehne { min-height: var(--sf-hb-bildkopf-hoehe-kompakt-breit); }
}
/* ausruestung.css */
.sf-dynamik .sf-wa { border-block: 1px solid var(--sf-line); min-width: 0; scroll-margin-top: 100px; }
.sf-dynamik .sf-wa-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-hm-s3); padding: var(--sf-hm-s4) 0; cursor: pointer; list-style: none; }
.sf-dynamik .sf-wa summary::-webkit-details-marker { display: none; }
.sf-dynamik .sf-wa-kopf > span { display: grid; gap: var(--sf-hm-s1); }
.sf-dynamik .sf-wa-kopf strong { font-size: var(--sf-hb-h3); line-height: 1.2; }
.sf-dynamik .sf-wa-kopf small, .sf-dynamik .sf-wa-kopf > span > span { color: var(--sf-muted); font-size: var(--sf-hb-fein); }
.sf-dynamik .sf-wa-kopf > b, .sf-dynamik .sf-wa-plus { font-size: var(--sf-wa-plus); font-weight: 400; }
.sf-dynamik .sf-wa[open] > summary > b, .sf-dynamik .sf-wa-athlet[open] > summary .sf-wa-plus { transform: rotate(45deg); }
.sf-dynamik .sf-wa-panel { display: grid; gap: var(--sf-hm-s4); padding-bottom: var(--sf-hm-s4); }
.sf-dynamik .sf-wa-panel p { margin: 0; }
.sf-dynamik .sf-wa-panel > p { font-size: var(--sf-hb-text-klein); color: var(--sf-muted); max-width: 65ch; }
.sf-dynamik .sf-wa-filter { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-dynamik .sf-wa-filter button { min-height: 44px; padding: 8px 14px; border: 1px solid var(--sf-line); background: transparent; font: inherit; font-size: var(--sf-hb-text-klein); color: var(--sf-text); cursor: pointer; }
.sf-dynamik .sf-wa-filter button[aria-pressed="true"] { background: var(--sf-text); color: var(--sf-white); border-color: var(--sf-text); }
.sf-dynamik .sf-wa-liste { display: grid; min-width: 0; }
.sf-dynamik .sf-wa-athlet { border-top: 1px solid var(--sf-line); min-width: 0; scroll-margin-top: 100px; }
.sf-dynamik .sf-wa-athlet > summary { display: flex; align-items: center; gap: var(--sf-hm-s3); min-height: 60px; padding: var(--sf-hm-s2) 0; cursor: pointer; list-style: none; }
.sf-dynamik .sf-wa-land { color: var(--sf-muted); font-size: var(--sf-hb-fein); font-variant-numeric: tabular-nums; width: 32px; flex: none; }
.sf-dynamik .sf-wa-athlet > summary strong { flex: 1; min-width: 0; font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-wa-inhalt { display: grid; gap: var(--sf-hm-s3); padding: 0 0 var(--sf-hm-s4); min-width: 0; }
.sf-dynamik .sf-wa-marken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s3); margin: 0; padding: var(--sf-hm-s3); background: var(--sf-surface); }
.sf-dynamik .sf-wa-marken dt { color: var(--sf-muted); font-size: var(--sf-hb-fein); }
.sf-dynamik .sf-wa-marken dd { margin: 2px 0 0; font-weight: 700; }
.sf-dynamik .sf-wa-marken dd small { display: block; font-weight: 400; color: var(--sf-muted); font-size: var(--sf-hb-fein); }
.sf-dynamik .sf-wa-quellen, .sf-dynamik .sf-wa-hinweis { font-size: var(--sf-hb-fein); color: var(--sf-muted); overflow-wrap: anywhere; }
.sf-dynamik .sf-wa-quellen a { text-decoration: underline; text-underline-offset: 3px; }
.sf-dynamik .sf-wa-produkte { display: grid; gap: var(--sf-hm-s3); min-width: 0; }
.sf-dynamik .sf-wa-produktkopf { font-size: var(--sf-hb-text-klein); font-weight: 700; }
.sf-dynamik .sf-wa .sf-shop-list[data-layout="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-dynamik .sf-wa .sf-shop-card { min-width: 0; }
.sf-dynamik .sf-wa summary:focus-visible, .sf-dynamik .sf-wa button:focus-visible { outline: 2px solid var(--sf-section-accent); outline-offset: 3px; }
@media (min-width: 700px) {
.sf-dynamik .sf-wa-marken { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-dynamik .sf-wa .sf-shop-list[data-layout="grid"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-dynamik .sf-wa-chips { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1); }
.sf-dynamik .sf-wa-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 2px 7px; border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-ink); font-size: var(--sf-hb-mini); font-weight: 700; white-space: nowrap; }
.sf-dynamik .sf-wa-chip i { font-style: normal; font-weight: 500; color: var(--sf-muted); }
.sf-dynamik .sf-wa-chip[data-sf-signature] { border-color: var(--sf-section-accent); color: var(--sf-section-accent); }
.sf-dynamik .sf-wa-name { margin-top: var(--sf-hm-s1); }
.sf-dynamik .sf-wa-name > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s1) var(--sf-hm-s2); cursor: pointer; list-style: none; }
.sf-dynamik .sf-wa-name > summary::-webkit-details-marker { display: none; }
.sf-dynamik .sf-wa-mehr { font-size: var(--sf-hb-mini); font-weight: 700; color: var(--sf-section-accent); }
.sf-dynamik .sf-wa-mehr::after { content: " ▾"; }
.sf-dynamik .sf-wa-name[open] .sf-wa-mehr::after { content: " ▴"; }
.sf-dynamik .sf-wa-name > summary:focus-visible { outline: 2px solid var(--sf-section-accent); outline-offset: 2px; }
.sf-dynamik .sf-wa-karte { display: grid; gap: var(--sf-hm-s3); margin-top: var(--sf-hm-s2); padding: var(--sf-hm-s3); border: 1px solid var(--sf-ink); background: var(--sf-white); min-width: 0; }
.sf-dynamik .sf-wa-karte p { margin: 0; }
.sf-dynamik .sf-wa-shoplinks a { font-weight: 700; color: var(--sf-section-accent); }
.sf-dynamik .sf-wa-deutschland { display: grid; gap: var(--sf-hm-s2); padding-top: var(--sf-hm-s4); border-top: 1px solid var(--sf-line); }
.sf-dynamik .sf-wa-deutschland ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s2) var(--sf-hm-s5); }
@media (min-width: 700px) {
.sf-dynamik .sf-wa-deutschland ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-dynamik .sf-wa-deutschland li { min-width: 0; padding: var(--sf-hm-s2) 0; border-top: 1px solid var(--sf-line); }
.sf-dynamik .sf-wb-podest .sf-wa-chips { justify-content: center; }
.sf-dynamik .sf-wa-karte { container: sf-wa-karte / inline-size; }
.sf-dynamik .sf-wa-karte .sf-wa-zeilen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s2); margin: 0; padding: 0; list-style: none; }
@container sf-wa-karte (min-width: 520px) {
.sf-dynamik .sf-wa-karte .sf-wa-zeilen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-dynamik .sf-wa-karte .sf-wa-zeilen > li, .sf-dynamik .sf-wb-favs .sf-wa-karte .sf-wa-zeilen > li, .sf-dynamik .sf-wa-deutschland .sf-wa-karte .sf-wa-zeilen > li { display: block; min-width: 0; margin: 0; padding: 0; border: 0; }
.sf-dynamik .sf-wa-karte .sf-wa-zeilen a { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: start; gap: var(--sf-hm-s3); height: 100%; padding: var(--sf-hm-s2); border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-wa-karte .sf-wa-zeilen img, .sf-dynamik .sf-wa-karte .sf-wa-bildplatz { display: block; width: 64px; height: 64px; object-fit: contain; background: var(--sf-surface); }
.sf-dynamik .sf-wa-karte .sf-wa-zeile-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--sf-hb-fein); line-height: 1.35; }
.sf-dynamik .sf-wa-karte .sf-wa-zeile-text strong { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: break-word; hyphens: auto; }
.sf-dynamik .sf-wa-karte .sf-wa-zeile-text small { color: var(--sf-muted); }
.sf-dynamik .sf-wa-karte .sf-wa-preis { margin-top: var(--sf-hm-s1); font-weight: 700; white-space: nowrap; }
.sf-dynamik .sf-wa-karte .sf-wa-zeilen a:hover strong { color: var(--sf-section-accent); }
.sf-dynamik .sf-wa-karte .sf-wa-zeilen a:focus-visible { outline: 2px solid var(--sf-section-accent); outline-offset: 2px; }
.sf-dynamik .sf-wa-karte li, .sf-dynamik .sf-wa-deutschland .sf-wa-karte li { display: block; padding: 0; border: 0; }
.sf-dynamik .sf-wa-karte .sf-wa-marken { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); align-items: start; }
.sf-dynamik .sf-wa-name > summary { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
@media (max-width: 699px) {
.sf-dynamik .sf-wb-favs .sf-wa-karte { margin-left: calc(-40px - var(--sf-hm-s3)); }
}
/* buehne.css */
.sf-dynamik .sf-wb-seite { gap: var(--sf-hm-s6); }
.sf-dynamik .sf-wb-wochen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s1) var(--sf-hm-s3); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-dynamik .sf-wb-wochen button { padding: var(--sf-hm-s1) 0; border: 0; background: transparent; color: var(--sf-ink); font: inherit; font-weight: 700; cursor: pointer; }
.sf-dynamik .sf-wb-wochen button:hover { color: var(--sf-section-accent); }
@media (min-width: 900px) {
.sf-dynamik .sf-wb-seite > .sf-wb-wochen { align-self: flex-end; min-height: 42px; margin-top: -58px; }
}
.sf-dynamik .sf-wb-wochen button:focus-visible, .sf-dynamik .sf-wb-kapitel a:focus-visible, .sf-dynamik .sf-wb-sportwahl select:focus-visible { outline: 2px solid var(--sf-section-accent); outline-offset: 2px; }
.sf-dynamik .sf-wb-kopf { display: flex; flex-direction: column; gap: var(--sf-hm-s2); }
.sf-dynamik .sf-wb-eyebrow { margin: 0; font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-section-accent); }
.sf-dynamik .sf-wb-bereich { font-family: var(--sf-body); line-height: 1.3; color: var(--sf-ink); }
.sf-dynamik .sf-wb-h1 { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); font-size: var(--sf-fp-h1); line-height: 1; text-wrap: balance; }
.sf-dynamik .sf-wb-lead { margin: 0; max-width: 62ch; font-size: var(--sf-hb-text); color: var(--sf-muted); }
.sf-dynamik .sf-wb-buehne { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "kopf" "bild" "inhalt"; }
.sf-dynamik .sf-wb-kopfplatz { grid-area: kopf; padding-bottom: var(--sf-hm-s4); }
.sf-dynamik .sf-wb-buehne .sf-wb-bild { grid-area: bild; }
.sf-dynamik .sf-wb-buehne .sf-wb-inhalt { grid-area: inhalt; border: 1px solid var(--sf-line); border-top: 0; background: var(--sf-white); }
.sf-dynamik .sf-wb-bild { position: relative; margin: 0; aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; background: var(--sf-surface); }
.sf-dynamik .sf-wb-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-dynamik .sf-wb-bild figcaption { position: absolute; left: 0; bottom: 0; padding: 2px 6px; font-size: var(--sf-hb-mini); color: var(--sf-white); background: var(--sf-hb-vermerk-grund); }
.sf-dynamik .sf-wb-inhalt { display: flex; flex-direction: column; gap: var(--sf-hm-s4); padding: var(--sf-hm-s4); min-width: 0; }
@media (min-width: 900px) {
.sf-dynamik .sf-wb-buehne { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "bild kopf" "bild inhalt"; border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-dynamik .sf-wb-kopfplatz { padding: var(--sf-hm-s5) var(--sf-hm-s5) 0; }
.sf-dynamik .sf-wb-buehne .sf-wb-inhalt { border: 0; }
.sf-dynamik .sf-wb-bild { aspect-ratio: auto; min-height: 100%; }
.sf-dynamik .sf-wb-buehne .sf-wb-h1 { font-size: clamp(36px, 3.6vw, 56px); }
.sf-dynamik .sf-wb-inhalt { padding: var(--sf-hm-s5); }
}
.sf-dynamik .sf-wb-klein { margin: 0; font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-dynamik .sf-wb-fein { margin: 0; font-size: var(--sf-hb-mini); color: var(--sf-muted); }
.sf-dynamik .sf-wb-countdown { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--sf-hm-s2); }
.sf-dynamik .sf-wb-countdown > span:not(.sf-wb-countdown-bis) { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 64px; padding: var(--sf-hm-s2) var(--sf-hm-s3); background: var(--sf-ink); color: var(--sf-white); }
.sf-dynamik .sf-wb-countdown strong { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl); line-height: 1; }
.sf-dynamik .sf-wb-countdown small { font-size: var(--sf-hb-mini); letter-spacing: 0.1em; text-transform: uppercase; }
.sf-dynamik .sf-wb-countdown-bis { align-self: center; font-size: var(--sf-hb-text-klein); font-weight: 600; }
.sf-dynamik .sf-wb-countdown-text { margin: 0; font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl-klein); }
.sf-dynamik .sf-wb-wetter { display: flex; flex-direction: column; gap: var(--sf-hm-s1); padding: var(--sf-hm-s3); border: 1px solid var(--sf-line); }
.sf-dynamik .sf-wb-wetter ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 2px; font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-wb-rennen { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.sf-dynamik ul.sf-wb-rennen > li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sf-hm-s3); padding: var(--sf-hm-s3) 0; border-top: 1px solid var(--sf-line); }
.sf-dynamik ul.sf-wb-rennen > li span { display: flex; flex-direction: column; min-width: 0; }
.sf-dynamik .sf-wb-tag { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl-klein); line-height: 1; }
.sf-dynamik .sf-wb-rennname { font-weight: 700; color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-wb-rennen small { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-dynamik ul.sf-wb-rennen > li[data-sf-stand="laeuft"] .sf-wb-tag { color: var(--sf-hm-live-gruen-text); }
.sf-dynamik .sf-wb-rennen .sf-wb-mehr { display: block; font-size: var(--sf-hb-fein); font-weight: 700; }
.sf-dynamik .sf-wb-gebiet, .sf-dynamik .sf-wb-wege a { font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-section-accent); text-decoration: none; }
.sf-dynamik .sf-wb-wege { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s4); margin: 0; }
.sf-dynamik .sf-wb-live { display: flex; align-items: center; gap: var(--sf-hm-s2); margin: 0; font-weight: 700; color: var(--sf-hm-live-gruen-text); }
.sf-dynamik .sf-wb-live span { width: var(--sf-hb-live-punkt); height: var(--sf-hb-live-punkt); border-radius: 50%; background: currentColor; }
.sf-dynamik .sf-wb-ergebnis { display: flex; flex-direction: column; gap: var(--sf-hm-s2); }
.sf-dynamik .sf-wb-podeste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); }
@media (min-width: 560px) {
.sf-dynamik .sf-wb-podeste:has(> :nth-child(2)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-dynamik .sf-wb-podest { margin: 0; display: flex; flex-direction: column; gap: var(--sf-hm-s2); }
.sf-dynamik .sf-wb-podest figcaption { font-weight: 700; font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-wb-podest ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--sf-hm-s1); }
.sf-dynamik .sf-wb-podest li { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sf-hm-s2) var(--sf-hm-s1); border: 1px solid var(--sf-line); border-top-width: 4px; text-align: center; font-size: var(--sf-hb-fein); min-width: 0; overflow-wrap: anywhere; }
.sf-dynamik .sf-wb-podest li[data-sf-rang="1"] { padding-top: var(--sf-hm-s4); border-top-color: var(--sf-section-accent); }
.sf-dynamik .sf-wb-podest li small { color: var(--sf-muted); }
.sf-dynamik .sf-wb-rang { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl-klein); line-height: 1; }
.sf-dynamik .sf-wb-kapitel { position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + env(safe-area-inset-top, 0px)); z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s2) var(--sf-hm-s4); padding: var(--sf-hm-s2) 0; border-top: 1px solid var(--sf-line); border-bottom: 2px solid var(--sf-ink); background: var(--sf-page); }
.sf-dynamik .sf-wb-kapitel[data-sf-klebt="ja"] { box-shadow: var(--sf-gl-schatten, none); }
.sf-dynamik .sf-wb-kapitel-links { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1) var(--sf-hm-s4); margin-right: auto; }
.sf-dynamik .sf-wb-kapitel-links a { font-size: var(--sf-hb-steuer-schrift); font-weight: 700; color: var(--sf-ink); text-decoration: none; padding: var(--sf-hm-s1) 0; border-bottom: 2px solid transparent; }
.sf-dynamik .sf-wb-kapitel-links a[aria-current="location"], .sf-dynamik .sf-wb-kapitel-links a:hover { color: var(--sf-section-accent); border-bottom-color: var(--sf-section-accent); }
.sf-dynamik .sf-wb-kapitel-wahl { display: none; }
.sf-dynamik .sf-wb-kapitel-wahl select, .sf-dynamik .sf-wb-sportwahl select { min-height: var(--sf-hb-steuer-hoehe); padding: 0 var(--sf-hm-s2); border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-ink); font: inherit; font-weight: 600; }
.sf-dynamik .sf-wb-sportwahl { display: flex; align-items: center; gap: var(--sf-hm-s2); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-dynamik .sf-wb-nachoben { display: none; min-height: var(--sf-hb-steuer-hoehe); padding: 0 var(--sf-hm-s3); border: 1px solid var(--sf-ink); background: var(--sf-ink); color: var(--sf-white); font: inherit; font-size: var(--sf-hb-fein); font-weight: 700; cursor: pointer; }
.sf-dynamik .sf-wb-kapitel[data-sf-klebt="ja"] .sf-wb-nachoben { display: inline-flex; align-items: center; }
@media (max-width: 699px) {
.sf-dynamik .sf-wb-kapitel[data-sf-klebt="ja"] .sf-wb-kapitel-links, .sf-dynamik .sf-wb-kapitel[data-sf-klebt="ja"] .sf-wb-sportwahl { display: none; }
.sf-dynamik .sf-wb-kapitel[data-sf-klebt="ja"] .sf-wb-kapitel-wahl { display: block; flex: 1 1 auto; }
.sf-dynamik .sf-wb-kapitel[data-sf-klebt="ja"] .sf-wb-kapitel-wahl select { width: 100%; }
}
.sf-dynamik .sf-wb-seite [id="rennen"], .sf-dynamik .sf-wb-seite [id="wer-faehrt"], .sf-dynamik .sf-wb-seite [id="rennort"], .sf-dynamik .sf-wb-seite [id="selbst-fahren"], .sf-dynamik .sf-wb-seite [id="geschichten"], .sf-dynamik .sf-wb-seite [id="slalom"] { scroll-margin-top: 72px; }
.sf-dynamik .sf-wb-buehne[data-sf-bild="ohne"] .sf-wb-inhalt { border-top: 1px solid var(--sf-line); }
@media (min-width: 900px) {
.sf-dynamik .sf-wb-buehne[data-sf-bild="ohne"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); grid-template-rows: auto; grid-template-areas: "kopf inhalt"; }
.sf-dynamik .sf-wb-buehne[data-sf-bild="ohne"] .sf-wb-kopfplatz { padding-bottom: var(--sf-hm-s5); }
.sf-dynamik .sf-wb-buehne[data-sf-bild="ohne"] .sf-wb-inhalt { border-top: 0; border-left: 1px solid var(--sf-line); }
.sf-dynamik .sf-wb-buehne[data-sf-bild="ohne"] .sf-wb-h1 { font-size: var(--sf-hb-h2); }
}
.sf-dynamik .sf-wb-programm { display: grid; gap: var(--sf-hm-s4); }
.sf-dynamik .sf-wb-rennblock { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); }
.sf-dynamik .sf-wb-danach { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); align-items: start; }
.sf-dynamik .sf-wb-danach:empty { display: none; }
.sf-dynamik .sf-wb-danach > .sf-fp-abschnitt { margin: 0; }
@media (min-width: 760px) {
.sf-dynamik .sf-wb-danach { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
}
@media (min-width: 900px) {
.sf-dynamik .sf-wb-rennblock .sf-wb-buehne { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.sf-dynamik .sf-wb-rennblock .sf-wb-buehne .sf-wb-bild, .sf-dynamik .sf-wb-rennblock .sf-wb-bild.sf-wsb-buehne, .sf-dynamik .sf-wb-rennblock .sf-wb-bild.sf-wsb-buehne[data-sf-ablauf] { position: relative; top: auto; align-self: stretch; min-height: 100%; }
.sf-dynamik .sf-wb-rennblock .sf-wb-bild.sf-wsb-buehne img, .sf-dynamik .sf-wb-rennblock .sf-wb-buehne .sf-wb-bild img { height: 100%; min-height: 100%; aspect-ratio: auto; object-fit: cover; }
}
@media (min-width: 1180px) {
.sf-dynamik .sf-wb-rennblock .sf-wb-buehne .sf-wb-inhalt { display: block; column-count: 2; column-gap: var(--sf-hm-s6); }
.sf-dynamik .sf-wb-rennblock .sf-wb-buehne .sf-wb-inhalt > * { break-inside: avoid; margin: 0 0 var(--sf-hm-s4); }
.sf-dynamik .sf-wb-rennblock .sf-wb-buehne .sf-wb-inhalt > a { display: block; margin-bottom: var(--sf-hm-s2); }
}
.sf-dynamik .sf-wb-unten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s6); align-items: start; }
.sf-dynamik .sf-wb-spalte { display: grid; gap: var(--sf-hm-s5); min-width: 0; }
.sf-dynamik .sf-wb-unten .sf-wb-danach { grid-template-columns: minmax(0, 1fr); }
.sf-dynamik .sf-wb-unten .sf-zz-weltcup.sf-zz-weltcup { margin: 0; min-width: 0; }
.sf-dynamik .sf-wb-unten .sf-zz-herkunft { display: none; }
.sf-dynamik .sf-wb-unten .sf-fp-ausblick { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s1) var(--sf-hm-s3); margin: 0; padding: var(--sf-hm-s3) 0 0; background: none; border-top: 1px solid var(--sf-line); }
.sf-dynamik .sf-wb-unten .sf-fp-hin { margin-left: var(--sf-hm-s1); }
@media (min-width: 1000px) {
.sf-dynamik .sf-wb-unten:has(> .sf-zz-weltcup) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s6); }
}
@media (min-width: 1180px) {
.sf-dynamik .sf-wb-unten:has(> .sf-zz-weltcup) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sf-hm-s7); }
}
.sf-dynamik .sf-wb-seite[data-sf-wb="uebersicht"] .sf-wb-hinfahren .sf-hb-karten.sf-hb-karten { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sf-dynamik .sf-wb-seite[data-sf-wb="uebersicht"] .sf-sb-shop .sf-shop-list[data-layout="grid"]:has(> :nth-child(3)) { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (min-width: 1000px) {
.sf-dynamik .sf-wb-seite[data-sf-wb="uebersicht"] > .sf-fp-abschnitt .sf-fp-hoehepunkte:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1180px) {
.sf-dynamik .sf-wb-seite[data-sf-wb="uebersicht"] > .sf-fp-abschnitt .sf-fp-hoehepunkte:has(> :nth-child(4)) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.sf-dynamik .sf-wb-raster.sf-wb-raster { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sf-hm-s7); align-items: start; }
}
.sf-dynamik .sf-wb-raster .sf-fp-haupt { gap: var(--sf-hm-abschnitt); }
.sf-dynamik .sf-wb-favraster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); }
@media (min-width: 700px) {
.sf-dynamik .sf-wb-favraster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-dynamik .sf-wb-favs { display: flex; flex-direction: column; gap: var(--sf-hm-s2); min-width: 0; }
.sf-dynamik .sf-wb-favs ul { margin: 0; padding: 0; list-style: none; }
.sf-dynamik .sf-wb-favs li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: var(--sf-hm-s3); padding: var(--sf-hm-s2) 0; border-top: 1px solid var(--sf-line); }
.sf-dynamik .sf-wb-favs li > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sf-dynamik .sf-wb-favs small { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-dynamik .sf-wb-kuerzel { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--sf-surface); font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-muted); }
.sf-dynamik .sf-wb-land { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-dynamik .sf-wb-mehrfavs summary { cursor: pointer; font-weight: 700; font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-fp-ortstext { display: flex; flex-direction: column; gap: var(--sf-hm-s3); }
.sf-dynamik .sf-fp-ortstext > p { margin: 0; }
.sf-dynamik .sf-fp-strecke-name { margin: 0; font-weight: 700; }
.sf-dynamik .sf-fp-strecke, .sf-dynamik .sf-fp-zuschauen { display: flex; flex-direction: column; gap: var(--sf-hm-s2); }
.sf-dynamik .sf-fp-zuschauen p { margin: 0; }
@media (min-width: 760px) {
.sf-dynamik .sf-wb-seite .sf-fp-ortsportraet:only-child:has(> .sf-fp-ortsbild) { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--sf-hm-s5); }
.sf-dynamik .sf-wb-seite .sf-fp-ortsportraet:only-child .sf-fp-ortskopf { grid-column: 1 / -1; }
.sf-dynamik .sf-wb-wochen { grid-template-columns: minmax(0, 220px) auto minmax(0, 220px); justify-content: start; }
}
.sf-dynamik .sf-wb-spiel { scroll-margin-top: 96px; display: flex; flex-direction: column; gap: var(--sf-hm-s4); }
.sf-dynamik .sf-wb-auswahl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s3) var(--sf-hm-s4); }
.sf-dynamik .sf-wb-abo code { overflow-wrap: anywhere; }
.sf-dynamik .sf-wb-werfaehrt, .sf-dynamik .sf-wb-seite #selbst-fahren { padding: var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-dynamik .sf-wb-werfaehrt { background: var(--sf-tint-sky-80); }
.sf-dynamik .sf-wb-seite #selbst-fahren { background: var(--sf-tint-sand-200); }
.sf-dynamik .sf-wb-werfaehrt .sf-wb-kuerzel { background: var(--sf-white); }
@media (min-width: 900px) {
.sf-dynamik .sf-wb-werfaehrt, .sf-dynamik .sf-wb-seite #selbst-fahren { padding: var(--sf-hm-s6); }
}
.sf-dynamik .sf-wb-tv { display: grid; gap: var(--sf-hm-s3); padding: var(--sf-hm-s4); border: 1px solid var(--sf-line); background: var(--sf-white); }
@media (min-width: 700px) {
.sf-dynamik .sf-wb-tv { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-dynamik .sf-wb-tv > .sf-wb-klein { grid-column: 1 / -1; }
}
.sf-dynamik .sf-wb-tv-rennen p { margin: 0 0 var(--sf-hm-s1); }
.sf-dynamik .sf-wb-tv-rennen ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-wb-tv-rennen small { color: var(--sf-muted); }
.sf-dynamik .sf-wb-startliste { display: grid; gap: var(--sf-hm-s2); padding-top: var(--sf-hm-s4); border-top: 1px solid var(--sf-line); }
.sf-dynamik .sf-wb-sl-liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--sf-hm-s5); }
@media (min-width: 700px) {
.sf-dynamik .sf-wb-sl-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.sf-dynamik .sf-wb-sl-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-dynamik .sf-wb-sl-liste li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: baseline; gap: var(--sf-hm-s2); min-width: 0; padding: var(--sf-hm-s1) 0; border-top: 1px solid var(--sf-line); font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-wb-sl-nr { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--sf-muted); text-align: right; }
.sf-dynamik .sf-wb-sl-liste .sf-wb-sl-fav .sf-wb-sl-nr, .sf-dynamik .sf-wb-sl-liste .sf-wb-sl-heim .sf-wb-sl-nr { color: var(--sf-section-accent); }
.sf-dynamik .sf-wb-sl-name { min-width: 0; }
/* kopf.css */
.sf-dynamik .sf-wk { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); }
.sf-dynamik .sf-wk > .sf-fp-kopf { gap: var(--sf-hm-s3); }
@media (min-width: 1024px) {
.sf-dynamik .sf-wk[data-sf-mit-karte] { grid-template-columns: minmax(0, 1fr) minmax(360px, 440px); align-items: start; gap: var(--sf-hm-s6); }
.sf-dynamik .sf-wk[data-sf-mit-karte] > .sf-wk-karte { margin-top: -58px; }
}
.sf-dynamik .sf-wk-zahlen { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s5); margin: 0; }
.sf-dynamik .sf-wk-zahlen > div { display: flex; flex-direction: column-reverse; gap: var(--sf-hm-s1); padding-left: var(--sf-hm-s3); border-left: 3px solid var(--sf-section-accent); }
.sf-dynamik .sf-wk-zahlen dd { margin: 0; font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-weight: var(--sf-hb-zahl-gewicht, 700); font-size: var(--sf-hb-zahl); line-height: 1; color: var(--sf-ink); }
.sf-dynamik .sf-wk-zahlen dt { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-muted); }
.sf-dynamik .sf-wk-sprung { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s5); margin: var(--sf-hm-s2) 0 0; font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-wk-sprung a { font-weight: 700; color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-wk-sprung a:hover { color: var(--sf-section-accent); }
@media (max-width: 1023px) {
.sf-dynamik .sf-wk-sprung { display: none; }
}
.sf-dynamik .sf-wk-karte { display: flex; flex-direction: column; gap: var(--sf-hm-s3); min-width: 0; padding: var(--sf-hm-s4); border: 1px solid var(--sf-line); border-top: 3px solid var(--sf-section-accent); background: var(--sf-white); }
.sf-dynamik .sf-wk-kicker { margin: 0; font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-muted); }
.sf-dynamik .sf-wk-kicker span { color: var(--sf-section-accent); }
.sf-dynamik .sf-wk-karte[data-sf-phase="tag"] .sf-wk-kicker span { color: var(--sf-hm-live-gruen-text); }
.sf-dynamik .sf-wk-kern { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--sf-hm-s3); }
.sf-dynamik .sf-wk-titel { display: flex; flex-direction: column; gap: var(--sf-hm-s1); margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: var(--sf-hb-h2); line-height: 1; text-transform: none; color: var(--sf-ink); }
.sf-dynamik .sf-wk-titel span { font-family: var(--sf-body); font-size: var(--sf-hb-text); font-weight: 700; line-height: 1.3; }
.sf-dynamik .sf-wk-wann, .sf-dynamik .sf-wk-tv, .sf-dynamik .sf-wk-danach { margin: 0; font-size: var(--sf-hb-text-klein); line-height: 1.45; color: var(--sf-text); }
.sf-dynamik .sf-wk-wann { font-weight: 600; color: var(--sf-ink); }
.sf-dynamik .sf-wk-tv span { display: block; font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-muted); }
.sf-dynamik .sf-wk-danach { color: var(--sf-muted); }
.sf-dynamik .sf-wk-karte .sf-wb-countdown > span:not(.sf-wb-countdown-bis) { min-width: 56px; padding: var(--sf-hm-s1) var(--sf-hm-s3); }
.sf-dynamik .sf-wk-karte .sf-wb-countdown strong { font-size: var(--sf-hb-zahl-klein); }
.sf-dynamik .sf-wk-podest { display: grid; gap: var(--sf-hm-s1); margin: 0; padding: 0; list-style: none; font-size: var(--sf-hb-text-klein); }
.sf-dynamik .sf-wk-podest li > span { display: inline-block; min-width: 2ch; font-weight: 700; color: var(--sf-section-accent); }
.sf-dynamik .sf-wk-podest small { color: var(--sf-muted); }
.sf-dynamik .sf-wk-podest .sf-wk-podest-titel { font-weight: 700; }
.sf-dynamik .sf-wk-weg.sf-wk-weg { font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-wk-weg.sf-wk-weg:hover { color: var(--sf-section-accent); }
.sf-dynamik .sf-wk-reihen { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sf-line); }
.sf-dynamik .sf-wk-reihen a { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-hm-s3); min-height: 44px; border-bottom: 1px solid var(--sf-line); font-size: var(--sf-hb-text-klein); color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-wk-reihen a:hover strong { color: var(--sf-section-accent); }
.sf-dynamik .sf-wk-reihen small { color: var(--sf-muted); }
.sf-dynamik .sf-partnerfuss { display: flex; flex-direction: column; gap: var(--sf-hm-s2); margin: var(--sf-hm-s1) 0 0; padding-top: var(--sf-hm-s3); border-top: 1px solid var(--sf-line); }
.sf-dynamik .sf-partnerfuss-marke.sf-partnerfuss-marke { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s2) var(--sf-hm-s3); min-height: 32px; color: var(--sf-muted); text-decoration: none; }
.sf-dynamik .sf-partnerfuss-marke img { display: block; width: auto; max-width: 120px; height: 24px; object-fit: contain; }
.sf-dynamik .sf-partnerfuss-marke strong { font-size: var(--sf-hb-text-klein); color: var(--sf-ink); }
.sf-dynamik .sf-partnerfuss-cta { margin-left: auto; font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-ink); }
.sf-dynamik .sf-partnerfuss-shop.sf-partnerfuss-shop { font-size: var(--sf-hb-text-klein); font-weight: 600; color: var(--sf-ink); text-decoration: underline; text-underline-offset: 3px; }
.sf-dynamik .sf-partnerfuss-marke:hover .sf-partnerfuss-cta, .sf-dynamik .sf-partnerfuss-shop:hover { color: var(--sf-section-accent); }
.sf-dynamik .sf-partnerfuss a:focus-visible, .sf-dynamik .sf-wk-karte a:focus-visible { outline: 2px solid var(--sf-section-accent); outline-offset: 2px; }
.sf-dynamik .sf-partnerkachel { display: flex; min-width: 0; }
.sf-dynamik .sf-partnerkachel > .sf-fp-bildziel { flex: 1 1 auto; }
.sf-dynamik .sf-partnerkachel figure { background: var(--sf-white); border: 1px solid var(--sf-line); }
.sf-dynamik .sf-partnerkachel figure img { object-fit: contain; }
.sf-dynamik .sf-partnerkachel .sf-live-ad-label { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-muted); }
.sf-dynamik .sf-wk-karte.sf-wk-tafel { gap: var(--sf-hm-s3); padding: var(--sf-hm-s5) var(--sf-hm-s5) 0; border: 0; border-top: 4px solid var(--sf-section-accent); background: var(--sf-ink); color: var(--sf-on-dark); }
.sf-dynamik .sf-wk-tafel .sf-wk-kern { align-items: center; }
.sf-dynamik .sf-wk-tafel .sf-wk-kicker { color: var(--sf-on-dark-muted); }
.sf-dynamik .sf-wk-tafel .sf-wk-kicker span { color: var(--sf-on-dark); }
.sf-dynamik .sf-wk-tafel .sf-wk-titel { font-size: var(--sf-hb-h2); color: var(--sf-on-dark); }
.sf-dynamik .sf-wk-tafel .sf-wk-titel span { color: var(--sf-on-dark-soft); }
.sf-dynamik .sf-wk-tafel .sf-wk-wann { padding: var(--sf-hm-s2) 0; border-top: 1px solid var(--sf-on-dark-muted); border-bottom: 1px solid var(--sf-on-dark-muted); color: var(--sf-on-dark); }
.sf-dynamik .sf-wk-tafel .sf-wk-tv, .sf-dynamik .sf-wk-tafel .sf-wk-danach, .sf-dynamik .sf-wk-tafel .sf-wk-podest small { color: var(--sf-on-dark-soft); }
.sf-dynamik .sf-wk-tafel .sf-wk-tv span { color: var(--sf-on-dark-muted); }
.sf-dynamik .sf-wk-tafel .sf-wk-podest li > span { color: var(--sf-on-dark); }
.sf-dynamik .sf-wk-tafel .sf-wb-countdown > span:not(.sf-wb-countdown-bis) { background: var(--sf-section-accent); color: var(--sf-on-dark); }
.sf-dynamik .sf-wk-tafel .sf-wk-weg.sf-wk-weg { display: inline-flex; align-items: center; align-self: flex-start; min-height: var(--sf-hb-knopf-hoehe); padding: 0 var(--sf-hm-s4); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-wk-tafel .sf-wk-weg.sf-wk-weg:hover { background: var(--sf-surface); }
.sf-dynamik .sf-wk-tafel a:focus-visible { outline-color: var(--sf-on-dark); }
.sf-dynamik .sf-wk-sockel { margin: var(--sf-hm-s2) calc(-1 * var(--sf-hm-s5)) 0; padding: 0 var(--sf-hm-s5) var(--sf-hm-s3); background: var(--sf-white); border: 1px solid var(--sf-line); border-top: 0; color: var(--sf-ink); }
.sf-dynamik .sf-wk-sockel:empty { display: none; }
.sf-dynamik .sf-wk-sockel .sf-partnerfuss { margin: 0; border-top: 0; }
/* ergebnisse.css */
.sf-ergebnis { margin-block: 12px 4px; min-width: 0; font-size: var(--sf-size-14); line-height: 1.5; }
.sf-ergebnis h3 { margin: 0 0 8px; }
.sf-ergebnis-bild { margin: 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); background: var(--sf-erg-grund); color: var(--sf-erg-text); border-radius: 6px; overflow: hidden; }
.sf-ergebnis-bild svg { display: block; width: 100%; height: auto; align-self: center; }
.sf-ergebnis-legende { list-style: none; margin: 0; padding: 20px 16px 12px 0; display: grid; gap: 12px; align-content: center; }
.sf-ergebnis-legende li { display: grid; border-left: 3px solid var(--sf-erg-akzent); padding-left: 10px; min-width: 0; }
.sf-ergebnis-legende li:nth-child(2) { border-color: var(--sf-erg-linie-blau); }
.sf-ergebnis-legende li:nth-child(3) { border-color: var(--sf-erg-linie-orange); }
.sf-ergebnis-legende span { font-variant-numeric: tabular-nums; opacity: 0.85; }
.sf-ergebnis-bild figcaption { grid-column: 1/-1; padding: 12px 16px; border-top: 1px solid var(--sf-erg-trenner); font-size: var(--sf-size-12); line-height: 1.5; color: var(--sf-erg-text-leise); }
.sf-ergebnis-wege { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 12px; }
.sf-ergebnis-wege a { color: inherit; text-decoration: underline; text-underline-offset: 3px; padding-block: 6px; }
.sf-ergebnis-quelle { font-size: var(--sf-size-12); color: var(--sf-erg-muted); margin: 10px 0 0; }
.sf-ergebnis-offen { padding: 12px 14px; background: var(--sf-erg-flaeche); border-left: 3px solid var(--sf-erg-kante); margin: 0 0 10px; }
.sf-ergebnis-podest { list-style: none; padding: 0; margin: 10px 0; }
.sf-fp-podest .sf-ergebnis { font-weight: 400; }
.sf-saison-geschichte { margin-block: 24px; }
.sf-saison-bahn { border-top: 1px solid var(--sf-erg-linie); padding-block: 14px; }
.sf-saison-bahn h3 { margin: 0 0 8px; }
.sf-saison-stand { display: flex; flex-wrap: wrap; gap: 10px 18px; margin: 8px 0; }
.sf-saison-stand strong { font-variant-numeric: tabular-nums; }
.sf-saison-verlauf { padding-left: 20px; font-size: var(--sf-size-13); }
.sf-saison-heim { font-size: var(--sf-size-13); }
.sf-saison-heim a { color: inherit; }
.sf-geist-hinweis { border-left: 3px solid var(--sf-erg-kante); padding: 10px 14px; margin: 12px 0; font-size: var(--sf-size-14); }
@media (max-width: 560px) {
.sf-ergebnis-bild { grid-template-columns: 1fr; }
.sf-ergebnis-bild svg { max-height: 240px; }
.sf-ergebnis-legende { padding: 0 16px 16px; gap: 10px; }
.sf-ergebnis-wege { display: grid; gap: 0; }
.sf-ergebnis-wege a { padding-block: 9px; }
.sf-ergebnis-bild figcaption { padding: 12px 16px; }
.sf-ergebnis { font-size: var(--sf-size-13); }
}
@media (max-width: 560px) {
.sf-dynamik .sf-fp-podest { grid-column: 1/-1; }
.sf-dynamik .sf-fp-podest .sf-ergebnis-podest { padding-left: 0; }
.sf-dynamik .sf-fp-podest .sf-ergebnis-legende { padding: 0 16px 16px; }
}
.sf-saison-bahn > summary { cursor: pointer; padding: 8px 0; list-style: revert; }
.sf-saison-bahn > summary strong, .sf-saison-bahn > summary span { display: block; }
.sf-saison-bahn > summary span { font-size: var(--sf-size-14); margin-top: 5px; }
/* entdecken.css */
.sf-we.sf-we { container: sf-we / inline-size; --sf-we-tag: 26px; --sf-we-titel: clamp(26px, 3vw, 34px); --sf-we-name: 18px; --sf-we-station: 20px; --sf-we-spiel: clamp(32px, 4vw, 44px); --sf-we-kachel: 24px; --sf-we-profi: 26px; --sf-we-marke: 17px; --sf-we-mono: 20px; --sf-we-weg: 19px; --sf-we-nacht: #0f1c24; --sf-we-hang: #16303d; --sf-we-tor-blau: #2f6fb0; --sf-we-hell-akzent: #f3a4b1; --sf-we-hell-stark: rgba(255, 255, 255, 0.14); --sf-we-grund: #f2f3f1; }
.sf-embed-root .sf-we.sf-we { --sf-we-tag: 22px; --sf-we-titel: 24px; --sf-we-spiel: 30px; --sf-we-kachel: 20px; --sf-we-profi: 22px; }
.sf-we .sf-we-abschnitt { display: grid; gap: var(--sf-hm-s5); min-width: 0; scroll-margin-top: var(--sf-hm-s7); }
.sf-we .sf-we-abschnitt > .sf-hb-kopf.sf-hb-kopf, .sf-we .sf-we-linie-block > .sf-hb-kopf.sf-hb-kopf, .sf-we .sf-we-marken-block > .sf-hb-kopf.sf-hb-kopf { margin: 0; }
.sf-we .sf-we-getoent { padding: var(--sf-hm-s6) var(--sf-hm-s4); background: var(--sf-we-grund); }
.sf-we .sf-we-weiter { font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; line-height: 1.3; color: var(--sf-sport); text-decoration: none; }
.sf-we .sf-we-weiter::after { content: " →"; }
.sf-we .sf-we-wege-zeile { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s2) var(--sf-hm-s4); margin: 0; font-size: var(--sf-hb-text-klein); color: var(--sf-text); }
.sf-we .sf-we-fein { margin: 0; font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-we .sf-we-kopf-text { display: grid; gap: var(--sf-hm-s2); }
.sf-we .sf-we-kicker { margin: 0; font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-sport); }
.sf-we .sf-we-tage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); }
@container sf-we (min-width: 700px) {
.sf-we .sf-we-tage { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
.sf-we .sf-we-tag { display: grid; align-content: start; gap: var(--sf-hm-s3); min-width: 0; padding: var(--sf-hm-s5); border: 1px solid var(--sf-line); border-top: 4px solid var(--sf-ink); background: var(--sf-white); }
.sf-we .sf-we-tag[data-sf-vorbei] { border-top-color: var(--sf-line-stark); }
.sf-we .sf-we-tag-wann { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sf-hm-s2) var(--sf-hm-s3); margin: 0; }
.sf-we .sf-we-tag-wann b { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-we-tag); font-weight: 800; line-height: 1; color: var(--sf-ink); }
.sf-we .sf-we-marke { padding: var(--sf-hm-s1) var(--sf-hm-s2); background: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--sf-white); }
.sf-we .sf-we-tag[data-sf-vorbei] .sf-we-marke { border: 1px solid var(--sf-line-stark); background: var(--sf-white); color: var(--sf-ink); }
.sf-we .sf-we-tag-rennen { display: grid; gap: var(--sf-hm-s1); scroll-margin-top: var(--sf-hm-s7); }
.sf-we .sf-we-tag-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: 800; line-height: 1.1; color: var(--sf-ink); }
.sf-we .sf-we-tag-titel span { font-weight: 600; color: var(--sf-muted); }
.sf-we .sf-we-zeit { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; line-height: 1.3; color: var(--sf-ink); }
.sf-we .sf-we-satz { margin: 0; font-size: var(--sf-hb-text); line-height: 1.45; color: var(--sf-text); }
.sf-we .sf-we-tv { margin: 0; font-size: var(--sf-hb-text-klein); line-height: 1.45; color: var(--sf-text); }
.sf-we .sf-we-tv b { color: var(--sf-ink); }
.sf-we .sf-we-linie-block { display: grid; gap: var(--sf-hm-s4); margin-top: var(--sf-hm-s4); }
.sf-we .sf-we-linie { position: relative; display: grid; gap: var(--sf-hm-s4); margin: 0; padding: 0 0 0 var(--sf-hm-s6); list-style: none; }
.sf-we .sf-we-linie::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 7px; width: 2px; background: var(--sf-ink); }
.sf-we .sf-we-station { position: relative; min-width: 0; }
.sf-we .sf-we-station::before { content: ""; position: absolute; top: 3px; left: calc(var(--sf-hm-s6) * -1); box-sizing: border-box; width: 16px; height: 16px; border: 2px solid var(--sf-ink); border-radius: 50%; background: var(--sf-white); }
.sf-we .sf-we-station[data-sf-gross]::before { background: var(--sf-ink); }
.sf-we .sf-we-station[data-sf-jetzt]::before { border-color: var(--sf-sport); background: var(--sf-sport); box-shadow: 0 0 0 4px var(--sf-sport-tint); }
.sf-we .sf-we-station > a, .sf-we .sf-we-station > span { display: grid; gap: 2px; color: var(--sf-text); text-decoration: none; }
.sf-we .sf-we-station small { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-we .sf-we-station b { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-we-station); font-weight: 800; line-height: 1.05; color: var(--sf-ink); }
.sf-we .sf-we-station span span { font-size: var(--sf-hb-fein); line-height: 1.35; }
.sf-we .sf-we-station > a:hover b { color: var(--sf-sport); }
@container sf-we (min-width: 760px) {
.sf-we .sf-we-linie { grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 0; padding: var(--sf-hm-s7) 0 0; }
.sf-we .sf-we-linie::before { top: 28px; right: 0; bottom: auto; left: 0; width: auto; height: 2px; }
.sf-we .sf-we-station { padding: var(--sf-hm-s3) var(--sf-hm-s2) 0 0; }
.sf-we .sf-we-station::before { top: -27px; left: 0; }
}
.sf-we .sf-we-rueckblick { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); padding: var(--sf-hm-s5); background: var(--sf-ink); color: var(--sf-hb-hell-text); }
@container sf-we (min-width: 760px) {
.sf-we .sf-we-rueckblick { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; }
}
.sf-we .sf-we-rueckblick-text { min-width: 0; }
.sf-we .sf-we-rueckblick .sf-hb-kapitel.sf-hb-kapitel { color: var(--sf-hb-hell-text); }
.sf-we .sf-we-rueckblick .sf-hb-kapitel.sf-hb-kapitel em { color: var(--sf-we-hell-akzent); }
.sf-we .sf-we-rueckblick-titel { margin: var(--sf-hm-s2) 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-we-titel); font-weight: 800; line-height: 1.05; text-wrap: balance; color: var(--sf-white); }
.sf-we .sf-we-rueckblick p { margin: 0 0 var(--sf-hm-s3); }
.sf-we .sf-we-rueckblick .sf-we-weiter { color: var(--sf-white); }
.sf-we .sf-we-podest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--sf-hm-s2); margin: 0; padding: 0; list-style: none; }
.sf-we .sf-we-podest li { display: grid; align-content: start; gap: 2px; min-width: 0; min-height: 100px; padding: var(--sf-hm-s3); border-top: 3px solid var(--sf-white); background: var(--sf-hb-hell-flaeche); }
.sf-we .sf-we-podest li[data-sf-rang="1"] { min-height: 170px; border-top-color: var(--sf-sport); background: var(--sf-we-hell-stark); }
.sf-we .sf-we-podest li[data-sf-rang="2"] { min-height: 130px; }
.sf-we .sf-we-podest em { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl); font-style: normal; font-weight: 800; line-height: 1; color: var(--sf-white); }
.sf-we .sf-we-podest b { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-we-name); font-weight: 800; line-height: 1.05; overflow-wrap: anywhere; color: var(--sf-white); }
.sf-we .sf-we-podest span { font-size: var(--sf-hb-fein); }
.sf-we .sf-we-folgt { display: grid; gap: var(--sf-hm-s2); margin: 0; padding: var(--sf-hm-s4); border: 1px dashed var(--sf-line-stark); list-style: none; font-size: var(--sf-hb-text-klein); line-height: 1.45; color: var(--sf-text); }
.sf-we .sf-we-folgt b { color: var(--sf-ink); }
.sf-we .sf-we-erleben { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); }
@container sf-we (min-width: 860px) {
.sf-we .sf-we-erleben[data-sf-storys="1"], .sf-we .sf-we-erleben[data-sf-storys="2"] { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}
.sf-we .sf-we-spiel { position: relative; isolation: isolate; display: grid; align-content: end; gap: var(--sf-hm-s2); min-width: 0; min-height: 340px; padding: var(--sf-hm-s5); overflow: hidden; background: var(--sf-we-nacht); color: var(--sf-hb-hell-text); text-decoration: none; }
.sf-we .sf-we-spiel-grafik { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; }
.sf-we .sf-we-spiel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--sf-hb-schleier-tief) 0%, var(--sf-hb-schleier-null) 72%); }
.sf-we .sf-we-spiel-hang { fill: var(--sf-we-hang); }
.sf-we .sf-we-spiel-spur { stroke: var(--sf-hb-hell-spur); stroke-width: 1.2; }
.sf-we .sf-we-tor { stroke: var(--sf-sport); stroke-width: 5; stroke-linecap: round; }
.sf-we .sf-we-tor--blau { stroke: var(--sf-we-tor-blau); }
.sf-we .sf-we-spiel-kapitel, .sf-we .sf-we-kachel-kapitel, .sf-we .sf-we-profi-kapitel { font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; line-height: 1.3; letter-spacing: 0.1em; text-transform: uppercase; }
.sf-we .sf-we-spiel-kapitel { color: var(--sf-we-hell-akzent); }
.sf-we .sf-we-spiel-titel { font-family: var(--sf-hb-seitentitel-schrift, var(--sf-display)); font-size: var(--sf-we-spiel); font-weight: 800; line-height: 0.95; color: var(--sf-white); }
.sf-we .sf-we-spiel-text { max-width: 44ch; font-size: var(--sf-hb-text); line-height: 1.45; }
.sf-we .sf-we-spiel-knopf { display: inline-flex; align-items: center; justify-self: start; min-height: var(--sf-hb-knopf-hoehe); margin-top: var(--sf-hm-s2); padding: 0 var(--sf-hm-s4); background: var(--sf-white); font-family: var(--sf-body); font-size: var(--sf-hb-steuer-schrift); font-weight: 700; color: var(--sf-ink); }
.sf-we .sf-we-spiel-knopf::after { content: " →"; white-space: pre; }
.sf-we .sf-we-storys { display: grid; gap: var(--sf-hm-s3); }
.sf-we .sf-we-kachel { position: relative; isolation: isolate; display: grid; align-content: end; gap: 2px; min-width: 0; min-height: 180px; padding: var(--sf-hm-s4); overflow: hidden; background: var(--sf-ink); color: var(--sf-hb-hell-text); text-decoration: none; }
.sf-we .sf-we-kachel img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sf-we .sf-we-kachel::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--sf-hb-schleier-unten) 0%, var(--sf-hb-schleier-null) 62%); }
.sf-we .sf-we-kachel:hover img { transform: scale(1.04); }
.sf-we .sf-we-nachweis { position: absolute; top: var(--sf-hm-s1); right: var(--sf-hm-s2); max-width: 70%; font-size: var(--sf-hb-mini); line-height: 1.2; text-align: right; color: var(--sf-hb-hell-text); text-shadow: var(--sf-hm-text-schatten); }
.sf-we .sf-we-kachel-titel { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-we-kachel); font-weight: 800; line-height: 1.02; text-wrap: balance; color: var(--sf-white); }
.sf-we .sf-we-kachel-text { font-size: var(--sf-hb-text-klein); line-height: 1.35; }
.sf-we .sf-we-athleten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s3); }
@container sf-we (min-width: 900px) {
.sf-we .sf-we-athleten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-we .sf-we-kachel[data-sf-art="athlet"] { min-height: 0; aspect-ratio: 3 / 4; padding: var(--sf-hm-s3); }
.sf-we .sf-we-kachel[data-sf-art="athlet"] .sf-we-nachweis { left: var(--sf-hm-s2); max-width: none; }
@container sf-we (max-width: 520px) {
.sf-we .sf-we-kachel[data-sf-art="athlet"] .sf-we-kachel-titel { font-size: var(--sf-hb-h3); }
.sf-we .sf-we-kachel[data-sf-art="athlet"] .sf-we-kachel-text { font-size: var(--sf-hb-fein); }
}
.sf-we .sf-we-orte { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); }
.sf-we .sf-we-orte .sf-we-kachel { min-height: 0; aspect-ratio: 4 / 3; }
.sf-we .sf-we-datum { display: inline-block; padding: 2px var(--sf-hm-s2); background: var(--sf-white); font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--sf-ink); }
@container sf-we (min-width: 480px) {
.sf-we .sf-we-orte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-we .sf-we-orte .sf-we-kachel:last-child:nth-child(odd) { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@container sf-we (min-width: 900px) {
.sf-we .sf-we-orte { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sf-we .sf-we-orte .sf-we-kachel, .sf-we .sf-we-orte .sf-we-kachel:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 4 / 3; }
.sf-we .sf-we-orte .sf-we-kachel:nth-child(-n + 2), .sf-we .sf-we-orte[data-sf-anzahl="4"] .sf-we-kachel, .sf-we .sf-we-orte[data-sf-anzahl="2"] .sf-we-kachel { grid-column: span 3; aspect-ratio: 16 / 9; }
.sf-we .sf-we-orte[data-sf-anzahl="3"] .sf-we-kachel { grid-column: span 2; aspect-ratio: 4 / 3; }
.sf-we .sf-we-orte[data-sf-anzahl="1"] .sf-we-kachel { grid-column: 1 / -1; aspect-ratio: 21 / 9; }
}
.sf-we .sf-we-profis { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); }
@container sf-we (min-width: 700px) {
.sf-we .sf-we-profis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sf-we (min-width: 1100px) {
.sf-we .sf-we-profis { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; }
}
.sf-we .sf-we-profi { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--sf-hm-s2); min-width: 0; padding: var(--sf-hm-s5); border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-text); text-decoration: none; }
.sf-we .sf-we-profi:hover { border-color: var(--sf-ink); }
.sf-we .sf-we-profi-kapitel { color: var(--sf-sport); }
.sf-we .sf-we-profi-titel { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-we-profi); font-weight: 800; line-height: 1.02; color: var(--sf-ink); }
.sf-we .sf-we-profi-text { font-size: var(--sf-hb-text-klein); line-height: 1.45; }
.sf-we .sf-we-profi[data-sf-dunkel] { border-color: var(--sf-ink); background: var(--sf-ink); color: var(--sf-hb-hell-text); }
.sf-we .sf-we-profi[data-sf-dunkel] .sf-we-profi-kapitel { color: var(--sf-we-hell-akzent); }
.sf-we .sf-we-profi[data-sf-dunkel] .sf-we-profi-titel, .sf-we .sf-we-profi[data-sf-dunkel] .sf-we-weiter { color: var(--sf-white); }
.sf-we .sf-we-marken { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-we .sf-we-marken a { display: inline-flex; align-items: center; min-height: var(--sf-hb-steuer-hoehe); padding: 0 var(--sf-hm-s4); border: 1px solid var(--sf-line-stark); background: var(--sf-white); font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-we-marke); font-weight: 800; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none; color: var(--sf-ink); }
.sf-we .sf-we-marken a:hover { background: var(--sf-ink); color: var(--sf-white); }
.sf-we .sf-we-marken-block { display: grid; gap: var(--sf-hm-s3); margin-top: var(--sf-hm-s4); }
.sf-we .sf-we-programm { margin: 0; padding: 0; border-top: 2px solid var(--sf-ink); list-style: none; }
.sf-we .sf-we-lauf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-hm-s1) var(--sf-hm-s4); padding: var(--sf-hm-s4) 0; border-bottom: 1px solid var(--sf-line); }
.sf-we .sf-we-lauf-tag { grid-column: 1 / -1; font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: 800; line-height: 1; color: var(--sf-ink); }
.sf-we .sf-we-lauf-text { display: grid; gap: 2px; min-width: 0; font-size: var(--sf-hb-text-klein); line-height: 1.45; color: var(--sf-text); }
.sf-we .sf-we-lauf-text b { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: 800; line-height: 1.1; color: var(--sf-ink); }
@container sf-we (min-width: 560px) {
.sf-we .sf-we-lauf { grid-template-columns: 140px minmax(0, 1fr) auto; }
.sf-we .sf-we-lauf-tag { grid-column: auto; }
}
.sf-we .sf-we-strecke { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); }
@container sf-we (min-width: 860px) {
.sf-we .sf-we-strecke { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: center; }
}
.sf-we .sf-we-bild { position: relative; margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sf-ink); }
.sf-we .sf-we-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-we .sf-we-bild figcaption { position: absolute; right: var(--sf-hm-s2); bottom: var(--sf-hm-s1); left: var(--sf-hm-s2); font-size: var(--sf-hb-mini); line-height: 1.25; text-align: right; color: var(--sf-white); text-shadow: var(--sf-hm-text-schatten); }
.sf-we .sf-we-strecke-text { display: grid; align-content: center; gap: var(--sf-hm-s3); min-width: 0; }
.sf-we .sf-we-strecke-text p { margin: 0; font-size: var(--sf-hb-text); line-height: 1.5; }
.sf-we .sf-we-wege { display: grid; gap: var(--sf-hm-s2); }
.sf-we .sf-we-wege a { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-hm-s3); min-height: 56px; padding: var(--sf-hm-s3) var(--sf-hm-s4); border: 1px solid var(--sf-line); background: var(--sf-white); text-decoration: none; color: var(--sf-ink); }
.sf-we .sf-we-wege a:hover { border-color: var(--sf-ink); }
.sf-we .sf-we-wege a::after { content: "→"; font-weight: 700; color: var(--sf-sport); }
.sf-we .sf-we-wege a b { display: block; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-we-weg); font-weight: 800; line-height: 1.1; }
.sf-we .sf-we-wege a small { display: block; font-size: var(--sf-hb-fein); line-height: 1.35; color: var(--sf-muted); }
.sf-we .sf-we-favoriten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); }
@container sf-we (min-width: 480px) {
.sf-we .sf-we-favoriten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sf-we (min-width: 900px) {
.sf-we .sf-we-favoriten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-we .sf-we-fav-gruppe { display: grid; gap: var(--sf-hm-s3); }
.sf-we .sf-we-fav-rennen { margin: 0; font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-ink); }
.sf-we .sf-we-fav { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--sf-hm-s2); min-width: 0; padding: var(--sf-hm-s4); border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-we .sf-we-fav-kopf { display: flex; align-items: center; gap: var(--sf-hm-s3); min-width: 0; }
.sf-we .sf-we-mono { flex: none; display: grid; place-items: center; width: 52px; height: 52px; background: var(--sf-ink); font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-we-mono); font-weight: 800; color: var(--sf-white); }
.sf-we .sf-we-fav[data-sf-titel] .sf-we-mono { background: var(--sf-sport); }
.sf-we .sf-we-fav-kopf b { display: block; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-we-name); font-weight: 800; line-height: 1.1; color: var(--sf-ink); }
.sf-we .sf-we-fav-kopf small { display: block; font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.04em; color: var(--sf-muted); }
.sf-we .sf-we-fav p { margin: 0; font-size: var(--sf-hb-text-klein); line-height: 1.4; color: var(--sf-ink); }
.sf-we .sf-we-fav .sf-we-faehrt { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-we .sf-we-faehrt a { font-weight: 700; text-decoration: none; color: var(--sf-sport); }
.sf-we .sf-we-deutsche { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s2); margin: 0; }
.sf-we .sf-we-deutsche b { margin-right: var(--sf-hm-s2); font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-we-weg); font-weight: 800; color: var(--sf-ink); }
.sf-we .sf-we-deutsche span { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--sf-hm-s3); border: 1px solid var(--sf-line); background: var(--sf-white); font-size: var(--sf-hb-text-klein); color: var(--sf-ink); }
.sf-we .sf-we-reise { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--sf-hm-s5); }
@container sf-we (min-width: 760px) {
.sf-we .sf-we-reise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-we .sf-we-reise[data-sf-bild="ohne"] { grid-template-columns: minmax(0, 1fr); max-width: 72ch; }
.sf-we .sf-we-reise .sf-we-bild { aspect-ratio: 4 / 3; }
.sf-we .sf-we-reise-titel { margin: var(--sf-hm-s2) 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h2); font-weight: 800; line-height: 1.05; color: var(--sf-ink); }
.sf-we .sf-we-reise p { margin: 0 0 var(--sf-hm-s3); font-size: var(--sf-hb-text); line-height: 1.5; }
@media (prefers-reduced-motion: reduce) {
.sf-we .sf-we-kachel img { transition: none; }
}
/* bausteine.css */
.sf-hb-kapitel.sf-hb-kapitel { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s1) var(--sf-hm-s2); margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-muted); }
.sf-hb-kapitel.sf-hb-kapitel em { font-style: normal; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-hb-kapitel--karte.sf-hb-kapitel--karte { display: block; }
.sf-hb-kopf.sf-hb-kopf { display: grid; gap: var(--sf-hm-s2); margin: 0 0 var(--sf-hm-kopf-abstand); }
.sf-hb-kopf-zeile.sf-hb-kopf-zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sf-hm-s2) var(--sf-hm-s5); }
.sf-hb-h2.sf-hb-h2, .sf-hb-h3.sf-hb-h3 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); letter-spacing: 0; text-transform: none; color: var(--sf-ink); }
.sf-hb-h2.sf-hb-h2 { font-size: var(--sf-hb-h2); }
.sf-hb-h3.sf-hb-h3 { font-size: var(--sf-hb-h3); }
.sf-hb-unterzeile.sf-hb-unterzeile { margin: 0; max-width: 62ch; font-family: var(--sf-body); font-size: var(--sf-hb-text); line-height: 1.45; color: var(--sf-text); }
.sf-hb-live.sf-hb-live { display: flex; align-items: center; gap: var(--sf-hm-s2); margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); line-height: 1.35; color: var(--sf-muted); }
.sf-hb-live-punkt.sf-hb-live-punkt { flex: 0 0 auto; display: inline-block; width: var(--sf-hb-live-punkt); height: var(--sf-hb-live-punkt); border-radius: 50%; background: var(--sf-hm-live-gruen); box-shadow: 0 0 0 3px var(--sf-hm-live-ring); }
.sf-hb-live.sf-hb-live[data-sf-alt] .sf-hb-live-punkt { background: var(--sf-caution); box-shadow: none; }
.sf-hb-live.sf-hb-live[data-sf-alt] { color: var(--sf-caution); }
.sf-hb-live-quelle.sf-hb-live-quelle { color: var(--sf-muted); }
.sf-hb-auswahl.sf-hb-auswahl { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-hb-auswahl--reiter.sf-hb-auswahl--reiter { gap: 0; width: fit-content; max-width: 100%; border: 1px solid var(--sf-ink); }
.sf-hb-wahl.sf-hb-wahl { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sf-hm-s2); min-height: var(--sf-hb-steuer-hoehe); margin: 0; padding: 0 var(--sf-hm-s4); border: 1px solid var(--sf-line-stark); border-radius: var(--sf-hb-ecke); background: var(--sf-white); font-family: var(--sf-body); font-size: var(--sf-hb-steuer-schrift); font-weight: 700; line-height: 1.2; color: var(--sf-ink); text-decoration: none; white-space: nowrap; cursor: pointer; }
.sf-hb-wahl.sf-hb-wahl small { font-size: var(--sf-hb-fein); font-weight: 400; color: var(--sf-muted); }
.sf-hb-auswahl--reiter.sf-hb-auswahl--reiter .sf-hb-wahl { border: 0; }
.sf-hb-wahl.sf-hb-wahl:hover { border-color: var(--sf-ink); }
.sf-hb-wahl.sf-hb-wahl[aria-pressed="true"], .sf-hb-wahl.sf-hb-wahl[aria-current] { border-color: var(--sf-ink); background: var(--sf-ink); color: var(--sf-white); }
.sf-hb-wahl.sf-hb-wahl[aria-pressed="true"] small, .sf-hb-wahl.sf-hb-wahl[aria-current] small { color: var(--sf-white); }
.sf-hb-frage.sf-hb-frage { display: grid; gap: var(--sf-hm-s2); }
.sf-hb-frage-text.sf-hb-frage-text { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-ink); }
.sf-hb-werte.sf-hb-werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sf-hm-s4) var(--sf-hm-s5); margin: 0; }
.sf-hb-wert.sf-hb-wert { display: flex; flex-direction: column-reverse; gap: var(--sf-hm-s1); margin: 0; padding-top: var(--sf-hm-s3); border-top: 1px solid var(--sf-line); }
.sf-hb-wert.sf-hb-wert dt { display: flex; align-items: center; gap: var(--sf-hm-s2); margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); line-height: 1.35; color: var(--sf-muted); }
.sf-hb-wert.sf-hb-wert dd { display: flex; align-items: baseline; gap: var(--sf-hm-s1); margin: 0; }
.sf-hb-wert.sf-hb-wert strong { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl); font-weight: var(--sf-hb-zahl-gewicht, var(--sf-hb-titel-gewicht)); line-height: 1; color: var(--sf-ink); }
.sf-hb-wert--klein.sf-hb-wert--klein strong { font-size: var(--sf-hb-zahl-klein); }
.sf-hb-einheit.sf-hb-einheit { font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-muted); }
.sf-hb-karten.sf-hb-karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-hb-karten--wischen.sf-hb-karten--wischen { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 80%); overflow-x: auto; align-items: start; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--sf-hm-s2); }
.sf-hb-karten--wischen.sf-hb-karten--wischen > * { scroll-snap-align: start; }
@media (min-width: 760px) {
.sf-hb-karten--wischen.sf-hb-karten--wischen { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; align-items: stretch; overflow-x: visible; }
}
.sf-hb-karte.sf-hb-karte { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-hb-karte.sf-hb-karte:hover { border-color: var(--sf-ink); }
.sf-hb-karte-bild.sf-hb-karte-bild { position: relative; margin: 0; aspect-ratio: var(--sf-hb-bild); overflow: hidden; background: var(--sf-surface); }
.sf-hb-karte-bild.sf-hb-karte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-hb-karte-bild.sf-hb-karte-bild figcaption { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 2px var(--sf-hm-s2); overflow: hidden; background: var(--sf-hm-hinweis-grund); font-family: var(--sf-body); font-size: var(--sf-hb-mini); line-height: 1.4; color: var(--sf-white); text-overflow: ellipsis; white-space: nowrap; }
.sf-hb-karte-text.sf-hb-karte-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sf-hm-s2); padding: var(--sf-hm-s4); }
.sf-hb-karte-titel.sf-hb-karte-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); text-transform: none; color: var(--sf-ink); }
.sf-hb-karte-beschreibung.sf-hb-karte-beschreibung { font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); line-height: 1.45; color: var(--sf-text); }
.sf-hb-karte-live.sf-hb-karte-live { display: flex; align-items: center; gap: var(--sf-hm-s2); font-family: var(--sf-body); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-hb-karte.sf-hb-karte .sf-hb-weiter { margin-top: auto; margin-bottom: 0; padding-block: 0; }
.sf-hb-rahmen.sf-hb-rahmen { display: grid; gap: var(--sf-hm-s2); margin: 0; }
.sf-hb-rahmen-flaeche.sf-hb-rahmen-flaeche { position: relative; overflow: hidden; border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-surface); }
.sf-hb-rahmen--dunkel.sf-hb-rahmen--dunkel .sf-hb-rahmen-flaeche { border-color: var(--sf-ink); background: var(--sf-ink); }
.sf-hb-rahmen.sf-hb-rahmen figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sf-hm-s1) var(--sf-hm-s4); font-family: var(--sf-body); font-size: var(--sf-hb-mini); line-height: 1.4; color: var(--sf-muted); }
.sf-hb-rahmen.sf-hb-rahmen figcaption strong { font-size: var(--sf-hb-fein); color: var(--sf-ink); }
.sf-hb-knopf.sf-hb-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-hm-s2); min-height: var(--sf-hb-knopf-hoehe); margin: 0; padding: 0 var(--sf-hm-s5); border: 1px solid var(--sf-section-accent, var(--sf-travel)); border-radius: var(--sf-hb-ecke); background: var(--sf-section-accent, var(--sf-travel)); font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; line-height: 1.2; color: var(--sf-white); text-decoration: none; cursor: pointer; }
.sf-hb-knopf.sf-hb-knopf::after, .sf-hb-weiter.sf-hb-weiter::after { content: "→"; }
.sf-hb-knopf.sf-hb-knopf[data-sf-extern]::after, .sf-hb-weiter.sf-hb-weiter[data-sf-extern]::after { content: "↗"; }
.sf-hb-knopf--zweit.sf-hb-knopf--zweit { border-color: var(--sf-ink); background: var(--sf-white); color: var(--sf-ink); }
.sf-hb-knopf--hell.sf-hb-knopf--hell { border-color: var(--sf-white); background: var(--sf-white); color: var(--sf-ink); }
.sf-hb-knopf.sf-hb-knopf:hover { filter: brightness(0.92); }
.sf-hb-weiter.sf-hb-weiter { display: inline-flex; align-items: baseline; gap: var(--sf-hm-s1); padding-block: var(--sf-hm-s4); margin-block: calc(-1 * var(--sf-hm-s4)); font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; line-height: 1.3; color: var(--sf-section-accent, var(--sf-travel)); text-decoration: none; }
.sf-hb-weiter.sf-hb-weiter:hover { text-decoration: underline; }
.sf-hb-praesentiert.sf-hb-praesentiert { display: inline-flex; flex-wrap: wrap; align-items: center; min-height: var(--sf-hb-knopf-hoehe); gap: var(--sf-hm-s2) var(--sf-hm-s3); margin: 0; font-family: var(--sf-body); color: var(--sf-muted); text-decoration: none; }
.sf-hb-praesentiert-label.sf-hb-praesentiert-label { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-hb-praesentiert.sf-hb-praesentiert strong { font-size: var(--sf-hb-text-klein); color: var(--sf-ink); }
.sf-hb-praesentiert.sf-hb-praesentiert img { display: block; width: auto; max-width: 120px; height: 28px; object-fit: contain; }
.sf-hb-praesentiert--hell.sf-hb-praesentiert--hell, .sf-hb-praesentiert--hell.sf-hb-praesentiert--hell strong { color: var(--sf-white); }
.sf-hb-pz.sf-hb-pz { display: inline-flex; align-items: center; vertical-align: middle; }
.sf-hb-pz-link.sf-hb-pz-link { display: inline-flex; align-items: center; gap: var(--sf-hm-s2); min-height: 32px; color: var(--sf-muted); text-decoration: none; }
.sf-hb-pz-link.sf-hb-pz-link:hover .sf-hb-pz-label { text-decoration: underline; }
.sf-hb-pz-label.sf-hb-pz-label { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.sf-hb-pz-link.sf-hb-pz-link img { display: block; width: auto; max-width: 96px; height: 20px; object-fit: contain; }
.sf-hb-pz-link.sf-hb-pz-link strong { font-size: var(--sf-hb-fein); color: var(--sf-ink); }
.sf-hb-pk-huelle.sf-hb-pk-huelle { display: flex; min-width: 0; list-style: none; }
.sf-hb-pk.sf-hb-pk { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sf-hm-s3); min-width: 0; padding: var(--sf-hm-s4); border: 1px solid var(--sf-line); border-top: 4px solid var(--sf-hb-pk-farbe, var(--sf-ink)); border-radius: var(--sf-hb-ecke); background: var(--sf-surface); color: var(--sf-ink); }
.sf-hb-pk-kopf.sf-hb-pk-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s1) var(--sf-hm-s2); }
.sf-hb-pk-logo.sf-hb-pk-logo { display: block; width: auto; max-width: 96px; height: 16px; padding: 3px 6px; box-sizing: content-box; background: var(--sf-hb-pk-farbe, var(--sf-ink)); object-fit: contain; }
.sf-hb-pk-label.sf-hb-pk-label { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-hb-pk-uhr.sf-hb-pk-uhr { margin-left: auto; font-size: var(--sf-hb-mini); font-weight: 700; color: var(--sf-ink); }
.sf-hb-pk-fassung.sf-hb-pk-fassung { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sf-hm-s3); }
.sf-hb-pk-fassung.sf-hb-pk-fassung[hidden] { display: none; }
.sf-hb-pk-bezug.sf-hb-pk-bezug { margin: 0; font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-hb-pk-titel.sf-hb-pk-titel { display: flex; flex-direction: column; gap: var(--sf-hm-s1); color: var(--sf-ink); text-decoration: none; }
.sf-hb-pk-titel.sf-hb-pk-titel small { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-hb-pk-titel.sf-hb-pk-titel strong { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); }
.sf-hb-pk-titel.sf-hb-pk-titel:hover strong { text-decoration: underline; }
.sf-hb-pk-text.sf-hb-pk-text { margin: 0; font-size: var(--sf-hb-fein); line-height: 1.5; color: var(--sf-text); }
.sf-hb-pk-produkte.sf-hb-pk-produkte { display: grid; gap: var(--sf-hm-s2); margin: 0; padding: 0; list-style: none; }
.sf-hb-pk-produkte.sf-hb-pk-produkte a { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: var(--sf-hm-s3); padding: var(--sf-hm-s2); border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-hb-pk-produkte.sf-hb-pk-produkte a:hover { border-color: var(--sf-ink); }
.sf-hb-pk-produkte.sf-hb-pk-produkte img { display: block; width: 72px; height: 72px; object-fit: contain; }
.sf-hb-pk-produkte.sf-hb-pk-produkte a > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-hb-pk-produkt.sf-hb-pk-produkt { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--sf-hb-fein); line-height: 1.35; }
.sf-hb-pk-preis.sf-hb-pk-preis { font-size: var(--sf-hb-fein); }
.sf-hb-pk-bild.sf-hb-pk-bild { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sf-white); }
.sf-hb-pk-bild.sf-hb-pk-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-hb-pk.sf-hb-pk .sf-hb-weiter { margin-top: auto; }
.sf-hb-muster.sf-hb-muster { display: grid; gap: var(--sf-hm-abschnitt); }
.sf-hb-muster-abschnitt.sf-hb-muster-abschnitt { display: grid; gap: var(--sf-hm-s4); }
.sf-hb-muster-flaeche.sf-hb-muster-flaeche { aspect-ratio: 16 / 9; }
.sf-hb-muster-knoepfe.sf-hb-muster-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s3) var(--sf-hm-s4); }
.sf-hb-anzeige.sf-hb-anzeige { display: flex; min-width: 0; }
.sf-hb-anzeige.sf-hb-anzeige > .sf-hb-karte { flex: 1 1 auto; }
.sf-hb-unterseiten.sf-hb-unterseiten { display: flex; flex-wrap: wrap; margin: 0 0 var(--sf-hm-s4); }
.sf-hb-unterseiten.sf-hb-unterseiten .sf-hb-unterseiten-ausruestung { border: 1px solid var(--sf-blue); border-radius: 0; background: var(--sf-blue); color: var(--sf-white); }
.sf-hb-unterseiten.sf-hb-unterseiten .sf-hb-unterseiten-ausruestung:hover { border-color: var(--sf-blue-hover); background: var(--sf-blue-hover); }
.sf-hb-bildkopf.sf-hb-bildkopf { container: sf-hb-bildkopf / inline-size; margin: 0 0 var(--sf-hm-s6); }
.sf-hb-bildkopf-buehne.sf-hb-bildkopf-buehne { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: var(--sf-hb-bildkopf-hoehe); overflow: hidden; background: var(--sf-hb-buehne-grund); color: var(--sf-white); }
.sf-hb-bildkopf-buehne.sf-hb-bildkopf-buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, var(--sf-hb-schleier-leicht) 0%, var(--sf-hb-schleier-null) 30%, var(--sf-hb-schleier-mitte) 60%, var(--sf-hb-schleier-tief) 100% ); }
.sf-hb-bildkopf-bild.sf-hb-bildkopf-bild { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 40%; }
.sf-hb-bildkopf-text.sf-hb-bildkopf-text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sf-hm-s2); width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--sf-hm-s7) var(--sf-hm-s4) var(--sf-hm-s6); box-sizing: border-box; }
.sf-hb-bildkopf-kicker.sf-hb-bildkopf-kicker { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 700; line-height: 1.3; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-white); }
.sf-hb-bildkopf-titel.sf-hb-bildkopf-titel { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); font-size: var(--sf-hb-bildkopf-titel); line-height: 0.92; color: var(--sf-white); text-wrap: balance; overflow-wrap: normal; hyphens: manual; }
.sf-hb-bildkopf-unter.sf-hb-bildkopf-unter { margin: 0; max-width: 36ch; font-family: var(--sf-body); font-size: var(--sf-hb-bildkopf-unter); font-weight: 500; line-height: 1.35; color: var(--sf-white); }
.sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--sf-hm-s2); width: 100%; max-width: 640px; margin: var(--sf-hm-s2) 0 0; padding: 0; list-style: none; }
.sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln li { margin: 0; padding: 0; }
.sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln a { display: flex; flex-direction: column; gap: var(--sf-hm-s1); height: 100%; padding: var(--sf-hm-s2) var(--sf-hm-s3); box-sizing: border-box; border: 1px solid var(--sf-hb-hell-spur); background: var(--sf-hb-hell-flaeche); backdrop-filter: blur(8px); font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 600; line-height: 1.25; color: var(--sf-white); text-decoration: none; }
.sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln a:hover { border-color: var(--sf-hb-hell-linie); }
.sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln b { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-bildkopf-kachel); font-weight: 800; line-height: 1; overflow-wrap: normal; hyphens: manual; text-wrap: balance; }
.sf-hb-bildkopf-knoepfe.sf-hb-bildkopf-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); margin-top: var(--sf-hm-s2); }
.sf-hb-bildkopf-knoepfe.sf-hb-bildkopf-knoepfe .sf-hb-knopf { padding: 0 var(--sf-hm-s4); }
.sf-hb-bildkopf-zweit.sf-hb-bildkopf-zweit .sf-hb-knopf.sf-hb-knopf { border-color: var(--sf-white); background: transparent; color: var(--sf-white); }
.sf-hb-bildkopf-oben.sf-hb-bildkopf-oben { position: absolute; top: var(--sf-hm-s3); right: var(--sf-hm-s3); z-index: 2; max-width: calc(100% - var(--sf-hm-s6)); }
.sf-hb-bildkopf-oben:empty, .sf-hb-bildkopf-oben > :empty { display: none; }
.sf-hb-bildkopf-nachweis.sf-hb-bildkopf-nachweis { position: absolute; right: 0; bottom: 0; z-index: 1; margin: 0; padding: var(--sf-hm-s1) var(--sf-hm-s2); font-family: var(--sf-body); font-size: var(--sf-hb-mini); line-height: 1.3; color: var(--sf-hb-hell-text); }
.sf-hb-bildkopf[data-sf-karten] .sf-hb-bildkopf-text { padding-bottom: var(--sf-hm-s4); }
.sf-hb-bildkopf-fuss.sf-hb-bildkopf-fuss { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sf-hm-s3); width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--sf-hm-s4) var(--sf-hm-s6); box-sizing: border-box; }
.sf-hb-bildkopf-karten.sf-hb-bildkopf-karten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s2); width: 100%; margin: 0; padding: 0; list-style: none; }
.sf-hb-bildkopf-karten.sf-hb-bildkopf-karten li { display: flex; margin: 0; padding: 0; }
.sf-hb-bildkopf-karten.sf-hb-bildkopf-karten a { display: flex; flex: 1 1 auto; align-items: center; gap: var(--sf-hm-s3); min-width: 0; padding: var(--sf-hm-s2); box-sizing: border-box; border: 1px solid var(--sf-hb-hell-spur); background: var(--sf-hb-bildkopf-karte-grund); backdrop-filter: blur(10px); color: var(--sf-white); text-decoration: none; }
.sf-hb-bildkopf-karten.sf-hb-bildkopf-karten a:hover { border-color: var(--sf-hb-hell-linie); background: var(--sf-hb-bildkopf-karte-grund-hover); }
.sf-hb-bildkopf-karte-bild.sf-hb-bildkopf-karte-bild { flex: 0 0 auto; display: block; width: var(--sf-hb-bildkopf-karte-bild); height: var(--sf-hb-bildkopf-karte-bild); overflow: hidden; background: var(--sf-hb-buehne-grund); }
.sf-hb-bildkopf-karte-bild[data-sf-produkt] { background: var(--sf-white); }
.sf-hb-bildkopf-karte-bild.sf-hb-bildkopf-karte-bild:empty { display: none; }
.sf-hb-bildkopf-karte-bild.sf-hb-bildkopf-karte-bild img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.sf-hb-bildkopf-karte-bild[data-sf-produkt] img { box-sizing: border-box; padding: var(--sf-hm-s1); object-fit: contain; }
.sf-hb-bildkopf-karte-text.sf-hb-bildkopf-karte-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sf-hm-s1); min-width: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 600; line-height: 1.3; color: var(--sf-hb-hell-text); }
.sf-hb-bildkopf-karte-text.sf-hb-bildkopf-karte-text b { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-bildkopf-karte); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.05; color: var(--sf-white); overflow-wrap: normal; hyphens: manual; text-wrap: balance; }
.sf-hb-bildkopf-karte-pfeil.sf-hb-bildkopf-karte-pfeil { flex: 0 0 auto; padding-right: var(--sf-hm-s2); font-family: var(--sf-body); font-size: var(--sf-hb-h3); font-weight: 700; line-height: 1; color: var(--sf-white); transition: transform 0.2s ease; }
.sf-hb-bildkopf-karte-pfeil.sf-hb-bildkopf-karte-pfeil::after { content: "→"; }
.sf-hb-bildkopf-karte-pfeil.sf-hb-bildkopf-karte-pfeil[data-sf-extern]::after { content: "↗"; }
.sf-hb-bildkopf-karten.sf-hb-bildkopf-karten a:hover .sf-hb-bildkopf-karte-pfeil { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
.sf-hb-bildkopf-karte-pfeil.sf-hb-bildkopf-karte-pfeil { transition: none; }
}
.sf-hb-bildkopf-wand.sf-hb-bildkopf-wand { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.sf-hb-bildkopf-wand.sf-hb-bildkopf-wand a { position: relative; display: block; overflow: hidden; color: var(--sf-white); text-decoration: none; }
.sf-hb-bildkopf-wand.sf-hb-bildkopf-wand img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.sf-hb-bildkopf-wand.sf-hb-bildkopf-wand span { position: absolute; top: var(--sf-hm-s2); left: var(--sf-hm-s2); z-index: 1; padding: var(--sf-hm-s1) var(--sf-hm-s2); background: var(--sf-hb-vermerk-grund); font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-hb-bildkopf-wand.sf-hb-bildkopf-wand b { display: block; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-text); letter-spacing: 0; text-transform: none; }
.sf-hb-bildkopf[data-sf-wand] .sf-hb-bildkopf-buehne::after, .sf-hb-bildkopf[data-sf-wand] .sf-hb-bildkopf-text { pointer-events: none; }
.sf-hb-bildkopf[data-sf-wand] .sf-hb-bildkopf-text a { pointer-events: auto; }
@container sf-hb-bildkopf (min-width: 760px) {
.sf-hb-bildkopf-wand.sf-hb-bildkopf-wand span { top: var(--sf-hm-s4); left: var(--sf-hm-s4); }
.sf-hb-bildkopf-wand.sf-hb-bildkopf-wand b { font-size: var(--sf-hb-h3); }
.sf-hb-bildkopf-buehne.sf-hb-bildkopf-buehne { min-height: var(--sf-hb-bildkopf-hoehe-breit); }
.sf-hb-bildkopf-text.sf-hb-bildkopf-text { gap: var(--sf-hm-s3); padding: var(--sf-hm-s7) var(--sf-hm-s6); }
.sf-hb-bildkopf-unter.sf-hb-bildkopf-unter { font-size: var(--sf-hb-bildkopf-unter-breit); }
.sf-hb-bildkopf-titel.sf-hb-bildkopf-titel { max-width: 10ch; }
.sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln { gap: var(--sf-hm-s3); }
.sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln a { padding: var(--sf-hm-s3) var(--sf-hm-s4); font-size: var(--sf-hb-fein); }
.sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln b { font-size: var(--sf-hb-bildkopf-kachel-breit); }
.sf-hb-bildkopf-knoepfe.sf-hb-bildkopf-knoepfe .sf-hb-knopf { padding: 0 var(--sf-hm-s5); }
.sf-hb-bildkopf[data-sf-karten] .sf-hb-bildkopf-text { padding-bottom: var(--sf-hm-s5); }
.sf-hb-bildkopf-fuss.sf-hb-bildkopf-fuss { gap: var(--sf-hm-s4); padding: 0 var(--sf-hm-s6) var(--sf-hm-s7); }
.sf-hb-bildkopf-karten.sf-hb-bildkopf-karten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-hm-s3); }
.sf-hb-bildkopf-karten.sf-hb-bildkopf-karten a { gap: var(--sf-hm-s4); padding: var(--sf-hm-s3); }
.sf-hb-bildkopf-karte-bild.sf-hb-bildkopf-karte-bild { width: var(--sf-hb-bildkopf-karte-bild-breit); height: var(--sf-hb-bildkopf-karte-bild-breit); }
.sf-hb-bildkopf-karte-text.sf-hb-bildkopf-karte-text b { font-size: var(--sf-hb-bildkopf-karte-breit); }
.sf-hb-bildkopf[data-sf-seite="rechts"] .sf-hb-bildkopf-text { align-items: flex-end; text-align: right; }
.sf-hb-bildkopf[data-sf-seite="rechts"] .sf-hb-bildkopf-kicker, .sf-hb-bildkopf[data-sf-seite="rechts"] .sf-hb-bildkopf-unter { max-width: 50%; }
.sf-hb-bildkopf[data-sf-seite="rechts"] .sf-hb-bildkopf-titel { max-width: 50%; font-size: var(--sf-hb-bildkopf-titel-halb); }
.sf-hb-bildkopf[data-sf-seite="rechts"] .sf-hb-bildkopf-kacheln b { font-size: var(--sf-hb-bildkopf-kachel-halb); }
.sf-hb-bildkopf[data-sf-seite="rechts"] .sf-hb-bildkopf-buehne::after { background: linear-gradient(to right, var(--sf-hb-schleier-null) 35%, var(--sf-hb-schleier-mitte) 70%), linear-gradient( to bottom, var(--sf-hb-schleier-leicht) 0%, var(--sf-hb-schleier-null) 30%, var(--sf-hb-schleier-mitte) 60%, var(--sf-hb-schleier-tief) 100% ); }
}
/* start.css */
.sf-hs-einstieg { margin-bottom: var(--sf-hm-abschnitt); }
.sf-hs-einstieg .sf-hb-bildkopf-titel.sf-hb-bildkopf-titel { max-width: 20ch; font-size: var(--sf-hs-einstieg-titel, 40px); line-height: 0.98; }
.sf-hs-einstieg .sf-hb-bildkopf-titel.sf-hb-bildkopf-titel, .sf-hs-einstieg .sf-hb-bildkopf-kicker.sf-hb-bildkopf-kicker { text-shadow: var(--sf-hm-text-schatten); }
.sf-hs-einstieg .sf-hb-bildkopf-unter.sf-hb-bildkopf-unter { max-width: 72ch; font-size: var(--sf-hb-fein); }
.sf-hs-heute-partner:empty { display: none; }
.sf-hs-einstieg .sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln { grid-auto-flow: row; max-width: none; gap: var(--sf-hm-s2); margin-top: var(--sf-hm-s3); }
.sf-hs-einstieg .sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln a { justify-content: center; gap: 2px; padding: var(--sf-hm-s3) var(--sf-hm-s4); font-size: var(--sf-hb-fein); font-weight: 600; }
.sf-hs-einstieg .sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln b { font-size: var(--sf-hs-einstieg-knopf, 22px); text-wrap: pretty; }
.sf-hs-einstieg .sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln li:first-child a { border-color: var(--sf-white); background: var(--sf-white); backdrop-filter: none; color: var(--sf-ink); }
.sf-hs-einstieg .sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln li:first-child span { color: var(--sf-muted); }
@container sf-hb-bildkopf (min-width: 760px) {
.sf-hs-einstieg .sf-hb-bildkopf-titel.sf-hb-bildkopf-titel { max-width: 28ch; }
.sf-hs-einstieg .sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); max-width: 960px; gap: var(--sf-hm-s3); }
.sf-hs-einstieg .sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln a { padding: var(--sf-hm-s4) var(--sf-hm-s5); font-size: var(--sf-hb-text-klein); }
.sf-hs-einstieg .sf-hb-bildkopf-kacheln.sf-hb-bildkopf-kacheln b { font-size: var(--sf-hs-einstieg-knopf-breit, 26px); }
}
.sf-hs-heute { container: sf-hs-heute / inline-size; margin: var(--sf-hm-s4) 0 var(--sf-hm-abschnitt); }
.sf-hs-heute-raster { display: grid; gap: var(--sf-hm-s4); }
.sf-hs-heute-lage, .sf-hs-heute-seite { display: grid; gap: var(--sf-hm-s3); align-content: start; min-width: 0; }
.sf-hs-heute-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s1) var(--sf-hm-s3); }
.sf-hs-heute-titel.sf-hs-heute-titel { display: inline-flex; align-items: center; gap: var(--sf-hm-s2); margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 800; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-ink); }
.sf-hs-heute-stand { margin: 0; font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-hs-heute-schlagzeile { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hs-schlagzeile); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; letter-spacing: 0; text-wrap: balance; color: var(--sf-ink); }
.sf-hs-heute-ziel { display: grid; gap: var(--sf-hm-s2); color: var(--sf-ink); text-decoration: none; }
.sf-hs-heute-ziel:hover .sf-hs-heute-schlagzeile { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }
.sf-hs-heute-ziel:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 4px; }
.sf-hs-heute-ziel-text { font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-travel); }
.sf-hs-heute-bild { position: relative; margin: 0; aspect-ratio: 3 / 1; overflow: hidden; border-radius: var(--sf-hb-ecke); background: var(--sf-hb-buehne-grund); }
.sf-hs-heute-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-hs-heute-livemarke { position: absolute; top: var(--sf-hm-s2); left: var(--sf-hm-s2); padding: 3px 6px; background: var(--sf-hm-live-gruen); color: var(--sf-white); font-size: var(--sf-hb-mini); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-hs-heute-vermerk { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 3px 6px; background: var(--sf-hb-vermerk-grund); color: var(--sf-hb-hell-text); font-size: var(--sf-hb-mini); line-height: 1.3; }
.sf-hs-heute-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-hs-heute-zahl { display: grid; gap: 2px; padding-top: var(--sf-hm-s2); border-top: 1px solid var(--sf-line); color: var(--sf-ink); text-decoration: none; }
.sf-hs-heute-zahl strong { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hs-zahl); font-weight: var(--sf-hb-zahl-gewicht, var(--sf-hb-titel-gewicht)); line-height: 1; }
.sf-hs-heute-zahl small { margin-left: 2px; font-size: 0.5em; }
.sf-hs-heute-zahl span { font-size: var(--sf-hb-mini); line-height: 1.3; color: var(--sf-muted); }
.sf-hs-heute-zahl:hover span { color: var(--sf-ink); text-decoration: underline; }
.sf-hs-heute-zwischen.sf-hs-heute-zwischen { margin: 0 0 calc(var(--sf-hm-s1) * -1); font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 800; line-height: 1.2; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-ink); }
.sf-hs-heute-wege + .sf-hs-heute-zwischen, .sf-hs-heute-zahlen + .sf-hs-heute-zwischen { margin-top: var(--sf-hm-s3); }
.sf-hs-heute-wege { display: grid; margin: 0; padding: 0; list-style: none; }
.sf-hs-heute-weg { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--sf-hm-s3); align-items: center; padding: 6px 0; border-top: 1px solid var(--sf-line); color: var(--sf-ink); text-decoration: none; }
.sf-hs-heute-weg:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }
.sf-hs-heute-weg-bild { position: relative; width: 64px; height: 52px; overflow: hidden; background: var(--sf-surface); }
.sf-hs-heute-weg-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-hs-heute-weg-bild[data-sf-produkt] { background: var(--sf-white); }
.sf-hs-heute-weg-bild[data-sf-produkt] img { box-sizing: border-box; padding: 3px; object-fit: contain; }
.sf-hs-heute-ki { position: absolute; left: 0; bottom: 0; padding: 1px 3px; background: var(--sf-hb-vermerk-grund); color: var(--sf-hb-hell-text); font-size: var(--sf-size-9); line-height: 1.2; }
.sf-hs-heute-weg-text { display: grid; gap: 1px; min-width: 0; }
.sf-hs-heute-weg-text em { font-size: var(--sf-hb-mini); font-style: normal; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-travel); }
.sf-hs-heute-weg-text strong { display: -webkit-box; overflow: hidden; font-size: var(--sf-hb-text-klein); line-height: 1.25; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.sf-hs-heute-weg-text small { font-size: var(--sf-hb-fein); line-height: 1.3; color: var(--sf-muted); }
.sf-hs-heute-weg:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.sf-hs-heute-pfeil { font-weight: 700; }
@container sf-hs-heute (max-width: 599px) {
.sf-hs-heute-weg[data-sf-neben] small { display: none; }
}
@container sf-hs-heute (min-width: 880px) {
.sf-hs-heute-raster { grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: var(--sf-hm-s4) var(--sf-hm-s6); }
.sf-hs-heute-schlagzeile { max-width: 24ch; }
.sf-hs-heute-bild { aspect-ratio: 21 / 9; }
.sf-hs-heute-weg { padding: var(--sf-hm-s2) 0; }
.sf-hs-heute-vermerk { font-size: var(--sf-hb-fein); }
.sf-hs-heute-zahlen { grid-template-columns: minmax(0, 1fr); gap: 0; }
.sf-hs-heute-zahl { grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--sf-hm-s3); align-items: baseline; padding: var(--sf-hm-s2) 0; }
.sf-hs-heute-zahl span { font-size: var(--sf-hb-fein); }
}
.sf-hs-titel.sf-hs-titel { margin: var(--sf-hm-s4) 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-size: var(--sf-hs-schlagzeile); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); line-height: 0.98; color: var(--sf-ink); }
.sf-hs-bw.sf-hs-bw { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--sf-line); border-top: 4px solid var(--sf-advice); border-radius: var(--sf-hb-ecke); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-hs-bw.sf-hs-bw:hover { border-color: var(--sf-ink); border-top-color: var(--sf-advice); }
.sf-hs-bw.sf-hs-bw:focus-visible { outline: 2px solid var(--sf-advice); outline-offset: 2px; }
.sf-hs-bw-bild { position: relative; display: block; aspect-ratio: var(--sf-hb-bild); overflow: hidden; background: var(--sf-surface); }
.sf-hs-bw-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-hs-bw[data-sf-produkt] .sf-hs-bw-bild img { object-fit: contain; padding: var(--sf-hm-s3); box-sizing: border-box; }
.sf-hs-bw-ki { position: absolute; right: 0; bottom: 0; padding: 1px var(--sf-hm-s1); background: var(--sf-hm-hinweis-grund); font-family: var(--sf-body); font-size: var(--sf-size-9); line-height: 1.4; color: var(--sf-white); }
.sf-hs-bw-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sf-hm-s2); padding: var(--sf-hm-s4); }
.sf-hs-bw-marke { font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-advice); }
.sf-hs-bw-frage { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h2); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); color: var(--sf-ink); }
.sf-hs-bw-satz { font-family: var(--sf-body); font-size: var(--sf-hb-text); line-height: 1.45; color: var(--sf-text); }
.sf-hs-bw-knopf { display: inline-flex; align-items: center; align-self: flex-start; gap: var(--sf-hm-s2); min-height: var(--sf-hb-knopf-hoehe); margin-top: auto; padding: 0 var(--sf-hm-s5); background: var(--sf-advice); font-family: var(--sf-body); font-size: var(--sf-hb-steuer-schrift); font-weight: 700; color: var(--sf-white); }
.sf-hs-bw-knopf::after { content: "→"; }
.sf-kb-karte.sf-kb-karte { container: sf-hs-bw / inline-size; margin: 0; padding: 0; border: 0; }
@container sf-hs-bw (max-width: 520px) {
.sf-hs-bw--kompakt.sf-hs-bw--kompakt { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
.sf-hs-bw--kompakt .sf-hs-bw-bild { aspect-ratio: auto; height: 100%; min-height: 140px; }
.sf-hs-bw--kompakt .sf-hs-bw-text { gap: var(--sf-hm-s1); padding: var(--sf-hm-s3); }
.sf-hs-bw--kompakt .sf-hs-bw-marke { font-size: var(--sf-hb-mini); }
.sf-hs-bw--kompakt .sf-hs-bw-frage { font-size: var(--sf-hb-h3); }
.sf-hs-bw--kompakt .sf-hs-bw-satz { font-size: var(--sf-hb-text-klein); }
.sf-hs-bw--kompakt .sf-hs-bw-knopf { min-height: 40px; margin-top: var(--sf-hm-s2); padding: 0 var(--sf-hm-s3); }
}
.sf-hs-reihe { container: sf-hs-reihe / inline-size; }
.sf-hs-reihe .sf-hb-karte-beschreibung.sf-hb-karte-beschreibung { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.sf-hs-reihe .sf-hb-karten--wischen.sf-hb-karten--wischen { position: relative; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(240px, 80%); align-items: stretch; overflow-x: auto; }
@container sf-hs-reihe (min-width: 600px) {
.sf-hs-reihe .sf-hb-karten--wischen.sf-hb-karten--wischen { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-x: visible; }
.sf-hs-reihe[data-sf-anzahl="3"] .sf-hb-karten--wischen.sf-hb-karten--wischen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-hs-reihe[data-sf-anzahl="1"] .sf-hb-karten--wischen.sf-hb-karten--wischen { grid-template-columns: minmax(0, 1fr); max-width: 50%; }
}
@container sf-hs-reihe (min-width: 1000px) {
.sf-hs-reihe[data-sf-anzahl="4"] .sf-hb-karten--wischen.sf-hb-karten--wischen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-hs-reihe .sf-hb-anzeige.sf-hb-anzeige { position: relative; }
.sf-hs-planen, .sf-hs-regionen { container: sf-hs-liste / inline-size; display: grid; gap: var(--sf-hm-s3); margin-top: var(--sf-hm-abschnitt); padding-top: var(--sf-hm-s5); border-top: 1px solid var(--sf-line); }
.sf-hs-planen .sf-hb-kopf.sf-hb-kopf, .sf-hs-regionen .sf-hb-kopf.sf-hb-kopf { margin: 0; }
.sf-hs-planen-liste { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sf-line); }
.sf-hs-planen-liste li { margin: 0; border-bottom: 1px solid var(--sf-line); }
.sf-hs-planen-liste a { position: relative; display: grid; gap: 2px; min-height: 44px; padding: var(--sf-hm-s3) var(--sf-hm-s6) var(--sf-hm-s3) 0; color: var(--sf-ink); text-decoration: none; }
.sf-hs-planen-liste a::after { content: "→"; position: absolute; top: 50%; right: var(--sf-hm-s1); transform: translateY(-50%); font-weight: 700; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-hs-planen-liste strong { font-family: var(--sf-body); font-size: var(--sf-hb-text); font-weight: 700; }
.sf-hs-planen-liste span { font-family: var(--sf-body); font-size: var(--sf-hb-fein); color: var(--sf-text); }
@container sf-hs-liste (min-width: 760px) {
.sf-hs-planen-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sf-hm-s5); }
}
.sf-hs-regionen-liste { display: grid; gap: var(--sf-hm-s5); margin: 0; padding: 0; list-style: none; }
.sf-hs-region { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); margin: 0; }
.sf-hs-region-bild { position: relative; display: block; aspect-ratio: var(--sf-hb-bild); overflow: hidden; background: var(--sf-surface); }
.sf-hs-region-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-hs-region-bild span { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 1px var(--sf-hm-s1); overflow: hidden; background: var(--sf-hm-hinweis-grund); font-family: var(--sf-body); font-size: var(--sf-size-9); line-height: 1.4; color: var(--sf-white); text-overflow: ellipsis; white-space: nowrap; }
.sf-hs-region-text { display: grid; gap: var(--sf-hm-s2); align-content: start; }
.sf-hs-region-text h4 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); text-transform: none; }
.sf-hs-region-text h4 a { color: var(--sf-ink); text-decoration: none; }
.sf-hs-region-text p { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); line-height: 1.45; color: var(--sf-text); }
.sf-hs-region-anzeige { justify-self: start; padding: 1px var(--sf-hm-s1); border: 1px solid var(--sf-line); font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-hs-region-text .sf-hs-region-live { display: flex; align-items: center; gap: var(--sf-hm-s2); font-weight: 700; color: var(--sf-ink); }
.sf-hs-region-text .sf-hs-region-wege { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s5); }
.sf-hs-region-wege a { font-weight: 700; color: var(--sf-section-accent, var(--sf-travel)); text-decoration: none; }
@container sf-hs-liste (min-width: 760px) {
.sf-hs-regionen-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-hs-berater-leiste { margin: 0 0 var(--sf-hm-s4); }
.sf-hb-karte-zusatz.sf-hb-karte-zusatz { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s1) var(--sf-hm-s2); margin-top: auto; padding-top: var(--sf-hm-s2); color: var(--sf-muted); }
.sf-hb-karte-zusatz.sf-hb-karte-zusatz strong { font-size: var(--sf-hb-text-klein); color: var(--sf-ink); }
.sf-hs-heute-partner .sf-presented-ad { justify-content: flex-start; margin: var(--sf-hm-s2) 0 0; }
/* drei-akte.css */
.sf-hs3-woche, .sf-hs3-wohin, .sf-hs3-mit, .sf-hs3-vor { display: grid; gap: var(--sf-hm-s4); }
.sf-hs3-kap { display: block; font: 700 var(--sf-hb-kapitel) / 1.25 var(--sf-body); letter-spacing: 0.08em; text-transform: uppercase; }
.sf-hs3-nw { position: absolute; top: 8px; right: 8px; z-index: 2; max-width: 70%; font: 400 var(--sf-hb-mini) / 1.2 var(--sf-body); color: var(--sf-hb-hell-text); text-align: right; text-shadow: 0 1px 4px var(--sf-hb-schleier-unten); }
.sf-hs3-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-hs3-woche { container: sf-hs3-woche / inline-size; }
.sf-hs3-woche-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s3); }
@container sf-hs3-woche (min-width: 880px) {
.sf-hs3-woche-reihe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-hs3-woche[data-sf-anzahl="3"] .sf-hs3-woche-reihe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-hs3-platz { position: relative; display: grid; align-content: end; min-height: 300px; padding: var(--sf-hm-s4); overflow: hidden; color: var(--sf-white); background: var(--sf-hb-buehne-grund); text-decoration: none; }
.sf-hs3-platz::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--sf-hb-schleier-unten) 0%, transparent 70%); }
.sf-hs3-platz-story { position: absolute; inset: 0; }
.sf-hs3-platz-story .sf-story-image { width: 100%; height: 100%; object-fit: cover; }
.sf-hs3-platz-text { position: relative; z-index: 1; display: grid; gap: var(--sf-hm-s1); }
.sf-hs3-platz-titel { color: inherit; font: var(--sf-hb-titel-gewicht) var(--sf-hb-h3) / var(--sf-hb-titel-zeile) var(--sf-hb-titel-schrift, var(--sf-display)); text-transform: uppercase; text-wrap: balance; }
.sf-hs3-platz-zeile { font: 400 var(--sf-hb-text-klein) / 1.35 var(--sf-body); color: var(--sf-hb-hell-text); }
.sf-hs3-platz--radar .sf-hs3-kap { color: var(--sf-travel-tint); }
.sf-hs3-platz--radar .sf-hs3-foto { opacity: 0.6; }
.sf-hs3-platz--weltcup .sf-hs3-kap { color: var(--sf-sport-tint); }
.sf-hs3-platz--news { color: var(--sf-ink); background: var(--sf-white); border: 1px solid var(--sf-ink); }
.sf-hs3-platz--news::after { display: none; }
.sf-hs3-platz--news .sf-hs3-kap { color: var(--sf-travel); }
.sf-hs3-platz--news .sf-hs3-platz-zeile { color: var(--sf-text); }
.sf-hs3-stempel { position: absolute; top: 16px; right: 16px; left: 16px; display: flex; justify-content: space-between; align-items: baseline; padding-bottom: var(--sf-hm-s2); border-bottom: 2px solid var(--sf-ink); font: var(--sf-hb-titel-gewicht) var(--sf-hs-zahl) / 1 var(--sf-hb-titel-schrift, var(--sf-display)); text-transform: uppercase; }
.sf-hs3-stempel small { font: 700 var(--sf-hb-kapitel) / 1 var(--sf-body); letter-spacing: 0.06em; }
@container sf-hs3-woche (max-width: 560px) {
.sf-hs3-platz { min-height: 240px; padding: var(--sf-hm-s3); }
.sf-hs3-platz-zeile { font-size: var(--sf-hb-fein); }
.sf-hs3-stempel { top: 12px; right: 12px; left: 12px; }
}
.sf-hs3-platz-partner { display: grid; }
.sf-hs3-platz-partner .sf-hb-anzeige, .sf-hs3-platz-partner .sf-hb-karte { height: 100%; }
.sf-hs3-wohin { container: sf-hs3-wohin / inline-size; }
.sf-hs3-wand { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s3); }
.sf-hs3-wohin[data-sf-anzahl="5"] .sf-hs3-kachel:nth-child(5), .sf-hs3-wohin[data-sf-anzahl="3"] .sf-hs3-kachel:nth-child(3) { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
@container sf-hs3-wohin (min-width: 880px) {
.sf-hs3-wand { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sf-hs3-wohin[data-sf-anzahl="4"] .sf-hs3-wand { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-hs3-wohin[data-sf-anzahl="3"] .sf-hs3-wand { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-hs3-wohin[data-sf-anzahl="5"] .sf-hs3-kachel:nth-child(5), .sf-hs3-wohin[data-sf-anzahl="3"] .sf-hs3-kachel:nth-child(3) { grid-column: auto; aspect-ratio: 4 / 5; }
}
.sf-hs3-kachel { position: relative; display: grid; align-content: end; gap: 2px; aspect-ratio: 1 / 1; padding: var(--sf-hm-s3); overflow: hidden; color: var(--sf-white); background: var(--sf-hb-buehne-grund); text-decoration: none; }
@container sf-hs3-wohin (min-width: 880px) {
.sf-hs3-kachel { aspect-ratio: 4 / 5; padding: var(--sf-hm-s4); }
}
.sf-hs3-kachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--sf-hb-schleier-unten) 0%, transparent 60%); }
.sf-hs3-kachel .sf-hs3-foto { transition: transform 0.4s ease; }
.sf-hs3-kachel:hover .sf-hs3-foto { transform: scale(1.04); }
.sf-hs3-kachel-titel, .sf-hs3-kachel-zeile { position: relative; z-index: 1; }
.sf-hs3-kachel-titel { color: inherit; font: var(--sf-hb-titel-gewicht) var(--sf-hb-h3) / 1 var(--sf-hb-titel-schrift, var(--sf-display)); text-transform: uppercase; overflow-wrap: anywhere; }
.sf-hs3-kachel-zeile { font: 400 var(--sf-hb-fein) / 1.35 var(--sf-body); }
.sf-hs3-mit { container: sf-hs3-mit / inline-size; }
.sf-hs3-tueren { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); }
@container sf-hs3-mit (min-width: 640px) {
.sf-hs3-tueren { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-hs3-tuer--spielen { grid-column: 1 / -1; }
}
@container sf-hs3-mit (min-width: 1000px) {
.sf-hs3-tueren { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); }
.sf-hs3-tuer--spielen { grid-column: auto; }
}
.sf-hs3-tuer { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--sf-line); }
.sf-hs3-schild { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sf-hm-s2); margin: 0; padding: var(--sf-hm-s2) var(--sf-hm-s3); border-bottom: 1px solid var(--sf-line); font: var(--sf-hb-titel-gewicht) var(--sf-hb-h3) / 1 var(--sf-hb-titel-schrift, var(--sf-display)); color: var(--sf-ink); text-transform: uppercase; }
.sf-hs3-schild small { font: 400 var(--sf-hb-fein) / 1.2 var(--sf-body); color: var(--sf-muted); text-transform: none; }
.sf-hs3-tuer-inhalt { display: grid; gap: var(--sf-hm-s2); align-content: start; padding: var(--sf-hm-s3); }
.sf-hs3-spiel { display: grid; grid-template-columns: minmax(0, 1fr); color: var(--sf-white); background: var(--sf-hb-buehne-grund); text-decoration: none; }
@container sf-hs3-mit (min-width: 640px) {
.sf-hs3-spiel { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}
.sf-hs3-spiel-feld { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--sf-hb-relief-grund); }
.sf-hs3-spiel-bild { position: absolute; inset: 0; width: 100%; height: 100%; }
.sf-hs3-spiel-hang { fill: var(--sf-hb-relief-grund); }
.sf-hs3-spiel-rille { fill: none; stroke: var(--sf-line); stroke-width: 1; }
.sf-hs3-spiel-spur { fill: none; stroke: var(--sf-ink); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: sf-hs3-fahren 6.4s ease-in-out infinite; }
@keyframes sf-hs3-fahren { 0% { stroke-dashoffset: 1; } 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 0; } }
.sf-hs3-tor--rot { fill: var(--sf-sport); }
.sf-hs3-tor--blau { fill: var(--sf-advice); }
.sf-hs3-spiel-marke { position: absolute; top: 8px; left: 8px; padding: var(--sf-hm-s1) var(--sf-hm-s2); font: 700 var(--sf-hb-mini) / 1.2 var(--sf-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-ink); background: var(--sf-white); }
.sf-hs3-spiel-text { display: grid; gap: var(--sf-hm-s2); align-content: center; padding: var(--sf-hm-s4); }
.sf-hs3-spiel-titel { color: inherit; font: var(--sf-hb-titel-gewicht) var(--sf-hs-zahl) / 1 var(--sf-hb-titel-schrift, var(--sf-display)); text-transform: uppercase; }
.sf-hs3-spiel-zeile { font: 400 var(--sf-hb-text-klein) / 1.4 var(--sf-body); color: var(--sf-hb-hell-text); }
.sf-hs3-knopf { justify-self: start; display: inline-flex; align-items: center; min-height: var(--sf-hb-knopf-hoehe); padding: 0 var(--sf-hm-s4); font: 700 var(--sf-hb-steuer-schrift) / 1 var(--sf-body); color: var(--sf-ink); background: var(--sf-white); }
.sf-hs3-knopf::after { content: " →"; margin-left: var(--sf-hm-s2); }
.sf-hs3-erlebnis { display: grid; grid-template-columns: 112px minmax(0, 1fr); color: var(--sf-text); text-decoration: none; border: 1px solid var(--sf-line); }
.sf-hs3-erlebnis:hover { border-color: var(--sf-ink); }
.sf-hs3-erlebnis-bild { position: relative; min-height: 88px; overflow: hidden; background: var(--sf-hb-buehne-grund); }
.sf-hs3-erlebnis-art { position: absolute; left: 4px; bottom: 4px; padding: 2px var(--sf-hm-s1); font: 700 var(--sf-hb-mini) / 1.2 var(--sf-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-white); background: var(--sf-ink); }
.sf-hs3-erlebnis-text { display: grid; gap: 2px; align-content: center; padding: var(--sf-hm-s2) var(--sf-hm-s3); }
.sf-hs3-erlebnis-text strong { font: var(--sf-hb-titel-gewicht) var(--sf-hb-h3) / 1.05 var(--sf-hb-titel-schrift, var(--sf-display)); color: var(--sf-ink); text-transform: uppercase; }
.sf-hs3-los { font: 700 var(--sf-hb-text-klein) / 1.3 var(--sf-body); color: var(--sf-travel); }
.sf-hs3-los::after { content: " →"; }
.sf-hs3-club-zeile { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s5); margin: 0; padding-top: var(--sf-hm-s3); border-top: 1px solid var(--sf-line); }
.sf-hs3-club-zeile a { font: 700 var(--sf-hb-text-klein) / 1.3 var(--sf-body); color: var(--sf-club); text-decoration: none; }
.sf-hs3-club-zeile a::after { content: " →"; }
.sf-hs3-vor { container: sf-hs3-vor / inline-size; }
.sf-hs3-wahl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s2); scroll-margin-top: 12px; }
@container sf-hs3-vor (min-width: 700px) {
.sf-hs3-wahl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-hs3-wahl[data-sf-anzahl="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-hs3-wahl-knopf { position: relative; display: grid; align-content: end; min-height: 76px; padding: var(--sf-hm-s2) var(--sf-hm-s3); overflow: hidden; border: 2px solid transparent; color: var(--sf-white); background: var(--sf-ink); text-align: left; cursor: pointer; }
@container sf-hs3-vor (min-width: 700px) {
.sf-hs3-wahl-knopf { min-height: 96px; }
}
.sf-hs3-wahl-knopf img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.55; transition: opacity 0.2s ease; }
.sf-hs3-wahl-knopf span { position: relative; z-index: 1; font: var(--sf-hb-titel-gewicht) var(--sf-hb-h3) / 1 var(--sf-hb-titel-schrift, var(--sf-display)); text-transform: uppercase; text-shadow: 0 1px 6px var(--sf-hb-schleier-unten); }
.sf-hs3-wahl-knopf[aria-pressed="true"] { border-color: var(--sf-ink); outline: 3px solid var(--sf-white); outline-offset: -5px; }
.sf-hs3-wahl-knopf[aria-pressed="true"] img { opacity: 0.9; }
.sf-hs3-wahl-knopf[aria-pressed="true"]::before { content: "✓"; position: absolute; top: 6px; right: 8px; z-index: 2; font-weight: 800; }
.sf-hs3-plan { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--sf-ink); animation: sf-hs3-rein 0.35s ease both; }
.sf-hs3-plan[hidden] { display: none; }
@keyframes sf-hs3-rein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@container sf-hs3-vor (min-width: 800px) {
.sf-hs3-plan { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
}
.sf-hs3-plan-bild { position: relative; display: grid; align-content: end; min-height: 180px; padding: var(--sf-hm-s4); overflow: hidden; color: var(--sf-white); background: var(--sf-ink); }
@container sf-hs3-vor (min-width: 800px) {
.sf-hs3-plan-bild { min-height: 340px; }
}
.sf-hs3-plan-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--sf-hb-schleier-unten) 0%, transparent 60%); }
.sf-hs3-plan-kopf { position: relative; z-index: 1; display: grid; gap: var(--sf-hm-s1); }
.sf-hs3-plan-titel { color: inherit; font: var(--sf-hb-titel-gewicht) var(--sf-hs-zahl) / 0.95 var(--sf-hb-titel-schrift, var(--sf-display)); text-transform: uppercase; text-wrap: balance; }
.sf-hs3-plan-weg { display: grid; gap: var(--sf-hm-s3); align-content: start; padding: var(--sf-hm-s4); }
.sf-hs3-profil { display: block; width: 100%; height: 96px; }
.sf-hs3-profil-flaeche { fill: var(--sf-surface); }
.sf-hs3-profil-linie { fill: none; stroke: var(--sf-ink); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; vector-effect: non-scaling-stroke; animation: sf-hs3-zeichnen 0.8s ease both; }
@keyframes sf-hs3-zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.sf-hs3-halt { stroke: var(--sf-white); stroke-width: 3; vector-effect: non-scaling-stroke; }
.sf-hs3-halt--1 { fill: var(--sf-fit); }
.sf-hs3-halt--2 { fill: var(--sf-advice); }
.sf-hs3-halt--3 { fill: var(--sf-travel); }
.sf-hs3-stationen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s2); margin: 0; padding: 0; list-style: none; }
@container sf-hs3-vor (min-width: 700px) {
.sf-hs3-stationen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-hs3-station { display: grid; gap: var(--sf-hm-s1); align-content: start; padding: var(--sf-hm-s3); border-top: 3px solid var(--sf-hs3-farbe, var(--sf-ink)); background: var(--sf-surface); }
.sf-hs3-station--fit { --sf-hs3-farbe: var(--sf-fit); }
.sf-hs3-station--aus { --sf-hs3-farbe: var(--sf-advice); }
.sf-hs3-station--hin { --sf-hs3-farbe: var(--sf-travel); }
.sf-hs3-station a { display: grid; gap: var(--sf-hm-s1); color: var(--sf-text); text-decoration: none; }
.sf-hs3-station .sf-hs3-kap { display: flex; gap: var(--sf-hm-s2); align-items: center; color: var(--sf-hs3-farbe); }
.sf-hs3-nr { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; font-size: var(--sf-hb-mini); letter-spacing: 0; color: var(--sf-white); background: var(--sf-hs3-farbe); }
.sf-hs3-station strong { font: var(--sf-hb-titel-gewicht) var(--sf-hb-h3) / 1.05 var(--sf-hb-titel-schrift, var(--sf-display)); color: var(--sf-ink); text-transform: uppercase; text-wrap: balance; }
.sf-hs3-station span:not(.sf-hs3-kap):not(.sf-hs3-nr) { font: 400 var(--sf-hb-text-klein) / 1.35 var(--sf-body); }
.sf-hs3-zweit { font: 700 var(--sf-hb-text-klein) / 1.3 var(--sf-body); color: var(--sf-hs3-farbe); text-decoration: none; }
.sf-hs3-zweit::after { content: " →"; }
.sf-hs3-mini { display: block; width: 100%; height: 26px; }
.sf-hs3-mini polyline { fill: none; stroke: var(--sf-advice); stroke-width: 2; }
.sf-hs3-mini circle { fill: var(--sf-white); stroke: var(--sf-advice); stroke-width: 2; }
.sf-hs3-mini-ziel { fill: var(--sf-advice); stroke: var(--sf-advice); stroke-width: 1.5; }
@media (prefers-reduced-motion: reduce) {
.sf-hs3-spiel-spur { animation: none; stroke-dashoffset: 0; }
.sf-hs3-plan, .sf-hs3-profil-linie { animation: none; }
.sf-hs3-kachel .sf-hs3-foto { transition: none; }
}
.sf-hs3-woche .sf-hs3-platz, .sf-hs3-wohin .sf-hs3-kachel, .sf-hs3-mit .sf-hs3-spiel { color: var(--sf-white); }
.sf-hs3-woche .sf-hs3-platz--news { color: var(--sf-ink); }
.sf-hs3-mit .sf-hs3-erlebnis, .sf-hs3-vor .sf-hs3-station a { color: var(--sf-text); }
.sf-hs3-mit .sf-hs3-club-zeile a { color: var(--sf-club); }
.sf-hs3-vor .sf-hs3-station .sf-hs3-zweit { color: var(--sf-hs3-farbe); }
.sf-hch { display: grid; gap: var(--sf-hm-s4); }
.sf-hch-rahmen { container: sf-hch / inline-size; min-width: 0; }
.sf-hch-reihe { display: grid; grid-auto-flow: column; gap: var(--sf-hm-s3); margin: 0; padding: 0 0 var(--sf-hm-s2); list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.sf-hch-reihe::-webkit-scrollbar { display: none; }
.sf-hch-reihe--marken { grid-auto-columns: 42%; }
.sf-hch-reihe--3d { grid-auto-columns: 84%; }
.sf-hch-eintrag.sf-hch-eintrag { min-width: 0; margin: 0; scroll-snap-align: start; }
@container sf-hch (min-width: 720px) {
.sf-hch-reihe { grid-auto-flow: row; overflow: visible; }
.sf-hch-reihe--marken { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-hch-reihe--3d { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-hch-eintrag--gross.sf-hch-eintrag--gross { grid-column: span 2; grid-row: span 2; }
}
.sf-hch-marke { position: relative; display: grid; align-content: end; aspect-ratio: 3 / 4; padding: var(--sf-hm-s3); overflow: hidden; color: var(--sf-white); background: var(--sf-ink); text-decoration: none; }
.sf-hch-marke-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sf-hch-marke:hover .sf-hch-marke-bild { transform: scale(1.04); }
.sf-hch-schleier { position: absolute; inset: 0; background: linear-gradient( 180deg, var(--sf-hb-schleier-mitte) 0%, var(--sf-hb-schleier-null) 28%, var(--sf-hb-schleier-null) 42%, var(--sf-hb-schleier-unten) 100% ); }
.sf-hch-nachweis { position: absolute; top: var(--sf-hm-s2); right: var(--sf-hm-s2); max-width: 60%; font: 400 var(--sf-hb-mini) / 1.2 var(--sf-body); color: var(--sf-hb-hell-text); text-align: right; }
.sf-hch-marke-text { position: relative; display: grid; gap: var(--sf-hm-s1); min-width: 0; text-shadow: 0 1px 8px var(--sf-hb-schleier-mitte); }
.sf-hch-herkunft { font: 700 var(--sf-hb-mini) / 1.25 var(--sf-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-hb-hell-text); }
.sf-hch-name.sf-hch-name { font: 800 var(--sf-hb-h3) / 1 var(--sf-hb-titel-schrift, var(--sf-display)); color: var(--sf-white); text-transform: uppercase; overflow-wrap: anywhere; }
.sf-hch-staerke { font: 400 var(--sf-hb-text-klein) / 1.3 var(--sf-body); color: var(--sf-hb-hell-text); }
@container sf-hch (min-width: 720px) {
.sf-hch-marke { aspect-ratio: 4 / 3; }
.sf-hch-name.sf-hch-name { font-size: var(--sf-hb-h2); }
}
.sf-hch-plan { display: grid; grid-template-rows: auto 1fr; height: 100%; color: var(--sf-text); text-decoration: none; border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-hch-plan:hover { border-color: var(--sf-ink); }
.sf-hch-plan-bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sf-hm-farbe-eef1f4); }
.sf-hch-plan-bild img { position: absolute; inset: 0; width: 100%; height: 107%; object-fit: cover; object-position: 50% 0%; transition: transform 0.5s ease; }
.sf-hch-plan:hover .sf-hch-plan-bild img { transform: scale(1.03); }
.sf-hch-plan--flug .sf-hch-plan-bild img { height: 100%; object-position: 50% 50%; }
.sf-hch-art { position: absolute; left: var(--sf-hm-s2); top: var(--sf-hm-s2); padding: 2px var(--sf-hm-s1); font: 700 var(--sf-hb-mini) / 1.2 var(--sf-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-white); background: var(--sf-ink); }
.sf-hch-plan-text { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sf-hm-s1) var(--sf-hm-s3); padding: var(--sf-hm-s3); }
.sf-hch-plan-name.sf-hch-plan-name { font: var(--sf-hb-titel-gewicht) var(--sf-hb-h3) / 1.05 var(--sf-hb-titel-schrift, var(--sf-display)); color: var(--sf-ink); text-transform: uppercase; }
.sf-hch-los { font: 700 var(--sf-hb-text-klein) / 1.3 var(--sf-body); color: var(--sf-travel); }
.sf-hch-los::after { content: " →"; }
@container sf-hch (min-width: 720px) {
.sf-hch-eintrag--gross .sf-hch-plan-bild { aspect-ratio: auto; min-height: 100%; }
.sf-hch-eintrag--gross .sf-hch-plan { grid-template-rows: 1fr auto; }
.sf-hch-eintrag--gross .sf-hch-plan-name.sf-hch-plan-name { font-size: var(--sf-hb-h2); }
}
.sf-hch-fuss { margin: 0; font: 400 var(--sf-hb-mini) / 1.3 var(--sf-body); color: var(--sf-muted); }
/* marke.css */
.sf-marke { display: inline-flex; align-items: center; gap: 10px; color: var(--sf-ink); }
.sf-marke .sf-marke-signet { flex: 0 0 auto; width: 34px; height: 34px; }
.sf-marke .sf-marke-text { display: flex; flex-direction: column; gap: 2px; text-align: left; }
.sf-marke .sf-marke-wort { font-family: var(--sf-display-condensed); font-size: var(--sf-marke-wort); font-weight: 800; line-height: 0.9; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sf-ink); text-align: left; }
.sf-marke .sf-marke-von { font-size: var(--sf-size-11); font-weight: 600; line-height: 1.2; letter-spacing: 0.06em; color: var(--sf-muted); text-align: left; }
.sf-hm-kopf-absender .sf-marke-link { display: block; min-width: 0; }
@media (max-width: 900px) {
.sf-marke .sf-marke-signet { width: 28px; height: 28px; }
.sf-marke .sf-marke-wort { font-size: var(--sf-marke-wort-schmal); }
.sf-marke .sf-marke-von { font-size: var(--sf-size-10); }
}
.sf-header--focused.sf-hm-kopf .sf-focused-top { grid-template-columns: auto minmax(0, 1fr) auto; }
.sf-focused-brand.sf-hm-kopf-absender { flex-direction: row; align-items: center; gap: 14px; }
.sf-hm-kopf-absender .sf-hm-kopf-sportfits { display: block; flex: 0 0 auto; }
.sf-hm-kopf-absender .sf-hm-kopf-sportfits img { display: block; width: 118px; height: auto; }
.sf-hm-kopf-absender .sf-hm-kopf-strich { flex: 0 0 1px; align-self: stretch; margin-block: 4px; background: var(--sf-line); }
@media (min-width: 901px) and (max-width: 1100px) {
.sf-header--focused.sf-hm-kopf .sf-primary { gap: 18px; }
}
@media (min-width: 901px) and (max-width: 1240px) {
.sf-focused-brand.sf-hm-kopf-absender { flex-direction: column; align-items: flex-start; gap: 6px; }
.sf-hm-kopf-absender .sf-hm-kopf-sportfits img { width: 92px; }
.sf-hm-kopf-absender .sf-hm-kopf-strich { display: none; }
}
.sf-hm-kopf .sf-marke .sf-marke-von { color: var(--sf-travel); letter-spacing: 0.02em; white-space: nowrap; }
.sf-dynamik .sf-hm-kopf .sf-header-shop { border-radius: 0; background: var(--sf-ink); color: var(--sf-white); }
.sf-dynamik .sf-hm-kopf .sf-header-shop:hover { background: var(--sf-travel); }
.sf-dynamik.sf-delivery .sf-hm-kopf .sf-mobile-links { gap: 0; padding-block: var(--sf-hm-s2) var(--sf-hm-s4); border-top: 3px solid var(--sf-ink); background: var(--sf-white); }
.sf-hm-kopf .sf-mobile-links > a { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-hm-s2); min-height: 52px; padding-inline: var(--sf-hm-s1); border-bottom: 1px solid var(--sf-line); color: var(--sf-ink); font-family: var(--sf-display-condensed); font-size: var(--sf-size-20); font-weight: 700; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.sf-hm-kopf .sf-mobile-links > .sf-menue-suche { margin-bottom: var(--sf-hm-s3); }
.sf-hm-kopf .sf-mobile-links > a::after { content: "→"; color: var(--sf-travel); font-weight: 700; }
.sf-hm-kopf .sf-mobile-links > a:active, .sf-hm-kopf .sf-mobile-links > a:focus-visible, .sf-hm-kopf .sf-mobile-links > a[aria-current="page"] { background: var(--sf-ink); color: var(--sf-white); }
.sf-hm-kopf .sf-mobile-links > a .sf-nav-neu { margin-right: auto; }
.sf-dynamik .sf-hm-kopf .sf-focused-menu { align-items: center; gap: var(--sf-hm-s2); min-width: 44px; min-height: 44px; padding: var(--sf-hm-s2) var(--sf-hm-s3); border: 0; border-radius: 0; background: var(--sf-ink); color: var(--sf-white); font-weight: 700; }
.sf-dynamik .sf-hm-kopf .sf-focused-menu:hover, .sf-dynamik .sf-hm-kopf .sf-focused-menu[aria-expanded="true"] { background: var(--sf-travel); }
.sf-hm-kopf .sf-focused-menu .sf-burger { display: block; flex: none; }
@media (max-width: 700px) {
.sf-hm-kopf .sf-focused-menu .sf-burger-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-dynamik .sf-hm-kopf .sf-focused-menu { padding: var(--sf-hm-s2); }
.sf-delivery .sf-hm-kopf.sf-header--focused .sf-focused-top { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand tools"; }
.sf-delivery .sf-hm-kopf .sf-focused-brand { justify-self: start; min-width: 0; }
.sf-focused-brand.sf-hm-kopf-absender { gap: 10px; }
.sf-hm-kopf-absender .sf-hm-kopf-sportfits img { width: 84px; }
.sf-hm-kopf .sf-hm-kopf-alle, .sf-delivery .sf-hm-kopf .sf-header-shop { display: none; }
}
@media (max-width: 420px) {
.sf-hm-kopf .sf-focused-tools .sf-af-knopf--mobil { display: none; }
.sf-hm-kopf-absender .sf-hm-kopf-sportfits img { width: 72px; }
.sf-hm-kopf .sf-focused-tools > .sf-focused-menu { min-height: 44px; align-items: center; }
}
@media (max-width: 374px) {
.sf-focused-brand.sf-hm-kopf-absender { gap: 6px; }
.sf-hm-kopf-absender .sf-hm-kopf-sportfits img { width: 60px; }
.sf-hm-kopf .sf-marke { gap: 8px; }
}
@media (max-width: 359px) {
.sf-hm-kopf-absender .sf-hm-kopf-sportfits img { width: 52px; }
.sf-hm-kopf .sf-marke { gap: 6px; }
.sf-hm-kopf .sf-marke .sf-marke-signet { width: 24px; height: 24px; }
}
@media (max-width: 339px) {
.sf-hm-kopf-absender .sf-hm-kopf-sportfits, .sf-hm-kopf-absender .sf-hm-kopf-strich { display: none; }
}
.sf-dynamik.sf-delivery .sf-hm-kopf.sf-hm-kopf--live .sf-focused-brand.sf-hm-kopf-absender--nur-logo { --sf-kopf-logo: 150px; margin-right: 12px; }
.sf-dynamik.sf-delivery .sf-hm-kopf.sf-hm-kopf--live .sf-hm-kopf-absender--nur-logo .sf-hm-kopf-sportfits { display: block; }
.sf-dynamik.sf-delivery .sf-hm-kopf.sf-hm-kopf--live .sf-hm-kopf-absender--nur-logo .sf-hm-kopf-sportfits img { width: var(--sf-kopf-logo); }
@media (min-width: 901px) and (max-width: 1240px) {
.sf-dynamik.sf-delivery .sf-hm-kopf.sf-hm-kopf--live .sf-focused-brand.sf-hm-kopf-absender--nur-logo { --sf-kopf-logo: 140px; }
}
@media (max-width: 900px) {
.sf-dynamik.sf-delivery .sf-hm-kopf.sf-hm-kopf--live .sf-focused-brand.sf-hm-kopf-absender--nur-logo { --sf-kopf-logo: 136px; margin-right: 0; }
}
@media (max-width: 359px) {
.sf-dynamik.sf-delivery .sf-hm-kopf.sf-hm-kopf--live .sf-focused-brand.sf-hm-kopf-absender--nur-logo { --sf-kopf-logo: 120px; }
}
/* gebiet.css */
.sf-gb-abschnitt { display: flex; flex-direction: column; gap: var(--sf-hm-kopf-abstand); min-width: 0; scroll-margin-top: 76px; }
.sf-gb-leer { margin: 0; color: var(--sf-muted); }
.sf-hmnav { position: sticky; top: var(--sf-kopf-klebt, 0px); z-index: 20; display: flex; align-items: stretch; gap: var(--sf-hm-s2); background: var(--sf-hm-nav-grund); border-bottom: 1px solid var(--sf-line); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sf-hmnav--fluss { position: static; }
.sf-hmnav-meter { flex: none; display: flex; flex-direction: column; justify-content: center; min-width: 76px; margin: 0; padding-right: var(--sf-hm-s3); border-right: 1px solid var(--sf-line); }
.sf-hmnav-meter b { font-family: var(--sf-display); font-size: var(--sf-size-20); line-height: 1; color: var(--sf-ink); font-variant-numeric: tabular-nums; }
.sf-hmnav-meter span { font-size: var(--sf-size-10); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-hmnav ul { display: flex; gap: var(--sf-hm-s1); margin: 0; padding: var(--sf-hm-s2) 0; list-style: none; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.sf-hmnav ul::-webkit-scrollbar { display: none; }
.sf-hmnav li { flex: none; }
.sf-hmnav a { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; color: var(--sf-muted); font-size: var(--sf-size-12); white-space: nowrap; text-decoration: none; }
.sf-hmnav a b { font-family: var(--sf-display); font-size: var(--sf-size-17); line-height: 1.05; color: var(--sf-ink); }
.sf-hmnav a:hover b { color: var(--sf-section-accent, var(--sf-travel)); }
.sf-hmnav a[aria-current="true"] { background: var(--sf-travel-tint); color: var(--sf-section-accent, var(--sf-travel)); }
.sf-hmnav a[aria-current="true"] b { color: var(--sf-section-accent, var(--sf-travel)); }
.sf-hmnav-live::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 4px; border-radius: 50%; background: var(--sf-hm-live-gruen); vertical-align: 3px; }
.sf-gb-cams { display: grid; gap: var(--sf-hm-s3); min-width: 0; }
.sf-gb-cam-buehne { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--sf-ink); scroll-margin-top: 80px; }
.sf-gb-cam-buehne img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-gb-cam-zeile { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s1) var(--sf-hm-s3); margin: 0; padding: var(--sf-hm-s5) var(--sf-hm-s3) var(--sf-hm-s3); background: var(--sf-hm-kopf-schleier); color: var(--sf-white); font-size: var(--sf-size-12); }
.sf-gb-cam-zeile strong { font-family: var(--sf-display); font-size: var(--sf-size-20); line-height: 1; }
.sf-gb-cam-zeile small { margin-left: auto; opacity: 0.85; }
.sf-gb-cam-zeile a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sf-gb-cam-zu.sf-gb-cam-zu { position: absolute; top: var(--sf-hm-s2); right: var(--sf-hm-s2); z-index: 2; display: inline-flex; align-items: center; gap: var(--sf-hm-s1); margin: 0; padding: var(--sf-hm-s1) var(--sf-hm-s3); border: 1px solid var(--sf-white); border-radius: 0; background: var(--sf-ink); color: var(--sf-white); font-family: var(--sf-body); font-size: var(--sf-hb-steuer-schrift); font-weight: 600; line-height: 1.2; cursor: pointer; }
.sf-gb-cam-zu.sf-gb-cam-zu:focus-visible { outline: 3px solid var(--sf-white); outline-offset: 2px; }
.sf-gb-cam-buehne:has(iframe) .sf-gb-cam-zeile { top: 0; bottom: auto; pointer-events: none; }
.sf-gb-cam-buehne:has(iframe) .sf-gb-cam-zeile a { pointer-events: auto; }
.sf-gb-cam-buehne:has(.sf-gb-cam-zu):has(video, iframe) .sf-gb-cam-zeile { padding-right: 168px; }
.sf-gb-cam-leiste { display: grid; grid-auto-flow: column; grid-auto-columns: 132px; gap: var(--sf-hm-s2); margin: 0; padding: 0 0 var(--sf-hm-s1); list-style: none; overflow-x: auto; scroll-snap-type: x proximity; }
.sf-gb-cam-leiste li { display: flex; scroll-snap-align: start; }
.sf-gb-cam-leiste button { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; border: 2px solid transparent; background: var(--sf-surface); cursor: pointer; text-align: left; font: inherit; }
.sf-gb-cam-leiste button[aria-pressed="true"] { border-color: var(--sf-section-accent, var(--sf-travel)); }
.sf-gb-cam-leiste img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; background: var(--sf-line); }
.sf-gb-cam-leiste span { display: flex; flex-direction: column; padding: 6px 8px; overflow-wrap: anywhere; hyphens: auto; font-size: var(--sf-size-12); line-height: 1.3; font-weight: 700; color: var(--sf-ink); }
.sf-gb-cam-leiste em { font-style: normal; font-weight: 400; color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-gb-passt { display: grid; gap: var(--sf-hm-s3); min-width: 0; }
.sf-gb-wuensche { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-gb-wuensche .sf-gb-wunsch { display: inline-flex; align-items: center; gap: var(--sf-hm-s2); padding: var(--sf-hm-s2) var(--sf-hm-s3) var(--sf-hm-s2) var(--sf-hm-s2); border: 1.5px solid var(--sf-line); border-radius: 0; background: var(--sf-white); color: var(--sf-ink); font: inherit; font-size: var(--sf-size-14); line-height: 1.35; text-align: left; cursor: pointer; }
.sf-gb-wunsch:hover { border-color: var(--sf-ink); }
.sf-gb-wunsch[aria-pressed="true"] { background: var(--sf-ink); border-color: var(--sf-ink); color: var(--sf-white); }
.sf-gb-wunsch[aria-pressed="true"] .sf-gb-wunsch-zeichen { border-color: var(--sf-white); }
.sf-gb-wunsch-zeichen { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border: 1.5px solid var(--sf-muted); border-radius: 50%; font-size: var(--sf-size-11); font-weight: 700; }
.sf-gb-urteil { display: flex; flex-direction: column; gap: var(--sf-hm-s3); padding: var(--sf-hm-s4); background: var(--sf-surface); }
.sf-gb-urteil h3 { margin: 0; font-size: var(--sf-size-20); line-height: 1.15; }
.sf-gb-urteil ul { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--sf-size-14); color: var(--sf-ink); }
.sf-gb-urteil li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--sf-hm-s2); }
.sf-gb-urteil li[data-sf-art="gut"] b { color: var(--sf-hm-passt); }
.sf-gb-urteil li[data-sf-art="geht"] b { color: var(--sf-hm-geht); }
.sf-gb-urteil li[data-sf-art="nicht"] b { color: var(--sf-hm-nicht); }
.sf-gb-urteil a { font-weight: 700; color: var(--sf-blue); }
.sf-gb-urteil-leer { margin: 0; font-size: var(--sf-size-14); color: var(--sf-muted); }
.sf-gb-skala { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-hm-s1); }
.sf-gb-skala span { padding: 8px 4px; border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-muted); font-family: var(--sf-display); font-size: var(--sf-size-17); line-height: 1; text-align: center; }
.sf-gb-skala .sf-gb-an[data-sf-urteil="passt"] { background: var(--sf-hm-passt); border-color: var(--sf-hm-passt); color: var(--sf-white); }
.sf-gb-skala .sf-gb-an[data-sf-urteil="geht"] { background: var(--sf-hm-geht); border-color: var(--sf-hm-geht); color: var(--sf-white); }
.sf-gb-skala .sf-gb-an[data-sf-urteil="nicht"] { background: var(--sf-hm-nicht); border-color: var(--sf-hm-nicht); color: var(--sf-white); }
.sf-gb-passt-listen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--sf-hm-s3); }
.sf-gb-passt-liste { padding-top: var(--sf-hm-s3); border-top: 3px solid var(--sf-hm-passt); }
.sf-gb-passt-liste--geht { border-top-color: var(--sf-hm-geht); }
.sf-gb-passt-liste--nicht { border-top-color: var(--sf-muted); }
.sf-gb-passt-liste ul { display: flex; flex-direction: column; gap: var(--sf-hm-s2); margin: var(--sf-hm-s2) 0 0; padding: 0; list-style: none; font-size: var(--sf-size-15); color: var(--sf-ink); }
.sf-gb-band { display: flex; flex-direction: column; gap: var(--sf-hm-s2); min-width: 0; }
.sf-gb-band-jetzt { margin: 0; font-size: var(--sf-size-14); color: var(--sf-muted); }
.sf-gb-band-monate, .sf-gb-band-zeile { display: grid; grid-template-columns: repeat(var(--sf-gb-monate), minmax(0, 1fr)); }
.sf-gb-band-monate span { padding-bottom: 2px; border-left: 1px solid var(--sf-line); font-size: var(--sf-size-11); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; color: var(--sf-muted); }
.sf-gb-band-zeilen { position: relative; display: flex; flex-direction: column; gap: var(--sf-hm-s1); padding-bottom: var(--sf-hm-s4); }
.sf-gb-band-zeile { row-gap: var(--sf-hm-s1); width: 100%; padding: 6px 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.sf-gb-band-name { position: relative; z-index: 2; text-shadow: 0 0 3px var(--sf-white), 0 0 3px var(--sf-white), 0 0 3px var(--sf-white); grid-row: 1; grid-column: var(--sf-gb-a) / -1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-muted); }
.sf-gb-band-name[data-sf-rechts] { grid-column: 1 / var(--sf-gb-b); text-align: right; }
.sf-gb-band-spur { grid-row: 2; grid-column: 1 / -1; height: 14px; background: var(--sf-surface); }
.sf-gb-band-balken { grid-row: 2; grid-column: var(--sf-gb-a) / var(--sf-gb-b); height: 14px; background: var(--sf-section-accent, var(--sf-travel)); opacity: 0.4; }
.sf-gb-band-zeile[aria-pressed="true"] .sf-gb-band-name { color: var(--sf-ink); }
.sf-gb-band-zeile[aria-pressed="true"] .sf-gb-band-balken { opacity: 1; }
.sf-gb-band-zeile:hover .sf-gb-band-balken { opacity: 0.8; }
.sf-gb-band-heute { position: absolute; top: 0; bottom: 0; z-index: 1; width: 2px; background: var(--sf-hm-live-gruen); pointer-events: none; }
.sf-gb-band-heute span { position: absolute; bottom: 0; left: 4px; font-size: var(--sf-size-11); font-weight: 700; color: var(--sf-hm-live-gruen-text); white-space: nowrap; }
.sf-gb-band-text, .sf-gb-band-texte li { display: flex; flex-direction: column; gap: var(--sf-hm-s1); }
.sf-gb-band-text strong, .sf-gb-band-texte strong { font-family: var(--sf-display); font-size: var(--sf-size-20); line-height: 1.1; color: var(--sf-ink); }
.sf-gb-band-text p, .sf-gb-band-texte p { margin: 0; max-width: 68ch; }
.sf-gb-band[data-sf-bedient] div.sf-gb-band-zeile { cursor: pointer; }
.sf-gb-band[data-sf-bedient] div.sf-gb-band-zeile .sf-gb-band-name { color: var(--sf-muted); }
.sf-gb-band[data-sf-bedient] div.sf-gb-band-zeile .sf-gb-band-balken { opacity: 0.4; }
.sf-gb-band[data-sf-bedient] div.sf-gb-band-zeile:hover .sf-gb-band-balken { opacity: 0.8; }
.sf-gb-band[data-sf-bedient] div.sf-gb-band-zeile[aria-pressed="true"] .sf-gb-band-name { color: var(--sf-ink); }
.sf-gb-band[data-sf-bedient] div.sf-gb-band-zeile[aria-pressed="true"] .sf-gb-band-balken { opacity: 1; }
.sf-gb-band[data-sf-bedient] div.sf-gb-band-zeile:focus-visible { outline: 2px solid var(--sf-ink); outline-offset: 2px; }
.sf-gb-band-texte li[hidden] { display: none; }
.sf-gb-band-texte { display: flex; flex-direction: column; gap: var(--sf-hm-s4); margin: 0; padding: 0; list-style: none; }
@media (min-width: 900px) {
.sf-gb-cams { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); align-items: stretch; }
.sf-gb-cam-leiste { contain: size; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; padding: 0 var(--sf-hm-s1) 0 0; overflow-x: hidden; overflow-y: auto; scroll-snap-type: y proximity; }
.sf-gb-passt { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sf-hm-s5); align-items: start; }
.sf-gb-urteil { position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + 88px); }
}
.sf-hm-sport.sf-sport-page { padding-block: var(--sf-hm-s2) var(--sf-hm-s7); }
.sf-hm-sport .sf-hmnav { margin-top: var(--sf-hm-kopf-abstand); }
.sf-hm-sport .sf-sport-today, .sf-hm-sport .sf-sport-map { margin-top: var(--sf-hm-kopf-abstand); }
.sf-hm-sport .sf-sport-intro { display: block; margin-top: var(--sf-hm-abschnitt); }
.sf-hm-sport .sf-sport-fit, .sf-hm-sport .sf-sport-block { gap: var(--sf-hm-kopf-abstand); scroll-margin-top: 76px; }
.sf-hm-sport .sf-sport-block, .sf-hm-sport .sf-sport-more-links, .sf-hm-sport > .sf-section { margin-top: var(--sf-hm-abschnitt); }
.sf-hm-sport .sf-sport-block-head { padding-bottom: var(--sf-hm-s2); }
.sf-hm-sport .sf-sport-tips, .sf-hm-sport .sf-sport-stays { gap: var(--sf-hm-s3); }
.sf-hm-sport .sf-sport-tips li { padding: var(--sf-hm-s4); }
.sf-hm-sport .sf-sport-stay-body { padding: var(--sf-hm-s3); }
.sf-hm-sport .sf-sport-facts > div { padding: var(--sf-hm-s3) var(--sf-hm-s4); }
.sf-hm-sport .sf-sport-sources { margin-top: var(--sf-hm-abschnitt); }
.sf-hm-sport .sf-sport-sources summary { font-size: var(--sf-size-13); color: var(--sf-muted); cursor: pointer; }
.sf-hm-sport .sf-sport-sources p { margin: var(--sf-hm-s2) 0 0; }
.sf-hm-sport .sf-sport-stage-image { position: relative; }
.sf-sport-stage-credit { position: absolute; right: var(--sf-hm-s2); bottom: var(--sf-hm-s2); padding: 2px var(--sf-hm-s2); background: var(--sf-hm-hinweis-grund); color: var(--sf-white); font-size: var(--sf-size-11); }
.sf-gb-abschnitt > .sf-hb-kopf.sf-hb-kopf { margin: 0; }
.sf-gb-cam-stand { display: inline-flex; align-items: center; gap: var(--sf-hm-s1); }
.sf-gb-abschnitt > * { min-width: 0; max-width: 100%; }
.sf-rg-saison { display: grid; gap: var(--sf-hm-s4); min-width: 0; scroll-margin-top: 72px; }
.sf-rg-saison-kopf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; max-width: 360px; border: 1px solid var(--sf-ink); }
.sf-rg-saison-kopf[hidden], .sf-rg-saison-tafel[data-sf-saison-aus] { display: none; }
.sf-rg-saison-knopf.sf-rg-saison-knopf { min-height: var(--sf-hb-knopf-hoehe); margin: 0; padding: var(--sf-hm-s2) var(--sf-hm-s3); border: 0; border-radius: 0; background: var(--sf-page); color: var(--sf-ink); font: 800 var(--sf-size-16) / 1.2 var(--sf-display-condensed, var(--sf-body)); letter-spacing: 0.02em; cursor: pointer; }
.sf-rg-saison-knopf.sf-rg-saison-knopf[aria-selected="true"] { background: var(--sf-ink); color: var(--sf-page); }
.sf-rg-saison-knopf.sf-rg-saison-knopf:focus-visible { outline: 2px solid var(--sf-section-accent, var(--sf-travel)); outline-offset: -4px; }
.sf-rg-saison-tafel { display: grid; gap: var(--sf-hm-abschnitt, 32px); min-width: 0; }
.sf-rg-erwartet { display: grid; gap: var(--sf-hm-s2); }
.sf-rg-erwartet details, .sf-rg-kriterien { padding: var(--sf-hm-s3); border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-rg-erwartet summary, .sf-rg-kriterien summary { font-weight: 700; color: var(--sf-ink); cursor: pointer; }
.sf-rg-erwartet p, .sf-rg-kriterien p { margin: var(--sf-hm-s2) 0 0; font-size: var(--sf-size-14); line-height: 1.5; }
.sf-rg-kriterien dl { display: grid; gap: var(--sf-hm-s2); margin: var(--sf-hm-s3) 0 0; }
.sf-rg-kriterien dt { font-weight: 700; color: var(--sf-ink); font-size: var(--sf-size-14); }
.sf-rg-kriterien dd { margin: 0; font-size: var(--sf-size-14); }
@media (min-width: 900px) {
.sf-rg-erwartet { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}
/* skigebiet.css */
.sf-sg { --sf-sg-akzent: var(--sf-section-accent, var(--sf-travel)); --sf-sg-tint: var(--sf-travel-tint); padding-bottom: var(--sf-hm-s7); }
.sf-sg.sf-gb-seite > * { margin-block: 0; }
.sf-sg.sf-gb-seite > * + * { margin-top: var(--sf-hm-abschnitt); }
.sf-sg.sf-gb-seite > .sf-hmnav, .sf-sg.sf-gb-seite > .sf-hb-kapitel + * { margin-top: var(--sf-hm-kopf-abstand); }
.sf-sg.sf-gb-seite > .sf-hmnav { margin-top: 0; }
.sf-sg.sf-gb-seite > .sf-hb-kapitel.sf-hb-kapitel { margin-top: var(--sf-hm-abschnitt); }
.sf-sg-kopf { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--sf-sg-akzent); color: var(--sf-white); overflow: hidden; }
.sf-sg-kopf--bild { min-height: clamp(440px, 62vw, 560px); align-content: end; background: var(--sf-ink); }
.sf-sg-kopf-text { position: relative; z-index: 1; text-shadow: var(--sf-hm-text-schatten); display: flex; flex-direction: column; gap: var(--sf-hm-s3); padding: var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-delivery .sf-sg-kopf .sf-eyebrow, .sf-sg-kopf .sf-eyebrow { margin: 0; color: var(--sf-white); opacity: 0.9; }
.sf-sg .sf-sg-kopf h1 { margin: 0; color: var(--sf-white); font-size: calc(clamp(32px, 7.4vw, 64px) * var(--sf-display-scale)); line-height: 1.02; max-width: 18ch; text-wrap: balance; }
.sf-sg-kopf-bild { position: absolute; inset: 0; margin: 0; }
.sf-sg-kopf-bild::after { content: ""; position: absolute; inset: 0; background: var(--sf-hm-kopf-schleier); pointer-events: none; }
.sf-sg-kopf-bild img { display: block; width: 100%; height: 100%; object-fit: cover; user-select: none; }
.sf-sg-kopf-bild--pano { cursor: grab; touch-action: pan-y; }
.sf-sg-kopf-ziehen { position: absolute; top: var(--sf-hm-s4); left: 50%; z-index: 1; transform: translateX(-50%); padding: 4px 12px; border-radius: 0; background: var(--sf-hm-hinweis-grund); color: var(--sf-white); font-size: var(--sf-size-12); white-space: nowrap; pointer-events: none; }
.sf-sg-lage { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); margin: 0; }
.sf-sg .sf-sg-chip { display: inline-flex; align-items: baseline; gap: 6px; margin: 0; padding: 6px 12px; border: 1px solid var(--sf-hm-glas-rand); border-radius: 0; background: var(--sf-hm-glas); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: var(--sf-white); font-size: var(--sf-size-14); }
.sf-sg-chip dt { order: 2; }
.sf-sg-chip dd, .sf-sg-chip strong { margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); font-size: var(--sf-size-20); line-height: 1; }
.sf-sg-kopf .sf-hb-live.sf-hb-live, .sf-sg-kopf .sf-hb-live-quelle.sf-hb-live-quelle { color: inherit; }
.sf-sg-kopf-kamera { display: inline-flex; align-items: center; gap: var(--sf-hm-s1); }
.sf-sg-chip dd::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: var(--sf-hm-live-gruen); box-shadow: 0 0 0 3px var(--sf-hm-live-ring); vertical-align: 2px; }
.sf-sg-lage--alt .sf-sg-chip dd::before { background: var(--sf-muted); box-shadow: none; }
.sf-sg .sf-sg-chip[data-sf-saison] dd::before { display: none; }
.sf-sg .sf-sg-chip-station { font-size: var(--sf-size-12); opacity: 0.8; }
.sf-sg .sf-sg-chip--ruhig { font-size: var(--sf-size-14); }
.sf-sg .sf-sg-stand { margin: 0; font-size: var(--sf-size-12); opacity: 0.88; }
.sf-sg .sf-sg-kopf-bildzeile { display: flex; flex-wrap: wrap; gap: 2px var(--sf-hm-s2); margin: 0; font-size: var(--sf-size-12); opacity: 0.88; }
.sf-sg .sf-sg-heute-alt { margin: 0; padding: var(--sf-hm-s2) var(--sf-hm-s3); background: var(--sf-caution-tint); color: var(--sf-caution); font-size: var(--sf-size-13); font-weight: 700; }
.sf-sg-anriss { display: flex; flex-direction: column; gap: var(--sf-hm-s3); padding: var(--sf-hm-s4); background: var(--sf-surface); }
.sf-sg .sf-sg-lead { margin: 0; font-size: var(--sf-size-16); line-height: 1.5; color: var(--sf-ink); max-width: 62ch; }
.sf-sg-praesentiert:empty { display: none; }
.sf-sg-praesentiert { padding-top: var(--sf-hm-s3); border-top: 1px solid var(--sf-line); }
.sf-sg-praesentiert .sf-presented-ad { margin: 0; }
@media (max-width: 699px) {
.sf-sg.sf-gb-seite:not(.sf-gb-shop) .sf-gb-oben, .sf-sg.sf-gb-seite:not(.sf-gb-shop) > .sf-hmnav { margin-inline: calc((100% - 100vw) / 2); }
.sf-sg.sf-gb-seite:not(.sf-gb-shop) > .sf-hmnav { padding-inline: calc((100vw - 100%) / 2); }
}
.sf-sg .sf-gb-abschnitt > p, .sf-sg-quelle { margin: 0; font-size: var(--sf-size-13); color: var(--sf-muted); }
.sf-sg-shop-verweis { font-weight: 700; }
.sf-sg-shop-verweis a { color: var(--sf-blue); }
.sf-sg-plan { gap: var(--sf-hm-s2); }
.sf-sg-standbild { margin: 0; }
.sf-sg-kameras-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-sg-kameras-liste figure { margin: 0; }
.sf-sg-kameras-liste img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border: 1px solid var(--sf-line); }
.sf-sg-kameras-liste figcaption { margin-top: var(--sf-hm-s2); }
.sf-sg-kameras-liste small { display: block; color: var(--sf-muted); }
.sf-sg-standbild img, .sf-pp3d-standbild img { display: block; width: 100%; height: auto; border: 1px solid var(--sf-line); }
.sf-sg-standbild figcaption { margin-top: var(--sf-hm-s2); font-weight: 700; }
.sf-sg-standbild a { color: var(--sf-blue); }
.sf-pp3d-standbild { display: flex; flex-direction: column; gap: var(--sf-hm-s3); }
.sf-sg .sf-pp3d-standbild-titel { margin: 0; font-size: var(--sf-sport-h3); }
.sf-pp3d-standbild-knopf { align-self: flex-start; min-height: 44px; padding: var(--sf-hm-s3) var(--sf-hm-s4); border: 0; background: var(--sf-ink); color: var(--sf-white); font-weight: 700; font-size: var(--sf-size-15); cursor: pointer; }
.sf-pp3d-standbild-hinweis { margin: 0; font-size: var(--sf-size-14); color: var(--sf-muted); }
@media (max-width: 899px) {
.sf-sg-plan .pp3d-wurzel .pp3d-zeilen { max-height: 232px; }
}
.sf-sg .sf-pp3d-platzhalter { margin: 0; padding: 72px var(--sf-hm-s4); border: 1px solid var(--sf-line); text-align: center; color: var(--sf-muted); font-size: var(--sf-size-14); }
.sf-sg-zahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--sf-line); border-left: 1px solid var(--sf-line); }
.sf-sg-zahlen > div { display: flex; flex-direction: column; gap: var(--sf-hm-s1); padding: var(--sf-hm-s3); border-right: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); min-width: 0; }
.sf-sg-zahlen dt { font-family: var(--sf-display); font-weight: var(--sf-heading-weight); font-size: calc(clamp(24px, 5vw, 34px) * var(--sf-display-scale)); line-height: 1.04; color: var(--sf-sg-akzent); overflow-wrap: anywhere; }
.sf-sg-zahlen dd { margin: 0; font-size: var(--sf-size-13); line-height: 1.35; color: var(--sf-text); }
.sf-sg .sf-sg-alt { margin: 0; padding: var(--sf-hm-s2) var(--sf-hm-s3); background: var(--sf-caution-tint); color: var(--sf-caution); font-size: var(--sf-size-13); font-weight: 700; }
.sf-sg-story-reihe { display: grid; gap: var(--sf-hm-s3); }
.sf-sg-story-karte { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--sf-hm-s3); align-items: start; padding: var(--sf-hm-s3); border: 1px solid var(--sf-line); color: var(--sf-ink); }
.sf-sg-story-karte:hover { border-color: var(--sf-ink); }
.sf-sg-story-karte img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.sf-sg-story-text { display: flex; flex-direction: column; gap: var(--sf-hm-s1); min-width: 0; }
.sf-sg-story-text strong { font-family: var(--sf-display); font-weight: var(--sf-heading-weight); font-size: var(--sf-size-20); line-height: 1.1; }
.sf-sg-story-text span { color: var(--sf-text); font-size: var(--sf-size-14); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.sf-sg-story-text em { font-style: normal; font-weight: 700; font-size: var(--sf-size-14); color: var(--sf-blue); }
.sf-sg-weiter { display: flex; flex-direction: column; }
.sf-sg-weiter > a, .sf-sg-weiter > details { padding: var(--sf-hm-s2) 0; border-bottom: 1px solid var(--sf-line); }
.sf-sg-weiter > a { color: var(--sf-ink); font-weight: 700; font-size: var(--sf-size-15); }
.sf-sg-weiter .sf-sport-more[open] summary { margin-bottom: var(--sf-hm-s3); }
.sf-sg-weiter .sf-sport-fit-text { margin: 0 0 var(--sf-hm-s3); }
.sf-sg-rennen { display: grid; margin: 0; padding: 0; list-style: none; }
.sf-sg-rennen li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: var(--sf-hm-s3) 0; border-bottom: 1px solid var(--sf-line); }
.sf-sg-rennen time { font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-sg-akzent); }
.sf-sg-rennen span { font-size: var(--sf-size-14); color: var(--sf-muted); }
.sf-sg-anreise-reihe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); }
.sf-sg-anreise-reihe > div { padding-top: var(--sf-hm-s3); border-top: 3px solid var(--sf-ink); }
.sf-sg-anreise-reihe p { margin: 0; font-size: var(--sf-size-15); line-height: 1.5; }
.sf-sg-anreise-reihe .sf-eyebrow { margin-bottom: var(--sf-hm-s1); font-size: var(--sf-size-12); }
.sf-sg-haeuser { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 82%); gap: var(--sf-hm-s3); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--sf-hm-s1); }
.sf-sg-haus { display: flex; flex-direction: column; border: 1px solid var(--sf-line); color: var(--sf-ink); scroll-snap-align: start; min-width: 0; }
.sf-sg-haus:hover { border-color: var(--sf-ink); }
.sf-sg-haus img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sf-sg-haus-text { display: flex; flex-direction: column; gap: var(--sf-hm-s1); padding: var(--sf-hm-s3); }
.sf-sg-haus-text strong { font-size: var(--sf-size-16); }
.sf-sg-haus-text span { font-size: var(--sf-size-14); line-height: 1.45; color: var(--sf-text); }
.sf-sg-haus-text em { font-style: normal; font-size: var(--sf-size-12); font-weight: 700; color: var(--sf-sg-akzent); }
.sf-sg-ausruestung { display: grid; gap: var(--sf-hm-s3); min-width: 0; }
.sf-sg-tipps { display: flex; flex-direction: column; gap: var(--sf-hm-s2); margin: 0; padding: 0; list-style: none; }
.sf-sg-tipps details { padding: var(--sf-hm-s3); border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-sg-tipps summary { display: flex; gap: var(--sf-hm-s2); font-weight: 700; color: var(--sf-ink); cursor: pointer; list-style: none; }
.sf-sg-tipps summary::-webkit-details-marker { display: none; }
.sf-sg-tipps summary::before { content: "+"; flex: none; width: 12px; color: var(--sf-sg-akzent); }
.sf-sg-tipps details[open] summary::before { content: "–"; }
.sf-sg-tipps p { margin: var(--sf-hm-s2) 0 0; font-size: var(--sf-size-14); line-height: 1.5; }
.sf-sg-fuss { display: flex; flex-direction: column; gap: var(--sf-hm-s3); padding-top: var(--sf-hm-s4); border-top: 1px solid var(--sf-line); }
.sf-sg-umschalter { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s2) var(--sf-hm-s4); }
.sf-sg-quellen summary { font-size: var(--sf-size-13); color: var(--sf-muted); cursor: pointer; }
.sf-sg-quellen p { margin: var(--sf-hm-s2) 0 0; font-size: var(--sf-size-13); color: var(--sf-muted); }
@media (min-width: 700px) {
.sf-sg-kopf-text { padding: var(--sf-hm-s6) var(--sf-hm-s6) var(--sf-hm-s5); }
.sf-sg-kopf--bild .sf-sg-kopf-text { max-width: 760px; }
.sf-sg .sf-sg-lead { font-size: var(--sf-size-18); }
.sf-sg-anriss { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sf-hm-s5); padding: var(--sf-hm-s4) var(--sf-hm-s6); }
.sf-sg-praesentiert { flex: none; padding: 0 0 0 var(--sf-hm-s5); border-top: 0; border-left: 1px solid var(--sf-line); }
.sf-sg-zahlen { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.sf-sg-zahlen > div { padding: var(--sf-hm-s4); }
.sf-sg-anreise-reihe { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sf-hm-s5); }
.sf-sg-rennen li { grid-template-columns: 180px minmax(0, 1fr) auto; align-items: baseline; gap: var(--sf-hm-s4); }
}
@media (min-width: 900px) {
.sf-sg-story-reihe { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sf-hm-s5); align-items: start; }
.sf-sg-story-karte { grid-template-columns: 168px minmax(0, 1fr); }
.sf-sg-haeuser { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.sf-sg-ausruestung { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--sf-hm-s5); align-items: start; }
}
.sf-sgl { display: flex; flex-direction: column; gap: var(--sf-hm-s5); padding-bottom: var(--sf-hm-s6); }
.sf-sgl .sf-sgl-zurueck { align-self: flex-start; font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-sgl .sf-sgl-saison { color: var(--sf-section-accent, var(--sf-travel)); text-decoration: none; }
.sf-sgl .sf-sgl-saison::after { content: " →"; }
.sf-sgl .sf-sgl-saison:hover { text-decoration: underline; }
.sf-sgl-laender { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s2); margin-top: var(--sf-hm-s1); }
.sf-sgl-laender span { font-size: var(--sf-hb-text-klein); font-weight: 700; }
.sf-sgl-laender a { display: inline-flex; align-items: center; min-height: var(--sf-hb-steuer-hoehe); padding: 0 var(--sf-hm-s4); border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); font-size: var(--sf-hb-steuer-schrift); font-weight: 700; color: var(--sf-ink); text-decoration: none; }
.sf-sgl-laender a[aria-current="page"] { border-color: var(--sf-ink); background: var(--sf-ink); color: var(--sf-white); }
.sf-sgl-kopf { display: flex; flex-direction: column; gap: var(--sf-hm-s4); padding-top: var(--sf-hm-s3); }
.sf-sgl-kopf-text { display: flex; flex-direction: column; gap: var(--sf-hm-s1); min-width: 0; }
.sf-sgl .sf-sgl-titel { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-display)); font-size: calc(var(--sf-sgl-h1) * var(--sf-display-scale, 1)); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); line-height: 1; text-transform: none; color: var(--sf-ink); overflow-wrap: anywhere; }
.sf-sgl .sf-sgl-unterzeile { margin: 0; font-size: var(--sf-sgl-unter); line-height: 1.35; color: var(--sf-text); }
.sf-sgl .sf-sgl-live { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sf-hm-s4); margin: var(--sf-hm-s1) 0 0; font-size: var(--sf-hb-fein); font-weight: 600; line-height: 1.6; color: var(--sf-ink); }
.sf-sgl .sf-sgl-live .sf-hb-live-punkt { margin-right: calc(var(--sf-hm-s2) - var(--sf-hm-s4)); }
.sf-sgl .sf-sgl-live-wahl { padding: 0; border: 0; border-bottom: 1px dotted currentColor; background: none; font: inherit; color: inherit; cursor: pointer; }
.sf-sgl .sf-sgl-live-wahl[aria-pressed="true"] { border-bottom-style: solid; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-sgl-filter { display: flex; flex-direction: column; gap: var(--sf-hm-s3); min-width: 0; }
.sf-sgl-suchzeile { display: flex; gap: var(--sf-hm-s2); min-width: 0; }
.sf-sgl-suchzeile > .sf-sgl-suchfeld { flex: 1 1 auto; min-width: 0; }
.sf-sgl .sf-sgl-mehr, .sf-sgl .sf-sgl-fertig { display: inline-flex; align-items: center; justify-content: center; gap: var(--sf-hm-s1); min-height: 52px; padding: 0 var(--sf-hm-s3); border: 2px solid var(--sf-ink); border-radius: var(--sf-hb-ecke); background: var(--sf-white); font: inherit; font-size: var(--sf-hb-steuer-schrift); font-weight: 700; color: var(--sf-ink); cursor: pointer; }
.sf-sgl .sf-sgl-mehr[aria-expanded="true"] { background: var(--sf-ink); color: var(--sf-white); }
.sf-sgl .sf-sgl-mehr small { min-width: 20px; padding: 0 5px; border-radius: 10px; background: var(--sf-section-accent, var(--sf-travel)); font-size: var(--sf-hb-mini); line-height: 20px; color: var(--sf-white); }
.sf-sgl .sf-sgl-mehr small[hidden] { display: none; }
.sf-sgl .sf-sgl-fertig { min-height: var(--sf-hb-knopf-hoehe); border-color: var(--sf-ink); background: var(--sf-ink); color: var(--sf-white); }
@media (max-width: 699px) {
.sf-sgl .sf-sgl-gruppen[data-sf-sgl-zu] { display: none; }
.sf-sgl .sf-sgl-bilanz { flex-wrap: nowrap; }
.sf-sgl .sf-sgl-bilanz-rechts .sf-sgl-feld > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sf-sgl .sf-sgl-bilanz-rechts { justify-content: flex-end; gap: 0 var(--sf-hm-s3); min-width: 0; }
.sf-sgl .sf-sgl-bilanz-rechts select { max-width: 150px; }
.sf-sgl .sf-sgl-gruppen { padding: var(--sf-hm-s3) 0; border-block: 1px solid var(--sf-line); }
}
.sf-sgl-suche { display: flex; flex-direction: column; gap: var(--sf-hm-s2); min-width: 0; }
.sf-sgl .sf-sgl-suche-titel { font-size: var(--sf-hb-text-klein); font-weight: 700; line-height: 1.2; color: var(--sf-ink); }
.sf-sgl-suchfeld { display: flex; align-items: center; gap: var(--sf-hm-s2); min-height: 52px; padding: 0 var(--sf-hm-s3); border: 2px solid var(--sf-ink); border-radius: var(--sf-hb-ecke); background: var(--sf-white); color: var(--sf-ink); }
.sf-sgl-suchfeld:focus-within { outline: 2px solid var(--sf-section-accent, var(--sf-travel)); outline-offset: 2px; }
.sf-sgl-suchfeld input { flex: 1 1 auto; min-width: 0; min-height: 48px; padding: 0; border: 0; background: transparent; font: inherit; font-size: var(--sf-size-17); color: var(--sf-ink); outline: none; }
.sf-sgl .sf-sgl-suchfeld input:focus, .sf-sgl .sf-sgl-suchfeld input:focus-visible { outline: none; box-shadow: none; }
.sf-sgl-vorschlaege { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-sgl-vorschlaege li + li { border-top: 1px solid var(--sf-line); }
.sf-sgl-vorschlaege a { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 var(--sf-hm-s3); min-height: 44px; padding: var(--sf-hm-s2) var(--sf-hm-s3); font-weight: 700; color: var(--sf-ink); text-decoration: none; }
.sf-sgl-vorschlaege a:hover, .sf-sgl-vorschlaege a:focus { background: var(--sf-surface); }
.sf-sgl-vorschlaege small { font-weight: 400; color: var(--sf-muted); }
.sf-sgl .sf-sgl-vorschlaege[hidden] { display: none; }
.sf-sgl-gruppen { display: flex; flex-direction: column; gap: var(--sf-hm-s2); min-width: 0; }
.sf-sgl-gruppe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s1); min-width: 0; }
.sf-sgl .sf-sgl-gruppe-titel { font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-ink); }
.sf-sgl-gruppe-wahl { display: flex; flex-direction: column; gap: var(--sf-hm-s1); min-width: 0; }
.sf-sgl-gruppe-wahl.sf-sgl-reihe { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s1) var(--sf-hm-s2); }
.sf-sgl-gruppe-wahl > div { min-width: 0; max-width: 100%; }
.sf-sgl .sf-sgl-gruppe-wahl .sf-hb-auswahl { flex-wrap: wrap; overflow: visible; }
.sf-sgl .sf-sgl-gruppe-wahl .sf-hb-auswahl.sf-hb-auswahl { gap: var(--sf-hm-s1); }
.sf-sgl .sf-sgl-gruppe-wahl .sf-hb-wahl.sf-hb-wahl { gap: var(--sf-hm-s1); min-height: 40px; padding: 0 var(--sf-hm-s3); }
.sf-sgl .sf-sgl-feld select { min-height: 40px; }
.sf-sgl .sf-sgl-unter[hidden] { display: none; }
.sf-sgl .sf-sgl-unter .sf-hb-wahl { border-style: dashed; }
.sf-sgl-feld { display: flex; flex-direction: column; gap: var(--sf-hm-s1); min-width: 0; font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-ink); }
.sf-sgl-feld--inline { flex-direction: row; align-items: center; gap: var(--sf-hm-s2); }
.sf-sgl-feld select { min-height: var(--sf-hb-steuer-hoehe); max-width: 100%; padding: 0 var(--sf-hm-s2); border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-white); font: inherit; font-size: var(--sf-hb-steuer-schrift); font-weight: 400; color: var(--sf-ink); }
.sf-sgl-reihe > .sf-sgl-feld:not(.sf-sgl-feld--inline) { flex-direction: row; align-items: center; gap: var(--sf-hm-s2); }
.sf-sgl .sf-sgl-anzahl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sf-hm-s2); margin: 0; min-width: 0; font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-sgl .sf-sgl-anzahl strong { font-family: var(--sf-display); font-size: var(--sf-size-17); font-weight: 600; color: var(--sf-ink); }
.sf-sgl-bilanz-rechts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s3); }
.sf-sgl-bilanz { padding-top: var(--sf-hm-s2); border-top: 1px solid var(--sf-line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-hm-s2); }
.sf-sgl-bilanz button { min-height: 44px; padding: 0; border: 0; background: transparent; color: var(--sf-ink); font: inherit; text-decoration: underline; cursor: pointer; }
.sf-sgl .sf-sgl-auswahl { margin: 0; font-size: var(--sf-hb-fein); font-weight: 600; }
.sf-sgl [data-sf-sgl-auswahl][hidden], .sf-sgl [data-sf-sgl-reset][hidden] { display: none; }
.sf-sgl-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5) var(--sf-hm-s4); margin: 0; padding: 0; list-style: none; }
.sf-sgl-karte { display: flex; min-width: 0; }
.sf-sgl-karte > .sf-hb-karte { flex: 1 1 auto; }
.sf-sgl .sf-sgl-karte .sf-hb-kapitel--karte { color: var(--sf-section-accent, var(--sf-travel)); }
.sf-sgl .sf-sgl-karte--anzeige > .sf-hb-karte { border-color: var(--sf-section-accent, var(--sf-travel)); }
.sf-sgl-lage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s2) var(--sf-hm-s3); padding: var(--sf-hm-s3) 0; border-block: 1px solid var(--sf-line); }
.sf-sgl-lage > span { display: flex; flex-direction: column-reverse; gap: 2px; min-width: 0; }
.sf-sgl-lage small { font-size: var(--sf-hb-mini); line-height: 1.3; color: var(--sf-muted); }
.sf-sgl-lage strong { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl-klein); font-weight: var(--sf-hb-zahl-gewicht, var(--sf-hb-titel-gewicht)); line-height: 1.05; color: var(--sf-ink); }
.sf-sgl-lage--alt strong { color: var(--sf-text); }
.sf-sgl-keine, .sf-sgl-fakten { display: block; }
.sf-sgl-keine { color: var(--sf-muted); }
.sf-sgl-kamera { display: inline-flex; align-items: center; gap: var(--sf-hm-s2); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-sgl-fakten small { color: var(--sf-muted); }
.sf-sgl-partner { grid-column: 1 / -1; }
.sf-sgl-partner:empty { display: none; }
.sf-sgl .sf-sgl-leer { margin: 0; padding: var(--sf-hm-s4); border: 1px solid var(--sf-line); }
.sf-sgl-leer button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--sf-section-accent, var(--sf-travel)); text-decoration: underline; cursor: pointer; }
.sf-sgl-seo, .sf-sgl-fragen { max-width: 72ch; }
.sf-sgl .sf-sgl-seo h2, .sf-sgl .sf-sgl-fragen h2 { margin: 0 0 var(--sf-hm-s3); font-size: var(--sf-hb-h3); }
.sf-sgl .sf-sgl-seo p, .sf-sgl .sf-sgl-fragen p { margin: 0 0 var(--sf-hm-s3); font-size: var(--sf-hb-text); line-height: 1.55; }
.sf-sgl .sf-sgl-fragen h3 { margin: var(--sf-hm-s4) 0 var(--sf-hm-s2); font-family: var(--sf-body); font-size: var(--sf-size-17); line-height: 1.3; }
@media (min-width: 700px) {
.sf-sgl .sf-sgl-mehr, .sf-sgl .sf-sgl-fertig { display: none; }
.sf-sgl .sf-sgl-gruppe { grid-template-columns: 9.5em minmax(0, 1fr); align-items: start; gap: var(--sf-hm-s3); }
.sf-sgl .sf-sgl-gruppe-titel { padding-top: 9px; }
.sf-sgl .sf-sgl-gruppe-wahl .sf-hb-wahl.sf-hb-wahl { min-height: 36px; }
.sf-sgl .sf-sgl-feld select { min-height: 36px; }
.sf-sgl-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.sf-sgl-kopf { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "text suche"; align-items: end; gap: var(--sf-hm-s4) var(--sf-hm-s6); }
.sf-sgl-kopf-text { grid-area: text; }
.sf-sgl .sf-sgl-filter:not([hidden]) { display: contents; }
.sf-sgl .sf-sgl-suche { grid-area: suche; }
.sf-sgl .sf-sgl-gruppen, .sf-sgl .sf-sgl-auswahl, .sf-sgl .sf-sgl-bilanz { grid-column: 1 / -1; }
.sf-sgl .sf-sgl-gruppen { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: var(--sf-hm-s2) var(--sf-hm-s5); }
.sf-sgl .sf-sgl-gruppe { display: flex; flex: 0 1 auto; flex-direction: column; gap: var(--sf-hm-s1); max-width: 100%; }
.sf-sgl .sf-sgl-gruppe-titel { padding-top: 0; }
.sf-sgl .sf-sgl-gruppe-wahl .sf-hb-wahl.sf-hb-wahl { min-height: 34px; padding: 0 var(--sf-hm-s2); }
.sf-sgl .sf-sgl-feld select { min-height: 34px; }
}
@media (min-width: 1100px) {
.sf-sgl-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-sgl-orte, .sf-sgl-merkmale { display: block; font-size: var(--sf-hb-fein); color: var(--sf-text); }
.sf-sgl-orte small { font-size: inherit; color: var(--sf-muted); }
.sf-sgl-merkmale { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s1) var(--sf-hm-s2); }
.sf-sgl .sf-sgl-weit { font-weight: 700; color: var(--sf-ink); }
.sf-sgl .sf-sgl-marke { padding: 1px var(--sf-hm-s2); border: 1px solid var(--sf-line); font-size: var(--sf-hb-mini); font-weight: 700; color: var(--sf-text); }
.sf-sgl-verzeichnis { display: flex; flex-direction: column; gap: var(--sf-hm-s3); padding-top: var(--sf-hm-s4); border-top: 1px solid var(--sf-line); }
.sf-sgl .sf-sgl-verzeichnis h2 { margin: 0; font-size: var(--sf-hb-h3); }
.sf-sgl-verzeichnis-laender { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); }
.sf-sgl .sf-sgl-verzeichnis h3 { margin: 0 0 var(--sf-hm-s2); font-family: var(--sf-body); font-size: var(--sf-size-17); }
.sf-sgl .sf-sgl-verzeichnis p { margin: 0 0 var(--sf-hm-s2); font-size: var(--sf-hb-fein); line-height: 1.6; color: var(--sf-text); }
.sf-sgl .sf-sgl-verzeichnis strong { color: var(--sf-ink); }
.sf-sgl .sf-sgl-verzeichnis a { color: var(--sf-ink); }
@media (min-width: 700px) {
.sf-sgl-gruppe { grid-template-columns: 150px minmax(0, 1fr); align-items: start; gap: var(--sf-hm-s3); }
.sf-sgl .sf-sgl-gruppe-titel { padding-top: var(--sf-hm-s2); }
.sf-sgl-verzeichnis-laender { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-sgl .sf-sgl-filter[hidden], .sf-sgl .sf-sgl-leer[hidden], .sf-sgl .sf-sgl-karte[hidden], .sf-sgl .sf-sgl-partner[hidden] { display: none; }
.sf-sg-scrollstory { grid-column: 1 / -1; min-width: 0; }
.sf-sg .sf-sg-fakten { margin: 0 0 16px; }
.sf-sg .sf-sg-fakten dl { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 6px 0; }
.sf-sg .sf-sg-fakten dl div { display: flex; flex-direction: column; gap: 2px; }
.sf-sg .sf-sg-fakten dt { font-size: var(--sf-size-12); opacity: 0.8; }
.sf-sg .sf-sg-fakten dd { margin: 0; font-size: var(--sf-size-16); font-weight: var(--sf-heading-weight); }
.sf-sg .sf-sg-hinweis { margin: 0; padding: var(--sf-hm-s2) var(--sf-hm-s3); background: var(--sf-caution-tint); color: var(--sf-text); font-size: var(--sf-size-13); line-height: 1.4; }
.sf-sg .sf-sg-hinweis small { color: var(--sf-muted); }
.sf-sgl .sf-sgl-skipass { margin: 0; }
.sf-sgl .sf-hb-pk.sf-sgl-club { gap: 0; padding: 0; overflow: hidden; border: 0; background: var(--sf-club-tint); color: var(--sf-ink); text-decoration: none; }
.sf-sgl .sf-sgl-club-buehne { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--sf-hm-s3); aspect-ratio: var(--sf-hb-bild); padding: var(--sf-hm-s4); overflow: hidden; background: radial-gradient(120% 90% at 100% 0%, color-mix(in oklab, var(--sf-white) 22%, transparent), transparent 60%), var(--sf-club); color: var(--sf-white); }
.sf-sgl .sf-sgl-club-marke { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.sf-sgl .sf-sgl-club-gross { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: clamp(2rem, 3.4vw, 2.75rem); line-height: 1; text-transform: uppercase; }
.sf-sgl .sf-sgl-club-stufen { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1); }
.sf-sgl .sf-sgl-club-stufen span { padding: 3px 10px; border-radius: 999px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--sf-white) 55%, transparent); font-size: var(--sf-hb-mini); font-weight: 700; }
.sf-sgl .sf-sgl-club-stufen span:nth-child(1) { background: var(--sf-club-member); color: var(--sf-club-member-ink); }
.sf-sgl .sf-sgl-club-stufen span:nth-child(2) { background: var(--sf-club-premium); color: var(--sf-club-premium-ink); }
.sf-sgl .sf-sgl-club-stufen span:nth-child(3) { background: var(--sf-club-vip); color: var(--sf-club-vip-ink); }
.sf-sgl .sf-sgl-club-inhalt { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sf-hm-s2); padding: var(--sf-hm-s4); }
.sf-sgl .sf-sgl-club-titel { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); }
.sf-sgl .sf-sgl-club-text { font-size: var(--sf-hb-fein); line-height: 1.5; color: var(--sf-text); }
.sf-sgl .sf-sgl-club-vorteile { display: grid; gap: var(--sf-hm-s1); margin-block: var(--sf-hm-s1); }
.sf-sgl .sf-sgl-club-vorteile span { position: relative; padding-left: 1.6em; font-size: var(--sf-hb-fein); font-weight: 600; }
.sf-sgl .sf-sgl-club-vorteile span::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--sf-club); color: var(--sf-white); font-size: 0.8em; line-height: 1.5em; text-align: center; }
.sf-sgl .sf-sgl-club-knopf { align-self: flex-start; margin-top: auto; padding: 10px 18px; border-radius: var(--sf-hb-ecke, 4px); background: var(--sf-club); color: var(--sf-white); font-size: var(--sf-hb-fein); font-weight: 700; }
.sf-sgl .sf-sgl-club:hover .sf-sgl-club-knopf, .sf-sgl .sf-sgl-club:focus-visible .sf-sgl-club-knopf { background: var(--sf-ink); }
.sf-sgl .sf-sgl-club:focus-visible { outline: 3px solid var(--sf-club); outline-offset: 2px; }
/* skigebiete-erleben.css */
.sf-ske { container: sf-ske / inline-size; display: grid; min-width: 0; }
.sf-ske-inhalt { display: grid; gap: var(--sf-hm-abschnitt); min-width: 0; padding-block: var(--sf-hm-s5) var(--sf-hm-abschnitt); }
.sf-ske-abschnitt { display: grid; gap: var(--sf-hm-s4); min-width: 0; scroll-margin-top: var(--sf-hm-s4); }
.sf-ske-sprung { display: grid; gap: var(--sf-hm-s2); padding-block: var(--sf-hm-s3); border-bottom: 1px solid var(--sf-line); }
.sf-ske-sprung-titel.sf-ske-sprung-titel { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-ske-erleben.sf-ske-erleben { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); margin: 0; padding: 0; list-style: none; }
.sf-ske-ek.sf-ske-ek { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-text); text-decoration: none; }
.sf-ske-ek.sf-ske-ek:hover { border-color: var(--sf-ink); }
.sf-ske-ek-bild { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sf-hb-buehne-grund); }
.sf-ske-ek-bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.sf-ske-ek.sf-ske-ek:hover .sf-ske-ek-bild img { transform: scale(1.04); }
.sf-ske-marke { position: absolute; top: var(--sf-hm-s3); left: var(--sf-hm-s3); padding: var(--sf-hm-s1) var(--sf-hm-s2); background: var(--sf-ink); color: var(--sf-white); font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-ske-ek-text { display: grid; gap: var(--sf-hm-s2); align-content: start; padding: var(--sf-hm-s4); }
.sf-ske-ek-titel.sf-ske-ek-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); color: var(--sf-ink); }
.sf-ske-ek-satz { font-size: var(--sf-hb-text); line-height: 1.45; }
.sf-ske-radar { position: relative; display: grid; align-content: end; min-height: var(--sf-hb-bildkopf-hoehe-kompakt); overflow: hidden; background: var(--sf-hb-buehne-grund); color: var(--sf-white); }
.sf-ske-radar-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 66%; }
.sf-ske-radar-schleier { position: absolute; inset: 0; background: linear-gradient( 0deg, var(--sf-hb-schleier-unten) 0%, var(--sf-hb-schleier-mitte) 60%, var(--sf-hb-schleier-leicht) 100% ); }
.sf-ske-radar-text { position: relative; display: grid; gap: var(--sf-hm-s3); max-width: 720px; padding: var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-ske-radar-kapitel.sf-ske-radar-kapitel { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-hb-hell-text); }
.sf-ske-radar-titel.sf-ske-radar-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h2); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; text-transform: uppercase; color: var(--sf-white); }
.sf-ske-radar-satz.sf-ske-radar-satz { margin: 0; max-width: 56ch; font-size: var(--sf-hb-text); line-height: 1.45; color: var(--sf-white); }
.sf-ske-radar-rang { display: grid; gap: var(--sf-hm-s1); max-width: 460px; }
.sf-ske-radar-rang-titel.sf-ske-radar-rang-titel { margin: 0; font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-hb-hell-text); }
.sf-ske-radar-liste.sf-ske-radar-liste { margin: 0; padding: 0; list-style: none; }
.sf-ske-radar-liste a.sf-ske-radar-zeile { display: grid; grid-template-columns: 2ch minmax(0, 1fr) auto; align-items: baseline; gap: var(--sf-hm-s3); padding: var(--sf-hm-s2) 0; border-top: 1px solid var(--sf-st-motive-linie); color: var(--sf-white); text-decoration: none; }
.sf-ske-radar-liste li:last-child a.sf-ske-radar-zeile { border-bottom: 1px solid var(--sf-st-motive-linie); }
.sf-ske-radar-platz { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-text); font-weight: var(--sf-hb-titel-gewicht); color: var(--sf-hb-hell-text); }
.sf-ske-radar-name { font-size: var(--sf-hb-text); font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.sf-ske-radar-liste a.sf-ske-radar-zeile:hover .sf-ske-radar-name, .sf-ske-radar-liste a.sf-ske-radar-zeile:focus-visible .sf-ske-radar-name { text-decoration: underline; }
.sf-ske-radar-cm { font-size: var(--sf-hb-text); font-weight: 700; white-space: nowrap; }
.sf-ske-radar-knopf { justify-self: start; }
.sf-ske-wahlzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-hm-s3); }
.sf-ske-wahlzeile.sf-ske-wahlzeile--allein { justify-content: flex-end; }
.sf-ske-wahlzeile:has(.sf-ske-sprung-link) { flex-wrap: nowrap; gap: var(--sf-hm-s2); padding-block: var(--sf-hm-s2); border-block: 1px solid var(--sf-line); }
.sf-ske-wahlzeile:has(.sf-ske-sprung-link) > * { flex: none; }
.sf-ske-wahlzeile a.sf-ske-sprung-link { flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: var(--sf-hm-s2); min-height: 44px; font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-ink); text-decoration: none; }
.sf-ske-wahlzeile a.sf-ske-sprung-link::after { content: "↓"; color: var(--sf-section-accent, var(--sf-ink)); }
.sf-ske-wahlzeile a.sf-ske-sprung-link:hover { text-decoration: underline; }
.sf-ske-kacheln.sf-ske-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-ske-kachel { display: grid; min-width: 0; }
.sf-ske-kachel-link.sf-ske-kachel-link { display: grid; grid-template-rows: auto 1fr; height: 100%; border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-text); text-decoration: none; }
.sf-ske-kachel-link.sf-ske-kachel-link:hover { border-color: var(--sf-ink); }
.sf-ske-kachel-bild { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sf-hb-buehne-grund); }
.sf-ske-kachel-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.sf-ske-kachel-link.sf-ske-kachel-link:hover .sf-ske-kachel-bild img { transform: scale(1.04); }
.sf-ske-kachel-schleier { position: absolute; inset: 0; background: linear-gradient(0deg, var(--sf-hb-schleier-unten) 0%, var(--sf-hb-schleier-null) 52%); }
.sf-ske-kachel-name { position: absolute; right: var(--sf-hm-s3); bottom: var(--sf-hm-s3); left: var(--sf-hm-s3); display: grid; gap: var(--sf-hm-s1); color: var(--sf-white); }
.sf-ske-kachel-ort { font-size: var(--sf-hb-mini); font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-ske-kachel-titel.sf-ske-kachel-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hm-karte-name); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; text-transform: uppercase; color: var(--sf-white); overflow-wrap: anywhere; }
.sf-ske-vermerk { position: absolute; top: 0; right: 0; max-width: 100%; padding: 2px var(--sf-hm-s1); background: var(--sf-hb-vermerk-grund); font-size: var(--sf-hb-mini); line-height: 1.3; text-align: right; color: var(--sf-white); }
.sf-ske-dreid { position: absolute; top: var(--sf-hm-s2); left: var(--sf-hm-s2); padding: 2px var(--sf-hm-s2); background: var(--sf-ink); color: var(--sf-white); font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-ske-kachel-text { display: grid; gap: var(--sf-hm-s2); align-content: start; padding: var(--sf-hm-s3); }
.sf-ske-satz { font-size: var(--sf-hb-text-klein); line-height: 1.4; color: var(--sf-ink); }
.sf-ske-neu { font-size: var(--sf-hb-fein); font-weight: 700; line-height: 1.3; color: var(--sf-ink); }
.sf-ske-neu::before { content: ""; display: inline-block; width: var(--sf-hm-s2); height: var(--sf-hm-s2); margin-right: var(--sf-hm-s2); background: var(--sf-hm-winter); vertical-align: 1px; }
.sf-ske-erlebnisse { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1); }
.sf-ske-erlebnisse span { padding: 2px var(--sf-hm-s2); border: 1px solid var(--sf-section-accent, var(--sf-ink)); color: var(--sf-section-accent, var(--sf-ink)); font-size: var(--sf-hb-mini); font-weight: 700; line-height: 1.3; }
.sf-ske-berater.sf-ske-berater { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-ske-berater a.sf-ske-berater-link { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--sf-hm-s3); height: 100%; padding: var(--sf-hm-s3) var(--sf-hm-s4); border: 1px solid var(--sf-line); border-left: var(--sf-hm-s1) solid var(--sf-section-accent, var(--sf-ink)); color: var(--sf-text); text-decoration: none; }
.sf-ske-berater a.sf-ske-berater-link:hover { border-color: var(--sf-ink); }
.sf-ske-berater-bild { display: block; width: var(--sf-hmv-bild); height: var(--sf-hmv-bild); overflow: hidden; background: var(--sf-hmv-symbol-grund); }
.sf-ske-berater-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-ske-berater-bild[data-sf-produkt] img { object-fit: contain; mix-blend-mode: multiply; }
.sf-ske-berater-text { display: grid; gap: var(--sf-hm-s1); min-width: 0; }
.sf-ske-berater-titel { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; text-transform: uppercase; color: var(--sf-ink); }
.sf-ske-berater-satz { font-size: var(--sf-hb-text-klein); line-height: 1.4; }
.sf-ske-tipps.sf-ske-tipps { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-ske-tipps li { display: grid; gap: var(--sf-hm-s1); padding-top: var(--sf-hm-s3); border-top: 1px solid var(--sf-line); font-size: var(--sf-hb-text-klein); line-height: 1.45; }
.sf-ske-tipps b { color: var(--sf-ink); }
.sf-sgl.sf-ske-club { display: flex; gap: 0; padding-bottom: 0; }
.sf-sgl.sf-ske-club:empty { display: none; }
.sf-ske-marken { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); }
.sf-ske-zwei { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); align-items: start; }
.sf-ske-story { display: grid; gap: var(--sf-hm-s3); min-width: 0; }
.sf-ske-gruende.sf-ske-gruende { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); margin: 0; padding: 0; list-style: none; counter-reset: sf-ske-grund; }
.sf-ske-grund { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--sf-line); counter-increment: sf-ske-grund; }
.sf-ske-grund-bild { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--sf-hb-buehne-grund); }
.sf-ske-grund-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-ske-grund-text { display: grid; gap: var(--sf-hm-s2); align-content: start; padding: var(--sf-hm-s4); }
.sf-ske-grund-text::before { content: counter(sf-ske-grund, decimal-leading-zero); font-size: var(--sf-hb-fein); font-weight: 700; letter-spacing: 0.08em; color: var(--sf-section-accent, var(--sf-ink)); }
.sf-ske-grund-titel.sf-ske-grund-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.05; color: var(--sf-ink); }
.sf-ske-grund-satz.sf-ske-grund-satz { margin: 0; font-size: var(--sf-hb-text); line-height: 1.45; color: var(--sf-ink); }
.sf-ske-runden { display: grid; gap: var(--sf-hm-s3); }
.sf-ske-runden .sf-hb-wahl.sf-hb-wahl, .sf-ske-sprung .sf-hb-wahl.sf-hb-wahl { flex: 0 1 auto; max-width: 100%; white-space: normal; text-align: left; }
.sf-ske-runde-zeit { display: block; font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-muted); }
.sf-ske-runde-satz.sf-ske-runde-satz { margin: 0; max-width: 64ch; font-size: var(--sf-hb-text); line-height: 1.45; color: var(--sf-ink); }
.sf-ske-runden-liste.sf-ske-runden-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-ske-runden-liste li { display: grid; gap: var(--sf-hm-s1); padding: var(--sf-hm-s3) var(--sf-hm-s4); border-left: var(--sf-hm-s1) solid var(--sf-section-accent, var(--sf-ink)); background: var(--sf-hm-farbe-f5f5f3); font-size: var(--sf-hb-text); line-height: 1.45; }
.sf-ske-runden-liste b { color: var(--sf-ink); }
.sf-ske-runden-liste small { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-ske-plan { min-width: 0; }
.sf-ske-schnee { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--sf-line); }
.sf-ske-schnee-bild { display: grid; align-content: center; overflow: hidden; background: var(--sf-hb-relief-grund); }
.sf-ske-schnee-text { display: grid; gap: var(--sf-hm-s3); align-content: center; padding: var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-ske-schnee-aussage.sf-ske-schnee-aussage { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.15; color: var(--sf-ink); }
.sf-ske-schnee-klein { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-ske-weltcup.sf-ske-weltcup { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--sf-ink); color: var(--sf-white); text-decoration: none; }
.sf-ske-weltcup-bild { position: relative; display: block; min-height: 220px; overflow: hidden; }
.sf-ske-weltcup-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-ske-weltcup-text { display: grid; gap: var(--sf-hm-s3); align-content: center; padding: var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-ske-weltcup-kapitel { font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-hb-hell-text); }
.sf-ske-weltcup-titel.sf-ske-weltcup-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h2); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; text-transform: uppercase; color: var(--sf-white); }
.sf-ske-weltcup-satz { max-width: 56ch; font-size: var(--sf-hb-text); line-height: 1.45; }
.sf-ske-weltcup-weiter { font-size: var(--sf-hb-text); font-weight: 700; }
.sf-ske-weltcup-weiter::after { content: " →"; }
.sf-ske-weiter-liste.sf-ske-weiter-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-ske-weiter-liste a.sf-ske-weiter-link { display: grid; gap: var(--sf-hm-s1); height: 100%; padding: var(--sf-hm-s4); border: 1px solid var(--sf-line); border-top: var(--sf-hm-s1) solid var(--sf-section-accent, var(--sf-ink)); color: var(--sf-ink); text-decoration: none; }
.sf-ske-weiter-liste a.sf-ske-weiter-link:hover { border-color: var(--sf-ink); }
.sf-ske-weiter-titel { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.05; }
.sf-ske-weiter-art { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-ske-az { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s6); }
.sf-ske-az-sprung.sf-ske-az-sprung { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); margin: 0; padding: 0; list-style: none; }
.sf-ske-az-sprung a { display: inline-flex; align-items: center; gap: var(--sf-hm-s2); min-height: 40px; padding: 0 var(--sf-hm-s3); border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-ink); font-size: var(--sf-hb-text-klein); font-weight: 700; text-decoration: none; }
.sf-ske-az-sprung a:hover { border-color: var(--sf-ink); }
.sf-ske-az-zahl { font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 400; color: var(--sf-muted); }
.sf-ske-az-land { display: grid; align-content: start; gap: var(--sf-hm-s3); min-width: 0; padding-top: var(--sf-hm-s4); border-top: 2px solid var(--sf-ink); scroll-margin-top: var(--sf-hm-s6); }
.sf-ske-az-titel.sf-ske-az-titel { display: flex; align-items: baseline; gap: var(--sf-hm-s2); margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.1; color: var(--sf-ink); }
.sf-ske-az-titel a.sf-ske-az-landlink { color: inherit; text-decoration: none; }
.sf-ske-az-titel a.sf-ske-az-landlink::after { content: " →"; color: var(--sf-section-accent, var(--sf-ink)); }
.sf-ske-az-titel a.sf-ske-az-landlink:hover { text-decoration: underline; }
.sf-ske-az-region { display: grid; gap: var(--sf-hm-s2); min-width: 0; }
.sf-ske-az-regiontitel.sf-ske-az-regiontitel { margin: var(--sf-hm-s2) 0 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-muted)); }
.sf-ske-az-liste.sf-ske-az-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--sf-hm-s4); margin: 0; padding: 0; list-style: none; }
.sf-ske-az-liste li { min-width: 0; border-bottom: 1px solid var(--sf-line); }
.sf-ske-az-liste a.sf-ske-az-link { display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: center; gap: var(--sf-hm-s3); padding: var(--sf-hm-s2) 0; color: var(--sf-ink); text-decoration: none; }
.sf-ske-az-bild { position: relative; display: block; width: 56px; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sf-line); }
.sf-ske-az-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-ske-az-dreid { position: absolute; right: 0; bottom: 0; padding: 0 var(--sf-hm-s1); background: var(--sf-ink); color: var(--sf-white); font-size: var(--sf-hb-mini); font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; }
.sf-ske-az-text { display: grid; gap: var(--sf-hm-s1); min-width: 0; }
.sf-ske-az-name { font-size: var(--sf-hb-text-klein); font-weight: 700; line-height: 1.25; }
.sf-ske-az-zeile { font-size: var(--sf-hb-fein); line-height: 1.3; color: var(--sf-muted); }
.sf-ske-az-zeile[data-sf-neu] { color: var(--sf-section-accent, var(--sf-ink)); font-weight: 700; }
.sf-ske-az-liste a.sf-ske-az-link:hover .sf-ske-az-name { text-decoration: underline; }
.sf-ske-laender { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s4); font-size: var(--sf-hb-text-klein); }
.sf-ske-laender-label { font-weight: 700; color: var(--sf-ink); }
.sf-ske-fuss { display: grid; gap: var(--sf-hm-s3); padding-top: var(--sf-hm-s4); border-top: 1px solid var(--sf-line); }
.sf-ske-fuss-wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s3) var(--sf-hm-s5); }
.sf-ske-lizenz.sf-ske-lizenz { margin: 0; font-size: var(--sf-hb-mini); line-height: 1.4; color: var(--sf-muted); }
@container sf-ske (min-width: 640px) {
.sf-ske-berater.sf-ske-berater, .sf-ske-tipps.sf-ske-tipps, .sf-ske-weiter-liste.sf-ske-weiter-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-ske-marken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-ske-schnee { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.sf-ske-weltcup.sf-ske-weltcup { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.sf-ske-az-liste.sf-ske-az-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-ske-radar-text { padding: var(--sf-hm-s6); }
.sf-ske-kachel-titel.sf-ske-kachel-titel { font-size: var(--sf-hb-h3); }
}
@container sf-ske (min-width: 900px) {
.sf-ske-erleben.sf-ske-erleben, .sf-ske-gruende.sf-ske-gruende { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-ske-kacheln.sf-ske-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sf-hm-s4); }
.sf-ske-zwei { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.sf-ske-runden-liste.sf-ske-runden-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-ske-az-liste.sf-ske-az-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container sf-ske (min-width: 640px) {
.sf-ske-erleben.sf-ske-erleben[data-sf-anzahl="1"] { grid-template-columns: minmax(0, 1fr); }
.sf-ske-erleben[data-sf-anzahl="1"] .sf-ske-ek.sf-ske-ek { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); grid-template-rows: auto; }
.sf-ske-erleben[data-sf-anzahl="1"] .sf-ske-ek-text { align-content: center; padding: var(--sf-hm-s5); }
.sf-ske-erleben.sf-ske-erleben[data-sf-anzahl="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
.sf-ske-ek-bild img, .sf-ske-kachel-bild img { transition: none; }
}
.sf-ske-plan .pp3d-wurzel { max-width: none; margin-inline: 0; }
.sf-ske-story--kurz .sf-skg .skg-wurzel .kapitel { margin-bottom: 18vh; }
.sf-ske-gut { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--sf-hm-s5) var(--sf-hm-s6, 32px); }
.sf-ske-gut-spalte { display: grid; gap: var(--sf-hm-s3); align-content: start; min-width: 0; }
.sf-ske-gut-titel.sf-ske-gut-titel { margin: 0; font-size: var(--sf-size-15, 15px); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-muted); }
.sf-ske-gut-liste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.sf-ske-gut-liste li { display: grid; gap: 2px; padding: var(--sf-hm-s3) 0; border-top: 1px solid var(--sf-line); line-height: 1.45; }
.sf-ske-gut-liste li:last-child { border-bottom: 1px solid var(--sf-line); }
.sf-ske-gut-liste small { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-ske-einstieg { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); margin: var(--sf-hm-s4) 0 var(--sf-hm-s5); }
.sf-ske-einstieg-text { display: grid; gap: var(--sf-hm-s3); align-content: center; min-width: 0; }
.sf-ske-einstieg-kicker.sf-ske-einstieg-kicker { margin: 0; font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-ske-einstieg-titel.sf-ske-einstieg-titel { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); font-size: clamp(40px, 5.2vw, 68px); line-height: 0.95; color: var(--sf-ink); text-wrap: balance; }
.sf-ske-einstieg-lead.sf-ske-einstieg-lead { margin: 0; max-width: 34em; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: var(--sf-ink); }
.sf-ske-einstieg-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: var(--sf-hm-s3); margin: var(--sf-hm-s1) 0 0; padding: var(--sf-hm-s3) 0; border-top: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); }
.sf-ske-einstieg-zahlen div { display: grid; gap: 2px; }
.sf-ske-einstieg-zahlen dd { order: -1; margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: var(--sf-hb-zahl-klein); line-height: 1; color: var(--sf-ink); font-variant-numeric: tabular-nums; }
.sf-ske-einstieg-zahlen dt { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-ske-einstieg-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); margin-top: var(--sf-hm-s1); }
.sf-ske-einstieg-bild { position: relative; margin: 0; min-width: 0; }
.sf-ske-einstieg-bild img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sf-ske-einstieg-bild figcaption { position: absolute; right: 8px; bottom: 6px; font-size: var(--sf-hb-mini); color: var(--sf-white); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6); }
.sf-ske-kapitel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: var(--sf-hm-s2); overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 2px; }
.sf-ske-kapitel-kachel.sf-ske-kapitel-kachel { display: grid; gap: var(--sf-hm-s1); align-content: start; min-height: 88px; padding: var(--sf-hm-s3); border-top: 3px solid var(--sf-section-accent, var(--sf-travel)); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; scroll-snap-align: start; }
.sf-ske-kapitel-kachel b { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: 20px; line-height: 1.1; }
.sf-ske-kapitel-kachel span { font-size: var(--sf-hb-text-klein); line-height: 1.35; color: var(--sf-muted); }
.sf-ske-kapitel-kachel:hover b { text-decoration: underline; }
@media (min-width: 900px) {
.sf-ske-einstieg { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); column-gap: var(--sf-hm-s6, 32px); row-gap: var(--sf-hm-s5); }
.sf-ske-kapitel { grid-column: 1 / -1; grid-auto-flow: row; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); overflow: visible; }
}
@media (max-width: 899px) {
.sf-ske-einstieg-bild { order: -1; }
.sf-ske-einstieg-bild img { aspect-ratio: 16 / 10; }
}
.sf-ske-basislager.sf-ske-basislager { display: grid; grid-template-columns: minmax(0, 1fr); margin-top: var(--sf-hm-s4); background: var(--sf-ink); color: var(--sf-white); text-decoration: none; }
.sf-ske-basislager-bild img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.sf-ske-basislager-text { display: grid; gap: var(--sf-hm-s3); align-content: center; padding: var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-ske-basislager-kicker { font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.8; }
.sf-ske-basislager-titel { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: clamp(30px, 3.4vw, 44px); line-height: 1; text-wrap: balance; }
.sf-ske-basislager-satz { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.5; max-width: 30em; }
.sf-ske-basislager-knopf { justify-self: start; display: inline-flex; align-items: center; min-height: var(--sf-hb-knopf-hoehe); padding: 0 var(--sf-hm-s4); background: var(--sf-white); color: var(--sf-ink); font-weight: 700; font-size: 15px; }
.sf-ske-basislager-knopf::after { content: " →"; white-space: pre; }
.sf-ske-basislager:hover .sf-ske-basislager-knopf { text-decoration: underline; }
@media (min-width: 900px) {
.sf-ske-basislager.sf-ske-basislager { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.sf-ske-basislager-text { padding: var(--sf-hm-s6, 32px); }
}
.sf-ske-kapitel-kachel--live.sf-ske-kapitel-kachel--live { position: relative; background-color: var(--sf-ink); background-size: cover; background-position: center; color: var(--sf-white); }
.sf-ske-kapitel-kachel--live::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.6)); }
.sf-ske-kapitel-kachel--live b, .sf-ske-kapitel-kachel--live span { position: relative; color: var(--sf-white); }
.sf-ske-livebild { display: grid; margin: var(--sf-hm-s4) 0 0; border: 1px solid var(--sf-line); }
.sf-ske-livebild img { display: block; width: 100%; aspect-ratio: 3 / 1; object-fit: cover; }
.sf-ske-livebild figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-hm-s3); padding: var(--sf-hm-s3) var(--sf-hm-s4); }
.sf-ske-livebild figcaption > span { display: grid; gap: var(--sf-hm-s1); }
.sf-ske-livebild small { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
/* wandergebiet.css */
.sf-wg-kopf-live { display: flex; flex-direction: column; gap: var(--sf-hm-s2); }
.sf-wg-kopf-werte { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s4); margin: 0; padding: 0; list-style: none; font-size: var(--sf-size-14); color: var(--sf-white); }
.sf-wg-kopf-werte strong { font-variant-numeric: tabular-nums; }
.sf-sg-kopf .sf-wg-kopf-live .sf-hb-live { color: var(--sf-white); }
.sf-wg-urteile { display: grid; gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-wg-urteile > li { display: flex; flex-direction: column; gap: var(--sf-hm-s2); padding: var(--sf-hm-s4); border: 1px solid var(--sf-line); border-left: 4px solid var(--sf-hm-geht); background: var(--sf-surface); }
.sf-wg-urteile > li[data-sf-urteil="passt"] { border-left-color: var(--sf-hm-passt); }
.sf-wg-urteile > li[data-sf-urteil="eher-nicht"] { border-left-color: var(--sf-hm-nicht); }
.sf-wg-urteile > li[data-sf-gewaehlt] { border-color: var(--sf-ink); border-left-width: 4px; }
.sf-wg-urteile p { margin: 0; font-size: var(--sf-size-15); line-height: 1.5; color: var(--sf-text); }
.sf-wg .sf-wg-urteil-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-hm-s2); margin: 0; }
.sf-wg-urteil-kopf strong { color: var(--sf-ink); font-size: var(--sf-size-16); }
.sf-wg-urteil { padding: 2px var(--sf-hm-s2); font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-hm-geht); background: var(--sf-hm-geht-tint); }
.sf-wg-urteil[data-sf-urteil="passt"] { color: var(--sf-hm-passt); background: var(--sf-hm-passt-tint); }
.sf-wg-urteil[data-sf-urteil="eher-nicht"] { color: var(--sf-hm-nicht); background: var(--sf-hm-nicht-tint); }
.sf-wg-urteile + .sf-gb-passt, .sf-wg-urteile + * { margin-top: var(--sf-hm-s5, 24px); }
.sf-wg-charakter { display: flex; flex-direction: column; gap: var(--sf-hm-s2); max-width: 62ch; }
.sf-wg .sf-wg-charakter p { margin: 0; font-size: var(--sf-size-16); line-height: 1.55; color: var(--sf-ink); }
.sf-wg-anteil { display: flex; flex-direction: column; gap: var(--sf-hm-s2); margin: 0; }
.sf-wg-anteil figcaption strong { font-size: var(--sf-size-16); color: var(--sf-ink); }
.sf-wg-anteil-balken { display: flex; height: 8px; background: var(--sf-line); }
.sf-wg-anteil-balken span[data-sf-stufe="leicht"] { background: var(--sf-weg-leicht); }
.sf-wg-anteil-balken span[data-sf-stufe="mittel"] { background: var(--sf-weg-mittel); }
.sf-wg-anteil-balken span[data-sf-stufe="schwer"] { background: var(--sf-weg-schwer); }
.sf-wg-anteil ul { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1) var(--sf-hm-s4); margin: 0; padding: 0; list-style: none; font-size: var(--sf-size-13); color: var(--sf-text); }
.sf-wg-anteil li { display: flex; align-items: center; gap: var(--sf-hm-s1); }
.sf-wg-anteil li::before { content: ""; width: 8px; height: 8px; background: var(--sf-weg-leicht); }
.sf-wg-anteil li[data-sf-stufe="mittel"]::before { background: var(--sf-weg-mittel); }
.sf-wg-anteil li[data-sf-stufe="schwer"]::before { background: var(--sf-weg-schwer); }
.sf-wg-live { display: flex; flex-direction: column; gap: var(--sf-hm-s3); }
.sf-wg-live .sf-hb-kopf { margin: 0; }
.sf-wg-gegangen { display: grid; gap: var(--sf-hm-s5, 24px); margin: 0; padding: 0; list-style: none; }
.sf-wg-gegangen > li { display: flex; flex-direction: column; gap: var(--sf-hm-s2); }
.sf-wg-gegangen h3 { margin: var(--sf-hm-s2) 0 0; font-size: var(--sf-size-20); color: var(--sf-ink); }
.sf-wg-gegangen p { margin: 0; font-size: var(--sf-size-15); line-height: 1.5; color: var(--sf-text); }
.sf-wg .sf-wg-gegangen-meta { font-size: var(--sf-size-13); color: var(--sf-muted); }
.sf-wg-gegangen-fotos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2px; aspect-ratio: 3 / 2; }
.sf-wg-gegangen-fotos figure { position: relative; margin: 0; overflow: hidden; }
.sf-wg-gegangen-fotos figure:first-child { grid-row: span 2; }
.sf-wg-gegangen-fotos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-wg-gegangen-fotos figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2px 6px; background: var(--sf-hm-hinweis-grund); color: var(--sf-white); font-size: var(--sf-size-11); }
.sf-wg-anders { padding-left: var(--sf-hm-s3); border-left: 3px solid var(--sf-sg-akzent); }
.sf-wg .sf-wg-anreise { margin: 0; max-width: 62ch; font-size: var(--sf-size-16); line-height: 1.55; color: var(--sf-ink); }
@media (min-width: 720px) {
.sf-wg-urteile { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sf-wg-gegangen > li { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); column-gap: var(--sf-hm-s5, 24px); align-content: start; }
.sf-wg-gegangen-fotos { grid-row: 1 / span 12; }
.sf-wg-gegangen h4 { margin-top: 0; }
}
.sf-wg .sf-wg-story { grid-column: 1 / -1; min-width: 0; }
.sf-wg-winter { display: grid; gap: var(--sf-hm-s3); padding: var(--sf-hm-s4); background: var(--sf-hm-winter); color: var(--sf-white); }
.sf-wg-winter p { margin: 0; color: var(--sf-white); font-size: var(--sf-hb-text-klein); }
.sf-wg .sf-wg-winter-titel { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: var(--sf-hb-h3); line-height: 1.05; text-transform: uppercase; }
.sf-wg-winter-links { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-wg .sf-wg-winter-links a { padding: var(--sf-hm-s2) var(--sf-hm-s3); background: var(--sf-white); color: var(--sf-hm-winter); font-size: var(--sf-hb-text-klein); font-weight: 700; text-decoration: none; }
.sf-wg .sf-wg-winter-links a::after { content: " →"; }
.sf-wg-schritte { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-abschnitt); }
.sf-wg-weg { padding: var(--sf-hm-s4); border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-wg .sf-wg-weg-titel { margin: 0 0 var(--sf-hm-s2); font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: var(--sf-size-18); line-height: 1.1; text-transform: uppercase; }
.sf-wg-weg ol { position: relative; margin: 0; padding: 0; list-style: none; }
.sf-wg-weg li + li { border-top: 1px solid var(--sf-line); }
.sf-wg .sf-wg-weg a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--sf-hm-s3); align-items: center; padding: var(--sf-hm-s2) 0; color: inherit; text-decoration: none; }
.sf-wg-weg-nr { display: grid; place-items: center; width: 28px; height: 28px; border: 2px solid var(--sf-ink); background: var(--sf-white); font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: var(--sf-size-16); color: var(--sf-ink); }
.sf-wg-weg a:hover .sf-wg-weg-nr, .sf-wg-weg a:focus-visible .sf-wg-weg-nr { background: var(--sf-ink); color: var(--sf-white); }
.sf-wg-weg strong { display: block; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: var(--sf-size-18); line-height: 1.1; text-transform: uppercase; color: var(--sf-ink); }
.sf-wg-weg small { display: block; font-size: var(--sf-size-13); line-height: 1.35; color: var(--sf-muted); }
.sf-wg-schritt-inhalt { display: grid; gap: var(--sf-hm-abschnitt); min-width: 0; }
.sf-wg-schritt { display: grid; gap: var(--sf-hm-s5); min-width: 0; scroll-margin-top: var(--sf-hm-s6); }
.sf-wg-schritt:focus { outline: none; }
.sf-wg-schritt + .sf-wg-schritt { padding-top: var(--sf-hm-abschnitt); border-top: 1px solid var(--sf-line); }
.sf-wg-schritt-kopf { display: grid; gap: var(--sf-hm-s1); }
.sf-wg .sf-wg-schritt-kicker { display: flex; align-items: center; gap: var(--sf-hm-s2); margin: 0; font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-sg-akzent); }
.sf-wg-schritt-kicker span { display: inline-grid; place-items: center; width: 20px; height: 20px; background: var(--sf-sg-akzent); color: var(--sf-white); letter-spacing: 0; }
.sf-wg .sf-wg-schritt-kopf h2 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: var(--sf-hb-h2); line-height: 1; text-transform: uppercase; text-wrap: balance; }
.sf-wg-schritt h3 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: var(--sf-hb-h3); line-height: 1.05; }
.sf-wg-hinauf { display: grid; gap: var(--sf-hm-s3); }
.sf-wg-teile { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-wg-teil { display: grid; gap: var(--sf-hm-s2); align-content: start; min-width: 0; padding: var(--sf-hm-s3); border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-wg-teil h3 { text-transform: uppercase; }
.sf-wg-teil--bild { padding: 0; overflow: hidden; }
.sf-wg-teil-bild { position: relative; margin: 0; aspect-ratio: 4 / 3; max-width: 100%; background: var(--sf-surface); }
.sf-wg-teil-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-wg-teil-bild figcaption { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 1px var(--sf-hm-s1); overflow: hidden; font-size: var(--sf-size-10); white-space: nowrap; text-overflow: ellipsis; color: var(--sf-white); background: var(--sf-hm-vermerk-grund); }
.sf-wg-teil-text { display: grid; gap: var(--sf-hm-s2); align-content: start; }
.sf-wg-teil--bild .sf-wg-teil-text { padding: var(--sf-hm-s3); }
.sf-wg-teil-hoehe { justify-self: start; padding: 2px var(--sf-hm-s2); border: 1px solid var(--sf-line); font-size: var(--sf-size-13); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sf-ink); }
.sf-wg .sf-wg-am-besten { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s2); margin: var(--sf-hm-s1) 0 0; padding: var(--sf-hm-s1) var(--sf-hm-s3); background: var(--sf-white); color: var(--sf-ink); font-size: var(--sf-size-15); font-weight: 700; }
.sf-wg-am-besten span { font-size: var(--sf-size-11); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-sg-akzent); }
.sf-wg .sf-wg-wohnen-satz { margin: 0; font-size: var(--sf-size-15); }
.sf-wg .sf-wg-teil p { margin: 0; font-size: var(--sf-size-15); line-height: 1.45; }
.sf-wg-teil-bahnen { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; font-size: var(--sf-size-13); color: var(--sf-ink); }
.sf-wg-teil-bahnen span { color: var(--sf-sg-akzent); font-weight: 700; }
.sf-wg-gelaende { display: grid; gap: var(--sf-hm-s3); padding-top: var(--sf-hm-s3); border-top: 1px solid var(--sf-line); }
.sf-wg-vonuns { display: grid; gap: var(--sf-hm-s3); }
.sf-wg-passt { display: grid; gap: var(--sf-hm-s5); }
.sf-wg-passt-urteil { display: grid; gap: var(--sf-hm-s3); min-width: 0; }
.sf-wg-urteil-gross { display: grid; gap: var(--sf-hm-s1); padding: var(--sf-hm-s3) var(--sf-hm-s4); border-left: 5px solid var(--sf-hm-geht); background: var(--sf-hm-geht-tint); }
.sf-wg-urteil-gross[data-sf-urteil="passt"] { border-left-color: var(--sf-hm-passt); background: var(--sf-hm-passt-tint); }
.sf-wg-urteil-gross[data-sf-urteil="eher-nicht"] { border-left-color: var(--sf-hm-nicht); background: var(--sf-hm-nicht-tint); }
.sf-wg .sf-wg-urteil-gross p { margin: 0; font-size: var(--sf-size-15); line-height: 1.5; }
.sf-wg .sf-wg-urteil-gross .sf-wg-urteil-gross-kopf { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: var(--sf-hb-h3); line-height: 1.05; text-transform: uppercase; color: var(--sf-hm-geht); }
.sf-wg-urteil-gross[data-sf-urteil="passt"] .sf-wg-urteil-gross-kopf { color: var(--sf-hm-passt); }
.sf-wg-urteil-gross[data-sf-urteil="eher-nicht"] .sf-wg-urteil-gross-kopf { color: var(--sf-hm-nicht); }
.sf-wg-urteil-rest { margin: 0; padding: 0; list-style: none; }
.sf-wg-urteil-rest li { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-hm-s2); padding: var(--sf-hm-s2) 0; border-bottom: 1px solid var(--sf-line); }
.sf-wg-urteil-rest button { padding: 0; border: 0; background: none; font: inherit; font-weight: 700; color: var(--sf-ink); text-align: left; cursor: pointer; }
.sf-wg-urteil-rest button:hover { text-decoration: underline; }
.sf-wg-ehernicht { display: grid; gap: var(--sf-hm-s1); padding: var(--sf-hm-s3); background: var(--sf-hm-nicht-tint); }
.sf-wg .sf-wg-ehernicht p { margin: 0; font-size: var(--sf-size-15); color: var(--sf-hm-nicht); }
.sf-wg .sf-wg-ehernicht .sf-wg-ehernicht-kopf { font-weight: 700; }
.sf-wg-anders-liste { display: grid; gap: var(--sf-hm-s2); align-content: start; min-width: 0; }
.sf-wg .sf-wg-anders-kopf { margin: 0; font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-sg-akzent); }
.sf-wg-anders-liste ul { margin: 0; padding: 0; list-style: none; }
.sf-wg-anders-liste li { border-top: 1px solid var(--sf-line); }
.sf-wg .sf-wg-anders-liste a, .sf-wg-anders-liste li > span { display: grid; gap: 2px; padding: var(--sf-hm-s2) 0; color: inherit; text-decoration: none; }
.sf-wg-anders-liste small { font-size: var(--sf-size-12); color: var(--sf-muted); }
.sf-wg-anders-liste strong { font-size: var(--sf-size-16); color: var(--sf-ink); }
.sf-wg-anders-liste a strong::after { content: " →"; color: var(--sf-sg-akzent); }
.sf-wg-anders-liste span span { font-size: var(--sf-size-13); color: var(--sf-muted); }
.sf-wg-wann { display: grid; gap: var(--sf-hm-s5); }
.sf-wg-sommerbahnen { display: grid; gap: var(--sf-hm-s2); min-width: 0; }
.sf-wg .sf-wg-sommerbahnen h3 { margin: 0; }
.sf-wg-sommerbahnen ul { display: grid; gap: var(--sf-hm-s1); margin: 0; padding: 0; list-style: none; }
.sf-wg-sommerbahnen li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--sf-hm-s3); padding: var(--sf-hm-s1) 0; border-bottom: 1px solid var(--sf-line); font-size: var(--sf-hb-text-klein); color: var(--sf-ink); }
.sf-wg-sommerbahnen li span { color: var(--sf-muted); }
.sf-wg-jahr { display: grid; gap: var(--sf-hm-s2); margin: 0; }
.sf-wg-jahr svg { display: block; width: 100%; max-width: 520px; height: auto; }
.sf-wg-jahr figcaption { font-size: var(--sf-size-15); line-height: 1.5; color: var(--sf-text); }
.sf-wg-jahr-saeule { fill: var(--sf-hm-passt); }
.sf-wg-jahr-saeule[data-sf-stufe="2"] { fill: var(--sf-hm-passt); opacity: 0.55; }
.sf-wg-jahr-saeule[data-sf-stufe="1"] { fill: var(--sf-hm-geht); opacity: 0.4; }
.sf-wg-jahr-linie { fill: none; stroke: var(--sf-ink); stroke-width: 1.5; }
.sf-wg-jahr-boden { stroke: var(--sf-ink); stroke-width: 1.5; }
.sf-wg-jahr-monat { font-size: var(--sf-size-11); font-weight: 700; fill: var(--sf-muted); text-anchor: middle; }
.sf-wg-jahr-beste { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: var(--sf-size-15); letter-spacing: 0.04em; text-transform: uppercase; fill: var(--sf-hm-passt); text-anchor: middle; }
.sf-wg-jahr-jetzt { stroke: var(--sf-hm-winter); stroke-width: 2; }
.sf-wg-jahr-jetzt-text { font-size: var(--sf-size-11); font-weight: 700; fill: var(--sf-hm-winter); }
.sf-wg-jahr-monate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); max-width: 520px; font-size: var(--sf-size-11); font-weight: 700; text-align: center; color: var(--sf-muted); }
.sf-wg-wohnen { display: grid; gap: var(--sf-hm-s3); min-width: 0; scroll-margin-top: var(--sf-hm-s6); }
.sf-wg-orte { margin: 0; padding: 0; list-style: none; }
.sf-wg-orte li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px var(--sf-hm-s2); padding: var(--sf-hm-s2) 0; border-top: 1px solid var(--sf-line); }
.sf-wg-orte strong { font-size: var(--sf-size-16); color: var(--sf-ink); }
.sf-wg-orte span { font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-sg-akzent); }
.sf-wg-orte small { grid-column: 1 / -1; font-size: var(--sf-size-13); color: var(--sf-muted); }
.sf-wg-anreise-block { display: grid; gap: var(--sf-hm-s2); padding-top: var(--sf-hm-s3); }
@media (max-width: 699px) {
.sf-wg-weg ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s2); }
.sf-wg-weg li + li { border-top: 0; }
.sf-wg .sf-wg-weg a { grid-template-columns: 26px minmax(0, 1fr); gap: var(--sf-hm-s2); padding: var(--sf-hm-s1) 0; }
.sf-wg-weg-nr { width: 24px; height: 24px; font-size: var(--sf-size-14); }
.sf-wg-weg strong { font-size: var(--sf-size-15); }
.sf-wg-weg small { display: none; }
.sf-wg-winter-links a { font-size: var(--sf-size-13); }
}
@media (min-width: 700px) {
.sf-wg-winter { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-hm-s5); padding: var(--sf-hm-s4) var(--sf-hm-s5); }
.sf-wg-teile { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sf-wg-gelaende { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: center; }
.sf-wg-passt, .sf-wg-wann { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--sf-hm-s6); align-items: start; }
}
@media (min-width: 1000px) {
.sf-wg-schritte { grid-template-columns: 260px minmax(0, 1fr); gap: var(--sf-hm-s7); align-items: start; }
.sf-wg-weg { position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + var(--sf-hm-s6)); padding: 0; border: 0; background: none; }
.sf-wg-weg ol::before { content: ""; position: absolute; left: 13px; top: 18px; bottom: 18px; width: 2px; background: var(--sf-line); }
.sf-wg-weg li + li { border-top: 0; }
.sf-wg-weg-nr { position: relative; }
}
.sf-gb-shop .sf-wg-weg { position: static; }
/* hoehenmeter-listen.css */
.sf-wgl { display: flex; flex-direction: column; gap: var(--sf-hm-s5); padding-bottom: var(--sf-hm-s6); }
.sf-wgl-winter { display: grid; gap: var(--sf-hm-s3); margin: 0 calc(-1 * var(--sf-hm-s4)); padding: var(--sf-hm-s4); background: var(--sf-hm-winter); color: var(--sf-white); }
.sf-wgl .sf-wgl-winter p { margin: 0; color: var(--sf-white); font-size: var(--sf-hb-text-klein); }
.sf-wgl .sf-wgl-winter .sf-wgl-winter-titel { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: var(--sf-hb-h3); line-height: 1.05; text-transform: uppercase; }
.sf-wgl-winter-links { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-wgl .sf-wgl-winter-links a { padding: var(--sf-hm-s2) var(--sf-hm-s3); background: var(--sf-white); color: var(--sf-hm-winter); font-size: var(--sf-hb-text-klein); font-weight: 700; text-decoration: none; }
.sf-wgl .sf-wgl-winter-links a::after { content: " →"; }
.sf-wgl-einstieg { display: grid; gap: var(--sf-hm-s1); max-width: 62ch; }
.sf-wgl .sf-wgl-einstieg p { margin: 0; }
.sf-wgl .sf-wgl-kicker { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-wgl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); }
.sf-wgl-karte { margin: 0; padding: var(--sf-hm-s2); border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-wgl-karte svg { display: block; width: 100%; height: auto; }
.sf-wgl-karte figcaption { padding: var(--sf-hm-s1) var(--sf-hm-s1) 0; font-size: var(--sf-hb-mini); color: var(--sf-muted); }
.sf-wgl-kamm { fill: none; stroke: var(--sf-hm-kamm); stroke-opacity: 0.16; stroke-width: 26; stroke-linecap: round; stroke-linejoin: round; }
.sf-wgl-grenze { fill: none; stroke: var(--sf-muted); stroke-width: 1.4; stroke-dasharray: 5 5; opacity: 0.6; }
.sf-wgl-land { font: 600 var(--sf-hm-karte-land) var(--sf-body); letter-spacing: 0.18em; text-transform: uppercase; fill: var(--sf-muted); opacity: 0.7; }
.sf-wgl-stadt circle { fill: var(--sf-muted); }
.sf-wgl-stadt text { font: 500 var(--sf-hm-karte-stadt) var(--sf-body); fill: var(--sf-muted); }
.sf-wgl-pin { transform: scale(2.4); }
.sf-wgl-pin circle { fill: var(--sf-ink); stroke: var(--sf-white); stroke-width: 1.5; }
.sf-wgl-pin text { font: 700 var(--sf-hm-karte-zahl) var(--sf-body); fill: var(--sf-white); text-anchor: middle; dominant-baseline: central; }
.sf-wgl-name { display: none; font: 700 var(--sf-hm-karte-name) var(--sf-body); fill: var(--sf-ink); paint-order: stroke; stroke: var(--sf-white); stroke-width: 5px; }
.sf-wgl-punkt:hover .sf-wgl-pin circle, .sf-wgl-punkt:focus-visible .sf-wgl-pin circle { fill: var(--sf-section-accent, var(--sf-travel)); }
.sf-wgl-gegenden { display: grid; gap: var(--sf-hm-s6); min-width: 0; }
.sf-wgl-gegend { display: grid; gap: var(--sf-hm-s2); scroll-margin-top: var(--sf-hm-s6); }
.sf-wgl-gegend-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sf-hm-s1) var(--sf-hm-s3); padding-bottom: var(--sf-hm-s2); border-bottom: 2px solid var(--sf-ink); }
.sf-wgl .sf-wgl-gegend-kopf h2 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: var(--sf-hb-h3); line-height: 1.05; text-transform: uppercase; }
.sf-wgl-gegend-kopf span { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-wgl-zeilen { margin: 0; padding: 0; list-style: none; }
.sf-wgl-zeile { display: grid; gap: var(--sf-hm-s1); padding: var(--sf-hm-s3) 0; border-bottom: 1px solid var(--sf-line); scroll-margin-top: var(--sf-hm-s6); }
.sf-wgl .sf-wgl-zeile-link { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: var(--sf-hm-s3); align-items: start; color: inherit; text-decoration: none; }
.sf-wgl-zeile-bild { position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; background: var(--sf-surface); }
.sf-wgl-zeile-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-wgl-zeile-bild small { position: absolute; right: 0; bottom: 0; max-width: 100%; padding: 0 4px; overflow: hidden; font-size: var(--sf-size-9); line-height: 1.5; white-space: nowrap; text-overflow: ellipsis; color: var(--sf-white); background: var(--sf-hm-vermerk-grund); }
.sf-wgl-zeile-text { display: grid; gap: var(--sf-hm-s1); min-width: 0; }
.sf-wgl .sf-wgl-zeile h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s1) var(--sf-hm-s2); margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-weight: var(--sf-hb-titel-gewicht); font-size: var(--sf-size-20); line-height: 1.1; color: var(--sf-ink); }
.sf-wgl-zeile-link:hover h3 { color: var(--sf-section-accent, var(--sf-travel)); }
.sf-wgl-nr { font-size: var(--sf-hb-mini); color: var(--sf-muted); }
.sf-wgl-am-besten { font-size: var(--sf-size-15); font-weight: 700; line-height: 1.3; color: var(--sf-ink); }
.sf-wgl-am-besten small { margin-right: var(--sf-hm-s1); font-size: var(--sf-size-11); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-wgl-versprechen { font-size: var(--sf-hb-text-klein); line-height: 1.4; color: var(--sf-ink); }
.sf-wgl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s1) var(--sf-hm-s4); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-wgl-strich { display: grid; gap: 3px; width: 128px; }
.sf-wgl-strich-balken { display: flex; height: 6px; background: var(--sf-line); }
.sf-wgl-strich-balken span { display: block; height: 100%; }
.sf-wgl-strich-balken span[data-sf-stufe="leicht"] { background: var(--sf-weg-leicht); }
.sf-wgl-strich-balken span[data-sf-stufe="mittel"] { background: var(--sf-weg-mittel); }
.sf-wgl-strich-balken span[data-sf-stufe="schwer"] { background: var(--sf-weg-schwer); }
.sf-wgl-strich small { font-size: var(--sf-hb-mini); }
.sf-wgl .sf-wgl-winter-link { justify-self: start; margin-left: calc(104px + var(--sf-hm-s3)); font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-hm-winter); text-decoration: none; }
.sf-wgl .sf-wgl-winter-link::after { content: " →"; }
.sf-wgl .sf-wgl-auswahl.sf-sgl { gap: 0; padding-bottom: 0; }
.sf-wgl .sf-wgl-zeile[hidden], .sf-wgl .sf-wgl-gegend[hidden] { display: none; }
.sf-wgl-punkt--aus { opacity: 0.25; }
.sf-wgl .sf-wgl-punkt--aus .sf-wgl-name { display: none; }
.sf-wgl .sf-wgl-weit { font-weight: 700; color: var(--sf-ink); }
.sf-wgl .sf-wgl-leer { margin: 0; font-size: var(--sf-hb-text-klein); color: var(--sf-ink); }
@media (min-width: 700px) {
.sf-wgl-winter { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--sf-hm-s5); margin: 0; padding: var(--sf-hm-s4) var(--sf-hm-s5); }
.sf-wgl .sf-wgl-zeile-link { grid-template-columns: 150px minmax(0, 1fr); gap: var(--sf-hm-s4); }
.sf-wgl .sf-wgl-winter-link { margin-left: calc(150px + var(--sf-hm-s4)); }
}
@media (min-width: 1000px) {
.sf-wgl-grid { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: var(--sf-hm-s7); align-items: start; }
.sf-wgl-grid--ohne-karte { grid-template-columns: minmax(0, 1fr); }
.sf-wgl-karte-huelle { position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + var(--sf-hm-s6)); }
.sf-wgl-name { display: inline; }
.sf-wgl-pin { transform: scale(1.5); }
.sf-wgl-land { font-size: var(--sf-hm-karte-land-desktop); }
.sf-wgl-stadt text { font-size: var(--sf-hm-karte-stadt-desktop); }
}
.sf-hmi { display: flex; flex-direction: column; gap: var(--sf-hm-s5); margin-bottom: var(--sf-hm-abschnitt); scroll-margin-top: var(--sf-hm-s6); }
.sf-hmi-kopf { display: flex; flex-direction: column; gap: var(--sf-hm-s2); }
.sf-hmi .sf-hmi-kopf h2 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h2); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); }
.sf-hmi .sf-hmi-kopf p { margin: 0; max-width: 60ch; font-size: var(--sf-hb-text); }
.sf-hmi .sf-hmi-fragen { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--sf-hm-s3); min-width: 0; padding: var(--sf-hm-s4); overflow: hidden; background: var(--sf-ink); color: var(--sf-white); }
.sf-hmi .sf-hmi-fragen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 180deg, var(--sf-hb-schleier-oben), var(--sf-hb-schleier-mitte) 45%, var(--sf-hb-schleier-oben) ); }
.sf-hmi .sf-hmi-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.sf-hmi .sf-hmi-bg-vermerk { order: 10; align-self: flex-end; margin-top: calc(-1 * var(--sf-hm-s2)); font: var(--sf-hb-mini)/1.4 var(--sf-body); color: var(--sf-hb-hell-text); }
.sf-hmi .sf-hmi-oben { display: flex; flex-direction: column; gap: var(--sf-hm-s2); }
.sf-hmi .sf-hmi-fortschritt { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.sf-hmi .sf-hmi-fortschritt span { height: 4px; background: var(--sf-hb-hell-spur); }
.sf-hmi .sf-hmi-fortschritt span[data-sf-hmi-erreicht] { background: var(--sf-white); }
.sf-hmi .sf-hmi-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-hm-s2); min-height: 32px; }
.sf-hmi .sf-hmi-zaehler { font-size: var(--sf-hb-text-klein); font-weight: 700; }
.sf-hmi .sf-hmi-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-hmi .sf-hmi-chip.sf-hmi-chip { min-height: 32px; padding: 0 10px; border: 1px solid var(--sf-hb-hell-linie); border-radius: 0; background: var(--sf-hb-hell-flaeche); color: var(--sf-white); font: 700 var(--sf-hb-fein)/1.2 var(--sf-body); cursor: pointer; }
.sf-hmi .sf-hmi-chip.sf-hmi-chip[aria-current] { background: var(--sf-white); color: var(--sf-ink); }
.sf-hmi .sf-hmi-chip.sf-hmi-chip--neu { background: none; border-color: transparent; text-decoration: underline; text-underline-offset: 3px; }
.sf-hmi .sf-hmi-frage { display: flex; flex-direction: column; gap: var(--sf-hm-s2); flex: 1; }
.sf-hmi .sf-hmi-frage .sf-hmi-frage-titel { margin: var(--sf-hm-s2) 0 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: clamp(34px, 5vw, 72px); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; color: var(--sf-white); }
.sf-hmi .sf-hmi-frage .sf-hmi-frage-unter { margin: 0 0 var(--sf-hm-s2); font-size: var(--sf-hb-text-klein); color: var(--sf-hb-hell-text); }
.sf-hmi .sf-hmi-startwahl { display: grid; grid-template-columns: auto minmax(0, 220px); gap: var(--sf-hm-s3); align-items: center; font-size: var(--sf-hb-text-klein); font-weight: 700; }
.sf-hmi .sf-hmi-startwahl select { width: 100%; min-width: 0; min-height: 44px; padding: 8px; border: 0; border-radius: 0; background: var(--sf-white); color: var(--sf-ink); font: inherit; }
.sf-hmi .sf-hmi-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s2); }
.sf-hmi .sf-hmi-kachel.sf-hmi-kachel { position: relative; display: block; aspect-ratio: 4 / 3; min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 2px solid var(--sf-hb-hell-linie); border-radius: 0; background: var(--sf-hb-buehne-grund); color: var(--sf-white); font: inherit; text-align: left; cursor: pointer; }
.sf-hmi .sf-hmi-kachel-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sf-hmi .sf-hmi-kachel-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, var(--sf-hb-schleier-unten)); }
.sf-hmi .sf-hmi-kachel:hover .sf-hmi-kachel-bild img { transform: scale(1.04); }
.sf-hmi .sf-hmi-kachel-text { position: absolute; z-index: 1; left: var(--sf-hm-s3); right: var(--sf-hm-s3); bottom: var(--sf-hm-s2); display: flex; flex-direction: column; }
.sf-hmi .sf-hmi-kachel-text b { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: clamp(22px, 2.4vw, 32px); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; }
.sf-hmi .sf-hmi-kachel-text small { font-size: var(--sf-hb-fein); color: var(--sf-hb-hell-text); }
.sf-hmi .sf-hmi-kachel-vermerk { position: absolute; z-index: 1; top: 0; right: 0; max-width: 100%; padding: 2px 6px; background: var(--sf-hb-vermerk-grund); font: var(--sf-hb-mini)/1.35 var(--sf-body); color: var(--sf-white); text-align: right; }
.sf-hmi .sf-hmi-kachel-nachweise { margin: 0; font: var(--sf-hb-mini)/1.4 var(--sf-body); color: var(--sf-hb-hell-text); }
.sf-hmi .sf-hmi-kachel-nachweise span[hidden] { display: none; }
.sf-hmi .sf-hmi-kachel-nachweise span:not([hidden]) ~ span:not([hidden])::before { content: " · "; }
@media (max-width: 699px) {
.sf-hmi .sf-hmi-kachel-vermerk { display: none; }
}
@media (min-width: 700px) {
.sf-hmi .sf-hmi-kachel-nachweise { display: none; }
}
.sf-hmi .sf-hmi-kachel.sf-hmi-kachel[aria-pressed="true"] { border-color: var(--sf-white); outline: 4px solid var(--sf-section-accent, var(--sf-travel)); outline-offset: -6px; }
.sf-hmi .sf-hmi-kachel[aria-pressed="true"] .sf-hmi-kachel-text b::after { content: " ✓"; }
.sf-hmi .sf-hmi-kachel:focus-visible { outline: 3px solid var(--sf-white); outline-offset: 2px; }
.sf-hmi .sf-hmi-kacheln--klein .sf-hmi-kachel.sf-hmi-kachel { aspect-ratio: 16 / 10; }
.sf-hmi .sf-hmi-kacheln--klein .sf-hmi-kachel-text b { font-size: clamp(19px, 1.9vw, 24px); }
.sf-hmi .sf-hmi-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-hm-s2); }
.sf-hmi .sf-hmi-zurueck { min-height: var(--sf-hb-knopf-hoehe); padding: 0; border: 0; background: none; font: inherit; font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-white); cursor: pointer; }
.sf-hmi .sf-hmi-zurueck:disabled { opacity: 0.45; cursor: not-allowed; }
.sf-hmi .sf-hmi-aufloesung { display: flex; flex-direction: column; gap: var(--sf-hm-s5); min-width: 0; scroll-margin-top: var(--sf-hm-s6); }
.sf-hmi .sf-hmi-aufloesung-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--sf-hm-s3); }
.sf-hmi .sf-hmi-aufloesung-titel { margin: var(--sf-hm-s1) 0 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: clamp(32px, 4vw, 52px); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; }
.sf-hmi .sf-hmi-zusammen { margin: var(--sf-hm-s2) 0 0; font-size: var(--sf-hb-text-klein); color: var(--sf-muted); }
.sf-hmi .sf-hmi-aufloesung-wege { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-hmi .sf-hmi-aufloesung .sf-hmi-chip.sf-hmi-chip { min-height: 40px; padding: 0 14px; border-color: var(--sf-ink); background: var(--sf-white); color: var(--sf-ink); }
.sf-hmi .sf-hmi-aufloesung .sf-hmi-chip.sf-hmi-chip--neu { border-color: transparent; background: none; }
.sf-hmi .sf-hmi-drei { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); }
.sf-hmi .sf-hmi-vorschau { position: relative; min-width: 0; aspect-ratio: 4 / 3; }
.sf-hmi .sf-hmi-vorschau[data-sf-hmi-rang="1"] { order: 1; aspect-ratio: 4 / 5; }
.sf-hmi .sf-hmi-vorschau[data-sf-hmi-rang="2"] { order: 2; }
.sf-hmi .sf-hmi-vorschau[data-sf-hmi-rang="3"] { order: 3; }
.sf-hmi .sf-hmi-vorschau .sf-hb-karte.sf-hb-karte { position: absolute; inset: 0; display: block; padding: 0; overflow: hidden; border: 0; background: var(--sf-line); }
.sf-hmi .sf-hmi-foto { position: absolute; inset: 0; margin: 0; overflow: hidden; background: var(--sf-line); }
.sf-hmi .sf-hmi-foto picture, .sf-hmi .sf-hmi-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-hmi .sf-hmi-foto:has(img:not([hidden]))::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, var(--sf-hb-schleier-unten)); }
.sf-hmi-foto-fehlt { display: grid; place-items: center; height: 100%; padding: var(--sf-hm-s5); color: var(--sf-muted); font-size: var(--sf-hb-text-klein); text-align: center; }
.sf-hmi .sf-hmi-foto:has(img:not([hidden])) .sf-hmi-foto-fehlt { visibility: hidden; }
.sf-hmi .sf-hmi-foto figcaption { position: absolute; z-index: 1; top: 0; right: 0; max-width: calc(100% - 64px); padding: 3px 8px; background: var(--sf-hb-schleier-unten); font: var(--sf-hb-mini)/1.4 var(--sf-body); color: var(--sf-white); }
.sf-hmi .sf-hmi-rang { position: absolute; z-index: 1; top: var(--sf-hm-s3); left: var(--sf-hm-s3); display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sf-section-accent, var(--sf-travel)); font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl-klein); font-weight: var(--sf-hb-zahl-gewicht, var(--sf-hb-titel-gewicht)); color: var(--sf-white); }
.sf-hmi .sf-hmi-vorschau .sf-hb-karte-text.sf-hb-karte-text { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: var(--sf-hm-s1); padding: var(--sf-hm-s4); color: var(--sf-white); }
.sf-hmi .sf-hmi-vorschau .sf-hb-karte-titel.sf-hb-karte-titel { margin: 0; font-size: clamp(28px, 3vw, 40px); line-height: 1.02; color: inherit; }
.sf-hmi .sf-hmi-vorschau:not([data-sf-hmi-rang="1"]) .sf-hb-karte-titel.sf-hb-karte-titel { display: -webkit-box; overflow: hidden; font-size: clamp(24px, 2.2vw, 32px); -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sf-hmi .sf-hmi-vorschau[data-sf-hmi-rang="1"] .sf-hb-karte-titel.sf-hb-karte-titel { font-size: clamp(36px, 4.6vw, 64px); }
.sf-hmi-vorschau-grund { font-size: var(--sf-hb-text-klein); line-height: 1.45; }
.sf-hmi .sf-hmi-vorschau .sf-hb-weiter.sf-hb-weiter { color: inherit; }
.sf-hmi .sf-hmi-vorschau:not(:has(img:not([hidden]))) .sf-hb-karte-text.sf-hb-karte-text { color: var(--sf-ink); }
.sf-hmi .sf-hmi-vorschau:not(:has(img:not([hidden]))) .sf-hmi-foto-fehlt { align-items: start; padding-top: calc(var(--sf-hm-s6) + 24px); }
.sf-hmi .sf-hmi-vorschau-leer { margin: 0; padding: var(--sf-hm-s5); background: var(--sf-line); }
.sf-hmi .sf-hmi-orientierung { border-top: 1px solid var(--sf-line); padding-top: var(--sf-hm-s3); }
.sf-hmi .sf-hmi-orientierung summary { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sf-hm-s4); border: 1px solid var(--sf-ink); font-weight: 700; font-size: var(--sf-hb-text-klein); color: var(--sf-ink); cursor: pointer; }
.sf-hmi .sf-hmi-orientierung[open] summary { margin-bottom: var(--sf-hm-s3); }
.sf-hmi .sf-hmi-karte { display: flex; flex-direction: column; gap: var(--sf-hm-s2); min-width: 0; margin: 0; }
.sf-hmi .sf-hmi-schraeg { overflow: hidden; perspective: 900px; background: var(--sf-hb-relief-grund); }
.sf-hmi .sf-hmi-schraeg .sf-rb-standbild { transform: rotateX(32deg) scale(1.18); transform-origin: 50% 85%; }
.sf-hmi .sf-hmi-karte3d { display: flex; flex-direction: column; gap: var(--sf-hm-s2); }
.sf-hmi-pin { position: absolute; display: grid; place-items: center; transform: translate(-50%, -50%); border: 2px solid var(--sf-white); background: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 700; line-height: 1; color: var(--sf-white); }
.sf-hmi .sf-hmi-pin--ort { width: max-content; max-width: 170px; padding: 5px 8px; text-align: center; line-height: 1.2; }
.sf-hmi .sf-hmi-start { z-index: 1; }
.sf-hmi [data-sf-hmi-rand="links"] { transform: translate(0, -50%); }
.sf-hmi [data-sf-hmi-rand="rechts"] { transform: translate(-100%, -50%); }
.sf-hmi .sf-hmi-legende { margin: 0; font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-hmi-ergebnis { display: flex; flex-direction: column; gap: var(--sf-hm-s3); min-width: 0; scroll-margin-top: var(--sf-hm-s6, 80px); }
.sf-hmi .sf-hmi-ergebnis-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); }
.sf-hmi .sf-hmi-treffer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); margin: 0; padding: 0; list-style: none; }
.sf-hmi-idee { position: relative; display: flex; flex-direction: column; gap: var(--sf-hm-s3); min-width: 0; }
.sf-hmi .sf-hmi-nr { position: absolute; z-index: 1; top: var(--sf-hm-s2); left: var(--sf-hm-s2); display: grid; place-items: center; width: 30px; height: 30px; border: 2px solid var(--sf-white); border-radius: 50%; background: var(--sf-section-accent, var(--sf-travel)); font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-white); pointer-events: none; }
.sf-hmi .sf-hmi-idee:not(:has(.sf-hb-karte-bild)) .sf-hb-karte-text { padding-top: calc(var(--sf-hm-s2) + 34px); }
.sf-hmi .sf-hmi-idee .sf-hb-kapitel--karte { color: var(--sf-section-accent, var(--sf-travel)); }
.sf-hmi .sf-hmi-idee .sf-hb-karte-beschreibung { display: flex; flex-direction: column; gap: var(--sf-hm-s2); }
.sf-hmi-warum { display: flex; flex-direction: column; gap: var(--sf-hm-s1); padding-left: var(--sf-hm-s3); border-left: 3px solid var(--sf-hm-geht); }
.sf-hmi-warum:has(.sf-hmi-passt--gut) { border-left-color: var(--sf-hm-passt); }
.sf-hmi-passt { font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-hm-geht); }
.sf-hmi-passt.sf-hmi-passt--gut { color: var(--sf-hm-passt); }
.sf-hmi-gruende { font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-ink); }
.sf-hmi-gruende span:not([hidden]) ~ span:not([hidden])::before { content: " · "; font-weight: 400; color: var(--sf-muted); }
.sf-hmi-lead { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }
.sf-hmi .sf-hmi-wege { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s5); margin: 0; }
.sf-hmi .sf-hmi-keine { margin: 0; padding: var(--sf-hm-s4); border: 1px solid var(--sf-line); }
.sf-hmi .sf-hmi-fragen[hidden], .sf-hmi .sf-hmi-aufloesung[hidden], .sf-hmi .sf-hmi-vorschau[hidden], .sf-hmi .sf-hmi-vorschau-leer[hidden], .sf-hmi .sf-hmi-foto img[hidden], .sf-hmi .sf-hmi-foto figcaption[hidden], .sf-hmi .sf-hmi-kachel-bild img[hidden], .sf-hmi .sf-hmi-kachel-vermerk[hidden], .sf-hmi .sf-hmi-idee .sf-hb-karte-bild img[hidden], .sf-hmi .sf-hmi-idee .sf-hb-karte-bild figcaption[hidden], .sf-hmi .sf-hmi-frage[hidden], .sf-hmi .sf-hmi-chip[hidden], .sf-hmi .sf-hmi-idee[hidden], .sf-hmi .sf-hmi-keine[hidden], .sf-hmi .sf-hmi-pin[hidden], .sf-hmi .sf-hmi-start[hidden], .sf-hmi .sf-hmi-gruende [hidden], .sf-hmi [data-sf-hmi-gruppe][hidden] { display: none; }
.sf-hmi .sf-hmi-kacheln[data-sf-hmi-anzahl="3"] .sf-hmi-kachel:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
@media (min-width: 700px) {
.sf-hmi .sf-hmi-fragen { padding: var(--sf-hm-s5) var(--sf-hm-s6); }
.sf-hmi .sf-hmi-treffer { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-hmi .sf-hmi-kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-hmi .sf-hmi-kacheln[data-sf-hmi-anzahl="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-hmi .sf-hmi-kacheln[data-sf-hmi-anzahl="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 66%; }
.sf-hmi .sf-hmi-kacheln[data-sf-hmi-anzahl="3"] .sf-hmi-kachel:first-child { grid-column: auto; aspect-ratio: 4 / 3; }
.sf-hmi .sf-hmi-drei { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); height: clamp(480px, 46vw, 640px); }
.sf-hmi .sf-hmi-vorschau, .sf-hmi .sf-hmi-vorschau[data-sf-hmi-rang="1"] { aspect-ratio: auto; }
.sf-hmi .sf-hmi-vorschau[data-sf-hmi-rang="1"] { grid-row: span 2; }
.sf-hmi .sf-hmi-vorschau-leer { grid-column: 1 / -1; }
}
@media (min-width: 1000px) {
.sf-hmi .sf-hmi-fragen { min-height: 640px; }
.sf-hmi .sf-hmi-frage .sf-hmi-kacheln { margin-top: auto; }
}
@media (min-width: 1300px) {
.sf-hmi .sf-hmi-treffer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
.sf-hmi .sf-hmi-kachel-bild img { transition: none; }
.sf-hmi .sf-hmi-kachel:hover .sf-hmi-kachel-bild img { transform: none; }
}
.sf-ha-liste { display: flex; flex-direction: column; gap: var(--sf-hm-abschnitt); }
.sf-ha-meta, .sf-ha-versprechen { display: block; }
.sf-ha-meta { font-size: var(--sf-hb-text-klein); font-weight: 700; letter-spacing: 0.02em; color: var(--sf-ink); }
.sf-ha-versprechen { color: var(--sf-text); }
.sf-ha-leer { color: var(--sf-muted); }
.sf-ha-aufmacher { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--sf-white); border: 1px solid var(--sf-line); }
.sf-ha-aufmacher-bild { position: relative; margin: 0; }
.sf-ha-aufmacher-bild img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sf-ha-aufmacher-bild figcaption, .sf-hs-buehne figcaption, .sf-hs-figur figcaption, .sf-hs-kapitel-vermerk { position: absolute; right: 0; bottom: 0; padding: 2px var(--sf-hm-s2); font-size: var(--sf-hb-mini); color: var(--sf-white); background: var(--sf-hm-vermerk-grund); }
.sf-ha-aufmacher-text { display: flex; flex-direction: column; gap: var(--sf-hm-s3); padding: var(--sf-hm-s5) var(--sf-hm-s4) var(--sf-hm-s6); }
.sf-ha-aufmacher-text h2 { margin: 0; }
.sf-ha-aufmacher-text h2 a { color: inherit; text-decoration: none; }
.sf-ha-aufmacher-versprechen { margin: 0; font-size: var(--sf-size-18); line-height: 1.45; color: var(--sf-ink); }
.sf-ha-aufmacher-text .sf-hb-knopf { align-self: flex-start; }
.sf-ha-uebersicht { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-abschnitt); }
.sf-ha-karte-huelle { display: flex; flex-direction: column; gap: var(--sf-hm-s4); }
.sf-ha-karte { margin: 0; }
.sf-ha-karte svg { display: block; width: 100%; height: auto; background: var(--sf-hb-relief-grund); }
.sf-ha-karte figcaption { margin-top: var(--sf-hm-s2); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-ha-kamm { fill: none; stroke: var(--sf-hm-kamm); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.35; }
.sf-ha-grenze { fill: none; stroke: var(--sf-muted); stroke-width: 1.5; stroke-dasharray: 6 6; opacity: 0.6; }
.sf-ha-punkt circle { fill: var(--sf-section-accent, var(--sf-travel)); stroke: var(--sf-white); stroke-width: 3; transform-box: fill-box; transform-origin: center; transition: transform 0.15s ease; }
.sf-ha-punkt:hover circle, .sf-ha-punkt:focus-visible circle { transform: scale(1.35); }
.sf-ha-punkt--aktiv circle { fill: var(--sf-ink); stroke-width: 4; }
.sf-ha-laender { display: flex; flex-direction: column; gap: var(--sf-hm-abschnitt); }
.sf-ha-land { display: flex; flex-direction: column; gap: var(--sf-hm-s5); scroll-margin-top: var(--sf-hm-s7); }
.sf-ha-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); margin: 0; padding: 0; list-style: none; }
.sf-ha-raster > li { display: flex; scroll-margin-top: var(--sf-hm-s7); }
.sf-ha-raster > li > .sf-hb-karte { flex: 1; }
.sf-ha-reihe, .sf-ha-band, .sf-ha-band-gebiet { display: flex; flex-direction: column; gap: var(--sf-hm-s4); }
.sf-ha-reihe > .sf-hb-knopf { align-self: flex-start; }
.sf-ha-band-zeile { margin: 0; color: var(--sf-text); }
.sf-ha-wie { display: flex; flex-direction: column; gap: var(--sf-hm-s5); padding-top: var(--sf-hm-s6); border-top: 1px solid var(--sf-line); }
.sf-ha-wie ol { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); margin: 0; padding: 0; list-style: none; }
.sf-ha-wie li { display: flex; flex-direction: column; gap: var(--sf-hm-s2); padding-top: var(--sf-hm-s3); border-top: 3px solid var(--sf-ink); }
.sf-ha-wie strong { font-family: var(--sf-hb-titel-schrift, inherit); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht, 700); line-height: var(--sf-hb-titel-zeile, 1.1); color: var(--sf-ink); }
.sf-ha-wie span { color: var(--sf-text); }
@media (min-width: 700px) {
.sf-ha-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-ha-aufmacher-bild img { aspect-ratio: 16 / 9; }
}
@media (min-width: 760px) {
.sf-ha-wie ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1040px) {
.sf-ha-aufmacher { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sf-ha-aufmacher-bild img { aspect-ratio: auto; min-height: 460px; }
.sf-ha-aufmacher-text { justify-content: center; padding: var(--sf-hm-s7) var(--sf-hm-s6); }
.sf-ha-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-ha-uebersicht { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
.sf-ha-karte-huelle { position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + var(--sf-hm-s7)); }
.sf-ha-raster--liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-hs { display: flex; flex-direction: column; gap: var(--sf-hm-abschnitt); padding-block: var(--sf-hm-s5) var(--sf-hm-s7); }
.sf-hs-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); }
.sf-hs-buehne { position: relative; margin: 0; }
.sf-hs-buehne img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sf-hs-kopf-text { display: flex; flex-direction: column; gap: var(--sf-hm-s3); }
.sf-hs .sf-hs-titel { margin: 0; font-size: clamp(34px, 4.4vw, 56px); }
.sf-hs-meta { margin: 0; font-size: var(--sf-hb-text-klein); font-weight: 700; letter-spacing: 0.02em; color: var(--sf-ink); }
.sf-hs-versprechen { margin: 0; max-width: 44ch; font-size: var(--sf-size-19); line-height: 1.45; color: var(--sf-ink); }
.sf-hs-wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s3) var(--sf-hm-s5); }
.sf-hs-platzhalter { margin: 0; padding: var(--sf-hm-s4); border: 2px dashed var(--sf-hm-geht); background: var(--sf-hm-geht-tint); color: var(--sf-hm-geht); font-weight: 700; }
.sf-hs-abschnitt { display: flex; flex-direction: column; gap: var(--sf-hm-s5); }
.sf-hs-besuch { padding-left: var(--sf-hm-s5); border-left: 4px solid var(--sf-section-accent, var(--sf-travel)); }
.sf-hs-besuch-text p, .sf-hs-kapitel-text p { margin: 0 0 var(--sf-hm-s3); max-width: 66ch; font-size: var(--sf-size-17); line-height: 1.6; color: var(--sf-text); }
.sf-hs-stimme { margin: 0; padding-block: var(--sf-hm-s6); border-top: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); }
.sf-hs-stimme blockquote { margin: 0; max-width: 34ch; font-family: var(--sf-hb-titel-schrift, inherit); font-size: clamp(24px, 2.8vw, 34px); font-weight: var(--sf-hb-titel-gewicht, 700); line-height: 1.2; color: var(--sf-ink); }
.sf-hs-stimme figcaption { margin-top: var(--sf-hm-s3); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-hs-story { display: flex; flex-direction: column; }
.sf-hs-story-titel { margin: 0 0 var(--sf-hm-s5); }
.sf-hs-kapitel { position: relative; display: flex; flex-direction: column; }
.sf-hs-kapitel--bild { min-height: 88svh; }
.sf-hs-kapitel-bild { position: sticky; top: var(--sf-kopf-klebt, 0px); height: 88svh; overflow: hidden; background: var(--sf-hb-buehne-grund); }
.sf-hs-kapitel-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-hs-kapitel-text { position: relative; z-index: 1; max-width: 560px; margin: -42svh var(--sf-hm-s4) var(--sf-hm-s7); padding: var(--sf-hm-s5); background: var(--sf-white); box-shadow: 0 12px 32px var(--sf-hb-schleier-leicht); }
.sf-hs-kapitel-text h3 { margin: 0 0 var(--sf-hm-s3); font-family: var(--sf-hb-titel-schrift, inherit); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht, 700); line-height: var(--sf-hb-titel-zeile, 1.1); color: var(--sf-ink); }
.sf-hs-kapitel-text blockquote { margin: var(--sf-hm-s4) 0 0; padding-left: var(--sf-hm-s4); border-left: 3px solid var(--sf-section-accent, var(--sf-travel)); font-style: italic; color: var(--sf-ink); }
.sf-hs-kapitel-text--ohne { margin: 0 0 var(--sf-hm-s6); padding-inline: 0; box-shadow: none; }
.sf-hs-kapitel-nr { margin: 0 0 var(--sf-hm-s1); font-family: var(--sf-hb-zahl-schrift, inherit); font-size: var(--sf-hb-kapitel); font-weight: 800; letter-spacing: 0.12em; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-hs-story--fluss .sf-hs-kapitel--bild { min-height: 0; }
.sf-hs-story--fluss .sf-hs-kapitel-bild { position: relative; height: auto; }
.sf-hs-story--fluss .sf-hs-kapitel-bild img { height: auto; aspect-ratio: 3 / 2; }
.sf-hs-story--fluss .sf-hs-kapitel-text { max-width: none; margin: var(--sf-hm-s4) 0 var(--sf-hm-s6); padding: 0; box-shadow: none; }
.sf-hs-wir { display: grid; gap: var(--sf-hm-s4); margin: 0; }
.sf-hs-wir > div { display: grid; gap: var(--sf-hm-s1); padding-top: var(--sf-hm-s3); border-top: 1px solid var(--sf-line); }
.sf-hs-wir dt { font-size: var(--sf-hb-kapitel); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-ink); }
.sf-hs-wir dd { margin: 0; max-width: 66ch; color: var(--sf-text); }
.sf-hs-wir ul { margin: 0; padding-left: 1.1em; }
.sf-hs-lage { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); }
.sf-hs-lage-text { display: flex; flex-direction: column; gap: var(--sf-hm-s3); }
.sf-hs-adresse { margin: 0; color: var(--sf-muted); }
.sf-hs-fakten { display: grid; gap: var(--sf-hm-s2); margin: 0; }
.sf-hs-fakten > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--sf-hm-s3); align-items: baseline; }
.sf-hs-fakten dt { font-weight: 700; color: var(--sf-ink); }
.sf-hs-fakten dd { margin: 0; color: var(--sf-muted); overflow-wrap: anywhere; }
.sf-hs-fakten a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.sf-hs-ausstattung { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sf-hm-s4); margin: 0; padding: 0; list-style: none; }
.sf-hs-ausstattung li { display: flex; gap: var(--sf-hm-s2); align-items: baseline; padding-block: var(--sf-hm-s2); border-bottom: 1px solid var(--sf-line); color: var(--sf-ink); }
.sf-hs-ausstattung li::before { content: "✓"; font-weight: 800; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-hs-galerie { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); }
.sf-hs-figur { position: relative; margin: 0; }
.sf-hs-figur img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 760px) {
.sf-hs-wir > div { grid-template-columns: 180px minmax(0, 1fr); gap: var(--sf-hm-s5); }
.sf-hs-ausstattung { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-hs-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-hs-figur--gross { grid-column: 1 / -1; }
.sf-hs-kapitel-text { margin-left: var(--sf-hm-s7); }
}
@media (min-width: 1040px) {
.sf-hs-kopf { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; }
.sf-hs-buehne img { aspect-ratio: 3 / 2; }
.sf-hs-lage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.sf-hs-ausstattung { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-skp { container: sf-skp / inline-size; display: flex; flex-direction: column; gap: var(--sf-hm-s4); padding-bottom: var(--sf-hm-s6); }
.sf-skp-steuer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sf-hm-s3); }
.sf-skp-feld { display: flex; flex: 1 1 140px; flex-direction: column; gap: var(--sf-hm-s1); min-width: 0; font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-ink); }
.sf-skp .sf-skp-feld select { width: 100%; min-height: var(--sf-hb-knopf-hoehe); padding: 0 var(--sf-hm-s2); border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-white); font: inherit; font-size: var(--sf-hb-text); font-weight: 400; color: var(--sf-ink); }
.sf-skp .sf-skp-anzahl { flex: 1 1 100%; margin: 0; font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-skp-kopfzeile { display: none; }
.sf-skp .sf-skp-liste { display: grid; gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-skp .sf-skp-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sf-hm-s2) var(--sf-hm-s3); margin: 0; padding: var(--sf-hm-s3) var(--sf-hm-s4); border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-white); }
.sf-skp .sf-skp-zeile[hidden] { display: none; }
.sf-skp .sf-skp-gebiet { display: flex; flex-direction: column; grid-column: 1 / -1; gap: 2px; color: var(--sf-ink); text-decoration: none; }
.sf-skp .sf-skp-gebiet strong { font-size: var(--sf-size-17, 17px); line-height: 1.25; }
.sf-skp .sf-skp-gebiet strong::after { content: " →"; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-skp .sf-skp-gebiet span { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-skp .sf-skp-gebiet:hover strong, .sf-skp .sf-skp-gebiet:focus-visible strong { text-decoration: underline; }
.sf-skp .sf-skp-preis { display: flex; flex-direction: column; gap: 2px; margin: 0; }
.sf-skp .sf-skp-label { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-muted); }
.sf-skp .sf-skp-preis strong { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl-klein); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.1; color: var(--sf-ink); font-variant-numeric: tabular-nums; }
.sf-skp .sf-skp-preis strong[data-sf-skp-text] { font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; line-height: 1.3; }
.sf-skp .sf-skp-alter { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-skp .sf-skp-info { display: flex; flex-direction: column; grid-column: 1 / -1; gap: var(--sf-hm-s1); }
.sf-skp .sf-skp-info p { margin: 0; }
.sf-skp .sf-skp-marken { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1); }
.sf-skp .sf-skp-marke { padding: 2px var(--sf-hm-s2); font-size: var(--sf-hb-mini); font-weight: 700; line-height: 1.5; background: var(--sf-surface); color: var(--sf-ink); }
.sf-skp .sf-skp-marke[data-sf-skp-art="vorsaison"] { background: var(--sf-caution-tint); color: var(--sf-caution); }
.sf-skp .sf-skp-hinweis, .sf-skp .sf-skp-quelle { font-size: var(--sf-hb-fein); line-height: 1.4; color: var(--sf-muted); }
.sf-skp .sf-skp-quelle a { color: inherit; overflow-wrap: anywhere; }
.sf-skp-hinweise { display: grid; gap: var(--sf-hm-s2); max-width: 72ch; }
.sf-skp .sf-skp-hinweise p { margin: 0; font-size: var(--sf-hb-text-klein); line-height: 1.5; color: var(--sf-muted); }
.sf-skp-fragen { max-width: 72ch; margin-top: var(--sf-hm-s4); }
.sf-skp .sf-skp-fragen h3 { margin: var(--sf-hm-s4) 0 var(--sf-hm-s2); font-family: var(--sf-body); font-size: var(--sf-size-17, 17px); line-height: 1.3; }
.sf-skp .sf-skp-fragen p { margin: 0 0 var(--sf-hm-s3); font-size: var(--sf-hb-text); line-height: 1.55; }
.sf-skp .sf-skp-weiter { margin: 0; }
@container sf-skp (min-width: 760px) {
.sf-skp-steuer { flex-wrap: nowrap; }
.sf-skp-feld { flex: 0 1 260px; }
.sf-skp .sf-skp-anzahl { flex: 1 1 auto; padding-bottom: var(--sf-hm-s3); text-align: right; }
.sf-skp-kopfzeile, .sf-skp .sf-skp-zeile { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 2fr); gap: var(--sf-hm-s4); align-items: start; }
.sf-skp-kopfzeile { padding: 0 var(--sf-hm-s4) var(--sf-hm-s2); border-bottom: 2px solid var(--sf-ink); font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-muted); }
.sf-skp .sf-skp-liste { gap: 0; }
.sf-skp .sf-skp-zeile { padding: var(--sf-hm-s3) var(--sf-hm-s4); border-width: 0 0 1px; background: transparent; }
.sf-skp .sf-skp-gebiet, .sf-skp .sf-skp-info { grid-column: auto; }
.sf-skp .sf-skp-preis .sf-skp-label { display: none; }
}
/* regionen-liste.css */
.sf-rl { --sf-rl-akzent: var(--sf-section-accent, var(--sf-travel)); display: grid; gap: var(--sf-hm-abschnitt, 32px); padding-block: var(--sf-hm-s4, 16px) var(--sf-hm-abschnitt, 32px); }
.sf-rw { max-width: var(--sf-max-width, 1240px); margin-inline: auto; }
.sf-rw-raster { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: var(--sf-hm-s4, 16px); }
.sf-rw-raster figure { margin: 0; display: grid; gap: var(--sf-hm-s2, 8px); min-width: 0; }
.sf-rw-bild { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sf-surface, var(--sf-line)); max-width: 100%; }
.sf-rw-bild img, .sf-rw-bild video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-rw-raster figcaption { display: grid; gap: 2px; font: 400 var(--sf-size-14) / 1.35 var(--sf-body); color: var(--sf-text); }
.sf-rw-raster figcaption small { color: var(--sf-muted); font-size: var(--sf-size-12); }
.sf-rw-raster figcaption a { font-weight: 700; color: var(--sf-rl-akzent); text-decoration: none; }
.sf-rw-raster figcaption a::after { content: " →"; }
.sf-dynamik .sf-rl-finden { display: grid; gap: var(--sf-hm-s3); margin-bottom: var(--sf-hm-s5); }
.sf-dynamik .sf-rl-suche { display: grid; gap: 6px; max-width: 560px; }
.sf-dynamik .sf-rl-suche-label { font-family: var(--sf-display-condensed); font-weight: 800; font-size: var(--sf-emb-size-24); color: var(--sf-ink); }
.sf-dynamik .sf-rl-suche input { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--sf-line); border-radius: 6px; font: inherit; font-size: var(--sf-size-16); color: var(--sf-ink); background: var(--sf-white); }
.sf-dynamik .sf-gf-zeile { display: flex; gap: 8px; max-width: 560px; }
.sf-dynamik .sf-gf-zeile input { flex: 1 1 auto; min-width: 0; }
.sf-dynamik .sf-gf-zeile button { flex: 0 0 auto; min-height: 48px; padding: 10px 20px; border: 0; border-radius: 6px; background: var(--sf-ink); color: var(--sf-white); font: inherit; font-weight: 700; cursor: pointer; }
.sf-dynamik .sf-gf-zeile button:hover { background: var(--sf-travel); }
.sf-dynamik .sf-rl-treffer { list-style: none; margin: 0; padding: 0; max-width: 560px; border: 1px solid var(--sf-line); border-radius: 6px; }
.sf-dynamik .sf-rl-treffer li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--sf-line); }
.sf-dynamik .sf-rl-treffer li:first-child { border-top: 0; }
.sf-dynamik .sf-rl-treffer a { font-weight: 700; color: var(--sf-travel); }
.sf-dynamik .sf-rl-treffer span, .sf-dynamik .sf-rl-treffer-leer { color: var(--sf-muted); font-size: var(--sf-size-14); }
/* video-klick.css */
.sf-video.sf-video { display: grid; gap: var(--sf-hm-s2); margin: 0; min-width: 0; }
.sf-video-flaeche.sf-video-flaeche { position: relative; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--sf-hb-ecke); background: var(--sf-hb-buehne-grund); }
.sf-video-flaeche.sf-video-flaeche iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.sf-video-start.sf-video-start { position: absolute; inset: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: center; align-items: center; gap: var(--sf-hm-s2) var(--sf-hm-s4); padding: var(--sf-hm-s5); border: 0; border-radius: 0; background: var(--sf-hb-buehne-grund); color: var(--sf-white); font-family: var(--sf-body); text-align: left; cursor: pointer; }
.sf-video-start.sf-video-start:focus-visible { outline: 3px solid var(--sf-white); outline-offset: -6px; }
.sf-video-play.sf-video-play { width: 56px; height: 56px; background: var(--sf-white); clip-path: polygon(30% 20%, 30% 80%, 80% 50%); }
.sf-video-start-text.sf-video-start-text { display: grid; gap: var(--sf-hm-s1); font-size: var(--sf-hb-text); font-weight: 700; }
.sf-video-start-titel.sf-video-start-titel { font-size: var(--sf-hb-text-klein); font-weight: 400; color: var(--sf-hb-hell-text); }
.sf-video-hinweis.sf-video-hinweis { grid-column: 1 / -1; font-size: var(--sf-hb-mini); color: var(--sf-hb-hell-text); }
.sf-video-text.sf-video-text { font-size: var(--sf-hb-fein); line-height: 1.45; color: var(--sf-muted); }
/* verzahnung.css */
.sf-hmv { container: sf-hmv / inline-size; display: flex; flex-direction: column; gap: var(--sf-hm-s4); margin-top: var(--sf-hm-abschnitt); }
.sf-hmv > .sf-hb-kopf { margin-bottom: 0; }
.sf-hmv > .sf-hb-weiter { align-self: flex-start; }
.sf-hmv--rueckweg { margin-bottom: var(--sf-hm-abschnitt); }
.sf-hmv-club { display: flex; flex-direction: column; gap: var(--sf-hm-s3); padding: var(--sf-hm-s4); background: var(--sf-club-tint); border: 1px solid var(--sf-line); }
.sf-hmv-club-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s1) var(--sf-hm-s3); margin: 0; }
.sf-hmv-club-marke { font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-club); }
.sf-hmv-club-kopf strong { font-size: var(--sf-hb-text); }
.sf-hmv-club ul, .sf-hmv-club-liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sf-hm-s2); margin: 0; padding: 0; list-style: none; }
.sf-hmv-club li a, .sf-hmv-club-liste li a, .sf-hmv-gebucht a { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s1); height: 100%; padding: var(--sf-hm-s3); border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-hmv-club li a:hover, .sf-hmv-club-liste li a:hover, .sf-hmv-gebucht a:hover { border-color: var(--sf-ink); }
.sf-hmv-club li img, .sf-hmv-club-liste li img, .sf-hmv-gebucht img { width: auto; height: 24px; margin-bottom: var(--sf-hm-s1); }
.sf-hmv-club li strong, .sf-hmv-club-liste li strong, .sf-hmv-gebucht strong { font-size: var(--sf-hb-text); }
.sf-hmv-club li span, .sf-hmv-club-liste li span, .sf-hmv-gebucht span { font-size: var(--sf-hb-text-klein); color: var(--sf-muted); }
.sf-hmv-club li em, .sf-hmv-club-liste li em, .sf-hmv-gebucht em { font-size: var(--sf-hb-fein); font-style: normal; font-weight: 700; color: var(--sf-club); }
.sf-hmv-gebucht { display: flex; flex-direction: column; gap: var(--sf-hm-s1); }
.sf-hmv-partner.sf-hmv-partner { display: grid; gap: var(--sf-hm-s1); }
.sf-hmv-partner.sf-hmv-partner p { margin: 0; font-size: var(--sf-hb-text-klein); color: var(--sf-ink); }
.sf-hmv-ausruestung { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); }
.sf-hmv-gruppe { display: grid; align-content: start; gap: var(--sf-hm-s2); min-width: 0; }
.sf-hmv-gruppe-name { margin: 0; padding-bottom: var(--sf-hm-s2); border-bottom: 2px solid var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-ink); }
.sf-hmv-liste { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.sf-hmv-liste li { margin: 0; padding: 0; border-bottom: 1px solid var(--sf-line); }
.sf-hmv-liste a { display: flex; align-items: center; gap: var(--sf-hm-s3); padding: var(--sf-hm-s2) 0; color: var(--sf-ink); text-decoration: none; }
.sf-hmv-bild { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: var(--sf-hmv-bild); height: var(--sf-hmv-bild); overflow: hidden; background: var(--sf-surface); }
.sf-hmv-bild[data-sf-produkt] { background: var(--sf-white); outline: 1px solid var(--sf-line); outline-offset: -1px; }
.sf-hmv-bild img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.sf-hmv-bild[data-sf-produkt] img { box-sizing: border-box; padding: var(--sf-hm-s1); object-fit: contain; }
.sf-hmv-symbol { background: var(--sf-hmv-symbol-grund); color: var(--sf-section-accent, var(--sf-ink)); }
.sf-hmv-symbol svg { display: block; width: 62%; height: 62%; }
.sf-hmv-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); line-height: 1.3; color: var(--sf-muted); }
.sf-hmv-text b { font-size: var(--sf-hb-text); font-weight: 700; line-height: 1.25; color: var(--sf-ink); overflow-wrap: normal; hyphens: manual; }
.sf-hmv-pfeil { flex: 0 0 auto; font-family: var(--sf-body); font-size: var(--sf-hb-text); font-weight: 700; color: var(--sf-section-accent, var(--sf-ink)); transition: transform 0.2s ease; }
.sf-hmv-liste a:hover b { color: var(--sf-section-accent, var(--sf-ink)); }
.sf-hmv-liste a:hover .sf-hmv-pfeil { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
.sf-hmv-pfeil { transition: none; }
}
.sf-hmv-gruppe--marke { gap: var(--sf-hm-s3); }
@container sf-hmv (max-width: 619px) {
.sf-hmv-liste--rechner { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sf-hm-s3); }
.sf-hmv-liste--rechner li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sf-hmv-liste--rechner a { flex-direction: column; align-items: flex-start; gap: var(--sf-hm-s2); padding: var(--sf-hm-s3) 0; }
.sf-hmv-liste--rechner .sf-hmv-bild { width: var(--sf-hmv-symbol-klein); height: var(--sf-hmv-symbol-klein); }
.sf-hmv-liste--rechner .sf-hmv-text span, .sf-hmv-liste--rechner .sf-hmv-pfeil { display: none; }
.sf-hmv-liste--rechner .sf-hmv-text b { font-size: var(--sf-hb-text-klein); }
}
@container sf-hmv (min-width: 620px) {
.sf-hmv-ausruestung[data-sf-spalten="2"], .sf-hmv-ausruestung[data-sf-spalten="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s5) var(--sf-hm-s6); }
.sf-hmv-ausruestung[data-sf-spalten="3"] .sf-hmv-gruppe--marke { grid-column: 1 / -1; }
.sf-hmv-bild { width: var(--sf-hmv-bild-breit); height: var(--sf-hmv-bild-breit); }
}
@container sf-hmv (min-width: 980px) {
.sf-hmv-ausruestung[data-sf-spalten="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-hmv-ausruestung[data-sf-spalten="3"] .sf-hmv-gruppe--marke { grid-column: auto; }
}
.sf-dynamik .sf-hmv-streifen { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin-block: var(--sf-hm-s3); padding: 10px 14px; border-left: 3px solid var(--sf-travel); background: var(--sf-travel-tint); font-size: var(--sf-size-14); }
.sf-dynamik .sf-hmv-streifen-titel { font-weight: 700; color: var(--sf-ink); }
.sf-dynamik .sf-hmv-streifen-ziele { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.sf-dynamik .sf-hmv-streifen-ziele a { color: var(--sf-travel); font-weight: 600; text-decoration: none; }
.sf-dynamik .sf-hmv-streifen-ziele a:hover { text-decoration: underline; }
.sf-dynamik .sf-hmv-streifen-ziele a.sf-hmv-streifen-alle { color: var(--sf-ink); }
/* rubrik.css */
.sf-rk { container: sf-rk / inline-size; display: grid; gap: var(--sf-hm-s5); margin: var(--sf-hm-s4) auto var(--sf-hm-abschnitt); }
.sf-rk-kopf { display: grid; gap: var(--sf-hm-s2); }
.sf-rk-titel.sf-rk-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: clamp(38px, 9cqi, 72px); font-weight: var(--sf-hb-titel-gewicht); line-height: 0.98; letter-spacing: 0; text-transform: none; color: var(--sf-ink); }
.sf-rk-titel.sf-rk-titel:focus { outline: none; }
.sf-rk-lead.sf-rk-lead { margin: 0; max-width: 60ch; font-family: var(--sf-body); font-size: var(--sf-hb-text); line-height: 1.45; color: var(--sf-text); }
.sf-rk-neu { display: grid; }
.sf-rk-neu .sf-hb-kopf.sf-hb-kopf { margin-bottom: var(--sf-hm-s3); }
.sf-rk-neu .sf-hb-h2.sf-hb-h2 { font-size: var(--sf-hb-h3); }
.sf-rk-anzeigen { display: grid; }
.sf-rk-buchung { display: grid; }
@container sf-rk (min-width: 760px) {
.sf-rk-neu .sf-hb-karten--wischen.sf-hb-karten--wischen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-rk-gruppen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); }
.sf-rk-gruppe { display: grid; align-content: start; gap: var(--sf-hm-s2); min-width: 0; }
.sf-rk-gruppe-name.sf-rk-gruppe-name { margin: 0; padding-bottom: var(--sf-hm-s2); border-bottom: 2px solid var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-ink); }
.sf-rk-berater.sf-rk-berater { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
.sf-rk-berater.sf-rk-berater li { margin: 0; padding: 0; border-bottom: 1px solid var(--sf-line); }
.sf-rk-berater.sf-rk-berater a { display: flex; align-items: center; gap: var(--sf-hm-s3); padding: var(--sf-hm-s2) 0; color: var(--sf-ink); text-decoration: none; }
.sf-rk-berater-bild.sf-rk-berater-bild { flex: 0 0 auto; display: block; width: var(--sf-rk-berater-bild); height: var(--sf-rk-berater-bild); overflow: hidden; background: var(--sf-surface); }
.sf-rk-berater-bild[data-sf-produkt] { background: var(--sf-white); outline: 1px solid var(--sf-line); outline-offset: -1px; }
.sf-rk-berater-bild.sf-rk-berater-bild img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.sf-rk-berater-bild[data-sf-produkt] img { box-sizing: border-box; padding: var(--sf-hm-s1); object-fit: contain; }
.sf-rk-berater-text.sf-rk-berater-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: 2px; min-width: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); line-height: 1.3; color: var(--sf-muted); }
.sf-rk-berater-text.sf-rk-berater-text b { font-size: var(--sf-hb-text); font-weight: 700; line-height: 1.25; color: var(--sf-ink); overflow-wrap: normal; hyphens: manual; }
.sf-rk-berater.sf-rk-berater a:hover b { color: var(--sf-section-accent, var(--sf-ink)); text-decoration: underline; text-underline-offset: 3px; }
.sf-rk-stoebern { display: grid; gap: var(--sf-hm-s2); margin-top: var(--sf-hm-s3); }
.sf-rk-stoebern .sf-rk-gruppe-name.sf-rk-gruppe-name { border-bottom: 0; padding-bottom: 0; color: var(--sf-muted); }
@container sf-rk (min-width: 560px) {
.sf-rk-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s5) var(--sf-hm-s6); }
}
@container sf-rk (min-width: 960px) {
.sf-rk-gruppen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-rk-beitraege .sf-ab { margin-top: 0; }
.sf-rk-beitraege .sf-ab .sf-rk-beitraege-kopf { padding-top: 0; border-top: 0; }
.sf-rk-beitraege .sf-ab .sf-rk-beitraege-kopf h2 { font-size: var(--sf-hb-h2); }
.sf-rk-beitraege .sf-ab .sf-ab-regal-kopf h3 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.05; }
@container sf-ab (min-width: 900px) {
.sf-rk-beitraege .sf-ab .sf-rk-filter { grid-template-columns: repeat(3, auto); }
.sf-rk-beitraege .sf-ab .sf-rk-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* alle-beitraege.css */
.sf-ab { container: sf-ab / inline-size; display: grid; gap: var(--sf-hm-s5, 24px); margin-block: var(--sf-hm-s4, 16px) var(--sf-hm-abschnitt, 32px); }
.sf-ab [data-sf-bereich="travel"], .sf-ab[data-sf-bereich="travel"] { --sf-ab-farbe: var(--sf-travel); }
.sf-ab [data-sf-bereich="advice"] { --sf-ab-farbe: var(--sf-advice); }
.sf-ab [data-sf-bereich="fit"] { --sf-ab-farbe: var(--sf-fit); }
.sf-ab [data-sf-bereich="club"] { --sf-ab-farbe: var(--sf-club); }
.sf-ab .sf-ab-suche { display: flex; max-width: 760px; border: 2px solid var(--sf-ink); background: var(--sf-white); }
.sf-ab .sf-ab-suche input { flex: 1 1 auto; min-width: 0; border: 0; border-radius: 0; padding: 13px 14px; font: inherit; font-size: var(--sf-size-17); background: transparent; color: var(--sf-ink); }
.sf-ab .sf-ab-suche input:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 2px; }
.sf-ab .sf-ab-suche button { flex: none; padding: 0 18px; border: 0; background: var(--sf-ink); color: var(--sf-white); font: 700 var(--sf-size-16) / 1 var(--sf-body); cursor: pointer; }
.sf-ab .sf-ab-oft { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: -12px 0 0; font-size: var(--sf-size-14); color: var(--sf-muted); }
.sf-ab .sf-ab-oft a { color: var(--sf-ink); text-decoration: underline; text-underline-offset: 3px; }
.sf-ab .sf-ab-absichten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s2, 8px); }
.sf-ab .sf-ab-absicht { display: grid; gap: 4px; align-content: start; padding: 12px; border: 1px solid var(--sf-line); border-top: 4px solid var(--sf-ab-farbe, var(--sf-ink)); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-ab .sf-ab-absicht b { font: var(--sf-heading-weight, 800) var(--sf-ab-titel-absicht) / 1 var(--sf-display-condensed); }
.sf-ab .sf-ab-absicht span { font-size: var(--sf-size-13); color: var(--sf-muted); }
.sf-ab .sf-ab-absicht:hover b, .sf-ab .sf-ab-absicht:focus-visible b { text-decoration: underline; }
.sf-ab .sf-ab-gruppen { display: grid; gap: var(--sf-hm-s4, 16px); }
.sf-ab .sf-ab-gruppe { display: grid; gap: 8px; align-content: start; min-width: 0; }
.sf-ab .sf-ab-gruppe-name { font: 700 var(--sf-size-11) / 1 var(--sf-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-muted); }
.sf-ab .sf-ab-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sf-ab .sf-ab-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-ink); font: 600 var(--sf-size-14) / 1 var(--sf-body); text-decoration: none; white-space: nowrap; }
.sf-ab .sf-ab-chip small { font-size: var(--sf-size-12); color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-ab .sf-ab-chip[data-sf-aktiv="ja"] { background: var(--sf-ink); border-color: var(--sf-ink); color: var(--sf-white); }
.sf-ab .sf-ab-chip[data-sf-aktiv="ja"] small { color: var(--sf-neutral-250); }
.sf-ab .sf-ab-chip:hover { border-color: var(--sf-ink); }
.sf-ab .sf-ab-chip--weg { border-color: var(--sf-ink); }
.sf-ab .sf-ab-loeschen { font-size: var(--sf-size-14); color: var(--sf-ink); text-decoration: underline; text-underline-offset: 3px; }
.sf-ab .sf-ab-mehr { border-top: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); }
.sf-ab .sf-ab-mehr summary { display: flex; align-items: center; gap: 8px; padding: 12px 0; font: 700 var(--sf-size-15) / 1 var(--sf-body); cursor: pointer; list-style: none; }
.sf-ab .sf-ab-mehr summary::-webkit-details-marker { display: none; }
.sf-ab .sf-ab-mehr summary::after { content: "▾"; margin-left: auto; }
.sf-ab .sf-ab-mehr[open] summary::after { content: "▴"; }
.sf-ab .sf-ab-mehr .sf-ab-gruppen { padding-bottom: 16px; }
.sf-ab .sf-ab-zahl { min-width: 20px; padding: 3px 6px; border-radius: 10px; background: var(--sf-travel); color: var(--sf-white); font-size: var(--sf-size-12); text-align: center; }
.sf-ab .sf-ab-gruppen--breit { display: none; }
.sf-ab .sf-ab-aktiv { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.sf-ab .sf-ab-anzahl { font-size: var(--sf-size-14); color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-ab .sf-ab-direkt { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-ab .sf-ab-ziel { display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; border: 1px solid var(--sf-line); color: var(--sf-ink); font: 700 var(--sf-size-14) / 1.2 var(--sf-body); text-decoration: none; }
.sf-ab .sf-ab-ziel small { font: 700 var(--sf-size-10) / 1 var(--sf-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-ab .sf-ab-regal { display: grid; gap: 12px; padding-top: 12px; border-top: 2px solid var(--sf-ink); }
.sf-ab .sf-ab-regal-kopf, .sf-ab .sf-ab-ergebnis-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; }
.sf-ab .sf-ab-regal-kopf h2, .sf-ab .sf-ab-ergebnis-kopf h2 { margin: 0; font: var(--sf-heading-weight, 800) var(--sf-ab-titel-regal) / 1 var(--sf-display-condensed); }
.sf-ab .sf-ab-regal-kopf a { font: 700 var(--sf-size-14) / 1.2 var(--sf-body); color: var(--sf-ink); text-decoration: none; border-bottom: 2px solid var(--sf-ab-farbe, var(--sf-ink)); white-space: nowrap; }
.sf-ab .sf-ab-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
.sf-ab .sf-ab-raster > .sf-ab-karte:nth-child(n + 3) { display: none; }
.sf-ab .sf-ab-ergebnis { display: grid; gap: 14px; }
.sf-ab .sf-ab-karte { min-width: 0; --sf-ab-farbe: var(--sf-ink); }
.sf-ab .sf-ab-karte[data-sf-bereich="travel"] { --sf-ab-farbe: var(--sf-travel); }
.sf-ab .sf-ab-karte[data-sf-bereich="advice"] { --sf-ab-farbe: var(--sf-advice); }
.sf-ab .sf-ab-karte[data-sf-bereich="fit"] { --sf-ab-farbe: var(--sf-fit); }
.sf-ab .sf-ab-karte[data-sf-bereich="club"] { --sf-ab-farbe: var(--sf-club); }
.sf-ab .sf-ab-karte-link { display: grid; gap: 8px; color: var(--sf-ink); text-decoration: none; }
.sf-ab .sf-ab-bild { position: relative; display: block; aspect-ratio: 3 / 2; max-width: 100%; overflow: hidden; background: var(--sf-surface); }
.sf-ab .sf-ab-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-ab .sf-ab-text { display: grid; gap: 5px; align-content: start; min-width: 0; }
.sf-ab .sf-ab-bereich { font: 700 var(--sf-size-11) / 1.2 var(--sf-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-ab-farbe); }
.sf-ab .sf-ab-karte h3 { margin: 0; font: var(--sf-heading-weight, 800) var(--sf-ab-titel-karte) / 1.05 var(--sf-display-condensed); text-wrap: balance; }
.sf-ab .sf-ab-karte-link:hover h3, .sf-ab .sf-ab-karte-link:focus-visible h3 { text-decoration: underline; }
.sf-ab .sf-ab-info { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: var(--sf-size-12); color: var(--sf-muted); }
.sf-ab .sf-ab-anzeige { font-size: inherit; font-weight: 400; letter-spacing: 0; text-transform: none; }
.sf-ab .sf-ab-liste { display: grid; gap: 14px; }
.sf-ab .sf-ab-liste .sf-ab-karte { padding-bottom: 14px; border-bottom: 1px solid var(--sf-line); }
.sf-ab .sf-ab-liste .sf-ab-karte-link { grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: start; }
.sf-ab .sf-ab-liste .sf-ab-bild { aspect-ratio: 1 / 1; }
.sf-ab .sf-ab-blaettern { margin-block: 8px 0; }
@container sf-ab (min-width: 560px) {
.sf-ab .sf-ab-raster > .sf-ab-karte:nth-child(n + 3) { display: block; }
.sf-ab .sf-ab-raster, .sf-ab .sf-ab-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; }
.sf-ab .sf-ab-liste .sf-ab-karte { padding-bottom: 0; border-bottom: 0; }
.sf-ab .sf-ab-liste .sf-ab-karte-link { grid-template-columns: 1fr; gap: 8px; }
.sf-ab .sf-ab-liste .sf-ab-bild { aspect-ratio: 3 / 2; }
.sf-ab .sf-ab-absichten { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
}
@container sf-ab (min-width: 900px) {
.sf-ab .sf-ab-mehr { display: none; }
.sf-ab .sf-ab-gruppen--breit { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 20px 36px; padding-top: 18px; border-top: 1px solid var(--sf-line); }
.sf-ab .sf-ab-gruppen--breit .sf-ab-chips { max-width: 440px; }
.sf-ab .sf-ab-raster, .sf-ab .sf-ab-liste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-ab .sf-ab-absicht { padding: 16px; }
.sf-ab .sf-ab-absicht b { font-size: var(--sf-ab-titel-absicht-breit); }
.sf-ab .sf-ab-karte h3 { font-size: var(--sf-ab-titel-karte-breit); }
.sf-ab .sf-ab-regal-kopf h2, .sf-ab .sf-ab-ergebnis-kopf h2 { font-size: var(--sf-ab-titel-regal-breit); }
}
/* kaufberatung.css */
.sf-kbs { container: sf-kbs / inline-size; display: grid; }
.sf-kbs-inhalt { display: grid; gap: var(--sf-hm-abschnitt); padding-block: var(--sf-hm-s6) var(--sf-hm-abschnitt); }
.sf-kbs-abschnitt { display: grid; gap: var(--sf-hm-s4); min-width: 0; scroll-margin-top: var(--sf-hm-s6); }
.sf-kbs-leiste, .sf-kbs-krume { container-type: inline-size; }
.sf-kbs-finder-kopf { display: grid; gap: var(--sf-hm-s1); min-width: 0; }
.sf-kbs-kapitel.sf-kbs-kapitel { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-ink)); }
.sf-kbs-h2.sf-kbs-h2 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h2); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); letter-spacing: 0; text-transform: none; color: var(--sf-ink); text-wrap: balance; }
.sf-kbs-finder-unter.sf-kbs-finder-unter { margin: 0; max-width: 62ch; font-size: var(--sf-hb-text); line-height: 1.5; color: var(--sf-ink); }
.sf-kbs-finder { display: grid; gap: var(--sf-hm-s4); min-width: 0; scroll-margin-top: var(--sf-hm-s6); }
.sf-kbs-finder-hinweis.sf-kbs-finder-hinweis { margin: 0; font-size: var(--sf-hb-text-klein); color: var(--sf-muted); }
.sf-kbs-kachel-rahmen { min-width: 0; }
.sf-kbs-kacheln { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s3); }
.sf-kbs-kachel[data-sf-kbs-breit] { grid-column: 1 / -1; aspect-ratio: auto; min-height: 150px; }
@container sf-kbs (min-width: 561px) {
.sf-kbs-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-kbs-kachel[data-sf-kbs-breit] { grid-column: auto; aspect-ratio: 4 / 5; }
}
@container sf-kbs (min-width: 901px) {
.sf-kbs-kacheln { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.sf-kbs-kachel.sf-kbs-kachel { position: relative; display: grid; align-content: end; gap: 2px; aspect-ratio: 4 / 5; min-width: 0; margin: 0; padding: var(--sf-hm-s3); overflow: hidden; border: 0; border-radius: 0; background: var(--sf-ink); color: var(--sf-white); font: inherit; text-align: left; text-decoration: none; cursor: pointer; scroll-margin-top: var(--sf-hm-s7); transition: opacity 0.25s ease, filter 0.25s ease; }
.sf-kbs-kachel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sf-kbs-kachel.sf-kbs-kachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--sf-hb-schleier-tief) 0%, var(--sf-hb-schleier-null) 58%); }
.sf-kbs-kachel:hover img { transform: scale(1.04); }
.sf-kbs-kachel b, .sf-kbs-kachel span, .sf-kbs-kachel small, .sf-kbs-kachel em { position: relative; z-index: 1; }
.sf-kbs-kachel b { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; text-transform: uppercase; }
.sf-kbs-kachel span { font-size: var(--sf-hb-text-klein); line-height: 1.3; }
.sf-kbs-kachel .sf-kbs-kachel-nachweis { position: absolute; top: var(--sf-hm-s2); right: var(--sf-hm-s2); font-size: var(--sf-size-10); color: var(--sf-white); opacity: 0.85; }
.sf-kbs-kachel .sf-kbs-kachel-gewaehlt { position: absolute; top: 0; left: 0; padding: 4px var(--sf-hm-s2); background: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-size-12); font-style: normal; font-weight: 700; }
.sf-kbs-kachel[aria-pressed="true"] { outline: 4px solid var(--sf-ink); outline-offset: 3px; }
.sf-kbs-kachel:focus-visible { outline: 3px solid var(--sf-section-accent, var(--sf-ink)); outline-offset: 3px; }
.sf-kbs-kacheln[data-sf-kbs-wahl] .sf-kbs-kachel[aria-pressed="false"] { opacity: 0.5; filter: grayscale(0.6); }
.sf-kbs-kacheln[data-sf-kbs-wahl] .sf-kbs-kachel[aria-pressed="false"]:hover { opacity: 0.85; filter: none; }
.sf-kbs-panel { position: relative; grid-column: 1 / -1; display: grid; gap: var(--sf-hm-s5); min-width: 0; padding: var(--sf-hm-s5); border-top: 4px solid var(--sf-ink); background: var(--sf-surface); scroll-margin-top: var(--sf-hm-s7); }
.sf-kbs-panel[data-sf-kbs-auf] { animation: sf-kbs-auf 0.35s ease both; }
.sf-kbs-panel[data-sf-kbs-auf]::before { content: ""; position: absolute; top: -10px; left: var(--sf-kbs-zeiger, 50%); margin-left: -10px; border: 10px solid transparent; border-top: 0; border-bottom-color: var(--sf-ink); }
@keyframes sf-kbs-auf { from { opacity: 0; clip-path: inset(-20px 0 80% 0); } to { opacity: 1; clip-path: inset(-20px 0 0 0); } }
@container sf-kbs (max-width: 560px) {
.sf-kbs-panel { margin-inline: calc(-1 * var(--sf-hm-s4)); padding: var(--sf-hm-s4); }
}
.sf-kbs-panel-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sf-hm-s2) var(--sf-hm-s4); }
.sf-kbs-panel-kopf h3 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h2); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; color: var(--sf-ink); }
.sf-kbs-panel-kopf h3 small { display: block; margin-bottom: var(--sf-hm-s1); font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-ink)); }
.sf-kbs-panel-zu.sf-kbs-panel-zu { min-height: var(--sf-hb-knopf-hoehe, 44px); padding: 0 var(--sf-hm-s3); border: 1px solid var(--sf-line-strong, var(--sf-ink)); border-radius: 0; background: var(--sf-white); color: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-size-14); font-weight: 700; cursor: pointer; }
.sf-kbs-panel-satz.sf-kbs-panel-satz { margin: calc(-1 * var(--sf-hm-s2)) 0 0; max-width: 70ch; font-size: var(--sf-hb-text); color: var(--sf-ink); }
.sf-kbs-keinberater.sf-kbs-keinberater { margin: 0; padding: var(--sf-hm-s4); background: var(--sf-white); }
.sf-kbs-berater-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: var(--sf-hm-s3); }
.sf-kbs-bk { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: var(--sf-hm-s2); min-width: 0; padding: var(--sf-hm-s4); border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-kbs-bk[data-sf-kbs-gewaehlt] { border-color: var(--sf-section-accent, var(--sf-ink)); }
.sf-kbs-bk-name.sf-kbs-bk-name { margin: 0; font-family: var(--sf-body); font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-ink)); }
.sf-kbs-bk-frage.sf-kbs-bk-frage { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.02; color: var(--sf-ink); text-wrap: balance; }
.sf-kbs-bk-intro.sf-kbs-bk-intro, .sf-kbs-bk-stand.sf-kbs-bk-stand { margin: 0; font-size: var(--sf-hb-text-klein); line-height: 1.4; color: var(--sf-muted); }
.sf-kbs-bk-stand b { color: var(--sf-ink); }
.sf-kbs-bk-start.sf-kbs-bk-start { display: flex; align-items: center; justify-content: space-between; min-height: var(--sf-hb-knopf-hoehe, 44px); padding: 0 var(--sf-hm-s3); background: var(--sf-ink); color: var(--sf-white); font-family: var(--sf-body); font-size: var(--sf-size-15); font-weight: 700; text-decoration: none; }
.sf-kbs-bk-start.sf-kbs-bk-start::after { content: "→"; }
.sf-kbs-bk[data-sf-kbs-gewaehlt] .sf-kbs-bk-start { background: var(--sf-section-accent, var(--sf-ink)); animation: sf-kbs-knopf 0.6s ease; }
@keyframes sf-kbs-knopf { 0% { transform: scale(0.97); } 60% { transform: scale(1.02); } 100% { transform: none; } }
.sf-kbs-ent { display: grid; grid-template-columns: repeat(var(--sf-kbs-n, 3), minmax(0, 1fr)); padding-block: var(--sf-hm-s2); border-block: 1px solid var(--sf-line); }
.sf-kbs-ent-feld.sf-kbs-ent-feld { display: grid; justify-items: center; gap: 2px; min-width: 0; padding-bottom: 6px; border-bottom: 3px solid transparent; color: var(--sf-ink); text-decoration: none; transition: opacity 0.2s ease, background 0.2s ease; }
.sf-kbs-ent-feld svg { display: block; width: 100%; height: auto; }
.sf-kbs-ent-label { font-family: var(--sf-body); font-size: var(--sf-size-12); font-weight: 700; line-height: 1.15; text-align: center; }
.sf-kbs-ent[data-sf-kbs-viele] .sf-kbs-ent-label { font-size: var(--sf-size-10); }
.sf-kbs-ent-feld.sf-kbs-ent-feld:hover { background: var(--sf-kbs-blau-zart); }
.sf-kbs-ent-feld:focus-visible { outline: 2px solid var(--sf-section-accent, var(--sf-ink)); outline-offset: -2px; }
.sf-kbs-ent-feld[aria-current="true"] { background: var(--sf-kbs-blau-zart); border-bottom-color: var(--sf-section-accent, var(--sf-ink)); color: var(--sf-section-accent, var(--sf-ink)); }
.sf-kbs-ent[data-sf-kbs-wahl] .sf-kbs-ent-feld:not([aria-current]):not([data-sf-kbs-mit]) { opacity: 0.45; }
.sf-kbs-m { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sf-kbs-fein { stroke-width: 1.2; }
.sf-kbs-dick { stroke-width: 2.4; }
.sf-kbs-mf { fill: currentColor; }
.sf-kbs-mh { fill: var(--sf-white); stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.sf-kbs-mw { fill: var(--sf-white); stroke: currentColor; stroke-width: 1.2; stroke-linejoin: round; }
.sf-kbs-mg { fill: var(--sf-muted); }
.sf-kbs-mz, .sf-kbs-rf { fill: var(--sf-ink); fill-opacity: 0.06; }
.sf-kbs-rl { fill: none; stroke: var(--sf-ink); stroke-width: 1.3; stroke-linejoin: round; }
.sf-kbs-leise { stroke-opacity: 0.35; }
.sf-kbs-kegel { fill: var(--sf-ink); fill-opacity: 0.03; stroke: var(--sf-muted); stroke-width: 1; stroke-dasharray: 3 3; }
.sf-kbs-kegel.sf-kbs-an { fill: var(--sf-kbs-licht); fill-opacity: 1; stroke: currentColor; stroke-dasharray: none; }
.sf-kbs-ent-feld[aria-current="true"] .sf-kbs-mg { fill: currentColor; }
.sf-kbs-dazu { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); padding-top: var(--sf-hm-s5); border-top: 1px solid var(--sf-line); }
@container sf-kbs (min-width: 761px) {
.sf-kbs-dazu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-kbs-dazu h4 { margin: 0 0 var(--sf-hm-s2); font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-size-20); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.1; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sf-ink); }
.sf-kbs-dazu ul { display: grid; gap: var(--sf-hm-s1); margin: 0; padding: 0; list-style: none; }
.sf-kbs-dazu a { display: block; padding-block: var(--sf-hm-s2); border-bottom: 1px solid var(--sf-line); color: var(--sf-ink); font-weight: 600; line-height: 1.35; text-decoration: none; }
.sf-kbs-dazu a:hover { color: var(--sf-section-accent, var(--sf-ink)); }
.sf-kbs-dazu small { display: block; margin-top: 2px; font-size: var(--sf-size-13); font-weight: 400; color: var(--sf-muted); }
.sf-kbs-dazu-leer.sf-kbs-dazu-leer { margin: 0; font-size: var(--sf-hb-text-klein); color: var(--sf-muted); }
.sf-kbs-partner-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
@container sf-kbs (min-width: 760px) {
.sf-kbs-partner-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-kbs-partner.sf-kbs-partner { display: grid; grid-template-columns: var(--sf-hb-bildkopf-karte-bild-breit) minmax(0, 1fr); gap: var(--sf-hm-s3); align-items: center; padding-block: var(--sf-hm-s3); border-block: 1px solid var(--sf-line); color: var(--sf-ink); text-decoration: none; }
.sf-kbs-partner-bild { display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sf-surface); }
.sf-kbs-partner-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-kbs-partner-text { display: grid; gap: var(--sf-hm-s1); min-width: 0; }
.sf-kbs-partner-text small { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-size-18); font-weight: var(--sf-hb-titel-gewicht); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-ink); }
.sf-kbs-partner-text b { font-size: var(--sf-hb-text); font-weight: 600; line-height: 1.35; }
.sf-kbs-partner.sf-kbs-partner:hover b { text-decoration: underline; }
.sf-kbs-ratgeber { display: grid; gap: var(--sf-hm-s5); min-width: 0; scroll-margin-top: var(--sf-hm-s6); }
.sf-kbs-satz-flaeche { display: grid; gap: var(--sf-hm-s4); padding: var(--sf-hm-s6); background: var(--sf-ink); color: var(--sf-white); }
@container sf-kbs (max-width: 560px) {
.sf-kbs-satz-flaeche { margin-inline: calc(-1 * var(--sf-hm-s4)); padding: var(--sf-hm-s5) var(--sf-hm-s4); }
}
.sf-kbs-satz.sf-kbs-satz { margin: 0; max-width: 30ch; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: clamp(34px, 5.4cqi, 66px); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.08; color: var(--sf-white); }
.sf-kbs-slot.sf-kbs-slot { display: inline; margin: 0; padding: 0 0.08em; border: 0; border-bottom: 0.09em solid var(--sf-kbs-blau-hell); border-radius: 0; background: none; color: var(--sf-kbs-blau-hell); font: inherit; line-height: inherit; text-align: left; cursor: pointer; }
.sf-kbs-slot.sf-kbs-slot::after { content: "▾"; display: inline-block; margin-left: 0.15em; font-size: 0.45em; vertical-align: 0.35em; transition: transform 0.2s ease; }
.sf-kbs-slot[aria-expanded="true"] { background: var(--sf-hb-schleier-leicht); }
.sf-kbs-slot[aria-expanded="true"]::after { transform: rotate(180deg); }
.sf-kbs-slot[data-sf-kbs-frisch] { animation: sf-kbs-wort 0.7s ease; }
@keyframes sf-kbs-wort { 0% { background: var(--sf-kbs-blau-hell); color: var(--sf-ink); } 100% { background: transparent; } }
.sf-kbs-optionen { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); animation: sf-kbs-ein 0.25s ease both; }
.sf-kbs-option.sf-kbs-option { display: inline-flex; align-items: center; gap: var(--sf-hm-s2); min-height: 52px; margin: 0; padding: var(--sf-hm-s1) var(--sf-hm-s4); border: 1px solid var(--sf-white); border-radius: 0; background: transparent; color: var(--sf-white); font-family: var(--sf-body); font-size: var(--sf-size-18); font-weight: 700; line-height: 1.2; text-align: left; cursor: pointer; }
.sf-kbs-option small { font-size: var(--sf-size-12); color: var(--sf-kbs-blau-hell); }
.sf-kbs-option[aria-pressed="true"] { background: var(--sf-white); color: var(--sf-ink); }
.sf-kbs-option[aria-pressed="true"] small { color: var(--sf-section-accent, var(--sf-ink)); }
@container sf-kbs (max-width: 560px) {
.sf-kbs-option.sf-kbs-option { flex: 1 1 calc(50% - var(--sf-hm-s2)); padding: var(--sf-hm-s1) var(--sf-hm-s3); font-size: var(--sf-size-15); }
.sf-kbs-option small { margin-left: auto; }
}
.sf-kbs-satz-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-hm-s3); padding-top: var(--sf-hm-s3); border-top: 1px solid var(--sf-hb-hell-linie, var(--sf-muted)); }
.sf-kbs-satz-zahl.sf-kbs-satz-zahl { margin: 0; font-size: var(--sf-size-16); font-weight: 600; color: var(--sf-white); }
.sf-kbs-satz-zahl b { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); color: var(--sf-kbs-blau-hell); }
.sf-kbs-satz-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-kbs-wuerfel.sf-kbs-wuerfel, .sf-kbs-neu.sf-kbs-neu { min-height: var(--sf-hb-knopf-hoehe, 44px); margin: 0; padding: 0 var(--sf-hm-s4); border: 1px solid var(--sf-white); border-radius: 0; background: var(--sf-white); color: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-size-15); font-weight: 700; cursor: pointer; }
.sf-kbs-wuerfel.sf-kbs-wuerfel::before { content: "⚄"; margin-right: var(--sf-hm-s2); font-size: var(--sf-size-20); vertical-align: -2px; }
.sf-kbs-neu.sf-kbs-neu { background: transparent; color: var(--sf-white); }
@keyframes sf-kbs-ein { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.sf-kbs-satz-ergebnis { min-width: 0; }
.sf-kbs-antworten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
@container sf-kbs (min-width: 761px) {
.sf-kbs-antworten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-kbs-satz-ergebnis .sf-kbs-antworten li { animation: sf-kbs-ein 0.3s ease both; }
.sf-kbs-antwort.sf-kbs-antwort { position: relative; display: grid; gap: 4px; height: 100%; padding: var(--sf-hm-s4) calc(var(--sf-hm-s4) + 24px) var(--sf-hm-s4) var(--sf-hm-s4); border: 1px solid var(--sf-line); border-top: 3px solid var(--sf-ink); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-kbs-antwort em { font-family: var(--sf-body); font-size: var(--sf-size-11); font-style: normal; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-ink)); }
.sf-kbs-antwort b { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.08; }
.sf-kbs-antwort span { font-size: var(--sf-size-13); line-height: 1.35; color: var(--sf-muted); }
.sf-kbs-antwort.sf-kbs-antwort::after { content: "→"; position: absolute; top: 50%; right: var(--sf-hm-s4); transform: translateY(-50%); font-size: var(--sf-size-18); font-weight: 700; color: var(--sf-section-accent, var(--sf-ink)); }
.sf-kbs-antwort.sf-kbs-antwort:hover b { color: var(--sf-section-accent, var(--sf-ink)); }
.sf-kbs-antwort[data-sf-kbs-bald] { border: 1px dashed var(--sf-muted); border-top: 3px dashed var(--sf-muted); background: var(--sf-surface); }
.sf-kbs-antwort[data-sf-kbs-bald]::after { content: none; }
.sf-kbs-antwort[data-sf-kbs-bald] em { color: var(--sf-muted); }
.sf-kbs-leer.sf-kbs-leer { margin: 0; color: var(--sf-muted); }
.sf-kbs-sprung { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-kbs-sprung a { display: inline-flex; align-items: center; min-height: var(--sf-hb-knopf-hoehe, 44px); padding: 0 var(--sf-hm-s3); border: 1px solid var(--sf-ink); color: var(--sf-ink); font-size: var(--sf-size-14); font-weight: 700; text-decoration: none; }
.sf-kbs-fragegruppe { display: grid; gap: var(--sf-hm-s4); scroll-margin-top: var(--sf-hm-s6); }
.sf-kbs-werkzeug.sf-kbs-werkzeug { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-hm-s3) var(--sf-hm-s5); padding: var(--sf-hm-s5); border: 1px solid var(--sf-line); border-left: 4px solid var(--sf-section-accent, var(--sf-ink)); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-kbs-werkzeug > span { display: grid; gap: var(--sf-hm-s1); max-width: 60ch; }
.sf-kbs-werkzeug b { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.05; }
.sf-kbs-werkzeug em { display: inline-flex; align-items: center; min-height: var(--sf-hb-knopf-hoehe, 44px); padding: 0 var(--sf-hm-s4); background: var(--sf-ink); color: var(--sf-white); font-style: normal; font-weight: 700; }
.sf-kbs-werkzeug em::after { content: " →"; margin-left: var(--sf-hm-s2); }
.sf-kbs-pflege-rahmen { min-width: 0; }
.sf-kbs-pflegekarten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); }
@container sf-kbs (min-width: 761px) {
.sf-kbs-pflegekarten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sf-kbs (min-width: 1101px) {
.sf-kbs-pflegekarten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-kbs-pk { display: grid; align-content: start; min-width: 0; border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-kbs-pk figure { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sf-ink); }
.sf-kbs-pk figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-kbs-pk figure::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--sf-hb-schleier-tief) 0%, var(--sf-hb-schleier-null) 55%); }
.sf-kbs-pk figure h3 { position: absolute; z-index: 1; left: var(--sf-hm-s4); right: var(--sf-hm-s4); bottom: var(--sf-hm-s3); margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; text-transform: uppercase; color: var(--sf-white); }
.sf-kbs-pk figcaption { position: absolute; z-index: 1; top: var(--sf-hm-s2); right: var(--sf-hm-s2); font-size: var(--sf-size-10); color: var(--sf-white); opacity: 0.85; }
.sf-kbs-pk-titel.sf-kbs-pk-titel { margin: 0; padding: var(--sf-hm-s4) var(--sf-hm-s4) 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); text-transform: uppercase; color: var(--sf-ink); }
.sf-kbs-pk ul { display: grid; margin: 0; padding: var(--sf-hm-s2) var(--sf-hm-s4) var(--sf-hm-s4); list-style: none; }
.sf-kbs-pk li { border-bottom: 1px solid var(--sf-line); }
.sf-kbs-pk li:last-child { border-bottom: 0; }
.sf-kbs-pk a { display: grid; gap: 2px; padding-block: var(--sf-hm-s3); color: var(--sf-ink); text-decoration: none; }
.sf-kbs-pk a b { font-size: var(--sf-size-16); font-weight: 700; line-height: 1.3; }
.sf-kbs-pk a span { font-size: var(--sf-size-13); line-height: 1.4; color: var(--sf-muted); }
.sf-kbs-pk a:hover b { color: var(--sf-section-accent, var(--sf-ink)); }
@media (prefers-reduced-motion: reduce) {
.sf-kbs-panel[data-sf-kbs-auf], .sf-kbs-bk[data-sf-kbs-gewaehlt] .sf-kbs-bk-start, .sf-kbs-slot[data-sf-kbs-frisch], .sf-kbs-optionen, .sf-kbs-satz-ergebnis .sf-kbs-antworten li { animation: none; }
}
.sf-kbs-ort { display: inline-flex; justify-self: start; border: 2px solid var(--sf-ink); }
.sf-kbs-ort-knopf.sf-kbs-ort-knopf { display: inline-flex; align-items: center; gap: var(--sf-hm-s2); min-height: var(--sf-hb-steuer-hoehe, 44px); padding: 0 var(--sf-hm-s4); border: 0; background: var(--sf-white); color: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-steuer-schrift, 14px); font-weight: 700; cursor: pointer; }
.sf-kbs-ort-knopf[aria-pressed="true"] { background: var(--sf-ink); color: var(--sf-white); }
.sf-kbs-ort-neu { padding: 2px var(--sf-hm-s1); background: var(--sf-section-accent, var(--sf-advice)); color: var(--sf-white); font-size: var(--sf-hb-mini, 11px); letter-spacing: 0.06em; text-transform: uppercase; }
.sf-kbs-ort-titel.sf-kbs-ort-titel { margin: var(--sf-hm-s4) 0 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); color: var(--sf-ink); }
.sf-kbs-stadt { display: grid; gap: var(--sf-hm-s4); }
.sf-kbs-marken.sf-kbs-marken { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-kbs-marken a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--sf-hm-s3); border: 1px solid var(--sf-line-stark, var(--sf-ink)); color: var(--sf-ink); font-weight: 700; text-decoration: none; }
.sf-kbs-stadt-shop.sf-kbs-stadt-shop { display: flex; margin: var(--sf-hm-s2) 0 0; }
.sf-kbs-stadt-shop .sf-kbs-bk-start { gap: var(--sf-hm-s4); }
.sf-kbs-stadt-shop .sf-kbs-bk-start::after { content: none; }
/* einkauf.css */
.sf-ek.sf-ek { display: grid; gap: var(--sf-hm-s4); margin: 0; min-width: 0; }
.sf-ek-bereich.sf-ek-bereich { display: grid; gap: var(--sf-hm-abschnitt); }
.sf-ek-mehr.sf-ek-mehr { margin-block: var(--sf-hm-abschnitt); }
.sf-ek-aktionen-liste.sf-ek-aktionen-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); margin: 0; padding: 0; list-style: none; }
.sf-ek-aktion.sf-ek-aktion { display: flex; margin: 0; padding: 0; min-width: 0; }
.sf-dynamik a.sf-ek-aktion-link, .sf-ek-aktion-link.sf-ek-aktion-link { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-ek-aktion-link.sf-ek-aktion-link:hover { border-color: var(--sf-ink); }
.sf-ek-aktion-link.sf-ek-aktion-link:focus-visible { outline: 2px solid var(--sf-section-accent, var(--sf-ink)); outline-offset: 2px; }
.sf-ek-aktion-bild.sf-ek-aktion-bild { position: relative; display: block; aspect-ratio: var(--sf-hb-bild); overflow: hidden; background: var(--sf-surface); }
.sf-ek-aktion-bild.sf-ek-aktion-bild img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; transition: transform 400ms ease; }
.sf-ek-aktion-link.sf-ek-aktion-link:hover .sf-ek-aktion-bild img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
.sf-ek-aktion-bild.sf-ek-aktion-bild img { transition: none; }
}
.sf-ek-aktion-bild.sf-ek-aktion-bild img.sf-ek-aktion-motiv { position: absolute; inset: 8% 15% 12%; width: 70%; height: 80%; object-fit: contain; }
.sf-ek-aktion-frist.sf-ek-aktion-frist { position: absolute; left: 0; bottom: 0; padding: 5px 10px; background: var(--sf-ink); color: var(--sf-white); font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 700; line-height: 1.3; }
.sf-ek-aktion-frist[data-sf-bald] { background: var(--sf-white); color: var(--sf-ink); }
.sf-ek-aktion-text.sf-ek-aktion-text { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--sf-hm-s2); padding: var(--sf-hm-s4); min-width: 0; }
.sf-ek-aktion-art.sf-ek-aktion-art { font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-ek-aktion[data-sf-art="gewinnspiel"] .sf-ek-aktion-art, .sf-ek-aktion[data-sf-art="produkttest"] .sf-ek-aktion-art { color: var(--sf-club); }
.sf-ek-aktion-titel.sf-ek-aktion-titel { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); color: var(--sf-ink); overflow-wrap: break-word; hyphens: manual; }
.sf-ek-aktion-satz.sf-ek-aktion-satz { font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); line-height: 1.45; color: var(--sf-text); }
.sf-ek-aktion-praes.sf-ek-aktion-praes { font-family: var(--sf-body); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-ek-aktion-los.sf-ek-aktion-los { margin-top: auto; padding-top: var(--sf-hm-s1); font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-ink); }
.sf-ek-aktion-los.sf-ek-aktion-los::after { content: " →"; }
.sf-ek-aktion-link.sf-ek-aktion-link:hover .sf-ek-aktion-los { text-decoration: underline; }
@media (min-width: 640px) {
.sf-ek-aktionen-liste.sf-ek-aktionen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-ek-aktion[data-sf-haupt] { grid-column: 1 / -1; }
.sf-ek-aktion[data-sf-haupt] .sf-ek-aktion-link { flex-direction: row; }
.sf-ek-aktion[data-sf-haupt] .sf-ek-aktion-bild { flex: 0 0 58%; aspect-ratio: auto; min-height: 300px; }
.sf-ek-aktion[data-sf-haupt] .sf-ek-aktion-text { justify-content: center; gap: var(--sf-hm-s3); padding: var(--sf-hm-s5) var(--sf-hm-s6); }
.sf-ek-aktion[data-sf-haupt] .sf-ek-aktion-los { margin-top: var(--sf-hm-s2); }
.sf-ek-aktion[data-sf-haupt] .sf-ek-aktion-titel { font-size: var(--sf-hb-h2); }
.sf-ek-aktion[data-sf-haupt] .sf-ek-aktion-satz { font-size: var(--sf-hb-text); }
.sf-ek-aktion[data-sf-haupt] .sf-ek-aktion-frist { padding: 7px 12px; font-size: var(--sf-hb-text-klein); }
}
@media (min-width: 1000px) {
.sf-ek-aktionen-liste.sf-ek-aktionen-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-ek-aktionen-liste[data-sf-anzahl="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-ek-aktionen-liste[data-sf-anzahl="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-ek-aktionen-liste[data-sf-anzahl="2"] .sf-ek-aktion[data-sf-haupt] { grid-column: auto; }
.sf-ek-aktionen-liste[data-sf-anzahl="2"] .sf-ek-aktion[data-sf-haupt] .sf-ek-aktion-link { flex-direction: column; }
.sf-ek-aktionen-liste[data-sf-anzahl="2"] .sf-ek-aktion[data-sf-haupt] .sf-ek-aktion-bild { flex: none; aspect-ratio: var(--sf-hb-bild); min-height: 0; }
.sf-ek-aktion[data-sf-haupt] .sf-ek-aktion-bild { min-height: 320px; }
}
@media (min-width: 640px) and (max-width: 999px) {
.sf-ek-aktionen-liste[data-sf-anzahl="2"] .sf-ek-aktion[data-sf-haupt] { grid-column: auto; }
.sf-ek-aktionen-liste[data-sf-anzahl="2"] .sf-ek-aktion[data-sf-haupt] .sf-ek-aktion-link { flex-direction: column; }
.sf-ek-aktionen-liste[data-sf-anzahl="2"] .sf-ek-aktion[data-sf-haupt] .sf-ek-aktion-bild { flex: none; aspect-ratio: var(--sf-hb-bild); min-height: 0; }
}
.sf-ek-aktionen-mehr.sf-ek-aktionen-mehr { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); line-height: 1.6; color: var(--sf-text); }
.sf-dynamik .sf-ek-aktionen-mehr a, .sf-ek-aktionen-mehr.sf-ek-aktionen-mehr a { font-weight: 700; color: var(--sf-ink); }
.sf-ek-berater-liste.sf-ek-berater-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-ek-berater-liste.sf-ek-berater-liste li { display: flex; margin: 0; padding: 0; min-width: 0; }
.sf-dynamik a.sf-ek-berater-karte, .sf-ek-berater-karte.sf-ek-berater-karte { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-ek-berater-karte.sf-ek-berater-karte:hover { border-color: var(--sf-advice); }
.sf-ek-berater-karte.sf-ek-berater-karte:focus-visible { outline: 2px solid var(--sf-advice); outline-offset: 2px; }
.sf-ek-berater-bild.sf-ek-berater-bild { display: block; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sf-surface); }
.sf-ek-berater-bild[data-sf-produkt] { background: var(--sf-white); border-bottom: 1px solid var(--sf-line); }
.sf-ek-berater-bild.sf-ek-berater-bild img { display: block; width: 100%; max-width: none; height: 100%; object-fit: cover; transition: transform 300ms ease; }
.sf-ek-berater-bild[data-sf-produkt] img { box-sizing: border-box; padding: var(--sf-hm-s4); object-fit: contain; }
.sf-ek-berater-karte.sf-ek-berater-karte:hover .sf-ek-berater-bild img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) {
.sf-ek-berater-bild.sf-ek-berater-bild img { transition: none; }
}
.sf-ek-berater-text.sf-ek-berater-text { display: flex; flex-direction: column; gap: 2px; padding: var(--sf-hm-s3); min-width: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); line-height: 1.3; color: var(--sf-muted); }
.sf-ek-berater-text.sf-ek-berater-text b { font-size: var(--sf-hb-text); font-weight: 700; line-height: 1.25; color: var(--sf-ink); overflow-wrap: break-word; hyphens: manual; }
.sf-ek-berater-karte.sf-ek-berater-karte:hover b { color: var(--sf-advice); }
@media (min-width: 640px) {
.sf-ek-berater-liste.sf-ek-berater-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.sf-ek-berater-liste.sf-ek-berater-liste { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sf-ek-berater-liste[data-sf-anzahl="4"], .sf-ek-berater-liste[data-sf-anzahl="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-ek-service-liste.sf-ek-service-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-ek-service-kachel.sf-ek-service-kachel { --sf-ek-akzent: var(--sf-ink); --sf-ek-grund: var(--sf-surface); display: flex; flex-direction: column; gap: var(--sf-hm-s2); margin: 0; padding: var(--sf-hm-s4); min-width: 0; border: 1px solid var(--sf-line); border-top: 3px solid var(--sf-ek-akzent); border-radius: var(--sf-hb-ecke); background: var(--sf-white); }
.sf-ek-service-kachel[data-sf-art="groesse"] { --sf-ek-akzent: var(--sf-advice); --sf-ek-grund: var(--sf-advice-tint); }
.sf-ek-service-kachel[data-sf-art="club"] { --sf-ek-akzent: var(--sf-club); --sf-ek-grund: var(--sf-club-tint); }
.sf-ek-service-kachel[data-sf-art="pflege"], .sf-ek-service-kachel[data-sf-art="garantie"] { --sf-ek-akzent: var(--sf-fit); --sf-ek-grund: var(--sf-fit-tint); }
.sf-ek-service-kachel[data-sf-art="crash"] { --sf-ek-akzent: var(--sf-travel); --sf-ek-grund: var(--sf-travel-tint); }
.sf-ek-service-zeichen.sf-ek-service-zeichen { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--sf-ek-grund); color: var(--sf-ek-akzent); }
.sf-ek-service-zeichen.sf-ek-service-zeichen svg { display: block; width: 24px; height: 24px; }
.sf-ek-service-titel.sf-ek-service-titel { margin: var(--sf-hm-s1) 0 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); text-transform: none; color: var(--sf-ink); }
.sf-ek-service-text.sf-ek-service-text { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); line-height: 1.45; color: var(--sf-text); }
.sf-ek-service-wege.sf-ek-service-wege { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s2); margin: var(--sf-hm-s1) 0 0; }
.sf-ek-service-zahl.sf-ek-service-zahl { flex: 0 0 100%; font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-dynamik a.sf-ek-chip, .sf-ek-chip.sf-ek-chip { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-white); color: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 700; line-height: 1.2; text-decoration: none; }
.sf-ek-chip.sf-ek-chip:hover { border-color: var(--sf-ek-akzent, var(--sf-ink)); color: var(--sf-ek-akzent, var(--sf-ink)); }
.sf-ek-chip[data-sf-extern]::after { content: "↗"; margin-left: 4px; }
.sf-ek-service-los.sf-ek-service-los { margin-top: auto; padding-top: var(--sf-hm-s1); }
@media (min-width: 640px) {
.sf-ek-service-liste.sf-ek-service-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.sf-ek-service-liste.sf-ek-service-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* beitrag-gebiet.css */
.sf-hg-leiste { display: grid; gap: var(--sf-hm-s2); margin: var(--sf-hm-s4) 0 0; padding: var(--sf-hm-s3) 0; border-top: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); }
.sf-hg-wege.sf-hg-wege { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s5); margin: 0; padding: 0; list-style: none; }
.sf-hg-wege.sf-hg-wege li { margin: 0; padding: 0; }
.sf-hg-wege.sf-hg-wege li::before { content: none; }
.sf-hg-weiter { display: grid; gap: var(--sf-hm-s6); }
.sf-hg-haeuser { display: grid; gap: var(--sf-hm-s3); }
/* meldungen.css */
.sf-hmm-band.sf-hmm-band, .sf-hmm-seite.sf-hmm-seite { display: flex; flex-direction: column; gap: var(--sf-hm-s5); min-width: 0; }
.sf-hmm-reihe.sf-hmm-reihe { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 82%); gap: var(--sf-hm-s4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--sf-hm-s2); align-items: stretch; }
.sf-hmm-reihe.sf-hmm-reihe > * { scroll-snap-align: start; }
@media (min-width: 760px) {
.sf-hmm-reihe.sf-hmm-reihe { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); overflow-x: visible; }
}
.sf-hmm-bild.sf-hmm-bild { position: relative; }
.sf-hmm-zahl.sf-hmm-zahl { position: absolute; top: var(--sf-hm-s2); right: var(--sf-hm-s2); padding: var(--sf-hm-s1) var(--sf-hm-s2); background: var(--sf-hm-nav-grund); font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl-klein); font-weight: var(--sf-hb-zahl-gewicht, var(--sf-hb-titel-gewicht)); line-height: 1; color: var(--sf-ink); }
.sf-hmm-zahl.sf-hmm-zahl small, .sf-hmm-zahlbild.sf-hmm-zahlbild small { font-size: 0.6em; }
.sf-hmm-livemarke.sf-hmm-livemarke { position: absolute; top: var(--sf-hm-s2); left: var(--sf-hm-s2); padding: 2px var(--sf-hm-s2); background: var(--sf-hm-live-gruen); font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-white); }
.sf-hmm-zahlbild.sf-hmm-zahlbild { display: flex; flex-direction: column; justify-content: center; gap: var(--sf-hm-s1); aspect-ratio: var(--sf-hb-bild); max-width: 100%; padding: 0 var(--sf-hm-s4); background: var(--sf-surface); border-bottom: 1px solid var(--sf-line); }
.sf-hmm-zahlbild.sf-hmm-zahlbild strong { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: calc(var(--sf-hb-zahl) * 1.4); font-weight: var(--sf-hb-zahl-gewicht, var(--sf-hb-titel-gewicht)); line-height: 1; color: var(--sf-ink); }
.sf-hmm-zahlbild.sf-hmm-zahlbild > span { font-family: var(--sf-body); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-hmm-titel.sf-hmm-titel { display: block; }
.sf-hmm-stand.sf-hmm-stand { margin-top: auto; font-family: var(--sf-body); font-size: var(--sf-hb-mini); line-height: 1.4; color: var(--sf-muted); }
.sf-hmm-art[data-sf-art="weltcup"] { color: var(--sf-sport); }
.sf-hmm-art[data-sf-art="club"] { color: var(--sf-club); }
.sf-hmm-art[data-sf-art="redaktion"] { color: var(--sf-zz-signal); }
.sf-hmm-karte.sf-hmm-karte[data-sf-zwischenzeit] { border-top: 4px solid var(--sf-zz-signal); }
.sf-hmm-zeile.sf-hmm-zeile { display: flex; flex-direction: column; gap: var(--sf-hm-s1); padding: var(--sf-hm-s3) var(--sf-hm-s4); border-left: 4px solid var(--sf-hm-live-gruen); background: var(--sf-surface); font-family: var(--sf-body); }
.sf-hmm-zeile-art.sf-hmm-zeile-art { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-hm-live-gruen-text); }
.sf-hmm-zeile-titel.sf-hmm-zeile-titel { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); color: var(--sf-ink); }
.sf-hmm-zeile-stand.sf-hmm-zeile-stand { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-hmm-zeile.sf-hmm-zeile[data-sf-zwischenzeit] { position: relative; padding-left: calc(var(--sf-hm-s4) + 48px); border-left-color: var(--sf-zz-signal); background: var(--sf-zz-tafel-grund); color: var(--sf-zz-k-text); }
.sf-hmm-zeile-uhr.sf-hmm-zeile-uhr { position: absolute; top: var(--sf-hm-s3); left: var(--sf-hm-s4); }
.sf-hmm-zeile-uhr .sf-zz-motiv-uhr { display: block; width: 36px; height: 36px; }
.sf-hmm-zeile[data-sf-zwischenzeit] .sf-hmm-zeile-art, .sf-hmm-zeile[data-sf-zwischenzeit] .sf-hb-weiter { color: var(--sf-zz-signal-text); }
.sf-hmm-zeile[data-sf-zwischenzeit] .sf-hmm-zeile-titel { color: var(--sf-zz-k-text); }
.sf-hmm-zeile[data-sf-zwischenzeit] .sf-hmm-zeile-stand, .sf-hmm-zeile[data-sf-zwischenzeit] .sf-hb-live { color: var(--sf-hb-hell-text); }
.sf-hmm-verlauf.sf-hmm-verlauf { display: flex; flex-direction: column; gap: var(--sf-hm-s4); }
.sf-hmm-tag.sf-hmm-tag { display: flex; flex-direction: column; }
.sf-hmm-tag-kopf.sf-hmm-tag-kopf { margin: 0; padding-bottom: var(--sf-hm-s2); border-bottom: 2px solid var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-hmm-liste.sf-hmm-liste { margin: 0; padding: 0; list-style: none; }
.sf-hmm-v.sf-hmm-v { border-bottom: 1px solid var(--sf-line); }
.sf-hmm-v-link.sf-hmm-v-link { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: var(--sf-hm-s3); align-items: start; padding: var(--sf-hm-s3) 0; color: var(--sf-ink); text-decoration: none; }
.sf-hmm-v-zeit.sf-hmm-v-zeit { padding-top: 2px; font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-variant-numeric: tabular-nums; color: var(--sf-muted); }
.sf-hmm-v-text.sf-hmm-v-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-hmm-v-text.sf-hmm-v-text .sf-hmm-art { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-hmm-v-text.sf-hmm-v-text .sf-hmm-art[data-sf-art="weltcup"] { color: var(--sf-sport); }
.sf-hmm-v-text.sf-hmm-v-text .sf-hmm-art[data-sf-art="redaktion"], .sf-hmm-karte.sf-hmm-karte .sf-hmm-art[data-sf-art="redaktion"] { color: var(--sf-zz-signal); }
.sf-hmm-v-text.sf-hmm-v-text strong { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: calc(var(--sf-hb-h3) * 0.85); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); color: var(--sf-ink); }
.sf-hmm-v-zahl.sf-hmm-v-zahl { display: flex; flex-direction: column; align-items: flex-end; font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-zahl-klein); font-weight: var(--sf-hb-zahl-gewicht, var(--sf-hb-titel-gewicht)); line-height: 1; color: var(--sf-ink); white-space: nowrap; }
.sf-hmm-v-zahl.sf-hmm-v-zahl small { font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 600; color: var(--sf-muted); }
.sf-hmm-weiter.sf-hmm-weiter { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s3) var(--sf-hm-s5); }
.sf-hmm-leer.sf-hmm-leer, .sf-hmm-quellen.sf-hmm-quellen { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); line-height: 1.5; color: var(--sf-muted); }
.sf-hmm-h1.sf-hmm-h1 { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-size: calc(var(--sf-hb-h2) * 1.2); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); line-height: var(--sf-hb-seitentitel-zeile, var(--sf-hb-titel-zeile)); color: var(--sf-ink); }
.sf-hmm-offen.sf-hmm-offen { display: flex; flex-direction: column; gap: var(--sf-hm-s3); }
.sf-hmm-offen-link.sf-hmm-offen-link { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sf-hm-s1) var(--sf-hm-s4); padding: var(--sf-hm-s3) 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); color: var(--sf-muted); text-decoration: none; }
.sf-hmm-offen-link.sf-hmm-offen-link strong { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: calc(var(--sf-hb-h3) * 0.85); font-weight: var(--sf-hb-titel-gewicht); color: var(--sf-ink); }
.sf-hmm-seite.sf-hmm-seite { gap: var(--sf-hm-abschnitt, var(--sf-hm-s7)); }
.sf-hmm-kopf.sf-hmm-kopf { gap: var(--sf-hm-s3); }
.sf-hmm-antwort.sf-hmm-antwort { margin: 0; max-width: 34em; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.2; color: var(--sf-ink); }
.sf-hmm-abschnitt.sf-hmm-abschnitt { display: flex; flex-direction: column; gap: var(--sf-hm-s4); min-width: 0; }
.sf-hmm-countdown.sf-hmm-countdown { padding: var(--sf-hm-s4); background: var(--sf-surface); border-left: 4px solid var(--sf-sport); }
@media (min-width: 760px) {
.sf-hmm-antwort.sf-hmm-antwort { font-size: calc(var(--sf-hb-h3) * 1.2); }
}
.sf-hmm-kopf.sf-hmm-kopf .sf-hb-wert dd strong { font-size: calc(var(--sf-hb-zahl) * 1.6); line-height: 1; }
.sf-hmm-kopf.sf-hmm-kopf .sf-hb-wert dd .sf-hb-einheit { font-size: var(--sf-hb-zahl-klein); }
@media (min-width: 760px) {
.sf-hmm-band .sf-hmm-buehne.sf-hmm-buehne { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sf-hmm-band .sf-hmm-buehne.sf-hmm-buehne[data-sf-karten="4"], .sf-hmm-band .sf-hmm-buehne.sf-hmm-buehne[data-sf-karten="8"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.sf-hmm-band .sf-hmm-buehne.sf-hmm-buehne[data-sf-karten="4"], .sf-hmm-band .sf-hmm-buehne.sf-hmm-buehne[data-sf-karten="8"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* zwischenzeit.css */
.sf-zz.sf-zz { display: grid; gap: var(--sf-hm-abschnitt); width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--sf-hm-s4) var(--sf-hm-abschnitt); box-sizing: border-box; container-type: inline-size; }
.sf-zz-tafel.sf-zz-tafel { display: inline-flex; flex-wrap: wrap; align-items: stretch; gap: 2px; width: fit-content; max-width: 100%; margin: 0; font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-variant-numeric: tabular-nums; line-height: 1; }
.sf-zz-tafel-marke.sf-zz-tafel-marke, .sf-zz-tafel-feld.sf-zz-tafel-feld { display: inline-flex; align-items: baseline; gap: var(--sf-hm-s1); padding: var(--sf-hm-s2) var(--sf-hm-s3); background: var(--sf-zz-tafel-grund); box-shadow: inset 0 0 0 1px var(--sf-zz-tafel-linie); }
.sf-zz-tafel-marke.sf-zz-tafel-marke { align-items: center; background: var(--sf-zz-signal); color: var(--sf-zz-signal-tinte); font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.sf-zz-tafel-feld.sf-zz-tafel-feld strong { font-size: var(--sf-zz-tafel-zahl); font-weight: 800; color: var(--sf-zz-signal-text); }
.sf-zz-tafel-feld.sf-zz-tafel-feld small { font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-hb-hell-text); }
.sf-zz-kennung.sf-zz-kennung { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1) var(--sf-hm-s2); margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-muted); }
.sf-zz-kennung.sf-zz-kennung em { font-style: normal; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-zz-kopf.sf-zz-kopf { position: relative; display: grid; align-content: end; min-height: 0; margin: 0 calc(-1 * var(--sf-hm-s4)); padding: var(--sf-hm-s6) var(--sf-hm-s4); overflow: hidden; background: var(--sf-hb-buehne-grund); color: var(--sf-white); border-bottom: 4px solid var(--sf-zz-signal); }
.sf-zz-kopf.sf-zz-kopf[data-sf-bild] { min-height: clamp(440px, 68svh, 640px); }
.sf-zz-bild.sf-zz-bild { position: absolute; inset: 0; margin: 0; }
.sf-zz-bild.sf-zz-bild img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.sf-zz-bild.sf-zz-bild::after { content: ""; position: absolute; inset: 0; background: var(--sf-zz-schleier); }
.sf-zz-bild.sf-zz-bild figcaption { position: absolute; top: var(--sf-hm-s3); right: var(--sf-hm-s4); z-index: 1; padding: 2px var(--sf-hm-s2); background: var(--sf-hb-vermerk-grund); font-size: var(--sf-hb-mini); color: var(--sf-hb-hell-text); }
.sf-zz-kopf-text.sf-zz-kopf-text { position: relative; z-index: 1; display: grid; gap: var(--sf-hm-s4); max-width: 820px; min-width: 0; }
.sf-zz-titel.sf-zz-titel { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-size: var(--sf-zz-kopf-titel); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); line-height: 1.05; letter-spacing: 0; text-transform: none; text-wrap: balance; color: inherit; }
.sf-zz-vorspann.sf-zz-vorspann { margin: 0; max-width: 60ch; font-size: var(--sf-hb-bildkopf-unter); line-height: 1.45; color: var(--sf-hb-hell-text); }
@container (min-width: 820px) {
.sf-zz-kopf.sf-zz-kopf { margin: 0; padding: var(--sf-hm-s7) var(--sf-hm-s6); }
}
.sf-zz-inhalt.sf-zz-inhalt { display: grid; gap: var(--sf-hm-s2); max-width: 760px; width: 100%; margin: 0 auto; }
.sf-zz-inhalt-titel.sf-zz-inhalt-titel { margin: 0; font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-muted); }
.sf-zz-inhalt.sf-zz-inhalt ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--sf-ink); }
.sf-zz-inhalt.sf-zz-inhalt li { border-bottom: 1px solid var(--sf-line); }
.sf-zz-inhalt.sf-zz-inhalt a { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); align-items: center; gap: var(--sf-hm-s3); padding: var(--sf-hm-s2) 0; font-size: var(--sf-hb-text-klein); font-weight: 600; line-height: 1.35; color: var(--sf-ink); text-decoration: none; }
.sf-zz-kicker.sf-zz-kicker, .sf-zz-inhalt.sf-zz-inhalt a span { justify-self: start; padding: 3px var(--sf-hm-s2); font-size: var(--sf-hb-mini); font-weight: 800; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-zz-k-text); background: var(--sf-zz-k-weltcup); }
.sf-zz-inhalt.sf-zz-inhalt a span[data-sf-kicker="comeback"] { background: var(--sf-zz-k-comeback); }
.sf-zz-inhalt.sf-zz-inhalt a span[data-sf-kicker="ausfall"] { background: var(--sf-zz-k-ausfall); }
.sf-zz-inhalt.sf-zz-inhalt a span[data-sf-kicker="gebiete"] { background: var(--sf-zz-k-gebiete); }
.sf-zz-inhalt.sf-zz-inhalt a span[data-sf-kicker="zahl"] { background: var(--sf-zz-signal); color: var(--sf-zz-signal-tinte); }
.sf-zz-inhalt.sf-zz-inhalt a span[data-sf-kicker="video"] { background: var(--sf-ink); }
.sf-zz-inhalt.sf-zz-inhalt a span[data-sf-kicker="mitmachen"], .sf-zz-inhalt.sf-zz-inhalt a span[data-sf-kicker="club"] { background: var(--sf-zz-k-club); }
.sf-zz-notizen.sf-zz-notizen { display: grid; gap: 0; max-width: 760px; width: 100%; margin: 0 auto; }
.sf-zz-notiz.sf-zz-notiz { display: grid; gap: var(--sf-hm-s3); padding: var(--sf-hm-s6) 0; border-top: 1px solid var(--sf-line); scroll-margin-top: var(--sf-hm-s7); }
.sf-zz-notiz.sf-zz-notiz:first-child { border-top: 0; padding-top: 0; }
.sf-zz-notiz.sf-zz-notiz[data-sf-kicker="zahl"], .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="video"] { margin: var(--sf-hm-s4) 0; padding: var(--sf-hm-s5); border-top: 0; background: var(--sf-zz-tafel-grund); color: var(--sf-white); }
.sf-zz-notiz.sf-zz-notiz[data-sf-kicker="zahl"] .sf-zz-notiz-titel, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="video"] .sf-zz-notiz-titel, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="zahl"] .sf-hub-text, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="video"] .sf-hub-text, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="zahl"] .sf-hub-text p, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="video"] .sf-hub-text p { color: var(--sf-white); }
.sf-zz-notiz.sf-zz-notiz[data-sf-kicker="zahl"] .sf-zz-quelle, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="video"] .sf-zz-quelle, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="zahl"] .sf-zz-quelle p, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="video"] .sf-zz-quelle p, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="zahl"] .sf-zz-ort, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="video"] .sf-zz-ort, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="video"] .sf-video-text { color: var(--sf-hb-hell-text); border-color: var(--sf-hb-hell-spur); }
.sf-zz-notiz.sf-zz-notiz[data-sf-kicker="zahl"] .sf-hb-weiter, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="video"] .sf-hb-weiter, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="zahl"] a, .sf-zz-notiz.sf-zz-notiz[data-sf-kicker="video"] a { color: var(--sf-zz-signal-text); }
.sf-zz-marken.sf-zz-marken { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s2); margin: 0; }
.sf-zz-ort.sf-zz-ort { padding: 2px var(--sf-hm-s2); border: 1px solid var(--sf-line); font-size: var(--sf-hb-mini); font-weight: 600; color: var(--sf-muted); }
.sf-zz-status.sf-zz-status { padding: 2px var(--sf-hm-s2); font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-ink); background: transparent; border: 1px solid currentColor; }
.sf-zz-status.sf-zz-status[data-sf-status="zurueck"] { color: var(--sf-zz-k-comeback); }
.sf-zz-status.sf-zz-status[data-sf-status="verletzt"] { color: var(--sf-zz-k-ausfall); }
.sf-zz-status.sf-zz-status[data-sf-status="offen"] { color: var(--sf-muted); }
.sf-zz-notiz-titel.sf-zz-notiz-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.2; letter-spacing: 0; text-transform: none; text-wrap: balance; color: var(--sf-ink); }
.sf-zz-zahl.sf-zz-zahl { display: flex; align-items: baseline; gap: var(--sf-hm-s2); margin: 0; }
.sf-zz-zahl.sf-zz-zahl strong { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-hb-bildkopf-titel-halb); font-weight: 800; line-height: 0.9; font-variant-numeric: tabular-nums; color: var(--sf-zz-signal-text); }
.sf-zz-zahl.sf-zz-zahl span { font-size: var(--sf-hb-text); font-weight: 700; color: var(--sf-hb-hell-text); }
.sf-zz-notiz-inhalt.sf-zz-notiz-inhalt .sf-hub-blocks, .sf-zz-quelle.sf-zz-quelle .sf-hub-blocks, .sf-zz-ende.sf-zz-ende .sf-hub-blocks, .sf-zz-einstieg.sf-zz-einstieg .sf-hub-blocks { display: grid; gap: var(--sf-hm-s3); margin: 0; }
.sf-zz-quelle.sf-zz-quelle { font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-zz-quelle.sf-zz-quelle p { margin: 0; }
.sf-zz-notiz.sf-zz-notiz .sf-hub-blocks > div, .sf-zz-ende.sf-zz-ende .sf-hub-blocks > div, .sf-zz-einstieg.sf-zz-einstieg .sf-hub-blocks > div { margin: 0; }
.sf-zz-notiz.sf-zz-notiz .sf-hub-text p:first-child, .sf-zz-ende.sf-zz-ende .sf-hub-text p:first-child { margin-top: 0; }
.sf-zz-notiz.sf-zz-notiz .sf-hub-text p:last-child, .sf-zz-ende.sf-zz-ende .sf-hub-text p:last-child { margin-bottom: 0; }
.sf-zz-ende.sf-zz-ende { display: grid; gap: var(--sf-hm-s3); max-width: 760px; width: 100%; margin: 0 auto; padding: var(--sf-hm-s5); background: var(--sf-zz-tafel-grund); border-top: 4px solid var(--sf-zz-signal); color: var(--sf-white); box-sizing: border-box; }
.sf-zz-ende.sf-zz-ende p, .sf-zz-ende.sf-zz-ende a { color: inherit; }
.sf-zz-ende.sf-zz-ende .sf-hub-text, .sf-zz-ende.sf-zz-ende .sf-hub-text p { color: var(--sf-hb-hell-text); }
.sf-zz-ende.sf-zz-ende .sf-hub-text a, .sf-zz-ende.sf-zz-ende .sf-hb-weiter { color: var(--sf-zz-signal-text); }
.sf-zz-ende-titel.sf-zz-ende-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); }
.sf-zz-partner.sf-zz-partner, .sf-zz-quellen.sf-zz-quellen, .sf-zz-einstieg.sf-zz-einstieg { max-width: 760px; width: 100%; margin: 0 auto; }
.sf-zz-partner.sf-zz-partner:empty { display: none; }
.sf-zz-karte.sf-zz-karte { display: grid; gap: var(--sf-hm-s5); padding: var(--sf-hm-s5); background: var(--sf-zz-tafel-grund); border-top: 4px solid var(--sf-zz-signal); color: var(--sf-white); min-width: 0; }
.sf-zz-karte-kopf.sf-zz-karte-kopf { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sf-hm-s4) var(--sf-hm-s3); align-content: start; align-items: center; min-width: 0; }
.sf-zz-karte-kopf.sf-zz-karte-kopf > * { grid-column: 1 / -1; }
.sf-zz-karte-kopf.sf-zz-karte-kopf > .sf-zz-karte-uhr { grid-column: 1; }
.sf-zz-karte-kopf.sf-zz-karte-kopf > .sf-zz-tafel { grid-column: 2; }
.sf-zz-karte-uhr .sf-zz-motiv-uhr { display: block; width: 40px; height: 40px; }
.sf-zz-karte-titel.sf-zz-karte-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h2); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.08; text-transform: none; text-wrap: balance; }
.sf-zz-karte-titel.sf-zz-karte-titel a { color: var(--sf-white); text-decoration: none; }
.sf-zz-karte-fuss.sf-zz-karte-fuss { margin: 0; }
.sf-zz-karte-knopf.sf-zz-karte-knopf { display: inline-flex; align-items: center; min-height: var(--sf-hb-knopf-hoehe); padding: 0 var(--sf-hm-s4); background: var(--sf-zz-signal); color: var(--sf-zz-signal-tinte); font-size: var(--sf-hb-text-klein); font-weight: 800; text-decoration: none; }
.sf-zz-karte-knopf.sf-zz-karte-knopf::after { content: "→"; margin-left: var(--sf-hm-s2); }
.sf-zz-karte.sf-zz-karte .sf-zz-liste li { border-top-color: var(--sf-hb-hell-spur); }
.sf-zz-karte.sf-zz-karte .sf-zz-liste a { color: var(--sf-white); }
.sf-zz-karte.sf-zz-karte .sf-zz-ort { color: var(--sf-hb-hell-text); border-color: var(--sf-hb-hell-spur); }
.sf-zz-karte.sf-zz-karte .sf-zz-status[data-sf-status="offen"] { color: var(--sf-hb-hell-text); }
@media (min-width: 900px) {
.sf-zz-karte.sf-zz-karte { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--sf-hm-s6); padding: var(--sf-hm-s6); }
}
.sf-zz-liste.sf-zz-liste { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; align-content: start; }
.sf-zz-liste.sf-zz-liste li { border-top: 1px solid var(--sf-line); }
.sf-zz-liste.sf-zz-liste li:first-child { border-top: 0; }
.sf-zz-liste.sf-zz-liste a { display: grid; gap: var(--sf-hm-s1); padding: var(--sf-hm-s3) 0; color: var(--sf-ink); text-decoration: none; }
.sf-zz-liste.sf-zz-liste strong { font-size: var(--sf-hb-text); line-height: 1.3; }
.sf-zz-weltcup.sf-zz-weltcup { margin: 0 0 var(--sf-hm-s6); }
@media (min-width: 900px) {
.sf-zz-weltcup.sf-zz-weltcup .sf-zz-karte { grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); padding: var(--sf-hm-s5); }
}
.sf-zz-archiv-kopf.sf-zz-archiv-kopf { display: grid; gap: var(--sf-hm-s3); padding-top: var(--sf-hm-s6); }
.sf-zz-archiv-kopf.sf-zz-archiv-kopf .sf-zz-titel { color: var(--sf-ink); }
.sf-zz-archiv-kopf.sf-zz-archiv-kopf .sf-zz-vorspann { color: var(--sf-muted); }
.sf-zz-archiv-liste.sf-zz-archiv-liste { display: grid; gap: var(--sf-hm-s4); grid-template-columns: minmax(0, 1fr); }
.sf-zz-leer.sf-zz-leer { margin: 0; color: var(--sf-muted); }
.sf-zz-karte-partner .sf-presented-ad { justify-content: flex-start; margin: 0; }
.sf-zz-karte-partner .sf-hb-praesentiert.sf-hb-praesentiert, .sf-zz-karte-partner .sf-hb-praesentiert.sf-hb-praesentiert strong { color: var(--sf-white); }
.sf-zz-karte-partner .sf-hb-praesentiert.sf-hb-praesentiert img { filter: brightness(0) invert(1); }
.sf-zz-motiv.sf-zz-motiv { container: sf-zz-motiv / inline-size; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: end; gap: var(--sf-hm-s2) var(--sf-hm-s3); padding: var(--sf-hm-s4); background: var(--sf-zz-tafel-grund); border-top: 4px solid var(--sf-zz-signal); color: var(--sf-zz-k-text); }
.sf-zz-motiv-uhr { grid-row: 1 / 3; align-self: center; width: var(--sf-zz-motiv-uhr); height: var(--sf-zz-motiv-uhr); fill: none; stroke: var(--sf-zz-signal-text); stroke-width: 3; stroke-linecap: round; }
.sf-zz-motiv-uhr rect { fill: var(--sf-zz-signal-text); stroke: none; }
.sf-zz-motiv-uhr .sf-zz-motiv-zeiger { stroke: var(--sf-zz-k-text); }
.sf-zz-motiv-uhr .sf-zz-motiv-achse { fill: var(--sf-zz-k-text); stroke: none; }
.sf-zz-motiv-marke { align-self: end; min-width: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-zz-motiv-marke); font-weight: 800; line-height: 1; text-transform: uppercase; letter-spacing: 0.02em; }
.sf-zz-motiv-tafel { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1) var(--sf-hm-s2); font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-zz-k-text); }
.sf-zz-motiv-tafel span { padding: 2px 6px; box-shadow: inset 0 0 0 1px var(--sf-zz-tafel-linie); }
.sf-zz-motiv-tafel strong { color: var(--sf-zz-signal-text); }
.sf-zz-stempel { position: absolute; top: var(--sf-hm-s2); left: var(--sf-hm-s2); padding: 3px 8px; background: var(--sf-zz-signal); color: var(--sf-zz-signal-tinte); font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.sf-zz-karte-partner .sf-presented-ad .sf-hb-praesentiert.sf-hb-praesentiert:not(.sf-hb-praesentiert--hell) { background: transparent; border-color: var(--sf-white); }
.sf-zz-karte-partner .sf-presented-ad .sf-hb-praesentiert.sf-hb-praesentiert, .sf-zz-karte-partner .sf-presented-ad .sf-hb-praesentiert.sf-hb-praesentiert strong, .sf-zz-karte-partner .sf-presented-ad .sf-hb-praesentiert.sf-hb-praesentiert::after { color: var(--sf-white); }
.sf-zz-kicker[data-sf-kicker="neue-marke"], .sf-zz-inhalt a span[data-sf-kicker="neue-marke"] { background: var(--sf-bts-orange); color: var(--sf-ink); }
.sf-zz-kicker[data-sf-kicker="ausruestung"], .sf-zz-inhalt a span[data-sf-kicker="ausruestung"] { background: var(--sf-fit); }
.sf-zz-herkunft { display: block; margin-top: var(--sf-hm-s2); font-size: var(--sf-hb-mini); font-weight: 400; }
.sf-zz-rhythmus { margin-block: var(--sf-hm-s2); font-size: var(--sf-hb-mini); }
.sf-zz-archiv-aufmacher { margin-block: var(--sf-hm-s5); }
@container (min-width: 800px) {
.sf-zz-archiv-aufmacher .sf-zz-karte-titel.sf-zz-karte-titel { font-size: var(--sf-zz-kopf-titel); }
.sf-zz-archiv-liste.sf-zz-archiv-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* saisonstart.css */
.sf-ss.sf-ss { display: grid; gap: var(--sf-hm-abschnitt); width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--sf-hm-s5) var(--sf-hm-s4) var(--sf-hm-abschnitt); box-sizing: border-box; container-type: inline-size; container-name: sf-ss; }
.sf-ss-kopf.sf-ss-kopf { display: grid; gap: var(--sf-hm-s4); }
.sf-ss-kennung.sf-ss-kennung { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1) var(--sf-hm-s2); margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-muted); }
.sf-ss-kennung.sf-ss-kennung em { font-style: normal; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-ss-titel.sf-ss-titel { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-size: var(--sf-ss-titel); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); line-height: 1.05; text-wrap: balance; color: var(--sf-ink); }
.sf-ss-titel.sf-ss-titel span { display: block; margin-top: var(--sf-hm-s2); font-size: 0.55em; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-ss-vorspann.sf-ss-vorspann { margin: 0; max-width: 62ch; font-size: var(--sf-hb-text); line-height: 1.5; color: var(--sf-ink); }
.sf-ss-filter.sf-ss-filter { display: grid; gap: var(--sf-hm-s3); padding: var(--sf-hm-s4) 0; border-top: 1px solid var(--sf-ink); border-bottom: 1px solid var(--sf-line); }
.sf-ss-filter-zeile.sf-ss-filter-zeile { display: grid; gap: var(--sf-hm-s2); }
.sf-ss-filter-titel.sf-ss-filter-titel { font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-muted); }
.sf-ss-bilanz.sf-ss-bilanz { margin: 0; font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-ss-leer.sf-ss-leer { margin: 0; font-size: var(--sf-hb-text); }
.sf-ss-zuruecksetzen.sf-ss-zuruecksetzen { padding: 0; border: 0; background: none; font: inherit; color: var(--sf-section-accent, var(--sf-travel)); text-decoration: underline; cursor: pointer; }
.sf-ss-monat.sf-ss-monat { display: grid; gap: var(--sf-hm-s2); }
.sf-ss-monat-titel.sf-ss-monat-titel { display: flex; align-items: baseline; gap: var(--sf-hm-s2); margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.2; color: var(--sf-ink); }
.sf-ss-monat-titel.sf-ss-monat-titel small { font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-muted); }
.sf-ss-liste.sf-ss-liste { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sf-ink); }
.sf-ss-zeile.sf-ss-zeile { display: grid; grid-template-columns: var(--sf-ss-datum-breite) minmax(0, 1fr); gap: var(--sf-hm-s2) var(--sf-hm-s3); padding: var(--sf-hm-s3) 0; border-bottom: 1px solid var(--sf-line); }
.sf-ss-datum.sf-ss-datum { display: grid; align-content: start; justify-items: center; padding: var(--sf-hm-s2) var(--sf-hm-s1); background: var(--sf-surface, var(--sf-hm-vermerk-grund)); font-variant-numeric: tabular-nums; line-height: 1.1; text-align: center; }
.sf-ss-datum.sf-ss-datum small, .sf-ss-datum.sf-ss-datum span { font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-muted); }
.sf-ss-datum.sf-ss-datum strong { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-ss-datum-zahl); font-weight: 800; color: var(--sf-ink); }
.sf-ss-gebiet.sf-ss-gebiet { display: grid; gap: var(--sf-hm-s1); min-width: 0; }
.sf-ss-name.sf-ss-name { margin: 0; font-family: var(--sf-body); font-size: var(--sf-size-17, 17px); font-weight: 800; line-height: 1.25; }
.sf-ss-name.sf-ss-name a { color: var(--sf-ink); text-decoration: none; overflow-wrap: anywhere; }
.sf-ss-name.sf-ss-name a:hover { text-decoration: underline; }
.sf-ss-meta.sf-ss-meta { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1) var(--sf-hm-s2); margin: 0; font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-ss-gletscher.sf-ss-gletscher { padding: 0 var(--sf-hm-s1); background: var(--sf-ss-gletscher-grund); color: var(--sf-ss-gletscher); font-weight: 700; }
.sf-ss-termin.sf-ss-termin, .sf-ss-hinweis.sf-ss-hinweis { margin: 0; font-size: var(--sf-hb-fein); line-height: 1.4; }
.sf-ss-termin.sf-ss-termin { color: var(--sf-ink); }
.sf-ss-hinweis.sf-ss-hinweis { color: var(--sf-muted); }
.sf-ss-rand.sf-ss-rand { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s1) var(--sf-hm-s3); }
.sf-ss-status.sf-ss-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sf-hm-s2); font-size: var(--sf-hb-fein); font-weight: 800; color: var(--sf-ink); }
.sf-ss-status.sf-ss-status small { font-weight: 400; color: var(--sf-muted); }
.sf-ss-status.sf-ss-status .sf-hb-live-punkt { width: var(--sf-hb-live-punkt); height: var(--sf-hb-live-punkt); border-radius: 50%; background: var(--sf-hm-live-gruen); }
.sf-ss-status[data-sf-ss-status="offen"].sf-ss-status { color: var(--sf-hm-live-gruen-text); }
.sf-ss-status[data-sf-ss-status="bald"].sf-ss-status { color: var(--sf-ss-bald); }
.sf-ss-status[data-sf-ss-status="geplant"].sf-ss-status, .sf-ss-status[data-sf-ss-status="folgt"].sf-ss-status, .sf-ss-status[data-sf-ss-status="vorbei"].sf-ss-status { font-weight: 700; color: var(--sf-muted); }
.sf-ss-quelle.sf-ss-quelle { font-size: var(--sf-hb-mini); color: var(--sf-muted); overflow-wrap: anywhere; }
.sf-ss-quelle.sf-ss-quelle:hover { color: var(--sf-ink); }
@container sf-ss (min-width: 720px) {
.sf-ss-zeile.sf-ss-zeile { grid-template-columns: var(--sf-ss-datum-breite) minmax(0, 1fr) minmax(180px, 240px); align-items: start; }
.sf-ss-rand.sf-ss-rand { grid-column: 3; flex-direction: column; align-items: flex-end; text-align: right; }
.sf-ss-status.sf-ss-status { justify-content: flex-end; }
.sf-ss-filter.sf-ss-filter { grid-template-columns: auto auto; justify-content: start; gap: var(--sf-hm-s3) var(--sf-hm-s6); }
.sf-ss-bilanz.sf-ss-bilanz { grid-column: 1 / -1; }
}
.sf-ss-text.sf-ss-text, .sf-ss-fragen.sf-ss-fragen { max-width: 72ch; }
.sf-ss-text.sf-ss-text h2, .sf-ss-fragen.sf-ss-fragen h2 { margin: 0 0 var(--sf-hm-s3); font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.2; }
.sf-ss-text.sf-ss-text p, .sf-ss-fragen.sf-ss-fragen p { margin: 0 0 var(--sf-hm-s3); font-size: var(--sf-hb-text); line-height: 1.55; }
.sf-ss-fragen.sf-ss-fragen h3 { margin: var(--sf-hm-s4) 0 var(--sf-hm-s2); font-family: var(--sf-body); font-size: var(--sf-size-17, 17px); line-height: 1.3; }
.sf-ss-weiter.sf-ss-weiter { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s5); }
/* schneeradar-standbild.css */
.sf-srs { display: grid; gap: 10px; margin: 24px 0; padding: 16px; border: 1px solid var(--sf-line); border-radius: 4px; background: var(--sf-surface); color: var(--sf-text); }
.sf-srs-kopf { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; justify-content: space-between; margin: 0; }
.sf-srs-kopf strong { color: var(--sf-ink); font-size: var(--sf-size-18); }
.sf-srs-kopf span { color: var(--sf-muted); font-size: var(--sf-size-13); }
.sf-srs-antwort { margin: 0; color: var(--sf-ink); font-size: var(--sf-size-16); }
.sf-srs-liste { margin: 0; padding: 0; list-style: none; }
.sf-srs-liste li { display: grid; grid-template-columns: minmax(0, 1fr) 22px minmax(88px, 34%); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--sf-line); }
.sf-srs-liste li.sf-srs-aktiv { font-weight: 600; }
.sf-srs-ort { display: grid; min-width: 0; color: var(--sf-ink); }
.sf-srs-ort a { color: var(--sf-ink); }
.sf-srs-ort small { color: var(--sf-muted); font-size: var(--sf-size-12); }
.sf-srs-gl { width: 20px; height: 20px; fill: none; stroke: var(--sf-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sf-srs-wert { display: grid; gap: 4px; justify-items: end; font-variant-numeric: tabular-nums; }
.sf-srs-wert strong { color: var(--sf-blue); }
.sf-srs-balken { display: block; width: var(--sf-srs-anteil, 0%); min-width: 2px; height: 6px; border-radius: 3px; background: var(--sf-blue); }
.sf-srs-link { color: var(--sf-blue); font-weight: 600; }
/* schneeradar-seite.css */
.sf-swo { container: sf-swo / inline-size; display: grid; gap: var(--sf-hm-abschnitt); padding-top: var(--sf-hm-s5); padding-bottom: var(--sf-hm-abschnitt); color: var(--sf-text); }
.sf-swo-kopf { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; background: var(--sf-swo-nacht); color: var(--sf-white); }
.sf-swo-kopf-text { display: grid; align-content: center; gap: var(--sf-hm-s3); min-width: 0; padding: var(--sf-hm-s6) var(--sf-hm-s4) var(--sf-hm-s5); order: 2; }
.sf-swo-ausgabe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s2); margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 700; line-height: 1.3; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-swo-nacht-leise); }
.sf-swo-ausgabe b { padding: 4px var(--sf-hm-s2); background: var(--sf-white); color: var(--sf-swo-nacht); }
.sf-swo .sf-swo-h1 { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-size: calc(var(--sf-swo-h1) * var(--sf-display-scale, 1)); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); line-height: 0.95; letter-spacing: 0; text-transform: uppercase; color: var(--sf-white); text-wrap: balance; }
.sf-swo-aussage { max-width: 40ch; margin: 0; font-family: var(--sf-body); font-size: var(--sf-swo-aussage); line-height: 1.4; color: var(--sf-swo-nacht-text); text-wrap: pretty; }
.sf-swo-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); margin-top: var(--sf-hm-s2); }
.sf-swo .sf-swo-knopf { display: inline-flex; align-items: center; gap: var(--sf-hm-s2); min-height: var(--sf-hb-knopf-hoehe); margin: 0; padding: 0 var(--sf-hm-s4); border: 1px solid var(--sf-white); border-radius: var(--sf-hb-ecke); background: transparent; font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; line-height: 1.2; color: var(--sf-white); text-decoration: none; cursor: pointer; }
.sf-swo .sf-swo-knopf--haupt { background: var(--sf-white); color: var(--sf-swo-nacht); }
.sf-swo .sf-swo-knopf--haupt::after { content: "↓"; }
.sf-swo .sf-swo-knopf--weiter::after { content: "→"; }
.sf-swo .sf-swo-knopf--zweit { border-color: var(--sf-ink); background: var(--sf-white); color: var(--sf-ink); }
.sf-swo .sf-swo-knopf:focus-visible, .sf-swo .sf-swo-pin:focus-visible { outline: 2px solid var(--sf-white); outline-offset: 2px; }
.sf-swo .sf-swo-knopf--zweit:focus-visible { outline-color: var(--sf-section-accent, var(--sf-travel)); }
.sf-swo-karte { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sf-sr-papier); }
.sf-swo-karte-bild { position: absolute; inset: 0; }
.sf-swo-karte-bild img { position: absolute; display: block; max-width: none; height: auto; }
.sf-swo .sf-swo-pin { position: absolute; display: grid; place-items: center; width: var(--sf-swo-pin); height: var(--sf-swo-pin); margin: 0; padding: 0; transform: translate(-50%, -50%); border: 2px solid var(--sf-white); border-radius: 50%; background: var(--sf-section-accent, var(--sf-travel)); font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-swo-pin-zahl); font-weight: 800; line-height: 1; color: var(--sf-white); text-decoration: none; cursor: pointer; }
.sf-swo .sf-swo-pin::before { content: ""; position: absolute; inset: -7px; }
.sf-swo .sf-swo-pin[aria-pressed="true"] { z-index: 1; background: var(--sf-ink); box-shadow: 0 0 0 4px var(--sf-swo-pin-ring); }
.sf-swo-pin-name { position: absolute; top: 50%; left: calc(100% + 8px); padding: 3px var(--sf-hm-s2); transform: translateY(-50%); background: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 700; line-height: 1.2; white-space: nowrap; color: var(--sf-white); }
.sf-swo-pin[data-sf-links] .sf-swo-pin-name { right: calc(100% + 8px); left: auto; }
@container sf-swo (min-width: 760px) {
.sf-swo-kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sf-swo-kopf-text { order: 0; padding: var(--sf-hm-s7) var(--sf-hm-s6); }
}
.sf-swo-abschnitt { display: grid; gap: var(--sf-hm-s4); min-width: 0; }
.sf-swo-stationen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--sf-line); border-left: 1px solid var(--sf-line); scroll-margin-top: var(--sf-hm-kopf-zeile); }
.sf-swo .sf-swo-stationen button { display: grid; align-content: center; gap: 2px; min-width: 0; min-height: 64px; margin: 0; padding: var(--sf-hm-s3) var(--sf-hm-s4); border: 0; border-right: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); border-radius: 0; background: var(--sf-white); font-family: var(--sf-body); color: var(--sf-ink); text-align: left; cursor: pointer; }
.sf-swo-stationen small { font-size: var(--sf-hb-kapitel); font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-swo-stationen b { overflow-wrap: anywhere; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-swo-station-name); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.sf-swo .sf-swo-stationen button[aria-pressed="true"] { background: var(--sf-ink); color: var(--sf-white); }
.sf-swo .sf-swo-stationen button[aria-pressed="true"] small { color: var(--sf-swo-gewaehlt-akzent); }
.sf-swo .sf-swo-stationen button:focus-visible { outline: 2px solid var(--sf-section-accent, var(--sf-travel)); outline-offset: -3px; }
@container sf-swo (min-width: 700px) {
.sf-swo-stationen { grid-template-columns: repeat(var(--sf-swo-n, 4), minmax(0, 1fr)); }
}
.sf-swo-station { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--sf-line); }
@container sf-swo (min-width: 860px) {
.sf-swo-station { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.sf-swo-bild { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sf-sr-papier); }
.sf-swo-bild .sf-rb-standbild { border: 0; }
.sf-swo-hinweis { position: absolute; top: var(--sf-hm-s3); left: var(--sf-hm-s3); z-index: 1; max-width: calc(100% - var(--sf-hm-s6)); padding: 6px 10px; background: var(--sf-swo-hinweis-grund); font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 700; line-height: 1.2; color: var(--sf-white); pointer-events: none; }
.sf-swo-texte { min-width: 0; }
.sf-swo-text { display: grid; align-content: start; gap: var(--sf-hm-s3); min-width: 0; padding: var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-swo-text[hidden] { display: none; }
@container sf-swo (min-width: 560px) {
.sf-swo-text { padding: var(--sf-hm-s5); }
}
.sf-swo-nummer { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-muted); }
.sf-swo-anlass { justify-self: start; margin: 0; padding: 4px var(--sf-hm-s2); background: var(--sf-travel-tint); font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-swo .sf-swo-h3 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-swo-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; letter-spacing: 0; text-transform: uppercase; color: var(--sf-ink); text-wrap: balance; }
.sf-swo-satz { margin: 0; font-family: var(--sf-body); font-size: var(--sf-swo-satz); line-height: 1.5; color: var(--sf-ink); text-wrap: pretty; }
.sf-swo-wert { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s1) var(--sf-hm-s2); margin: 0; padding: var(--sf-hm-s3) 0; border-top: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); }
.sf-swo-wert strong { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-swo-wert); font-weight: 800; line-height: 1; color: var(--sf-ink); }
.sf-swo-wert span { font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); color: var(--sf-muted); }
.sf-swo-wege { display: grid; gap: var(--sf-hm-s2); }
.sf-swo .sf-swo-weg { display: flex; align-items: center; justify-content: space-between; gap: var(--sf-hm-s3); min-height: var(--sf-hb-knopf-hoehe); padding: var(--sf-hm-s2) var(--sf-hm-s3); border: 1px solid var(--sf-line-stark); border-radius: var(--sf-hb-ecke); background: var(--sf-white); font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; line-height: 1.25; color: var(--sf-ink); text-decoration: none; }
.sf-swo .sf-swo-weg::after { content: "→"; }
.sf-swo .sf-swo-weg[data-sf-extern]::after { content: "↗"; }
.sf-swo .sf-swo-weg--shop { border-color: var(--sf-ink); background: var(--sf-ink); color: var(--sf-white); }
.sf-swo .sf-swo-weg--karte { width: 100%; margin: 0; text-align: left; cursor: pointer; }
.sf-swo .sf-swo-weg--karte::after { content: "↑"; }
.sf-swo .sf-swo-weg:hover { border-color: var(--sf-ink); }
.sf-swo .sf-swo-weg:focus-visible { outline: 2px solid var(--sf-section-accent, var(--sf-travel)); outline-offset: 2px; }
.sf-swo-weiterfahrt { display: flex; justify-content: space-between; gap: var(--sf-hm-s2); }
.sf-swo .sf-swo-schritt { min-height: var(--sf-hb-knopf-hoehe); margin: 0; padding: 0 var(--sf-hm-s4); border: 1px solid var(--sf-line-stark); border-radius: var(--sf-hb-ecke); background: var(--sf-white); font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; line-height: 1.2; color: var(--sf-ink); cursor: pointer; }
.sf-swo .sf-swo-schritt::before { content: "← "; }
.sf-swo .sf-swo-schritt--vor::before { content: none; }
.sf-swo .sf-swo-schritt--vor::after { content: " →"; }
.sf-swo .sf-swo-schritt:disabled { opacity: 0.4; cursor: default; }
.sf-swo .sf-swo-schritt:focus-visible { outline: 2px solid var(--sf-section-accent, var(--sf-travel)); outline-offset: 2px; }
.sf-swo-liste { display: grid; gap: var(--sf-hm-s4); margin: 0; padding: 0; list-style: none; }
.sf-swo-leiste { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; padding: 0 0 0 var(--sf-hm-s6); list-style: none; }
.sf-swo-leiste::before { content: ""; position: absolute; top: 0; bottom: 0; left: 7px; width: 2px; background: var(--sf-ink); }
.sf-swo-moment { position: relative; display: grid; align-content: start; gap: var(--sf-hm-s1); min-width: 0; padding: 0 0 var(--sf-hm-s5); font-family: var(--sf-body); }
.sf-swo-moment::before { content: ""; position: absolute; top: 0; left: calc(var(--sf-hm-s6) * -1); box-sizing: border-box; width: 16px; height: 16px; border: 2px solid var(--sf-ink); border-radius: 50%; background: var(--sf-white); }
.sf-swo-moment[data-sf-jetzt]::before { border-color: var(--sf-section-accent, var(--sf-travel)); background: var(--sf-section-accent, var(--sf-travel)); }
.sf-swo-zeit { font-size: var(--sf-hb-fein); font-weight: 700; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-swo-moment strong { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-swo-moment-titel); font-weight: 800; line-height: 1.05; color: var(--sf-ink); }
.sf-swo-moment span:last-child { font-size: var(--sf-hb-text-klein); line-height: 1.45; }
@container sf-swo (min-width: 700px) {
.sf-swo-leiste { grid-template-columns: repeat(var(--sf-swo-n, 4), minmax(0, 1fr)); padding: var(--sf-hm-s6) 0 0; }
.sf-swo-leiste::before { top: calc(var(--sf-hm-s6) + 7px); right: 0; bottom: auto; left: 0; width: auto; height: 2px; }
.sf-swo-moment { padding: var(--sf-hm-s5) var(--sf-hm-s3) 0 0; }
.sf-swo-moment::before { left: 0; }
.sf-swo-zeit { margin-top: var(--sf-hm-s2); }
}
.sf-swo-vorn { display: grid; gap: var(--sf-hm-s3); padding: var(--sf-hm-s5) var(--sf-hm-s4); background: var(--sf-swo-schnee); }
.sf-swo .sf-swo-vorn-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.05; color: var(--sf-ink); }
.sf-swo-saeulen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-swo-saeulen li { display: grid; align-content: start; gap: var(--sf-hm-s1); min-width: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); color: var(--sf-muted); }
.sf-swo-saeule { position: relative; display: block; max-width: 72px; height: var(--sf-swo-saeule-hoch); }
.sf-swo-saeule::after { content: ""; position: absolute; right: 0; bottom: 0; left: 0; box-sizing: border-box; height: var(--sf-swo-anteil, 10%); min-height: 8px; border: 1px solid var(--sf-swo-saeule-rand); border-bottom: 3px solid var(--sf-ink); background: var(--sf-white); }
.sf-swo .sf-swo-saeule-name { overflow-wrap: anywhere; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-swo-station-name); font-weight: 800; line-height: 1.05; color: var(--sf-ink); text-decoration: none; }
@container sf-swo (min-width: 560px) {
.sf-swo-vorn { padding: var(--sf-hm-s5); }
}
.sf-swo-teilen { display: grid; align-items: center; gap: var(--sf-hm-s3); padding: var(--sf-hm-s5) var(--sf-hm-s4); border: 1px solid var(--sf-line); font-family: var(--sf-body); }
.sf-swo-teilen p { margin: 0; }
.sf-swo .sf-swo-teilen-titel { margin: 0 0 var(--sf-hm-s1); font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.05; text-transform: uppercase; color: var(--sf-ink); }
@container sf-swo (min-width: 700px) {
.sf-swo-teilen { grid-template-columns: minmax(0, 1fr) auto; padding: var(--sf-hm-s5); }
}
.sf-swo-shop { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
@container sf-swo (min-width: 760px) {
.sf-swo-shop { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-swo .sf-swo-shop-karte { display: grid; align-content: start; gap: var(--sf-hm-s1); height: 100%; box-sizing: border-box; padding: var(--sf-hm-s4); border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); font-family: var(--sf-body); color: var(--sf-ink); text-decoration: none; }
.sf-swo .sf-swo-shop-karte:hover { border-color: var(--sf-ink); }
.sf-swo .sf-swo-shop-karte:focus-visible { outline: 2px solid var(--sf-section-accent, var(--sf-travel)); outline-offset: 2px; }
.sf-swo-shop-karte strong { overflow-wrap: anywhere; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-swo-station-name); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.sf-swo-shop-karte span { font-size: var(--sf-hb-text-klein); line-height: 1.4; color: var(--sf-muted); }
.sf-swo-shop-karte em { margin-top: var(--sf-hm-s1); font-size: var(--sf-hb-text-klein); font-style: normal; font-weight: 700; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-swo-shop-karte em::after { content: " ↗"; }
.sf-swo-lizenz { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-mini); line-height: 1.4; color: var(--sf-muted); }
.sf-srp-anriss { display: grid; gap: var(--sf-hm-s2); padding: var(--sf-hm-s4); border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-srp-anriss:hover { border-color: var(--sf-ink); }
.sf-srp-anriss:focus-visible { outline: 2px solid var(--sf-section-accent, var(--sf-travel)); outline-offset: 2px; }
.sf-srp-anriss-kopf { display: flex; align-items: center; gap: var(--sf-hm-s2); }
.sf-srp-anriss-kopf strong { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); }
.sf-srp-anriss-antwort { font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); line-height: 1.45; color: var(--sf-text); }
.sf-srp-anriss-liste { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1) var(--sf-hm-s4); font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); }
.sf-srp-anriss-nr { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-right: var(--sf-hm-s1); border-radius: 50%; background: var(--sf-ink); font-size: var(--sf-hb-mini); font-weight: 700; color: var(--sf-white); vertical-align: 1px; }
.sf-srp-anriss .sf-rb-standbild { margin: calc(var(--sf-hm-s4) * -1) calc(var(--sf-hm-s4) * -1) var(--sf-hm-s1); border-width: 0 0 1px; }
.sf-srp-anriss-liste b { font-weight: 700; }
.sf-swo-alpen { scroll-margin-top: var(--sf-hm-s4); }
.sf-swo-alpen:focus { outline: none; }
.sf-swo-steuer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s2) var(--sf-hm-s3); min-width: 0; }
.sf-swo-seg { display: inline-flex; border: 1px solid var(--sf-ink); }
.sf-swo .sf-swo-seg button { min-height: var(--sf-hb-knopf-hoehe); margin: 0; padding: 0 var(--sf-hm-s4); border: 0; border-radius: 0; background: var(--sf-page); color: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-steuer-schrift); font-weight: 700; cursor: pointer; }
.sf-swo .sf-swo-seg button[aria-pressed="true"] { background: var(--sf-ink); color: var(--sf-page); }
.sf-swo .sf-swo-seg button:focus-visible, .sf-swo .sf-swo-region select:focus-visible { outline: 2px solid var(--sf-sr-schnee); outline-offset: 2px; }
.sf-swo-region { display: inline-flex; flex: 1 1 200px; align-items: center; gap: var(--sf-hm-s2); min-width: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-muted); }
.sf-swo .sf-swo-region select { flex: 1 1 auto; min-width: 0; max-width: 100%; min-height: var(--sf-hb-knopf-hoehe); padding: 0 var(--sf-hm-s3); border: 1px solid var(--sf-line); border-radius: 0; background: var(--sf-page); color: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-steuer-schrift); font-weight: 700; }
@container sf-swo (min-width: 760px) {
.sf-swo-region { flex: 0 1 auto; }
}
.sf-swo-alpen-radar { min-width: 0; }
.sf-swo-alpen-radar .sr-wurzel { margin: 0; }
.sf-swo-alpen-radar .sr-wurzel .sr-leiste, .sf-swo-alpen-radar .sr-wurzel .sr-chips { display: none; }
.sf-swo-alpen-hinweis { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); line-height: 1.4; color: var(--sf-muted); }
.sf-swo-alpen-shop { display: grid; gap: var(--sf-hm-s3); }
.sf-swo-alpen-shop .sf-hb-knopf { justify-self: start; }
/* alpenflug-seite.css */
.sf-afs { --sf-afs-himmel: #c9d8e6; --sf-afs-schleier: rgba(0, 0, 0, 0.5); --sf-afs-verlauf: linear-gradient(to top, rgba(10, 22, 36, 0.72), rgba(10, 22, 36, 0)); --sf-afs-nummer: 22px; }
.sf-afs { container: sf-afs / inline-size; display: grid; gap: var(--sf-hm-abschnitt, 32px); padding-top: var(--sf-hm-s5, 24px); padding-bottom: var(--sf-hm-abschnitt, 32px); color: var(--sf-text); }
.sf-afs-kopf { display: grid; gap: var(--sf-hm-s3, 12px); max-width: 820px; }
.sf-afs-h1 { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-size: calc(clamp(34px, 5.2vw, 60px) * var(--sf-display-scale, 1)); font-weight: var(--sf-hb-titel-gewicht, 800); line-height: var(--sf-hb-titel-zeile, 1); color: var(--sf-ink); text-wrap: balance; }
.sf-afs-unterzeile { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text); line-height: 1.45; color: var(--sf-text); text-wrap: pretty; }
.sf-afs-kopf .sf-hb-werte { margin-top: var(--sf-hm-s2, 8px); }
.sf-afs-praes { display: flex; align-items: center; gap: var(--sf-hm-s2, 8px); margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-afs-praes a { color: var(--sf-ink); font-weight: 700; }
.sf-afs-haus { width: 18px; height: 18px; background: var(--sf-blue); flex: none; }
.sf-afs-buehne { display: grid; gap: var(--sf-hm-s4, 16px); }
.sf-afs-bild { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--sf-line); background: var(--sf-afs-himmel); }
.sf-afs-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-afs-bild figcaption { position: absolute; right: 0; bottom: 0; padding: 4px 8px; background: var(--sf-afs-schleier); color: var(--sf-white); font-family: var(--sf-body); font-size: var(--sf-size-11); line-height: 1.3; }
.sf-afs-start { display: grid; gap: var(--sf-hm-s3, 12px); justify-items: start; }
.sf-afs-start-text { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text); line-height: 1.45; color: var(--sf-ink); }
.sf-afs-fehler { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); color: var(--sf-caution); }
.sf-afs-bild { max-height: min(74svh, 760px); }
@container sf-afs (min-width: 760px) {
.sf-afs-buehne { position: relative; }
.sf-afs-start { position: absolute; left: var(--sf-hm-s5, 24px); bottom: var(--sf-hm-s5, 24px); max-width: 380px; padding: var(--sf-hm-s4, 16px) var(--sf-hm-s5, 24px) var(--sf-hm-s5, 24px); background: var(--sf-white); border-top: 4px solid var(--sf-section-accent, var(--sf-travel)); }
.sf-afs-bild figcaption { left: auto; }
}
.sf-afs-stationen { display: grid; gap: var(--sf-hm-s6, 32px); margin: 0; padding: 0; list-style: none; }
.sf-afs-station { scroll-margin-top: var(--sf-hm-s5, 24px); }
.sf-afs-karte { display: grid; gap: var(--sf-hm-s4, 16px); border-top: 4px solid var(--sf-section-accent, var(--sf-travel)); padding-top: var(--sf-hm-s4, 16px); }
.sf-afs-station--haus .sf-afs-karte { border-top-color: var(--sf-blue); }
.sf-afs-karte-bild { position: relative; margin: 0; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sf-afs-himmel); }
.sf-afs-karte-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-afs-nummer { position: absolute; left: 0; top: 0; min-width: 44px; padding: 8px 10px; background: var(--sf-ink); color: var(--sf-white); font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-afs-nummer); font-weight: 800; line-height: 1; text-align: center; text-transform: uppercase; }
.sf-afs-karte-text { display: grid; gap: var(--sf-hm-s3, 12px); align-content: start; min-width: 0; }
.sf-afs-h2 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: calc(clamp(28px, 3.4vw, 40px) * var(--sf-display-scale, 1)); font-weight: var(--sf-hb-titel-gewicht, 800); line-height: 1; color: var(--sf-ink); }
.sf-afs-text, .sf-afs-quellen p { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text); line-height: 1.5; color: var(--sf-text); max-width: 68ch; }
.sf-afs-hinweis { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-afs-links { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2, 8px); margin: 0; padding: 0; list-style: none; }
.sf-afs-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--sf-line); color: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-size-14); font-weight: 700; text-decoration: none; }
.sf-afs-links a::after { content: " ↗"; margin-left: 4px; }
.sf-afs-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2, 8px); }
.sf-afs-werbung { display: flex; align-items: center; gap: var(--sf-hm-s3, 12px); padding: var(--sf-hm-s3, 12px); background: var(--sf-surface); color: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-size-14); line-height: 1.35; text-decoration: none; }
.sf-afs-werbung img { width: 64px; height: 40px; object-fit: contain; background: var(--sf-white); flex: none; }
.sf-afs-werbung small { display: block; color: var(--sf-muted); font-size: var(--sf-size-12); }
.sf-afs-werbung strong { display: block; }
.sf-afs-check { display: grid; gap: var(--sf-hm-s2, 8px); }
.sf-afs-check-titel { margin: 0; font-family: var(--sf-body); font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-afs-check-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sf-hm-s2, 8px); margin: 0; padding: 0; list-style: none; }
.sf-afs-werbung--produkt { display: grid; align-content: start; height: 100%; border: 1px solid var(--sf-line); }
.sf-afs-werbung--produkt img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.sf-afs-werbung--produkt em { display: block; margin-top: var(--sf-hm-s1, 4px); font-style: normal; font-weight: 700; color: var(--sf-blue); }
.sf-afs-zwischen { padding: var(--sf-hm-s3, 12px) 0 var(--sf-hm-s3, 12px) var(--sf-hm-s4, 16px); border-left: 2px dashed var(--sf-line); font-family: var(--sf-body); font-size: var(--sf-size-15); line-height: 1.45; color: var(--sf-muted); }
.sf-afs-zwischen strong { color: var(--sf-ink); }
@container sf-afs (min-width: 760px) {
.sf-afs-karte { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--sf-hm-s5, 24px); }
}
.sf-afs-wetter { display: grid; gap: var(--sf-hm-s3, 12px); max-width: 820px; }
.sf-afs-wetter-tage, .sf-afs-wetter-halt { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--sf-hm-s2, 8px); font-family: var(--sf-body); font-size: var(--sf-size-15); line-height: 1.45; }
.sf-afs-wetter-tag { display: inline-block; min-width: 10em; color: var(--sf-muted); }
.sf-afs-wetter-halt { gap: var(--sf-hm-s1, 4px); color: var(--sf-muted); }
.sf-afs-wetter-halt strong { color: var(--sf-ink); }
.sf-afs-quellen { display: grid; gap: var(--sf-hm-s3, 12px); max-width: 820px; }
.sf-afs-teaser { --sf-afs-nacht: #0f1c2b; --sf-afs-schatten-stark: rgba(10, 22, 36, 0.86); --sf-afs-schatten-mittel: rgba(10, 22, 36, 0.62); --sf-afs-schatten-null: rgba(10, 22, 36, 0); --sf-afs-teaser-verlauf: linear-gradient( 90deg, var(--sf-afs-schatten-stark), var(--sf-afs-schatten-mittel) 55%, var(--sf-afs-schatten-null) ); --sf-afs-teaser-text: rgba(255, 255, 255, 0.86); container: sf-afs-teaser / inline-size; position: relative; display: grid; overflow: hidden; background: var(--sf-afs-nacht); color: var(--sf-white); }
.sf-afs-teaser-bild { display: block; width: 100%; height: 200px; object-fit: cover; object-position: 70% 72%; }
.sf-afs-teaser--banner .sf-afs-teaser-bild { height: 150px; }
.sf-afs-teaser-text { display: grid; gap: var(--sf-hm-s2, 8px); justify-items: start; padding: var(--sf-hm-s4, 16px) var(--sf-hm-s4, 16px) var(--sf-hm-s5, 24px); }
.sf-afs-teaser-kicker { margin: 0; font-family: var(--sf-body); font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-afs-teaser-text); }
.sf-afs-teaser-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: calc(clamp(28px, 3.4vw, 44px) * var(--sf-display-scale, 1)); font-weight: 800; line-height: 1; color: var(--sf-white); text-wrap: balance; }
.sf-afs-teaser-satz { margin: 0; max-width: 46ch; font-family: var(--sf-body); font-size: var(--sf-size-15); line-height: 1.4; color: var(--sf-afs-teaser-text); }
.sf-afs-teaser-knopf { margin-top: var(--sf-hm-s2, 8px); }
.sf-afs-teaser--banner .sf-afs-teaser-satz { display: none; }
@container sf-afs-teaser (min-width: 760px) {
.sf-afs-teaser-bild { grid-area: 1 / 1; height: 320px; object-position: 70% 50%; }
.sf-afs-teaser--banner .sf-afs-teaser-bild { height: 240px; }
.sf-afs-teaser--banner .sf-afs-teaser-satz { display: block; }
.sf-afs-teaser-text { grid-area: 1 / 1; align-content: center; width: min(62%, 620px); padding: var(--sf-hm-s5, 24px) var(--sf-hm-s7, 48px) var(--sf-hm-s5, 24px) var(--sf-hm-s6, 32px); background: var(--sf-afs-teaser-verlauf); }
}
/* basislager-seite.css */
.sf-bls { --sf-bls-himmel: linear-gradient(to bottom, #5e8fc9 0%, #b4cde8 46%, #eef2f6 100%); --sf-bls-code-grund: #fff7f1; container: sf-bls / inline-size; display: grid; gap: var(--sf-hm-abschnitt, 32px); padding-top: var(--sf-hm-s5, 24px); padding-bottom: var(--sf-hm-abschnitt, 32px); color: var(--sf-text); }
.sf-bls-kopf { display: grid; gap: var(--sf-hm-s3, 12px); max-width: 820px; }
.sf-bls-h1 { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-size: calc(clamp(34px, 5.2vw, 60px) * var(--sf-display-scale, 1)); line-height: 1; text-transform: uppercase; text-wrap: balance; }
.sf-bls-unterzeile { margin: 0; font-size: var(--sf-size-18); line-height: 1.5; max-width: 68ch; }
.sf-bls-buehne { display: grid; gap: var(--sf-hm-s4, 16px); }
.sf-bls-bild { margin: 0; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: var(--sf-bls-himmel); }
.sf-bls-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-bls-start { display: grid; gap: var(--sf-hm-s3, 12px); justify-items: start; max-width: 68ch; }
.sf-bls-start-text, .sf-bls-text { margin: 0; font-size: var(--sf-size-16); line-height: 1.55; max-width: 68ch; }
.sf-bls-hinweis, .sf-bls-quellen { margin: 0; font-size: var(--sf-size-13); line-height: 1.45; color: var(--sf-muted); }
.sf-bls-fehler { margin: 0; color: var(--sf-caution); font-weight: 600; }
.sf-bls-h2 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: calc(clamp(26px, 3.4vw, 36px) * var(--sf-display-scale, 1)); line-height: 1.05; text-transform: uppercase; }
.sf-bls-h3 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: calc(24px * var(--sf-display-scale, 1)); line-height: 1.05; text-transform: uppercase; }
.sf-bls-fakten, .sf-bls-mehr { display: grid; gap: var(--sf-hm-s4, 16px); }
.sf-bls-raster { display: grid; gap: var(--sf-hm-s4, 16px); grid-template-columns: minmax(0, 1fr); }
@container sf-bls (min-width: 760px) {
.sf-bls-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-bls-karte { display: grid; gap: var(--sf-hm-s3, 12px); align-content: start; padding: var(--sf-hm-s5, 24px); border: 1px solid var(--sf-line); min-width: 0; }
.sf-bls-kicker { margin: 0; font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-travel)); }
.sf-bls-liste { margin: 0; display: grid; gap: var(--sf-hm-s2, 8px); }
.sf-bls-zeile { display: flex; justify-content: space-between; gap: var(--sf-hm-s3, 12px); padding-bottom: var(--sf-hm-s2, 8px); border-bottom: 1px solid var(--sf-line); font-size: var(--sf-size-15); }
.sf-bls-zeile dt { margin: 0; }
.sf-bls-zeile dd { margin: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-bls-links { margin: 0; display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2, 8px); }
.sf-bls-link.sf-bls-link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--sf-hm-s4, 16px); background: var(--sf-ink); color: var(--sf-white); font-size: var(--sf-size-14); font-weight: 700; text-decoration: none; }
.sf-bls-link--zweit.sf-bls-link--zweit { background: transparent; color: var(--sf-ink); border: 1px solid var(--sf-line-stark); }
.sf-bls-link[data-sf-extern]::after { content: " ↗"; white-space: pre; }
.sf-bls-codekarte { display: grid; gap: var(--sf-hm-s3, 12px); max-width: 640px; padding: var(--sf-hm-s4, 16px); border: 2px dashed var(--sf-section-accent, var(--sf-travel)); background: var(--sf-bls-code-grund); color: var(--sf-ink); }
.sf-bls-code-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s3, 12px); }
.sf-bls-codekarte .sf-bls-code-kopieren { min-height: 44px; padding: 0 var(--sf-hm-s4, 16px); border: 0; background: var(--sf-section-accent, var(--sf-travel)); color: var(--sf-white); font: inherit; font-weight: 700; cursor: pointer; }
.sf-bls-code-wert { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: calc(34px * var(--sf-display-scale, 1)); letter-spacing: 0.08em; color: var(--sf-section-accent, var(--sf-travel)); user-select: all; }
.sf-bls-code-bedingung { margin: 0; font-size: var(--sf-size-13); line-height: 1.45; color: var(--sf-muted); }
.sf-bls-zurueck.sf-bls-zurueck { margin: var(--sf-hm-s3, 12px) 0 0; font-size: var(--sf-size-14, 14px); font-weight: 700; }
.sf-bls-zurueck a { color: var(--sf-blue); text-decoration: none; }
.sf-bls-zurueck a:hover { text-decoration: underline; }
.sf-bls-weg.sf-bls-weg { display: grid; gap: var(--sf-hm-s3, 12px); margin-top: var(--sf-hm-s4, 16px); padding: var(--sf-hm-s4, 16px); border-left: 4px solid var(--sf-travel, #a84b27); background: var(--sf-white, #fff); }
.sf-bls-weg-titel.sf-bls-weg-titel { margin: 0; font-size: 18px; font-weight: 700; line-height: 1.35; }
.sf-bls-weg-schritte.sf-bls-weg-schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--sf-hm-s3, 12px); margin: 0; padding: 0; list-style: none; counter-reset: weg; }
.sf-bls-weg-schritte li { display: grid; gap: 2px; padding-left: 40px; position: relative; font-size: 15px; line-height: 1.4; counter-increment: weg; }
.sf-bls-weg-schritte li::before { content: counter(weg); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--sf-travel, #a84b27); color: #fff; font-weight: 700; }
.sf-bls-weg-schritte b { font-size: 16px; }
/* scroll-skigebiet.css */
.sf-skg-standbild.sf-skg-standbild { margin: 0; display: grid; gap: var(--sf-hm-s2, 8px); }
.sf-skg-standbild.sf-skg-standbild img { display: block; width: 100%; max-width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sf-surface); }
.sf-skg-standbild.sf-skg-standbild figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s2, 8px) var(--sf-hm-s4, 16px); font-family: var(--sf-body); font-size: var(--sf-hb-fein, 13px); color: var(--sf-muted); }
.sf-skg .sf-skg-laden { min-height: var(--sf-hb-knopf-hoehe, 44px); padding: 0 var(--sf-hm-s5, 24px); border: 1px solid var(--sf-section-accent, var(--sf-travel)); border-radius: 0; background: var(--sf-section-accent, var(--sf-travel)); color: var(--sf-white); font: 700 var(--sf-hb-text-klein) / 1.2 var(--sf-body); cursor: pointer; }
.sf-skg-ansicht { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s3, 12px); padding: var(--sf-hm-s4, 16px) 0; border-block: 1px solid var(--sf-line); margin-bottom: var(--sf-hm-s5, 24px); }
.sf-skg-ansicht p { flex: 1 1 30ch; margin: 0; font-size: var(--sf-hb-text-klein, 14px); }
.sf-skg-lesefassung { max-width: 76ch; margin-inline: auto; }
.sf-skg-kapitelwahl { padding: var(--sf-hm-s4, 16px); background: var(--sf-surface); }
.sf-skg-kapitelwahl ol { columns: 2; padding-left: 1.3em; }
.sf-skg-kapitelwahl li { break-inside: avoid; margin-bottom: .6em; }
.sf-skg-kapitelwahl a { text-decoration: underline; color: var(--sf-ink); }
.sf-skg-lesekapitel { margin-block: var(--sf-hm-s7, 40px); scroll-margin-top: 32px; }
.sf-skg-lesekapitel figure { margin: 0 0 var(--sf-hm-s4, 16px); }
.sf-skg-lesekapitel img { display: block; width: 100%; height: auto; }
.sf-skg-lesekapitel figcaption { font-size: var(--sf-hb-fein, 13px); color: var(--sf-muted); margin-top: 6px; }
.sf-skg [hidden] { display: none; }
.sf-skg-start { --sf-skg-start-schatten: rgba(12, 18, 24, 0.78); --sf-skg-start-schatten-0: rgba(12, 18, 24, 0); --sf-skg-start-titel: calc(clamp(30px, 6vw, 60px) * var(--sf-display-scale, 1)); --sf-skg-start-marke: var(--sf-hb-fein, 13px); --sf-skg-start-klein: var(--sf-hb-text-klein, 14px); margin-bottom: var(--sf-hm-s5, 24px); }
.sf-skg-start-bild { position: relative; overflow: hidden; aspect-ratio: 16 / 9; min-height: 340px; background: var(--sf-ink); }
.sf-skg .sf-skg-start-bild img { position: absolute; max-width: none; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-skg-start-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--sf-skg-start-schatten-0) 35%, var(--sf-skg-start-schatten) 100%); }
.sf-skg-start-text { position: absolute; inset: auto 0 0 0; z-index: 1; display: grid; justify-items: start; gap: var(--sf-hm-s3, 12px); padding: var(--sf-hm-s5, 24px); color: var(--sf-white); }
.sf-skg-start-marke { margin: 0; font: 700 var(--sf-skg-start-marke) / 1.2 var(--sf-body); letter-spacing: 0.12em; text-transform: uppercase; }
.sf-skg-start-titel { margin: 0; max-width: 18ch; font: 800 var(--sf-skg-start-titel) / 0.95 var(--sf-display); text-transform: var(--sf-heading-case, none); }
.sf-skg .sf-skg-start-knopf { min-height: 52px; padding: 0 var(--sf-hm-s6, 32px); font-size: var(--sf-hb-text, 16px); }
.sf-skg-start-status { display: flex; align-items: center; gap: var(--sf-hm-s2, 8px); margin: 0; font: 600 var(--sf-skg-start-klein) / 1.3 var(--sf-body); }
.sf-skg-start-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--sf-white); animation: sf-skg-puls 1.2s ease-in-out infinite; }
@keyframes sf-skg-puls { 50% { opacity: 0.3; } }
@media (prefers-reduced-motion: reduce) {
.sf-skg-start-punkt { animation: none; }
}
.sf-skg-start-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--sf-hm-s2, 8px) var(--sf-hm-s4, 16px); padding-top: var(--sf-hm-s2, 8px); font-size: var(--sf-hb-fein, 13px); color: var(--sf-muted); }
.sf-skg .sf-skg-start-lesen { padding: var(--sf-hm-s2, 8px) 0; border: 0; background: none; color: var(--sf-ink); font: 600 var(--sf-skg-start-klein) / 1.2 var(--sf-body); text-decoration: underline; cursor: pointer; }
@media (max-width: 600px) {
.sf-skg-start-bild { aspect-ratio: 4 / 5; min-height: 0; }
.sf-skg-start-text { padding: var(--sf-hm-s4, 16px); }
}
@media (max-width: 600px) {
.sf-skg-kapitelwahl ol { columns: 1; }
}
/* relief3d.css */
.sf-rb { position: relative; height: var(--sf-rb-hoehe, auto); }
.sf-rb-buehne { height: 100%; }
.sf-rb-standbild { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-sr-papier); }
.sf-rb-standbild--breit { aspect-ratio: 16 / 9; }
.sf-rb-marke b { font-weight: 400; color: var(--sf-muted); }
.sf-rb-marke--hervor b { color: var(--sf-white); }
.sf-rb-nr { position: absolute; display: grid; place-items: center; width: 22px; height: 22px; transform: translate(-50%, -50%); border: 2px solid var(--sf-white); border-radius: 50%; background: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 700; line-height: 1; color: var(--sf-white); }
.sf-rb .sf-rb-standbild { height: 100%; aspect-ratio: auto; }
.sf-rb-standbild img { position: absolute; display: block; max-width: none; height: auto; }
.sf-rb-marke { position: absolute; padding: 2px var(--sf-hm-s2); transform: translate(-50%, calc(-100% - 6px)); border: 1px solid var(--sf-line); background: var(--sf-white); font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 700; line-height: 1.3; color: var(--sf-ink); white-space: nowrap; }
.sf-rb-marke--hervor { border-color: var(--sf-ink); background: var(--sf-ink); color: var(--sf-white); }
.sf-rb-wetter { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.sf-rb-wetter-grenze { fill: var(--sf-rb-grenze); stroke: var(--sf-rb-grenze-linie); stroke-width: 0.8; }
.sf-rb-wetter-regen { fill: var(--sf-rb-regen); fill-opacity: 0.12; stroke: var(--sf-rb-regen); stroke-width: 0.8; stroke-opacity: 0.35; }
.sf-rb-wetter-schnee { stroke: var(--sf-rb-schnee-linie); stroke-width: 0.8; stroke-opacity: 0.9; }
.sf-rb-wetter-schnee--1 { fill: var(--sf-rb-schnee-1); fill-opacity: 0.6; }
.sf-rb-wetter-schnee--2 { fill: var(--sf-rb-schnee-2); fill-opacity: 0.7; }
.sf-rb-wetter-schnee--3 { fill: var(--sf-rb-schnee-3); fill-opacity: 0.75; }
.sf-rb-wetter-schnee--4 { fill: var(--sf-rb-schnee-4); fill-opacity: 0.8; }
.sf-rb-legende { position: absolute; left: var(--sf-hm-s2); bottom: var(--sf-hm-s2); display: flex; flex-wrap: wrap; gap: 2px var(--sf-hm-s3); max-width: calc(100% - var(--sf-hm-s4)); padding: 4px 8px; background: var(--sf-rb-legende-grund); font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 700; line-height: 1.3; color: var(--sf-ink); pointer-events: none; }
.sf-rb-legende-teil { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.sf-rb-legende-feld { display: inline-block; width: 14px; height: 10px; border: 1px solid var(--sf-rb-schnee-linie); }
.sf-rb-legende-feld--schnee { background: linear-gradient( 90deg, var(--sf-rb-schnee-1), var(--sf-rb-schnee-3) 60%, var(--sf-rb-schnee-4) ); }
.sf-rb-legende-feld--regen { border-color: var(--sf-rb-regen); background: color-mix(in srgb, var(--sf-rb-regen) 30%, transparent); }
.sf-rb-legende-feld--grenze { border-color: var(--sf-line); background: var(--sf-white); }
/* radar-ort.css */
.sf-ro { display: grid; gap: var(--sf-hm-s4); min-width: 0; }
.sf-ro-schlagzeile { margin: 0; max-width: 34ch; font-family: var(--sf-display, var(--sf-body)); font-size: var(--sf-ro-schlagzeile); font-weight: 800; line-height: 1.12; color: var(--sf-ink); }
.sf-ro-zahl { color: var(--sf-sr-schnee); }
.sf-ro-lage, .sf-ro-tag { margin: 0; max-width: 64ch; font-family: var(--sf-body); font-size: var(--sf-hb-text); line-height: 1.5; color: var(--sf-text); }
.sf-ro-tag { min-height: 3em; font-size: var(--sf-hb-text-klein); color: var(--sf-muted); }
.sf-ro-tag strong { color: var(--sf-ink); }
.sf-ro-quelle { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-ro-fenster { min-width: 0; }
.sf-ro-fenster .sf-sr { margin: 0; }
.sf-ro-fenster .sr-wurzel.sr-gebiet { margin: 0; }
.sf-ro-fenster-bild { position: relative; overflow: hidden; aspect-ratio: 1 / 1; max-height: 78svh; border: 1px solid var(--sf-line); }
.sf-ro-fenster-bild .sf-rb-standbild { height: 100%; aspect-ratio: auto; }
.sf-ro-sb { height: 100%; }
.sf-ro-sb--breit { display: none; }
.sf-ro-fenster--flach .sf-ro-fenster-bild, .sf-ro-fenster--flach .sr-wurzel.sr-gebiet .sr-buehne { aspect-ratio: 16 / 10; }
@media (min-width: 760px) {
.sf-ro-fenster-bild { aspect-ratio: 21 / 9; max-height: none; }
.sf-ro-sb--schmal { display: none; }
.sf-ro-sb--breit { display: block; }
.sf-ro-fenster--flach .sf-ro-fenster-bild, .sf-ro-fenster--flach .sr-wurzel.sr-gebiet .sr-buehne { aspect-ratio: 3 / 1; }
}
.sf-ro-hb { display: grid; gap: var(--sf-hm-s2); min-width: 0; }
.sf-ro-hb-reihe { display: grid; grid-template-columns: 40px repeat(7, minmax(0, 1fr)); gap: 2px; align-items: stretch; }
.sf-ro-hb-reihe--ruhig { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.sf-ro-hb-tag.sf-ro-hb-tag { display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 0; margin: 0; padding: 8px 1px 6px; border: 1px solid transparent; border-radius: 0; background: transparent; color: var(--sf-ink); font: inherit; text-align: center; cursor: pointer; }
.sf-ro-hb-tag.sf-ro-hb-tag[aria-pressed="true"] { border-color: var(--sf-ink); background: var(--sf-page); }
.sf-ro-hb-tag.sf-ro-hb-tag:focus-visible, .sf-ro-hb-play.sf-ro-hb-play:focus-visible { outline: 2px solid var(--sf-sr-schnee); outline-offset: 2px; }
.sf-ro-hb-tag--summe.sf-ro-hb-tag--summe.sf-ro-hb-tag { display: none; }
.sf-ro-hb-play.sf-ro-hb-play { display: grid; place-items: center; align-self: center; width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 0; background: var(--sf-ink); color: var(--sf-page); cursor: pointer; }
.sf-ro-hb-play.sf-ro-hb-play[hidden], .sf-ro-hb-play span[hidden] { display: none; }
.sf-ro-hb-play span { display: grid; place-items: center; }
.sf-ro-hb-play svg { width: 14px; height: 14px; fill: currentColor; }
.sf-ro-hb-name { font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 700; color: var(--sf-ink); }
.sf-ro-hb-cm { font-family: var(--sf-display, var(--sf-body)); font-size: var(--sf-ro-cm); font-weight: 800; line-height: 1; color: var(--sf-sr-schnee); font-variant-numeric: tabular-nums; }
.sf-ro-hb-cm small { font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 600; color: var(--sf-muted); }
.sf-ro-hb-cm--null { color: var(--sf-muted); }
.sf-ro-hb-m { font-family: var(--sf-body); font-size: var(--sf-hb-mini); line-height: 1.2; color: var(--sf-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-ro-hb-einheit { display: none; }
.sf-ro-berg { display: block; width: 100%; height: 56px; overflow: visible; }
.sf-ro-berg-fels { fill: var(--sf-sr-fels); }
.sf-ro-berg-neu { fill: var(--sf-sr-schnee-hell); }
.sf-ro-berg-grenze { stroke: var(--sf-sr-schnee); stroke-width: 1.6; }
.sf-ro-berg-grenze--leer { stroke: var(--sf-muted); stroke-dasharray: 3 2; }
.sf-ro-berg-regen line { stroke: var(--sf-muted); stroke-width: 1; }
.sf-ro-berg-punkt { fill: var(--sf-ink); }
.sf-ro-hb-legende { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s1) var(--sf-hm-s4); margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-ro-hb-leg { display: inline-flex; align-items: center; gap: 6px; }
.sf-ro-hb-leg--neu::before, .sf-ro-hb-leg--grenze::before, .sf-ro-hb-leg--berg::before { content: ""; display: inline-block; width: 14px; height: 10px; background: var(--sf-sr-schnee-hell); }
.sf-ro-hb-leg--grenze::before { height: 0; border-top: 2px solid var(--sf-sr-schnee); background: none; }
.sf-ro-hb-leg--berg::before { width: 5px; height: 5px; background: var(--sf-ink); }
@media (min-width: 760px) {
.sf-ro-hb-reihe { grid-template-columns: 44px 96px repeat(7, minmax(0, 1fr)); gap: 6px; }
.sf-ro-hb-reihe--ruhig { grid-template-columns: 96px repeat(7, minmax(0, 1fr)); }
.sf-ro-hb-tag--summe.sf-ro-hb-tag--summe.sf-ro-hb-tag { display: grid; align-content: center; background: var(--sf-surface); }
.sf-ro-hb-tag--summe .sf-ro-hb-cm { font-size: var(--sf-ro-summe); }
.sf-ro-hb-name { font-size: var(--sf-hb-fein); }
.sf-ro-hb-cm { font-size: var(--sf-ro-cm-breit); }
.sf-ro-hb-einheit { display: inline; }
.sf-ro-berg { height: 64px; }
}
.sf-ro-naechster { display: grid; gap: var(--sf-hm-s2); padding: var(--sf-hm-s4); border-left: 3px solid var(--sf-sr-schnee); background: var(--sf-surface); }
.sf-ro-naechster p { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); color: var(--sf-ink); }
.sf-ro-weiter { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s5); }
@media (prefers-reduced-motion: reduce) {
.sf-ro-hb-tag.sf-ro-hb-tag { transition: none; }
}
/* gebiet-cockpit.css */
.sf-gc-zeichen { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sf-gc { margin: var(--sf-hm-s4) 0 0; }
.sf-gc-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s2); margin: 0; padding: 0; list-style: none; }
.sf-gc-raster > li { min-width: 0; }
.sf-gc-kachel.sf-gc-kachel { display: grid; height: 100%; border: 1px solid var(--sf-line); background: var(--sf-page); color: var(--sf-ink); text-decoration: none; transition: border-color 0.15s ease; }
.sf-gc-kachel.sf-gc-kachel:hover { border-color: var(--sf-ink); }
.sf-gc-kachel.sf-gc-kachel:focus-visible { outline: 2px solid var(--sf-sr-schnee); outline-offset: 2px; }
.sf-gc-bild { position: relative; display: block; overflow: hidden; aspect-ratio: 16 / 9; background: var(--sf-hb-relief-grund); }
.sf-gc-bild > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-gc-bild .sf-rb-standbild { height: 100%; aspect-ratio: auto; }
.sf-gc-flaeche { display: grid; place-items: center; width: 100%; height: 100%; color: var(--sf-muted); }
.sf-gc-flaeche .sf-gc-zeichen { width: 36px; height: 36px; stroke-width: 1.2; }
.sf-gc-marke { position: absolute; left: var(--sf-hm-s2); top: var(--sf-hm-s2); padding: 3px 8px; background: var(--sf-sr-schnee); color: var(--sf-page); font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.sf-gc-text { display: grid; gap: 2px; align-content: start; padding: var(--sf-hm-s2) var(--sf-hm-s3) var(--sf-hm-s3); }
.sf-gc-titel { display: flex; align-items: center; gap: 6px; font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-gc-titel .sf-gc-zeichen { width: 14px; height: 14px; }
.sf-gc-wert { font-family: var(--sf-display, var(--sf-body)); font-size: var(--sf-hb-zahl-klein); font-weight: 800; line-height: 1.05; color: var(--sf-ink); }
.sf-gc-wert--live::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 6px 3px 0; border-radius: 50%; background: var(--sf-hm-live-gruen); box-shadow: 0 0 0 3px var(--sf-hm-live-ring); vertical-align: middle; }
.sf-gc-unter { font-family: var(--sf-body); font-size: var(--sf-hb-fein); line-height: 1.35; color: var(--sf-muted); }
@media (min-width: 760px) {
.sf-gc-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-hm-s3); }
}
.sf-gc-raster--3 > li:last-child, .sf-gc-raster--5 > li:last-child { grid-column: 1 / -1; }
.sf-gc-raster--3 > li:last-child .sf-gc-kachel, .sf-gc-raster--5 > li:last-child .sf-gc-kachel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
@media (min-width: 760px) {
.sf-gc-raster--3 > li:last-child, .sf-gc-raster--5 > li:last-child { grid-column: auto; }
.sf-gc-raster--3 > li:last-child .sf-gc-kachel, .sf-gc-raster--5 > li:last-child .sf-gc-kachel { grid-template-columns: none; }
.sf-gc-raster--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-gc-raster--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1000px) {
.sf-gc-raster--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sf-gc-raster--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
.sf-gc-balken { display: grid; align-content: center; gap: var(--sf-hm-s2); height: 100%; padding: var(--sf-hm-s3); background: var(--sf-hb-buehne-grund); color: var(--sf-hb-hell-text); font-family: var(--sf-body); font-size: var(--sf-hb-mini); }
.sf-gc-balken-zeile { display: grid; gap: 4px; }
.sf-gc-balken-zeile b { display: flex; justify-content: space-between; font-weight: 600; }
.sf-gc-balken-spur { display: block; height: 8px; background: var(--sf-hb-hell-spur); }
.sf-gc-balken-spur > span { display: block; height: 100%; background: var(--sf-hm-live-gruen); }
.sf-gc-stock { display: grid; grid-template-rows: 1fr 1fr; height: 100%; font-family: var(--sf-body); font-size: var(--sf-hb-mini); }
.sf-gc-stock > span { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 0 var(--sf-hm-s3); }
.sf-gc-stock > span:first-child { background: var(--sf-advice-tint); color: var(--sf-ink); }
.sf-gc-stock > span:last-child { background: var(--sf-surface); color: var(--sf-ink); }
.sf-gc-stock b { font-family: var(--sf-display, var(--sf-body)); font-size: var(--sf-hb-h3); font-weight: 800; }
.sf-gc-cam-alle.sf-gc-cam-alle { display: grid; place-items: center; width: 100%; height: 100%; min-height: 72px; margin: 0; border: 1px solid var(--sf-ink); border-radius: 0; background: var(--sf-page); color: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-steuer-schrift); font-weight: 700; cursor: pointer; }
.sf-gc-kachel[data-sf-ziel="heute"], .sf-gl-link[data-sf-ziel="heute"], .sf-gc-buehne--heute { --sf-gc-farbe: var(--sf-travel); --sf-gc-tint: var(--sf-travel-tint); }
.sf-gc-kachel[data-sf-ziel="kameras"], .sf-gl-link[data-sf-ziel="kameras"], .sf-gc-buehne--kameras { --sf-gc-farbe: var(--sf-hm-live-gruen); --sf-gc-tint: var(--sf-hm-passt-tint); }
.sf-gc-kachel[data-sf-ziel="plan"], .sf-gl-link[data-sf-ziel="plan"], .sf-gc-buehne--plan { --sf-gc-farbe: var(--sf-fit); --sf-gc-tint: var(--sf-fit-tint); }
.sf-gc-kachel[data-sf-ziel="wetter"], .sf-gl-link[data-sf-ziel="wetter"], .sf-gc-buehne--wetter { --sf-gc-farbe: var(--sf-hm-winter); --sf-gc-tint: var(--sf-advice-tint); }
.sf-gc-kachel[data-sf-ziel="story"], .sf-gl-link[data-sf-ziel="story"], .sf-gc-buehne--story { --sf-gc-farbe: var(--sf-club); --sf-gc-tint: var(--sf-club-tint); }
.sf-gc-kachel[data-sf-ziel="planen"], .sf-gl-link[data-sf-ziel="planen"], .sf-gc-buehne--planen { --sf-gc-farbe: var(--sf-hm-geht); --sf-gc-tint: var(--sf-hm-geht-tint); }
.sf-gc-kachel[data-sf-ziel="ausruestung"], .sf-gl-link[data-sf-ziel="ausruestung"], .sf-gc-buehne--ausruestung { --sf-gc-farbe: var(--sf-sport); --sf-gc-tint: var(--sf-sport-tint); }
.sf-gc-kachel.sf-gc-kachel[data-sf-ziel] { border-top: 4px solid var(--sf-gc-farbe); }
.sf-gc-kachel.sf-gc-kachel[data-sf-ziel]:hover { border-color: var(--sf-gc-farbe); }
.sf-gc-kachel[data-sf-ziel] .sf-gc-titel { color: var(--sf-gc-farbe); }
.sf-gc-kachel[data-sf-ziel] .sf-gc-text { background: var(--sf-gc-tint); }
.sf-gb-seite:has(> .sf-gl-halter) { --sf-gl-h: 56px; }
.sf-gb-seite:has(> .sf-gl-halter) .sf-sg-scrollstory .sf-skg { --hoehe: calc(100svh - var(--sf-gl-h) - var(--sf-kopf-klebt, 0px)); }
.sf-gb-seite:has(> .sf-gl-halter) .sf-sg-scrollstory .sf-skg .skg-buehne, .sf-gb-seite:has(> .sf-gl-halter) .sf-sg-scrollstory .sf-skg .skg-oben { top: calc(var(--sf-kopf-klebt, 0px) + var(--sf-gl-h)); }
@media (min-width: 900px) {
.sf-gb-seite:has(> .sf-gl-halter) { --sf-gl-h: 60px; }
}
.sf-gl-halter { position: sticky; top: var(--sf-kopf-klebt, 0px); z-index: 20; height: 0; }
.sf-gb-seite > .sf-gl-halter.sf-gl-halter { margin: 0; }
.sf-gl-halter + .sf-gc-buehne.sf-gc-buehne { padding-top: 0; }
.sf-gl { position: absolute; top: 0; left: 0; right: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; gap: 0 var(--sf-hm-s4); border-bottom: 1px solid var(--sf-line); background: var(--sf-page); box-shadow: var(--sf-gl-schatten); transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s; }
.sf-gl[data-sf-klebt="nein"] { visibility: hidden; opacity: 0; transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) {
.sf-gl { transition: none; }
}
.sf-gl-name { display: none; margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-gl-name b { display: block; font-family: var(--sf-display, var(--sf-body)); font-size: var(--sf-hb-h3); font-weight: 800; line-height: 1; color: var(--sf-ink); }
.sf-gl-punkte { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.sf-gl-punkte > li { min-width: 0; }
.sf-gl-link.sf-gl-link { position: relative; display: grid; justify-items: center; align-content: center; gap: 2px; height: 100%; padding: 9px 2px 7px; color: var(--sf-muted); font-family: var(--sf-body); font-size: var(--sf-hb-mini); font-weight: 600; text-align: center; text-decoration: none; }
.sf-gl-link.sf-gl-link::before { content: ""; position: absolute; top: 0; left: 2px; right: 2px; height: 3px; background: var(--sf-gc-farbe, var(--sf-ink)); opacity: 0.45; }
.sf-gl-link.sf-gl-link[aria-current="true"] { background: var(--sf-gc-tint, var(--sf-surface)); color: var(--sf-gc-farbe, var(--sf-ink)); }
.sf-gl-link.sf-gl-link[aria-current="true"]::before { opacity: 1; }
.sf-gl-link.sf-gl-link:hover { color: var(--sf-gc-farbe, var(--sf-ink)); }
.sf-gl-link.sf-gl-link:focus-visible { outline: 2px solid var(--sf-gc-farbe, var(--sf-ink)); outline-offset: -2px; }
.sf-gl-wert { overflow: hidden; max-width: 100%; font-family: var(--sf-display, var(--sf-body)); font-size: var(--sf-hb-fein); font-style: normal; font-weight: 800; line-height: 1; color: var(--sf-ink); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.sf-gl-label { overflow: hidden; max-width: 100%; text-overflow: ellipsis; white-space: nowrap; }
.sf-gl-label--mit-wert { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 900px) {
.sf-gl { grid-template-columns: auto minmax(0, 1fr); padding: 0 0 0 var(--sf-hm-s4); }
.sf-gl-name { display: grid; align-content: center; gap: 2px; }
.sf-gl-link.sf-gl-link { grid-template-columns: auto auto; justify-content: center; align-items: center; gap: 2px 6px; padding: 12px 4px 10px; font-size: var(--sf-hb-fein); }
.sf-gl-link .sf-gc-zeichen { grid-row: span 2; }
.sf-gl-wert { font-size: var(--sf-hb-h3); }
.sf-gl-label--mit-wert { position: static; width: auto; height: auto; clip: auto; }
}
.sf-gc-buehne { display: grid; gap: var(--sf-hm-s4); min-width: 0; padding: var(--sf-hm-abschnitt) 0 0; scroll-margin-top: 72px; }
.sf-gc-buehne-kopf { display: grid; gap: var(--sf-hm-s2); }
.sf-gc-kapitel { display: flex; align-items: center; gap: 6px; margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-gc-farbe, var(--sf-section-accent, var(--sf-travel))); }
.sf-gc-kapitel .sf-gc-zeichen { width: 16px; height: 16px; }
.sf-gc-buehne-zeile { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sf-hm-s2) var(--sf-hm-s5); }
.sf-gc-h2.sf-gc-h2 { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h2); font-weight: var(--sf-hb-titel-gewicht); line-height: var(--sf-hb-titel-zeile); letter-spacing: 0; text-transform: none; color: var(--sf-ink); }
.sf-gc-h3.sf-gc-h3 { margin: var(--sf-hm-s4) 0 var(--sf-hm-s2); font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h3); font-weight: var(--sf-hb-titel-gewicht); letter-spacing: 0; text-transform: none; color: var(--sf-ink); }
.sf-gc-satz { margin: 0; max-width: 64ch; font-family: var(--sf-body); font-size: var(--sf-hb-text); line-height: 1.5; color: var(--sf-text); }
.sf-gc-buehne .sf-gc-ohne-kopf > .sf-hb-kopf, .sf-gc-buehne .sf-gc-ohne-kopf .sf-ro > .sf-hb-kopf { display: none; }
.sf-gc-reiter { display: grid; gap: var(--sf-hm-s4); min-width: 0; }
.sf-gc-reiter-kopf { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); border: 1px solid var(--sf-ink); scroll-margin-top: 72px; }
.sf-gc-reiter-knopf.sf-gc-reiter-knopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; min-height: var(--sf-hb-knopf-hoehe); margin: 0; padding: 8px 10px; border: 0; border-radius: 0; background: var(--sf-page); color: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-steuer-schrift); font-weight: 700; cursor: pointer; }
.sf-gc-reiter-knopf.sf-gc-reiter-knopf[aria-selected="true"] { background: var(--sf-ink); color: var(--sf-page); }
.sf-gc-reiter-knopf.sf-gc-reiter-knopf:focus-visible { outline: 2px solid var(--sf-sr-schnee); outline-offset: -4px; }
.sf-gc-reiter-marke { padding: 1px 6px; background: var(--sf-sr-schnee); color: var(--sf-page); font-size: var(--sf-hb-mini); letter-spacing: 0.04em; text-transform: uppercase; }
.sf-gc-reiter-inhalt { min-width: 0; }
.sf-gc-reiter-alle { display: grid; gap: var(--sf-hm-s5); }
.sf-gc-reiter-kopf[hidden], .sf-gc-reiter-alle > [hidden] { display: none; }
.sf-gc-reiter-alle.sf-gc-reiter { gap: var(--sf-hm-s4); }
.sf-gc-lage { display: grid; gap: var(--sf-hm-s4); min-width: 0; }
.sf-gc-lage-quelle { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-gc-lage-betreiber { margin-top: var(--sf-hm-s2); font-size: var(--sf-hb-text-klein); color: var(--sf-text); }
.sf-gc-lage-betreiber a { color: var(--sf-ink); text-decoration: underline; text-underline-offset: 0.15em; }
.sf-gc-cams { display: grid; gap: var(--sf-hm-s3); min-width: 0; }
.sf-gc-cam-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s2); margin: 0; padding: 0; list-style: none; }
.sf-gc-cam-raster > li { min-width: 0; }
.sf-gc-cam.sf-gc-cam { display: grid; width: 100%; margin: 0; padding: 0; border: 1px solid var(--sf-line); border-radius: 0; background: var(--sf-page); color: var(--sf-ink); font: inherit; text-align: left; cursor: pointer; }
.sf-gc-cam.sf-gc-cam[aria-pressed="true"] { border-color: var(--sf-ink); }
.sf-gc-cam img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sf-hb-relief-grund); }
.sf-gc-cam-name { display: grid; padding: 6px 8px 8px; font-family: var(--sf-body); font-size: var(--sf-hb-fein); font-weight: 600; line-height: 1.3; }
.sf-gc-cam-name em { font-style: normal; font-weight: 400; color: var(--sf-muted); }
.sf-gc-cam-zu.sf-gc-cam-zu { justify-self: start; margin: 0; padding: 6px 12px; border: 1px solid var(--sf-ink); border-radius: 0; background: var(--sf-page); color: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-hb-steuer-schrift); font-weight: 600; cursor: pointer; }
@media (min-width: 760px) {
.sf-gc-cam-raster { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
.sf-gc-kachel.sf-gc-kachel { transition: none; }
}
.sf-gc-teil { display: grid; gap: var(--sf-hm-s3); min-width: 0; scroll-margin-top: 72px; }
.sf-gc-ohne-titel h2[id^="pp3d-t-"], .sf-gc-ohne-titel .sf-pp3d-standbild-titel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-sg-anriss.sf-sg-anriss--v3 { padding-top: 0; padding-bottom: 0; background: none; }
.sf-gc-amtlich { display: grid; gap: var(--sf-hm-s2); font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); color: var(--sf-text); }
.sf-gc-amtlich-zeile { margin: 0; }
.sf-gc-amtlich-zeile strong { color: var(--sf-ink); }
.sf-gc-amtlich-quellen summary { cursor: pointer; font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-gc-amtlich-quellen ul { margin: var(--sf-hm-s2) 0 0; padding-left: 1.1em; font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-gc-buehne--plan { overflow-x: clip; }
.sf-gc-buehne > * { min-width: 0; }
.sf-gc-hinweis { margin: 0; padding: var(--sf-hm-s2) var(--sf-hm-s3); background: var(--sf-caution-tint); font-family: var(--sf-body); font-size: var(--sf-hb-fein); line-height: 1.4; color: var(--sf-text); }
.sf-gc-hinweis small { color: var(--sf-muted); }
.sf-gc-ohne-titel .pp3d-kopf { display: none; }
/* bergwetter.css */
.sf-bw { display: grid; gap: var(--sf-hm-s5); min-width: 0; }
.sf-bw-kopf { display: grid; gap: var(--sf-hm-s1); }
.sf-bw .sf-bw-titel { margin: 0; font-family: var(--sf-display); font-size: var(--sf-bw-art); font-weight: 800; line-height: 1.05; text-transform: uppercase; color: var(--sf-ink); }
.sf-bw-teil { display: grid; align-content: start; gap: var(--sf-hm-s3); min-width: 0; }
.sf-bw .sf-bw-teil-titel { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-travel); }
.sf-bw-satz { margin: 0; font-family: var(--sf-display); font-size: var(--sf-bw-art); font-weight: 800; line-height: 1.05; text-transform: uppercase; color: var(--sf-ink); }
.sf-bw-wann { color: var(--sf-blue); }
.sf-bw-satz-klein { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text); line-height: 1.5; color: var(--sf-ink); }
.sf-bw-stand, .sf-bw-klein, .sf-bw-quelle { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); line-height: 1.5; color: var(--sf-muted); }
.sf-bw-split { display: grid; border: 1px solid var(--sf-line); }
.sf-bw-stock { display: grid; gap: var(--sf-hm-s2); align-content: start; padding: var(--sf-hm-s4); min-width: 0; }
.sf-bw-stock + .sf-bw-stock { border-top: 1px solid var(--sf-line); }
.sf-bw-stock--oben { background: var(--sf-bw-gipfel); }
.sf-bw-wo { font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-bw-art { font-family: var(--sf-display); font-size: var(--sf-bw-art); font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--sf-ink); }
.sf-bw-werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s2) var(--sf-hm-s4); margin: 0; }
.sf-bw-werte dt { font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); color: var(--sf-muted); }
.sf-bw-werte dd { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-text); font-variant-numeric: tabular-nums; color: var(--sf-ink); }
.sf-bw-fenster { display: grid; gap: var(--sf-hm-s1); }
.sf-bw-stunden { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 3px; }
.sf-bw-h { padding: var(--sf-hm-s1) 0; background: var(--sf-surface); font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); font-variant-numeric: tabular-nums; text-align: center; color: var(--sf-muted); }
.sf-bw-h--sonne { background: var(--sf-bw-sonne); color: var(--sf-ink); }
.sf-bw-hinweis { margin: 0; padding: var(--sf-hm-s2) var(--sf-hm-s3); background: var(--sf-hm-geht-tint); font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); line-height: 1.5; color: var(--sf-hm-geht); }
.sf-bw-tage, .sf-bw-liste { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sf-line); }
.sf-bw-tage li, .sf-bw-liste li { padding: var(--sf-hm-s2) 0; border-bottom: 1px solid var(--sf-line); font-family: var(--sf-body); font-size: var(--sf-hb-text); line-height: 1.45; color: var(--sf-ink); }
.sf-bw-wind { color: var(--sf-hm-geht); }
.sf-bw-liste--zeilen li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sf-hm-s1) var(--sf-hm-s3); align-items: baseline; }
.sf-bw-liste small, .sf-bw-rang small { display: block; font-size: var(--sf-hb-text-klein); color: var(--sf-muted); }
.sf-bw-liste--zeilen strong { font-variant-numeric: tabular-nums; color: var(--sf-blue); white-space: nowrap; }
.sf-bw-nebel { display: grid; gap: var(--sf-hm-s3); }
.sf-bw-schnitt { display: block; width: 100%; max-width: 420px; height: auto; border: 1px solid var(--sf-line); }
.sf-bw-schnitt-himmel { fill: var(--sf-bw-himmel); }
.sf-bw-schnitt-sonne { fill: var(--sf-bw-sonne); }
.sf-bw-schnitt-berg { fill: var(--sf-bw-berg); }
.sf-bw-schnitt-firn { fill: var(--sf-white); }
.sf-bw-schnitt-nebel { fill: var(--sf-bw-nebel); opacity: 0.92; }
.sf-bw-schnitt-tal { fill: var(--sf-bw-tal); }
.sf-bw-schnitt-linie { stroke: var(--sf-muted); stroke-dasharray: 4 4; }
.sf-bw-powder { display: grid; gap: var(--sf-hm-s3); }
.sf-bw-powder-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sf-hm-s3); }
.sf-bw-cm { font-family: var(--sf-display); font-size: var(--sf-bw-cm); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--sf-ink); }
.sf-bw-powder--alarm .sf-bw-cm, .sf-bw-powder--tief .sf-bw-cm { color: var(--sf-blue); }
.sf-bw-stufe-name { font-family: var(--sf-display); font-size: var(--sf-bw-art); font-weight: 800; text-transform: uppercase; color: var(--sf-ink); }
.sf-bw-stufen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px; margin: 0; padding: 0; list-style: none; }
.sf-bw-stufe { display: grid; gap: 2px; padding: var(--sf-hm-s2); background: var(--sf-surface); font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); color: var(--sf-muted); }
.sf-bw-stufe--an { background: var(--sf-ink); color: var(--sf-white); }
.sf-bw-spalten { display: grid; gap: var(--sf-hm-s5); }
.sf-bw-rang { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sf-line); }
.sf-bw-rang li { display: grid; grid-template-columns: minmax(0, 1fr) 64px auto; gap: var(--sf-hm-s3); align-items: center; padding: var(--sf-hm-s2) 0; border-bottom: 1px solid var(--sf-line); font-family: var(--sf-body); font-size: var(--sf-hb-text); }
.sf-bw-rang-name { min-width: 0; }
.sf-bw-balken { position: relative; display: block; height: 10px; background: var(--sf-surface); }
.sf-bw-balken-wert { position: absolute; top: 0; bottom: 0; left: 0; background: var(--sf-blue); }
.sf-bw-rang-cm { font-family: var(--sf-display); font-size: var(--sf-bw-rang); font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; color: var(--sf-ink); }
.sf-bw-messung strong { display: block; font-variant-numeric: tabular-nums; }
.sf-bw-messung small { display: block; font-size: var(--sf-hb-text-klein); color: var(--sf-muted); }
.sf-bw-lawine { display: grid; gap: var(--sf-hm-s3); }
.sf-bw-lawine-bericht { display: grid; gap: var(--sf-hm-s2); }
.sf-bw-stufe-zeile { font-weight: 700; }
.sf-bw-amtlich a, .sf-bw-quelle a { color: var(--sf-blue); }
@media (min-width: 760px) {
.sf-bw-split { grid-template-columns: 1fr 1fr; }
.sf-bw-stock + .sf-bw-stock { border-top: 0; border-left: 1px solid var(--sf-line); }
.sf-bw-nebel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
.sf-bw-stufen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-bw-spalten { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.sf-bw-rang li { grid-template-columns: minmax(0, 1fr) 120px auto; }
}
/* hoehenmeter.css */
.sf-hm { --sf-hm-text: var(--sf-text, #4a4a4a); --sf-hm-muted: var(--sf-muted, #656565); --sf-hm-line: var(--sf-line, #dedfe1); --sf-hm-akzent: var(--sf-section-accent, var(--sf-travel)); --sf-hm-ruhig: #a7b0b8; --sf-hm-glass: rgba(255, 255, 255, 0.9); --sf-hm-karte: rgba(255, 255, 255, 0.96); --sf-hm-weiss: #fff; --sf-hm-himmel: #d9e4ee; --sf-hm-stiel: rgba(26, 26, 26, 0.55); --sf-hm-schiene: rgba(255, 255, 255, 0.75); --sf-hm-schiene-rand: rgba(26, 26, 26, 0.12); --sf-hm-flaeche: var(--sf-surface); --sf-hm-zahl: calc(clamp(34px, 6vw, 56px) * var(--sf-display-scale, 1)); --sf-hm-einheit: calc(16px * var(--sf-display-scale, 1)); --sf-hm-verlauf-0: rgba(10, 20, 30, 0); --sf-hm-verlauf-1: rgba(10, 20, 30, 0.62); --sf-hm-nacht: #0d1b2a; --sf-hm-kopf-schatten-0: rgba(6, 14, 26, 0.18); --sf-hm-kopf-schatten-1: rgba(6, 14, 26, 0.55); --sf-hm-kopf-schatten-2: rgba(6, 14, 26, 0.9); --sf-hm-kopf-glas: rgba(255, 255, 255, 0.14); --sf-hm-kopf-glas-hover: rgba(255, 255, 255, 0.24); --sf-hm-kopf-glas-rand: rgba(255, 255, 255, 0.28); color: var(--sf-hm-text); }
.sf-hm .sf-hm-welt { position: relative; }
.sf-hm .sf-hm-buehne { position: sticky; top: var(--sf-kopf-klebt, 0px); height: 100vh; height: calc(100svh - var(--sf-kopf-klebt, 0px)); overflow: hidden; background: var(--sf-hm-himmel); touch-action: pan-y; }
.sf-hm .sf-hm-canvas, .sf-hm .sf-hm-standbild { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sf-hm .sf-hm-standbild { object-fit: cover; transition: opacity 0.6s ease; }
.sf-hm .sf-hm-ohne3d { position: absolute; left: 16px; right: 16px; top: 45%; margin: 0; padding: 10px 14px; background: var(--sf-hm-glass); border: 1px solid var(--sf-hm-line); font-size: var(--sf-size-14); text-align: center; }
.sf-hm .sf-hm-pins { position: absolute; inset: 0; pointer-events: none; }
.sf-hm .sf-hm-pin { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.35s ease; will-change: transform, opacity; }
.sf-hm .sf-hm-pin::before { content: ""; position: absolute; left: -4px; top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-hm-weiss); border: 2px solid var(--sf-ink); }
.sf-hm .sf-hm-pin::after { content: ""; position: absolute; left: -0.5px; bottom: 4px; width: 1px; height: 22px; background: var(--sf-hm-stiel); }
.sf-hm .sf-hm-pin > span { position: absolute; left: 0; white-space: nowrap; transform: translateX(-50%); }
.sf-hm .sf-hm-pin-name { bottom: 40px; font: 700 var(--sf-size-13) / 1.3 var(--sf-body); color: var(--sf-ink); background: var(--sf-hm-glass); border: 1px solid var(--sf-hm-line); padding: 2px 7px; }
.sf-hm .sf-hm-pin-hoehe { bottom: 26px; font: 600 var(--sf-size-11) / 1 var(--sf-body); font-variant-numeric: tabular-nums; color: var(--sf-ink); text-shadow: 0 0 3px var(--sf-hm-weiss), 0 0 6px var(--sf-hm-weiss); }
.sf-hm .sf-hm-pin[data-aktiv] .sf-hm-pin-name { background: var(--sf-hm-akzent); border-color: var(--sf-hm-akzent); color: var(--sf-hm-weiss); }
.sf-hm .sf-hm-pin[data-aktiv]::before { border-color: var(--sf-hm-akzent); }
.sf-hm .sf-hm-hud { position: absolute; left: 16px; right: 16px; top: 16px; display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sf-hm-s3); pointer-events: none; }
.sf-hm .sf-hm-steuer-buehne { position: sticky; top: var(--sf-kopf-klebt, 0px); height: 0; margin-top: calc(-100svh + var(--sf-kopf-klebt, 0px)); z-index: 3; pointer-events: none; }
.sf-hm .sf-hm-steuer-buehne > * { pointer-events: auto; }
.sf-hm .sf-hm-hud > * { pointer-events: auto; }
.sf-hm .sf-hm-messer, .sf-hm .sf-hm-saison { background: var(--sf-hm-glass); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--sf-hm-line); }
.sf-hm .sf-hm-messer { padding: 7px 11px 8px; }
.sf-hm .sf-hm-messer-zeile { display: flex; align-items: baseline; gap: 4px; color: var(--sf-ink); }
.sf-hm .sf-hm-messer b { font: 800 var(--sf-hm-zahl) / 0.95 var(--sf-display); font-variant-numeric: tabular-nums; }
.sf-hm .sf-hm-messer small { font: 800 var(--sf-hm-einheit) / 1 var(--sf-display); }
.sf-hm .sf-hm-messer-ort { display: block; font-size: var(--sf-size-13); color: var(--sf-ink); margin-top: 3px; }
.sf-hm .sf-hm-messer-gewinn { display: block; font-size: var(--sf-size-12); font-weight: 700; color: var(--sf-hm-akzent); font-variant-numeric: tabular-nums; }
.sf-hm .sf-hm-saison { display: inline-flex; padding: 3px; }
.sf-hm .sf-hm-saison button { font: 700 var(--sf-size-13) / 1 var(--sf-body); border: 0; background: transparent; color: var(--sf-hm-text); padding: 0 12px; min-height: 40px; cursor: pointer; }
.sf-hm .sf-hm-saison button[aria-pressed="true"] { background: var(--sf-ink); color: var(--sf-hm-weiss); }
.sf-hm .sf-hm-saison { flex-wrap: wrap; max-width: 235px; }
.sf-hm .sf-hm-darstellung { flex-basis: 100%; max-width: 28ch; padding: 5px 8px; font-size: var(--sf-size-11); line-height: 1.3; }
.sf-hm button:focus-visible, .sf-hm a:focus-visible { outline: 2px solid var(--sf-hm-akzent); outline-offset: 2px; }
.sf-hm .sf-hm-schiene { position: absolute; right: 16px; top: 24svh; height: 26svh; width: 12px; --sf-hm-stand: 0; }
.sf-hm .sf-hm-schiene::before { content: ""; position: absolute; right: 5px; top: 0; bottom: 0; width: 2px; background: var(--sf-hm-schiene); box-shadow: 0 0 0 1px var(--sf-hm-schiene-rand); }
.sf-hm .sf-hm-schiene::after { content: ""; position: absolute; right: 1px; width: 10px; height: 10px; border-radius: 50%; background: var(--sf-hm-akzent); border: 2px solid var(--sf-hm-weiss); bottom: calc(var(--sf-hm-stand) * 100% - 5px); }
.sf-hm .sf-hm-schiene button { position: absolute; right: -8px; height: 28px; transform: translateY(50%); display: flex; align-items: center; gap: var(--sf-hm-s2); border: 0; background: none; padding: 0 8px; cursor: pointer; font: 700 var(--sf-size-12) / 1 var(--sf-body); color: var(--sf-ink); }
.sf-hm .sf-hm-schiene button span { display: none; background: var(--sf-hm-glass); border: 1px solid var(--sf-hm-line); padding: 3px 6px; white-space: nowrap; }
.sf-hm .sf-hm-schiene button i { display: block; width: 8px; height: 2px; background: var(--sf-ink); }
.sf-hm .sf-hm-schiene button[aria-current] span { color: var(--sf-hm-weiss); background: var(--sf-hm-akzent); border-color: var(--sf-hm-akzent); }
.sf-hm .sf-hm-kapitelliste { position: relative; margin-top: 0; pointer-events: none; }
.sf-hm .sf-hm-kapitel { min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; padding: 0 16px 16px; }
.sf-hm .sf-hm-karte { pointer-events: auto; width: 100%; max-width: 440px; background: var(--sf-hm-karte); border: 1px solid var(--sf-hm-line); padding: 13px 14px 12px; position: sticky; bottom: 16px; transition: opacity 0.45s ease, transform 0.45s ease; }
.sf-hm .sf-hm-stufe { margin: 0 0 6px; font: 700 var(--sf-size-12) / 1.3 var(--sf-body); letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-hm-akzent); }
.sf-hm .sf-hm-stufe b { font-variant-numeric: tabular-nums; color: var(--sf-ink); margin-right: 6px; }
.sf-hm .sf-hm-karte h1, .sf-hm .sf-hm-karte h2, .sf-hm .sf-hm-kopfzeile h2 { font-family: var(--sf-display); font-weight: var(--sf-heading-weight, 800); text-transform: var(--sf-heading-case, uppercase); line-height: 1; color: var(--sf-ink); margin: 0 0 8px; text-wrap: balance; }
.sf-hm .sf-hm-karte h1 { font-size: calc(clamp(40px, 7vw, 72px) * var(--sf-display-scale, 1)); }
.sf-hm .sf-hm-karte h2 { font-size: calc(clamp(26px, 4vw, 38px) * var(--sf-display-scale, 1)); }
.sf-hm .sf-hm-karte p { margin: 0 0 8px; font-size: var(--sf-size-15); line-height: 1.5; }
.sf-hm .sf-hm-klein { font-size: var(--sf-size-13) !important; color: var(--sf-hm-muted); }
.sf-hm .sf-hm-wege { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sf-hm .sf-hm-wege a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 12px; border: 1px solid var(--sf-ink); color: var(--sf-ink); text-decoration: none; font: 700 var(--sf-size-14) / 1.2 var(--sf-body); }
.sf-hm .sf-hm-wege li:first-child a { background: var(--sf-ink); color: var(--sf-hm-weiss); }
.sf-hm .sf-hm-shop { border-top: 1px solid var(--sf-hm-line); padding-top: 8px; }
.sf-hm .sf-hm-shop-titel { display: flex; justify-content: space-between; margin: 0 0 6px !important; font: 700 var(--sf-size-12) / 1.3 var(--sf-body) !important; color: var(--sf-hm-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.sf-hm .sf-hm-shop ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.sf-hm .sf-hm-shop a { display: inline-flex; align-items: center; gap: 4px; min-height: 36px; padding: 0 10px; background: var(--sf-hm-flaeche); color: var(--sf-ink); text-decoration: none; font: 600 var(--sf-size-13) / 1.2 var(--sf-body); }
.sf-hm .sf-hm-quellen { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; padding: 8px 16px 0; font-size: var(--sf-size-11); color: var(--sf-hm-muted); }
.sf-hm .sf-hm-quellen a { color: inherit; }
.sf-hm .sf-hm-verteiler, .sf-hm .sf-hm-radar, .sf-hm .sf-hm-geschichten, .sf-hm .sf-hm-saisonband { max-width: 1240px; margin: 0 auto; padding: var(--sf-hm-abschnitt) var(--sf-hm-s4) 0; }
.sf-hm .sf-hm-saisonband { padding-bottom: var(--sf-hm-abschnitt); }
.sf-hm .sf-hm-kopfzeile { margin-bottom: 16px; }
.sf-hm .sf-hm-kopfzeile h2 { font-size: calc(clamp(32px, 5vw, 52px) * var(--sf-display-scale, 1)); }
.sf-hm .sf-hm-kopfzeile p { margin: 0; max-width: 62ch; }
.sf-hm .sf-hm-kopfzeile--zeile { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sf-hm-s3); }
.sf-hm .sf-hm-kopfzeile--zeile h2 { font-size: calc(clamp(26px, 3.6vw, 38px) * var(--sf-display-scale, 1)); }
.sf-hm .sf-hm-kopfzeile--zeile a { color: var(--sf-ink); font-weight: 700; white-space: nowrap; }
.sf-hm .sf-hm-augenbraue { margin: 0 0 4px !important; font: 700 var(--sf-size-12) / 1.3 var(--sf-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-hm-akzent); }
.sf-hm .sf-hm-radar-verweis { display: grid; gap: 6px; padding: 22px 18px; border: 1px solid var(--sf-hm-line); background: var(--sf-hm-flaeche); color: var(--sf-hm-text); text-decoration: none; }
.sf-hm .sf-hm-radar-verweis strong { font: var(--sf-heading-weight, 800) calc(30px * var(--sf-display-scale, 1)) / 1 var(--sf-display); text-transform: var(--sf-heading-case, uppercase); color: var(--sf-ink); }
.sf-hm .sf-hm-radar-los { font-weight: 700; color: var(--sf-hm-akzent); }
.sf-hm .sf-hm-saisonband .sf-hm-shop { border-top: 0; padding-top: 0; }
.sf-hm .sf-hm-saisonband .sf-hm-shop-titel { display: none; }
.sf-hm .sf-hm-saisonband .sf-hm-shop a { min-height: 44px; padding: 0 14px; font-size: var(--sf-size-14); }
.sf-hm .sf-hm-verweis a { display: grid; gap: var(--sf-hm-s2); color: var(--sf-ink); font-weight: 700; }
.sf-hm .sf-hm-verweis img { width: 100%; height: auto; display: block; }
@media (min-width: 760px) {
.sf-hm .sf-hm-kapitel { align-items: center; padding: 0 0 0 max(32px, calc((100vw - 1240px) / 2)); }
.sf-hm .sf-hm-karte { position: relative; bottom: auto; padding: 22px 22px 18px; }
.sf-hm .sf-hm-hud { left: 28px; right: 28px; top: 24px; }
.sf-hm .sf-hm-schiene { right: 28px; top: 50svh; height: 44svh; transform: translateY(-38%); }
.sf-hm .sf-hm-schiene button span { display: inline-block; }
.sf-hm .sf-hm-quellen { padding-left: max(32px, calc((100vw - 1240px) / 2)); }
}
@media (prefers-reduced-motion: reduce) {
.sf-hm .sf-hm-karte, .sf-hm .sf-hm-pin, .sf-hm .sf-hm-standbild { transition: none; }
}
.sf-hm .sf-hm-3d { max-width: 1240px; margin: 0 auto; padding: 24px 16px 0; display: grid; gap: var(--sf-hm-s4); }
.sf-hm .sf-hm-3d-bild { display: block; width: 100%; max-width: 100%; height: auto; }
.sf-hm .sf-hm-3d-text h1 { font-family: var(--sf-display); font-weight: var(--sf-heading-weight, 800); text-transform: var(--sf-heading-case, uppercase); font-size: calc(clamp(40px, 7vw, 72px) * var(--sf-display-scale, 1)); line-height: 1; color: var(--sf-ink); margin: 0 0 8px; }
.sf-hm .sf-hm-3d-text p { margin: 0 0 10px; max-width: 62ch; }
.sf-hm .sf-hm-stufen { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--sf-hm-line); }
.sf-hm .sf-hm-stufen li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 2px 12px; padding: 10px 0; border-bottom: 1px solid var(--sf-hm-line); align-items: baseline; }
.sf-hm .sf-hm-stufen b { grid-row: span 2; font-variant-numeric: tabular-nums; color: var(--sf-hm-akzent); }
.sf-hm .sf-hm-stufen span { color: var(--sf-ink); font-weight: 700; min-width: 0; }
.sf-hm .sf-hm-stufen a { color: var(--sf-ink); font-size: var(--sf-size-14); }
@media (min-width: 760px) {
.sf-hm .sf-hm-3d { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: start; }
.sf-hm .sf-hm-3d-bild { grid-column: 1 / -1; }
}
.sf-hm .sf-hm-stufen-wege { display: flex; flex-wrap: wrap; gap: 4px 14px; font-weight: 400; }
.sf-hm .sf-hm-passend a small { font-size: var(--sf-size-11); text-transform: uppercase; letter-spacing: 0.04em; color: var(--sf-hm-akzent); font-weight: 700; }
.sf-hm .sf-hm-passend a { max-width: 100%; }
@media (max-width: 759px) {
.sf-hm .sf-hm-passend li:nth-child(n + 3) { display: none; }
}
.sf-hm .sf-hm-kopf { position: relative; display: grid; gap: 0; }
.sf-hm .sf-hm-kopf-buehne { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 72vh; min-height: 72svh; overflow: hidden; background: var(--sf-hm-nacht); }
.sf-hm .sf-hm-kopf-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.sf-hm .sf-hm-kopf:not([data-foto]) .sf-hm-kopf-bild { object-position: 50% 70%; filter: contrast(1.35) saturate(1.2) brightness(0.88); }
.sf-hm .sf-hm-kopf-buehne::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, var(--sf-hm-kopf-schatten-0) 0%, var(--sf-hm-verlauf-0) 30%, var(--sf-hm-kopf-schatten-1) 60%, var(--sf-hm-kopf-schatten-2) 100% ); }
.sf-hm .sf-hm-kopf-text { position: relative; z-index: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: var(--sf-hm-s7) var(--sf-hm-s4) var(--sf-hm-s6); display: flex; flex-direction: column; align-items: flex-start; gap: var(--sf-hm-s2); color: var(--sf-hm-weiss); }
.sf-hm .sf-hm-kopf-text .sf-presented-ad { justify-content: flex-start; margin: 0; }
.sf-hm .sf-hm-kopf-messer { margin: 0; font: 700 var(--sf-size-13) / 1.3 var(--sf-body); letter-spacing: 0.06em; text-transform: uppercase; }
.sf-hm .sf-hm-kopf-messer b { font-variant-numeric: tabular-nums; }
.sf-hm .sf-hm-kopf h1 { margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight, 800); text-transform: var(--sf-heading-case, uppercase); font-size: calc(clamp(46px, 9vw, 104px) * var(--sf-display-scale, 1)); line-height: 0.92; color: var(--sf-hm-weiss); text-wrap: balance; }
.sf-hm .sf-hm-kopf-unter { margin: 0; max-width: 34ch; font: 500 var(--sf-size-17) / 1.35 var(--sf-body); }
.sf-hm .sf-hm-kopf-live { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: var(--sf-hm-s2); width: 100%; max-width: 640px; margin: var(--sf-hm-s2) 0 0; padding: 0; list-style: none; }
.sf-hm .sf-hm-kopf-live a { display: flex; flex-direction: column; gap: var(--sf-hm-s1); height: 100%; padding: var(--sf-hm-s2) var(--sf-hm-s3); border: 1px solid var(--sf-hm-kopf-glas-rand); background: var(--sf-hm-kopf-glas); backdrop-filter: blur(8px); color: var(--sf-hm-weiss); text-decoration: none; font: 600 var(--sf-size-11) / 1.25 var(--sf-body); }
.sf-hm .sf-hm-kopf-live a:hover { background: var(--sf-hm-kopf-glas-hover); }
.sf-hm .sf-hm-kopf-live b { font-family: var(--sf-display); font-weight: 800; font-size: calc(24px * var(--sf-display-scale, 1)); line-height: 1; overflow-wrap: anywhere; }
.sf-hm .sf-hm-kopf-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); margin-top: var(--sf-hm-s2); }
.sf-hm .sf-hm-kopf-knoepfe .sf-hb-knopf.sf-hb-knopf { padding: 0 var(--sf-hm-s4); }
.sf-hm .sf-hm-flug-start .sf-hb-knopf.sf-hb-knopf { border-color: var(--sf-hm-weiss); background: transparent; color: var(--sf-hm-weiss); }
.sf-hm .sf-hm-3d-nachweis { font-size: var(--sf-size-11); color: var(--sf-hm-muted); }
.sf-hm .sf-hm-flug { position: relative; overflow: clip; }
.sf-hm .sf-hm-flug-steuer { position: absolute; left: 16px; top: 112px; display: flex; gap: 6px; z-index: 2; }
.sf-hm .sf-hm-flug-steuer button { min-height: 40px; padding: 0 12px; border: 1px solid var(--sf-hm-line); background: var(--sf-hm-glass); color: var(--sf-ink); font: 700 var(--sf-size-13) / 1 var(--sf-body); cursor: pointer; }
.sf-hm .sf-hm-bedienfeld { display: contents; }
@media (max-width: 759px) {
.sf-hm .sf-hm-bedienfeld { --sf-hm-zahl: calc(24px * var(--sf-display-scale, 1)); position: absolute; top: 0; left: 0; right: 0; display: grid; gap: 4px; padding: 8px 12px; background: var(--sf-surface); border-bottom: 1px solid var(--sf-hm-line); }
.sf-hm .sf-hm-hud, .sf-hm .sf-hm-flug-steuer { position: static; }
.sf-hm .sf-hm-hud { align-items: center; }
.sf-hm .sf-hm-messer, .sf-hm .sf-hm-saison { border: 0; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; padding: 0; }
.sf-hm .sf-hm-messer-ort { font-size: var(--sf-size-11); max-width: 16ch; }
.sf-hm .sf-hm-messer-gewinn { display: none; }
.sf-hm .sf-hm-saison { max-width: 180px; }
.sf-hm .sf-hm-darstellung { padding: 3px 0 0; }
.sf-hm .sf-hm-flug-steuer { justify-content: space-between; }
.sf-hm .sf-hm-flug-steuer button { min-height: 32px; background: var(--sf-surface); }
.sf-hm .sf-hm-flug-steuer button[aria-label="Flug schließen"] { min-width: 40px; }
}
.sf-hm .sf-hm-kapitel-still { display: none; }
.sf-hm .sf-hm-flug--still .sf-hm-buehne, .sf-hm .sf-hm-flug--still .sf-hm-steuer-buehne { display: none; }
.sf-hm .sf-hm-flug--still .sf-hm-kapitelliste { margin-top: 0; }
.sf-hm .sf-hm-flug--still .sf-hm-kapitel { min-height: 0; display: block; padding: 16px; }
.sf-hm .sf-hm-flug--still .sf-hm-kapitel-still { display: block; width: 100%; max-width: 1240px; height: auto; margin: 0 auto 12px; }
.sf-hm .sf-hm-flug--still .sf-hm-karte { position: static; max-width: 1240px; margin: 0 auto; }
.sf-hm .sf-hm-verteiler { padding-top: var(--sf-hm-s5); }
.sf-hm .sf-hm-verteiler, .sf-hm .sf-hm-geschichten, .sf-hm .sf-hm-saisonband, .sf-hm .sf-hm-finder { display: grid; gap: var(--sf-hm-kopf-abstand); }
.sf-hm .sf-hm-einstieg { display: flex; flex-direction: column; min-width: 0; height: 100%; }
.sf-hm .sf-hm-einstieg > .sf-hb-karte { flex: 1 1 auto; }
.sf-hm .sf-hm-einstieg[data-sf-unter] { border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-white); }
.sf-hm .sf-hm-einstieg[data-sf-unter]:hover { border-color: var(--sf-ink); }
.sf-hm .sf-hm-einstieg[data-sf-unter] > .sf-hb-karte.sf-hb-karte { border: 0; }
.sf-hm .sf-hm-einstieg-unter { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); margin: 0; padding: 0 var(--sf-hm-s4) var(--sf-hm-s4); }
.sf-hm .sf-hm-einstieg-unter a { padding: 4px 10px; border: 1px solid var(--sf-line); border-radius: 999px; font: 700 var(--sf-hb-mini) / 1.3 var(--sf-body); color: var(--sf-hm-akzent); text-decoration: none; }
.sf-hm .sf-hm-einstieg-unter a:hover { border-color: var(--sf-hm-akzent); }
.sf-hm .sf-hm-einstieg-unter a::after { content: " →"; }
.sf-hm .sf-hm-produktbild.sf-hm-produktbild { background: var(--sf-white); }
.sf-hm .sf-hm-produktbild.sf-hm-produktbild img { box-sizing: border-box; padding: var(--sf-hm-s3); object-fit: contain; }
.sf-hm .sf-hm-jetzt { display: grid; gap: var(--sf-hm-s5); }
.sf-hm .sf-hm-jetzt-live { display: grid; gap: var(--sf-hm-s4); align-items: start; }
.sf-hm .sf-hm-jetzt-ausruestung { display: grid; gap: var(--sf-hm-kopf-abstand); }
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-list { --sf-shop-accent: var(--sf-hm-akzent); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s3); }
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-card:nth-child(n + 7), .sf-hm .sf-hm-jetzt-ausruestung .sf-shop-list:has(.sf-hm-jetzt-partner > *) .sf-shop-card:nth-child(6), .sf-hm .sf-hm-jetzt-ausruestung .sf-hm-jetzt-partner:empty { display: none; }
.sf-hm .sf-hm-jetzt-partner { display: flex; min-width: 0; }
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-card figure { aspect-ratio: 4 / 3; }
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-card figure img { padding: 6%; }
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-card-body { padding: var(--sf-hm-s3); }
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-card small { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-card-cta { align-self: flex-start; margin-top: auto; padding: var(--sf-hm-s2) var(--sf-hm-s3); border: 1px solid var(--sf-shop-accent); border-radius: 999px; }
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-card > a:hover .sf-shop-card-cta { background: var(--sf-shop-accent); color: var(--sf-hm-weiss); }
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-card-price { margin-top: auto; }
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-card-price + .sf-shop-card-cta { margin-top: var(--sf-hm-s2); }
@media (min-width: 760px) {
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sf-hm-s4); }
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-card:nth-child(n + 7) { display: block; }
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-list:has(.sf-hm-jetzt-partner > *) .sf-shop-card:nth-child(6) { display: block; }
.sf-hm .sf-hm-jetzt-ausruestung .sf-shop-list:has(.sf-hm-jetzt-partner > *) .sf-shop-card:nth-child(8) { display: none; }
}
@media (min-width: 1000px) {
.sf-hm .sf-hm-jetzt-live { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
}
.sf-hm .sf-hm-partnerkarte { display: flex; min-width: 0; }
.sf-hm .sf-hm-partnerkarte > .sf-hb-karte { flex: 1 1 auto; }
.sf-hm .sf-hm-partnerkarte-logo { display: grid; place-items: center; aspect-ratio: var(--sf-hb-bild); padding: var(--sf-hm-s4); background: var(--sf-surface); }
.sf-hm .sf-hm-partnerkarte-logo img { max-width: 60%; max-height: 56px; object-fit: contain; }
.sf-hm .sf-hm-finder { max-width: 1240px; margin: 0 auto; padding: var(--sf-hm-abschnitt) var(--sf-hm-s4) 0; justify-items: start; }
.sf-hm .sf-hm-hell .sf-hb-live, .sf-hm .sf-hm-hell .sf-hb-live-quelle { color: var(--sf-hm-weiss); font-weight: 600; }
.sf-hm .sf-hm-kapitelreihe { max-width: 1240px; margin: 0 auto; padding: var(--sf-hm-abschnitt) var(--sf-hm-s4) 0; }
.sf-hm .sf-hm-kapitelreihe > p { margin: 0 0 12px; max-width: 62ch; }
.sf-hm .sf-hm-kapitelreihe ol:not(.sf-hm-stufen) { list-style: none; margin: 0; padding: 0 0 6px; display: flex; gap: var(--sf-hm-s3); overflow-x: auto; scroll-snap-type: x mandatory; }
.sf-hm .sf-hm-kapitelreihe li { flex: 0 0 58%; scroll-snap-align: start; }
.sf-hm .sf-hm-kapitelreihe .sf-hm-stufen li { flex: none; }
.sf-hm .sf-hm-kapitelreihe li a { display: grid; gap: 2px; color: var(--sf-ink); text-decoration: none; }
.sf-hm .sf-hm-kapitelreihe li img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; margin-bottom: 4px; }
.sf-hm .sf-hm-kapitelreihe li b { color: var(--sf-hm-akzent); font-variant-numeric: tabular-nums; }
.sf-hm .sf-hm-kapitelreihe li small { color: var(--sf-hm-muted); }
.sf-hm .sf-hm-club { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--sf-hm-line); }
.sf-hm .sf-hm-club small { font-size: var(--sf-size-11); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sf-hm-akzent); }
.sf-hm .sf-hm-club a { font-weight: 700; color: var(--sf-ink); }
@media (min-width: 760px) {
.sf-hm .sf-hm-kopf-buehne { min-height: 66vh; min-height: 66svh; }
.sf-hm .sf-hm-kopf-text { padding: var(--sf-hm-s7) var(--sf-hm-s6) var(--sf-hm-s7); gap: var(--sf-hm-s3); }
.sf-hm .sf-hm-kopf-unter { font-size: var(--sf-size-20); }
.sf-hm .sf-hm-kopf-live { gap: var(--sf-hm-s3); }
.sf-hm .sf-hm-kopf-live a { padding: var(--sf-hm-s3) var(--sf-hm-s4); font-size: var(--sf-size-13); }
.sf-hm .sf-hm-kopf-live b { font-size: calc(36px * var(--sf-display-scale, 1)); }
.sf-hm .sf-hm-kopf-knoepfe .sf-hb-knopf.sf-hb-knopf { padding: 0 var(--sf-hm-s5); }
.sf-hm .sf-hm-flug-steuer { left: 28px; top: 140px; }
.sf-hm .sf-hm-kapitelreihe ol:not(.sf-hm-stufen) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: visible; }
}
@media (min-width: 760px) {
.sf-hm .sf-hm-einstiege .sf-hb-karten--wischen { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow: visible; }
.sf-hm .sf-hm-geschichten .sf-hb-karten--wischen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.sf-hm .sf-hm-geschichten .sf-hb-karten--wischen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
.sf-hm .sf-hm-verteiler.sf-hm-verteiler .sf-hb-karten--wischen { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.sf-hm .sf-hm-verteiler.sf-hm-verteiler .sf-hb-karten--wischen > :nth-child(-n + 3) { grid-column: span 4; }
.sf-hm .sf-hm-verteiler.sf-hm-verteiler .sf-hb-karten--wischen > :nth-child(n + 4) { grid-column: span 3; }
}
.sf-hm .sf-hm-quellen--bild { position: absolute; top: 0; right: 0; z-index: 1; max-width: 100%; padding: var(--sf-hm-s1) var(--sf-hm-s2); background: var(--sf-hm-verlauf-1); color: var(--sf-hm-weiss); font-size: var(--sf-hb-mini); line-height: 1.3; gap: 0 var(--sf-hm-s2); justify-content: flex-end; }
.sf-hm .sf-hm-quellen--bild a { color: inherit; }
.sf-hm .sf-hm-kopf[data-foto] .sf-hm-quellen--bild { top: auto; bottom: 0; background: transparent; opacity: 0.85; }
.sf-hm .sf-hm-alpenflug { max-width: 1240px; margin: 0 auto; padding: var(--sf-hm-abschnitt) var(--sf-hm-s4) 0; }
.sf-hm .sf-hm-heute-band { max-width: 1240px; margin: 0 auto; padding: var(--sf-hm-abschnitt) var(--sf-hm-s4) 0; }
.sf-hm-schnee.sf-hm-schnee { --sf-hm-akzent: var(--sf-section-accent, var(--sf-travel)); --sf-hm-muted: var(--sf-muted, #656565); display: grid; gap: var(--sf-hm-kopf-abstand, var(--sf-hm-s4)); min-width: 0; }
.sf-hm .sf-hm-schnee { max-width: 1240px; margin: 0 auto; padding: var(--sf-hm-abschnitt) var(--sf-hm-s4) 0; }
.sf-hm-schnee .sf-hm-schnee-auswahl { display: flex; flex-wrap: nowrap; align-items: center; gap: var(--sf-hm-s2); min-width: 0; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.sf-hm-schnee .sf-hm-schnee-auswahl .sf-hb-auswahl.sf-hb-auswahl { flex: 0 0 auto; flex-wrap: nowrap; max-width: none; border-color: var(--sf-line); background: var(--sf-white); }
.sf-hm-schnee .sf-hm-schnee-auswahl .sf-hb-wahl.sf-hb-wahl { min-height: 38px; padding: 0 14px; }
.sf-hm-schnee .sf-hm-schnee-auswahl .sf-hb-wahl.sf-hb-wahl + .sf-hb-wahl { border-left: 1px solid var(--sf-line); }
.sf-hm-schnee .sf-hb-karten.sf-hb-karten--wischen { align-items: stretch; }
.sf-hm-schnee .sf-hm-schnee-gebiet { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-white); overflow: hidden; }
.sf-hm-schnee .sf-hm-schnee-gebiet:hover { border-color: var(--sf-ink); }
.sf-hm-schnee .sf-hm-schnee-gebiet > .sf-hb-karte.sf-hb-karte { flex: 1 1 auto; border: 0; border-radius: 0; }
.sf-hm-schnee .sf-hm-schnee-gebiet[data-sf-alt] .sf-hb-karte-live { color: var(--sf-hm-muted); }
.sf-hm-schnee .sf-hm-schnee-wege { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--sf-line); }
.sf-hm-schnee .sf-hm-schnee-wege a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 0 var(--sf-hm-s3); font: 700 var(--sf-hb-text-klein) / 1.2 var(--sf-body); color: var(--sf-ink); text-decoration: none; white-space: nowrap; }
.sf-hm-schnee .sf-hm-schnee-wege a:first-child { color: var(--sf-hm-akzent); }
.sf-hm-schnee .sf-hm-schnee-wege a:first-child::after { content: " →"; }
.sf-hm-schnee .sf-hm-schnee-wege a + a { border-left: 1px solid var(--sf-line); }
.sf-hm-schnee .sf-hm-schnee-wege a:hover { background: var(--sf-paper, var(--sf-hm-farbe-f5f5f3)); }
.sf-hm-schnee .sf-hm-schnee-wege svg { flex: none; width: 18px; height: 18px; }
.sf-hm-schnee .sf-hm-schnee-fuss:empty { display: none; }
.sf-hm-schnee .sf-hm-schnee-radar, .sf-hm-jetzt .sf-hm-schnee-radar { display: grid; gap: var(--sf-hm-s3); }
.sf-hm-schnee .sf-hm-ausblick, .sf-hm-jetzt .sf-hm-ausblick { display: grid; gap: var(--sf-hm-s3); padding: var(--sf-hm-s4); border: 1px solid var(--sf-line); border-radius: var(--sf-hb-ecke); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-hm-schnee .sf-hm-ausblick:hover, .sf-hm-jetzt .sf-hm-ausblick:hover { border-color: var(--sf-ink); }
.sf-hm-schnee .sf-hm-ausblick:focus-visible, .sf-hm-jetzt .sf-hm-ausblick:focus-visible { outline: 2px solid var(--sf-hm-akzent); outline-offset: 2px; }
.sf-hm-schnee .sf-hm-ausblick-kopf, .sf-hm-jetzt .sf-hm-ausblick-kopf { display: grid; gap: var(--sf-hm-s1); }
.sf-hm-schnee .sf-hm-ausblick-kopf strong, .sf-hm-jetzt .sf-hm-ausblick-kopf strong { display: flex; align-items: center; gap: var(--sf-hm-s2); font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-size-18); font-weight: var(--sf-hb-titel-gewicht, 700); line-height: 1.25; }
.sf-hm-schnee .sf-hm-ausblick-kopf > span, .sf-hm-jetzt .sf-hm-ausblick-kopf > span { font-family: var(--sf-body); font-size: var(--sf-hb-fein); line-height: 1.4; color: var(--sf-hm-muted); }
.sf-hm-schnee .sf-hm-ausblick-liste, .sf-hm-jetzt .sf-hm-ausblick-liste { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sf-hm-schnee .sf-hm-ausblick-liste li, .sf-hm-jetzt .sf-hm-ausblick-liste li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: var(--sf-hm-s1) var(--sf-hm-s2); font-family: var(--sf-body); font-size: var(--sf-hb-text-klein); line-height: 1.3; }
.sf-hm-schnee .sf-hm-ausblick-liste b, .sf-hm-jetzt .sf-hm-ausblick-liste b { font-weight: 700; font-variant-numeric: tabular-nums; }
.sf-hm-schnee .sf-hm-ausblick-nr, .sf-hm-jetzt .sf-hm-ausblick-nr { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--sf-ink); font-size: var(--sf-hb-mini); font-weight: 700; color: var(--sf-white); }
.sf-hm-schnee .sf-hm-ausblick-balken, .sf-hm-jetzt .sf-hm-ausblick-balken { grid-column: 2 / 4; height: 6px; background: var(--sf-hm-farbe-eef1f4); }
.sf-hm-schnee .sf-hm-ausblick-balken > span, .sf-hm-jetzt .sf-hm-ausblick-balken > span { display: block; width: var(--sf-anteil); height: 100%; background: var(--sf-hm-farbe-5b8fc7); }
@media (min-width: 760px) {
.sf-hm-schnee .sf-hb-karten.sf-hb-karten--wischen { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); overflow: visible; }
.sf-hm-schnee .sf-hm-ausblick { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr) auto; align-items: center; column-gap: var(--sf-hm-s6, 32px); padding: 20px var(--sf-hm-s5); }
.sf-hm-schnee .sf-hm-ausblick-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sf-hm-s5); }
}
@media (min-width: 760px) {
.sf-hm .sf-hm-verteiler .sf-hb-karten--wischen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-hm .sf-hm-verteiler .sf-hb-karten--wischen > :first-child { grid-column: span 2; }
}
/* berge-reisen.css */
.sf-br.sf-br { container: sf-br / inline-size; --sf-br-akzent: var(--sf-section-accent, var(--sf-travel)); --sf-br-radar-titel: clamp(38px, 4.2cqi, 50px); --sf-br-kachel-titel: clamp(24px, 2.2cqi, 28px); --sf-br-kachel-titel-klein: 20px; --sf-br-karte-titel: clamp(22px, 2cqi, 24px); }
.sf-br .sf-br-inhalt { display: grid; gap: var(--sf-hm-abschnitt); padding-block: var(--sf-hm-s7); }
.sf-br .sf-br-abschnitt { display: grid; gap: var(--sf-hm-s5); min-width: 0; }
.sf-br .sf-br-kapitel { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-br-akzent); }
.sf-br .sf-br-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h2); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; text-transform: none; overflow-wrap: normal; color: var(--sf-ink); }
.sf-br .sf-hb-bildkopf.sf-hb-bildkopf { margin: 0; }
.sf-br .sf-hb-knopf.sf-hb-knopf[href^="#"]::after { content: "↓"; }
@container sf-br (min-width: 761px) {
.sf-br .sf-hb-bildkopf-buehne.sf-hb-bildkopf-buehne::after { background: linear-gradient(90deg, var(--sf-hb-schleier-mitte) 0%, var(--sf-hb-schleier-null) 60%), linear-gradient( to bottom, var(--sf-hb-schleier-leicht) 0%, var(--sf-hb-schleier-null) 30%, var(--sf-hb-schleier-mitte) 60%, var(--sf-hb-schleier-tief) 100% ); }
}
.sf-br .sf-br-radar { padding-top: var(--sf-hm-s6); color: var(--sf-hb-hell-text); }
.sf-br .sf-br-radar-innen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); background: var(--sf-ink); }
.sf-br .sf-br-radar-text { display: grid; align-content: center; gap: var(--sf-hm-s3); padding: var(--sf-hm-s6); }
.sf-br .sf-br-radar-text .sf-br-kapitel { color: color-mix(in srgb, var(--sf-br-akzent) 45%, var(--sf-white)); }
.sf-br .sf-br-radar-text h2 { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-size: var(--sf-br-radar-titel); font-weight: var(--sf-hb-titel-gewicht); line-height: 0.98; text-transform: uppercase; overflow-wrap: normal; color: var(--sf-white); }
.sf-br .sf-br-radar-text .sf-br-radar-satz { margin: 0; max-width: 40ch; font-size: var(--sf-size-18); line-height: 1.45; color: var(--sf-white); }
.sf-br .sf-br-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); margin-top: var(--sf-hm-s2); }
.sf-br .sf-br-zweit .sf-hb-knopf.sf-hb-knopf { border-color: var(--sf-white); background: transparent; color: var(--sf-white); }
.sf-br .sf-br-radar-bild { position: relative; min-height: 360px; margin: 0; overflow: hidden; background: var(--sf-hb-buehne-grund); }
.sf-br .sf-br-radar-bild > img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; object-position: 50% 62%; }
.sf-br .sf-br-radar-bild figcaption { position: absolute; left: var(--sf-hm-s3); bottom: var(--sf-hm-s2); padding: 2px 6px; background: var(--sf-white); font-size: var(--sf-size-12); color: var(--sf-ink); }
.sf-br .sf-br-radar-bild--wetter { align-self: center; min-height: 0; }
.sf-br .sf-br-radar-ruhig { position: relative; }
.sf-br .sf-br-radar-ruhig .sf-rb-standbild { border: 0; border-radius: 0; }
.sf-br .sf-br-radar-plakette { position: absolute; top: var(--sf-hm-s2); right: var(--sf-hm-s2); padding: 2px 6px; background: var(--sf-white); font-size: var(--sf-size-12); color: var(--sf-ink); }
.sf-br .sf-br-radar-bild--wetter .sr-wurzel { margin: 0; }
.sf-br .sf-br-radar-bild--wetter .sr-wurzel .sr-chips, .sf-br .sf-br-radar-bild--wetter .sr-wurzel .sr-leiste { display: none; }
.sf-br .sf-br-radar-bild--wetter .sr-wurzel .sr-buehne { height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: 0; }
@container sf-br (max-width: 760px) {
.sf-br .sf-br-radar-bild--wetter .sr-wurzel .sr-buehne { height: 340px; aspect-ratio: auto; }
}
.sf-br .sf-br-wand { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sf-hm-s3); }
.sf-br .sf-br-wand[data-sf-anzahl="5"] .sf-br-kachel:last-child { grid-column: 1 / -1; aspect-ratio: 32 / 7; }
.sf-br .sf-br-kachel { position: relative; display: grid; align-content: end; gap: 2px; aspect-ratio: 4 / 5; padding: var(--sf-hm-s4); overflow: hidden; background: var(--sf-hb-buehne-grund); color: var(--sf-white); text-decoration: none; }
.sf-br .sf-br-kachel img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sf-br .sf-br-kachel:hover img { transform: scale(1.04); }
.sf-br .sf-br-kachel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--sf-hb-schleier-unten) 0%, transparent 58%); }
.sf-br .sf-br-kachel b, .sf-br .sf-br-kachel span { position: relative; z-index: 1; }
.sf-br .sf-br-kachel b { overflow-wrap: break-word; hyphens: auto; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-br-kachel-titel); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; text-transform: uppercase; }
.sf-br .sf-br-kachel span { font-size: var(--sf-size-15); line-height: 1.35; }
.sf-br .sf-br-kachel small { position: absolute; z-index: 1; top: var(--sf-hm-s2); right: var(--sf-hm-s2); left: var(--sf-hm-s2); font-size: var(--sf-size-10); line-height: 1.2; text-align: right; color: var(--sf-hb-hell-text); text-shadow: 0 1px 4px var(--sf-hb-schleier-unten); }
.sf-br .sf-br-kachel--quer { aspect-ratio: 4 / 3; }
.sf-br .sf-br-erleben, .sf-br .sf-br-ideen, .sf-br .sf-br-wandern { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sf-hm-s4); }
.sf-br .sf-br-karte { display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--sf-line); color: var(--sf-text); text-decoration: none; }
.sf-br .sf-br-karte[hidden] { display: none; }
.sf-br .sf-br-karte:hover { border-color: var(--sf-ink); }
.sf-br .sf-br-karte figure { position: relative; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; background: var(--sf-hb-buehne-grund); }
.sf-br .sf-br-erlebnis figure { aspect-ratio: 16 / 10; }
.sf-br .sf-br-karte figure img { width: 100%; max-width: none; height: 100%; object-fit: cover; }
.sf-br .sf-br-karte figure em { position: absolute; top: var(--sf-hm-s2); left: var(--sf-hm-s2); padding: 4px 8px; background: var(--sf-ink); font-size: var(--sf-size-12); font-style: normal; font-weight: 700; line-height: 1.2; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-white); }
.sf-br .sf-br-karte figure small { position: absolute; right: var(--sf-hm-s2); bottom: var(--sf-hm-s1); left: var(--sf-hm-s2); font-size: var(--sf-size-10); line-height: 1.2; text-align: right; color: var(--sf-hb-hell-text); text-shadow: 0 1px 4px var(--sf-hb-schleier-unten); }
.sf-br .sf-br-karte-text { display: grid; align-content: start; gap: var(--sf-hm-s2); padding: var(--sf-hm-s4); }
.sf-br .sf-br-karte-text .sf-br-kapitel { font-size: var(--sf-hb-mini); }
.sf-br .sf-br-karte-text b { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-br-karte-titel); font-weight: var(--sf-hb-titel-gewicht); line-height: 1.05; text-wrap: balance; color: var(--sf-ink); }
.sf-br .sf-br-karte-text span { font-size: var(--sf-size-15); line-height: 1.4; }
.sf-br .sf-br-karte-text .sf-br-los { font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-br-akzent); }
.sf-br .sf-br-karte-text .sf-br-los::after { content: " →"; }
.sf-br .sf-br-ausruestung { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--sf-travel-tint); }
.sf-br .sf-br-ausruestung figure { position: relative; min-height: 300px; margin: 0; overflow: hidden; background: var(--sf-hb-buehne-grund); }
.sf-br .sf-br-ausruestung figure img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.sf-br .sf-br-ausruestung figure small { position: absolute; right: var(--sf-hm-s2); bottom: var(--sf-hm-s1); font-size: var(--sf-size-11); color: var(--sf-hb-hell-text); text-shadow: 0 1px 4px var(--sf-hb-schleier-unten); }
.sf-br .sf-br-ausruestung-text { display: grid; align-content: center; gap: var(--sf-hm-s3); padding: var(--sf-hm-s6); }
.sf-br .sf-br-ausruestung ul { display: grid; margin: 0; padding: 0; list-style: none; }
.sf-br .sf-br-ausruestung li { margin: 0; }
.sf-br .sf-br-ausruestung li a { display: flex; justify-content: space-between; gap: var(--sf-hm-s3); padding: var(--sf-hm-s3) 0; border-bottom: 1px solid color-mix(in srgb, var(--sf-br-akzent) 25%, transparent); font-weight: 700; color: var(--sf-ink); text-decoration: none; }
.sf-br .sf-br-ausruestung li a::after { content: "↗"; color: var(--sf-br-akzent); }
.sf-br .sf-br-ausruestung li small { display: block; font-size: var(--sf-size-14); font-weight: 400; color: var(--sf-text); }
.sf-br .sf-br-startraum { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); background: var(--sf-hb-buehne-grund); color: var(--sf-hb-hell-text); }
.sf-br .sf-br-startraum figure { position: relative; min-height: 300px; margin: 0; overflow: hidden; }
.sf-br .sf-br-startraum figure img { position: absolute; inset: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; }
.sf-br .sf-br-startraum figure small { position: absolute; right: var(--sf-hm-s2); bottom: var(--sf-hm-s1); font-size: var(--sf-size-11); color: var(--sf-hb-hell-text); text-shadow: 0 1px 4px var(--sf-hb-schleier-unten); }
.sf-br .sf-br-startraum-text { display: grid; align-content: center; gap: var(--sf-hm-s3); padding: var(--sf-hm-s6); }
.sf-br .sf-br-startraum-text .sf-br-titel { color: var(--sf-hb-hell-text); }
.sf-br .sf-br-startraum-text p { margin: 0; }
@container sf-br (max-width: 980px) {
.sf-br .sf-br-erleben, .sf-br .sf-br-ideen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sf-br (max-width: 900px) {
.sf-br .sf-br-wand, .sf-br .sf-br-wandern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-br .sf-br-wand[data-sf-anzahl="5"] .sf-br-kachel:last-child { aspect-ratio: 16 / 9; }
}
@container sf-br (max-width: 760px) {
.sf-br .sf-br-radar-innen, .sf-br .sf-br-ausruestung, .sf-br .sf-br-startraum { grid-template-columns: minmax(0, 1fr); }
.sf-br .sf-br-startraum-text { padding: var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-br .sf-br-radar-text { padding: var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-br .sf-br-radar-bild { min-height: 300px; }
.sf-br .sf-br-ausruestung-text { padding: var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-br .sf-br-inhalt { padding-block: var(--sf-hm-s6); }
}
@container sf-br (max-width: 560px) {
.sf-br .sf-br-erleben, .sf-br .sf-br-ideen { grid-template-columns: minmax(0, 1fr); }
.sf-br .sf-br-kachel { aspect-ratio: 3 / 4; padding: var(--sf-hm-s3); }
.sf-br .sf-br-kachel b { font-size: var(--sf-br-kachel-titel-klein); }
.sf-br .sf-br-kachel span { font-size: var(--sf-size-13); }
.sf-br .sf-br-kachel small { font-size: var(--sf-size-9); }
.sf-br .sf-br-kachel--quer { aspect-ratio: 4 / 3; }
}
@media (prefers-reduced-motion: reduce) {
.sf-br .sf-br-kachel img { transition: none; }
}
.sf-dynamik .sf-br-finden { padding-top: var(--sf-hm-s5); }
.sf-dynamik .sf-br-finden .sf-rl-finden { margin-bottom: 0; }
/* hub.css */
.sf-hub-blocks > div:has(> [data-block-type="toc"]), .sf-hub-blocks > div:has(> [data-block-type="hero"]:empty) { display: none; }
.sf-hub-blocks > div { margin-block: 24px; }
.sf-hub-blocks [data-block-type="heading"] { scroll-margin-top: 150px; }
.sf-hub-blocks h2:empty { display: none; }
.sf-hub-blocks h3 { font-size: calc(clamp(22px, 2.2vw, 30px) * var(--sf-display-scale)); line-height: 1.2; }
.sf-hub-blocks p { margin: 0.65em 0; }
.sf-hub-blocks li > p { margin: 0.2em 0; }
.sf-hub-blocks a { overflow-wrap: anywhere; }
.sf-dynamik .sf-hub-link { display: inline-block; color: var(--sf-area-color, var(--sf-blue-bright)); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.sf-dynamik .sf-block-cta .sf-hub-link { color: inherit; }
.sf-dynamik .sf-hub-textlink { color: var(--sf-area-color, var(--sf-blue-bright)); text-decoration: underline; text-underline-offset: 4px; }
.sf-dynamik .sf-block-cta .sf-hub-textlink { color: inherit; }
.sf-hub-blocks img { max-width: 100%; height: auto; }
.sf-hub-blocks video, .sf-hub-blocks audio { width: 100%; }
.sf-hub-media iframe { width: 100%; height: 480px; border: 1px solid var(--sf-neutral-190); }
.sf-hub-media summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
.sf-hub-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sf-hub-gallery figure { margin: 0; }
.sf-hub-gallery--scroll { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.sf-hub-gallery--scroll figure { flex: 0 0 68%; scroll-snap-align: start; }
.sf-hub-unavailable, .sf-hub-audio { padding: 20px 24px; border-left: 4px solid var(--sf-area-color, var(--sf-blue-bright)); background: var(--sf-tint-blue-40); }
.sf-hub-unavailable p { font-size: var(--sf-size-15); line-height: 1.5; }
.sf-hub-unavailable .sf-hub-link { font-size: var(--sf-size-14); }
.sf-hub-checklist { padding-left: 0; list-style: none; }
.sf-hub-checklist li { border-bottom: 1px solid var(--sf-neutral-190); padding: 12px 0; }
.sf-hub-checklist label { display: flex; align-items: baseline; gap: 12px; cursor: pointer; }
.sf-hub-checklist input { width: 18px; height: 18px; }
.sf-hub-divider { margin: 16px 0; border: 0; border-top: 1px solid var(--sf-neutral-190); }
.sf-hub-status { font-size: var(--sf-size-13); padding-block: 8px; color: var(--sf-neutral-650); }
.sf-hub-entry { display: flex; flex-wrap: wrap; gap: 8px 24px; border-bottom: 1px solid var(--sf-neutral-190); padding: 12px 0; font-size: var(--sf-size-14); }
.sf-hub-text--small { font-size: var(--sf-size-14); }
.sf-hub-text--lead { font-size: 1.12em; }
@media (max-width: 640px) {
.sf-hub-gallery { grid-template-columns: 1fr; }
.sf-hub-gallery--scroll figure { flex-basis: 86%; }
.sf-hub-media iframe { height: 360px; }
}
.sf-hub-blocks .sf-hub-picture { width: 100%; aspect-ratio: 3 / 2; object-fit: contain; background: var(--sf-tint-green-40); }
.sf-hub-blocks .sf-hub-video { aspect-ratio: 16 / 9; display: block; }
@media (orientation: portrait) and (max-width: 767px) {
.sf-hub-blocks .sf-hub-video[data-portrait] { aspect-ratio: 9 / 16; width: min(100%, calc(82svh * 9 / 16)); margin-inline: auto; }
}
.sf-hub-blocks .sf-essentials li { align-items: baseline; }
.sf-hub-blocks .sf-essentials li > div p { margin: 0; }
.sf-hub-blocks .sf-essentials li > div p + p { margin-top: 6px; }
.sf-hub-stats h2 { font-size: calc(clamp(22px, 2.2vw, 28px) * var(--sf-display-scale)); }
.sf-hub-stats dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 14px 0 0; }
.sf-hub-stats dl > div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 18px 18px 16px; border-top: 3px solid var(--sf-area-color, var(--sf-blue)); background: var(--sf-surface); }
.sf-hub-stats dd { margin: 0; font: var(--sf-heading-weight) calc(40px * var(--sf-display-scale)) / 1 var(--sf-display); color: var(--sf-ink); letter-spacing: -0.01em; }
.sf-hub-stats dd small { font: 700 var(--sf-size-14) / 1 var(--sf-body); color: var(--sf-muted); }
.sf-hub-stats dt { font-size: var(--sf-size-13); line-height: 1.45; color: var(--sf-text); }
.sf-hub-steps { list-style: none; padding: 0; margin: 8px 0 0; counter-reset: none; }
.sf-hub-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 20px; padding: 18px 0; border-top: 1px solid var(--sf-line); }
.sf-hub-steps li:last-child { border-bottom: 1px solid var(--sf-line); }
.sf-hub-steps li > span { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; background: var(--sf-area-color, var(--sf-blue)); color: var(--sf-white); font: var(--sf-heading-weight) calc(20px * var(--sf-display-scale)) / 1 var(--sf-display); }
.sf-hub-blocks .sf-hub-steps h3 { font: 700 var(--sf-size-17) / 1.4 var(--sf-body); margin: 10px 0 4px; }
.sf-hub-steps li > div p { margin: 0; font-size: var(--sf-size-16); }
.sf-hub-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 22px; }
.sf-hub-fit > div { padding: 18px 20px; border-top: 3px solid var(--sf-line); background: var(--sf-surface); }
.sf-hub-fit--yes { border-top-color: var(--sf-area-color, var(--sf-blue)) !important; }
.sf-hub-fit--no { border-top-color: var(--sf-neutral-650) !important; }
.sf-hub-blocks .sf-hub-fit h3 { font: 700 var(--sf-size-14) / 1.4 var(--sf-body); letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 8px; color: var(--sf-ink); }
.sf-hub-fit p { margin: 0; font-size: var(--sf-size-15); }
.sf-hub-alternatives { margin: 18px 0 0; padding-left: 20px; }
.sf-hub-checklist li { padding: 14px 0; }
.sf-hub-checklist label, .sf-hub-checklist > li > strong { font-weight: 700; font-size: var(--sf-size-16); }
.sf-hub-checklist input { flex: 0 0 auto; accent-color: var(--sf-area-color, var(--sf-blue)); transform: translateY(2px); }
.sf-hub-hint { padding-left: 30px; color: var(--sf-muted); font-size: var(--sf-size-14); }
.sf-hub-hint p { margin: 4px 0 0; }
.sf-hub-badge { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 999px; background: var(--sf-area-color, var(--sf-blue)); color: var(--sf-white); font: 700 var(--sf-size-11) / 1.2 var(--sf-body); letter-spacing: 0.04em; vertical-align: middle; white-space: nowrap; }
.sf-hub-callout > strong { display: block; font-size: var(--sf-size-15); margin-bottom: 2px; }
.sf-hub-blocks .sf-disclosure h2 { font-size: calc(clamp(20px, 2vw, 24px) * var(--sf-display-scale)); margin-bottom: 4px; }
.sf-hub-blocks .sf-disclosure ul { padding-left: 18px; margin: 8px 0 0; }
.sf-hub-blocks .sf-disclosure li { margin: 4px 0; }
.sf-hub-quellen { border-top: 1px solid var(--sf-line); padding-top: 12px; font-size: var(--sf-size-14); line-height: 1.6; color: var(--sf-muted); }
.sf-hub-quellen summary { cursor: pointer; font-weight: 600; width: fit-content; }
.sf-hub-quellen summary span { font-weight: 400; }
.sf-hub-quellen ul { padding-left: 18px; margin: 8px 0 0; }
.sf-hub-quellen li { margin: 4px 0; }
.sf-hub-blocks .sf-block-cta .sf-hub-link { display: inline-block; margin-top: 8px; padding: 12px 20px; background: var(--sf-white); color: var(--sf-blue); text-decoration: none; font-weight: 700; }
@media (max-width: 640px) {
.sf-hub-fit { grid-template-columns: 1fr; }
.sf-hub-stats dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-hub-stats dd { font-size: calc(32px * var(--sf-display-scale)); }
}
.sf-hub-table { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 14px; }
.sf-hub-table table { width: 100%; border-collapse: collapse; font-size: var(--sf-size-15); line-height: 1.5; }
.sf-hub-table caption { text-align: left; font-size: var(--sf-size-13); color: var(--sf-muted); padding-bottom: 8px; }
.sf-hub-table thead th { text-align: left; vertical-align: bottom; padding: 0 16px 12px; border-bottom: 2px solid var(--sf-ink); font: 700 var(--sf-size-14) / 1.3 var(--sf-body); color: var(--sf-ink); white-space: nowrap; }
.sf-hub-table thead th:first-child { padding-left: 0; color: var(--sf-muted); font-weight: 600; }
.sf-hub-table thead th > span { display: block; }
.sf-hub-table thead .sf-hub-badge { margin: 6px 0 0; font-style: normal; }
.sf-hub-table tbody th, .sf-hub-table tbody td { text-align: left; vertical-align: top; padding: 14px 16px; border-bottom: 1px solid var(--sf-line); }
.sf-hub-table tbody th { padding-left: 0; width: 26%; font-weight: 600; color: var(--sf-ink); }
.sf-hub-table tbody td { color: var(--sf-text); }
.sf-hub-table p { margin: 0 !important; }
.sf-hub-table [data-highlight] { background: var(--sf-tint-blue-40); }
.sf-hub-table tbody td[data-highlight] { color: var(--sf-ink); }
@media (max-width: 700px) {
.sf-hub-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.sf-hub-table table, .sf-hub-table tbody, .sf-hub-table tr, .sf-hub-table tbody th, .sf-hub-table tbody td { display: block; width: 100%; }
.sf-hub-table tr { padding: 14px 0; border-bottom: 1px solid var(--sf-line); }
.sf-hub-table tbody th { padding: 0 0 6px; border: 0; width: 100%; }
.sf-hub-table tbody td { display: grid; grid-template-columns: minmax(110px, 40%) minmax(0, 1fr); gap: 12px; padding: 6px 10px; border: 0; }
.sf-hub-table tbody td::before { content: attr(data-label); font-size: var(--sf-size-13); color: var(--sf-muted); }
}
.sf-hub-callout a { display: inline-flex; align-items: center; gap: 8px; margin: 10px 12px 0 0; padding: 10px 18px; border-radius: 999px; background: var(--sf-area-color, var(--sf-blue)); color: var(--sf-white) !important; font-weight: 700; font-size: var(--sf-size-14); text-decoration: none; }
.sf-hub-callout a::after { content: "→"; }
.sf-hub-callout p + p a + a, .sf-hub-callout a + a { background: transparent; color: var(--sf-ink) !important; border: 1px solid var(--sf-ink); }
.sf-hub-products-title { font: 700 var(--sf-size-13) / 1.3 var(--sf-body) !important; letter-spacing: 0.14em !important; text-transform: uppercase; color: var(--sf-muted); margin: 0 0 12px; }
.sf-article[data-look="nordic"] { --sf-area-color: var(--sf-neutral-950); --sf-blue: var(--sf-neutral-950); --sf-blue-bright: var(--sf-neutral-950); --sf-tint-blue-40: var(--sf-tint-sand-20); --sf-surface: var(--sf-tint-sand-20); }
.sf-article[data-look="nordic"] .sf-article-heading h1, .sf-article[data-look="nordic"] .sf-article-blocks h2, .sf-article[data-look="nordic"] .sf-essentials h2, .sf-article[data-look="nordic"] .sf-hub-stats h2 { font-family: var(--sf-body) !important; font-weight: 600 !important; letter-spacing: -0.03em !important; text-transform: none !important; }
.sf-article[data-look="nordic"] .sf-article-blocks h2 { font-size: calc(clamp(26px, 2.6vw, 36px) * var(--sf-display-scale)) !important; line-height: 1.1; }
.sf-article[data-look="nordic"] .sf-essentials { border-top: 1px solid var(--sf-neutral-950); }
.sf-article[data-look="nordic"] .sf-essentials li > span, .sf-article[data-look="nordic"] .sf-decision li > span { font-family: var(--sf-body); font-weight: 600; letter-spacing: -0.04em; }
.sf-article[data-look="nordic"] .sf-disclosure, .sf-article[data-look="nordic"] .sf-hub-audio, .sf-article[data-look="nordic"] .sf-hub-unavailable { border-left: 0; border-radius: 6px; background: var(--sf-tint-sand-20); }
.sf-article[data-look="nordic"] .sf-hub-stats dl > div { border-top: 1px solid var(--sf-neutral-950); background: transparent; padding-inline: 0; }
.sf-article[data-look="nordic"] .sf-hub-stats dd { font-family: var(--sf-body); font-weight: 600; letter-spacing: -0.04em; font-size: calc(48px * var(--sf-display-scale)); }
.sf-article[data-look="nordic"] .sf-block-cta { border-radius: 6px; background: var(--sf-neutral-950); }
.sf-article[data-look="nordic"] .sf-block-cta .sf-hub-link { border-radius: 999px; }
.sf-article[data-look="nordic"] .sf-block-image img, .sf-article[data-look="nordic"] .sf-hub-picture { border-radius: 6px; }
.sf-article[data-look="nordic"] .sf-hub-picture { background: var(--sf-tint-sand-20); }
.sf-article[data-look="nordic"] .sf-hub-table thead th { border-bottom-width: 1px; }
.sf-article[data-look="nordic"] .sf-hub-fit > div { border-radius: 6px; }
.sf-article[data-look="nordic"] .sf-hub-fit--no { border-top-color: var(--sf-neutral-190) !important; }
.sf-hub-products figure img { mix-blend-mode: multiply; }
.sf-hub-products[data-columns="2"] ul { max-width: 67%; }
.sf-article[data-look="nordic"] .sf-hub-blocks .sf-hub-picture { mix-blend-mode: multiply; }
@media (max-width: 640px) {
.sf-hub-products[data-columns="2"] ul { max-width: none; }
}
.sf-shop-products { margin-block: 32px; }
.sf-shop-products > h2 { margin-bottom: 14px; }
.sf-hub-product-brand { font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-shop-products figure { background: var(--sf-white); border: 1px solid var(--sf-line); }
.sf-shop-products figure em { background: var(--sf-ink); color: var(--sf-white); }
.sf-shop-products-note { margin: 14px 0 6px; font-size: var(--sf-size-12); color: var(--sf-muted); }
@media (min-width: 640px) {
.sf-hub-blocks > div:has(> [data-align]) { margin-block: 0; }
.sf-hub-blocks [data-align] { width: 45%; max-width: 360px; min-width: 200px; margin: 8px 0 16px; }
.sf-hub-blocks [data-align="right"] { float: right; margin-left: 28px; }
.sf-hub-blocks [data-align="left"] { float: left; margin-right: 28px; }
.sf-hub-blocks [data-align] .sf-block-image { margin: 0; }
.sf-hub-blocks [data-align] .sf-hub-picture { aspect-ratio: auto; object-fit: cover; background: none; }
.sf-hub-blocks [data-size="large"] .sf-block-image { max-width: 80%; }
.sf-hub-blocks [data-size="medium"] .sf-block-image { max-width: 60%; }
.sf-hub-blocks [data-size="small"] .sf-block-image { max-width: 40%; }
.sf-hub-blocks > div:not(:has(> :is([data-block-type="richtext"], [data-block-type="heading"], [data-align]))), .sf-hub-blocks > div:has(> [data-block-type="heading"] h2) { clear: both; }
.sf-hub-blocks::after { content: ""; display: block; clear: both; }
}
.sf-hub-blocks .sf-tester-quote { margin: 0; padding: 24px 28px; background: var(--sf-surface); border-left: 4px solid var(--sf-area-color, var(--sf-blue)); }
.sf-hub-blocks .sf-tester-quote blockquote { margin: 0; font-size: var(--sf-size-19); line-height: 1.55; font-style: italic; font-weight: 500; }
.sf-hub-blocks .sf-tester-quote blockquote p { margin: 0; }
.sf-hub-blocks .sf-tester-quote figcaption { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; margin-top: 14px; font-size: var(--sf-size-13); color: var(--sf-muted); }
.sf-hub-blocks .sf-tester-quote figcaption strong { color: var(--sf-text); }
.sf-hub-blocks > div:has(> [data-block-type="expert_quote"]) + div:has(> [data-block-type="expert_quote"]) { margin-top: -8px; }
.sf-dynamik .sf-hub-video { margin: 0; }
.sf-dynamik .sf-hub-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; background: var(--sf-ink); }
.sf-tc-headline { margin: 0 0 16px; }
.sf-tc-scroll { margin: 0 -2px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x mandatory; }
.sf-tc-scroll:focus-visible { outline: 2px solid var(--sf-area-color, var(--sf-blue)); outline-offset: 2px; }
.sf-hub-blocks .sf-tc-list { display: grid; grid-template-columns: repeat(var(--sf-tc-cols, 3), minmax(0, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.sf-tc--2 { --sf-tc-cols: 2; }
.sf-tc--4 { --sf-tc-cols: 4; }
.sf-hub-blocks .sf-tc-card { box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 18px 18px 20px; border: 1px solid var(--sf-line); border-top: 3px solid var(--sf-area-color, var(--sf-blue)); background: var(--sf-white); box-shadow: var(--sf-tc-card-shadow); scroll-snap-align: start; }
.sf-hub-blocks .sf-tc-title { display: flex; flex-direction: column; gap: 2px; margin: 0; font-size: calc(22px * var(--sf-display-scale)); line-height: 1.1; }
.sf-hub-blocks .sf-tc-range { font: 700 var(--sf-size-14) / 1.3 var(--sf-body); letter-spacing: 0; text-transform: none; color: var(--sf-muted); }
.sf-tc-media { display: flex; align-items: center; justify-content: center; height: 180px; }
.sf-hub-blocks .sf-tc-image { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sf-hub-blocks .sf-tc-text { margin: 0; font-size: var(--sf-size-15); line-height: 1.55; color: var(--sf-text); }
.sf-hub-blocks .sf-tc-points { display: flex; flex-direction: column; gap: 9px; margin: 0; padding: 0; list-style: none; }
.sf-hub-blocks .sf-tc-point { position: relative; min-height: 22px; margin: 0; padding: 1px 0 0 32px; font-size: var(--sf-size-15); line-height: 1.45; color: var(--sf-ink); }
.sf-tc-mark { position: absolute; top: 0; left: 0; width: 22px; height: 22px; }
.sf-tc-mark circle { fill: var(--sf-tc-plus); }
.sf-tc-mark--con circle { fill: var(--sf-tc-minus); }
.sf-tc-mark path { fill: none; stroke: var(--sf-tc-mark-ink); stroke-width: 2.2; stroke-linecap: round; }
.sf-tc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sf-dynamik .sf-tc-link { margin-top: auto; }
@media (max-width: 900px) {
.sf-tc--4 .sf-tc-list { grid-auto-columns: minmax(240px, 42%); grid-auto-flow: column; grid-template-columns: none; }
}
@media (max-width: 640px) {
.sf-hub-blocks .sf-tc-list { grid-auto-columns: minmax(240px, 82%); grid-auto-flow: column; grid-template-columns: none; gap: 12px; }
}
.sf-dynamik .sf-article:not([data-look="nordic"]) { --sf-blue: var(--sf-section-accent, var(--sf-ink)); }
.sf-dynamik .sf-article:not([data-look="nordic"]) .sf-block-cta { padding: var(--sf-hm-s5); background: var(--sf-white); color: var(--sf-ink); border: 1px solid var(--sf-line); border-top: 4px solid var(--sf-section-accent, var(--sf-ink)); }
.sf-dynamik .sf-article:not([data-look="nordic"]) .sf-block-cta h2 { color: var(--sf-ink) !important; }
.sf-dynamik .sf-article:not([data-look="nordic"]) .sf-block-cta .sf-eyebrow { color: var(--sf-section-accent, var(--sf-ink)) !important; }
.sf-dynamik .sf-article:not([data-look="nordic"]) .sf-block-cta .sf-hub-link { min-height: var(--sf-hb-knopf-hoehe); padding: var(--sf-hm-s3) var(--sf-hm-s5); background: var(--sf-section-accent, var(--sf-ink)); color: var(--sf-white); font-size: var(--sf-hb-steuer-schrift); }
/* kooperation.css */
.sf-kooperation.sf-kooperation { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: 0; font-family: var(--sf-body); font-size: var(--sf-size-14); font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--sf-muted); }
.sf-kooperation.sf-kooperation::before { content: ""; flex: 0 0 auto; width: 20px; height: 1px; background: currentColor; opacity: 0.6; }
.sf-kooperation-label.sf-kooperation-label { font: inherit; letter-spacing: 0; text-transform: none; }
.sf-kooperation-marke.sf-kooperation-marke { font-weight: 700; color: var(--sf-ink); }
.sf-kooperation-logo.sf-kooperation-logo { display: block; width: auto; max-width: 96px; height: 20px; object-fit: contain; }
.sf-kooperation--hell.sf-kooperation--hell, .sf-kooperation--hell.sf-kooperation--hell .sf-kooperation-marke { color: var(--sf-white); }
.sf-article-titleblock > .sf-kooperation.sf-kooperation { margin-top: 14px; }
/* article-layout.css */
.sf-dynamik .sf-article { --sf-article-gap: 28px; --sf-article-title: clamp(36px, 3.6vw, 56px); --sf-article-body: 17px; --sf-article-leading: 1.7; }
.sf-dynamik[data-density="compact"] .sf-article { --sf-article-gap: 23px; --sf-article-title: clamp(34px, 3.2vw, 50px); }
.sf-dynamik[data-density="dense"] .sf-article { --sf-article-gap: 18px; --sf-article-title: clamp(32px, 2.8vw, 44px); --sf-article-body: 16px; }
.sf-dynamik .sf-article-open { display: block; padding: 4px 0 0; }
.sf-dynamik .sf-article .sf-article-open .sf-article-heading { display: block; max-width: none; padding: 0; margin: 0 0 18px; }
.sf-dynamik .sf-article-open .sf-eyebrow { font-size: var(--sf-size-11); margin: 0 0 10px; }
.sf-dynamik .sf-article-open .sf-eyebrow .sf-eyebrow-zurueck { color: inherit; text-decoration: none; }
.sf-dynamik .sf-article-open .sf-eyebrow .sf-eyebrow-zurueck:hover, .sf-dynamik .sf-article-open .sf-eyebrow .sf-eyebrow-zurueck:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.sf-dynamik .sf-article .sf-article-open .sf-article-heading h1 { font-size: var(--sf-article-title); line-height: 1.08; max-width: 1100px; letter-spacing: -0.01em; margin: 0; text-wrap: balance; text-align: left; overflow-wrap: anywhere; }
.sf-dynamik .sf-article-open .sf-article-meta { display: flex; align-items: center; justify-content: space-between; max-width: none; margin: 14px 0 0; padding: 0; gap: 12px; border: 0; }
.sf-dynamik .sf-article-open .sf-author-monogram { display: none; }
.sf-dynamik .sf-article-open .sf-article-meta > div > div { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sf-dynamik .sf-article-open .sf-article-meta strong, .sf-dynamik .sf-article-open .sf-article-meta div > span:not(.sf-author-monogram) { font-size: var(--sf-size-12); margin: 0; }
.sf-dynamik .sf-article-open .sf-article-figure { margin: 0; display: block; }
.sf-dynamik .sf-article-open .sf-article-figure > img, .sf-dynamik .sf-article-open .sf-article-figure > .sf-image-placeholder { width: 100%; height: auto; aspect-ratio: 2.5; max-height: 480px; min-height: 0; object-fit: cover; }
.sf-dynamik .sf-article-open figcaption { font-size: var(--sf-size-10); margin-top: 6px; }
.sf-dynamik .sf-article-open .sf-article-intro { font-size: var(--sf-size-19); line-height: 1.6; max-width: var(--sf-reading); margin: 20px 0 0 !important; color: var(--sf-text); }
.sf-dynamik .sf-article .sf-reading-layout { margin-top: var(--sf-article-gap); gap: clamp(24px, 4vw, 56px); justify-content: start; }
.sf-dynamik .sf-article .sf-reading-section { margin-top: var(--sf-article-gap); }
.sf-dynamik .sf-article .sf-reading-section h2, .sf-dynamik .sf-article .sf-article-blocks h2 { font-size: calc(clamp(26px, 2.6vw, 34px) * var(--sf-display-scale)); line-height: 1.12; margin-bottom: 12px; }
.sf-dynamik .sf-article .sf-reading-section p, .sf-dynamik .sf-article .sf-article-blocks { font-size: var(--sf-article-body); line-height: var(--sf-article-leading); }
.sf-dynamik .sf-article .sf-reading-section p, .sf-dynamik .sf-article .sf-block-richtext p { margin-bottom: 14px; }
.sf-dynamik .sf-article .sf-article-blocks > h2 { margin-top: var(--sf-article-gap); }
.sf-dynamik .sf-article .sf-article-blocks > h2:first-child { margin-top: 0; }
.sf-dynamik .sf-article .sf-article-blocks > section, .sf-dynamik .sf-article .sf-article-blocks > aside { margin-block: var(--sf-article-gap); }
.sf-dynamik .sf-article .sf-essentials { padding: 16px 0; }
.sf-dynamik .sf-article .sf-essentials h2 { font-size: calc(28px * var(--sf-display-scale)); }
.sf-dynamik .sf-article .sf-essentials ol { margin-top: 12px; }
.sf-dynamik .sf-article .sf-essentials li { margin-bottom: 10px; gap: 12px; }
.sf-dynamik .sf-article .sf-essentials li:last-child { margin-bottom: 0; }
.sf-dynamik .sf-article .sf-contents { padding-top: 16px; }
.sf-dynamik .sf-article .sf-contents ol { margin-top: 10px; }
.sf-dynamik .sf-article .sf-contents button, .sf-dynamik .sf-article .sf-contents .sf-contents-link { padding: 9px 0; }
@media (max-width: 800px) {
.sf-dynamik .sf-article .sf-article-open .sf-article-heading h1 { font-size: calc(clamp(30px, 5.3vw, 42px) * var(--sf-display-scale)); text-wrap: initial; }
.sf-dynamik .sf-article .sf-article-open .sf-article-heading { margin-bottom: 14px; }
.sf-dynamik .sf-article-open .sf-article-meta { margin-top: 12px; }
.sf-dynamik .sf-article-open .sf-article-meta > div > div { gap: 4px 10px; }
.sf-dynamik .sf-article-open .sf-article-meta strong, .sf-dynamik .sf-article-open .sf-article-meta div > span:not(.sf-author-monogram) { font-size: var(--sf-size-11); }
.sf-dynamik .sf-article-open .sf-article-figure > img, .sf-dynamik .sf-article-open .sf-article-figure > .sf-image-placeholder { aspect-ratio: 1.6; max-height: 360px; }
.sf-dynamik .sf-article-open .sf-article-intro { font-size: var(--sf-size-17); margin-top: 16px !important; }
}
@media (min-width: 1001px) {
.sf-dynamik .sf-article { max-width: 1180px; margin-inline: auto; }
.sf-dynamik .sf-article .sf-reading-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 64px; justify-content: stretch; }
.sf-dynamik .sf-article-open .sf-article-intro { max-width: none; padding-right: 364px; }
.sf-dynamik .sf-article .sf-contents { max-height: calc(100vh - 56px); overflow-y: auto; scrollbar-width: thin; }
}
.sf-dynamik .sf-article-rail { margin-top: 20px; display: grid; gap: 18px; }
.sf-dynamik .sf-rail-products { border-top: 1px solid var(--sf-line); padding-top: 16px; }
.sf-dynamik .sf-rail-products ul { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.sf-dynamik .sf-rail-products li > :is(a, div) { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; color: inherit; text-decoration: none; }
.sf-dynamik .sf-rail-products img, .sf-dynamik .sf-rail-products li span[aria-hidden] { width: 64px; height: 64px; object-fit: contain; background: var(--sf-white); border: 1px solid var(--sf-line); }
.sf-dynamik .sf-rail-products li span:not([aria-hidden]) { display: grid; gap: 2px; min-width: 0; }
.sf-dynamik .sf-rail-products small { font-size: var(--sf-size-11); color: var(--sf-muted); }
.sf-dynamik .sf-rail-products strong { font-size: var(--sf-size-13); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-dynamik .sf-rail-products a:hover strong { color: var(--sf-blue); }
.sf-dynamik .sf-rail-products em { font-style: normal; font-weight: 700; font-size: var(--sf-size-13); color: var(--sf-ink); }
.sf-dynamik .sf-rail-products s { margin-left: 6px; font-weight: 400; color: var(--sf-muted); }
.sf-dynamik .sf-rail-more { display: inline-block; margin-top: 12px; font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-blue); }
.sf-dynamik .sf-rail-share { justify-self: start; border: 1px solid var(--sf-line); background: none; padding: 8px 14px; font-size: var(--sf-size-13); font-weight: 700; cursor: pointer; }
.sf-dynamik .sf-rail-share:hover { border-color: var(--sf-blue); color: var(--sf-blue); }
@media (max-width: 1000px) {
.sf-dynamik .sf-article-rail { display: none; }
}
.sf-dynamik .sf-read-on { border-top: 1px solid var(--sf-line); }
/* markenstory.css */
.sf-dynamik .sf-article:has(.sf-ms) .sf-reading-layout { grid-template-columns: minmax(0, 1fr); }
.sf-dynamik .sf-article:has(.sf-ms) .sf-contents { display: none; }
.sf-dynamik .sf-article:has(.sf-ms) .sf-article-open .sf-article-intro { padding-right: 0; max-width: 760px; }
.sf-dynamik .sf-article:has(.sf-ms) .sf-article-blocks > div { max-width: 816px; }
.sf-dynamik .sf-article:has(.sf-ms) .sf-article-blocks > div:has([data-block-type="markenstory"]) { max-width: none; }
.sf-dynamik .sf-article:has(.sf-ms) .sf-reading-end { max-width: 816px; }
.sf-ms { container: sf-ms / inline-size; margin-block: 48px; color: var(--sf-ms-tinte); font-family: var(--sf-body); }
.sf-ms .sf-ms-kopf { display: grid; gap: 10px; max-width: 760px; margin-bottom: 28px; }
.sf-ms .sf-ms-kooperation { margin: 0; font-size: var(--sf-size-13); color: var(--sf-ms-leise); }
.sf-ms .sf-ms-kicker { margin: 0; font-family: var(--sf-display); font-size: var(--sf-size-14); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-ms-akzent); }
.sf-ms .sf-ms-kopf .sf-ms-titel.sf-ms-titel { margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); text-transform: var(--sf-heading-case); font-size: var(--sf-ms-fs-titel); line-height: 0.92; letter-spacing: -0.01em; color: var(--sf-ms-tinte); text-wrap: balance; }
.sf-ms .sf-ms-vorspann { margin: 0; font-size: var(--sf-size-19); line-height: 1.55; color: var(--sf-text); max-width: 62ch; }
.sf-ms .sf-ms-fakten { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: var(--sf-size-15); line-height: 1.45; }
.sf-ms .sf-ms-fakten li { position: relative; padding-left: 18px; }
.sf-ms .sf-ms-fakten li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 8px; height: 2px; background: var(--sf-ms-akzent); }
.sf-ms .sf-ms-shoplink { display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 44px; padding: 10px 16px; background: var(--sf-ms-tinte); color: var(--sf-ms-buehne-text); font-family: var(--sf-display); font-weight: 700; font-size: var(--sf-size-15); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: background-color 0.2s; }
.sf-ms .sf-ms-shoplink:hover, .sf-ms .sf-ms-shoplink:focus-visible { background: var(--sf-ms-akzent); color: var(--sf-ms-buehne-text); }
.sf-ms .sf-ms-pfeil { transition: transform 0.2s; }
.sf-ms .sf-ms-shoplink:hover .sf-ms-pfeil { transform: translateX(4px); }
.sf-ms .sf-ms-quelle { margin: 0; font-size: var(--sf-size-12); color: var(--sf-ms-leise); }
.sf-ms .sf-ms-quelle a { color: inherit; }
.sf-ms .sf-ms-hinweis { margin: 20px 0 0; font-size: var(--sf-size-13); color: var(--sf-ms-leise); max-width: 70ch; }
.sf-ms .sf-ms-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.sf-ms .sf-ms-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sf-ms figure { margin: 0; }
.sf-ms figcaption { font-size: var(--sf-size-11); color: var(--sf-ms-leise); }
.sf-ms .sf-ms-a-buehne { display: grid; gap: 0; }
.sf-ms .sf-ms-a-stationen { margin: 0; padding: 0; list-style: none; display: grid; gap: 56px; }
.sf-ms .sf-ms-a-station { display: grid; gap: 18px; scroll-margin-top: 140px; }
.sf-ms .sf-ms-a-bild { position: relative; overflow: hidden; background: var(--sf-ms-buehne); }
.sf-ms .sf-ms-a-bild img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.8s; }
.sf-ms .sf-ms-a-bild figcaption { position: absolute; right: 10px; bottom: 8px; color: var(--sf-ms-buehne-leise); }
.sf-ms.sf-ms-a-mitleiste .sf-ms-a-station:not(.sf-ms-a-station-aktiv) .sf-ms-a-bild img { filter: saturate(0.6) brightness(0.86); }
.sf-ms.sf-ms-a-mitleiste .sf-ms-a-station-aktiv .sf-ms-a-bild img { transform: scale(1.03); }
.sf-ms .sf-ms-a-text { display: grid; gap: 12px; align-content: start; max-width: 640px; }
.sf-ms .sf-ms-a-ort { margin: 0; font-size: var(--sf-size-14); color: var(--sf-ms-leise); }
.sf-ms .sf-ms-a-zeit { font-family: var(--sf-display); font-weight: 700; font-size: var(--sf-size-16); color: var(--sf-ms-akzent); margin-right: 4px; }
.sf-ms .sf-ms-a-titel { margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); text-transform: var(--sf-heading-case); font-size: var(--sf-ms-fs-station); line-height: 1; color: var(--sf-ms-tinte); }
.sf-ms .sf-ms-a-absatz { margin: 0; font-size: var(--sf-size-17); line-height: 1.6; color: var(--sf-text); }
.sf-ms .sf-ms-a-traegt { display: grid; gap: 6px; }
.sf-ms .sf-ms-a-traegt-titel { margin: 0; font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-ms-leise); }
.sf-ms .sf-ms-a-traegt ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.sf-ms .sf-ms-a-traegt li { padding: 5px 10px 5px 8px; border-left: 5px solid var(--sf-ms-ton-1); background: var(--sf-surface); font-size: var(--sf-size-14); font-weight: 700; }
.sf-ms .sf-ms-a-traegt li span { font-weight: 400; color: var(--sf-ms-leise); }
.sf-ms .sf-ms-a-traegt li.sf-ms-a-traegt-neu { background: var(--sf-ms-gold-hell); }
.sf-ms.sf-ms-a-mitleiste .sf-ms-a-traegt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sf-ms .sf-ms-a-leiste { position: sticky; top: var(--sf-kopf-klebt, 0px); z-index: 3; margin-bottom: 22px; padding: 10px 14px 12px; background: var(--sf-ms-buehne); color: var(--sf-ms-buehne-text); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; }
.sf-ms .sf-ms-a-leiste-kopf { display: contents; }
.sf-ms .sf-ms-a-hoehe { margin: 0; grid-row: 1 / span 2; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); font-size: var(--sf-ms-fs-hoehe); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-ms .sf-ms-a-wann { margin: 0; font-size: var(--sf-size-13); font-weight: 700; }
.sf-ms .sf-ms-a-wetter { margin: 0; font-size: var(--sf-size-13); color: var(--sf-ms-buehne-leise); }
.sf-ms .sf-ms-a-profil { display: none; }
.sf-ms .sf-ms-a-stapel { grid-column: 1 / -1; margin: 6px 0 0; padding: 0; list-style: none; display: flex; flex-direction: row; flex-wrap: wrap; gap: 4px; }
.sf-ms .sf-ms-a-schicht { display: none; padding: 3px 8px; border-left: 4px solid var(--sf-ms-ton-1); background: var(--sf-ms-buehne-flaeche); font-size: var(--sf-size-12); font-weight: 700; transition: opacity 0.35s, transform 0.35s, background-color 0.35s; }
.sf-ms .sf-ms-a-schicht-an { display: block; }
.sf-ms .sf-ms-a-schicht-rolle { display: none; }
.sf-ms .sf-ms-a-schicht-neu { background: var(--sf-ms-gold-hell); box-shadow: inset 0 0 0 1px var(--sf-ms-gold); }
.sf-ms .sf-ms-a-haut, .sf-ms .sf-ms-a-zaehler { display: none; }
@container sf-ms (min-width: 860px) {
.sf-ms .sf-ms-a-buehne { grid-template-columns: minmax(260px, 0.82fr) minmax(0, 2fr); gap: 44px; align-items: start; }
.sf-ms .sf-ms-a-leiste { top: calc(var(--sf-kopf-klebt, 0px) + 20px); margin: 0; padding: 24px; min-height: min(78vh, 680px); grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto; gap: 14px; align-items: stretch; }
.sf-ms .sf-ms-a-leiste-kopf { display: grid; gap: 6px; }
.sf-ms .sf-ms-a-hoehe { grid-row: auto; }
.sf-ms .sf-ms-a-wann { font-size: var(--sf-size-14); }
.sf-ms .sf-ms-a-wetter { font-size: var(--sf-size-14); }
.sf-ms .sf-ms-a-profil { display: block; width: 100%; height: 64px; overflow: visible; }
.sf-ms .sf-ms-a-stapel { flex-direction: column; flex-wrap: nowrap; justify-content: flex-end; gap: 6px; margin: 0; align-self: end; }
.sf-ms .sf-ms-a-schicht { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 10px 12px; border-left-width: 6px; font-size: var(--sf-size-15); opacity: 0.28; transform: translateX(-8px); }
.sf-ms .sf-ms-a-schicht-an { opacity: 1; transform: none; background: var(--sf-ms-buehne-2); }
.sf-ms .sf-ms-a-schicht-rolle { display: inline; font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-ms-buehne-leise); }
.sf-ms .sf-ms-a-schicht-neu { background: var(--sf-ms-gold-hell); }
.sf-ms .sf-ms-a-haut { display: block; margin: 0; padding-top: 8px; border-top: 1px dashed var(--sf-ms-buehne-linie); font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-ms-buehne-leise); }
.sf-ms .sf-ms-a-zaehler { display: block; margin: 0; font-size: var(--sf-size-12); color: var(--sf-ms-buehne-leise); }
.sf-ms .sf-ms-a-stationen { gap: 96px; }
.sf-ms .sf-ms-a-station { min-height: 70vh; align-content: start; }
}
.sf-ms .sf-ms-a-profil-flaeche { fill: var(--sf-ms-buehne-flaeche); }
.sf-ms .sf-ms-a-profil-linie { fill: none; stroke: var(--sf-ms-buehne-leise); stroke-width: 1.5; }
.sf-ms .sf-ms-a-profil-punkt { fill: var(--sf-ms-buehne-leise); transition: r 0.3s; }
.sf-ms .sf-ms-a-profil-punkt-aktiv { fill: var(--sf-ms-gold); }
.sf-ms .sf-ms-a-schluss { margin-top: 56px; padding: 28px; background: var(--sf-ms-papier); display: grid; gap: 12px; }
.sf-ms .sf-ms-b-raster { display: grid; gap: 0; background: var(--sf-ms-papier); }
.sf-ms .sf-ms-b-buehne { position: relative; overflow: hidden; min-height: 420px; background: var(--sf-ms-buehne); color: var(--sf-ms-buehne-text); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: 20px; gap: 12px; }
.sf-ms .sf-ms-b-grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; filter: grayscale(0.4) blur(1px); }
.sf-ms .sf-ms-b-buehne-titel { position: relative; margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); text-transform: var(--sf-heading-case); font-size: var(--sf-ms-fs-buehne); line-height: 1; }
.sf-ms .sf-ms-b-buehne-titel span { display: block; margin-top: 6px; font-size: var(--sf-size-13); letter-spacing: 0.14em; color: var(--sf-ms-gold); }
.sf-ms .sf-ms-b-raum { position: relative; display: grid; place-items: center; perspective: 1100px; min-height: 300px; --sf-ms-spreiz: 64; }
.sf-ms .sf-ms-b-schweben { transform-style: preserve-3d; animation: sf-ms-b-schweben 7s ease-in-out infinite; }
@keyframes sf-ms-b-schweben { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.sf-ms .sf-ms-b-stapel { position: relative; width: min(300px, 62cqi); aspect-ratio: 1; transform-style: preserve-3d; transform: rotateX(calc(58deg + var(--sf-ms-kipp-x, 0) * 1deg)) rotateZ(calc(-38deg + var(--sf-ms-kipp-y, 0) * 1deg)); transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sf-ms .sf-ms-b-lage { position: absolute; inset: 0; transform: translateZ(calc(var(--sf-ms-i) * var(--sf-ms-spreiz) * 1.1px)); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), outline-color 0.3s, box-shadow 0.3s; outline: 3px solid transparent; outline-offset: 4px; cursor: pointer; }
.sf-ms .sf-ms-b-lage[data-sf-ms-lage="innen"] { background: repeating-linear-gradient(0deg, var(--sf-ms-innen-naht) 0 1px, transparent 1px 18px), var(--sf-ms-innen); }
.sf-ms .sf-ms-b-raum[data-sf-ms-innen="isoliert"] .sf-ms-b-lage[data-sf-ms-lage="innen"] { background: repeating-linear-gradient(0deg, var(--sf-ms-innen-naht) 0 2px, transparent 2px 30px), radial-gradient(ellipse at 50% 50%, var(--sf-ms-gewebe) 0 40%, transparent 70%), var(--sf-ms-ton-3); }
.sf-ms .sf-ms-b-lage[data-sf-ms-lage="membran"] { background: radial-gradient(circle, var(--sf-ms-membran-pore) 0 1.2px, transparent 1.6px) 0 0 / 11px 11px, var(--sf-ms-membran); box-shadow: inset 0 0 0 1px var(--sf-ms-buehne-linie); }
.sf-ms .sf-ms-b-lage[data-sf-ms-lage="aussen"] { background: repeating-linear-gradient(45deg, var(--sf-ms-gewebe) 0 3px, transparent 3px 7px), repeating-linear-gradient(-45deg, var(--sf-ms-gewebe-tief) 0 3px, transparent 3px 7px), var(--sf-ms-ton-4); }
.sf-ms .sf-ms-b-raum[data-sf-ton="3"] .sf-ms-b-lage[data-sf-ms-lage="aussen"] { background: repeating-linear-gradient(45deg, var(--sf-ms-gewebe) 0 3px, transparent 3px 7px), repeating-linear-gradient(-45deg, var(--sf-ms-gewebe-tief) 0 3px, transparent 3px 7px), var(--sf-ms-buehne-2); }
.sf-ms .sf-ms-b-raum[data-sf-ton="2"] .sf-ms-b-lage[data-sf-ms-lage="aussen"] { background: repeating-linear-gradient(45deg, var(--sf-ms-gewebe) 0 3px, transparent 3px 7px), repeating-linear-gradient(-45deg, var(--sf-ms-gewebe-tief) 0 3px, transparent 3px 7px), var(--sf-ms-ton-2); }
.sf-ms .sf-ms-b-lage-aktiv { outline-color: var(--sf-ms-gold); }
.sf-ms .sf-ms-b-schatten { position: absolute; inset: 8%; transform: translateZ(-30px); background: var(--sf-ms-schatten); filter: blur(22px); }
.sf-ms .sf-ms-b-legende { position: relative; margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.sf-ms ol.sf-ms-b-legende li { padding: 6px 10px; border: 1px solid var(--sf-ms-buehne-linie); font-size: var(--sf-size-13); font-weight: 700; }
.sf-ms .sf-ms-b-steuer { position: relative; display: grid; gap: 12px; }
.sf-ms .sf-ms-b-legende button, .sf-ms .sf-ms-b-wahl button { min-height: 40px; padding: 8px 12px; border: 1px solid var(--sf-ms-buehne-linie); background: transparent; color: var(--sf-ms-buehne-text); font-family: var(--sf-display); font-weight: 700; font-size: var(--sf-size-15); letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; border-radius: 0; }
.sf-ms .sf-ms-b-legende button[aria-pressed="true"] { background: var(--sf-ms-gold); border-color: var(--sf-ms-gold); color: var(--sf-ms-tinte); }
.sf-ms .sf-ms-b-regler { display: grid; gap: 4px; font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-ms-buehne-leise); }
.sf-ms .sf-ms-b-regler input { width: 100%; accent-color: var(--sf-ms-gold); }
.sf-ms .sf-ms-b-rechts { padding: 22px 20px 26px; display: grid; gap: 16px; align-content: start; }
.sf-ms .sf-ms-b-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-ms .sf-ms-b-wahl button { border-color: var(--sf-ms-tinte); color: var(--sf-ms-tinte); }
.sf-ms .sf-ms-b-wahl button[aria-pressed="true"] { background: var(--sf-ms-tinte); color: var(--sf-ms-buehne-text); }
.sf-ms .sf-ms-b-serie { display: grid; gap: 12px; }
.sf-ms .sf-ms-b-serie + .sf-ms-b-serie { padding-top: 22px; border-top: 1px solid var(--sf-ms-papier-linie); }
.sf-ms .sf-ms-b-foto { display: grid; gap: 4px; }
.sf-ms .sf-ms-b-foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sf-ms .sf-ms-b-name { margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); text-transform: var(--sf-heading-case); font-size: var(--sf-ms-fs-serie); line-height: 1; }
.sf-ms .sf-ms-b-lagen { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--sf-ms-papier-linie); }
.sf-ms .sf-ms-b-lagezeile { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--sf-ms-papier-linie); cursor: pointer; transition: background-color 0.25s; }
.sf-ms .sf-ms-b-lagezeile dt { font-family: var(--sf-display); font-weight: 700; font-size: var(--sf-size-15); text-transform: uppercase; letter-spacing: 0.04em; }
.sf-ms .sf-ms-b-lagezeile dd { margin: 0; font-size: var(--sf-size-15); line-height: 1.5; color: var(--sf-text); }
.sf-ms .sf-ms-b-lagezeile-aktiv { background: var(--sf-ms-gold-hell); box-shadow: inset 4px 0 0 var(--sf-ms-gold); }
.sf-ms .sf-ms-b-werte { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--sf-ms-papier-linie); border: 1px solid var(--sf-ms-papier-linie); }
.sf-ms .sf-ms-b-werte div { background: var(--sf-white); padding: 10px 12px; display: grid; gap: 2px; }
.sf-ms .sf-ms-b-werte dt { font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-ms-leise); }
.sf-ms .sf-ms-b-werte dd { margin: 0; font-family: var(--sf-display); font-weight: 700; font-size: var(--sf-size-19); font-variant-numeric: tabular-nums; }
.sf-ms .sf-ms-b-wert-offen dd { font-family: var(--sf-body); font-weight: 400; font-size: var(--sf-size-14); color: var(--sf-ms-leise); }
.sf-ms .sf-ms-b-wofuer { margin-top: 28px; display: grid; gap: 12px; }
.sf-ms .sf-ms-b-wofuer-titel { margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); text-transform: var(--sf-heading-case); font-size: var(--sf-ms-fs-buehne); line-height: 1; }
.sf-ms .sf-ms-b-matrix { margin: 0; padding: 0; list-style: none; display: grid; border-top: 2px solid var(--sf-ms-tinte); --sf-ms-spalten: 3; }
.sf-ms .sf-ms-b-matrix li { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(var(--sf-ms-spalten), minmax(0, 1fr)); align-items: center; border-bottom: 1px solid var(--sf-line); }
.sf-ms .sf-ms-b-matrix li > span { padding: 10px 6px; text-align: center; font-size: var(--sf-size-15); }
.sf-ms .sf-ms-b-matrix .sf-ms-b-zweck { text-align: left; font-weight: 700; }
.sf-ms .sf-ms-b-matrix-kopf > span { font-family: var(--sf-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--sf-size-14); }
.sf-ms .sf-ms-b-ja { color: var(--sf-ms-akzent); font-size: var(--sf-size-20); }
.sf-ms .sf-ms-b-nein { color: var(--sf-line); }
.sf-ms .sf-ms-b-spalte-aktiv { background: var(--sf-ms-akzent-hell); }
@container sf-ms (min-width: 860px) {
.sf-ms .sf-ms-b-raster { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.sf-ms .sf-ms-b-buehne { min-height: 640px; padding: 32px; position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + 20px); align-self: start; height: min(86vh, 760px); }
.sf-ms .sf-ms-b-rechts { padding: 32px; }
.sf-ms .sf-ms-b-stapel { width: min(360px, 34cqi); }
}
.sf-ms.sf-ms-sagenbuch { background: var(--sf-ms-papier); padding: 28px 18px 32px; }
.sf-ms .sf-ms-c-inhalt { margin: 4px 0 40px; border-top: 2px solid var(--sf-ms-tinte); }
.sf-ms .sf-ms-c-inhalt ol { margin: 0; padding: 0; list-style: none; display: grid; }
.sf-ms .sf-ms-c-inhalt a { display: grid; grid-template-columns: 34px auto minmax(12px, 1fr) auto; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--sf-ms-papier-linie); color: var(--sf-ms-tinte); text-decoration: none; }
.sf-ms .sf-ms-c-inhalt a:hover .sf-ms-c-inhalt-name, .sf-ms .sf-ms-c-inhalt a:focus-visible .sf-ms-c-inhalt-name { color: var(--sf-ms-akzent); }
.sf-ms .sf-ms-c-nr { font-family: var(--sf-display); font-weight: 700; font-size: var(--sf-size-14); color: var(--sf-ms-akzent); font-variant-numeric: tabular-nums; }
.sf-ms .sf-ms-c-inhalt-name { font-family: var(--sf-display); font-weight: var(--sf-heading-weight); text-transform: var(--sf-heading-case); font-size: var(--sf-size-20); transition: color 0.2s; }
.sf-ms .sf-ms-c-inhalt-punkte { border-bottom: 2px dotted var(--sf-ms-papier-linie); transform: translateY(-4px); }
.sf-ms .sf-ms-c-inhalt-deutung { font-size: var(--sf-size-14); color: var(--sf-ms-leise); text-align: right; }
.sf-ms .sf-ms-c-seiten { display: grid; gap: 48px; }
.sf-ms .sf-ms-c-seite { display: grid; gap: 18px; scroll-margin-top: 120px; transition: box-shadow 0.4s, background-color 0.4s; }
.sf-ms .sf-ms-c-bild { position: relative; overflow: hidden; }
.sf-ms .sf-ms-c-bild img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sf-ms .sf-ms-c-bild figcaption { position: absolute; right: 10px; bottom: 8px; color: var(--sf-ms-buehne-leise); }
.sf-ms .sf-ms-c-text { display: grid; gap: 12px; align-content: center; }
.sf-ms .sf-ms-c-ware { margin: 0; font-size: var(--sf-size-13); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-ms-leise); }
.sf-ms .sf-ms-c-name { margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); text-transform: var(--sf-heading-case); font-size: var(--sf-ms-fs-name); line-height: 0.82; letter-spacing: -0.02em; color: var(--sf-ms-tinte); }
.sf-ms .sf-ms-c-edda { margin: 0; font-family: var(--sf-display); font-size: var(--sf-size-20); font-weight: 700; color: var(--sf-ms-akzent); }
.sf-ms .sf-ms-c-edda span { font-style: italic; }
.sf-ms .sf-ms-c-wofuer { margin: 0; font-size: var(--sf-size-17); line-height: 1.6; color: var(--sf-text); max-width: 52ch; }
.sf-ms .sf-ms-c-seite:target, .sf-ms .sf-ms-c-klein:target { box-shadow: 0 0 0 3px var(--sf-ms-gold); background: var(--sf-ms-gold-hell); }
.sf-ms .sf-ms-c-kleine { margin-top: 48px; display: grid; gap: 18px; }
.sf-ms .sf-ms-c-klein { position: relative; overflow: hidden; padding: 22px 20px 24px; background: var(--sf-white); border-top: 3px solid var(--sf-ms-tinte); display: grid; gap: 10px; align-content: start; scroll-margin-top: 120px; }
.sf-ms .sf-ms-c-initial { position: absolute; right: -6px; top: -18px; margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); font-size: var(--sf-ms-fs-initial); line-height: 1; color: var(--sf-ms-akzent-hell); pointer-events: none; }
.sf-ms .sf-ms-c-name-klein { position: relative; margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); text-transform: var(--sf-heading-case); font-size: var(--sf-ms-fs-name-klein); line-height: 0.95; }
.sf-ms .sf-ms-c-klein .sf-ms-c-ware, .sf-ms .sf-ms-c-klein .sf-ms-c-edda { position: relative; }
.sf-ms .sf-ms-c-register { margin-top: 56px; display: grid; gap: 10px; }
.sf-ms .sf-ms-c-register-titel, .sf-ms .sf-ms-c-finder-titel { margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); text-transform: var(--sf-heading-case); font-size: var(--sf-ms-fs-buehne); line-height: 1; }
.sf-ms .sf-ms-c-register-text { margin: 0; font-size: var(--sf-size-15); color: var(--sf-ms-leise); }
.sf-ms .sf-ms-c-register dl { margin: 6px 0 0; display: grid; gap: 0; border-top: 2px solid var(--sf-ms-tinte); }
.sf-ms .sf-ms-c-register dl > div { padding: 10px 0; border-bottom: 1px solid var(--sf-ms-papier-linie); display: grid; gap: 2px; }
.sf-ms .sf-ms-c-register dt { font-family: var(--sf-display); font-weight: 700; font-size: var(--sf-size-18); text-transform: uppercase; }
.sf-ms .sf-ms-c-register dt span { margin-left: 6px; font-family: var(--sf-body); font-size: var(--sf-size-14); font-weight: 400; font-style: italic; text-transform: none; color: var(--sf-ms-akzent); }
.sf-ms .sf-ms-c-register dd { margin: 0; font-size: var(--sf-size-15); color: var(--sf-text); }
.sf-ms .sf-ms-c-register-produkt { display: block; font-size: var(--sf-size-13); color: var(--sf-ms-leise); }
.sf-ms .sf-ms-c-finder { margin-top: 48px; padding: 24px 20px 28px; background: var(--sf-ms-buehne); color: var(--sf-ms-buehne-text); display: grid; gap: 16px; scroll-margin-top: 120px; }
.sf-ms .sf-ms-c-finder .sf-ms-c-finder-titel { color: var(--sf-ms-buehne-text); }
.sf-ms .sf-ms-c-schritt { display: none; gap: 12px; }
.sf-ms .sf-ms-c-schritt-start, .sf-ms .sf-ms-c-schritt:target { display: grid; }
.sf-ms .sf-ms-c-schritte:has(.sf-ms-c-schritt:target) .sf-ms-c-schritt-start:not(:target) { display: none; }
.sf-ms .sf-ms-c-frage { margin: 0; font-family: var(--sf-display); font-weight: 700; font-size: var(--sf-size-20); text-transform: uppercase; letter-spacing: 0.03em; }
.sf-ms .sf-ms-c-finder .sf-ms-c-edda { color: var(--sf-ms-gold); }
.sf-ms .sf-ms-c-finder .sf-ms-c-wofuer { color: var(--sf-ms-buehne-leise); }
.sf-ms .sf-ms-c-antworten { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.sf-ms .sf-ms-c-antworten a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid var(--sf-ms-buehne-linie); color: var(--sf-ms-buehne-text); font-size: var(--sf-size-16); font-weight: 700; text-decoration: none; transition: background-color 0.2s, border-color 0.2s; }
.sf-ms .sf-ms-c-antworten a:hover, .sf-ms .sf-ms-c-antworten a:focus-visible { background: var(--sf-ms-buehne-2); border-color: var(--sf-ms-gold); }
.sf-ms .sf-ms-c-zurueck a { border-color: transparent; color: var(--sf-ms-buehne-leise); font-weight: 400; }
.sf-ms .sf-ms-c-ergebnis { display: grid; gap: 12px; }
.sf-ms .sf-ms-c-finder .sf-ms-shoplink { background: var(--sf-ms-gold); color: var(--sf-ms-tinte); }
@container sf-ms (min-width: 760px) {
.sf-ms.sf-ms-sagenbuch { padding: 48px 44px 52px; }
.sf-ms .sf-ms-c-inhalt ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.sf-ms .sf-ms-c-seiten { gap: 72px; }
.sf-ms .sf-ms-c-seite { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 44px; align-items: center; }
.sf-ms .sf-ms-c-seite:nth-child(even) .sf-ms-c-bild { order: 2; }
.sf-ms .sf-ms-c-kleine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-ms .sf-ms-c-register dl { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.sf-ms .sf-ms-c-finder { padding: 36px 40px 40px; }
}
@container sf-ms (min-width: 1100px) {
.sf-ms .sf-ms-c-register dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
.sf-ms .sf-ms-b-schweben { animation: none; }
.sf-ms .sf-ms-a-bild img, .sf-ms .sf-ms-a-schicht, .sf-ms .sf-ms-b-lage, .sf-ms .sf-ms-pfeil { transition: none; }
}
.sf-ms .sf-ms-a-schicht[data-sf-ton="2"], .sf-ms .sf-ms-a-traegt li[data-sf-ton="2"] { border-left-color: var(--sf-ms-ton-2); }
.sf-ms .sf-ms-a-schicht[data-sf-ton="3"], .sf-ms .sf-ms-a-traegt li[data-sf-ton="3"] { border-left-color: var(--sf-ms-ton-3); }
.sf-ms .sf-ms-a-schicht[data-sf-ton="4"], .sf-ms .sf-ms-a-traegt li[data-sf-ton="4"] { border-left-color: var(--sf-ms-ton-4); }
.sf-ms .sf-ms-a-schicht[data-sf-ton="5"], .sf-ms .sf-ms-a-traegt li[data-sf-ton="5"] { border-left-color: var(--sf-ms-ton-5); }
.sf-ms .sf-ms-a-schicht[data-sf-ton="1"] { order: 1; }
.sf-ms .sf-ms-a-schicht[data-sf-ton="2"] { order: 2; }
.sf-ms .sf-ms-a-schicht[data-sf-ton="3"] { order: 3; }
.sf-ms .sf-ms-a-schicht[data-sf-ton="4"] { order: 4; }
.sf-ms .sf-ms-a-schicht[data-sf-ton="5"] { order: 5; }
@container sf-ms (min-width: 860px) {
.sf-ms .sf-ms-a-schicht[data-sf-ton] { order: 0; }
}
.sf-ms .sf-ms-a-schicht-neu .sf-ms-a-schicht-name::after { content: "neu"; margin-left: 8px; padding: 1px 5px; background: var(--sf-ms-gold); color: var(--sf-ms-tinte); font-size: var(--sf-size-10); letter-spacing: 0.08em; text-transform: uppercase; vertical-align: 2px; }
@media (max-width: 699px) {
.sf-ms.sf-ms-magazin .sf-ms-a-bild, .sf-ms.sf-ms-magazin .sf-ms-a-leiste, .sf-ms.sf-ms-magazin .sf-ms-b-raster, .sf-ms.sf-ms-magazin .sf-ms-a-schluss { margin-inline: calc(-1 * var(--sf-gutter)); }
.sf-ms.sf-ms-magazin .sf-ms-a-leiste, .sf-ms.sf-ms-magazin .sf-ms-a-schluss { padding-inline: var(--sf-gutter); }
.sf-ms.sf-ms-sagenbuch.sf-ms-magazin { margin-inline: calc(-1 * var(--sf-gutter)); padding-inline: var(--sf-gutter); }
}
.sf-ms-vorschau { position: sticky; top: 0; z-index: 50; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 8px max(16px, env(safe-area-inset-left, 0px)); background: var(--sf-ms-tinte); color: var(--sf-ms-buehne-text); font-family: var(--sf-body); font-size: var(--sf-size-13); }
.sf-ms-vorschau .sf-ms-vorschau-titel { font-weight: 700; color: var(--sf-ms-gold); }
.sf-ms-vorschau a { color: var(--sf-ms-buehne-text); text-decoration: none; padding: 4px 8px; border: 1px solid var(--sf-ms-buehne-linie); }
.sf-ms-vorschau a[aria-current="page"] { background: var(--sf-ms-gold); border-color: var(--sf-ms-gold); color: var(--sf-ms-tinte); font-weight: 700; }
@media (max-width: 699px) {
.sf-ms-vorschau { position: relative; }
}
/* bildstory.css */
.sf-dynamik .sf-article.sf-article-bildstory .sf-reading-layout { grid-template-columns: minmax(0, 1fr); margin-top: 12px; }
.sf-dynamik .sf-article.sf-article-bildstory .sf-contents { display: none; }
.sf-dynamik .sf-article.sf-article-bildstory .sf-article-open .sf-article-heading { margin-bottom: 0; }
.sf-dynamik .sf-article.sf-article-bildstory .sf-article-meta { margin-top: 6px; }
.sf-dynamik .sf-article:has(.sf-bsy) .sf-article-blocks > div { max-width: 816px; }
.sf-dynamik .sf-article:has(.sf-bsy) .sf-article-blocks > div:has([data-block-type="bildstory"]) { max-width: none; }
.sf-dynamik .sf-article:has(.sf-bsy) .sf-reading-end { max-width: 816px; }
.sf-bsy { container: sf-bsy / inline-size; margin-block: 0 40px; background: var(--sf-bsy-nacht); color: var(--sf-bsy-schnee); font-family: var(--sf-body); overflow: hidden; border-radius: 20px; }
.sf-bsy.sf-bsy-randlos { --sf-bsy-rand: max(0px, min(var(--sf-gutter), (760px - 100vw) * 999)); margin-inline: calc(var(--sf-bsy-rand) * -1); border-radius: max(0px, min(20px, (100vw - 760px) * 999)); }
.sf-bsy .sf-bsy-station { position: relative; margin: 0; }
.sf-bsy .sf-bsy-station .sf-bsy-kicker.sf-bsy-kicker { margin: 0; font-family: var(--sf-display); font-size: var(--sf-size-13); font-weight: 700; line-height: 1.1; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-bsy-eis); }
.sf-bsy .sf-bsy-station .sf-bsy-kicker-signal.sf-bsy-kicker-signal { color: var(--sf-bsy-signal); }
.sf-bsy .sf-bsy-station .sf-bsy-titel.sf-bsy-titel { margin: 0; font-family: var(--sf-display); font-size: var(--sf-bsy-fs-titel); font-weight: 800; line-height: 0.92; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; color: inherit; }
.sf-bsy .sf-bsy-station .sf-bsy-titel-gross.sf-bsy-titel-gross { font-size: var(--sf-bsy-fs-kopf); }
.sf-bsy .sf-bsy-station .sf-bsy-titel-klein.sf-bsy-titel-klein { font-size: var(--sf-bsy-fs-titel-klein); }
.sf-bsy .sf-bsy-station .sf-bsy-text.sf-bsy-text { margin: 0; max-width: 34ch; font-size: var(--sf-bsy-fs-text); line-height: 1.45; color: inherit; }
.sf-bsy .sf-bsy-station .sf-bsy-fuss.sf-bsy-fuss { margin: 0; font-size: var(--sf-size-13); line-height: 1.4; color: var(--sf-bsy-grau); }
.sf-bsy .sf-bsy-bildstation { min-height: 640px; display: grid; align-content: end; isolation: isolate; }
.sf-bsy .sf-bsy-kopf { min-height: 720px; }
.sf-bsy .sf-bsy-hoch { min-height: 700px; }
.sf-bsy .sf-bsy-bildstation .sf-bsy-bild.sf-bsy-bild { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sf-bsy .sf-bsy-bildstation::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 180deg, var(--sf-bsy-schleier-0) 30%, var(--sf-bsy-schleier-1) 66%, var(--sf-bsy-nacht) 100% ); }
.sf-bsy .sf-bsy-station .sf-bsy-nachweis { position: absolute; top: 12px; right: 14px; max-width: 70%; font-size: var(--sf-size-11); line-height: 1.3; text-align: right; color: var(--sf-bsy-nachweis); text-shadow: 0 1px 2px var(--sf-bsy-schatten); }
.sf-bsy .sf-bsy-inhalt { display: grid; gap: 10px; padding: 0 22px 34px; }
.sf-bsy .sf-bsy-station .sf-bsy-bildzahl.sf-bsy-bildzahl { margin: 0; font-family: var(--sf-display); font-size: var(--sf-bsy-fs-bildzahl); font-weight: 800; line-height: 0.85; font-variant-numeric: tabular-nums; }
.sf-bsy .sf-bsy-station .sf-bsy-hinweis.sf-bsy-hinweis { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font-size: var(--sf-size-14); color: var(--sf-bsy-grau); }
.sf-bsy .sf-bsy-hinweis svg { flex: none; }
@media (prefers-reduced-motion: no-preference) {
.sf-bsy .sf-bsy-hinweis svg { animation: sf-bsy-tippen 1.8s ease-in-out infinite; }
}
@keyframes sf-bsy-tippen { 50% { transform: translateY(4px); } }
.sf-bsy .sf-bsy-zahl { min-height: 520px; display: grid; align-content: center; gap: 14px; padding: 48px 22px; background: var(--sf-bsy-nacht); }
.sf-bsy .sf-bsy-flaeche-hell { background: var(--sf-bsy-nacht-2); }
.sf-bsy .sf-bsy-station .sf-bsy-zahl-zeile.sf-bsy-zahl-zeile { margin: 0; font-family: var(--sf-display); font-size: var(--sf-size-14); font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-bsy-signal); }
.sf-bsy .sf-bsy-station .sf-bsy-zahl-wert.sf-bsy-zahl-wert { margin: 0; font-family: var(--sf-display); font-size: var(--sf-bsy-fs-zahl); font-weight: 800; line-height: 0.85; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; color: var(--sf-bsy-schnee); }
.sf-bsy .sf-bsy-zahl-einheit { margin-left: 6px; font-size: var(--sf-bsy-fs-einheit); color: var(--sf-bsy-signal); }
.sf-bsy .sf-bsy-daten { display: grid; gap: 16px; padding: 36px 22px 34px; background: var(--sf-bsy-nacht-2); }
.sf-bsy .sf-bsy-station .sf-bsy-liste { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; font-variant-numeric: tabular-nums; }
.sf-bsy .sf-bsy-station .sf-bsy-zeile { display: grid; grid-template-columns: 22px minmax(0, 1fr) 58px; align-items: center; gap: 8px; margin: 0; font-size: var(--sf-size-15); line-height: 1.3; }
.sf-bsy .sf-bsy-platz { font-family: var(--sf-display); font-size: var(--sf-bsy-fs-platz); font-weight: 800; line-height: 1; color: var(--sf-bsy-grau); }
.sf-bsy .sf-bsy-wer { display: grid; gap: 4px; min-width: 0; }
.sf-bsy .sf-bsy-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.sf-bsy .sf-bsy-land { margin-left: 6px; font-size: var(--sf-size-12); letter-spacing: 0.06em; color: var(--sf-bsy-grau); }
.sf-bsy .sf-bsy-balken { position: relative; display: block; height: 4px; border-radius: 2px; background: var(--sf-bsy-balken-grund); }
.sf-bsy .sf-bsy-balken-wert { position: absolute; inset: 0 auto 0 0; border-radius: 2px; background: var(--sf-bsy-eis); }
.sf-bsy .sf-bsy-zeit { text-align: right; font-weight: 700; }
.sf-bsy .sf-bsy-zeile-sieg .sf-bsy-platz, .sf-bsy .sf-bsy-zeile-sieg .sf-bsy-zeit { color: var(--sf-bsy-signal); }
.sf-bsy .sf-bsy-zeile-sieg .sf-bsy-name { font-weight: 700; }
.sf-bsy .sf-bsy-zeile-markiert .sf-bsy-name::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--sf-bsy-signal); vertical-align: middle; }
.sf-bsy .sf-bsy-station .sf-bsy-aufholer { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sf-bsy .sf-bsy-station .sf-bsy-aufholer-eintrag { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; margin: 0; padding: 14px 16px; border-radius: 14px; background: var(--sf-bsy-nacht); }
.sf-bsy .sf-bsy-aufholer-name { font-weight: 700; }
.sf-bsy .sf-bsy-aufholer-wert { font-family: var(--sf-display); font-size: var(--sf-bsy-fs-wert); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sf-bsy .sf-bsy-aufholer-text { grid-column: 1 / -1; font-size: var(--sf-size-14); line-height: 1.35; color: var(--sf-bsy-grau); }
.sf-bsy .sf-bsy-produkte { display: grid; gap: 14px; padding: 36px 22px 34px; background: var(--sf-bsy-nacht); }
.sf-bsy .sf-bsy-station .sf-bsy-produktliste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sf-bsy .sf-bsy-station .sf-bsy-produkt { margin: 0; }
.sf-bsy .sf-bsy-station .sf-bsy-produkt-link { display: grid; align-content: start; gap: 6px; height: 100%; padding: 10px; border-radius: 14px; background: var(--sf-bsy-schnee); color: var(--sf-bsy-hell-tinte); text-decoration: none; }
.sf-bsy .sf-bsy-station .sf-bsy-produkt-link:focus-visible { outline: 3px solid var(--sf-bsy-eis); outline-offset: 2px; }
.sf-bsy .sf-bsy-station .sf-bsy-produkt-bild.sf-bsy-produkt-bild { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.sf-bsy .sf-bsy-produkt-zeile { font-size: var(--sf-size-12); line-height: 1.25; color: var(--sf-bsy-produkt-leise); }
.sf-bsy .sf-bsy-produkt-marke { font-family: var(--sf-display); font-size: var(--sf-bsy-fs-marke); font-weight: 800; line-height: 1; text-transform: uppercase; }
.sf-bsy .sf-bsy-produkt-modell { font-size: var(--sf-size-13); font-weight: 700; line-height: 1.3; color: var(--sf-bsy-blau); }
.sf-bsy .sf-bsy-hang { display: grid; gap: 16px; padding: 40px 0 30px; background: var(--sf-bsy-hell); color: var(--sf-bsy-hell-tinte); }
.sf-bsy .sf-bsy-hang-kopf { display: grid; gap: 10px; padding: 0 22px; }
.sf-bsy .sf-bsy-hang .sf-bsy-kicker.sf-bsy-kicker { color: var(--sf-bsy-blau); }
.sf-bsy .sf-bsy-hang .sf-bsy-text.sf-bsy-text { color: var(--sf-bsy-hell-text); }
.sf-bsy .sf-bsy-station .sf-bsy-hang-bild.sf-bsy-hang-bild { display: block; width: 100%; height: auto; }
.sf-bsy .sf-bsy-station .sf-bsy-knopf { justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 20px; border-radius: 999px; font-family: var(--sf-body); font-size: var(--sf-size-16); font-weight: 700; line-height: 1; text-decoration: none; }
.sf-bsy .sf-bsy-station .sf-bsy-knopf-hell { background: var(--sf-bsy-schnee); color: var(--sf-bsy-nacht); }
.sf-bsy .sf-bsy-station .sf-bsy-knopf-dunkel { margin-inline: 22px; background: var(--sf-bsy-hell-tinte); color: var(--sf-bsy-schnee); }
.sf-bsy .sf-bsy-station .sf-bsy-knopf:focus-visible { outline: 3px solid var(--sf-bsy-eis); outline-offset: 3px; }
.sf-bsy .sf-bsy-weiter { display: grid; gap: 16px; padding: 40px 22px 44px; background: var(--sf-bsy-nacht); }
.sf-bsy .sf-bsy-wege { display: grid; gap: 12px; }
.sf-bsy .sf-bsy-station .sf-bsy-weg { display: grid; grid-template-columns: 112px minmax(0, 1fr); min-height: 96px; overflow: hidden; border-radius: 14px; background: var(--sf-bsy-nacht-2); color: var(--sf-bsy-schnee); text-decoration: none; }
.sf-bsy .sf-bsy-station .sf-bsy-weg:focus-visible { outline: 3px solid var(--sf-bsy-eis); outline-offset: 2px; }
.sf-bsy .sf-bsy-station .sf-bsy-weg-bild.sf-bsy-weg-bild { width: 112px; height: 100%; max-width: none; object-fit: cover; }
.sf-bsy .sf-bsy-weg-text { display: grid; align-content: center; gap: 4px; min-width: 0; padding: 12px 14px; }
.sf-bsy .sf-bsy-weg-titel { font-family: var(--sf-display); font-size: var(--sf-bsy-fs-weg); font-weight: 800; line-height: 1; text-transform: uppercase; }
.sf-bsy .sf-bsy-weg-satz { font-size: var(--sf-size-14); line-height: 1.3; color: var(--sf-bsy-grau); }
.sf-bsy .sf-bsy-partner.sf-bsy-partner { margin: 0; background: var(--sf-bsy-nacht-3); border-bottom: 1px solid var(--sf-bsy-linie); }
.sf-bsy .sf-bsy-partner .sf-bsy-partner-link { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 10px 16px; font-size: var(--sf-size-13); color: var(--sf-bsy-grau); text-decoration: none; }
.sf-bsy .sf-bsy-partner-name { font-family: var(--sf-display); font-size: var(--sf-bsy-fs-partner); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-bsy-schnee); }
.sf-bsy .sf-bsy-partner .sf-bsy-partner-logo.sf-bsy-partner-logo { width: auto; height: 22px; }
.sf-bsy .sf-bsy-partner-karte { display: grid; gap: 12px; padding: 30px 22px; background: var(--sf-bsy-nacht-3); border-top: 1px solid var(--sf-bsy-linie); }
.sf-bsy .sf-bsy-station .sf-bsy-partner-titel.sf-bsy-partner-titel { margin: 0; font-family: var(--sf-display); font-size: var(--sf-bsy-fs-partner-titel); font-weight: 800; line-height: 1; text-transform: uppercase; }
.sf-bsy .sf-bsy-partner-karte .sf-bsy-text.sf-bsy-text { color: var(--sf-bsy-grau); }
@container sf-bsy (min-width: 760px) {
.sf-bsy .sf-bsy-bildstation { min-height: clamp(520px, 58cqi, 760px); }
.sf-bsy .sf-bsy-kopf { min-height: clamp(600px, 64cqi, 820px); }
.sf-bsy .sf-bsy-inhalt { gap: 14px; padding: 0 56px 56px; max-width: 760px; }
.sf-bsy .sf-bsy-station .sf-bsy-nachweis { top: 16px; right: 20px; }
.sf-bsy .sf-bsy-hoch { min-height: clamp(560px, 60cqi, 760px); align-content: center; }
.sf-bsy .sf-bsy-hoch .sf-bsy-bild.sf-bsy-bild { left: 44%; width: 56%; }
.sf-bsy .sf-bsy-hoch::before { background: linear-gradient(90deg, var(--sf-bsy-nacht) 44%, var(--sf-bsy-schleier-0) 62%); }
.sf-bsy .sf-bsy-hoch .sf-bsy-inhalt { max-width: 46%; padding-bottom: 0; }
.sf-bsy .sf-bsy-zahl { min-height: 440px; }
.sf-bsy .sf-bsy-zahl, .sf-bsy .sf-bsy-daten, .sf-bsy .sf-bsy-produkte, .sf-bsy .sf-bsy-weiter, .sf-bsy .sf-bsy-partner-karte { padding-block: 64px; padding-inline: max(56px, calc((100cqi - 720px) / 2)); }
.sf-bsy .sf-bsy-hang { padding-block: 64px 48px; }
.sf-bsy .sf-bsy-hang-kopf { padding-inline: max(56px, calc((100cqi - 720px) / 2)); }
.sf-bsy .sf-bsy-station .sf-bsy-knopf-dunkel { margin-inline: max(56px, calc((100cqi - 720px) / 2)); }
.sf-bsy .sf-bsy-station .sf-bsy-zeile { grid-template-columns: 28px minmax(0, 1fr) 72px; gap: 12px; font-size: var(--sf-size-17); }
.sf-bsy .sf-bsy-station .sf-bsy-aufholer { grid-template-columns: 1fr 1fr; }
.sf-bsy .sf-bsy-station .sf-bsy-produktliste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-bsy .sf-bsy-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-bsy .sf-bsy-station .sf-bsy-weg { grid-template-columns: 1fr; grid-template-rows: 150px auto; }
.sf-bsy .sf-bsy-station .sf-bsy-weg-bild.sf-bsy-weg-bild { width: 100%; }
.sf-bsy .sf-bsy-partner .sf-bsy-partner-link { justify-content: center; }
}
.sf-bsy.sf-bsy-mit-buehne { --sf-bsy-kopf: 82px; overflow: visible; border-radius: 0; background: var(--sf-bsy-b-nacht); color: var(--sf-bsy-b-schnee); font-family: var(--sf-body); }
.sf-bsy.sf-bsy-randlos.sf-bsy-mit-buehne { border-radius: 0; }
.sf-bsy-mit-buehne .sf-bsy-lauf { position: relative; }
.sf-bsy-mit-buehne .sf-bsy-buehne { position: sticky; top: var(--sf-kopf-klebt, 0px); z-index: 1; height: 100vh; height: calc(100svh - var(--sf-kopf-klebt, 0px)); overflow: hidden; overflow: clip; background: var(--sf-bsy-b-nacht); isolation: isolate; }
.sf-bsy-mit-buehne .sf-bsy-ebene { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.sf-bsy-mit-buehne:not(.sf-bsy-lebt) .sf-bsy-anfangsebene { opacity: 1; visibility: visible; }
.sf-bsy-mit-buehne .sf-bsy-ebene.sf-da { visibility: visible; }
.sf-bsy-mit-buehne .sf-bsy-ebene-film { z-index: 1; }
.sf-bsy-mit-buehne .sf-bsy-ebene-hang { z-index: 2; background: var(--sf-bsy-b-himmel); }
.sf-bsy-mit-buehne .sf-bsy-ebene-tafel { z-index: 3; background: var(--sf-bsy-b-nacht); padding-inline: 16px; }
.sf-bsy-mit-buehne .sf-bsy-bnachweis.sf-bsy-bnachweis { position: absolute; z-index: 7; right: 12px; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); max-width: 64%; margin: 0; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-10); font-weight: 600; line-height: 1.25; letter-spacing: 0.03em; text-align: right; color: var(--sf-bsy-b-nachweis); text-shadow: 0 1px 2px var(--sf-bsy-schatten); opacity: 0; transition: opacity 0.8s; pointer-events: none; }
.sf-bsy-mit-buehne .sf-bsy-bnachweis.sf-an, .sf-bsy-mit-buehne:not(.sf-bsy-lebt) .sf-bsy-bnachweis:first-of-type { opacity: 1; }
.sf-bsy-mit-buehne .sf-bsy-szene { --sf-bsy-p: 0; position: absolute; inset: 0; opacity: 0; transition: opacity 1.3s ease; }
.sf-bsy-mit-buehne .sf-bsy-szene.sf-an, .sf-bsy-mit-buehne:not(.sf-bsy-lebt) .sf-bsy-szene:first-child { opacity: 1; }
.sf-bsy-mit-buehne .sf-bsy-szene .sf-bsy-szene-bild.sf-bsy-szene-bild { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--sf-bsy-mob, 50% 50%); transform: scale(calc(var(--sf-bsy-s0) + (var(--sf-bsy-s1) - var(--sf-bsy-s0)) * var(--sf-bsy-p))) translate3d( calc(var(--sf-bsy-x0) + (var(--sf-bsy-x1) - var(--sf-bsy-x0)) * var(--sf-bsy-p)), calc(var(--sf-bsy-y0) + (var(--sf-bsy-y1) - var(--sf-bsy-y0)) * var(--sf-bsy-p)), 0 ); transform-origin: 50% 50%; will-change: transform; filter: var(--sf-bsy-filter, none); }
.sf-bsy-mit-buehne .sf-bsy-szene::after { content: ""; position: absolute; inset: 0; background: var(--sf-bsy-toenung, none); pointer-events: none; }
.sf-bsy-mit-buehne .sf-bsy-schleier { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( 180deg, var(--sf-bsy-b-nacht-72) 0%, var(--sf-bsy-b-nacht-0) 26%, var(--sf-bsy-b-nacht-0) 52%, var(--sf-bsy-b-nacht-86) 100% ); }
.sf-bsy-mit-buehne .sf-bsy-dunkel { position: absolute; inset: 0; z-index: 4; background: var(--sf-bsy-b-nacht-40); opacity: 0; transition: opacity 1s; pointer-events: none; }
.sf-bsy-mit-buehne .sf-bsy-dunkel.sf-an { opacity: 1; }
.sf-bsy-mit-buehne .sf-bsy-wetter { position: absolute; inset: 0; z-index: 3; overflow: hidden; opacity: 0; transition: opacity 1.6s ease; pointer-events: none; }
.sf-bsy-mit-buehne .sf-bsy-wetter.sf-an { opacity: 1; }
.sf-bsy-mit-buehne .sf-bsy-flocke { position: absolute; top: -4%; border-radius: 50%; background: var(--sf-bsy-b-weiss); animation: sf-bsy-fallen linear infinite; }
@keyframes sf-bsy-fallen { to { transform: translate3d(var(--sf-bsy-dx), 108vh, 0); } }
.sf-bsy-mit-buehne .sf-bsy-boe { position: absolute; left: -40%; height: 2px; border-radius: 2px; background: linear-gradient( 90deg, var(--sf-bsy-b-schnee-0), var(--sf-bsy-b-schnee-80), var(--sf-bsy-b-schnee-0) ); animation: sf-bsy-wehen linear infinite; }
@keyframes sf-bsy-wehen { to { transform: translate3d(190vw, var(--sf-bsy-dy), 0); } }
.sf-bsy-mit-buehne .sf-bsy-typo { position: absolute; z-index: 5; left: 18px; right: 18px; pointer-events: none; }
.sf-bsy-mit-buehne .sf-bsy-typo-unten { bottom: 13svh; }
.sf-bsy-mit-buehne .sf-bsy-typo-mitte { top: 50%; transform: translateY(-50%); }
.sf-bsy-mit-buehne .sf-bsy-typo-oben { top: calc(var(--sf-bsy-kopf) + 6svh); }
.sf-bsy-mit-buehne .sf-bsy-w { display: inline-block; opacity: 0; transform: translate3d(0, 0.5em, 0); transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1); transition-delay: calc(var(--sf-bsy-i, 0) * 55ms); }
.sf-bsy-mit-buehne .sf-bsy-typo.sf-an .sf-bsy-w { opacity: 1; transform: none; }
.sf-bsy-mit-buehne .sf-bsy-typo:not(.sf-an) .sf-bsy-w { transition-delay: 0ms; transition-duration: 0.35s; }
.sf-bsy-mit-buehne .sf-bsy-typo [data-sf-ab]:not(.sf-an) { opacity: 0; }
.sf-bsy-mit-buehne .sf-bsy-zeilen { display: grid; gap: 6px; }
.sf-bsy-mit-buehne .sf-bsy-t-marke { font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-13); font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-bsy-b-schnee-86); }
.sf-bsy-mit-buehne .sf-bsy-t-riesig { font-family: var(--sf-display); font-size: min( var(--sf-bsy-b-fs-riesig), calc((100cqi - 36px) / (var(--sf-bsy-laengstes, 4) * 0.6)) ); overflow-wrap: break-word; hyphens: auto; font-weight: 800; line-height: 0.86; letter-spacing: -0.01em; text-transform: uppercase; }
.sf-bsy-mit-buehne .sf-bsy-t-gross { font-family: var(--sf-display); font-size: min( var(--sf-bsy-b-fs-gross), calc((100cqi - 36px) / (var(--sf-bsy-laengstes, 4) * 0.6)) ); overflow-wrap: break-word; hyphens: auto; font-weight: 800; line-height: 0.9; text-transform: uppercase; }
.sf-bsy-mit-buehne .sf-bsy-t-mittel { font-family: var(--sf-display); font-size: min( var(--sf-bsy-b-fs-mittel), calc((100cqi - 36px) / (var(--sf-bsy-laengstes, 4) * 0.6)) ); overflow-wrap: break-word; hyphens: auto; font-weight: 800; line-height: 0.95; text-transform: uppercase; }
.sf-bsy-mit-buehne .sf-bsy-t-satz { max-width: 28ch; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-satz); font-weight: 600; line-height: 1.25; color: var(--sf-bsy-b-schnee-92); }
.sf-bsy-mit-buehne .sf-bsy-ziffern { font-variant-numeric: tabular-nums; }
.sf-bsy-mit-buehne .sf-bsy-t-tabelle { display: grid; gap: 8px; max-width: 420px; }
.sf-bsy-mit-buehne .sf-bsy-t-r { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 12px; font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-termin); font-weight: 800; line-height: 1; text-transform: uppercase; transition: opacity 0.4s; }
.sf-bsy-mit-buehne .sf-bsy-t-r small { font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-termin-klein); font-weight: 800; line-height: 1; color: var(--sf-bsy-b-grau); }
.sf-bsy-mit-buehne .sf-bsy-canvas, .sf-bsy-mit-buehne .sf-bsy-poster.sf-bsy-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; }
.sf-bsy-mit-buehne .sf-bsy-poster.sf-bsy-poster { object-fit: cover; transition: opacity 1.2s; }
.sf-bsy-mit-buehne .sf-bsy-bereit .sf-bsy-poster.sf-bsy-poster { opacity: 0; }
.sf-bsy-mit-buehne .sf-bsy-nebel { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(to bottom, var(--sf-bsy-b-nebel-0), var(--sf-bsy-b-nebel-55)); }
.sf-bsy-mit-buehne .sf-bsy-verlauf { position: absolute; inset: 0; pointer-events: none; background: linear-gradient( to bottom, var(--sf-bsy-b-nacht-60) 0, var(--sf-bsy-b-nacht-0) 26%, var(--sf-bsy-b-nacht-0) 50%, var(--sf-bsy-b-nacht-82) 100% ); }
.sf-bsy-mit-buehne .sf-bsy-ein { position: absolute; z-index: 5; opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease; pointer-events: none; }
.sf-bsy-mit-buehne .sf-bsy-ein.sf-an { opacity: 1; transform: none; }
.sf-bsy-mit-buehne .sf-bsy-ein-unten { left: 16px; right: 16px; bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); }
.sf-bsy-mit-buehne .sf-bsy-ein-oben { left: 16px; right: 16px; top: calc(var(--sf-bsy-kopf) + 6px); }
.sf-bsy-mit-buehne .sf-bsy-h-kicker.sf-bsy-h-kicker { margin: 0 0 6px; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-13); font-weight: 700; line-height: 1.2; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-bsy-b-gelb); }
.sf-bsy-mit-buehne .sf-bsy-h-gross.sf-bsy-h-gross { margin: 0; font-family: var(--sf-display); font-size: min( var(--sf-bsy-b-fs-schluss), calc((100cqi - 32px) / (var(--sf-bsy-laengstes, 4) * 0.6)) ); overflow-wrap: break-word; hyphens: auto; font-weight: 800; line-height: 0.86; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 2px 24px var(--sf-bsy-b-schatten); }
.sf-bsy-mit-buehne .sf-bsy-karte { padding: 14px 16px 15px; border-left: 4px solid var(--sf-bsy-b-rot); background: var(--sf-bsy-b-tafelgrund); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sf-bsy-mit-buehne .sf-bsy-karte-blau { border-left-color: var(--sf-bsy-b-blau); }
.sf-bsy-mit-buehne .sf-bsy-karte-titel.sf-bsy-karte-titel { margin: 0; font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-30); font-weight: 800; line-height: 1; text-transform: uppercase; }
.sf-bsy-mit-buehne .sf-bsy-karte-text.sf-bsy-karte-text { margin: 6px 0 0; font-size: var(--sf-bsy-b-fs-16); line-height: 1.4; color: var(--sf-bsy-b-schnee-92); }
.sf-bsy-mit-buehne .sf-bsy-kliste.sf-bsy-kliste { display: grid; gap: 2px; margin: 10px 0 0; padding: 0; list-style: none; }
.sf-bsy-mit-buehne .sf-bsy-kliste li { display: grid; grid-template-columns: 28px 1fr auto; align-items: baseline; gap: 10px; margin: 0; padding: 6px 10px; background: var(--sf-bsy-b-schnee-6); font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-22); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; text-transform: uppercase; }
.sf-bsy-mit-buehne .sf-bsy-kliste em { font-size: var(--sf-bsy-b-fs-15); font-style: normal; letter-spacing: 0.06em; color: var(--sf-bsy-b-eis); }
.sf-bsy-mit-buehne .sf-bsy-kliste .sf-bsy-r { color: var(--sf-bsy-b-gelb); }
.sf-bsy-mit-buehne .sf-bsy-kliste .sf-bsy-eins { background: var(--sf-bsy-b-gelb-16); }
.sf-bsy-mit-buehne .sf-bsy-tvuhr { display: inline-grid; grid-template-columns: auto auto; background: var(--sf-bsy-b-tafelgrund); line-height: 1; }
.sf-bsy-mit-buehne .sf-bsy-tvuhr small { grid-column: 1 / -1; padding: 8px 12px 0; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-11); font-weight: 700; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-bsy-b-eis); }
.sf-bsy-mit-buehne .sf-bsy-tvuhr b { min-width: 4.6ch; padding: 2px 12px 8px; font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-46); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sf-bsy-mit-buehne .sf-bsy-tvuhr .sf-bsy-tv-fertig { align-self: end; padding: 0 12px 11px 0; font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-22); font-weight: 800; line-height: 1; color: var(--sf-bsy-b-gelb); }
.sf-bsy-mit-buehne .sf-bsy-tvuhr.sf-bsy-fertig b { color: var(--sf-bsy-b-gelb); }
.sf-bsy-mit-buehne .sf-bsy-orte { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.sf-bsy-mit-buehne .sf-bsy-ort { position: absolute; left: 0; top: 0; opacity: 0; transition: opacity 0.4s; will-change: transform; }
.sf-bsy-mit-buehne .sf-bsy-ort.sf-an { opacity: 1; }
.sf-bsy-mit-buehne .sf-bsy-ort > div { display: grid; justify-items: center; white-space: nowrap; transform: translate(-50%, -100%); }
.sf-bsy-mit-buehne .sf-bsy-ort > div > span:first-child { padding: 5px 9px 4px; background: var(--sf-bsy-b-tafelgrund); font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-15); font-weight: 800; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; }
.sf-bsy-mit-buehne .sf-bsy-ort b { color: var(--sf-bsy-b-gelb); }
.sf-bsy-mit-buehne .sf-bsy-ort-strich { width: 2px; height: 26px; background: var(--sf-bsy-b-schnee); opacity: 0.8; }
.sf-bsy-mit-buehne .sf-bsy-ort-rot > div > span:first-child { background: var(--sf-bsy-b-rot); }
.sf-bsy-mit-buehne .sf-bsy-ort-zeitmarke > div > span:first-child { padding: 6px 10px 5px; font-size: var(--sf-bsy-b-fs-26); }
.sf-bsy-mit-buehne .sf-bsy-schluss { z-index: 9; }
.sf-bsy-mit-buehne .sf-bsy-schluss.sf-an { pointer-events: auto; }
.sf-bsy-mit-buehne .sf-bsy-selbst { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; margin-top: 18px; padding: 0 22px 0 8px; border-radius: 30px; background: var(--sf-bsy-b-schnee); color: var(--sf-bsy-b-tinte); font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-22); font-weight: 800; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; box-shadow: 0 8px 30px var(--sf-bsy-b-schatten); }
.sf-bsy-mit-buehne .sf-bsy-selbst-punkt { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--sf-bsy-b-rot); }
.sf-bsy-mit-buehne .sf-bsy-selbst svg { width: 16px; height: 16px; margin-left: 3px; fill: var(--sf-bsy-b-weiss); }
.sf-bsy-mit-buehne .sf-bsy-ebene-tafel { --sf-bsy-uhr: min(25cqi, 200px, 27svh); --sf-bsy-uhr-top: 24%; }
.sf-bsy-mit-buehne .sf-bsy-ebene-tafel.sf-bsy-klein { --sf-bsy-uhr-top: 17%; }
.sf-bsy-mit-buehne .sf-bsy-tf-foto.sf-bsy-tf-foto { position: absolute; inset: -4%; width: 108%; height: 108%; max-width: none; object-fit: cover; opacity: 0; filter: blur(7px) saturate(0.7) brightness(0.42); transform: scale(1.06); transition: opacity 1.1s ease; }
.sf-bsy-mit-buehne .sf-bsy-tf-foto.sf-an { opacity: 1; }
.sf-bsy-mit-buehne .sf-bsy-tschleier { position: absolute; inset: 0; pointer-events: none; background: radial-gradient( 120% 70% at 50% 42%, var(--sf-bsy-b-tafel-mitte), var(--sf-bsy-b-tafel-rand) 75% ); }
.sf-bsy-mit-buehne .sf-bsy-raster { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; background-image: radial-gradient(var(--sf-bsy-b-schnee-7) 1px, transparent 1.4px); background-size: 6px 6px; }
.sf-bsy-mit-buehne .sf-bsy-tf-kopfzeile { position: absolute; z-index: 3; left: 16px; right: 16px; top: calc(var(--sf-bsy-kopf) + 4px); height: 44px; }
.sf-bsy-mit-buehne .sf-bsy-tf-kicker.sf-bsy-tf-kicker { position: absolute; inset: 0 auto auto 0; margin: 0; opacity: 0; transform: translateY(8px); transition: opacity 0.5s, transform 0.5s; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-13); font-weight: 600; line-height: 1.25; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-bsy-b-gelb); }
.sf-bsy-mit-buehne .sf-bsy-tf-kicker.sf-an { opacity: 1; transform: none; }
.sf-bsy-mit-buehne .sf-bsy-tf-kicker b { display: block; margin-top: 3px; font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-22); font-weight: 800; line-height: 1.05; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sf-bsy-b-schnee); }
.sf-bsy-mit-buehne .sf-bsy-uhrfeld { position: absolute; z-index: 2; left: 0; right: 0; top: var(--sf-bsy-uhr-top); display: flex; justify-content: center; transition: top 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sf-bsy-mit-buehne .sf-bsy-uhr { display: inline-flex; align-items: flex-end; font-family: var(--sf-display); font-size: var(--sf-bsy-uhr); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--sf-bsy-b-schnee); transform-origin: 0 0; will-change: transform; transition: font-size 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sf-bsy-mit-buehne .sf-bsy-klein .sf-bsy-uhr { font-size: min(16cqi, 120px); }
.sf-bsy-mit-buehne .sf-bsy-ziffer { position: relative; display: inline-block; width: 0.52em; height: 1em; overflow: hidden; transition: opacity 0.4s, color 0.4s; }
.sf-bsy-mit-buehne .sf-bsy-band { display: flex; flex-direction: column; will-change: transform; }
.sf-bsy-mit-buehne .sf-bsy-band span { display: block; height: 1em; text-align: center; }
.sf-bsy-mit-buehne .sf-bsy-trenn { display: inline-block; width: 0.22em; height: 1em; text-align: center; transition: opacity 0.4s; }
.sf-bsy-mit-buehne .sf-bsy-uhr.sf-bsy-fokus .sf-bsy-ziffer:not(.sf-bsy-letzte), .sf-bsy-mit-buehne .sf-bsy-uhr.sf-bsy-fokus .sf-bsy-trenn { opacity: 0.12; }
.sf-bsy-mit-buehne .sf-bsy-uhr.sf-bsy-fokus .sf-bsy-letzte, .sf-bsy-mit-buehne .sf-bsy-uhr.sf-bsy-rot .sf-bsy-letzte { color: var(--sf-bsy-b-hellrot); }
.sf-bsy-mit-buehne .sf-bsy-uhr.sf-bsy-steht { animation: sf-bsy-steht 1s steps(2) 1; }
@keyframes sf-bsy-steht { 50% { opacity: 0.35; } }
.sf-bsy-mit-buehne .sf-bsy-delta { position: absolute; z-index: 3; left: 0; right: 0; top: calc(var(--sf-bsy-uhr-top) + var(--sf-bsy-uhr) + 8px); display: flex; justify-content: center; }
.sf-bsy-mit-buehne .sf-bsy-delta span { position: absolute; padding: 6px 12px 4px; background: var(--sf-bsy-b-hellrot); color: var(--sf-bsy-b-weiss); font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-30); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; opacity: 0; transform: scale(0.8); transition: opacity 0.3s, transform 0.3s; }
.sf-bsy-mit-buehne .sf-bsy-delta span.sf-an { opacity: 1; transform: none; }
.sf-bsy-mit-buehne .sf-bsy-feld { position: absolute; z-index: 3; left: 16px; right: 16px; top: calc(var(--sf-bsy-uhr-top) + var(--sf-bsy-uhr) + 64px); bottom: calc(34px + env(safe-area-inset-bottom, 0px)); max-width: 640px; margin: 0 auto; transition: top 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sf-bsy-mit-buehne .sf-bsy-klein .sf-bsy-feld { top: calc(var(--sf-bsy-uhr-top) + min(16cqi, 120px) + 26px); }
.sf-bsy-mit-buehne .sf-bsy-tafelfeld { position: absolute; inset: 0; opacity: 0; transform: translateY(14px); transition: opacity 0.55s, transform 0.55s; pointer-events: none; }
.sf-bsy-mit-buehne .sf-bsy-tafelfeld.sf-an { opacity: 1; transform: none; }
.sf-bsy-mit-buehne .sf-bsy-tf-satz.sf-bsy-tf-satz { max-width: 30ch; margin: 0; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-19); font-weight: 600; line-height: 1.35; text-wrap: balance; }
.sf-bsy-mit-buehne .sf-bsy-tf-satz em { font-style: normal; color: var(--sf-bsy-b-gelb); }
.sf-bsy-mit-buehne .sf-bsy-tf-leise.sf-bsy-tf-leise { margin: 0; font-size: var(--sf-bsy-b-fs-15); color: var(--sf-bsy-b-leise); }
.sf-bsy-mit-buehne .sf-bsy-zweizeit { display: grid; gap: 6px; font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-44); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sf-bsy-mit-buehne .sf-bsy-zweizeit > div { display: flex; align-items: baseline; gap: 14px; }
.sf-bsy-mit-buehne .sf-bsy-zweizeit small { width: 72px; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-13); font-weight: 600; line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-bsy-b-leise); }
.sf-bsy-mit-buehne .sf-bsy-zweizeit .sf-bsy-letzt { color: var(--sf-bsy-b-hellrot); }
.sf-bsy-mit-buehne .sf-bsy-zellen { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; margin: 14px 0 10px; }
.sf-bsy-mit-buehne .sf-bsy-zelle { height: 30px; background: var(--sf-bsy-b-hauch); transition: background 0.2s; }
.sf-bsy-mit-buehne .sf-bsy-zelle.sf-bsy-voll { background: var(--sf-bsy-b-gelb); }
.sf-bsy-mit-buehne .sf-bsy-zelle.sf-bsy-erste { background: var(--sf-bsy-b-hellrot); }
.sf-bsy-mit-buehne .sf-bsy-zellen-text { display: flex; justify-content: space-between; font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-13); font-weight: 800; line-height: 1; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sf-bsy-b-leise); }
.sf-bsy-mit-buehne .sf-bsy-zellen-text span:first-child { color: var(--sf-bsy-b-hellrot); }
.sf-bsy-mit-buehne .sf-bsy-auge { display: block; width: 72px; height: 40px; margin-top: 10px; }
.sf-bsy-mit-buehne .sf-bsy-auge-rand { fill: none; stroke: var(--sf-bsy-b-schnee); stroke-width: 2; }
.sf-bsy-mit-buehne .sf-bsy-auge-iris { fill: var(--sf-bsy-b-schnee); }
.sf-bsy-mit-buehne .sf-bsy-lid { fill: var(--sf-bsy-b-nacht); stroke: var(--sf-bsy-b-schnee); stroke-width: 2; transform-origin: 36px 4px; transform: scaleY(var(--sf-bsy-lid, 0)); }
.sf-bsy-mit-buehne .sf-bsy-lineal { display: block; width: 100%; height: auto; margin: 10px 0 8px; }
.sf-bsy-mit-buehne .sf-bsy-lineal-grund { fill: var(--sf-bsy-b-schnee); opacity: 0.1; }
.sf-bsy-mit-buehne .sf-bsy-strich { stroke: var(--sf-bsy-b-schnee); }
.sf-bsy-mit-buehne .sf-bsy-feldmarke { fill: var(--sf-bsy-b-hellrot); opacity: 0.9; }
.sf-bsy-mit-buehne .sf-bsy-lineal-zahl { fill: var(--sf-bsy-b-schnee); font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-12); font-weight: 800; }
.sf-bsy-mit-buehne .sf-bsy-duell { display: grid; gap: 8px; font-variant-numeric: tabular-nums; }
.sf-bsy-mit-buehne .sf-bsy-duell > div { display: grid; grid-template-columns: 26px 1fr auto; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--sf-bsy-b-hauch); }
.sf-bsy-mit-buehne .sf-bsy-duell span { font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-20); font-weight: 800; line-height: 1; color: var(--sf-bsy-b-leise); }
.sf-bsy-mit-buehne .sf-bsy-duell b { font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-26); font-weight: 800; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; }
.sf-bsy-mit-buehne .sf-bsy-duell b small { margin-left: 6px; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-12); font-weight: 600; line-height: 1; letter-spacing: 0.08em; color: var(--sf-bsy-b-leise); }
.sf-bsy-mit-buehne .sf-bsy-duell em { padding-right: 0.18em; font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-28); font-weight: 800; line-height: 1; font-style: normal; }
.sf-bsy-mit-buehne .sf-bsy-duell .sf-bsy-letzt { display: inline-block; text-decoration: none; color: var(--sf-bsy-b-hellrot); transition: transform 0.4s; }
.sf-bsy-mit-buehne .sf-bsy-hundert .sf-bsy-duell .sf-bsy-letzt { transform: scale(1.45); }
.sf-bsy-mit-buehne .sf-bsy-rang { position: relative; height: 100%; }
.sf-bsy-mit-buehne .sf-bsy-reihe { position: absolute; left: 0; right: 0; display: grid; grid-template-columns: 24px 1fr auto; align-items: center; gap: 10px; height: 32px; border-bottom: 1px solid var(--sf-bsy-b-hauch); opacity: 0; transform: translateY(calc(var(--sf-bsy-platz) * 34px)); transition: transform 0.5s cubic-bezier(0.2, 0.75, 0.2, 1), opacity 0.4s; }
.sf-bsy-mit-buehne .sf-bsy-reihe.sf-da { opacity: 1; }
.sf-bsy-mit-buehne .sf-bsy-nr { font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-18); font-weight: 800; line-height: 1; color: var(--sf-bsy-b-leise); }
.sf-bsy-mit-buehne .sf-bsy-reihe .sf-bsy-name { overflow: hidden; font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-19); font-weight: 800; line-height: 1; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
.sf-bsy-mit-buehne .sf-bsy-reihe .sf-bsy-name small { margin-left: 5px; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-11); font-weight: 600; line-height: 1; letter-spacing: 0.08em; color: var(--sf-bsy-b-leise); }
.sf-bsy-mit-buehne .sf-bsy-rzeit { font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-19); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sf-bsy-mit-buehne .sf-bsy-marke { margin-left: 6px; padding: 3px 6px; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-11); font-weight: 700; line-height: 1; letter-spacing: 0.04em; vertical-align: 2px; }
.sf-bsy-mit-buehne .sf-bsy-marke-auf { background: var(--sf-bsy-b-gruen); color: var(--sf-bsy-b-gruen-tinte); }
.sf-bsy-mit-buehne .sf-bsy-marke-ab { background: var(--sf-bsy-b-hellrot); color: var(--sf-bsy-b-weiss); }
.sf-bsy-mit-buehne .sf-bsy-marke-best { background: var(--sf-bsy-b-blau); color: var(--sf-bsy-b-weiss); }
.sf-bsy-mit-buehne .sf-bsy-reihe.sf-bsy-geist { border-bottom-style: dashed; }
.sf-bsy-mit-buehne .sf-bsy-reihe.sf-bsy-geist .sf-bsy-name { color: var(--sf-bsy-b-leise); }
.sf-bsy-mit-buehne .sf-bsy-reihe.sf-bsy-erste .sf-bsy-name, .sf-bsy-mit-buehne .sf-bsy-reihe.sf-bsy-erste .sf-bsy-rzeit { color: var(--sf-bsy-b-gelb); }
.sf-bsy-mit-buehne .sf-bsy-bkopf { position: absolute; z-index: 10; left: 0; right: 0; top: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px 22px 0 16px; background: linear-gradient(to bottom, var(--sf-bsy-b-nacht-55), var(--sf-bsy-b-nacht-0)); }
.sf-bsy-mit-buehne .sf-bsy-kapleiste { display: grid; gap: 4px; }
.sf-bsy-mit-buehne .sf-bsy-kapbalken { display: flex; align-items: center; height: 14px; padding: 0; background: none; }
.sf-bsy-mit-buehne .sf-bsy-kapbalken > span { display: block; width: 100%; height: 3px; overflow: hidden; border-radius: 2px; background: var(--sf-bsy-b-schnee-28); }
.sf-bsy-mit-buehne .sf-bsy-kapfuell { display: block; width: 100%; height: 100%; background: var(--sf-bsy-b-schnee); transform: scaleX(0); transform-origin: 0 50%; }
.sf-bsy-mit-buehne:not(.sf-bsy-lebt) .sf-bsy-kapbalken:first-child .sf-bsy-kapfuell { transform: scaleX(0.02); }
.sf-bsy-mit-buehne .sf-bsy-bzeile { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.sf-bsy-mit-buehne .sf-bsy-kapitel { flex: 1; min-width: 0; overflow: hidden; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-13); font-weight: 600; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; color: var(--sf-bsy-b-schnee-86); }
.sf-bsy-mit-buehne .sf-bsy-knopf { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--sf-bsy-b-nacht-45); color: var(--sf-bsy-b-schnee); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sf-bsy-mit-buehne .sf-bsy-knopf svg { width: 18px; height: 18px; fill: currentColor; }
.sf-bsy-mit-buehne .sf-bsy-knopf .sf-bsy-linie { fill: none; stroke: currentColor; stroke-width: 1.4; }
.sf-bsy-mit-buehne .sf-bsy-knopf .sf-bsy-zwei, .sf-bsy-mit-buehne .sf-bsy-knopf[data-sf-an="1"] .sf-bsy-eins { display: none; }
.sf-bsy-mit-buehne .sf-bsy-knopf[data-sf-an="1"] .sf-bsy-zwei { display: block; }
.sf-bsy-mit-buehne .sf-bsy-titelblock { position: absolute; z-index: 9; left: 18px; right: 18px; bottom: 17svh; transition: opacity 0.6s, transform 0.8s; }
.sf-bsy-mit-buehne:not(.sf-bsy-anfang) .sf-bsy-titelblock { opacity: 0; transform: translateY(-20px); pointer-events: none; }
.sf-bsy-mit-buehne .sf-bsy-buehne .sf-bsy-btitel.sf-bsy-btitel { margin: 0 0 10px; font-family: var(--sf-display); font-size: min( var(--sf-bsy-b-fs-buehnentitel), calc((100cqi - 36px) / (var(--sf-bsy-laengstes, 6) * 0.6)) ); font-weight: 800; line-height: 0.84; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; color: var(--sf-bsy-b-schnee); }
.sf-bsy-mit-buehne .sf-bsy-btitel-kicker.sf-bsy-btitel-kicker { margin: 0 0 10px; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-13); font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-bsy-b-schnee-86); }
.sf-bsy-mit-buehne .sf-bsy-btext.sf-bsy-btext { max-width: 30ch; margin: 0; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-titeltext); font-weight: 600; line-height: 1.3; color: var(--sf-bsy-b-schnee-92); }
.sf-bsy-mit-buehne .sf-bsy-start { display: none; align-items: center; gap: 14px; margin-top: 22px; padding: 12px 22px 12px 12px; border-radius: 999px; background: var(--sf-bsy-b-schnee); color: var(--sf-bsy-b-nacht); font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-17); font-weight: 700; line-height: 1; text-align: left; box-shadow: 0 10px 40px var(--sf-bsy-b-schatten); }
.sf-bsy-mit-buehne.sf-bsy-lebt .sf-bsy-start { display: inline-flex; }
.sf-bsy-mit-buehne[data-sf-spielt="1"] .sf-bsy-start { display: none; }
.sf-bsy-mit-buehne .sf-bsy-start b { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--sf-bsy-b-rot); }
.sf-bsy-mit-buehne .sf-bsy-start svg { width: 18px; height: 18px; margin-left: 3px; fill: var(--sf-bsy-b-weiss); }
.sf-bsy-mit-buehne .sf-bsy-start small { display: block; margin-top: 4px; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-13); font-weight: 600; line-height: 1.2; color: var(--sf-bsy-b-text-leise); }
.sf-bsy-mit-buehne .sf-bsy-wisch.sf-bsy-wisch { position: absolute; z-index: 6; left: 0; right: 0; bottom: 34px; margin: 0; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-12); font-weight: 600; line-height: 1.3; letter-spacing: 0.1em; text-align: center; text-transform: uppercase; color: var(--sf-bsy-b-schnee-86); transition: opacity 0.5s; pointer-events: none; }
.sf-bsy-mit-buehne[data-sf-spielt="1"] .sf-bsy-wisch, .sf-bsy-mit-buehne:not(.sf-bsy-anfang) .sf-bsy-wisch { opacity: 0; }
.sf-bsy-mit-buehne:not(.sf-bsy-lebt) .sf-bsy-kapleiste, .sf-bsy-mit-buehne:not(.sf-bsy-lebt) .sf-bsy-kapitel, .sf-bsy-mit-buehne:not(.sf-bsy-lebt) .sf-bsy-knopf, .sf-bsy-mit-buehne:not(.sf-bsy-lebt) .sf-bsy-wisch { display: none; }
.sf-bsy-mit-buehne:not(.sf-bsy-lebt) .sf-bsy-bzeile { justify-content: flex-end; }
.sf-bsy-mit-buehne .sf-bsy-wisch svg { display: block; width: 14px; height: 14px; margin: 6px auto 0; fill: none; stroke: currentColor; stroke-width: 1.6; animation: sf-bsy-nicken 1.8s ease-in-out infinite; }
@keyframes sf-bsy-nicken { 50% { transform: translateY(5px); } }
.sf-bsy-mit-buehne .sf-bsy-pausiert { position: absolute; z-index: 8; left: 50%; top: 50%; display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--sf-bsy-b-nacht-55); opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.25s; pointer-events: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sf-bsy-mit-buehne .sf-bsy-pausiert svg { width: 26px; height: 26px; margin-left: 4px; fill: var(--sf-bsy-b-schnee); }
.sf-bsy-mit-buehne.sf-bsy-angehalten .sf-bsy-pausiert { opacity: 1; }
.sf-bsy-mit-buehne .sf-bsy-tippen { position: absolute; inset: 64px 0 0; z-index: 8; display: none; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.sf-bsy-mit-buehne.sf-bsy-lebt .sf-bsy-tippen { display: block; }
.sf-bsy-mit-buehne .sf-bsy-texte { position: relative; z-index: 2; display: grid; gap: 70svh; margin-top: calc(-100svh + var(--sf-kopf-klebt, 0px)); padding: 100svh 0 40svh; pointer-events: none; transition: opacity 0.5s, visibility 0.5s; }
.sf-bsy-mit-buehne.sf-bsy-lebt .sf-bsy-texte { position: absolute; inset: 0; display: block; margin: 0; padding: 0; }
.sf-bsy-mit-buehne[data-sf-spielt="1"]:not([data-sf-stumm="1"]) .sf-bsy-texte { opacity: 0; visibility: hidden; }
.sf-bsy-mit-buehne .sf-bsy-lesekarte { max-width: 440px; margin-inline: 16px; padding: 16px 18px 17px; border-left: 4px solid var(--sf-bsy-b-blau); background: var(--sf-bsy-b-nacht-82); box-shadow: 0 10px 40px var(--sf-bsy-b-schatten); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); pointer-events: auto; }
.sf-bsy-mit-buehne .sf-bsy-einleitung { border-left-color: var(--sf-bsy-b-gelb); }
.sf-bsy-mit-buehne.sf-bsy-lebt .sf-bsy-lesespur { position: absolute; left: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-end; pointer-events: none; }
.sf-bsy-mit-buehne.sf-bsy-lebt .sf-bsy-lesekarte { position: sticky; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); margin: 0 16px; max-width: none; }
.sf-bsy-mit-buehne .sf-bsy-lesekarte p.sf-bsy-lesekarte-text, .sf-bsy-mit-buehne .sf-bsy-texte .sf-bsy-lesekarte p { margin: 0; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-18); font-weight: 400; line-height: 1.5; color: var(--sf-bsy-b-schnee); }
.sf-bsy-mit-buehne .sf-bsy-texte .sf-bsy-einleitung p { font-size: var(--sf-bsy-b-fs-19); font-weight: 600; }
@container sf-bsy (min-width: 900px) {
.sf-bsy-mit-buehne .sf-bsy-typo, .sf-bsy-mit-buehne .sf-bsy-titelblock { left: 6cqi; right: 6cqi; }
.sf-bsy-mit-buehne .sf-bsy-szene .sf-bsy-szene-bild.sf-bsy-szene-bild { object-position: var(--sf-bsy-desk, 50% 50%); }
.sf-bsy-mit-buehne .sf-bsy-ein-unten { right: auto; left: 48px; bottom: 48px; width: 440px; }
.sf-bsy-mit-buehne .sf-bsy-ein-oben { left: auto; right: 48px; width: 360px; }
.sf-bsy-mit-buehne .sf-bsy-tf-kopfzeile { left: 50%; width: 640px; transform: translateX(-320px); }
.sf-bsy-mit-buehne .sf-bsy-tf-satz.sf-bsy-tf-satz { font-size: var(--sf-bsy-b-fs-22); }
.sf-bsy-mit-buehne .sf-bsy-lesekarte { width: min(380px, 28cqi); margin-left: auto; margin-right: 3cqi; }
.sf-bsy-mit-buehne.sf-bsy-lebt .sf-bsy-lesekarte { margin: 0 3cqi 0 auto; width: min(380px, 28cqi); }
}
.sf-bsy .sf-bsy-danach { display: grid; gap: 48px; padding: 48px 16px 64px; background: var(--sf-bsy-b-schnee); color: var(--sf-bsy-b-tinte); }
.sf-bsy .sf-bsy-danach > .sf-bsy-anker { width: 100%; max-width: 1080px; margin-inline: auto; scroll-margin-top: calc(var(--sf-kopf-klebt, 0px) + 16px); }
.sf-bsy .sf-bsy-danach > .sf-bsy-anker > .sf-bsy-station { min-height: 0; padding: 0; background: none; color: var(--sf-bsy-b-tinte); }
.sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-titel-klein.sf-bsy-titel-klein, .sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-titel.sf-bsy-titel { font-size: var(--sf-bsy-b-fs-danach-titel); line-height: 0.95; color: var(--sf-bsy-b-tinte); }
.sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-kicker.sf-bsy-kicker { color: var(--sf-bsy-b-sf); }
.sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-text.sf-bsy-text { max-width: 60ch; color: var(--sf-bsy-b-text-hell); }
.sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-fuss.sf-bsy-fuss, .sf-bsy .sf-bsy-danach .sf-bsy-land, .sf-bsy .sf-bsy-danach .sf-bsy-platz, .sf-bsy .sf-bsy-danach .sf-bsy-aufholer-text, .sf-bsy .sf-bsy-danach .sf-bsy-weg-satz { color: var(--sf-bsy-b-text-leise); }
.sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-zeile { padding-bottom: 7px; border-bottom: 1px solid var(--sf-bsy-b-linie); }
.sf-bsy .sf-bsy-danach .sf-bsy-balken { background: var(--sf-bsy-b-linie); }
.sf-bsy .sf-bsy-danach .sf-bsy-balken-wert { background: var(--sf-bsy-b-sf); }
.sf-bsy .sf-bsy-danach .sf-bsy-zeile-sieg .sf-bsy-platz, .sf-bsy .sf-bsy-danach .sf-bsy-zeile-sieg .sf-bsy-zeit { color: var(--sf-bsy-b-sf); }
.sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-aufholer-eintrag { border: 1px solid var(--sf-bsy-b-linie); border-radius: 0; background: var(--sf-bsy-b-weiss); }
.sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-produkt-link { padding: 0; border-radius: 0; background: none; }
.sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-produkt-bild.sf-bsy-produkt-bild { padding: 10px; border: 1px solid var(--sf-bsy-b-linie); background: var(--sf-bsy-b-weiss); mix-blend-mode: normal; }
.sf-bsy .sf-bsy-danach .sf-bsy-produkt-modell { color: var(--sf-bsy-b-sf); }
.sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-weg { border: 1px solid var(--sf-bsy-b-linie); border-radius: 0; background: var(--sf-bsy-b-weiss); color: var(--sf-bsy-b-tinte); }
.sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-knopf-hell { background: var(--sf-bsy-b-tinte); color: var(--sf-bsy-b-schnee); }
.sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-knopf-dunkel { margin-inline: 0; }
.sf-bsy .sf-bsy-danach .sf-bsy-hang-kopf { padding: 0; }
.sf-bsy .sf-bsy-danach .sf-bsy-bildstation::before { display: none; }
.sf-bsy .sf-bsy-danach .sf-bsy-bildstation .sf-bsy-bild.sf-bsy-bild { position: static; height: auto; aspect-ratio: 16 / 10; }
.sf-bsy .sf-bsy-danach .sf-bsy-inhalt { padding: 14px 0 0; }
.sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-nachweis { position: static; max-width: none; text-align: left; color: var(--sf-bsy-b-text-leise); text-shadow: none; }
.sf-bsy .sf-bsy-danach .sf-bsy-zahl-wert.sf-bsy-zahl-wert { color: var(--sf-bsy-b-tinte); }
@container sf-bsy (min-width: 760px) {
.sf-bsy .sf-bsy-danach { gap: 64px; padding: 72px 40px 88px; }
.sf-bsy .sf-bsy-danach > .sf-bsy-anker > .sf-bsy-station { padding: 0; }
.sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-titel-klein.sf-bsy-titel-klein, .sf-bsy .sf-bsy-danach .sf-bsy-station .sf-bsy-titel.sf-bsy-titel { font-size: var(--sf-bsy-b-fs-danach-titel-breit); }
}
.sf-bsy .sf-bsy-lesen { display: grid; gap: 28px; padding: 32px 22px 44px; background: var(--sf-bsy-nacht); }
.sf-bsy .sf-bsy-lesen-schritt { display: grid; gap: 12px; max-width: 720px; margin-inline: auto; }
.sf-bsy .sf-bsy-lesen-figur { margin: 0; }
.sf-bsy .sf-bsy-lesen .sf-bsy-lesen-bild.sf-bsy-lesen-bild { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.sf-bsy .sf-bsy-lesen-nachweis { margin-top: 6px; font-size: var(--sf-size-11); color: var(--sf-bsy-grau); }
.sf-bsy .sf-bsy-lesen .sf-bsy-lesen-text.sf-bsy-lesen-text { margin: 0; font-size: var(--sf-bsy-fs-text); line-height: 1.5; color: var(--sf-bsy-schnee); }
.sf-bsy .sf-bsy-lesen-einleitung .sf-bsy-lesen-text.sf-bsy-lesen-text { font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
.sf-bsy-mit-buehne .sf-bsy-szene .sf-bsy-szene-bild.sf-bsy-szene-bild { transform: none; }
.sf-bsy-mit-buehne .sf-bsy-flocke, .sf-bsy-mit-buehne .sf-bsy-boe, .sf-bsy-mit-buehne .sf-bsy-wisch svg { animation: none; }
.sf-bsy-mit-buehne .sf-bsy-w { transform: none; transition: opacity 0.3s; }
.sf-bsy-mit-buehne .sf-bsy-ein { transform: none; transition: opacity 0.2s; }
}
.sf-bsy .sf-bsy-einstieg { display: grid; gap: 20px; padding: 8px 16px 32px; background: var(--sf-bsy-b-papier); color: var(--sf-bsy-b-tinte); }
.sf-bsy .sf-bsy-einstieg .sf-bsy-einstieg-kicker.sf-bsy-einstieg-kicker { margin: 0; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-13); font-weight: 700; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-bsy-b-sf); }
.sf-bsy .sf-bsy-einstieg .sf-bsy-einstieg-titel.sf-bsy-einstieg-titel { margin: 8px 0 12px; font-family: var(--sf-display); font-size: min( var(--sf-bsy-b-fs-einstieg-titel), calc((100cqi - 32px) / (var(--sf-bsy-laengstes, 6) * 0.6)) ); font-weight: 800; line-height: 0.92; letter-spacing: -0.005em; text-transform: uppercase; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; color: var(--sf-bsy-b-tinte); }
.sf-bsy .sf-bsy-einstieg .sf-bsy-einstieg-teaser.sf-bsy-einstieg-teaser { max-width: 40ch; margin: 0; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-einstieg-teaser); line-height: 1.45; color: var(--sf-bsy-b-text-mittel); }
.sf-bsy .sf-bsy-einstieg .sf-bsy-wege { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.sf-bsy .sf-bsy-einstieg .sf-bsy-weg-start { display: inline-flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 22px 8px 8px; border-radius: 999px; background: var(--sf-bsy-b-tinte); color: var(--sf-bsy-b-papier); font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-16); font-weight: 700; line-height: 1.15; text-decoration: none; }
.sf-bsy .sf-bsy-einstieg .sf-bsy-weg-start small { display: block; font-size: var(--sf-bsy-b-fs-12); font-weight: 600; opacity: 0.75; }
.sf-bsy .sf-bsy-einstieg .sf-bsy-weg-punkt { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--sf-bsy-b-rot); }
.sf-bsy .sf-bsy-einstieg .sf-bsy-weg-punkt svg { width: 14px; height: 14px; margin-left: 2px; fill: var(--sf-bsy-b-weiss); }
.sf-bsy .sf-bsy-einstieg .sf-bsy-weg-direkt { display: inline-flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 20px; border: 2px solid var(--sf-bsy-b-tinte); border-radius: 999px; color: var(--sf-bsy-b-tinte); font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-16); font-weight: 700; text-decoration: none; }
.sf-bsy .sf-bsy-einstieg .sf-bsy-weg-direkt svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sf-bsy .sf-bsy-einstieg .sf-bsy-einstieg-figur { margin: 0; }
.sf-bsy .sf-bsy-einstieg .sf-bsy-einstieg-bild.sf-bsy-einstieg-bild { display: block; width: 100%; height: auto; max-width: none; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; }
.sf-bsy .sf-bsy-einstieg .sf-bsy-einstieg-nachweis { margin-top: 6px; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-11); color: var(--sf-bsy-b-text-leise); }
.sf-bsy .sf-bsy-einstieg .sf-bsy-uebersicht { padding-top: 16px; border-top: 1px solid var(--sf-bsy-b-linie); }
.sf-bsy .sf-bsy-einstieg .sf-bsy-uebersicht-kopf.sf-bsy-uebersicht-kopf { margin: 0; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-13); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-bsy-b-sf); }
.sf-bsy .sf-bsy-einstieg .sf-bsy-uebersicht-kopf span { color: var(--sf-bsy-b-text-leise); }
.sf-bsy .sf-bsy-einstieg .sf-bsy-uebersicht-kapitel.sf-bsy-uebersicht-kapitel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; margin: 8px 0 0; padding: 0; list-style: none; counter-reset: sf-bsy-kap; }
.sf-bsy .sf-bsy-einstieg .sf-bsy-uebersicht-kapitel li { margin: 0; counter-increment: sf-bsy-kap; }
.sf-bsy .sf-bsy-einstieg .sf-bsy-uebersicht-kapitel a { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: baseline; min-height: 44px; padding: 10px 0; border-bottom: 1px solid var(--sf-bsy-b-papier-2); font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-15); line-height: 1.3; color: var(--sf-bsy-b-tinte); text-decoration: none; }
.sf-bsy .sf-bsy-einstieg .sf-bsy-uebersicht-kapitel a::before { content: counter(sf-bsy-kap); font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-18); font-weight: 800; color: var(--sf-bsy-b-sf); }
.sf-bsy .sf-bsy-einstieg .sf-bsy-uebersicht-danach.sf-bsy-uebersicht-danach { margin: 14px 0 0; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-15); line-height: 1.6; color: var(--sf-bsy-b-text-mittel); }
.sf-bsy .sf-bsy-einstieg .sf-bsy-uebersicht-danach a { color: var(--sf-bsy-b-sf); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
@container sf-bsy (min-width: 760px) {
.sf-bsy .sf-bsy-einstieg { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); align-items: center; gap: 24px 40px; padding: 16px 0 40px; }
.sf-bsy .sf-bsy-einstieg .sf-bsy-uebersicht { grid-column: 1 / -1; }
.sf-bsy .sf-bsy-einstieg .sf-bsy-einstieg-titel.sf-bsy-einstieg-titel { font-size: min( var(--sf-bsy-b-fs-einstieg-titel), calc((48cqi - 32px) / (var(--sf-bsy-laengstes, 6) * 0.6)) ); }
.sf-bsy .sf-bsy-einstieg .sf-bsy-uebersicht-kapitel.sf-bsy-uebersicht-kapitel { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 24px; }
}
.sf-bsy-mit-buehne .sf-bsy-ueberspringen { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--sf-bsy-b-schnee-28); border-radius: 999px; background: var(--sf-bsy-b-nacht-45); color: var(--sf-bsy-b-schnee); font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-12); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.sf-bsy-mit-buehne .sf-bsy-ueberspringen svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.sf-bsy-mit-buehne .sf-bsy-ueberspringen-lang { display: none; }
@container sf-bsy (min-width: 480px) {
.sf-bsy-mit-buehne .sf-bsy-ueberspringen-lang { display: inline; }
.sf-bsy-mit-buehne .sf-bsy-ueberspringen-kurz { display: none; }
}
.sf-bsy .sf-bsy-ende { height: 1px; }
.sf-bsy .sf-bsy-danach, .sf-bsy .sf-bsy-ende { scroll-margin-top: calc(var(--sf-kopf-klebt, 0px) + 8px); }
.sf-bsy-mit-buehne .sf-bsy-produktlage { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.sf-bsy-mit-buehne .sf-bsy-pmoment { position: absolute; left: 16px; right: 16px; max-width: 440px; opacity: 0; transform: translateY(14px); transition: opacity 0.55s ease, transform 0.55s ease, bottom 0.35s ease; pointer-events: none; }
.sf-bsy-mit-buehne .sf-bsy-pmoment.sf-an { opacity: 1; transform: none; pointer-events: auto; }
.sf-bsy-mit-buehne .sf-bsy-pmoment-unten { bottom: calc(env(safe-area-inset-bottom, 0px) + 40px); }
.sf-bsy-mit-buehne .sf-bsy-pmoment-oben { top: calc(var(--sf-bsy-kopf) + 6px); }
.sf-bsy .sf-bsy-pliste.sf-bsy-pliste { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-bsy .sf-bsy-pmoment-reihe .sf-bsy-pliste.sf-bsy-pliste, .sf-bsy .sf-bsy-lesen-produkte .sf-bsy-pliste.sf-bsy-pliste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bsy .sf-bsy-pkarte { margin: 0; }
.sf-bsy .sf-bsy-pkarte .sf-bsy-pkarte-link { display: grid; grid-template-columns: 76px minmax(0, 1fr); align-items: center; gap: 12px; height: 100%; min-height: 96px; padding: 10px 14px 10px 10px; border-radius: 6px; background: var(--sf-bsy-b-papier); color: var(--sf-bsy-b-tinte); text-decoration: none; box-shadow: 0 10px 30px var(--sf-bsy-b-schatten); }
.sf-bsy .sf-bsy-pkarte-bildrahmen { display: block; width: 76px; height: 76px; background: var(--sf-bsy-b-papier); }
.sf-bsy .sf-bsy-pkarte .sf-bsy-pkarte-bild.sf-bsy-pkarte-bild { width: 100%; height: 100%; max-width: none; object-fit: contain; }
.sf-bsy .sf-bsy-pkarte-text { display: grid; gap: 2px; min-width: 0; font-family: var(--sf-body); }
.sf-bsy .sf-bsy-pkarte-text small { font-size: var(--sf-bsy-b-fs-12); line-height: 1.25; color: var(--sf-bsy-b-text-leise); }
.sf-bsy .sf-bsy-pkarte-text b { font-family: var(--sf-display); font-size: var(--sf-bsy-b-fs-22); font-weight: 800; line-height: 1; text-transform: uppercase; }
.sf-bsy .sf-bsy-pkarte-text span { overflow: hidden; font-size: var(--sf-bsy-b-fs-14); line-height: 1.3; text-overflow: ellipsis; }
.sf-bsy .sf-bsy-pkarte-text em { margin-top: 2px; font-size: var(--sf-bsy-b-fs-13); font-style: normal; font-weight: 700; color: var(--sf-bsy-b-sf); }
.sf-bsy .sf-bsy-pkarte-text em::after { content: " →"; }
.sf-bsy .sf-bsy-pmoment-reihe .sf-bsy-pkarte .sf-bsy-pkarte-link, .sf-bsy .sf-bsy-lesen-produkte .sf-bsy-pkarte .sf-bsy-pkarte-link { grid-template-columns: 1fr; justify-items: start; gap: 6px; min-height: 0; padding: 8px 10px 10px; }
.sf-bsy .sf-bsy-pmoment-reihe .sf-bsy-pkarte-bildrahmen, .sf-bsy .sf-bsy-lesen-produkte .sf-bsy-pkarte-bildrahmen { width: 100%; height: 64px; }
.sf-bsy .sf-bsy-pmoment-reihe .sf-bsy-pkarte-text small { display: none; }
.sf-bsy .sf-bsy-pmoment-reihe .sf-bsy-pkarte-text b { font-size: var(--sf-bsy-b-fs-18); }
.sf-bsy .sf-bsy-lesen-produkte { display: grid; gap: 8px; margin-top: 6px; }
.sf-bsy .sf-bsy-lesen-produkte .sf-bsy-h-kicker.sf-bsy-h-kicker { margin: 0; font-family: var(--sf-body); font-size: var(--sf-bsy-b-fs-13); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-bsy-eis); }
@container sf-bsy (min-width: 900px) {
.sf-bsy-mit-buehne .sf-bsy-pmoment-unten { left: 48px; right: auto; bottom: 48px; width: 440px; }
.sf-bsy-mit-buehne .sf-bsy-pmoment-oben { left: auto; right: 48px; width: 400px; }
.sf-bsy-mit-buehne .sf-bsy-pmoment-reihe.sf-bsy-pmoment-oben, .sf-bsy-mit-buehne .sf-bsy-pmoment-reihe.sf-bsy-pmoment-unten { width: 620px; max-width: none; }
.sf-bsy .sf-bsy-pmoment-reihe .sf-bsy-pliste.sf-bsy-pliste, .sf-bsy .sf-bsy-lesen-produkte .sf-bsy-pliste.sf-bsy-pliste { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sf-bsy-mit-buehne .sf-bsy-ein-unten, .sf-bsy-mit-buehne .sf-bsy-typo-unten, .sf-bsy-mit-buehne .sf-bsy-feld, .sf-bsy-mit-buehne .sf-bsy-bnachweis, .sf-bsy-mit-buehne .sf-bsy-titelblock { transition-property: opacity, transform, bottom, top; transition-duration: 0.55s, 0.55s, 0.35s, 0.7s; }
.sf-bsy-mit-buehne.sf-bsy-lesen .sf-bsy-ein-unten, .sf-bsy-mit-buehne.sf-bsy-lesen .sf-bsy-pmoment-unten { bottom: max( calc(env(safe-area-inset-bottom, 0px) + 40px), calc(var(--sf-bsy-lesehoehe, 0px) + 40px) ); }
.sf-bsy-mit-buehne.sf-bsy-lesen .sf-bsy-typo-unten { bottom: max(13svh, calc(var(--sf-bsy-lesehoehe, 0px) + 20px)); }
.sf-bsy-mit-buehne.sf-bsy-lesen .sf-bsy-feld { bottom: max( calc(34px + env(safe-area-inset-bottom, 0px)), calc(var(--sf-bsy-lesehoehe, 0px) + 12px) ); }
.sf-bsy-mit-buehne.sf-bsy-lesen .sf-bsy-bnachweis.sf-bsy-bnachweis { bottom: max( calc(env(safe-area-inset-bottom, 0px) + 8px), calc(var(--sf-bsy-lesehoehe, 0px) + 6px) ); }
.sf-bsy-mit-buehne.sf-bsy-lesen .sf-bsy-titelblock { bottom: max(17svh, calc(var(--sf-bsy-lesehoehe, 0px) + 16px)); }
.sf-bsy-mit-buehne .sf-bsy-lesekarte { transition: opacity 0.15s linear; }
/* stage.css */
.sf-dynamik .sf-content-stage .sf-stage-rail { flex-wrap: wrap; }
.sf-dynamik .sf-content-stage .sf-carousel-tabs { grid-template-columns: repeat(var(--sf-slide-count, 6), minmax(0, 1fr)); flex-basis: 100%; }
.sf-dynamik .sf-content-stage .sf-carousel-tabs :is(button, a) { padding: 10px 12px; font-size: var(--sf-size-12); min-height: 58px; }
.sf-dynamik .sf-content-stage .sf-carousel-tabs small { display: block; font-size: var(--sf-size-9); text-transform: var(--sf-label-case); letter-spacing: 0.1em; margin-top: 3px; }
.sf-dynamik .sf-content-stage .sf-carousel-controls { margin-left: auto; padding: 6px 0; gap: 12px; }
.sf-dynamik .sf-content-stage .sf-carousel-controls button { width: 32px; height: 32px; }
.sf-dynamik .sf-stage-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.sf-dynamik .sf-stage-photo--deal { object-fit: contain; background: var(--sf-tint-violet-100); }
.sf-dynamik :is(.sf-content-stage[data-ad], .sf-stage-slide[data-ad]) { --sf-event: #eae6dc; --sf-on-event: #2b3026; }
.sf-dynamik :is(.sf-content-stage[data-ad], .sf-stage-slide[data-ad]) .sf-hero-copy :is(h1, .sf-stage-title) { font-weight: 600; letter-spacing: -0.03em; font-size: calc(clamp(38px, 4.2vw, 64px) * var(--sf-display-scale)); line-height: 1.02; }
.sf-dynamik .sf-stage-brand { width: 190px; max-width: 80%; height: 35px; object-fit: contain; object-position: left; margin: 12px 0; }
.sf-dynamik .sf-content-stage .sf-home-hero { animation: sf-stage-enter 0.45s ease-out; }
@keyframes sf-stage-enter { from { opacity: 0.7; } to { opacity: 1; } }
@media (max-width: 900px) {
.sf-dynamik .sf-content-stage .sf-carousel-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-dynamik .sf-content-stage .sf-carousel-tabs :is(button, a) { min-height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
.sf-dynamik .sf-content-stage .sf-home-hero { animation: none; }
}
.sf-dynamik :is(.sf-content-stage[data-ad], .sf-stage-slide[data-ad]) .sf-hero-copy :is(h1, .sf-stage-title) { font-family: var(--sf-ui-arial); font-size: calc(clamp(32px, 3.4vw, 50px) * var(--sf-display-scale)); line-height: 1.03; }
.sf-dynamik .sf-content-stage .sf-stage-brand { height: 24px; width: 165px; margin: 0 0 8px; }
.sf-dynamik .sf-content-stage .sf-stage-brand--page { height: 40px; width: 260px; margin: 4px 0 14px; }
.sf-dynamik :is(.sf-content-stage[data-ad], .sf-stage-slide[data-ad]) .sf-hero-copy > p:not(.sf-eyebrow) { font-size: var(--sf-size-15); margin: 12px 0 18px; }
@media (max-width: 640px) {
.sf-dynamik .sf-section-heading { flex-direction: column; align-items: flex-start; gap: 12px; }
}
.sf-dynamik .sf-stage-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; scrollbar-width: none; }
.sf-dynamik .sf-stage-track::-webkit-scrollbar { display: none; }
.sf-dynamik .sf-stage-track > .sf-home-hero { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; animation: none; }
.sf-dynamik .sf-stage-slide.sf-area-scope { --sf-event: var(--sf-campaign-accent, var(--sf-section-accent)); --sf-on-event: var(--sf-campaign-on-accent, white); }
.sf-dynamik .sf-carousel-tabs a { color: inherit; text-decoration: none; }
@media (prefers-reduced-motion: reduce) {
.sf-dynamik .sf-stage-track { scroll-behavior: auto; }
}
/* pulse.css */
.sf-dynamik .sf-pulse { margin-block: var(--sf-section); border-top: 2px solid var(--sf-ink); padding-top: 12px; }
.sf-dynamik .sf-pulse-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.sf-dynamik .sf-pulse-heading h2, .sf-dynamik .sf-pulse-heading h1 { font: var(--sf-heading-weight) calc(clamp(30px, 3vw, 42px) * var(--sf-display-scale))/1 var(--sf-display); margin: 0; text-transform: var(--sf-heading-case); }
.sf-dynamik .sf-pulse-heading em { color: var(--sf-blue); }
.sf-dynamik .sf-pulse-heading p { margin: 6px 0 0; color: var(--sf-muted); font-size: var(--sf-size-14); }
.sf-dynamik .sf-pulse-heading > a { font-size: var(--sf-size-14); font-weight: 700; white-space: nowrap; }
.sf-dynamik .sf-pulse-item { border-top: 3px solid var(--sf-section-accent); padding: 14px 0; min-width: 0; }
.sf-dynamik .sf-pulse-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: var(--sf-size-11); font-weight: 700; color: var(--sf-section-accent); }
.sf-dynamik .sf-pulse-meta time { color: var(--sf-muted); white-space: nowrap; }
.sf-dynamik .sf-pulse-item :is(h2, h3) { font: var(--sf-heading-weight) calc(27px * var(--sf-display-scale))/1.08 var(--sf-display); text-transform: var(--sf-heading-case); margin: 12px 0 8px; }
.sf-dynamik .sf-pulse-item p { font-size: var(--sf-size-15); line-height: 1.55; margin: 0 0 12px; color: var(--sf-text); }
.sf-dynamik .sf-pulse-next { font-size: var(--sf-size-13); font-weight: 700; }
.sf-dynamik .sf-pulse-next span { color: var(--sf-section-accent); margin-left: 6px; }
.sf-dynamik .sf-pulse-note { display: block; color: var(--sf-muted); font-size: var(--sf-size-11); margin: 8px 0 16px; }
.sf-dynamik .sf-pulse-page { padding-block: 20px var(--sf-section); }
.sf-dynamik .sf-pulse-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.sf-dynamik .sf-pulse-filters button { border: 1px solid var(--sf-line); padding: 8px 12px; font: inherit; font-size: var(--sf-size-13); background: var(--sf-white); color: var(--sf-ink); cursor: pointer; }
.sf-dynamik .sf-pulse-filters button[aria-pressed="true"] { background: var(--sf-ink); color: var(--sf-white); }
.sf-dynamik .sf-pulse-feed { max-width: var(--sf-reading); }
.sf-dynamik .sf-pulse-page > .sf-pulse-item { max-width: var(--sf-reading); }
.sf-dynamik .sf-pulse-back { display: inline-block; margin-top: 20px; }
.sf-dynamik .sf-pulse-logo { display: block; width: 200px; height: auto; max-width: 100%; }
@media (max-width: 500px) {
.sf-dynamik .sf-pulse-heading { flex-wrap: wrap; gap: 12px; }
.sf-dynamik .sf-pulse-logo { width: 180px; }
}
.sf-dynamik .sf-pulse > .sf-pulse-heading { margin-bottom: 12px; gap: 12px; }
.sf-dynamik .sf-pulse > .sf-pulse-heading > div:first-child { display: flex; align-items: center; gap: 18px; }
.sf-dynamik .sf-pulse .sf-pulse-logo { width: 145px; }
.sf-dynamik .sf-pulse .sf-pulse-heading p { margin: 0; font-size: var(--sf-size-13); }
.sf-dynamik .sf-pulse-controls { display: flex; align-items: center; gap: 8px; }
.sf-dynamik .sf-pulse-controls a { font-size: var(--sf-size-13); font-weight: 700; margin-right: 12px; white-space: nowrap; }
.sf-dynamik .sf-pulse-controls button { width: 36px; height: 36px; padding: 0; border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-ink); font: calc(22px * var(--sf-display-scale))/1 var(--sf-body); cursor: pointer; }
.sf-dynamik .sf-pulse-controls button:disabled { opacity: 0.3; cursor: default; }
.sf-dynamik .sf-pulse-controls button:hover:not(:disabled) { background: var(--sf-surface); }
.sf-dynamik .sf-pulse-grid { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px) / 3.12); gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 0 2px 10px; scrollbar-width: thin; scrollbar-color: var(--sf-line) transparent; }
.sf-dynamik .sf-pulse-grid .sf-pulse-item { scroll-snap-align: start; display: flex; flex-direction: column; }
.sf-dynamik .sf-pulse-grid .sf-pulse-next { margin-top: auto; }
.sf-dynamik .sf-pulse-grid:focus-visible { outline: 2px solid var(--sf-blue); outline-offset: 4px; }
@media (max-width: 1000px) {
.sf-dynamik .sf-pulse-grid { grid-auto-columns: calc((100% - 40px) / 2.12); gap: 20px; }
}
@media (max-width: 600px) {
.sf-dynamik .sf-pulse-grid { grid-auto-columns: 87%; gap: 16px; }
.sf-dynamik .sf-pulse > .sf-pulse-heading { flex-wrap: nowrap; }
.sf-dynamik .sf-pulse .sf-pulse-heading p { display: none; }
.sf-dynamik .sf-pulse .sf-pulse-logo { width: 110px; }
.sf-dynamik .sf-pulse-controls { gap: 5px; }
.sf-dynamik .sf-pulse-controls a { margin-right: 4px; font-size: var(--sf-size-12); }
.sf-dynamik .sf-pulse-controls button { width: 30px; height: 34px; }
}
.sf-dynamik .sf-pulse-item[data-section-area="editorial"] { --sf-section-accent: var(--sf-blue); }
/* club.css */
.sf-dynamik .sf-club-block { container: sf-club / inline-size; }
.sf-dynamik .sf-club-head { max-width: 62ch; margin-bottom: 28px; }
.sf-dynamik .sf-club-head h2 { font-size: var(--sf-section-title); line-height: 1.02; }
.sf-dynamik .sf-club-head p { margin-top: 14px; font-size: var(--sf-size-17); line-height: 1.55; color: var(--sf-neutral-700); text-wrap: pretty; }
.sf-dynamik .sf-club-link { font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-section-accent, var(--sf-club)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sf-dynamik .sf-club-link:hover { text-decoration-thickness: 2px; }
.sf-dynamik .sf-club-links { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; margin-top: 28px; }
.sf-dynamik .sf-club-note { max-width: 70ch; margin-top: 18px; font-size: var(--sf-size-14); line-height: 1.55; color: var(--sf-neutral-650); }
.sf-dynamik .sf-club-stage-film { min-width: 0; }
.sf-dynamik .sf-club-stage-film .sf-hub-blocks, .sf-dynamik .sf-club-stage-film .sf-block-image { width: 100%; max-width: none; margin: 0; padding: 0; }
.sf-dynamik .sf-club-stage-film .sf-hub-blocks > div { margin: 0; }
.sf-dynamik .sf-club-stage-film .sf-hub-video { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--sf-ink); }
.sf-dynamik .sf-club-stage-film figcaption { padding: var(--sf-hm-s2) 0 0; font-size: var(--sf-hb-fein); line-height: 1.4; color: var(--sf-muted); }
.sf-dynamik .sf-club-stufen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-dynamik .sf-club-stufe { display: grid; gap: 4px; padding: 14px 16px; border-top: 4px solid var(--sf-club-member); }
.sf-dynamik .sf-club-stufe + .sf-club-stufe { border-left: 0; }
.sf-dynamik .sf-club-stufe[data-sf-level="premium"] { border-top-color: var(--sf-club-premium); }
.sf-dynamik .sf-club-stufe[data-sf-level="vip"] { border-top-color: var(--sf-club-vip); }
.sf-dynamik .sf-club-stufe strong { font-family: var(--sf-display); font-size: var(--sf-club-sub); line-height: 1.05; color: var(--sf-ink); }
.sf-dynamik .sf-club-stufe-ab { font-size: var(--sf-size-13); color: var(--sf-neutral-650); }
.sf-dynamik .sf-club-stufe-ab b { color: var(--sf-ink); }
.sf-dynamik .sf-club-stufe-kern { font-size: var(--sf-size-14); line-height: 1.4; color: var(--sf-neutral-900); text-wrap: pretty; }
.sf-dynamik .sf-club-tiers .sf-club-links { margin-top: 16px; }
@container sf-club (min-width: 300px) {
.sf-dynamik .sf-club-stufen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-dynamik .sf-club-stufe { padding: 12px 10px; }
.sf-dynamik .sf-club-stufe + .sf-club-stufe { border-left: 1px solid var(--sf-line); }
}
@container sf-club (min-width: 720px) {
.sf-dynamik .sf-club-stufe { padding: 18px 22px; }
}
.sf-dynamik .sf-club-offers h2 { margin-bottom: 22px; font-size: var(--sf-section-title); line-height: 1.02; }
.sf-dynamik .sf-club-entries { list-style: none; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0 1px 1px 0; }
.sf-dynamik .sf-club-entry { min-width: 0; margin: 0 -1px -1px 0; background: var(--sf-white); border: 1px solid var(--sf-line); }
.sf-dynamik .sf-club-entry a { display: flex; flex-direction: column; justify-content: center; gap: 3px; height: 100%; min-height: 52px; padding: 7px 10px; color: var(--sf-neutral-900); transition: background var(--sf-motion); }
.sf-dynamik .sf-club-entry a:hover { background: var(--sf-section-tint, var(--sf-club-tint)); }
.sf-dynamik .sf-club-entry a:focus-visible { outline: 3px solid var(--sf-blue); outline-offset: -3px; }
.sf-dynamik .sf-club-entry-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-dynamik .sf-club-entry-kind { font-size: var(--sf-size-12); line-height: 1.2; color: var(--sf-neutral-610); }
.sf-dynamik .sf-club-entry-mark { display: flex; align-items: center; min-width: 0; min-height: 22px; }
.sf-dynamik .sf-club-entry-mark img { display: block; width: auto; height: 20px; max-width: 100%; object-fit: contain; object-position: left center; }
.sf-dynamik .sf-club-entry-mark span { font: var(--sf-heading-weight) var(--sf-club-mark) / 1.05 var(--sf-display); text-transform: var(--sf-heading-case); letter-spacing: 0.01em; overflow-wrap: anywhere; }
.sf-dynamik .sf-club-entry-until { font-size: var(--sf-size-12); line-height: 1.3; color: var(--sf-neutral-610); white-space: nowrap; }
@container sf-club (min-width: 560px) {
.sf-dynamik .sf-club-entry a { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; min-height: 60px; padding: 10px 16px; }
.sf-dynamik .sf-club-entry-mark img { height: 24px; max-width: 120px; }
.sf-dynamik .sf-club-entry-until { flex-shrink: 0; font-size: var(--sf-size-13); white-space: nowrap; }
}
@container sf-club (min-width: 900px) {
.sf-dynamik .sf-club-entries { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-dynamik .sf-club-entry a { min-height: 64px; padding: 12px 20px; }
.sf-dynamik .sf-club-entry-mark img { height: 26px; max-width: 132px; }
}
.sf-dynamik .sf-club-go { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 32px; margin-top: -1px; padding: 16px; background: var(--sf-section-tint, var(--sf-club-tint)); border: 1px solid var(--sf-line); }
.sf-dynamik .sf-club-go p { flex: 1 1 280px; max-width: 62ch; font-size: var(--sf-size-15); line-height: 1.5; color: var(--sf-neutral-900); text-wrap: pretty; }
.sf-dynamik .sf-club-go .sf-action { flex-shrink: 0; }
.sf-dynamik .sf-club-head + .sf-club-go { margin-top: 0; padding: clamp(20px, 3vw, 32px); border: 0; border-left: 6px solid var(--sf-section-accent, var(--sf-club)); }
@container sf-club (min-width: 900px) {
.sf-dynamik .sf-club-go { padding: 18px 20px; }
}
.sf-dynamik .sf-club-more { margin-top: 28px; }
.sf-dynamik .sf-club-more h3 { margin-bottom: 12px; font-size: var(--sf-club-sub); line-height: 1.05; }
.sf-dynamik .sf-club-entries[data-sf-kind="deals"] { grid-template-columns: minmax(0, 1fr); }
.sf-dynamik .sf-club-entries[data-sf-kind="deals"] .sf-club-entry a { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 10px 12px; }
.sf-dynamik .sf-club-entries[data-sf-kind="deals"] .sf-club-entry-mark span { font: 700 var(--sf-size-15) / 1.3 var(--sf-body); text-transform: none; letter-spacing: 0; }
.sf-dynamik .sf-club-entries[data-sf-kind="deals"] .sf-club-entry-until { flex-shrink: 0; white-space: nowrap; }
@container sf-club (min-width: 900px) {
.sf-dynamik .sf-club-entries[data-sf-kind="deals"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-dynamik .sf-club-entries[data-sf-kind="deals"] .sf-club-entry a { padding: 12px 20px; }
}
.sf-dynamik .sf-club-editorial { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-section) 64px; max-width: 860px; }
.sf-dynamik .sf-club-questions .sf-hub-blocks > div + div { margin-top: 22px; }
.sf-dynamik .sf-club-questions h2 { font-size: var(--sf-section-title); line-height: 1.02; margin-bottom: 8px; color: var(--sf-ink); }
.sf-dynamik .sf-club-teaser .sf-club-intro { margin-bottom: 20px; }
.sf-dynamik .sf-club-kapitel { margin: 0; font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-club)); }
.sf-dynamik .sf-club-head .sf-club-kapitel { margin: 0 0 8px; font-size: var(--sf-size-12); line-height: 1.3; color: var(--sf-section-accent, var(--sf-club)); }
.sf-dynamik .sf-club-codes { display: grid; gap: 0; border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-dynamik .sf-club-codes-gruppe { padding: 14px 16px 16px; }
.sf-dynamik .sf-club-codes-gruppe + .sf-club-codes-gruppe { border-top: 1px solid var(--sf-line); }
.sf-dynamik .sf-club-codes-gruppe h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin-bottom: 12px; font-family: var(--sf-body); font-size: var(--sf-size-15); font-weight: 700; line-height: 1.3; color: var(--sf-ink); }
.sf-dynamik .sf-club-codes-gruppe h3 span { font-size: var(--sf-size-13); font-weight: 400; color: var(--sf-neutral-650); }
.sf-dynamik .sf-club-codes-gruppe[data-sf-heute] h3 { color: var(--sf-section-accent, var(--sf-club)); }
.sf-dynamik .sf-club-codes-levels { min-width: 0; }
.sf-dynamik .sf-club-codes-level + .sf-club-codes-level { margin-top: 12px; }
.sf-dynamik .sf-club-codes-level-name { margin: 0 0 6px; font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-neutral-650); }
.sf-dynamik .sf-club-codes-level[data-sf-level="vip"] .sf-club-codes-level-name, .sf-dynamik .sf-club-codes-level[data-sf-level="premium"] .sf-club-codes-level-name, .sf-dynamik .sf-club-codes-level[data-sf-level="member"] .sf-club-codes-level-name { color: var(--sf-section-accent, var(--sf-club)); }
.sf-dynamik .sf-club-logos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sf-dynamik .sf-club-logos a { display: flex; align-items: center; justify-content: center; height: 56px; padding: 8px 10px; border: 1px solid var(--sf-line); color: var(--sf-neutral-900); transition: background var(--sf-motion); }
.sf-dynamik .sf-club-logos a:hover { background: var(--sf-section-tint, var(--sf-club-tint)); }
.sf-dynamik .sf-club-logos a:focus-visible { outline: 3px solid var(--sf-blue); outline-offset: -3px; }
.sf-dynamik .sf-club-logos img { width: auto; height: auto; max-width: 100%; max-height: 30px; object-fit: contain; }
.sf-dynamik .sf-club-logos span { font-size: var(--sf-size-13); font-weight: 700; text-align: center; }
.sf-dynamik .sf-club-offers .sf-club-go { margin-top: -1px; }
@container sf-club (min-width: 560px) {
.sf-dynamik .sf-club-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container sf-club (min-width: 900px) {
.sf-dynamik .sf-club-codes-gruppe { display: grid; grid-template-columns: 200px minmax(0, 1fr); align-items: center; gap: 20px; padding: 18px 20px; }
.sf-dynamik .sf-club-codes-gruppe h3 { flex-direction: column; gap: 2px; margin: 0; }
.sf-dynamik .sf-club-logos { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}
.sf-dynamik .sf-club-hinweis { container: sf-club / inline-size; display: grid; gap: 8px; margin-top: 16px; margin-bottom: 16px; }
.sf-dynamik .sf-club-hinweis-kopf { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--sf-neutral-900); font: 700 var(--sf-size-12) / 1.2 var(--sf-body); letter-spacing: 0.1em; text-transform: uppercase; }
.sf-dynamik .sf-club-hinweis-kopf::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-club); animation: sf-club-puls 2s ease-in-out infinite; }
@keyframes sf-club-puls { 50% { opacity: 0.3; } }
.sf-dynamik .sf-club-hinweis ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sf-dynamik .sf-club-hinweis a { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; height: 100%; padding: 8px 14px 8px 8px; background: var(--sf-surface); color: var(--sf-neutral-900); text-decoration: none; transition: background-color 0.2s ease; }
.sf-dynamik .sf-club-hinweis a:has(figure) { grid-template-columns: 64px minmax(0, 1fr) auto; }
.sf-dynamik .sf-club-hinweis a:hover { background: var(--sf-club-tint); }
.sf-dynamik .sf-club-hinweis a:focus-visible { outline: 3px solid var(--sf-blue); outline-offset: 2px; }
.sf-dynamik .sf-club-hinweis figure { margin: 0; overflow: hidden; aspect-ratio: 1; }
.sf-dynamik .sf-club-hinweis img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.sf-dynamik .sf-club-hinweis a:hover img { transform: scale(1.05); }
.sf-dynamik .sf-club-hinweis-text { display: grid; gap: 2px; min-width: 0; }
.sf-dynamik .sf-club-hinweis-text small { color: var(--sf-club); font: 700 var(--sf-size-11) / 1.25 var(--sf-body); letter-spacing: 0.08em; text-transform: uppercase; }
.sf-dynamik .sf-club-hinweis-text strong { font-size: var(--sf-size-16); line-height: 1.25; }
.sf-dynamik .sf-club-hinweis-text span { font-size: var(--sf-size-13); color: var(--sf-neutral-650); }
.sf-dynamik .sf-club-hinweis-text b { color: var(--sf-neutral-900); font-variant-numeric: tabular-nums; }
.sf-dynamik .sf-club-hinweis-los { color: var(--sf-club); font-size: 0; font-weight: 700; }
.sf-dynamik .sf-club-hinweis-los::after { content: "→"; font-size: var(--sf-size-16); }
.sf-dynamik .sf-club-hinweis a:hover .sf-club-hinweis-los { text-decoration: none; }
@container sf-club (min-width: 720px) {
.sf-dynamik .sf-club-hinweis ul { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 12px; }
.sf-dynamik .sf-club-hinweis a:has(figure) { grid-template-columns: 80px minmax(0, 1fr) auto; }
.sf-dynamik .sf-club-hinweis-los { font-size: var(--sf-size-14); white-space: nowrap; }
.sf-dynamik .sf-club-hinweis-los::after { content: " →"; font-size: inherit; }
}
@media (prefers-reduced-motion: reduce) {
.sf-dynamik .sf-club-hinweis-kopf::before, .sf-dynamik .sf-club-hinweis img { animation: none; transition: none; }
}
.sf-dynamik .sf-club-codes-gruppe[data-sf-heute] { box-shadow: inset 4px 0 0 var(--sf-section-accent, var(--sf-club)); }
.sf-dynamik .sf-club-logos a { height: 64px; }
.sf-dynamik .sf-club-weg { display: grid; gap: 14px; margin-bottom: 16px; padding: 16px; background: var(--sf-white); border: 1px solid var(--sf-line); }
.sf-dynamik .sf-club-weg-frage { margin: 0; font-size: var(--sf-size-16); font-weight: 700; color: var(--sf-ink); }
.sf-dynamik .sf-club-weg-ergebnis { margin: 0; font-size: var(--sf-size-17); line-height: 1.45; color: var(--sf-ink); text-wrap: pretty; }
.sf-dynamik .sf-club-weg-ergebnis span { display: block; margin-top: 4px; font-size: var(--sf-size-14); color: var(--sf-neutral-650); }
@container sf-club (min-width: 720px) {
.sf-dynamik .sf-club-weg { padding: 22px 24px; }
}
.sf-dynamik .sf-club-weg .sf-hb-auswahl.sf-hb-auswahl { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sf-dynamik .sf-club-weg .sf-hb-wahl.sf-hb-wahl { justify-content: center; padding: 0 6px; }
@container sf-club (min-width: 720px) {
.sf-dynamik .sf-club-weg .sf-hb-auswahl.sf-hb-auswahl { max-width: 520px; }
}
@container sf-club (min-width: 1000px) {
.sf-dynamik .sf-club-editorial { max-width: none; }
.sf-dynamik .sf-club-questions .sf-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; align-items: start; }
.sf-dynamik .sf-club-questions .sf-faq > h2 { grid-column: 1 / -1; }
}
.sf-dynamik .sf-club-auf-karte { display: grid; grid-template-columns: minmax(0, 1fr); color: var(--sf-ink); background: var(--sf-club-tint); border: 1px solid var(--sf-line); text-decoration: none; transition: border-color var(--sf-motion); }
.sf-dynamik .sf-club-auf-karte:hover { border-color: var(--sf-section-accent, var(--sf-club)); }
.sf-dynamik .sf-club-auf-karte:focus-visible { outline: 3px solid var(--sf-blue); outline-offset: 2px; }
.sf-dynamik .sf-club-auf-bild { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--sf-club-night); }
.sf-dynamik .sf-club-auf-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-dynamik .sf-club-auf-frist { position: absolute; left: 0; bottom: 0; padding: 6px 10px; font-size: var(--sf-size-14); font-weight: 700; line-height: 1.3; color: var(--sf-white); background: var(--sf-section-accent, var(--sf-club)); }
.sf-dynamik .sf-club-auf-karte[data-sf-bald] .sf-club-auf-frist { color: var(--sf-ink); background: var(--sf-white); }
.sf-dynamik .sf-club-auf-text { display: grid; align-content: center; gap: 8px; padding: 16px 16px 18px; min-width: 0; }
.sf-dynamik .sf-club-auf-kicker { font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-section-accent, var(--sf-club)); }
.sf-dynamik .sf-club-auf-titel.sf-club-auf-titel { margin: 0; font-family: var(--sf-hb-titel-schrift, var(--sf-display)); font-size: var(--sf-hb-h2); font-weight: var(--sf-hb-titel-gewicht); line-height: 1; letter-spacing: 0; text-transform: none; color: var(--sf-ink); }
.sf-dynamik .sf-club-auf-satz { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: var(--sf-size-16); line-height: 1.5; color: var(--sf-neutral-700); }
.sf-dynamik .sf-club-auf-zeit { font-size: var(--sf-size-14); font-weight: 700; }
.sf-dynamik .sf-club-auf-praes { font-size: var(--sf-size-12); color: var(--sf-neutral-700); }
.sf-dynamik .sf-club-auf-los { justify-self: start; margin-top: 4px; padding: 10px 16px; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-white); background: var(--sf-section-accent, var(--sf-club)); }
.sf-dynamik .sf-club-auf-los::after { content: " →"; }
.sf-dynamik .sf-club-auf-alle { margin: 12px 0 0; }
@container sf-club (min-width: 720px) {
.sf-dynamik .sf-club-auf-karte { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.sf-dynamik .sf-club-auf-text { gap: 12px; padding: 28px 32px; }
}
/* club-bereich.css */
.sf-cl { container: sf-cl / inline-size; padding-bottom: var(--sf-hm-s7); color: var(--sf-ink); }
.sf-cl .sf-hb-kapitel.sf-hb-kapitel { align-items: center; }
.sf-cl .sf-hb-kopf.sf-hb-kopf { gap: var(--sf-hm-s1); }
.sf-cl .sf-hb-h2.sf-hb-h2 { font-size: var(--sf-cl-h2); }
.sf-cl .sf-hb-kapitel.sf-hb-kapitel, .sf-cl .sf-hb-kapitel.sf-hb-kapitel em { color: var(--sf-ink); }
.sf-cl .sf-hb-kapitel.sf-hb-kapitel::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--sf-ink); }
.sf-cl-kapitel { margin-top: var(--sf-hm-s7); scroll-margin-top: calc(var(--sf-hm-kopf-zeile) + var(--sf-hm-s3)); }
.sf-cl-kapitel:focus { outline: none; }
.sf-cl-knoepfe.sf-cl-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); margin: 0; }
.sf-cl-buehne-h1.sf-cl-buehne-h1 { margin: 0; font-family: var(--sf-display); font-size: var(--sf-cl-buehne-h1); font-weight: 800; line-height: 0.9; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; color: var(--sf-ink); }
.sf-cl-seitenkopf { display: grid; gap: var(--sf-hm-s2); padding: var(--sf-hm-s5) 0 var(--sf-hm-s4); border-bottom: 1px solid var(--sf-line); }
.sf-cl-h1.sf-cl-h1 { margin: 0; font-family: var(--sf-display); font-size: var(--sf-cl-h1); font-weight: 800; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance; color: var(--sf-ink); }
.sf-cl-unter.sf-cl-unter { max-width: 58ch; margin: 0; font-size: var(--sf-hb-text); line-height: 1.45; color: var(--sf-text); }
.sf-cl-frist { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--sf-cl-tinte-20); font-size: var(--sf-cl-schrift-13); font-weight: 700; white-space: nowrap; }
.sf-cl-frist[data-sf-rot] { border-color: var(--sf-cl-rot); background: var(--sf-cl-rot); color: var(--sf-white); }
.sf-cl-st.sf-cl-st { --sf-cl-kopf: calc(var(--sf-hm-s3) + var(--sf-st-profil) + var(--sf-st-play) + var(--sf-hm-s4)); container: sf-cl-karte / inline-size; background: var(--sf-cl-nacht); user-select: none; }
.sf-cl-st[data-sf-einzeln].sf-cl-st { --sf-cl-kopf: calc(var(--sf-hm-s3) + 32px + var(--sf-hm-s3)); }
.sf-cl-st[data-sf-einzeln] .sf-st-zeile { top: var(--sf-hm-s3); }
.sf-cl-st .sf-st-wer.sf-st-wer { flex: 1; min-width: 0; font-size: var(--sf-cl-st-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-cl-st-frist { flex: none; display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sf-hm-s2); border-radius: 999px; background: var(--sf-hb-schleier-mitte); color: var(--sf-white); font-size: var(--sf-cl-schrift-13); font-weight: 700; line-height: 1; text-shadow: none; white-space: nowrap; }
.sf-cl-st-frist[data-sf-rot] { background: var(--sf-cl-rot); }
.sf-cl-st .sf-st-zeile .sf-st-play.sf-st-play { margin-left: 0; }
.sf-cl-st .sf-st-bild { background: var(--sf-cl-nacht); }
.sf-cl-st .sf-st-titel.sf-st-titel { text-transform: none; line-height: 1.05; }
.sf-cl-st .sf-st-station[data-sf-jetzt] { fill: var(--sf-ink); }
.sf-cl-st-kopf { display: grid; gap: var(--sf-hm-s2); }
.sf-cl-st-zahl { font-family: var(--sf-hb-seitentitel-schrift, var(--sf-display)); font-size: var(--sf-cl-st-zahl); font-weight: 800; line-height: 0.85; }
.sf-cl-st-zeilen { display: grid; border-top: 1px solid var(--sf-hb-hell-linie); }
.sf-cl-st-zeile { display: flex; justify-content: space-between; gap: var(--sf-hm-s3); padding: var(--sf-hm-s2) 0; border-bottom: 1px solid var(--sf-hb-hell-spur); text-shadow: none; }
.sf-cl-st-zeile > span:first-child { display: grid; gap: 2px; min-width: 0; }
.sf-cl-st-zeile b { font-size: var(--sf-cl-schrift-15); }
.sf-cl-st-zeile small { font-size: var(--sf-cl-schrift-13); color: var(--sf-hb-hell-text); overflow-wrap: anywhere; }
.sf-cl-st-rechts { flex: none; font-size: var(--sf-cl-schrift-14); font-weight: 700; white-space: nowrap; }
.sf-cl-st .sf-st-bild[data-sf-art="foto"] .sf-cl-st-inhalt.sf-cl-st-inhalt { top: var(--sf-cl-kopf); align-content: end; overflow: hidden; }
.sf-cl-st .sf-st-bild:not([data-sf-art="foto"]) { display: flex; flex-direction: column; padding-top: var(--sf-cl-kopf); }
.sf-cl-st .sf-st-bild:not([data-sf-art="foto"]) .sf-cl-st-inhalt.sf-cl-st-inhalt { position: static; flex: 1 1 auto; display: flex; flex-direction: column; gap: var(--sf-hm-s4); padding-top: var(--sf-hm-s2); text-shadow: none; }
.sf-cl-st .sf-st-bild:not([data-sf-art="foto"]) .sf-st-knoepfe { justify-items: start; margin-top: auto; }
.sf-cl-st .sf-st-bild:not([data-sf-art="foto"]) .sf-st-knopf.sf-st-knopf { padding: 0 var(--sf-hm-s5); }
.sf-cl-st .sf-st-bild[data-sf-art="illu"] .sf-st-foto.sf-st-foto { position: static; flex: none; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.sf-cl-st .sf-st-bild[data-sf-art="illu"] { isolation: isolate; }
.sf-cl-st-produkt { display: block; flex: none; align-self: center; width: 72%; max-width: 100%; aspect-ratio: 1 / 1; background: var(--sf-white); }
.sf-cl-st-produkt img { display: block; width: 100%; height: 100%; padding: var(--sf-hm-s2); object-fit: contain; }
.sf-cl-st[data-sf-grund].sf-cl-st, .sf-cl-st[data-sf-grund] .sf-st-bild { background: var(--sf-cl-creme); color: var(--sf-ink); }
.sf-cl-st[data-sf-grund="tint"].sf-cl-st, .sf-cl-st[data-sf-grund="tint"] .sf-st-bild { background: var(--sf-white); }
.sf-cl-st[data-sf-grund="weiss"].sf-cl-st, .sf-cl-st[data-sf-grund="weiss"] .sf-st-bild { background: var(--sf-white); }
.sf-cl-st[data-sf-grund="weiss"].sf-cl-st { box-shadow: 0 0 0 1px var(--sf-line); }
.sf-cl-st[data-sf-grund] .sf-st-zeile { text-shadow: none; }
.sf-cl-st[data-sf-grund] .sf-st-weg { stroke: var(--sf-cl-tinte-20); }
.sf-cl-st[data-sf-grund] .sf-st-geschafft { stroke: var(--sf-ink); }
.sf-cl-st[data-sf-grund] .sf-st-station { fill: var(--sf-cl-tinte-20); }
.sf-cl-st[data-sf-grund] .sf-st-station[data-sf-da] { fill: var(--sf-ink); }
.sf-cl-st[data-sf-grund] .sf-st-station[data-sf-jetzt] { fill: var(--sf-ink); stroke: var(--sf-cl-creme); }
.sf-cl-st[data-sf-grund] .sf-cl-st-frist:not([data-sf-rot]) { background: var(--sf-cl-tinte-08); color: var(--sf-ink); }
.sf-cl-st[data-sf-grund] .sf-st-play.sf-st-play { background: var(--sf-ink); color: var(--sf-white); }
.sf-cl-st[data-sf-grund] .sf-st-kicker { color: var(--sf-muted); }
.sf-cl-st[data-sf-grund] .sf-st-satz { color: var(--sf-ink); }
.sf-cl-st[data-sf-grund] .sf-cl-st-zahl { color: var(--sf-ink); }
.sf-cl-st[data-sf-grund] .sf-cl-st-zeilen { border-top-color: var(--sf-ink); }
.sf-cl-st[data-sf-grund] .sf-cl-st-zeile { border-bottom-color: var(--sf-cl-tinte-20); }
.sf-cl-st[data-sf-grund] .sf-cl-st-zeile small { color: var(--sf-muted); }
.sf-cl-st[data-sf-grund] .sf-st-knopf.sf-st-knopf { border-color: var(--sf-club); background: var(--sf-club); color: var(--sf-white); }
.sf-cl-st[data-sf-grund] .sf-st-bilder:focus-visible { outline-color: var(--sf-ink); }
@container sf-cl-karte (max-width: 340px) {
.sf-cl-st .sf-st-wer.sf-st-wer { font-size: var(--sf-cl-schrift-17); }
}
@container sf-cl-st (min-width: 600px) {
.sf-cl-st .sf-st-profil { width: 50%; }
.sf-cl-st .sf-st-bild[data-sf-art="foto"] .sf-st-foto, .sf-cl-st .sf-st-bild[data-sf-art="foto"] .sf-st-schleier { width: 50%; }
.sf-cl-st .sf-st-bild[data-sf-art="foto"] .sf-cl-st-inhalt.sf-cl-st-inhalt { top: var(--sf-cl-kopf); left: 50%; align-content: center; padding: var(--sf-hm-s5); text-shadow: none; }
.sf-cl-st .sf-st-bild[data-sf-art="illu"] { flex-direction: row; align-items: stretch; padding-top: 0; }
.sf-cl-st .sf-st-bild[data-sf-art="illu"] .sf-st-foto.sf-st-foto { flex: 0 0 50%; width: 50%; min-width: 0; align-self: center; margin-top: var(--sf-cl-kopf); }
.sf-cl-st .sf-st-bild[data-sf-art="illu"] .sf-cl-st-inhalt.sf-cl-st-inhalt { flex: 1 1 50%; padding: var(--sf-cl-kopf) var(--sf-hm-s5) var(--sf-hm-s5); }
.sf-cl-st .sf-st-bild[data-sf-art="text"] .sf-cl-st-inhalt.sf-cl-st-inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--sf-hm-s4) var(--sf-hm-s6); padding: var(--sf-hm-s2) var(--sf-hm-s5) var(--sf-hm-s5); }
.sf-cl-st .sf-st-bild[data-sf-art="text"] .sf-cl-st-kopf { grid-column: 1; grid-row: 1 / -1; align-content: start; }
.sf-cl-st .sf-st-bild[data-sf-art="text"] .sf-cl-st-inhalt > :not(.sf-cl-st-kopf) { grid-column: 2; }
.sf-cl-st .sf-st-bild[data-sf-art="text"] .sf-cl-st-zeilen { grid-row: 1; }
.sf-cl-st .sf-st-bild[data-sf-art="text"] .sf-st-knoepfe { grid-row: 3; margin-top: 0; }
.sf-cl-st .sf-st-bild[data-sf-art="text"] .sf-cl-st-kopf:only-child { grid-column: 1 / -1; }
.sf-cl-st .sf-st-bild[data-sf-art="text"] .sf-cl-st-inhalt:not(:has(.sf-cl-st-zeilen)) { display: flex; flex-direction: column; }
.sf-cl-st .sf-st-bild[data-sf-art="produkt"] .sf-cl-st-inhalt.sf-cl-st-inhalt { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; gap: var(--sf-hm-s3) var(--sf-hm-s6); padding: var(--sf-hm-s2) var(--sf-hm-s5) var(--sf-hm-s5); }
.sf-cl-st .sf-st-bild[data-sf-art="produkt"] .sf-cl-st-produkt { grid-column: 1; grid-row: 1 / -1; width: 100%; }
.sf-cl-st .sf-st-bild[data-sf-art="produkt"] .sf-cl-st-inhalt > :not(.sf-cl-st-produkt) { grid-column: 2; }
.sf-cl-st .sf-st-bild[data-sf-art="produkt"] .sf-cl-st-kopf { grid-row: 1; }
.sf-cl-st .sf-st-bild[data-sf-art="produkt"] .sf-cl-st-zeilen { grid-row: 2; }
.sf-cl-st .sf-st-bild[data-sf-art="produkt"] .sf-st-knoepfe { grid-row: 4; margin-top: 0; }
}
.sf-cl-gewinn { display: grid; border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-ink); }
.sf-cl-gewinn-bild { display: block; aspect-ratio: 4 / 3; border-bottom: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-cl-gewinn-bild img { display: block; width: 100%; height: 100%; padding: var(--sf-hm-s5); object-fit: contain; }
.sf-cl-gewinn-text { display: grid; align-content: center; justify-items: start; gap: var(--sf-hm-s2); padding: var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-cl-gewinn-kapitel.sf-cl-gewinn-kapitel { margin: 0; font-family: var(--sf-body); font-size: var(--sf-cl-schrift-12); font-weight: 800; line-height: 1.2; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-cl-gewinn-logo { display: block; width: auto; max-width: 160px; height: 32px; object-fit: contain; object-position: left center; filter: brightness(0); }
.sf-cl-gewinn-marke.sf-cl-gewinn-marke { margin: 0; font-size: var(--sf-cl-schrift-13); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.sf-cl-gewinn-titel.sf-cl-gewinn-titel { margin: 0; font-family: var(--sf-display); font-size: var(--sf-cl-h2); font-weight: 800; line-height: 1.05; text-transform: none; text-wrap: balance; color: var(--sf-ink); }
.sf-cl-gewinn-satz.sf-cl-gewinn-satz { max-width: 46ch; margin: 0; font-size: var(--sf-cl-schrift-16); line-height: 1.5; color: var(--sf-text); }
.sf-cl-gewinn-los.sf-cl-gewinn-los { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-hm-s2) var(--sf-hm-s3); margin: var(--sf-hm-s2) 0 0; }
.sf-cl-hw-karten { display: flex; justify-content: center; padding: var(--sf-hm-s2) var(--sf-hm-s3) var(--sf-hm-s1); }
.sf-cl-hw-karte.sf-cl-hw-karte { position: relative; display: block; flex: none; width: 84px; aspect-ratio: 60 / 84; margin: 0 -8px; padding: 0; border: 0; background: none; perspective: 600px; transition: translate 0.2s ease; }
.sf-cl-hw-karte.sf-cl-hw-karte:nth-child(1) { transform: rotate(-9deg) translateY(6px); }
.sf-cl-hw-karte.sf-cl-hw-karte:nth-child(2) { z-index: 1; }
.sf-cl-hw-karte.sf-cl-hw-karte:nth-child(3) { transform: rotate(9deg) translateY(6px); }
.sf-cl-hw-innen { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.5s ease; }
.sf-cl-hw-karte[data-sf-offen] .sf-cl-hw-innen { transform: rotateY(180deg); }
.sf-cl-hw-ruecken { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 8px; box-shadow: 0 4px 10px var(--sf-cl-tinte-20); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.sf-cl-hw-ruecken { border: 2px solid var(--sf-ink); background: var(--sf-ink); }
.sf-cl-hw-motiv { display: block; width: 100%; height: 100%; }
.sf-cl-hw-grat { fill: none; stroke: var(--sf-cl-creme); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.sf-cl-hw-grat--leise { opacity: 0.45; }
.sf-cl-hw-mond { fill: var(--sf-cl-kuerbis); }
@media (prefers-reduced-motion: reduce) {
.sf-cl-hw-innen, .sf-cl-hw-karte.sf-cl-hw-karte { transition: none; }
}
.sf-cl-clubkopf { display: grid; gap: var(--sf-hm-s5); padding: var(--sf-hm-s5) 0 var(--sf-hm-s5); border-bottom: 1px solid var(--sf-line); }
.sf-cl-clubkopf-text { display: grid; gap: var(--sf-hm-s2); align-content: center; }
.sf-cl-clubkopf > .sf-cl-karte { order: -1; }
.sf-cl-clubkopf-text .sf-cl-knoepfe { margin-top: var(--sf-hm-s3); }
.sf-cl-karte.sf-cl-karte { position: relative; display: grid; align-content: space-between; width: 100%; max-width: 440px; aspect-ratio: 85.6 / 54; margin: 0; padding: var(--sf-hm-s4); overflow: hidden; border-radius: 14px; background: var(--sf-club); color: var(--sf-white); }
.sf-cl-karte::before { content: ""; position: absolute; inset: -40% 40% 20% -20%; background: var(--sf-cl-karte-glanz); transform: rotate(-18deg); pointer-events: none; }
.sf-cl-karte-kopf { position: relative; display: grid; gap: 2px; }
.sf-cl-karte-kopf b { font-family: var(--sf-display); font-size: var(--sf-cl-karte-name); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.sf-cl-karte-kopf small { font-size: var(--sf-cl-schrift-12); font-weight: 600; }
.sf-cl-karte-stufen { position: relative; display: block; height: 52px; margin: 0 var(--sf-hm-s4) 0 var(--sf-hm-s1); border-bottom: 2px solid var(--sf-cl-karte-linie); }
.sf-cl-karte-stufe { position: absolute; bottom: -7px; left: calc(var(--sf-cl-lage) * 1%); display: grid; justify-items: start; gap: 2px; padding-bottom: 16px; transform: translateX(-6px); }
.sf-cl-karte-stufe::after { content: ""; position: absolute; bottom: 0; left: 0; width: 12px; height: 12px; border: 2px solid var(--sf-white); border-radius: 50%; background: var(--sf-club); }
.sf-cl-karte-stufe[data-sf-level="vip"] { justify-items: end; transform: translateX(calc(-100% + 6px)); }
.sf-cl-karte-stufe[data-sf-level="vip"]::after { left: auto; right: 0; background: var(--sf-white); }
.sf-cl-karte-stufe b { font-size: var(--sf-cl-schrift-14); line-height: 1; }
.sf-cl-karte-stufe small { font-size: var(--sf-cl-schrift-11); line-height: 1; opacity: 0.85; }
.sf-cl-weg-zu-vip { --sf-cl-knopf: 24px; display: grid; gap: var(--sf-hm-s3); padding: var(--sf-hm-s4); background: transparent; }
.sf-cl-regler-wert.sf-cl-regler-wert { margin: 0; font-size: var(--sf-cl-schrift-15); }
.sf-cl-regler-wert b { font-family: var(--sf-display); font-size: var(--sf-cl-schrift-17); }
.sf-cl-regler-wert span { color: var(--sf-muted); }
.sf-cl-linie { position: relative; height: 76px; }
.sf-cl-linie-spur, .sf-cl-linie-stand { position: absolute; top: calc(var(--sf-cl-knopf) / 2 - 2px); left: calc(var(--sf-cl-knopf) / 2); height: 4px; pointer-events: none; }
.sf-cl-linie-spur { right: calc(var(--sf-cl-knopf) / 2); background: var(--sf-cl-tinte-20); }
.sf-cl-linie-stand { width: calc((100% - var(--sf-cl-knopf)) * var(--sf-cl-stand) / 100); background: var(--sf-ink); }
.sf-cl-linie-stufen { position: absolute; inset: 0 calc(var(--sf-cl-knopf) / 2); margin: 0; padding: 0; list-style: none; pointer-events: none; }
.sf-cl-linie-stufen li { position: absolute; top: calc(var(--sf-cl-knopf) / 2 - 7px); left: calc(var(--sf-cl-lage) * 1%); display: grid; justify-items: center; gap: 2px; padding-top: 22px; transform: translateX(-50%); white-space: nowrap; }
.sf-cl-linie-stufen li::before { content: ""; position: absolute; top: 0; left: calc(50% - 7px); width: 14px; height: 14px; border: 3px solid var(--sf-ink); border-radius: 50%; background: var(--sf-white); }
.sf-cl-linie-stufen li[data-sf-level="member"] { justify-items: start; transform: translateX(-7px); }
.sf-cl-linie-stufen li[data-sf-level="member"]::before { left: 0; }
.sf-cl-linie-stufen li[data-sf-level="vip"]::before { background: var(--sf-ink); }
.sf-cl-linie-stufen b { font-size: var(--sf-cl-schrift-15); }
.sf-cl-linie-stufen span { font-size: var(--sf-cl-schrift-12); color: var(--sf-muted); }
@container sf-cl (max-width: 719px) {
.sf-cl-linie { margin-top: 44px; }
.sf-cl-linie-stufen li[data-sf-level="premium"] { top: auto; bottom: calc(100% - var(--sf-cl-knopf) / 2 - 7px); padding-top: 0; padding-bottom: 22px; }
.sf-cl-linie-stufen li[data-sf-level="premium"]::before { top: auto; bottom: 0; }
}
.sf-cl-regler-eingabe.sf-cl-regler-eingabe { position: absolute; top: 0; left: 0; width: 100%; height: var(--sf-cl-knopf); margin: 0; padding: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.sf-cl-regler-eingabe::-webkit-slider-runnable-track { height: var(--sf-cl-knopf); background: transparent; }
.sf-cl-regler-eingabe::-moz-range-track { height: var(--sf-cl-knopf); background: transparent; }
.sf-cl-regler-eingabe::-webkit-slider-thumb { width: var(--sf-cl-knopf); height: var(--sf-cl-knopf); border: 4px solid var(--sf-white); border-radius: 50%; background: var(--sf-ink); box-shadow: 0 0 0 1px var(--sf-ink); -webkit-appearance: none; appearance: none; }
.sf-cl-regler-eingabe::-moz-range-thumb { width: var(--sf-cl-knopf); height: var(--sf-cl-knopf); box-sizing: border-box; border: 4px solid var(--sf-white); border-radius: 50%; background: var(--sf-ink); box-shadow: 0 0 0 1px var(--sf-ink); }
.sf-cl-regler-eingabe.sf-cl-regler-eingabe:focus-visible { outline: 3px solid var(--sf-ink); outline-offset: 4px; }
.sf-cl-regler-ergebnis.sf-cl-regler-ergebnis { margin: 0; font-size: var(--sf-cl-schrift-16); line-height: 1.45; }
.sf-cl-fragen .sf-faq > h2 { display: none; }
.sf-cl-fragen .sf-faq summary { box-sizing: border-box; min-height: 48px; padding: 11px 0; gap: var(--sf-hm-s4); line-height: 1.4; }
.sf-cl-fragen .sf-faq summary > span { flex: none; font-size: var(--sf-cl-plus); line-height: 1; color: var(--sf-ink); }
.sf-cl-fragen .sf-faq .sf-block-richtext { padding-bottom: var(--sf-hm-s3); line-height: 1.5; }
.sf-cl-fragen .sf-faq .sf-block-richtext > :first-child { margin-top: 0; }
.sf-cl-kapitel + .sf-cl-kapitel:has(.sf-cl-fragen) { margin-top: var(--sf-hm-s6); }
@container sf-cl (min-width: 900px) {
.sf-cl-buehne-h1.sf-cl-buehne-h1 { font-size: var(--sf-cl-buehne-h1-breit); }
.sf-cl-h1.sf-cl-h1 { font-size: var(--sf-cl-h1-breit); }
.sf-cl-seitenkopf { padding-top: var(--sf-hm-s6); }
.sf-cl-clubkopf > .sf-cl-karte { order: 0; }
.sf-cl-clubkopf { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); align-items: center; gap: var(--sf-hm-s7); padding-top: var(--sf-hm-s6); }
.sf-cl-karte.sf-cl-karte { padding: var(--sf-hm-s5); }
.sf-cl-karte-kopf b { font-size: var(--sf-cl-karte-name-breit); }
.sf-cl-weg-zu-vip { padding: var(--sf-hm-s5) var(--sf-hm-s6); }
}
.sf-cl-strom-kopf { display: grid; gap: var(--sf-hm-s3); padding: var(--sf-hm-s5) 0 var(--sf-hm-s5); }
.sf-cl-strom-kopf .sf-cl-buehne-h1.sf-cl-buehne-h1 { margin: 0; }
.sf-cl-reihe.sf-cl-reihe { display: grid; grid-template-columns: repeat(var(--sf-cl-reihe-n, 4), minmax(0, 1fr)); gap: var(--sf-hm-s2); margin: var(--sf-hm-s2) 0 0; padding: 0; list-style: none; }
.sf-cl-reihe li { min-width: 0; margin: 0; }
.sf-cl-reihe-kachel.sf-cl-reihe-kachel { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--sf-cl-creme); color: var(--sf-ink); text-decoration: none; box-shadow: inset 0 0 0 1px var(--sf-cl-tinte-20); }
.sf-cl-reihe-kachel[data-sf-art="foto"].sf-cl-reihe-kachel { background: var(--sf-cl-nacht); color: var(--sf-white); }
.sf-cl-reihe-kachel[data-sf-art="illu"].sf-cl-reihe-kachel, .sf-cl-reihe-kachel[data-sf-art="produkt"].sf-cl-reihe-kachel { background: var(--sf-white); }
.sf-cl-reihe-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-cl-reihe-kachel[data-sf-art="illu"] .sf-cl-reihe-bild, .sf-cl-reihe-kachel[data-sf-art="produkt"] .sf-cl-reihe-bild { inset: auto 0 18% 0; height: 52%; object-fit: contain; }
.sf-cl-reihe-kachel[data-sf-art="foto"]::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient( 180deg, var(--sf-cl-schleier-oben) 0%, transparent 40%, transparent 55%, var(--sf-cl-schleier-oben) 100% ); }
.sf-cl-reihe-motiv { position: absolute; inset: 24% 12% 34% 12%; display: grid; place-items: center; }
.sf-cl-reihe-motiv .sf-cl-karte { width: 100%; min-height: 0; padding: 6px; gap: 4px; }
.sf-cl-reihe-motiv .sf-cl-karte-kopf, .sf-cl-reihe-motiv .sf-cl-karte-stufen { display: none; }
.sf-cl-reihe-motiv .sf-cl-karte { aspect-ratio: 1.6; }
.sf-cl-reihe-profil { position: absolute; z-index: 2; top: 6px; left: 6px; right: 6px; height: 14px; overflow: visible; }
.sf-cl-reihe-profil path { fill: none; stroke: currentColor; stroke-width: 3; opacity: 0.5; }
.sf-cl-reihe-profil circle { fill: currentColor; }
.sf-cl-reihe-profil circle[data-sf-jetzt] { fill: var(--sf-ink); }
.sf-cl-reihe-label.sf-cl-reihe-label, .sf-cl-reihe-titel { position: absolute; z-index: 2; left: 6px; right: 6px; overflow: hidden; overflow-wrap: anywhere; }
.sf-cl-reihe-label.sf-cl-reihe-label { bottom: 6px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-family: var(--sf-display); font-size: var(--sf-cl-reihe-label); font-weight: 800; line-height: 1; }
.sf-cl-reihe-titel { display: none; }
.sf-cl-feed.sf-cl-feed { margin-top: var(--sf-hm-s2); }
.sf-cl-feed > li { scroll-margin-top: calc(var(--sf-hm-kopf-zeile) + var(--sf-hm-s3)); }
.sf-cl-feed > li:focus { outline: none; }
.sf-cl-st[data-sf-grund] .sf-st-bild[data-sf-art="foto"] { background: var(--sf-cl-nacht); color: var(--sf-white); }
.sf-cl-st[data-sf-grund] .sf-st-bild[data-sf-art="produkt"] { background: var(--sf-white); }
.sf-cl-st[data-sf-grund] .sf-st-bild[data-sf-art="illu"] { background: var(--sf-white); }
.sf-cl-st[data-sf-grund] .sf-st-bild[data-sf-art="foto"] .sf-st-kicker, .sf-cl-st[data-sf-grund] .sf-st-bild[data-sf-art="foto"] .sf-st-satz { color: var(--sf-white); }
.sf-cl-st[data-sf-grund]:has(.sf-st-bild[data-sf-aktiv][data-sf-art="foto"]) .sf-st-zeile { color: var(--sf-white); text-shadow: 0 1px 2px var(--sf-cl-schleier-oben); }
.sf-cl-st[data-sf-grund]:has(.sf-st-bild[data-sf-aktiv][data-sf-art="foto"]) .sf-st-weg, .sf-cl-st[data-sf-grund]:has(.sf-st-bild[data-sf-aktiv][data-sf-art="foto"]) .sf-st-station { stroke: var(--sf-white); }
.sf-cl-st[data-sf-grund]:has(.sf-st-bild[data-sf-aktiv][data-sf-art="foto"]) .sf-st-station:not([data-sf-jetzt]) { fill: var(--sf-white); }
.sf-cl-st[data-sf-grund]:has(.sf-st-bild[data-sf-aktiv][data-sf-art="foto"]) .sf-cl-st-frist:not([data-sf-rot]) { background: var(--sf-hb-schleier-mitte); color: var(--sf-white); }
.sf-cl-feed .sf-cl-st .sf-st-bild:not([data-sf-art="foto"]) .sf-cl-st-inhalt.sf-cl-st-inhalt { gap: var(--sf-hm-s3); }
.sf-cl-feed .sf-cl-st .sf-st-bild[data-sf-art="produkt"] .sf-cl-st-produkt { flex: 1 1 auto; width: auto; min-height: 0; aspect-ratio: auto; }
.sf-cl-feed .sf-cl-st .sf-st-bild[data-sf-art="illu"] .sf-st-foto.sf-st-foto { flex: 1 1 auto; min-height: 0; aspect-ratio: auto; object-fit: contain; }
.sf-cl-st-motiv { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; }
.sf-cl-st-motiv { overflow: hidden; }
.sf-cl-st-motiv[data-sf-motiv="karte"] .sf-cl-karte { width: min(64%, 260px); }
.sf-cl-gutschein { display: grid; justify-items: center; align-content: center; gap: var(--sf-hm-s1); width: min(100%, 300px); padding: var(--sf-hm-s5) var(--sf-hm-s4); border: 2px dashed var(--sf-ink); background: var(--sf-white); color: var(--sf-ink); text-align: center; }
.sf-cl-gutschein b { font-family: var(--sf-display); font-size: var(--sf-cl-gutschein-gross); font-weight: 800; line-height: 0.9; }
.sf-cl-gutschein small { font-size: var(--sf-cl-schrift-14); font-weight: 700; color: var(--sf-ink); }
.sf-cl-gutschein[data-sf-klein] { width: 64%; aspect-ratio: 1; padding: 0; border-width: 2px; }
.sf-cl-gutschein[data-sf-klein] b { font-size: var(--sf-cl-st-label); }
.sf-cl-st-motiv[data-sf-motiv="halloween"] .sf-cl-hw-karten { width: min(100%, 300px); }
.sf-cl-tafel { display: grid; gap: var(--sf-hm-s4); padding: var(--sf-hm-s4); background: var(--sf-cl-creme); }
.sf-cl-tafel-alles.sf-cl-tafel-alles { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-hm-s2) var(--sf-hm-s4); padding: var(--sf-hm-s4); border: 2px dashed var(--sf-ink); background: var(--sf-white); color: var(--sf-ink); text-decoration: none; }
.sf-cl-tafel-alles-text { display: grid; gap: var(--sf-hm-s1); }
.sf-cl-tafel-alles-text b { font-family: var(--sf-display); font-size: var(--sf-cl-tafel-alles); font-weight: 800; line-height: 0.9; color: var(--sf-ink); }
.sf-cl-tafel-alles-text small { font-size: var(--sf-cl-schrift-15); font-weight: 600; }
.sf-cl-tafel-frist { font-size: var(--sf-cl-schrift-13); font-weight: 700; color: var(--sf-ink); white-space: nowrap; }
.sf-cl-tafel-wand.sf-cl-tafel-wand { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-hm-s2); margin: 0; padding: 0; list-style: none; }
.sf-cl-tafel-wand li { min-width: 0; margin: 0; }
.sf-cl-tafel-feld.sf-cl-tafel-feld { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: var(--sf-hm-s1); height: 100%; min-height: 92px; padding: var(--sf-hm-s3) var(--sf-hm-s2) var(--sf-hm-s2); border: 1px dashed var(--sf-cl-tinte-35); background: var(--sf-white); color: var(--sf-ink); text-align: center; text-decoration: none; }
.sf-cl-tafel-feld.sf-cl-tafel-feld:hover, .sf-cl-tafel-alles.sf-cl-tafel-alles:hover { border-style: solid; }
.sf-cl-tafel-logo { display: grid; place-items: center; width: 100%; min-height: var(--sf-cl-tafel-logo); }
.sf-cl-tafel-logo img { display: block; max-width: 100%; height: var(--sf-cl-tafel-logo); object-fit: contain; }
.sf-cl-tafel-wort.sf-cl-tafel-wort { font-family: var(--sf-display); font-size: var(--sf-cl-tafel-wort); font-weight: 800; line-height: 1; overflow-wrap: anywhere; }
.sf-cl-tafel .sf-cl-knoepfe { justify-content: flex-start; }
.sf-cl-gw-liste.sf-cl-gw-liste { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sf-ink); }
.sf-cl-gw-liste li { margin: 0; border-bottom: 1px solid var(--sf-line); }
.sf-cl-gw-zeile.sf-cl-gw-zeile { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: var(--sf-hm-s3); padding: var(--sf-hm-s2) 0; color: var(--sf-ink); text-decoration: none; }
.sf-cl-gw-zeile-text { display: grid; gap: 2px; min-width: 0; }
.sf-cl-gw-zeile-text small { font-size: var(--sf-cl-schrift-13); color: var(--sf-muted); }
.sf-cl-gw-zeile-text small [data-sf-rot] { font-weight: 700; color: var(--sf-cl-rot); }
.sf-cl-gw-zeile-text b { font-size: var(--sf-cl-schrift-17); line-height: 1.25; }
.sf-cl-gw-zeile-pfeil { font-size: var(--sf-cl-schrift-17); font-weight: 700; color: var(--sf-ink); }
.sf-cl-gw-zeile .sf-cl-gw-bild { width: 64px; height: 64px; }
.sf-cl-gw-gruppe.sf-cl-gw-gruppe { margin: var(--sf-hm-s4) 0 var(--sf-hm-s2); font-family: var(--sf-body); font-size: var(--sf-cl-schrift-12); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-cl-gw-bild { display: grid; place-items: center; overflow: hidden; background: var(--sf-white); box-shadow: inset 0 0 0 1px var(--sf-line); }
.sf-cl-gw-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sf-cl-gw-bild[data-sf-art="foto"] img { object-fit: cover; }
.sf-cl-gw-bild[data-sf-art="halloween"], .sf-cl-gw-bild[data-sf-art="leer"] { background: var(--sf-cl-creme); }
.sf-cl-gw-bild[data-sf-art="halloween"] .sf-cl-hw-karten { width: 86%; }
.sf-cl-gw-stuecke { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); margin-top: var(--sf-hm-s6); }
.sf-cl-gw-stuecke .sf-cl-gewinn { grid-template-rows: auto 1fr; }
.sf-cl-gw-stuecke .sf-cl-gewinn-text { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: var(--sf-hm-s4); }
.sf-cl-gw-stuecke .sf-cl-gewinn-los.sf-cl-gewinn-los { margin-top: auto; padding-top: var(--sf-hm-s2); }
.sf-cl-gw-stuecke .sf-cl-gewinn { scroll-margin-top: calc(var(--sf-hm-kopf-zeile) + var(--sf-hm-s3)); }
.sf-cl-gw-stuecke .sf-cl-gewinn:focus { outline: none; }
.sf-cl-gewinn-bild .sf-cl-gw-bild { width: 100%; height: 100%; box-shadow: none; }
.sf-cl-gewinn-bild .sf-cl-gw-bild[data-sf-art="produkt"] img { padding: var(--sf-hm-s5); }
.sf-cl-gewinn-bild .sf-cl-gw-bild[data-sf-art="illu"] img { padding: var(--sf-hm-s3); }
.sf-cl-gewinn-bild .sf-cl-gw-bild[data-sf-art="halloween"] .sf-cl-hw-karten { width: min(70%, 320px); }
.sf-cl-gewinn .sf-cl-gewinn-bild img { padding: 0; }
.sf-cl-gewinn-titel.sf-cl-gewinn-titel { font-size: var(--sf-cl-h2); }
.sf-cl-spiel { margin-top: var(--sf-hm-s5); }
.sf-cl-spiel .sf-fp-abschnitt.sf-fp-abschnitt { margin: 0; padding: 0; border: 0; }
@container sf-cl (min-width: 720px) {
.sf-cl-reihe.sf-cl-reihe { max-width: 560px; }
.sf-cl-feed.sf-cl-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-cl-reihe-label.sf-cl-reihe-label { top: 26px; bottom: auto; font-size: var(--sf-cl-st-label); }
.sf-cl-reihe-titel { bottom: 8px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: var(--sf-cl-schrift-13); font-weight: 700; line-height: 1.2; }
.sf-cl-reihe-motiv { inset: 34% 12% 30% 12%; }
.sf-cl-tafel { padding: var(--sf-hm-s5); }
.sf-cl-tafel-wand.sf-cl-tafel-wand { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.sf-cl-tafel-alles-text b { font-size: var(--sf-cl-tafel-alles-breit); }
.sf-cl-gw-zeile.sf-cl-gw-zeile { grid-template-columns: 80px minmax(0, 1fr) auto; }
.sf-cl-gw-zeile .sf-cl-gw-bild { width: 80px; height: 80px; }
.sf-cl-gw-stuecke[data-sf-spalten="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-cl-gw-stuecke[data-sf-spalten="3"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-cl-gw-stuecke[data-sf-spalten="1"] { max-width: 560px; }
}
@container sf-cl (min-width: 1000px) {
.sf-cl-gw-stuecke[data-sf-spalten="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-cl-spiel .sf-fp-preise.sf-fp-preise { --sf-fp-preis-ring: var(--sf-cl-tinte-08); --sf-fp-preis-flaeche: var(--sf-white); --sf-fp-preis-kante: var(--sf-cl-tinte-20); margin-top: 0; background: var(--sf-cl-creme); color: var(--sf-ink); border-top-color: var(--sf-ink); }
.sf-cl-spiel .sf-fp-preise-marke.sf-fp-preise-marke, .sf-cl-spiel .sf-fp-preise-titel.sf-fp-preise-titel, .sf-cl-spiel .sf-fp-preis.sf-fp-preis:not([data-sf-platz="1"]) span, .sf-cl-spiel .sf-fp-preis.sf-fp-preis:not([data-sf-platz="1"]) b, .sf-cl-spiel .sf-fp-preise-schritte.sf-fp-preise-schritte li, .sf-cl-spiel .sf-fp-preise-fein.sf-fp-preise-fein, .sf-cl-spiel .sf-fp-preise-fein.sf-fp-preise-fein a { color: var(--sf-ink); }
.sf-cl-spiel .sf-fp-preise-schritte.sf-fp-preise-schritte b { background: var(--sf-ink); color: var(--sf-white); }
.sf-cl-spiel .sf-fp-slalom .sf-minispiel, .sf-cl-spiel .sf-fp-slalom > div:not(.sf-fp-preise) { margin-top: var(--sf-hm-s5); }
.sf-cl-st .sf-st-bild[data-sf-art="aktiv"] { overflow: hidden; }
.sf-cl-st[data-sf-grund] .sf-st-bild[data-sf-motiv="gutschein"] { background: var(--sf-cl-creme); color: var(--sf-white); }
.sf-cl-st[data-sf-grund] .sf-st-bild[data-sf-motiv="karte"] { background: var(--sf-cl-creme); }
.sf-cl-st[data-sf-grund] .sf-st-bild[data-sf-motiv="slalom"] { background: var(--sf-white); }
.sf-cl-st[data-sf-grund] .sf-st-bild[data-sf-motiv="halloween"] { background: var(--sf-cl-creme); }
.sf-cl-af { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--sf-hm-s3); padding: 0 var(--sf-hm-s4) var(--sf-hm-s4); text-shadow: none; }
.sf-cl-af-band.sf-cl-af-band { flex: none; align-self: flex-start; margin: 0; padding: 3px var(--sf-hm-s2); border: 1px solid var(--sf-ink); color: var(--sf-ink); font-size: var(--sf-cl-schrift-13); font-weight: 800; }
.sf-cl-af-band[data-sf-rot].sf-cl-af-band { border-color: var(--sf-cl-rot); background: var(--sf-cl-rot); color: var(--sf-white); }
.sf-cl-af-motiv { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.sf-cl-af-fuss { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sf-hm-s1); }
.sf-cl-af-titel { font-family: var(--sf-display); font-size: var(--sf-cl-af-titel); font-weight: 800; line-height: 1; text-wrap: balance; }
.sf-cl-af-satz { font-size: var(--sf-cl-schrift-15); line-height: 1.4; }
.sf-cl-st .sf-cl-af-knopf.sf-st-knopf { margin-top: var(--sf-hm-s2); padding: 0 var(--sf-hm-s5); }
.sf-cl-af[data-sf-motiv="karte"] .sf-cl-af-knopf.sf-st-knopf { border-color: var(--sf-ink); background: var(--sf-ink); }
.sf-cl-af-coupon { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; border-radius: 10px; background: var(--sf-white); color: var(--sf-ink); box-shadow: var(--sf-cl-af-schatten); }
.sf-cl-af-coupon-haupt { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--sf-hm-s1); padding: var(--sf-hm-s3) var(--sf-hm-s4); }
.sf-cl-af-coupon-oben { font-family: var(--sf-display); font-size: var(--sf-cl-af-vor); font-weight: 800; line-height: 1; }
.sf-cl-af-coupon-gross.sf-cl-af-coupon-gross { font-family: var(--sf-display); font-size: var(--sf-cl-af-gross); font-weight: 800; line-height: 0.85; color: var(--sf-ink); }
.sf-cl-af-frist { display: grid; gap: 2px; margin-top: var(--sf-hm-s2); }
.sf-cl-af-frist-rest.sf-cl-af-frist-rest { font-size: var(--sf-cl-schrift-15); font-weight: 800; color: var(--sf-ink); }
.sf-cl-af-linie { display: block; width: 100%; height: auto; overflow: visible; }
.sf-cl-af-linie-weg { fill: none; stroke: var(--sf-ink); stroke-width: 2; stroke-linejoin: round; }
.sf-cl-af-linie-tag { fill: var(--sf-ink); }
.sf-cl-af-linie-heute { fill: var(--sf-ink); stroke: var(--sf-white); stroke-width: 2; }
.sf-cl-af-linie-ende { fill: var(--sf-white); stroke: var(--sf-ink); stroke-width: 2; }
.sf-cl-af-frist-achse { display: flex; justify-content: space-between; font-size: var(--sf-cl-schrift-12); font-weight: 700; color: var(--sf-muted); }
.sf-cl-af-abriss { position: relative; flex: none; border-top: 2px dashed var(--sf-cl-tinte-20); }
.sf-cl-af-abriss::before, .sf-cl-af-abriss::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--sf-cl-creme); }
.sf-cl-af-abriss::before { left: -10px; }
.sf-cl-af-abriss::after { right: -10px; }
.sf-cl-af-abriss summary { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: var(--sf-hm-s2) var(--sf-hm-s3); border-radius: 6px; background: var(--sf-cl-af-rubbel); color: var(--sf-ink); font-size: var(--sf-cl-schrift-15); font-weight: 800; list-style: none; cursor: pointer; }
.sf-cl-af-abriss summary::-webkit-details-marker { display: none; }
.sf-cl-af-abriss[open] summary { display: none; }
.sf-cl-af-abriss-innen { display: block; padding: var(--sf-hm-s2) var(--sf-hm-s3); font-size: var(--sf-cl-schrift-14); line-height: 1.4; }
.sf-cl-af-abriss-innen a { font-weight: 800; color: var(--sf-ink); }
.sf-cl-af[data-sf-motiv="karte"] .sf-cl-af-motiv { justify-content: center; align-items: center; }
.sf-cl-af-karte { position: relative; display: grid; align-content: space-between; gap: 2cqi; width: 84%; aspect-ratio: 1.586; padding: 5cqi; overflow: hidden; border-radius: 14px; background: var(--sf-club); color: var(--sf-white); box-shadow: var(--sf-cl-af-schatten); transform: rotate(-6deg); }
.sf-cl-af-karte::before { content: ""; position: absolute; inset: -40% auto -40% 48%; width: 26%; background: var(--sf-cl-af-glanz); transform: rotate(18deg); }
.sf-cl-af-karte-kopf { font-size: var(--sf-cl-af-klein); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.sf-cl-af-karte-name { font-family: var(--sf-display); font-size: var(--sf-cl-af-name); font-weight: 800; line-height: 1; }
.sf-cl-af-karte-punkte { display: flex; align-items: baseline; gap: 1.6cqi; }
.sf-cl-af-karte-punkte small { font-size: var(--sf-cl-af-klein); font-weight: 700; }
.sf-cl-af-zaehler { --sf-cl-zaehler: var(--sf-cl-start); counter-reset: sf-cl-z var(--sf-cl-zaehler); font-family: var(--sf-display); font-size: var(--sf-cl-af-zahl); font-weight: 800; line-height: 0.9; }
.sf-cl-af-zaehler::after { content: "+" counter(sf-cl-z); }
.sf-cl-af-karte-linie { display: grid; gap: 1cqi; }
.sf-cl-af-karte-spur { display: block; height: 4px; border-radius: 2px; background: var(--sf-cl-af-weiss-30); }
.sf-cl-af-karte-fuell { display: block; width: 100%; height: 100%; border-radius: 2px; background: var(--sf-white); }
.sf-cl-af-karte-stufen { display: flex; justify-content: space-between; font-size: var(--sf-cl-af-klein); }
.sf-cl-af-karte-stufen small { display: grid; }
.sf-cl-af-karte-stufen small:nth-child(2) { text-align: center; }
.sf-cl-af-karte-stufen small:last-child { text-align: right; }
.sf-cl-af-slalom { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--sf-hm-s1); }
.sf-cl-af-preis.sf-cl-af-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2.4cqi; margin: 0; font-family: var(--sf-display); font-weight: 800; line-height: 0.82; }
.sf-cl-af-preis span { font-size: var(--sf-cl-af-vor); }
.sf-cl-af-preis b { font-size: var(--sf-cl-af-riesig); color: var(--sf-ink); }
.sf-cl-af-unter.sf-cl-af-unter { margin: 0; font-size: var(--sf-cl-schrift-14); font-weight: 600; color: var(--sf-muted); }
.sf-cl-af-ort.sf-cl-af-ort { position: absolute; left: 0; bottom: var(--sf-hm-s2); z-index: 1; margin: 0; font-size: var(--sf-cl-schrift-13); font-weight: 700; color: var(--sf-ink); }
.sf-cl-af-strecke { position: relative; flex: 1 1 auto; min-height: 0; display: block; width: 100%; margin: var(--sf-hm-s1) 0 0; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sf-cl-af-strecke-bild { position: absolute; inset: 0; display: block; }
.sf-cl-af-strecke-bild > svg { display: block; width: 100%; height: 100%; }
.sf-cl-af-hang { fill: var(--sf-cl-af-schnee); }
.sf-cl-af-hoehenlinie { fill: none; stroke: var(--sf-cl-af-linie); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.sf-cl-af-ideallinie { fill: none; stroke: var(--sf-cl-af-spur); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sf-cl-af-tor { stroke: var(--sf-ink); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sf-cl-af-tor--rot { stroke: var(--sf-cl-rot); }
.sf-cl-af-start { fill: var(--sf-ink); }
.sf-cl-af-fahrer { position: absolute; left: 5.6%; top: 13.3%; width: 14px; height: 14px; border-radius: 50%; background: var(--sf-ink); box-shadow: 0 0 0 3px var(--sf-white); transform: translate(-50%, -50%); animation: sf-cl-fahrt 2.8s ease-in-out 0.5s both; }
@keyframes sf-cl-fahrt { 0% { left: 5.6%; top: 13.3%; } 16% { left: 20.6%; top: 30.7%; } 33% { left: 35%; top: 25.3%; } 50% { left: 50%; top: 49.3%; } 66% { left: 64.4%; top: 42.7%; } 83% { left: 78.8%; top: 69.3%; } 100% { left: 93.1%; top: 64%; } }
.sf-cl-af-uhr { position: absolute; top: 0; right: 0; display: flex; align-items: center; gap: var(--sf-hm-s1); padding: var(--sf-hm-s1) var(--sf-hm-s2); border-radius: 6px; background: var(--sf-white); box-shadow: 0 0 0 1px var(--sf-line); color: var(--sf-ink); text-align: left; }
.sf-cl-af-uhr svg { width: 26px; height: 30px; fill: none; stroke: var(--sf-ink); stroke-width: 2.5; stroke-linecap: round; }
.sf-cl-af-uhr span { display: grid; line-height: 1.1; }
.sf-cl-af-uhr small { font-size: var(--sf-cl-schrift-12); font-weight: 700; color: var(--sf-muted); }
.sf-cl-af-uhr b { font-family: var(--sf-display); font-size: var(--sf-cl-schrift-17); }
.sf-cl-af-hw { flex: 1 1 auto; display: grid; place-items: center; }
.sf-cl-af-hw .sf-cl-hw-karten { width: min(82%, 320px); }
@keyframes sf-cl-zaehlen { from { --sf-cl-zaehler: 0; } to { --sf-cl-zaehler: var(--sf-cl-start); } }
@keyframes sf-cl-fuellen { from { width: 3%; } to { width: 100%; } }
@media (prefers-reduced-motion: no-preference) {
.sf-cl-af-zaehler { animation: sf-cl-zaehlen 1.6s ease-out 0.3s both; }
.sf-cl-af-karte-fuell { animation: sf-cl-fuellen 2.4s ease-in-out 0.3s both; }
@supports (animation-timeline: view()) {
.sf-cl-af-zaehler, .sf-cl-af-karte-fuell { animation-duration: auto; animation-delay: 0s; animation-timeline: view(); animation-range: entry 30% cover 50%; }
}
}
@media (prefers-reduced-motion: reduce) {
.sf-cl-af-fahrer { animation: none; left: 93.1%; top: 64%; }
}
.sf-cl-gw-bild[data-sf-art="slalom"] { position: relative; background: var(--sf-white); }
.sf-cl-gewinn-bild .sf-cl-gw-bild[data-sf-art="slalom"] .sf-cl-af-strecke-bild { inset: var(--sf-hm-s4); }
.sf-cl-gw-wert.sf-cl-gw-wert { font-family: var(--sf-display); font-size: var(--sf-cl-schrift-17); font-weight: 800; color: var(--sf-ink); }
.sf-cl-reihe-kachel[data-sf-motiv="gutschein"].sf-cl-reihe-kachel { background: var(--sf-cl-creme); color: var(--sf-white); }
.sf-cl-reihe-kachel[data-sf-motiv="gutschein"] .sf-cl-gutschein { border-color: var(--sf-white); }
.sf-cl-reihe-kachel[data-sf-motiv="karte"].sf-cl-reihe-kachel { background: var(--sf-cl-creme); }
.sf-cl-reihe-motiv[data-sf-motiv="karte"] .sf-cl-karte { transform: rotate(-6deg); }
.sf-cl-reihe-kachel[data-sf-motiv="slalom"].sf-cl-reihe-kachel { background: var(--sf-white); }
.sf-cl-reihe-wert.sf-cl-reihe-wert { font-family: var(--sf-display); font-size: var(--sf-cl-st-label); font-weight: 800; line-height: 1; color: var(--sf-ink); }
.sf-cl-reihe-motiv[data-sf-motiv="halloween"] .sf-cl-hw-karten { width: 100%; }
@container sf-cl (min-width: 720px) {
.sf-cl-reihe-wert.sf-cl-reihe-wert { font-size: var(--sf-cl-h2); }
}
.sf-cl-st-reiter { position: absolute; z-index: 3; top: var(--sf-hm-s3); left: var(--sf-hm-s3); right: calc(var(--sf-hm-s3) + var(--sf-st-play) + var(--sf-hm-s2)); display: flex; flex-wrap: wrap; gap: 6px; }
.sf-cl-st[data-sf-reiter] .sf-st-zeile { top: calc(var(--sf-hm-s3) + 40px); }
.sf-cl-st-reiter-punkt.sf-cl-st-reiter-punkt { display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--sf-hm-s2); border: 1px solid var(--sf-cl-tinte-20); border-radius: 999px; background: var(--sf-white); color: var(--sf-ink); font: inherit; font-size: var(--sf-cl-schrift-13); font-weight: 700; line-height: 1; white-space: nowrap; cursor: pointer; }
.sf-cl-st-reiter-punkt[aria-pressed="true"].sf-cl-st-reiter-punkt { border-color: var(--sf-ink); background: var(--sf-ink); color: var(--sf-white); }
.sf-cl-st:has(.sf-st-bild:nth-child(1)[data-sf-aktiv]) span.sf-cl-st-reiter-punkt:nth-child(1), .sf-cl-st:has(.sf-st-bild:nth-child(2)[data-sf-aktiv]) span.sf-cl-st-reiter-punkt:nth-child(2), .sf-cl-st:has(.sf-st-bild:nth-child(3)[data-sf-aktiv]) span.sf-cl-st-reiter-punkt:nth-child(3), .sf-cl-st:has(.sf-st-bild:nth-child(4)[data-sf-aktiv]) span.sf-cl-st-reiter-punkt:nth-child(4), .sf-cl-st:has(.sf-st-bild:nth-child(5)[data-sf-aktiv]) span.sf-cl-st-reiter-punkt:nth-child(5), .sf-cl-st:has(.sf-st-bild:nth-child(6)[data-sf-aktiv]) span.sf-cl-st-reiter-punkt:nth-child(6) { border-color: var(--sf-ink); background: var(--sf-ink); color: var(--sf-white); }
.sf-cl-clubkopf-karte { container: sf-cl-karte / inline-size; display: grid; place-items: center; width: 100%; max-width: 420px; padding: var(--sf-hm-s5) 0 var(--sf-hm-s3); justify-self: center; }
.sf-cl-ek-liste.sf-cl-ek-liste { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); margin: 0; padding: 0; list-style: none; }
.sf-cl-ek { container: sf-cl-ek / inline-size; display: flex; flex-direction: column; min-width: 0; margin: 0; background: var(--sf-cl-creme); }
.sf-cl-ek[data-sf-grund="weiss"] { background: var(--sf-white); box-shadow: inset 0 0 0 1px var(--sf-line); }
.sf-cl-ek-grafik { display: grid; gap: var(--sf-hm-s1); padding: var(--sf-hm-s5) var(--sf-hm-s4) var(--sf-hm-s3); }
.sf-cl-ek-gross.sf-cl-ek-gross { font-family: var(--sf-display); font-size: var(--sf-cl-ek-gross); font-weight: 800; line-height: 0.82; color: var(--sf-ink); }
.sf-cl-ek-klein.sf-cl-ek-klein { font-size: var(--sf-cl-schrift-15); font-weight: 700; color: var(--sf-muted); }
.sf-cl-ek-grafik .sf-cl-weg-zu-vip { margin-top: var(--sf-hm-s3); padding: 0; }
.sf-cl-ek-text { flex: 1 1 auto; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sf-hm-s2); padding: 0 var(--sf-hm-s4) var(--sf-hm-s4); }
.sf-cl-ek-titel.sf-cl-ek-titel { font-family: var(--sf-display); font-size: var(--sf-cl-h2); font-weight: 800; line-height: 1.05; text-wrap: balance; }
.sf-cl-ek-satz { font-size: var(--sf-cl-schrift-16); line-height: 1.45; }
.sf-cl-ek-los { margin-top: auto; padding-top: var(--sf-hm-s2); }
@container sf-cl (min-width: 900px) {
.sf-cl-ek-liste.sf-cl-ek-liste { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* club-feed.css */
.sf-cf { container: sf-cf / inline-size; font-family: var(--sf-cf-schrift); color: var(--sf-cf-ink); padding-top: var(--sf-cf-s20); padding-bottom: 64px; }
.sf-cf-seitenkopf { display: grid; gap: 6px; margin-bottom: var(--sf-cf-s20); }
.sf-cf-kz { display: flex; align-items: center; gap: 10px; margin: 0; font-size: var(--sf-cf-s13); font-weight: 700; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-cf-akzent, var(--sf-cf-travel)); }
.sf-cf-kz::before { content: ""; flex: none; width: var(--sf-cf-s20); height: 3px; background: currentColor; }
.sf-cf .sf-cf-h1 { margin: 0; font-family: var(--sf-cf-schrift); font-weight: 900; font-size: var(--sf-cf-h1); line-height: 0.96; letter-spacing: -0.012em; text-wrap: balance; color: var(--sf-cf-ink); }
.sf-cf-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sf-cf-s20); grid-template-columns: minmax(0, 1fr); }
.sf-cf-feed > li { min-width: 0; }
@container sf-cf (min-width: 720px) {
.sf-cf-feed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sf-cf (min-width: 1080px) {
.sf-cf-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-cf-karte-story[data-sf-ton="aktion"] { --sf-cf-b1: var(--sf-cf-blau); --sf-cf-b2: var(--sf-cf-blau-tief); --sf-cf-akzent: var(--sf-cf-signal); --sf-cf-ti: var(--sf-cf-weiss); --sf-cf-sa: var(--sf-cf-weiss); --sf-cf-kb: var(--sf-cf-sale); --sf-cf-kt: var(--sf-cf-weiss); --sf-cf-kopf: var(--sf-cf-weiss); }
.sf-cf-karte-story[data-sf-ton="club"] { --sf-cf-b1: var(--sf-cf-lila); --sf-cf-b2: var(--sf-cf-lila-tief); --sf-cf-akzent: var(--sf-cf-club-tint); --sf-cf-ti: var(--sf-cf-weiss); --sf-cf-sa: var(--sf-cf-club-tint); --sf-cf-kb: var(--sf-cf-weiss); --sf-cf-kt: var(--sf-cf-lila-tief); --sf-cf-kopf: var(--sf-cf-weiss); }
.sf-cf-karte-story[data-sf-ton="saison"] { --sf-cf-b1: var(--sf-cf-nacht); --sf-cf-b2: var(--sf-cf-blau-tief); --sf-cf-akzent: var(--sf-cf-eis); --sf-cf-ti: var(--sf-cf-weiss); --sf-cf-sa: var(--sf-cf-linie); --sf-cf-kb: var(--sf-cf-weiss); --sf-cf-kt: var(--sf-cf-nacht); --sf-cf-kopf: var(--sf-cf-weiss); }
.sf-cf-karte-story[data-sf-ton="marke"] { --sf-cf-b1: var(--sf-cf-nacht); --sf-cf-b2: var(--sf-cf-nacht); --sf-cf-akzent: var(--sf-cf-weiss); --sf-cf-ti: var(--sf-cf-weiss); --sf-cf-sa: var(--sf-cf-linie); --sf-cf-kb: var(--sf-cf-weiss); --sf-cf-kt: var(--sf-cf-nacht); --sf-cf-kopf: var(--sf-cf-weiss); }
.sf-cf-karte-story[data-sf-ton="magazin"] { --sf-cf-b1: var(--sf-cf-flaeche); --sf-cf-b2: var(--sf-cf-linie); --sf-cf-akzent: var(--sf-cf-travel); --sf-cf-ti: var(--sf-cf-ink); --sf-cf-sa: var(--sf-cf-text); --sf-cf-kb: var(--sf-cf-ink); --sf-cf-kt: var(--sf-cf-weiss); --sf-cf-kopf: var(--sf-cf-ink); }
.sf-cf-karte-story[data-sf-ton="kampagne"] { --sf-cf-b1: var(--sf-cf-nacht); --sf-cf-b2: var(--sf-cf-lila-tief); --sf-cf-akzent: var(--sf-cf-signal); --sf-cf-ti: var(--sf-cf-weiss); --sf-cf-sa: var(--sf-cf-linie); --sf-cf-kb: var(--sf-cf-weiss); --sf-cf-kt: var(--sf-cf-nacht); --sf-cf-kopf: var(--sf-cf-weiss); }
.sf-cf-karte-story { position: relative; aspect-ratio: 4 / 5; max-width: 100%; overflow: hidden; background: var(--sf-cf-b1); container: sf-cf-k / inline-size; -webkit-user-select: none; user-select: none; scroll-margin-top: 96px; }
.sf-cf-kopf { position: absolute; z-index: 6; inset: 0 0 auto 0; padding: 10px 12px 8px; background: var(--sf-cf-b1); color: var(--sf-cf-kopf); pointer-events: none; }
.sf-cf-kopf .sf-st-oben { position: static; padding: 0; }
.sf-cf-kopf .sf-st-profil { height: 20px; }
.sf-cf-kopf .sf-st-weg { stroke: var(--sf-cf-weiss-35); }
.sf-cf-kopf .sf-st-geschafft { stroke: currentColor; stroke-width: 3; }
.sf-cf-kopf .sf-st-station { fill: var(--sf-cf-weiss-55); }
.sf-cf-kopf .sf-st-station[data-sf-da], .sf-cf-kopf .sf-st-station[data-sf-jetzt] { fill: currentColor; stroke: none; }
.sf-cf-karte-story[data-sf-ton="magazin"] .sf-st-weg { stroke: var(--sf-cf-ink-12); }
.sf-cf-karte-story[data-sf-ton="magazin"] .sf-st-station { fill: var(--sf-cf-ink-12); }
.sf-cf-karte-story[data-sf-ton="magazin"] .sf-st-station[data-sf-da], .sf-cf-karte-story[data-sf-ton="magazin"] .sf-st-station[data-sf-jetzt] { fill: var(--sf-cf-ink); }
.sf-cf-zeile { display: flex; align-items: center; gap: 8px; margin-top: 6px; min-height: 32px; }
.sf-cf-wer { margin-right: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; font-size: var(--sf-cf-s17); line-height: 1; }
.sf-cf-wer img { display: block; width: auto; height: 24px; max-width: 140px; object-fit: contain; }
.sf-cf-kopf .sf-st-play.sf-st-play { width: 32px; height: 32px; border-radius: 0; background: var(--sf-cf-weiss-18); color: var(--sf-cf-kopf); }
.sf-cf-karte-story[data-sf-ton="magazin"] .sf-st-play.sf-st-play { background: var(--sf-cf-ink-08); }
.sf-cf-folien { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.sf-cf-folien::-webkit-scrollbar { display: none; }
.sf-cf-folien:focus-visible { outline: 3px solid var(--sf-cf-akzent); outline-offset: -3px; }
.sf-cf-folie { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; display: grid; grid-template-rows: 54% minmax(0, 1fr); overflow: hidden; background: var(--sf-cf-b1); }
.sf-cf-bild { position: relative; z-index: 1; display: block; background: var(--sf-cf-b2); }
.sf-cf-text { position: relative; z-index: 2; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 16px; color: var(--sf-cf-ti); }
.sf-cf-text[data-sf-ueber] { padding-top: 40px; }
.sf-cf-bild[data-sf-art="halloween"] + .sf-cf-text { padding-top: 42px; }
.sf-cf-titel { display: block; margin-top: 4px; font-weight: 900; font-size: var(--sf-cf-titel); line-height: 0.96; letter-spacing: -0.012em; text-wrap: balance; color: var(--sf-cf-ti); }
.sf-cf-titel em { display: inline-block; font-family: var(--sf-cf-galada); font-style: normal; font-weight: 400; font-size: 1.13em; line-height: 0.7; letter-spacing: 0; color: var(--sf-cf-akzent); transform: rotate(-3deg) translateY(0.06em); }
.sf-cf-satz { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-width: 34ch; font-weight: 600; font-size: var(--sf-cf-s15); line-height: 1.3; color: var(--sf-cf-sa); }
.sf-cf-daten { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--sf-cf-s13); font-weight: 700; color: var(--sf-cf-sa); }
.sf-cf-daten b { font-weight: 900; font-size: var(--sf-cf-s18); color: var(--sf-cf-ti); }
.sf-cf-knopf.sf-cf-knopf { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 18px; border-radius: 0; background: var(--sf-cf-kb); color: var(--sf-cf-kt); font-family: var(--sf-cf-schrift); font-weight: 700; font-size: var(--sf-cf-s15); text-decoration: none; white-space: nowrap; }
.sf-cf-knopf:focus-visible { outline: 3px solid var(--sf-cf-akzent); outline-offset: 2px; }
.sf-cf-pfeil { width: var(--sf-cf-s18); height: var(--sf-cf-s18); fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.sf-cf-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sf-cf-kasten { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--sf-cf-weiss); border-radius: 6px; color: var(--sf-cf-nacht); }
.sf-cf-bild[data-sf-art="produkt"] .sf-cf-kasten, .sf-cf-bild[data-sf-art="illu"] .sf-cf-kasten { left: 14px; right: 14px; top: 82px; bottom: -26px; padding: 26px 12px 8px; }
.sf-cf-bild[data-sf-art="illu"] .sf-cf-kasten { padding: 6px; }
.sf-cf-kasten img { max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; mix-blend-mode: multiply; }
.sf-cf-kasten small { font-weight: 700; font-size: var(--sf-cf-s12); color: var(--sf-cf-grau); }
.sf-cf-band { position: absolute; top: 10px; right: -6px; z-index: 4; }
.sf-cf-band > span { display: block; padding: 7px 10px 6px 16px; background: var(--sf-cf-b2); color: var(--sf-cf-weiss); font-weight: 700; font-size: var(--sf-cf-s11); line-height: 1; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; clip-path: polygon(0 0, 100% 0, 100% 100%, 0.5em 100%); }
.sf-cf-band::after { content: ""; position: absolute; right: 0; top: 100%; border-top: 6px solid var(--sf-cf-nacht); border-right: 6px solid transparent; }
.sf-cf-gfx, .sf-cf-linie, .sf-cf-berg { position: absolute; inset: 92px 0 0 0; display: block; width: 100%; height: calc(100% - 92px); overflow: visible; }
.sf-cf-gfx svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.sf-cf-hl { fill: none; stroke: var(--sf-cf-weiss-16); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.sf-cf-ideal { fill: none; stroke: var(--sf-cf-weiss-55); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.sf-cf-tor { stroke: var(--sf-cf-weiss); stroke-width: 4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.sf-cf-tor--eis { stroke: var(--sf-cf-eis); }
.sf-cf-fahrer { position: absolute; left: 4.7%; top: 12%; width: 14px; height: 14px; border: 3px solid var(--sf-cf-weiss); border-radius: 50%; background: var(--sf-cf-eis); transform: translate(-50%, -50%); }
.sf-cf-folie[data-sf-aktiv] .sf-cf-fahrer { animation: sf-cf-fahrt 2.8s ease-in-out 0.3s both; }
@keyframes sf-cf-fahrt { 0% { left: 4.7%; top: 12%; } 16% { left: 20%; top: 30.7%; } 33% { left: 34.7%; top: 25.3%; } 50% { left: 50%; top: 49.3%; } 66% { left: 64.7%; top: 42.7%; } 83% { left: 79.3%; top: 69.3%; } 100% { left: 94.7%; top: 64%; } }
.sf-cf-uhr { position: absolute; right: 12px; bottom: -22px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 6px; background: var(--sf-cf-weiss); color: var(--sf-cf-nacht); }
.sf-cf-uhr svg { width: 22px; height: 26px; fill: none; stroke: var(--sf-cf-nacht); stroke-width: 2.5; stroke-linecap: round; }
.sf-cf-uhr small { display: block; font-size: var(--sf-cf-s11); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-cf-grau); }
.sf-cf-uhr b { font-weight: 900; font-size: var(--sf-cf-s17); font-variant-numeric: tabular-nums; }
.sf-cf-bild[data-sf-art="strecke"] + .sf-cf-text { padding-top: 32px; }
.sf-cf-podest { position: absolute; left: 14px; right: 14px; top: 86px; bottom: -26px; z-index: 3; display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 8px; }
.sf-cf-podest .sf-cf-kasten { position: relative; height: 70%; gap: 2px; }
.sf-cf-podest .sf-cf-kasten[data-sf-platz="1"] { height: 100%; }
.sf-cf-podest .sf-cf-kasten:last-child { height: 54%; }
.sf-cf-podest b { font-weight: 900; font-size: var(--sf-cf-podest); line-height: 0.9; }
.sf-cf-zahl { position: absolute; left: 16px; right: 16px; bottom: 14px; font-weight: 900; font-size: var(--sf-cf-zahl); line-height: 0.85; letter-spacing: -0.03em; color: var(--sf-cf-weiss); font-variant-numeric: tabular-nums; }
.sf-cf-coupon { position: absolute; left: 16px; right: 16px; top: 84px; bottom: -24px; z-index: 3; display: flex; flex-direction: column; border-radius: 6px; background: var(--sf-cf-weiss); color: var(--sf-cf-nacht); }
.sf-cf-coupon-haupt { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: 12px 16px 6px; }
.sf-cf-coupon-haupt > small { font-weight: 700; font-size: var(--sf-cf-s13); letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-cf-grau); }
.sf-cf-coupon-haupt > b { font-weight: 900; font-size: var(--sf-cf-coupon); line-height: 0.9; letter-spacing: -0.02em; }
.sf-cf-frist { width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.sf-cf-frist path { fill: none; stroke: var(--sf-cf-nacht); stroke-width: 2; }
.sf-cf-frist circle { fill: var(--sf-cf-nacht); }
.sf-cf-frist circle[data-sf-ende] { fill: var(--sf-cf-weiss); stroke: var(--sf-cf-nacht); stroke-width: 2; }
.sf-cf-achse { display: flex; justify-content: space-between; font-size: var(--sf-cf-s11); font-weight: 700; color: var(--sf-cf-grau); }
.sf-cf-abriss { position: relative; flex: none; display: block; padding: 10px 16px 12px; border-top: 2px dashed var(--sf-cf-linie); font-weight: 700; font-size: var(--sf-cf-s13); color: var(--sf-cf-nacht); }
.sf-cf-abriss::before, .sf-cf-abriss::after { content: ""; position: absolute; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--sf-cf-b2); }
.sf-cf-abriss::before { left: -8px; }
.sf-cf-abriss::after { right: -8px; }
.sf-cf-wand { position: absolute; left: 12px; right: 12px; top: 84px; bottom: -36px; z-index: 3; margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 5px; overflow: hidden; }
.sf-cf-wand li { display: grid; grid-template-rows: 1fr auto; place-items: center; min-width: 0; min-height: 0; padding: 3px; border-radius: 6px; background: var(--sf-cf-weiss); }
.sf-cf-wand img { max-width: 90%; max-height: 20px; object-fit: contain; }
.sf-cf-wand b { font-weight: 900; font-size: var(--sf-cf-s12); line-height: 1; text-align: center; overflow-wrap: anywhere; color: var(--sf-cf-nacht); }
.sf-cf-wand small { font-size: var(--sf-cf-s10); font-weight: 700; color: var(--sf-cf-grau); }
.sf-cf-wand li[data-sf-alles] { grid-column: span 2; background: var(--sf-cf-signal); }
.sf-cf-wand li[data-sf-alles] b { font-size: var(--sf-cf-s18); }
.sf-cf-wand li[data-sf-alles] small { color: var(--sf-cf-nacht); }
.sf-cf-bild[data-sf-art="wand"] + .sf-cf-text { padding-top: 48px; }
.sf-cf-linie path, .sf-cf-berg .sf-cf-kontur { fill: none; stroke: var(--sf-cf-weiss); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sf-cf-linie circle, .sf-cf-berg circle { fill: var(--sf-cf-weiss); }
.sf-cf-linie[data-sf-akzent] path { stroke: var(--sf-cf-akzent); }
.sf-cf-linie[data-sf-akzent] circle { fill: var(--sf-cf-akzent); }
.sf-cf-berg .sf-cf-flaeche { fill: var(--sf-cf-weiss-10); }
.sf-cf-marken { position: absolute; inset: 92px 0 0 0; margin: 0; padding: 0; list-style: none; }
.sf-cf-marken li { position: absolute; max-width: 42%; padding: 0 4px 12px 0; text-align: right; font-size: var(--sf-cf-s12); font-weight: 700; line-height: 1.1; color: var(--sf-cf-kopf); transform: translate(-100%, -100%); }
.sf-cf-marken li:first-child { padding: 12px 0 0 4px; text-align: left; transform: none; }
.sf-cf-marken li[data-sf-oben] { padding: 0 0 12px 4px; transform: translateY(-100%); }
.sf-cf-marken li[data-sf-rechts] { padding: 14px 0 0; text-align: right; transform: translate(-100%, 0); }
.sf-cf-marken b { display: block; white-space: nowrap; font-weight: 900; font-size: var(--sf-cf-s20); }
.sf-cf-karte { position: absolute; left: 10%; bottom: -28px; z-index: 3; width: 80%; max-width: 100%; aspect-ratio: 1.586; display: grid; align-content: space-between; padding: 5cqi; border-radius: 6px; background: var(--sf-cf-club-tint); color: var(--sf-cf-lila-tief); transform: rotate(-6deg); }
.sf-cf-karte > small { font-size: var(--sf-cf-karte-klein); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.sf-cf-karte-name { font-weight: 900; font-size: var(--sf-cf-karte-name); line-height: 1; color: var(--sf-cf-nacht); }
.sf-cf-karte-punkte { display: flex; align-items: baseline; gap: 2cqi; }
.sf-cf-karte-punkte b { font-weight: 900; font-size: var(--sf-cf-karte-punkte); line-height: 0.85; letter-spacing: -0.02em; color: var(--sf-cf-lila); }
.sf-cf-karte-punkte small { font-size: var(--sf-cf-karte-klein); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.sf-cf-karte-spur { position: relative; display: block; height: 5px; background: var(--sf-cf-lila-18); }
.sf-cf-karte-spur > span { position: absolute; inset: 0 auto 0 0; width: 3%; background: var(--sf-cf-lila); transition: width 2.4s ease-in-out 0.3s; }
.sf-cf-folie[data-sf-aktiv] .sf-cf-karte-spur > span { width: 100%; }
.sf-cf-karte-stufen { display: flex; justify-content: space-between; margin-top: 1.4cqi; font-size: var(--sf-cf-karte-klein); font-weight: 700; }
.sf-cf-faecher { position: absolute; left: 0; right: 0; bottom: -24px; z-index: 3; display: flex; justify-content: center; }
.sf-cf-faecher img { width: 30%; max-width: 100%; aspect-ratio: 2 / 3; margin: 0 -2.5%; border-radius: 6px; object-fit: cover; }
.sf-cf-faecher img:first-child { transform: rotate(-10deg) translateY(8px); }
.sf-cf-faecher img:nth-child(2) { position: relative; z-index: 1; }
.sf-cf-faecher img:last-child { transform: rotate(10deg) translateY(8px); }
.sf-cf-figur { position: absolute; right: 4%; bottom: -30px; z-index: 3; width: 56%; max-width: 100%; animation: sf-cf-schweben 4s ease-in-out infinite; }
@keyframes sf-cf-schweben { 50% { transform: translateY(-8px) rotate(-2deg); } }
.sf-cf-scheiben { position: absolute; left: 14px; right: 14px; bottom: -24px; z-index: 3; display: flex; justify-content: center; gap: 3%; padding: 14px 10px; border-radius: 6px; background: var(--sf-cf-weiss); }
.sf-cf-scheiben span { position: relative; width: 16%; aspect-ratio: 1; border-radius: 50%; background: var(--sf-cf-nacht); }
.sf-cf-scheiben span::after { content: ""; position: absolute; inset: 30%; border: 2px solid var(--sf-cf-weiss); border-radius: 50%; }
@media (prefers-reduced-motion: reduce) {
.sf-cf-fahrer { animation: none; left: 94.7%; top: 64%; }
.sf-cf-figur { animation: none; }
.sf-cf-karte-spur > span { transition: none; }
}
@container sf-cf-k (max-width: 360px) {
.sf-cf-folie { grid-template-rows: 50% minmax(0, 1fr); }
.sf-cf-text[data-sf-ueber] { padding-top: 34px; }
.sf-cf-coupon { top: 88px; bottom: -18px; }
.sf-cf-coupon-haupt > small { display: none; }
.sf-cf-coupon-haupt { justify-content: flex-start; padding-top: 8px; }
.sf-cf-coupon-haupt > b { font-size: var(--sf-cf-coupon-schmal); }
.sf-cf-achse { display: none; }
.sf-cf-frist { max-height: 26px; }
.sf-cf-abriss { padding-top: 6px; padding-bottom: 8px; }
}
/* breadcrumbs.css */
.sf-dynamik .sf-path { padding: 14px 0; margin: 0; color: var(--sf-muted, var(--sf-neutral-580)); font-size: var(--sf-size-12); line-height: 1.55; }
.sf-path ol { display: flex; flex-wrap: wrap; gap: 5px 0; list-style: none; padding: 0; margin: 0; }
.sf-path li { display: inline-flex; gap: 8px; align-items: baseline; min-width: 0; max-width: 100%; }
.sf-path li + li { padding-left: 8px; }
.sf-path svg { align-self: center; flex-shrink: 0; color: var(--sf-muted); }
.sf-path a { color: inherit; text-decoration: none; }
.sf-path a:hover { text-decoration: underline; color: var(--sf-text, var(--sf-neutral-950)); }
.sf-path [aria-current="page"] { color: var(--sf-text, var(--sf-neutral-950)); overflow-wrap: anywhere; }
.sf-preview-path { max-width: var(--sf-max-width, 1440px); width: calc(100% - 80px); margin: auto; }
@media (max-width: 800px) {
.sf-preview-path { width: calc(100% - 40px); }
}
.sf-dynamik .sf-path { display: none; }
/* section-navigation.css */
.sf-dynamik .sf-section-nav { display: flex; flex-wrap: wrap; gap: 0 28px; align-items: center; margin: 0; padding: 0; border-bottom: 1px solid var(--sf-line, var(--sf-neutral-190)); }
.sf-dynamik .sf-section-nav > a, .sf-dynamik .sf-section-nav > button { display: block; flex-shrink: 0; background: transparent; border: 0; border-bottom: 3px solid transparent; padding: 15px 0 12px; margin: 0; font: 650 var(--sf-size-14) var(--sf-body); color: var(--sf-muted); text-decoration: none; white-space: nowrap; cursor: pointer; }
.sf-dynamik .sf-section-nav > [aria-current="page"], .sf-dynamik .sf-section-nav > a:hover, .sf-dynamik .sf-section-nav > button:hover { color: var(--sf-section-accent, var(--sf-blue)); border-bottom-color: var(--sf-section-accent, var(--sf-blue)); }
.sf-dynamik .sf-section-nav-live { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; vertical-align: 1px; background: var(--sf-hm-live-gruen); box-shadow: 0 0 0 3px var(--sf-hm-live-ring); animation: sf-section-nav-live 2.4s ease-in-out infinite; }
@keyframes sf-section-nav-live { 50% { box-shadow: 0 0 0 5px var(--sf-hm-live-ring); } }
@media (prefers-reduced-motion: reduce) {
.sf-dynamik .sf-section-nav-live { animation: none; }
}
.sf-section-nav > :focus-visible { outline: 2px solid var(--sf-section-accent, var(--sf-blue)); outline-offset: -2px; }
.sf-dynamik .sf-area-entry .sf-path { padding-block: 12px; }
.sf-dynamik .sf-area-entry-stage, .sf-dynamik .sf-area-entry-stage .sf-concept-carousel, .sf-dynamik .sf-area-entry-stage .sf-content-stage { margin-top: 0; }
.sf-dynamik .tv > .sf-container > .sf-path { padding-block: 12px; }
.sf-dynamik .tv > .sf-container > .tv-hero { margin-top: 0; }
.sf-dynamik [data-page-anchor] { scroll-margin-top: 24px; }
@media (max-width: 640px) {
.sf-dynamik .sf-section-nav { gap: 0 20px; }
.sf-dynamik .sf-section-nav > a, .sf-dynamik .sf-section-nav > button { font-size: var(--sf-size-12); padding: 12px 0 10px; }
}
.sf-dynamik .sf-section-nav-apps { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex-shrink: 1; min-width: 0; margin-left: auto; padding-left: 24px; border-left: 1px solid var(--sf-line); }
.sf-dynamik .sf-section-nav-apps a, .sf-dynamik .sf-section-nav-apps button { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; margin: 0; cursor: pointer; white-space: nowrap; text-decoration: none; font: 650 var(--sf-size-13) var(--sf-body); }
.sf-dynamik .sf-section-nav-apps-label a, .sf-dynamik .sf-section-nav-apps-label button { padding: 8px 4px 8px 0; color: var(--sf-section-accent, var(--sf-blue)); font-size: var(--sf-size-11); letter-spacing: 0.1em; text-transform: var(--sf-label-case); }
.sf-dynamik .sf-section-nav-app a, .sf-dynamik .sf-section-nav-app button { padding: 7px 12px; color: var(--sf-ink); background: var(--sf-surface); border: 1px solid var(--sf-line); }
.sf-dynamik .sf-section-nav-app a:hover, .sf-dynamik .sf-section-nav-app a[aria-current="page"] { color: var(--sf-white); background: var(--sf-section-accent, var(--sf-blue)); border-color: var(--sf-section-accent, var(--sf-blue)); }
.sf-dynamik .sf-section-nav-apps :focus-visible { outline: 2px solid var(--sf-section-accent, var(--sf-blue)); outline-offset: 2px; }
@media (max-width: 760px) {
.sf-dynamik .sf-section-nav-apps { flex-basis: 100%; margin-left: 0; padding: 10px 0; border-left: 0; border-top: 1px solid var(--sf-line); }
}
.sf-dynamik .sf-section-nav-werkzeug { display: inline-flex; margin-left: auto; }
.sf-dynamik .sf-section-nav-werkzeug a, .sf-dynamik .sf-section-nav-werkzeug button { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--sf-line); border-radius: 999px; color: var(--sf-ink); background: var(--sf-white); white-space: nowrap; text-decoration: none; font: 650 var(--sf-size-13) var(--sf-body); }
.sf-dynamik .sf-section-nav-werkzeug a:hover, .sf-dynamik .sf-section-nav-werkzeug a[aria-current="page"] { color: var(--sf-white); background: var(--sf-section-accent, var(--sf-ink)); border-color: var(--sf-section-accent, var(--sf-ink)); }
@media (max-width: 760px) {
.sf-dynamik .sf-section-nav-werkzeug { margin-left: 0; }
}
.sf-dynamik .sf-section-nav-knoepfe { display: inline-flex; flex-wrap: wrap; gap: 0 28px; margin-left: auto; }
.sf-dynamik .sf-section-nav-knoepfe .sf-section-nav-werkzeug { margin-left: 0; }
.sf-dynamik .sf-section-nav-knoepfe .sf-section-nav-werkzeug a { display: block; padding: 15px 0 12px; border: 0; border-bottom: 3px solid transparent; border-radius: 0; background: transparent; color: var(--sf-ink); font: 650 var(--sf-size-14) var(--sf-body); }
.sf-dynamik .sf-section-nav-knoepfe .sf-section-nav-werkzeug a::after { content: " →"; }
.sf-dynamik .sf-section-nav-knoepfe .sf-section-nav-werkzeug[data-sf-betont] a { color: var(--sf-section-accent, var(--sf-ink)); }
.sf-dynamik .sf-section-nav-knoepfe .sf-section-nav-werkzeug a:hover, .sf-dynamik .sf-section-nav-knoepfe .sf-section-nav-werkzeug a[aria-current="page"] { color: var(--sf-section-accent, var(--sf-ink)); background: transparent; border-bottom-color: var(--sf-section-accent, var(--sf-ink)); }
@media (max-width: 760px) {
.sf-dynamik .sf-section-nav-knoepfe { margin-left: 0; }
}
/* magazin-menue.css */
.sf-themen, .sf-themen-blatt { --sf-themen-dauer: 280ms; --sf-themen-farbe: var(--sf-ink); --sf-themen-schleier: rgb(15 17 20 / 0.5); --sf-themen-schatten: rgb(0 0 0 / 0.18); --sf-themen-griff: #c8cacf; --sf-themen-kante: #e4e5e9; }
.sf-themen-knopf[data-section-area="travel"], .sf-themen-kachel[data-section-area="travel"], .sf-themen-ebene[data-section-area="travel"] { --sf-themen-farbe: var(--sf-travel); }
.sf-themen-knopf[data-section-area="club"], .sf-themen-kachel[data-section-area="club"], .sf-themen-ebene[data-section-area="club"] { --sf-themen-farbe: var(--sf-club); }
.sf-themen-knopf[data-section-area="sortiment"], .sf-themen-kachel[data-section-area="sortiment"], .sf-themen-ebene[data-section-area="sortiment"] { --sf-themen-farbe: var(--sf-sortiment); }
.sf-themen:not([data-sf-themen-bereit]) > .sf-themen-zeile { display: none; }
.sf-themen-zeile { padding-block: 10px; border-bottom: 1px solid var(--sf-line); }
@media (min-width: 801px) {
.sf-themen:not([data-sf-themen-fragment]) > .sf-themen-zeile { display: none; }
.sf-themen[data-sf-themen-fragment] > .sf-themen-zeile { padding-bottom: 0; border-bottom: 0; }
.sf-themen[data-sf-themen-fragment] .sf-themen-knopf { width: auto; min-height: 40px; padding: 4px 12px 4px 4px; }
.sf-themen[data-sf-themen-fragment] .sf-themen-knopf-text { display: none; }
.sf-themen[data-sf-themen-fragment] .sf-themen-knopf-symbol { width: 30px; height: 30px; }
}
@media (max-width: 800px) {
.sf-themen[data-sf-themen-bereit] > .sf-themen-leisten { display: none; }
}
.sf-dynamik .sf-themen-knopf { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin: 0; padding: 8px 14px 8px 8px; background: var(--sf-surface); border: 1px solid var(--sf-line); border-radius: 2px; color: var(--sf-ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-dynamik .sf-themen-knopf:hover { border-color: var(--sf-themen-farbe); }
.sf-dynamik .sf-themen-knopf:focus-visible { outline: 2px solid var(--sf-themen-farbe); outline-offset: 2px; }
.sf-themen-knopf-symbol { display: grid; flex: none; place-items: center; width: 40px; height: 40px; background: var(--sf-white); border-radius: 50%; color: var(--sf-themen-farbe); }
.sf-themen-knopf-text { display: flex; flex: 1; flex-direction: column; min-width: 0; line-height: 1.2; }
.sf-themen-knopf-text strong { font: 750 var(--sf-size-16)/1.2 var(--sf-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-themen-knopf-text small { margin-top: 2px; font: 500 var(--sf-size-13)/1.25 var(--sf-body); color: var(--sf-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-themen-knopf-mehr { display: inline-flex; flex: none; align-items: center; gap: 4px; font: 750 var(--sf-size-12)/1 var(--sf-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-themen-farbe); }
.sf-themen-blatt { position: fixed; inset: 0; z-index: 10000; }
.sf-themen-blatt[hidden] { display: none; }
.sf-themen-schleier { position: absolute; inset: 0; background: var(--sf-themen-schleier); opacity: 0; transition: opacity var(--sf-themen-dauer) ease; touch-action: none; }
.sf-themen-blatt[data-sf-themen-offen] .sf-themen-schleier { opacity: 1; }
.sf-themen-flaeche { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; max-width: 640px; min-height: min(60vh, 520px); max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); margin-inline: auto; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--sf-white); border-radius: 14px 14px 0 0; box-shadow: 0 -10px 40px var(--sf-themen-schatten); color: var(--sf-ink); font-family: var(--sf-body); transform: translateY(100%); transition: transform var(--sf-themen-dauer) cubic-bezier(0.22, 0.8, 0.24, 1); }
.sf-themen-blatt[data-sf-themen-offen] .sf-themen-flaeche { transform: none; }
.sf-themen-griff { display: flex; justify-content: center; padding: 9px 0 3px; touch-action: none; cursor: grab; }
.sf-themen-griff span { width: 40px; height: 4px; background: var(--sf-themen-griff); border-radius: 2px; }
.sf-themen-kopf { display: flex; align-items: center; gap: 8px; padding: 2px 16px 12px; border-bottom: 1px solid var(--sf-line); touch-action: none; }
.sf-dynamik .sf-themen-titel, .sf-themen-blatt .sf-themen-titel { flex: 1; margin: 0; font: 750 var(--sf-size-19)/1.2 var(--sf-body); color: var(--sf-ink); }
.sf-themen-blatt .sf-themen-schliessen, .sf-themen-blatt .sf-themen-zurueck { display: grid; flex: none; place-items: center; width: 40px; height: 40px; margin: 0; padding: 0; background: var(--sf-white); border: 1px solid var(--sf-line); border-radius: 2px; color: var(--sf-ink); cursor: pointer; }
.sf-themen-blatt .sf-themen-zurueck { border-color: transparent; margin-left: -8px; }
.sf-themen-blatt .sf-themen-zurueck[hidden] { display: none; }
.sf-themen-blatt button:focus-visible, .sf-themen-blatt a:focus-visible, .sf-themen-blatt input:focus-visible { outline: 2px solid var(--sf-themen-farbe); outline-offset: 2px; }
.sf-themen-inhalt { flex: 1; min-height: 0; padding: 16px 16px 20px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.sf-themen-ebene[hidden] { display: none; }
.sf-themen-inhalt[data-sf-themen-richtung="vor"] > .sf-themen-ebene:not([hidden]) { animation: sf-themen-vor 220ms ease-out; }
.sf-themen-inhalt[data-sf-themen-richtung="zurueck"] > .sf-themen-ebene:not([hidden]) { animation: sf-themen-zurueck 220ms ease-out; }
@keyframes sf-themen-vor { from { opacity: 0; transform: translateX(28px); } }
@keyframes sf-themen-zurueck { from { opacity: 0; transform: translateX(-28px); } }
.sf-themen-suche { display: flex; height: 46px; margin: 0 0 14px; background: var(--sf-white); border: 1px solid var(--sf-line); border-radius: 2px; }
.sf-themen-suche:focus-within { border-color: var(--sf-ink); }
.sf-themen-blatt .sf-themen-suche input { flex: 1; min-width: 0; margin: 0; padding: 0 12px; background: transparent; border: 0; font: 400 var(--sf-size-16)/1 var(--sf-body); color: var(--sf-ink); outline: none; }
.sf-themen-blatt .sf-themen-suche button { display: grid; flex: none; place-items: center; width: 46px; margin: 0; padding: 0; background: transparent; border: 0; color: var(--sf-ink); cursor: pointer; }
.sf-themen-blatt .sf-themen-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-themen-blatt .sf-themen-kacheln li { margin: 0; padding: 0; }
.sf-themen-blatt .sf-themen-kachel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 100%; min-height: 112px; margin: 0; padding: 14px 6px 12px; background: var(--sf-surface); border: 1px solid var(--sf-themen-kante); border-radius: 2px; color: var(--sf-ink); font: 650 var(--sf-size-14)/1.25 var(--sf-body); text-align: center; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sf-themen-blatt .sf-themen-kachel:hover, .sf-themen-blatt .sf-themen-kachel[aria-current] { border-color: var(--sf-themen-farbe); box-shadow: inset 0 0 0 1px var(--sf-themen-farbe); }
.sf-themen-kachel-symbol { display: grid; place-items: center; width: 52px; height: 52px; background: var(--sf-white); border-radius: 50%; color: var(--sf-themen-farbe); }
.sf-themen-kachel-symbol svg { width: 28px; height: 28px; }
.sf-themen-kachel-name { hyphens: auto; overflow-wrap: anywhere; }
.sf-themen-blatt .sf-themen-alle { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 14px 2px; border-top: 1px solid var(--sf-line); font: 650 var(--sf-size-15)/1.2 var(--sf-body); color: var(--sf-ink); text-decoration: none; }
.sf-themen-blatt .sf-themen-liste { margin: -6px 0 0; padding: 0; list-style: none; }
.sf-themen-blatt .sf-themen-liste li { margin: 0; padding: 0; }
.sf-themen-blatt .sf-themen-liste a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 2px; border-bottom: 1px solid var(--sf-line); font: 600 var(--sf-size-16)/1.25 var(--sf-body); color: var(--sf-ink); text-decoration: none; }
.sf-themen-blatt .sf-themen-liste a svg { flex: none; color: var(--sf-muted); }
.sf-themen-blatt .sf-themen-liste a[aria-current="page"] { color: var(--sf-themen-farbe); font-weight: 750; box-shadow: inset 3px 0 0 var(--sf-themen-farbe); padding-left: 14px; }
.sf-themen-blatt .sf-themen-liste a[aria-current="page"] svg { color: var(--sf-themen-farbe); }
@media (prefers-reduced-motion: reduce) {
.sf-themen-flaeche, .sf-themen-schleier { transition: none; }
.sf-themen-inhalt > .sf-themen-ebene:not([hidden]) { animation: none; }
}
/* shop-products.css */
.sf-shop-list { --sf-shop-accent: var(--sf-section-accent, var(--sf-blue, #0375b4)); --sf-shop-deal: var(--sf-lp-palette-rabatt-rot, #d01642); list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.sf-shop-list[data-layout="grid"] { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.sf-shop-list[data-layout="rail"] { grid-auto-flow: column; grid-auto-columns: minmax(210px, calc((100% - 48px) / 4)); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 2px 2px 12px; scrollbar-width: thin; }
@media (max-width: 640px) {
.sf-shop-list[data-layout="rail"] { grid-auto-columns: 68%; }
.sf-shop-list[data-layout="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.sf-shop-card { scroll-snap-align: start; min-width: 0; }
.sf-shop-card > a, .sf-shop-card > div { display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--sf-line, var(--sf-shop-farbe-dedfe1)); border-radius: 12px; background: var(--sf-white); color: var(--sf-ink); text-decoration: none; transition: box-shadow 0.25s ease, transform 0.25s ease; }
.sf-shop-card > a:hover { box-shadow: 0 10px 28px var(--sf-shop-farbe-schwarz-8); transform: translateY(-2px); }
.sf-shop-card figure { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--sf-tint-sand-20); }
.sf-shop-card figure img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; padding: 10%; mix-blend-mode: multiply; transition: transform 0.35s ease; }
.sf-shop-card > a:hover figure img { transform: scale(1.04); }
.sf-shop-card figure b, .sf-shop-card figure em { position: absolute; z-index: 1; top: 10px; padding: 4px 9px; border-radius: 999px; font: 700 var(--sf-size-11) / 1.2 var(--sf-body, inherit); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-shop-card figure b { left: 10px; background: var(--sf-white); color: var(--sf-ink); }
.sf-shop-card figure em { right: 10px; background: var(--sf-shop-accent); color: var(--sf-shop-farbe-weiss); }
.sf-shop-card-body { display: flex; flex: 1; flex-direction: column; gap: 4px; padding: 14px 16px 16px; }
.sf-shop-card-brand { color: var(--sf-muted, var(--sf-shop-farbe-6b6f76)); font: 700 var(--sf-size-11) / 1.3 var(--sf-body, inherit); letter-spacing: 0.12em; text-transform: uppercase; }
.sf-shop-card strong { display: -webkit-box; overflow: hidden; font: 700 var(--sf-size-16) / 1.3 var(--sf-body, inherit); -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sf-shop-card small { color: var(--sf-muted, var(--sf-shop-farbe-6b6f76)); font-size: var(--sf-size-13); line-height: 1.4; }
.sf-shop-card-price { margin-top: auto; padding-top: 8px; font: 700 var(--sf-size-16) / 1.3 var(--sf-body, inherit); }
.sf-shop-card-price--laedt::before { content: ""; display: block; width: 5.5em; height: 1.3em; border-radius: 4px; background: var(--sf-line); }
.sf-shop-card-amount { white-space: nowrap; }
.sf-shop-card-uvp { display: block; color: var(--sf-muted, var(--sf-shop-farbe-6b6f76)); font-weight: 400; font-size: var(--sf-size-13); white-space: nowrap; }
.sf-shop-card-deal-hint { margin-top: 2px; }
.sf-shop-card-price s { margin-left: 8px; color: var(--sf-muted, var(--sf-shop-farbe-6b6f76)); font-weight: 400; font-size: var(--sf-size-14); }
.sf-shop-card-deal { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 8px 10px; border-left: 4px solid var(--sf-shop-deal); background: color-mix(in srgb, var(--sf-shop-deal) 9%, var(--sf-white)); color: var(--sf-shop-deal); }
.sf-shop-card-deal small { font: 700 var(--sf-size-11) / 1.2 var(--sf-body, inherit); letter-spacing: 0.1em; text-transform: uppercase; color: inherit; }
.sf-shop-card-deal b { font: 800 var(--sf-size-22, 22px) / 1 var(--sf-display, inherit); letter-spacing: 0.01em; }
.sf-shop-card-cta { color: var(--sf-shop-accent); font: 700 var(--sf-size-13) / 1.3 var(--sf-body, inherit); }
.sf-shop-card--loading figure, .sf-shop-card--loading .sf-shop-card-body span { background: var(--sf-surface); animation: sf-shop-pulse 1.4s ease-in-out infinite; }
.sf-shop-card--loading .sf-shop-card-body { min-height: 163px; }
.sf-shop-card--loading .sf-shop-card-body span { display: block; height: 12px; border-radius: 4px; }
@keyframes sf-shop-pulse { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
.sf-shop-card > a, .sf-shop-card figure img, .sf-shop-card--loading figure { transition: none; animation: none; }
}
.sf-shop-list[data-variant="sale"] { --sf-shop-accent: var(--sf-blue); }
.sf-shop-list[data-variant="sale"][data-layout="grid"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 900px) {
.sf-shop-list[data-variant="sale"][data-layout="grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
.sf-shop-list[data-variant="sale"] .sf-shop-card > a, .sf-shop-list[data-variant="sale"] .sf-shop-card > div { border-radius: 0; }
.sf-shop-list[data-variant="sale"] .sf-shop-card figure { background: var(--sf-surface); }
.sf-shop-list[data-variant="sale"] .sf-shop-card figure em { top: 0; right: auto; left: 0; padding: 10px 14px; border-radius: 0; background: var(--sf-sale-sticker, var(--sf-shop-accent)); font: 800 var(--sf-size-20) / 1 var(--sf-display); letter-spacing: 0; }
.sf-shop-list[data-variant="sale"] .sf-shop-card figure b { top: 0; right: 0; left: auto; border-radius: 0; border-bottom: 1px solid var(--sf-line); border-left: 1px solid var(--sf-line); }
.sf-shop-list[data-variant="sale"] .sf-shop-card strong { font-size: var(--sf-size-18); }
.sf-shop-list[data-variant="sale"] .sf-shop-card-price { font-size: var(--sf-size-20); }
.sf-shop-list[data-variant="sale"] .sf-shop-card-cta { display: flex; justify-content: center; margin-top: 8px; padding: 12px; background: var(--sf-shop-accent); color: var(--sf-white); font-size: var(--sf-size-14); }
.sf-shop-list[data-variant="sale"] .sf-shop-card strong { display: block; -webkit-line-clamp: unset; }
.sf-shop-list[data-variant="sale"] .sf-shop-card-deal b { white-space: nowrap; }
@media (max-width: 640px) {
.sf-shop-list[data-variant="sale"] .sf-shop-card-deal { flex-wrap: wrap; gap: 2px 8px; padding: 8px; }
.sf-shop-list[data-variant="sale"] .sf-shop-card-deal b { font-size: var(--sf-size-20, 20px); }
}
.sf-shop-card--alle { display: none; }
@media (max-width: 640px) {
.sf-shop-list[data-variant="sale"][data-layout="grid"] { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 46%; gap: 10px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding-bottom: 12px; scrollbar-width: none; }
.sf-shop-list[data-variant="sale"] .sf-shop-card-body { gap: 2px; padding: 10px 10px 12px; }
.sf-shop-list[data-variant="sale"] .sf-shop-card strong { font-size: var(--sf-size-14); }
.sf-shop-list[data-variant="sale"] .sf-shop-card-body > small, .sf-shop-list[data-variant="sale"] .sf-shop-card-deal-hint, .sf-shop-list[data-variant="sale"] .sf-shop-card-cta { display: none; }
.sf-shop-list[data-variant="sale"] .sf-shop-card-price { font-size: var(--sf-size-16); }
.sf-shop-list[data-variant="sale"] .sf-shop-card figure em { padding: 6px 8px; font-size: var(--sf-size-16); }
.sf-shop-list[data-variant="sale"] .sf-shop-card-deal b { font-size: var(--sf-size-16, 16px); }
.sf-shop-list[data-variant="sale"] .sf-shop-card--alle { display: block; }
.sf-shop-card--alle > a { align-items: center; justify-content: center; gap: 8px; padding: 16px; border-color: var(--sf-blue); background: var(--sf-blue); color: var(--sf-white); font: 800 var(--sf-size-20) / 1.05 var(--sf-display); text-align: center; text-transform: uppercase; }
}
/* advertising.css */
.sf-display-ad { width: 300px; max-width: 100%; min-width: 0; align-self: start; }
.sf-display-ad-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--sf-muted); font: var(--sf-size-11)/1.4 var(--sf-body); }
.sf-display-ad-label > span:first-child { color: var(--sf-ink); font-weight: 700; }
.sf-display-ad-link, .sf-display-ad picture, .sf-display-ad img { display: block; width: 100%; }
.sf-display-ad img { height: auto; }
.sf-display-ad-link { background: var(--sf-surface); outline-offset: 5px; }
.sf-display-ad-link:hover { outline: 1px solid var(--sf-ink); }
.sf-display-ad--billboard { width: min(970px, 100%); margin: max(36px, var(--sf-section)) auto; }
.sf-ad-preview-links { display: grid; gap: 10px; margin-block: 16px; font-size: var(--sf-size-13); color: var(--sf-blue); text-decoration: underline; text-underline-offset: 3px; }
.sf-advice-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-grid-gap); }
.sf-advice-grid--with-ad { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-advice-ad-cell { min-width: 0; display: flex; align-items: center; justify-content: center; background: var(--sf-surface); padding: 18px 0; }
.sf-advice-ad-cell .sf-display-ad { align-self: auto; }
.sf-advice-ad-cell .sf-display-ad-label { padding-inline: 8px; font-size: var(--sf-size-10); }
.sf-more-discovery { border-top: 1px solid var(--sf-line); padding-top: max(40px, var(--sf-section)); margin-top: max(48px, var(--sf-section)); margin-bottom: max(72px, var(--sf-section)); display: grid; gap: clamp(32px, 5vw, 72px); }
.sf-more-discovery--with-ad { grid-template-columns: minmax(0, 1fr) 300px; }
.sf-more-discovery > div { min-width: 0; }
.sf-dynamik .sf-more-discovery h2 { max-width: 20ch; margin-bottom: 28px; }
.sf-category-page > .sf-display-ad { margin-bottom: 72px; }
.sf-more-stories { display: grid; gap: var(--sf-grid-gap); }
.sf-more-stories .sf-card-main { display: grid; grid-template-columns: minmax(130px, 32%) minmax(0, 1fr); gap: 24px; align-items: start; }
.sf-more-stories .sf-card-body { padding-top: 0; }
.sf-more-stories .sf-card-body h3 { font-size: calc(clamp(27px, 2.3vw, 34px) * var(--sf-display-scale)); }
.sf-more-stories .sf-card-body > p:last-child { font-size: var(--sf-size-13); }
.sf-more-stories .sf-card-bottom { padding-block: 4px; }
.sf-dynamik[data-density="dense"] .sf-advice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1100px) {
.sf-advice-grid, .sf-advice-grid--with-ad { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
.sf-more-discovery--with-ad { grid-template-columns: minmax(0, 1fr); }
.sf-more-discovery > .sf-display-ad { justify-self: center; }
}
@media (max-width: 640px) {
.sf-display-ad--ortovox, .sf-display-ad--birkenstock { width: 300px; }
.sf-advice-grid, .sf-advice-grid--with-ad, .sf-dynamik[data-density="dense"] .sf-advice-grid { grid-template-columns: minmax(0, 1fr); }
.sf-advice-ad-cell { padding-block: 24px; }
.sf-more-stories .sf-card-main, .sf-dynamik[data-density="dense"] .sf-more-stories .sf-card-main { grid-template-columns: 100px minmax(0, 1fr); gap: 16px; }
.sf-more-stories .sf-card-body > p:last-child { display: none; }
.sf-more-stories .sf-card-body h3 { font-size: calc(26px * var(--sf-display-scale)); overflow-wrap: anywhere; hyphens: auto; }
.sf-more-discovery { margin-bottom: 64px; }
}
/* context-ad.css */
.sf-context-ad { margin: 32px 0; }
.sf-context-ad > small { display: block; font: var(--sf-size-11)/1.5 var(--sf-body); color: var(--sf-muted); margin-bottom: 8px; }
.sf-context-ad > a { display: grid; grid-template-columns: 38% 1fr; background: var(--sf-tint-sand-200); color: var(--sf-tint-forest-900); overflow: hidden; min-height: 180px; }
.sf-context-ad-photo { width: 100%; height: 100%; min-height: 180px; object-fit: cover; }
.sf-context-ad-copy { padding: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.sf-context-ad-logo { width: 150px; height: 24px; object-fit: contain; object-position: left; }
.sf-context-ad-copy strong { font: 700 clamp(20px, 2.5vw, 32px)/1.12 Arial, sans-serif; }
.sf-context-ad-copy p { font: var(--sf-size-15)/1.5 var(--sf-body); margin: 0; }
.sf-context-ad-copy span { font: 700 var(--sf-size-13)/1.4 var(--sf-body); text-decoration: underline; text-underline-offset: 3px; }
.sf-context-ad--mobile { display: none; }
@media (max-width: 640px) {
.sf-context-ad--mobile { display: block; }
.sf-context-ad > a { width: min(320px, 100%); height: 100px; min-height: 100px; grid-template-columns: 30% 1fr; margin-inline: auto; }
.sf-context-ad-photo { min-height: 0; height: 100px; }
.sf-context-ad-copy { padding: 10px; gap: 5px; justify-content: center; }
.sf-context-ad-logo { width: 114px; height: 17px; }
.sf-context-ad-copy strong { font-size: var(--sf-size-15); }
.sf-context-ad-copy span { font-size: var(--sf-size-11); }
.sf-context-ad-copy p { display: none; }
.sf-library-native-desktop { display: none; }
}
.sf-context-ad > a.sf-article-end-ad { display: block; width: min(300px, 100%); background: transparent; min-height: 0; }
.sf-article-end-ad img { width: 100%; height: auto; display: block; }
/* slide-deck.css */
.sf-deck { --deck-bg: #070d18; --deck-fg: var(--sf-white); --deck-muted: rgba(255, 255, 255, 0.72); --deck-accent: #5ac8fa; --deck-crest: #8fdcff; --deck-crest-opacity: 0.28; --deck-dot: rgba(143, 220, 255, 0.55); --deck-dot-ring: #070d18; --deck-glow: rgba(90, 200, 250, 0.75); --deck-control-line: rgba(255, 255, 255, 0.28); --deck-back: #4a6690; --deck-back-opacity: 0.38; --deck-mid: #2b4266; --deck-mid-opacity: 0.7; --deck-front-top: #1a2a47; --deck-front-top-opacity: 1; --deck-front-bottom: #070d18; --deck-front-bottom-opacity: 0.2; width: 100%; max-width: var(--sf-content); margin-inline: auto; }
.sf-deck[data-theme="hell"] { --deck-bg: var(--sf-surface); --deck-fg: var(--sf-ink); --deck-muted: var(--sf-muted); --deck-accent: var(--sf-blue); --deck-crest: var(--sf-blue); --deck-crest-opacity: 0.3; --deck-dot: var(--sf-white); --deck-dot-ring: var(--sf-surface); --deck-glow: rgba(3, 117, 180, 0.35); --deck-control-line: var(--sf-line); --deck-back: var(--sf-line); --deck-back-opacity: 0.55; --deck-mid: color-mix(in srgb, var(--sf-line) 82%, var(--sf-ink)); --deck-mid-opacity: 0.6; --deck-front-top: var(--sf-white); --deck-front-top-opacity: 1; --deck-front-bottom: var(--sf-surface); --deck-front-bottom-opacity: 0.4; }
.sf-deck-title { margin: 0 0 16px; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); line-height: var(--sf-heading-leading); text-transform: var(--sf-heading-case); font-size: var(--sf-card-title); letter-spacing: -0.01em; color: var(--sf-ink); }
.sf-deck-screen { overflow: hidden; background: var(--deck-bg); color: var(--deck-fg); border-radius: 4px; }
.sf-deck-screen:focus-visible { outline: 2px solid var(--sf-blue); outline-offset: 3px; }
.sf-deck-stage { position: relative; aspect-ratio: 16 / 9; width: 100%; touch-action: pan-y; user-select: none; }
.sf-deck .sf-deck-stage img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; }
.sf-deck .sf-deck-stage img[hidden] { display: none; }
.sf-deck-unavailable { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; color: var(--deck-muted); font-size: var(--sf-size-15); text-align: center; }
.sf-deck-stage .sf-ai-mark { position: absolute; right: 12px; bottom: 12px; display: block; width: var(--sf-size-20); height: var(--sf-size-20); pointer-events: none; }
.sf-deck-stage .sf-ai-mark svg { width: 100%; height: 100%; filter: drop-shadow(var(--sf-mark-shadow)); }
.sf-deck-ridge { position: relative; height: 64px; }
.sf-deck-ridge svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sf-deck-stop--back-top { stop-color: var(--deck-back); stop-opacity: var(--deck-back-opacity); }
.sf-deck-stop--back-bottom { stop-color: var(--deck-back); stop-opacity: 0; }
.sf-deck-stop--mid-top { stop-color: var(--deck-mid); stop-opacity: var(--deck-mid-opacity); }
.sf-deck-stop--mid-bottom { stop-color: var(--deck-mid); stop-opacity: 0; }
.sf-deck-stop--front-top { stop-color: var(--deck-front-top); stop-opacity: var(--deck-front-top-opacity); }
.sf-deck-stop--front-bottom { stop-color: var(--deck-front-bottom); stop-opacity: var(--deck-front-bottom-opacity); }
.sf-deck-crest, .sf-deck-progress { fill: none; stroke-linejoin: round; stroke-linecap: round; }
.sf-deck-crest { stroke: var(--deck-crest); stroke-opacity: var(--deck-crest-opacity); stroke-width: 1.5; }
.sf-deck-progress { stroke: var(--deck-accent); stroke-width: 2.5; filter: drop-shadow(0 0 3px var(--deck-glow)); }
.sf-deck-dots { position: absolute; inset: 0; }
.sf-deck .sf-deck-dot { position: absolute; display: grid; place-items: center; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); cursor: pointer; }
.sf-deck-dot span { display: block; width: 9px; height: 9px; border-radius: 50%; background: var(--deck-dot); box-shadow: 0 0 0 2px var(--deck-dot-ring); }
.sf-deck[data-theme="hell"] .sf-deck-dot span { box-shadow: 0 0 0 1.5px var(--deck-accent), 0 0 0 3px var(--deck-dot-ring); }
.sf-deck-dot[data-state="passed"] span { background: var(--deck-accent); }
.sf-deck-dot[data-state="current"] span { width: 13px; height: 13px; background: var(--deck-accent); box-shadow: 0 0 0 2px var(--deck-dot-ring), 0 0 10px 2px var(--deck-glow); }
.sf-deck-dot:hover span { background: var(--deck-accent); }
.sf-deck-dot:focus-visible { outline: 2px solid var(--deck-accent); outline-offset: 0; border-radius: 50%; }
.sf-deck-controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 12px 12px; }
.sf-deck .sf-deck-arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--deck-control-line); border-radius: 50%; background: transparent; color: var(--deck-fg); font-size: var(--sf-size-20); line-height: 1; cursor: pointer; }
.sf-deck-arrow:hover:not(:disabled) { border-color: var(--deck-accent); color: var(--deck-accent); }
.sf-deck-arrow:disabled { opacity: 0.35; cursor: default; }
.sf-deck-arrow:focus-visible { outline: 2px solid var(--deck-accent); outline-offset: 2px; }
.sf-deck-count { margin: 0; font-family: var(--sf-display); font-size: var(--sf-size-18); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.sf-deck-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-deck-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; margin: 12px 0 0; font-size: var(--sf-size-14); color: var(--sf-muted); }
.sf-deck .sf-deck-pdf { color: var(--sf-blue-bright); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.sf-deck-text { margin-top: 12px; border-top: 1px solid var(--sf-line); }
.sf-deck-text summary { cursor: pointer; padding: 12px 0; font-weight: 700; }
.sf-deck-text ol { margin: 0; padding: 0 0 12px; list-style: none; }
.sf-deck-text li { padding: 10px 0; border-bottom: 1px solid var(--sf-line); }
.sf-deck-text li strong { font-size: var(--sf-size-13); }
.sf-deck-text li p { margin: 4px 0 0; }
.sf-deck-notes { color: var(--sf-muted); font-size: var(--sf-size-14); }
@media (max-width: 640px) {
.sf-deck-controls { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
.sf-deck * { transition: none !important; animation: none !important; }
}
/* apps.css */
.sf-dynamik .sf-app-frame.sf-app-frame--protein { padding: 0; border: 0; background: transparent; }
.sf-dynamik .sf-protein { color: var(--sf-ink); font-family: var(--sf-body); }
.sf-dynamik .sf-protein [hidden] { display: none !important; }
.sf-dynamik .sf-protein-header { max-width: 760px; margin-bottom: 30px; }
.sf-dynamik .sf-protein-header > .sf-eyebrow, .sf-dynamik .sf-protein-day .sf-eyebrow { color: var(--sf-section-accent); margin-bottom: 8px; }
.sf-dynamik .sf-protein-header h2 { font: 800 calc(clamp(36px, 4.5vw, 62px) * var(--sf-display-scale))/1.02 var(--sf-display-condensed); margin: 0 0 14px; }
.sf-dynamik .sf-protein-header > p:last-child { font-size: var(--sf-size-18); line-height: 1.5; max-width: 650px; }
.sf-dynamik .sf-protein-calculator { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 4px solid var(--sf-section-accent); }
.sf-dynamik .sf-protein-inputs { padding: clamp(20px, 3vw, 36px); background: var(--sf-section-tint); }
.sf-dynamik .sf-protein-inputs h3 { font: 800 calc(28px * var(--sf-display-scale))/1.1 var(--sf-display-condensed); margin: 0 0 6px; }
.sf-dynamik .sf-protein-scope { font-size: var(--sf-size-13); line-height: 1.45; color: var(--sf-muted); margin-bottom: 22px; }
.sf-dynamik .sf-protein-measures { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 22px; }
.sf-dynamik .sf-protein-measures label, .sf-dynamik .sf-protein .sf-protein-choice-label { font-size: var(--sf-size-14); font-weight: 750; display: block; margin-bottom: 9px; }
.sf-dynamik .sf-protein-weight > div { display: flex; align-items: baseline; gap: 8px; border-bottom: 2px solid var(--sf-section-accent); }
.sf-dynamik .sf-protein-weight input { width: 100%; min-width: 0; min-height: 54px; background: transparent; border: 0; padding: 0 2px; border-radius: 0; color: var(--sf-ink); font: 800 calc(48px * var(--sf-display-scale))/1 var(--sf-display-condensed); }
.sf-dynamik .sf-protein-weight > div > span { font-size: var(--sf-size-17); }
.sf-dynamik .sf-protein-age select { width: 100%; min-height: 56px; border: 0; border-bottom: 1px solid var(--sf-neutral-400); border-radius: 0; background: transparent; padding: 6px 2px; color: var(--sf-ink); font: inherit; font-size: var(--sf-size-16); }
.sf-dynamik .sf-protein .sf-protein-choice-group { min-width: 0; padding: 0; border: 0; margin: 0; }
.sf-dynamik .sf-protein-choice { display: flex; align-items: center; gap: 11px; min-height: 52px; cursor: pointer; padding: 10px 12px; border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-dynamik .sf-protein-choice:has(input:checked) { border-color: var(--sf-section-accent); box-shadow: inset 3px 0 0 var(--sf-section-accent); }
.sf-dynamik .sf-protein-choice input { flex: none; width: 16px; height: 16px; margin: 0; accent-color: var(--sf-section-accent); }
.sf-dynamik .sf-protein-choice strong { display: block; font-size: var(--sf-size-15); line-height: 1.2; font-weight: 700; }
.sf-dynamik .sf-protein-choice small { display: block; margin-top: 3px; font-size: var(--sf-size-12); line-height: 1.35; color: var(--sf-muted); }
.sf-dynamik .sf-protein-training > label + label { margin-top: 8px; }
.sf-dynamik .sf-protein-submit { background: var(--sf-section-accent); color: var(--sf-white); width: 100%; margin-top: 18px; min-height: 48px; justify-content: space-between; }
.sf-dynamik .sf-protein-result { background: var(--sf-section-accent); color: var(--sf-white); padding: clamp(24px, 3.5vw, 42px); display: flex; flex-direction: column; scroll-margin-top: 100px; }
.sf-dynamik .sf-protein-result > .sf-eyebrow { color: inherit; opacity: 0.85; }
.sf-dynamik .sf-protein-result-number { margin: 16px 0 22px; font: 800 calc(clamp(64px, 7.2vw, 108px) * var(--sf-display-scale))/0.95 var(--sf-display-condensed); font-variant-numeric: tabular-nums; letter-spacing: -0.025em; }
.sf-dynamik .sf-protein-result-number small { display: block; font: 400 var(--sf-size-16)/1.4 var(--sf-body); letter-spacing: 0; margin-top: 10px; }
.sf-dynamik .sf-protein-result-note { font-size: var(--sf-size-15); line-height: 1.5; margin-bottom: 18px; max-width: 440px; }
.sf-dynamik .sf-protein-status { font-size: var(--sf-size-12); line-height: 1.4; opacity: 0.8; margin-top: auto; padding-top: 12px; }
.sf-dynamik .sf-protein-method { margin-top: 14px; padding-top: 12px; border-top: 1px solid currentColor; }
.sf-dynamik .sf-protein-method summary { cursor: pointer; min-height: 32px; font-size: var(--sf-size-14); font-weight: 700; }
.sf-dynamik .sf-protein-method p { margin-top: 10px; font-size: var(--sf-size-13); line-height: 1.5; }
.sf-dynamik .sf-protein[data-sf-protein-stale] .sf-protein-result-number { opacity: 0.55; }
.sf-dynamik .sf-protein-error { font-size: var(--sf-size-13); color: var(--sf-ink); margin-top: 8px; font-weight: 700; }
.sf-dynamik .sf-protein-day { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--sf-ink); }
.sf-dynamik .sf-protein-day-header { display: flex; justify-content: space-between; align-items: end; gap: 28px; margin-bottom: 25px; }
.sf-dynamik .sf-protein-day-header h2 { margin: 0 0 10px; font: 800 calc(clamp(32px, 3.5vw, 44px) * var(--sf-display-scale))/1.05 var(--sf-display-condensed); }
.sf-dynamik .sf-protein-day-header p:last-child { font-size: var(--sf-size-16); line-height: 1.5; max-width: 560px; }
.sf-dynamik .sf-protein-day-total { text-align: right; flex: none; border-left: 2px solid var(--sf-section-accent); padding-left: 24px; }
.sf-dynamik .sf-protein-day-total > span { display: block; font-size: var(--sf-size-12); line-height: 1.4; }
.sf-dynamik .sf-protein-day-total > strong { display: block; color: var(--sf-section-accent); font: 800 calc(36px * var(--sf-display-scale))/1.25 var(--sf-display-condensed); }
.sf-dynamik .sf-protein-day-total b { font-weight: inherit; }
.sf-dynamik .sf-protein-preferences { display: flex; justify-content: space-between; gap: 22px; margin-bottom: 28px; flex-wrap: wrap; }
.sf-dynamik .sf-protein-segments { display: flex; gap: 6px; flex-wrap: wrap; }
.sf-dynamik .sf-protein-segments .sf-protein-choice { padding: 11px 13px; min-height: 44px; gap: 7px; background: transparent; }
.sf-dynamik .sf-protein-segments .sf-protein-choice strong { font-size: var(--sf-size-14); }
.sf-dynamik .sf-protein-meals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; align-items: start; }
.sf-dynamik .sf-protein-meal { min-width: 0; border-top: 2px solid var(--sf-ink); }
.sf-dynamik .sf-protein-meal-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 12px 0 0; }
.sf-dynamik .sf-protein-meal-order { font: 800 calc(32px * var(--sf-display-scale))/1 var(--sf-display-condensed); color: var(--sf-section-accent); }
.sf-dynamik .sf-protein-meal-heading h3 { margin: 0; font-size: var(--sf-size-14); font-family: var(--sf-body); font-weight: 750; }
.sf-dynamik .sf-protein-food { display: block; width: 100%; height: auto; margin: 7px 0 8px; }
.sf-dynamik .sf-protein-shadow { fill: var(--sf-tint-sand-200); opacity: 0.6; }
.sf-dynamik .sf-protein-plate { fill: var(--sf-tint-sand-20); stroke: var(--sf-tint-sand-200); stroke-width: 2px; }
.sf-dynamik .sf-protein-rim { stroke: var(--sf-tint-sand-200); stroke-width: 1px; }
.sf-dynamik .sf-protein-art-bowl, .sf-dynamik .sf-protein-art-bread, .sf-dynamik .sf-protein-art-savoury, .sf-dynamik .sf-protein-art-egg, .sf-dynamik .sf-protein-art-lentils, .sf-dynamik .sf-protein-art-cubes { display: none; }
.sf-dynamik [data-sf-protein-art="bowl"] .sf-protein-art-bowl, .sf-dynamik [data-sf-protein-art="bread"] .sf-protein-art-bread, .sf-dynamik [data-sf-protein-art="rice"] .sf-protein-art-savoury, .sf-dynamik [data-sf-protein-art="tofu"] .sf-protein-art-savoury, .sf-dynamik [data-sf-protein-art="lentils"] .sf-protein-art-savoury, .sf-dynamik [data-sf-protein-art="egg"] .sf-protein-art-savoury, .sf-dynamik [data-sf-protein-art="egg"] .sf-protein-art-egg, .sf-dynamik [data-sf-protein-art="lentils"] .sf-protein-art-lentils, .sf-dynamik [data-sf-protein-art="tofu"] .sf-protein-art-cubes, .sf-dynamik [data-sf-protein-art="rice"] .sf-protein-art-cubes { display: inline; }
.sf-dynamik .sf-protein-meal-caption { min-height: 90px; }
.sf-dynamik .sf-protein-meal-caption h4 { font: 800 calc(25px * var(--sf-display-scale))/1.12 var(--sf-display-condensed); margin: 0 0 8px; }
.sf-dynamik .sf-protein-meal-caption p { font-size: var(--sf-size-13); margin: 0; color: var(--sf-section-accent); }
.sf-dynamik .sf-protein-meal-caption strong { font-weight: 750; }
.sf-dynamik .sf-protein-meal-copy > ul { list-style: none; padding: 0; margin: 10px 0; min-height: 110px; }
.sf-dynamik .sf-protein-meal-copy li { display: grid; grid-template-columns: 48px 1fr; gap: 5px; margin-bottom: 7px; font-size: var(--sf-size-13); line-height: 1.4; }
.sf-dynamik .sf-protein-meal-copy li > span:first-child { font-weight: 700; white-space: nowrap; }
.sf-dynamik .sf-protein-meal-copy > button { min-height: 44px; padding: 7px 0; border: 0; border-bottom: 1px solid var(--sf-line); background: transparent; color: var(--sf-section-accent); font: 700 var(--sf-size-14)/1.3 var(--sf-body); cursor: pointer; text-align: left; width: 100%; }
.sf-dynamik .sf-protein-day-limits, .sf-dynamik .sf-protein-day-note, .sf-dynamik .sf-protein-limits { font-size: var(--sf-size-14); line-height: 1.55; margin-top: 18px; max-width: 900px; }
.sf-dynamik .sf-protein-day-limits:empty { display: none; }
.sf-dynamik .sf-protein-caption, .sf-dynamik .sf-protein-privacy { font-size: var(--sf-size-12); line-height: 1.5; color: var(--sf-muted); margin-top: 14px; }
.sf-dynamik .sf-protein-sources { border-top: 1px solid var(--sf-line); border-bottom: 1px solid var(--sf-line); padding: 18px 0; margin-top: 32px; }
.sf-dynamik .sf-protein-sources summary { cursor: pointer; font-size: var(--sf-size-16); font-weight: 750; min-height: 30px; }
.sf-dynamik .sf-protein-sources p { font-size: var(--sf-size-14); line-height: 1.6; margin: 15px 0; max-width: 900px; }
.sf-dynamik .sf-protein-sources ul { list-style: none; padding: 0; margin: 0; }
.sf-dynamik .sf-protein-sources li { margin-top: 8px; font-size: var(--sf-size-14); }
.sf-dynamik .sf-protein-sources a { color: var(--sf-section-accent); text-decoration: underline; }
.sf-dynamik .sf-protein :is(input, select, button, summary, a):focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sf-dynamik .sf-app-detail--protein .sf-app-more { border-top: 1px solid var(--sf-line); padding-top: 28px; }
.sf-dynamik .sf-app-detail--protein .sf-app-more li { padding: 14px 0; border-bottom: 1px solid var(--sf-line); font-weight: 700; }
@media (max-width: 950px) {
.sf-dynamik .sf-protein-meals { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.sf-dynamik .sf-protein-meal-caption { min-height: 70px; }
.sf-dynamik .sf-protein-food { max-width: 280px; margin-inline: auto; }
}
@media (max-width: 620px) {
.sf-dynamik .sf-protein-header { margin-bottom: 22px; }
.sf-dynamik .sf-protein-header h2 { font-size: calc(38px * var(--sf-display-scale)); }
.sf-dynamik .sf-protein-header > p:last-child { font-size: var(--sf-size-16); }
.sf-dynamik .sf-protein-calculator { grid-template-columns: 1fr; }
.sf-dynamik .sf-protein-result { padding: 24px; }
.sf-dynamik .sf-protein-result-number { margin: 12px 0 18px; font-size: calc(76px * var(--sf-display-scale)); }
.sf-dynamik .sf-protein-day { margin-top: 36px; }
.sf-dynamik .sf-protein-day-header { display: block; }
.sf-dynamik .sf-protein-day-total { text-align: left; padding-left: 16px; margin-top: 20px; }
.sf-dynamik .sf-protein-day-total > span { display: inline; }
.sf-dynamik .sf-protein-day-total > strong { display: inline; margin-inline: 6px; font-size: var(--sf-app-schrift-32px); }
.sf-dynamik .sf-protein-preferences { display: grid; }
.sf-dynamik .sf-protein-segments .sf-protein-choice { padding: 11px 9px; }
.sf-dynamik .sf-protein-segments .sf-protein-choice strong { font-size: var(--sf-size-13); }
.sf-dynamik .sf-protein-meals { grid-template-columns: 1fr; gap: 20px; }
.sf-dynamik .sf-protein-meal { display: grid; grid-template-columns: 105px minmax(0, 1fr); gap: 10px 14px; }
.sf-dynamik .sf-protein-meal-heading { grid-column: 1 / -1; padding-top: 12px; }
.sf-dynamik .sf-protein-food { margin: 10px 0; }
.sf-dynamik .sf-protein-meal-copy { grid-column: 2; }
.sf-dynamik .sf-protein-meal-caption { min-height: 0; }
.sf-dynamik .sf-protein-meal-copy > ul { min-height: 0; }
.sf-dynamik .sf-protein-meal-caption h4 { font-size: var(--sf-app-schrift-24px); }
}
.sf-dynamik .sf-area-apps .sf-section-heading > div { display: grid; gap: 10px; }
.sf-dynamik .sf-area-apps .sf-section-heading p { color: var(--sf-text); font-size: var(--sf-size-15); }
.sf-dynamik .sf-app-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--sf-grid-gap); }
.sf-dynamik .sf-app-tile { position: relative; min-width: 0; display: flex; flex-direction: column; background: var(--sf-section-tint, var(--sf-surface)); border-top: 4px solid var(--sf-section-accent, var(--sf-blue)); transition: transform var(--sf-motion); }
.sf-dynamik .sf-app-tile:hover { transform: translateY(-2px); }
.sf-dynamik .sf-app-tile > img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sf-dynamik .sf-app-tile-body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 22px 22px 20px; }
.sf-dynamik .sf-app-tile .sf-eyebrow { color: var(--sf-section-accent, var(--sf-blue)); }
.sf-dynamik .sf-app-tile h3 { font-size: calc(clamp(24px, 2vw, 30px) * var(--sf-display-scale)); line-height: 1.05; }
.sf-dynamik .sf-app-tile h3 a { color: var(--sf-ink); text-decoration: none; }
.sf-dynamik .sf-app-tile h3 a::after { content: ""; position: absolute; inset: 0; }
.sf-dynamik .sf-app-tile-body > p:not(.sf-eyebrow) { color: var(--sf-text); font-size: var(--sf-size-15); line-height: 1.45; }
.sf-dynamik .sf-app-tile-cta { margin-top: auto; padding-top: 6px; color: var(--sf-section-accent, var(--sf-blue)); font-size: var(--sf-size-14); font-weight: 750; }
.sf-dynamik .sf-app-tile-cta::after { content: " →"; }
.sf-dynamik .sf-app-tile:hover .sf-app-tile-cta { text-decoration: underline; }
.sf-dynamik .sf-app-detail { display: grid; gap: 40px; }
.sf-dynamik .sf-app-frame { padding: clamp(18px, 3vw, 36px); background: var(--sf-section-tint, var(--sf-surface)); border-top: 4px solid var(--sf-section-accent, var(--sf-blue)); font-family: var(--sf-body); color: var(--sf-ink); scroll-margin-top: 90px; }
.sf-dynamik .sf-app-frame--loading { display: grid; place-items: center; min-height: 280px; color: var(--sf-muted); font-size: var(--sf-size-15); }
.sf-dynamik .sf-app-runner { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.sf-dynamik .sf-app-form { display: grid; gap: 20px; padding: clamp(18px, 2.4vw, 28px); background: var(--sf-white); border: 1px solid var(--sf-line); }
.sf-dynamik .sf-app-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px 20px; }
.sf-dynamik .sf-app-field { display: grid; gap: 6px; align-content: start; }
.sf-dynamik .sf-app-field label, .sf-dynamik .sf-weather-search label { color: var(--sf-ink); font-size: var(--sf-size-14); font-weight: 750; }
.sf-dynamik .sf-app-field select, .sf-dynamik .sf-app-number input, .sf-dynamik .sf-weather-input input { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--sf-neutral-400); border-radius: var(--sf-radius); background: var(--sf-white); color: var(--sf-ink); font: inherit; font-size: var(--sf-size-16); }
.sf-dynamik .sf-app-number { display: flex; align-items: center; gap: 10px; }
.sf-dynamik .sf-app-number span { flex: none; color: var(--sf-muted); font-size: var(--sf-size-14); }
.sf-dynamik .sf-app-field :is(select, input):focus-visible, .sf-dynamik .sf-weather-input input:focus-visible, .sf-dynamik .sf-app-frame button:focus-visible, .sf-dynamik .sf-app-embed button:focus-visible, .sf-dynamik .sf-app-frame a:focus-visible, .sf-dynamik .sf-app-faq summary:focus-visible { outline: 3px solid var(--sf-section-accent, var(--sf-blue)); outline-offset: 2px; }
.sf-dynamik .sf-app-field[data-invalid] :is(input, select) { border-color: var(--sf-error); box-shadow: inset 0 0 0 1px var(--sf-error); }
.sf-dynamik .sf-app-hint { color: var(--sf-muted); font-size: var(--sf-size-13); line-height: 1.4; }
.sf-dynamik .sf-app-error { color: var(--sf-error); font-size: var(--sf-size-14); font-weight: 700; }
.sf-dynamik .sf-app-submit, .sf-dynamik .sf-weather-switch button[aria-pressed="true"] { background: var(--sf-section-accent, var(--sf-blue)); color: var(--sf-white); }
.sf-dynamik .sf-app-submit { justify-self: start; min-height: 50px; padding: 12px 28px; border: 0; font: inherit; font-size: var(--sf-size-16); font-weight: 800; text-transform: var(--sf-label-case); letter-spacing: 0.04em; cursor: pointer; }
.sf-dynamik .sf-app-submit:hover { filter: brightness(0.92); }
.sf-dynamik .sf-app-result { scroll-margin: 96px 0 16px; display: grid; gap: 14px; padding: clamp(18px, 2.4vw, 28px); background: var(--sf-section-accent, var(--sf-blue)); color: var(--sf-white); }
.sf-dynamik .sf-app-result .sf-eyebrow { color: var(--sf-white); opacity: 0.85; }
.sf-dynamik .sf-app-headline { font-family: var(--sf-display); font-size: calc(clamp(32px, 3.4vw, 48px) * var(--sf-display-scale)); font-weight: var(--sf-heading-weight); line-height: 1.02; overflow-wrap: anywhere; }
.sf-dynamik .sf-app-result dl { display: grid; gap: 0; font-size: var(--sf-size-15); }
.sf-dynamik .sf-app-result dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; border-top: 1px solid var(--sf-overlay-white-50); }
.sf-dynamik .sf-app-result dd { font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; }
.sf-dynamik .sf-app-checklist { display: grid; gap: 0; padding: 0; list-style: none; font-size: var(--sf-size-16); }
.sf-dynamik .sf-app-checklist li + li { border-top: 1px solid var(--sf-overlay-white-50); }
.sf-dynamik .sf-app-checklist label { display: flex; align-items: center; gap: 12px; min-height: 44px; padding-block: 6px; cursor: pointer; }
.sf-dynamik .sf-app-checklist input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--sf-white); }
.sf-dynamik .sf-app-checklist input:checked + span { text-decoration: line-through; opacity: 0.75; }
.sf-dynamik .sf-app-result-note, .sf-dynamik .sf-app-result-empty { font-size: var(--sf-size-14); line-height: 1.45; }
.sf-dynamik .sf-app-notice { display: grid; gap: 8px; padding: 16px 20px; background: var(--sf-white); border-left: 4px solid var(--sf-neutral-400); color: var(--sf-text); font-size: var(--sf-size-15); line-height: 1.5; }
.sf-dynamik .sf-app-notice h2 { font-size: var(--sf-size-17); font-family: var(--sf-body); text-transform: none; color: var(--sf-ink); }
.sf-dynamik .sf-app-runner-notice { grid-column: 1 / -1; }
.sf-dynamik .sf-app-source { margin-top: 18px; color: var(--sf-muted); font-size: var(--sf-size-13); }
.sf-dynamik .sf-app-source a { color: inherit; }
.sf-dynamik .sf-app-editorial { display: grid; gap: 36px; max-width: var(--sf-reading); }
.sf-dynamik .sf-app-text { display: grid; gap: 14px; color: var(--sf-text); font-size: var(--sf-size-17); line-height: 1.6; }
.sf-dynamik .sf-app-text h2, .sf-dynamik .sf-app-more h2 { color: var(--sf-ink); font-size: var(--sf-card-title); line-height: 1.05; }
.sf-dynamik .sf-app-faq details { border-top: 1px solid var(--sf-line); padding: 6px 0; }
.sf-dynamik .sf-app-faq details:last-child { border-bottom: 1px solid var(--sf-line); }
.sf-dynamik .sf-app-faq summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; gap: 16px; cursor: pointer; list-style: none; }
.sf-dynamik .sf-app-faq summary::-webkit-details-marker { display: none; }
.sf-dynamik .sf-app-faq summary::after { content: "+"; color: var(--sf-section-accent, var(--sf-blue)); font-size: var(--sf-size-20); font-weight: 800; }
.sf-dynamik .sf-app-faq details[open] summary::after { content: "–"; }
.sf-dynamik .sf-app-faq summary h3 { color: var(--sf-ink); font-family: var(--sf-body); font-size: var(--sf-size-17); font-weight: 750; text-transform: none; letter-spacing: 0; }
.sf-dynamik .sf-app-faq details p { margin: 4px 0 10px; }
.sf-dynamik .sf-app-more { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; padding-top: 8px; }
.sf-dynamik .sf-app-more section { display: grid; gap: 14px; align-content: start; }
.sf-dynamik .sf-app-more ul { display: grid; gap: 10px; padding: 0; list-style: none; }
.sf-dynamik .sf-app-more li a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sf-ink); font-size: var(--sf-size-17); font-weight: 700; text-decoration-color: var(--sf-section-accent, var(--sf-blue)); text-underline-offset: 4px; }
.sf-dynamik .sf-app-more .sf-action { justify-self: start; background: var(--sf-section-accent, var(--sf-blue)); }
.sf-dynamik .sf-weather { display: grid; gap: 22px; }
.sf-dynamik .sf-app-detail > *, .sf-dynamik .sf-weather > *, .sf-dynamik .sf-weather-report > * { min-width: 0; }
.sf-dynamik .sf-weather-search { display: grid; gap: 8px; padding: clamp(18px, 2.4vw, 28px); background: var(--sf-white); border: 1px solid var(--sf-line); }
.sf-dynamik .sf-weather-input { position: relative; }
.sf-dynamik .sf-weather-input input { padding-left: 42px; }
.sf-dynamik .sf-weather-input-icon, .sf-dynamik .sf-weather-input .sf-weather-spin { position: absolute; top: 50%; width: 18px; height: 18px; color: var(--sf-muted); transform: translateY(-50%); }
.sf-dynamik .sf-weather-input-icon { left: 14px; }
.sf-dynamik .sf-weather-input .sf-weather-spin { right: 14px; }
.sf-dynamik .sf-weather-spin { width: 18px; height: 18px; animation: sf-weather-spin 1s linear infinite; }
@keyframes sf-weather-spin { to { rotate: 360deg; } }
.sf-dynamik .sf-weather-matches { display: grid; padding: 0; list-style: none; border: 1px solid var(--sf-line); }
.sf-dynamik .sf-weather-matches button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px; border: 0; border-top: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-ink); font: inherit; font-size: var(--sf-size-15); text-align: left; cursor: pointer; }
.sf-dynamik .sf-weather-matches li:first-child button { border-top: 0; }
.sf-dynamik .sf-weather-matches button:hover { background: var(--sf-section-tint, var(--sf-surface)); }
.sf-dynamik .sf-weather-matches svg { width: 16px; height: 16px; flex: none; color: var(--sf-section-accent, var(--sf-blue)); }
.sf-dynamik .sf-weather-matches span { flex: 1; min-width: 0; }
.sf-dynamik .sf-weather-matches small, .sf-dynamik .sf-weather-popular small { color: var(--sf-muted); font-size: var(--sf-size-13); }
.sf-dynamik .sf-weather-popular-title { margin-top: 12px; color: var(--sf-ink); font-size: var(--sf-size-14); font-weight: 750; }
.sf-dynamik .sf-weather-popular { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 8px; padding: 0; list-style: none; }
.sf-dynamik .sf-weather-popular button { display: grid; gap: 2px; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-ink); font: inherit; font-size: var(--sf-size-15); font-weight: 700; text-align: left; overflow-wrap: break-word; hyphens: auto; cursor: pointer; }
.sf-dynamik .sf-weather-popular button:hover, .sf-dynamik .sf-weather-popular button[aria-pressed="true"] { border-color: var(--sf-section-accent, var(--sf-blue)); box-shadow: inset 0 0 0 1px var(--sf-section-accent, var(--sf-blue)); }
.sf-dynamik .sf-weather-loading { display: flex; align-items: center; gap: 10px; color: var(--sf-muted); }
.sf-dynamik .sf-weather-report { display: grid; gap: 20px; }
.sf-dynamik .sf-weather-now-main { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 16px; }
.sf-dynamik .sf-weather-now-main .sf-weather-icon { grid-row: span 2; width: 56px; height: 56px; }
.sf-dynamik .sf-weather-now dl { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); column-gap: 20px; }
.sf-dynamik .sf-weather-verdict { display: grid; gap: 10px; padding: 18px 20px; background: var(--sf-white); border-left: 6px solid var(--sf-section-accent, var(--sf-blue)); }
.sf-dynamik .sf-weather-verdict[data-verdict="caution"], .sf-dynamik .sf-weather-verdict[data-verdict="warning"] { border-left-color: var(--sf-caution); background: var(--sf-caution-tint); }
.sf-dynamik .sf-weather-verdict[data-verdict="warning"] { border-left-color: var(--sf-error); background: var(--sf-error-tint); }
.sf-dynamik .sf-weather-verdict .sf-eyebrow { color: var(--sf-muted); }
.sf-dynamik .sf-weather-verdict h3 { display: flex; align-items: center; gap: 8px; color: var(--sf-ink); font-size: var(--sf-card-title); line-height: 1.05; }
.sf-dynamik .sf-weather-verdict h3 svg { width: 24px; height: 24px; flex: none; }
.sf-dynamik .sf-weather-verdict ul { display: grid; gap: 4px; padding-left: 18px; color: var(--sf-text); font-size: var(--sf-size-15); }
.sf-dynamik .sf-weather-switch { display: inline-flex; justify-self: start; border: 1px solid var(--sf-section-accent, var(--sf-blue)); }
.sf-dynamik .sf-weather-switch button { min-height: 44px; padding: 8px 22px; border: 0; background: var(--sf-white); color: var(--sf-ink); font: inherit; font-size: var(--sf-size-15); font-weight: 750; cursor: pointer; }
.sf-dynamik .sf-weather-subtitle { margin-bottom: 10px; color: var(--sf-ink); font-size: var(--sf-size-20); }
.sf-dynamik .sf-weather-days { display: grid; padding: 0; list-style: none; background: var(--sf-white); border: 1px solid var(--sf-line); }
.sf-dynamik .sf-weather-days li { display: grid; grid-template-columns: 7.5em 32px 6em 1fr 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--sf-line); font-size: var(--sf-size-14); color: var(--sf-text); }
.sf-dynamik .sf-weather-days li:first-child { border-top: 0; }
.sf-dynamik .sf-weather-day { color: var(--sf-ink); font-weight: 750; }
.sf-dynamik .sf-weather-temp { color: var(--sf-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.sf-dynamik .sf-weather-icon { width: 28px; height: 28px; color: var(--sf-section-accent, var(--sf-blue)); }
.sf-dynamik .sf-weather-badge { padding: 3px 8px; border-left: 3px solid var(--sf-section-accent, var(--sf-blue)); background: var(--sf-section-tint, var(--sf-surface)); color: var(--sf-ink); font-size: var(--sf-size-13); font-weight: 700; }
.sf-dynamik .sf-weather-days li[data-verdict="caution"] .sf-weather-badge { border-left-color: var(--sf-caution); background: var(--sf-caution-tint); }
.sf-dynamik .sf-weather-days li[data-verdict="warning"] .sf-weather-badge { border-left-color: var(--sf-error); background: var(--sf-error-tint); }
.sf-dynamik .sf-weather-hours { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: 8px; padding: 0 0 8px; overflow-x: auto; list-style: none; scroll-snap-type: x proximity; }
.sf-dynamik .sf-weather-hours li { display: grid; justify-items: center; gap: 4px; padding: 12px 8px; background: var(--sf-white); border: 1px solid var(--sf-line); color: var(--sf-text); font-size: var(--sf-size-13); scroll-snap-align: start; }
.sf-dynamik .sf-app-back { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; font-size: var(--sf-size-14); font-weight: 700; }
.sf-dynamik .sf-app-back a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sf-section-accent, var(--sf-blue)); }
.sf-dynamik .sf-app-frame { container-type: inline-size; }
@container (max-width: 720px) {
.sf-dynamik .sf-app-runner { grid-template-columns: 1fr; }
.sf-dynamik .sf-app-form { padding: 0; background: none; border: 0; }
}
.sf-dynamik .sf-delivery-title--app { padding-bottom: 8px; }
.sf-dynamik .sf-section.sf-app-detail { margin-top: 8px; }
.sf-dynamik .sf-app-intro { max-width: var(--sf-reading); color: var(--sf-text); font-size: var(--sf-size-17); line-height: 1.6; }
@media (max-width: 640px) {
.sf-dynamik .sf-app-frame { padding: 16px; }
.sf-dynamik .sf-app-detail { gap: 28px; }
.sf-dynamik .sf-app-submit { justify-self: stretch; }
.sf-dynamik .sf-weather-days li { grid-template-columns: 1fr auto auto; row-gap: 4px; }
.sf-dynamik .sf-weather-days li > span:nth-of-type(3), .sf-dynamik .sf-weather-days li > span:nth-of-type(4) { grid-column: span 1; }
.sf-dynamik .sf-weather-badge { grid-column: 1 / -1; justify-self: start; }
.sf-dynamik .sf-app-grid { grid-template-columns: 1fr; }
.sf-dynamik .sf-app-tile-body { padding: 18px; }
}
.sf-dynamik .sf-app-embed { display: grid; gap: 16px; margin: 28px 0; padding: clamp(16px, 2.4vw, 24px); background: var(--sf-section-tint, var(--sf-surface)); border-top: 4px solid var(--sf-section-accent, var(--sf-blue)); }
.sf-dynamik .sf-app-embed-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 12px 20px; }
.sf-dynamik .sf-app-embed-head > div { display: grid; gap: 6px; flex: 1 1 260px; }
.sf-dynamik .sf-app-embed-head .sf-eyebrow { color: var(--sf-section-accent, var(--sf-blue)); }
.sf-dynamik .sf-app-embed-head h3 { color: var(--sf-ink); font-size: var(--sf-card-title); line-height: 1.05; }
.sf-dynamik .sf-app-embed-head p { color: var(--sf-text); font-size: var(--sf-size-15); }
.sf-dynamik .sf-app-embed-head button { min-height: 46px; padding: 10px 20px; border: 0; background: var(--sf-section-accent, var(--sf-blue)); color: var(--sf-white); font: inherit; font-size: var(--sf-size-15); font-weight: 800; cursor: pointer; }
.sf-dynamik .sf-app-embed .sf-app-frame { padding: 0; border-top: 0; }
.sf-dynamik .sf-app-embed-link { justify-self: start; color: var(--sf-section-accent, var(--sf-blue)); font-size: var(--sf-size-14); font-weight: 750; }
.sf-dynamik .sf-delivery-title--protein { padding-top: 12px; padding-bottom: 8px; }
.sf-dynamik .sf-delivery-title--protein h1 { font: 750 var(--sf-size-16)/1.3 var(--sf-body); color: var(--sf-section-accent); text-transform: none; margin: 0; }
.sf-dynamik .sf-app-detail--protein .sf-protein-header > .sf-eyebrow { display: none; }
/* landing.css */
.sf-lp { container: sf-lp / inline-size; }
.sf-dynamik .sf-hero-zoom, .sf-showcase .sf-hero-zoom { transform-origin: 65% 50%; animation: sf-hero-zoom 26s ease-in-out infinite alternate; }
@keyframes sf-hero-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
.sf-dynamik .sf-hero-copy-in > *, .sf-showcase .sf-hero-copy-in > * { animation: sf-hero-copy-in 0.8s ease-out both; }
.sf-dynamik .sf-hero-copy-in > *:nth-child(2), .sf-showcase .sf-hero-copy-in > *:nth-child(2) { animation-delay: 0.08s; }
.sf-dynamik .sf-hero-copy-in > *:nth-child(3), .sf-showcase .sf-hero-copy-in > *:nth-child(3) { animation-delay: 0.16s; }
.sf-dynamik .sf-hero-copy-in > *:nth-child(n + 4), .sf-showcase .sf-hero-copy-in > *:nth-child(n + 4) { animation-delay: 0.26s; }
@keyframes sf-hero-copy-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
.sf-dynamik .sf-hero-zoom, .sf-showcase .sf-hero-zoom, .sf-dynamik .sf-hero-copy-in > *, .sf-showcase .sf-hero-copy-in > * { animation: none; }
}
/* brand-showcase.css */
.sf-bs.sf-bs-page, .sf-bs.sf-bs-salepage, .sf-bs.sf-bs-sticky { font-family: var(--sf-body); line-height: 1.55; color: var(--sf-ink); --sf-heading-case: none; }
.sf-ai-mark:where(.sf-showcase *) { position: absolute; right: 10px; bottom: 10px; z-index: 2; display: block; width: 22px; height: 22px; pointer-events: none; }
.sf-ai-mark:where(.sf-showcase *) svg { width: 100%; height: 100%; filter: drop-shadow(var(--sf-mark-shadow)); }
.sf-bs.sf-bs-page { min-height: 100vh; background-color: var(--sf-bs-page-bg, var(--sf-page)); background-image: var(--sf-bs-page-image, none); background-size: var(--sf-bs-page-size, auto); background-position: center top; background-attachment: var(--sf-bs-page-attach, scroll); padding-bottom: 4rem; }
.sf-bs.sf-bs-salepage { min-height: 100vh; background-color: var(--sf-page); padding-bottom: 5rem; }
.sf-bs.sf-bs-empty { margin-inline: auto; max-width: 64rem; padding: 2rem; }
.sf-bs .sf-bs-hero { position: relative; overflow: hidden; background-color: var(--sf-bs-ink); }
.sf-bs .sf-bs-hero-media { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.sf-bs .sf-bs-hero-overlay { position: absolute; inset: 0; background: var(--sf-bs-overlay); }
.sf-bs .sf-bs-hero-logo { position: absolute; top: 1rem; left: 1rem; z-index: 10; height: 4rem; width: auto; max-width: 70%; object-fit: contain; object-position: left top; opacity: 0.95; filter: var(--sf-bs-drop-shadow); }
.sf-bs .sf-bs-hero-copy { position: relative; margin-inline: auto; display: flex; max-width: 64rem; flex-direction: column; align-items: center; padding-inline: 1rem; text-align: center; }
.sf-bs .sf-bs-hero-copy--top { justify-content: flex-start; }
.sf-bs .sf-bs-hero-copy--center { justify-content: center; }
.sf-bs .sf-bs-hero-copy--media-top { min-height: 520px; padding-top: 2rem; padding-bottom: 46%; }
.sf-bs .sf-bs-hero-copy--media { min-height: 440px; padding-block: 3rem; }
.sf-bs .sf-bs-hero-copy--gross.sf-bs-hero-copy--media-top { min-height: 720px; }
.sf-bs .sf-bs-hero-copy--gross.sf-bs-hero-copy--media { min-height: 600px; padding-bottom: 4rem; }
.sf-bs .sf-bs-hero-copy--kompakt.sf-bs-hero-copy--media-top { min-height: 400px; padding-bottom: 32%; }
.sf-bs .sf-bs-hero-copy--kompakt.sf-bs-hero-copy--media { min-height: 320px; padding-bottom: 2.5rem; }
.sf-bs .sf-bs-hero-copy--plain { padding-block: 3rem; }
.sf-bs .sf-bs-hero-eyebrow { font-size: var(--sf-size-12); line-height: 1.3333; font-weight: 700; letter-spacing: 0.28em; text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-hero-eyebrow--light { color: var(--sf-white); text-shadow: var(--sf-bs-hero-text-shadow); }
.sf-bs .sf-bs-hero-eyebrow--dark { color: var(--sf-bs-accent-light); }
.sf-bs-hero-title { margin-top: 0.75rem; letter-spacing: -0.025em; }
.sf-bs .sf-bs-hero-title { max-width: 100%; font-family: var(--sf-display); font-size: var(--sf-title); line-height: var(--sf-heading-leading); font-weight: var(--sf-heading-weight); overflow-wrap: break-word; color: var(--sf-white); text-transform: var(--sf-heading-case); filter: var(--sf-bs-title-shadow); }
.sf-bs-hero-sub { margin-inline: auto; margin-top: 1rem; }
.sf-bs .sf-bs-hero-sub { max-width: 42rem; font-size: var(--sf-size-16); line-height: 1.5; color: color-mix(in oklab, var(--sf-white) 90%, transparent); filter: var(--sf-bs-sub-shadow); }
.sf-bs .sf-bs-hero-meta { margin-top: 1.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.75rem; }
.sf-bs .sf-bs-hero-period { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 3.40282e38px; border-style: solid; border-width: 1px; border-color: color-mix(in oklab, var(--sf-white) 25%, transparent); background-color: color-mix(in oklab, var(--sf-white) 10%, transparent); padding-inline: 1rem; padding-block: 0.375rem; font-size: var(--sf-size-12); line-height: 1.3333; font-weight: 600; color: var(--sf-white); backdrop-filter: blur(8px); }
.sf-bs .sf-bs-hero-ctas { margin-top: 2rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; }
.sf-bs .sf-bs-hero-cta { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 4px; background-color: var(--sf-bs-accent); padding-inline: 1.75rem; padding-block: 0.875rem; font-size: var(--sf-size-14); line-height: 1.4286; font-weight: 700; color: var(--sf-bs-accent-text); box-shadow: var(--sf-bs-shadow-lg); transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-hero-cta2 { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 4px; border-style: solid; border-width: 1px; border-color: color-mix(in oklab, var(--sf-white) 35%, transparent); background-color: color-mix(in oklab, var(--sf-white) 10%, transparent); padding-inline: 1.75rem; padding-block: 0.875rem; font-size: var(--sf-size-14); line-height: 1.4286; font-weight: 700; color: var(--sf-white); backdrop-filter: blur(8px); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-hero-anchors { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; }
.sf-bs .sf-bs-hero-anchor { border-radius: 3.40282e38px; border-style: solid; border-width: 1px; border-color: color-mix(in oklab, var(--sf-white) 25%, transparent); background-color: color-mix(in oklab, var(--sf-white) 10%, transparent); padding-inline: 1rem; padding-block: 0.375rem; font-size: var(--sf-size-12); line-height: 1.3333; font-weight: 700; color: var(--sf-white); backdrop-filter: blur(8px); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-cd-ended { display: inline-flex; align-items: center; border-radius: 3.40282e38px; border-style: solid; border-width: 1px; border-color: color-mix(in oklab, var(--sf-white) 25%, transparent); padding-inline: 1rem; padding-block: 0.5rem; font-size: var(--sf-size-12); line-height: 1.3333; font-weight: 600; color: color-mix(in oklab, var(--sf-white) 80%, transparent); }
.sf-bs .sf-bs-cd-until-light { display: inline-flex; align-items: center; padding-inline: 1rem; padding-block: 0.5rem; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-ink); }
.sf-bs .sf-bs-cd { display: flex; gap: 0.5rem; }
.sf-bs .sf-bs-cd-cell { width: 4rem; border-radius: 4px; border-style: solid; border-width: 1px; border-color: color-mix(in oklab, var(--sf-white) 20%, transparent); background-color: color-mix(in oklab, var(--sf-white) 10%, transparent); padding-block: 0.625rem; text-align: center; backdrop-filter: blur(8px); }
.sf-bs .sf-bs-cd-lcell { width: 4rem; background-color: var(--sf-ink); padding-block: 0.75rem; text-align: center; }
.sf-bs .sf-bs-cd-value { display: block; font-family: var(--sf-bs-mono); font-size: var(--sf-bs-text-2xl); line-height: calc(2 / 1.5); font-weight: 700; color: var(--sf-bs-accent-light); font-variant-numeric: tabular-nums; }
.sf-bs .sf-bs-cd-lvalue { display: block; font-family: var(--sf-display); font-size: var(--sf-bs-text-3xl); line-height: calc(2.25 / 1.875); font-weight: 800; color: var(--sf-white); font-variant-numeric: tabular-nums; }
.sf-bs .sf-bs-cd-label { font-size: var(--sf-size-10); letter-spacing: 0.1em; color: color-mix(in oklab, var(--sf-white) 60%, transparent); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-chip { display: inline-flex; max-width: 100%; align-items: stretch; overflow: hidden; text-align: left; color: var(--sf-ink); transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; background: var(--sf-white); border: 2px dashed var(--sf-ink); }
.sf-bs .sf-bs-chip--dark { color: var(--sf-white); background: var(--sf-bs-chip-dark-bg); border: var(--sf-bs-chip-dark-border); }
.sf-bs .sf-bs-chip-code { display: flex; align-items: center; padding-inline: 0.75rem; font-family: var(--sf-display); line-height: 1; font-weight: 800; letter-spacing: 0.06em; user-select: all; }
.sf-bs .sf-bs-chip-code--lg { padding-block: 10px; font-size: var(--sf-card-title); }
.sf-bs .sf-bs-chip-code--md { padding-block: 8px; font-size: var(--sf-size-20); }
.sf-bs .sf-bs-chip-code--sm { padding-block: 6px; font-size: var(--sf-size-16); }
.sf-bs .sf-bs-chip-action { display: flex; align-items: center; gap: 0.375rem; padding-inline: 0.75rem; font-size: var(--sf-size-12); line-height: 1; font-weight: 700; color: var(--sf-white); background: var(--sf-ink); }
.sf-bs .sf-bs-chip-action--dark { color: var(--sf-ink); background: var(--sf-white); }
.sf-bs .sf-bs-chip-action--copied { color: var(--sf-white); background: var(--sf-fit); }
.sf-bs .sf-bs-chip-text { white-space: nowrap; }
.sf-bs .sf-bs-chip-text--compact { display: none; }
.sf-bs .sf-bs-couponbar { position: sticky; top: var(--sf-kopf-klebt, 0px); z-index: 40; color: var(--sf-white); background: var(--sf-bs-accent); }
.sf-bs .sf-bs-couponbar-inner { margin-inline: auto; display: flex; max-width: 72rem; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 1rem; row-gap: 0.25rem; padding-inline: 1rem; padding-block: 0.5rem; font-size: var(--sf-size-14); font-weight: 600; }
.sf-bs .sf-bs-couponbar-label { display: none; }
.sf-bs .sf-bs-couponbar-until { opacity: 0.9; }
.sf-bs .sf-bs-cphero { margin-top: 1.5rem; display: inline-flex; max-width: 100%; flex-direction: column; align-items: center; gap: 0.75rem; }
.sf-bs .sf-bs-cphero-code { display: inline-flex; flex-direction: column; align-items: flex-start; border-radius: 4px; background-color: var(--sf-white); padding-inline: 1.25rem; padding-block: 0.75rem; text-align: left; color: var(--sf-ink); }
.sf-bs .sf-bs-cphero-label { font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.18em; color: var(--sf-bs-accent); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-cphero-chip { margin-top: 0.25rem; display: flex; align-items: center; }
.sf-bs .sf-bs-cphero-note { display: inline-flex; max-width: 20rem; flex-direction: column; justify-content: center; border-radius: 4px; background-color: color-mix(in oklab, var(--sf-white) 12%, transparent); padding-inline: 1rem; padding-block: 0.75rem; text-align: left; font-size: var(--sf-size-13); line-height: 1.375; color: var(--sf-white); backdrop-filter: blur(8px); }
.sf-bs .sf-bs-toc { position: sticky; top: var(--sf-kopf-klebt, 0px); z-index: 30; background-color: color-mix(in oklab, var(--sf-bs-ink-shade) 96%, transparent); box-shadow: inset 0 -3px 0 var(--sf-bs-accent), 0 6px 18px -12px color-mix(in oklab, var(--sf-ink) 60%, transparent); backdrop-filter: blur(8px); }
.sf-bs .sf-bs-toc--offset { top: 52px; }
.sf-bs .sf-bs-toc-list { margin-inline: auto; display: flex; flex-wrap: wrap; justify-content: center; max-width: 72rem; gap: 0.25rem 0.125rem; padding-inline: 0.75rem; padding-block: 0.5rem; }
.sf-bs .sf-bs-toc-item { flex-shrink: 1; min-width: 0; }
@container sf-lp (max-width: 639px) {
.sf-bs .sf-bs-toc-link { padding-inline: 0.625rem; padding-block: 0.3125rem; }
}
.sf-bs .sf-bs-toc-link { display: block; border-radius: 3.40282e38px; padding-inline: 0.875rem; padding-block: 0.375rem; font-size: var(--sf-size-13); font-weight: 700; color: color-mix(in oklab, var(--sf-white) 78%, transparent); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-toc-link--current { color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); }
.sf-bs .sf-bs-sections { margin-inline: auto; max-width: 72rem; padding-inline: 1rem; padding-block: 3.5rem; }
.sf-bs .sf-bs-sections > :not(:last-child) { margin-block-start: 0; margin-block-end: calc(0.25rem * 16); }
.sf-bs .sf-bs-section { scroll-margin-top: 7rem; }
.sf-bs.sf-bs-sticky { position: fixed; inset-inline: 0; bottom: 0; z-index: 40; border-top-style: solid; border-top-width: 1px; border-color: var(--sf-line); background-color: color-mix(in oklab, var(--sf-page) 95%, transparent); backdrop-filter: blur(8px); }
.sf-bs .sf-bs-sticky-inner { margin-inline: auto; display: flex; max-width: 72rem; align-items: center; justify-content: center; gap: 0.75rem; padding-inline: 1rem; padding-block: 0.75rem; }
.sf-bs .sf-bs-sticky-name { display: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; font-size: var(--sf-size-14); line-height: 1.4286; font-weight: 700; color: var(--sf-text); }
.sf-bs .sf-bs-sticky-btn { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.5rem; border-radius: 4px; background-color: var(--sf-bs-accent); padding-inline: 1.25rem; padding-block: 0.625rem; font-size: var(--sf-size-14); line-height: 1.4286; font-weight: 700; color: var(--sf-bs-accent-text); transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-sale-sticky-inner { margin-inline: auto; display: flex; max-width: 72rem; align-items: center; justify-content: space-between; gap: 0.75rem; padding-inline: 1rem; padding-block: 0.75rem; }
.sf-bs .sf-bs-sale-sticky-btn { display: inline-flex; flex-shrink: 0; align-items: center; gap: 0.5rem; padding-inline: 1.25rem; padding-block: 0.625rem; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-white); background: var(--sf-blue); }
.sf-bs .sf-bs-rich-link { font-weight: 600; text-underline-offset: 4px; }
.sf-bs-rich-link { text-decoration-line: underline; }
.sf-bs .sf-bs-head--center { text-align: center; }
.sf-bs .sf-bs-eyebrow { font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.22em; color: var(--sf-bs-kfg, var(--sf-bs-accent)); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-h2 { font-family: var(--sf-display); font-size: var(--sf-section-title); line-height: var(--sf-heading-leading); font-weight: var(--sf-heading-weight); letter-spacing: -0.025em; color: var(--sf-bs-heading, var(--sf-text)); text-transform: var(--sf-heading-case); }
.sf-bs-h2--head { margin-top: 0.375rem; }
.sf-bs .sf-bs-on-dark { color: var(--sf-white); }
.sf-bs-head-intro { margin-top: 0.5rem; }
.sf-bs .sf-bs-head-intro { max-width: 42rem; font-size: var(--sf-size-14); line-height: 1.4286; color: var(--sf-muted); }
.sf-bs-head-intro--center { margin-inline: auto; }
.sf-bs .sf-bs-head-intro--center { margin-inline: auto; text-align: center; }
.sf-bs .sf-bs-intro { margin-inline: auto; max-width: 48rem; text-align: center; font-size: var(--sf-size-16); line-height: 1.625; color: var(--sf-text); }
.sf-bs-para { margin-bottom: 0.75rem; }
.sf-bs .sf-bs-intro-link { font-weight: 700; color: var(--sf-bs-kfg, var(--sf-bs-accent)); background: var(--sf-bs-kbg, transparent); padding: var(--sf-bs-kpad, 0); border-radius: 4px; text-underline-offset: 4px; }
.sf-bs-intro-link { text-decoration-line: underline; }
.sf-bs .sf-bs-narrow { margin-inline: auto; max-width: 48rem; }
.sf-bs .sf-bs-body { margin-top: 1rem; font-size: var(--sf-size-16); line-height: 1.625; color: var(--sf-muted); }
.sf-bs .sf-bs-strong { font-weight: 700; color: var(--sf-text); }
.sf-bs .sf-bs-bold { font-weight: 700; }
.sf-bs .sf-bs-muted { color: var(--sf-muted); }
.sf-bs .sf-bs-ink-text { color: var(--sf-bs-ink); }
.sf-bs .sf-bs-card-title { font-family: var(--sf-display); font-size: var(--sf-card-title); line-height: var(--sf-heading-leading); font-weight: var(--sf-heading-weight); color: var(--sf-text); text-transform: var(--sf-heading-case); }
.sf-bs .sf-bs-h3-label { font-family: var(--sf-body); font-size: var(--sf-size-13); line-height: inherit; font-weight: 700; letter-spacing: 0.14em; color: var(--sf-muted); text-transform: uppercase; }
.sf-bs .sf-bs-decision { margin-top: 2rem; display: grid; gap: 1rem; }
.sf-bs .sf-bs-decision-text { font-size: var(--sf-size-14); line-height: 1.625; color: var(--sf-muted); }
.sf-bs .sf-bs-decision-card { display: flex; gap: 1rem; border-radius: 14px; border-style: solid; border-width: 1px; border-color: var(--sf-line); background-color: var(--sf-white); padding: 1.25rem; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-decision-icon { display: grid; height: 2.25rem; width: 2.25rem; flex-shrink: 0; place-items: center; border-radius: 3.40282e38px; color: var(--sf-white); background: var(--sf-bs-ink); }
.sf-bs .sf-bs-decision-fit { margin-top: 1.25rem; display: grid; gap: 1rem; }
.sf-bs .sf-bs-decision-note { border-radius: 10px; background-color: color-mix(in oklab, var(--sf-surface) 60%, transparent); padding: 1rem; font-size: var(--sf-size-14); line-height: 1.4286; color: var(--sf-muted); }
.sf-bs .sf-bs-areas { margin-top: 2rem; display: grid; gap: 1rem; }
.sf-bs .sf-bs-area { position: relative; display: flex; min-height: 200px; flex-direction: column; overflow: hidden; border-radius: 14px; padding: 1.25rem; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; background: linear-gradient(150deg, var(--sf-bs-ink), var(--sf-bs-ink-shade)); }
.sf-bs .sf-bs-area-img { pointer-events: none; position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; opacity: 0.4; transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.7s; }
.sf-bs .sf-bs-area-body { position: relative; display: flex; height: 100%; flex-direction: column; }
.sf-bs .sf-bs-area-label { font-size: var(--sf-size-18); line-height: 1.5556; font-weight: 800; color: var(--sf-white); }
.sf-bs .sf-bs-area-front { margin-top: 0.125rem; font-size: var(--sf-size-12); line-height: 1.3333; font-weight: 700; letter-spacing: 0.05em; color: var(--sf-bs-accent-light); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-area-text { margin-top: 0.75rem; font-size: var(--sf-size-14); line-height: 1.625; color: color-mix(in oklab, var(--sf-white) 80%, transparent); }
.sf-bs .sf-bs-area-more { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--sf-size-12); line-height: 1.3333; font-weight: 700; color: var(--sf-white); }
.sf-bs .sf-bs-finder { margin-top: 2rem; display: grid; gap: 2rem; }
.sf-bs .sf-bs-finder-step { font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.18em; color: var(--sf-muted); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-finder-tiles { margin-top: 0.75rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sf-bs .sf-bs-finder-chips { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sf-bs .sf-bs-finder-chip { min-height: 2.75rem; border-radius: 3.40282e38px; border-style: solid; border-width: 2px; border-color: var(--sf-line); padding-inline: 1.25rem; padding-block: 0.5rem; color: var(--sf-text); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs-finder-chip { border-style: solid; border-width: 2px; font-size: var(--sf-size-14); font-weight: 700; }
.sf-bs .sf-bs-finder-chip--on { border-color: var(--sf-bs-accent); color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); }
.sf-bs .sf-bs-finder-tile { position: relative; display: flex; aspect-ratio: 4 / 5; align-items: flex-end; overflow: hidden; border-radius: 14px; padding: 1rem; text-align: left; outline: none; outline-offset: 3px; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; background: linear-gradient(150deg, var(--sf-bs-ink), var(--sf-bs-ink-shade)); }
.sf-bs .sf-bs-finder-tile--on { outline: 3px solid var(--sf-bs-accent); }
.sf-bs .sf-bs-finder-img { pointer-events: none; position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.7s; }
.sf-bs .sf-bs-finder-shade { pointer-events: none; position: absolute; inset: 0; background: var(--sf-bs-finder-shade); }
.sf-bs .sf-bs-finder-label { position: relative; display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.5rem; font-size: var(--sf-size-16); font-weight: 800; color: var(--sf-white); text-shadow: var(--sf-bs-finder-text-shadow); }
.sf-bs .sf-bs-finder-check { display: grid; height: 1.75rem; width: 1.75rem; flex-shrink: 0; place-items: center; border-radius: 3.40282e38px; color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); }
.sf-bs .sf-bs-finder-result { border-radius: 14px; border-style: solid; border-width: 1px; border-color: var(--sf-line); background-color: var(--sf-white); padding: 1.25rem; }
.sf-bs .sf-bs-finder-result-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.75rem; }
.sf-bs .sf-bs-finder-result-title { font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.18em; color: var(--sf-bs-ink); text-transform: var(--sf-label-case); }
.sf-bs-finder-reset { font-size: var(--sf-size-13); font-weight: 700; }
.sf-bs .sf-bs-finder-reset { color: var(--sf-muted); text-decoration-line: underline; text-underline-offset: 4px; }
.sf-bs .sf-bs-finder-pick { margin-top: 1rem; display: grid; align-items: center; gap: 1.25rem; }
.sf-bs .sf-bs-finder-link { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-text); text-underline-offset: 4px; }
.sf-bs-finder-link { text-decoration-line: underline; }
.sf-bs-finder-empty { margin-top: 0.75rem; }
.sf-bs .sf-bs-finder-empty { font-size: var(--sf-size-14); line-height: 1.625; color: var(--sf-muted); }
.sf-bs .sf-bs-finder-emptylink { font-weight: 700; color: var(--sf-text); text-underline-offset: 4px; }
.sf-bs-finder-emptylink { text-decoration-line: underline; }
.sf-bs .sf-bs-table-wrap { overflow-x: auto; border-radius: 14px; border-style: solid; border-width: 1px; border-color: var(--sf-line); }
.sf-bs .sf-bs-table { width: 100%; text-align: left; font-size: var(--sf-size-14); line-height: 1.4286; }
@container sf-lp (min-width: 640px) {
.sf-bs .sf-bs-table { min-width: 640px; }
}
@container sf-lp (max-width: 639px) {
.sf-bs .sf-bs-table, .sf-bs .sf-bs-tbody, .sf-bs .sf-bs-tr, .sf-bs .sf-bs-td { display: block; }
.sf-bs .sf-bs-table-head { display: none; }
.sf-bs .sf-bs-tr { padding-block: 0.5rem; }
.sf-bs .sf-bs-td { padding-block: 0.25rem; }
.sf-bs .sf-bs-td--rest::before { content: attr(data-sf-label); display: block; font-size: var(--sf-size-12); line-height: 1.3333; font-weight: 700; letter-spacing: 0.05em; color: var(--sf-text); text-transform: var(--sf-label-case); }
}
.sf-bs .sf-bs-table-head { background: var(--sf-bs-ink); }
.sf-bs .sf-bs-th { padding-inline: 1rem; padding-block: 0.75rem; font-size: var(--sf-size-12); line-height: 1.3333; font-weight: 700; letter-spacing: 0.05em; color: var(--sf-white); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-tr { border-top-style: solid; border-top-width: 1px; border-color: var(--sf-line); }
.sf-bs .sf-bs-tr:nth-child(2n) { background-color: color-mix(in oklab, var(--sf-surface) 40%, transparent); }
.sf-bs .sf-bs-td { padding-inline: 1rem; padding-block: 0.75rem; vertical-align: top; }
.sf-bs .sf-bs-td--first { font-weight: 700; color: var(--sf-text); }
.sf-bs .sf-bs-td--rest { color: var(--sf-muted); }
.sf-bs .sf-bs-showcase { display: grid; align-items: center; gap: 2rem; }
.sf-bs .sf-bs-showcase-fig { position: relative; overflow: hidden; border-radius: 14px; }
.sf-bs .sf-bs-showcase-img { aspect-ratio: 16 / 10; width: 100%; object-fit: cover; }
.sf-bs .sf-bs-caption { margin-top: 0.5rem; font-size: var(--sf-size-12); line-height: 1.3333; color: var(--sf-muted); }
.sf-bs .sf-bs-products-links { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 1.25rem; row-gap: 0.75rem; }
.sf-bs .sf-bs-products-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); }
.sf-bs .sf-bs-groups { margin-top: 2.5rem; }
.sf-bs .sf-bs-groups > :not(:last-child) { margin-block-start: 0; margin-block-end: calc(0.25rem * 8); }
.sf-bs .sf-bs-band { display: flex; flex-direction: column; gap: 0.75rem; padding-inline: 1.5rem; padding-block: 1.25rem; color: var(--sf-bs-tile-fg); background: var(--sf-bs-tile-bg); }
.sf-bs .sf-bs-band-head { display: flex; flex-shrink: 0; flex-direction: column; }
.sf-bs .sf-bs-tile-eyebrow { font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.18em; text-transform: var(--sf-label-case); opacity: 0.85; }
.sf-bs .sf-bs-band-value { font-family: var(--sf-display); font-size: var(--sf-section-title); line-height: 1; font-weight: 800; color: var(--sf-bs-tile-value); }
.sf-bs .sf-bs-band-text { font-size: var(--sf-size-14); line-height: 1.4286; opacity: 0.95; }
.sf-bs .sf-bs-stack { display: grid; gap: 0; overflow: hidden; border-radius: 14px; }
.sf-bs .sf-bs-tile { display: flex; flex-direction: column; gap: 0.375rem; padding: 1.5rem; color: var(--sf-bs-tile-fg); background: var(--sf-bs-tile-bg); }
.sf-bs .sf-bs-tile-value { font-family: var(--sf-display); font-size: var(--sf-section-title); line-height: 1; font-weight: 800; color: var(--sf-bs-tile-value); }
.sf-bs .sf-bs-tile-text { font-size: var(--sf-size-14); line-height: 1.4286; opacity: 0.9; }
.sf-bs .sf-bs-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding-block: 1rem; }
.sf-bs .sf-bs-links--rule { border-block-style: solid; border-block-width: 1px; border-color: var(--sf-line); }
.sf-bs .sf-bs-links-label { margin-right: 0.5rem; font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.18em; color: var(--sf-muted); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-links-chip { display: inline-flex; align-items: center; border-style: solid; border-width: 1px; border-color: var(--sf-bs-line-strong); padding-inline: 1rem; padding-block: 0.625rem; font-size: var(--sf-size-14); font-weight: 600; color: var(--sf-text); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-links-shop { margin-left: auto; display: inline-flex; align-items: center; gap: 0.25rem; padding-inline: 1rem; padding-block: 0.625rem; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-white); background: var(--sf-ink); }
.sf-bs .sf-bs-logos { padding-block: 1rem; }
.sf-bs .sf-bs-logos-label { margin-bottom: 0.75rem; display: block; font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.18em; color: var(--sf-muted); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-logos-rail { margin-inline: -1rem; display: flex; gap: 0.5rem; overflow-x: auto; padding-inline: 1rem; padding-bottom: 0.25rem; scrollbar-width: none; }
.sf-bs .sf-bs-logos-rail::-webkit-scrollbar { display: none; }
.sf-bs .sf-bs-logo-chip { display: inline-flex; height: 2.75rem; flex-shrink: 0; align-items: center; justify-content: center; border-style: solid; border-width: 1px; border-color: var(--sf-bs-line-strong); background-color: var(--sf-white); padding-inline: 1rem; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-logo-img { height: 1.5rem; width: auto; object-fit: contain; }
.sf-bs-logo-img { max-width: 140px; }
.sf-bs .sf-bs-logo-text { font-size: var(--sf-size-14); font-weight: 600; color: var(--sf-text); }
.sf-bs .sf-bs-logos-shop { display: inline-flex; height: 2.75rem; flex-shrink: 0; align-items: center; gap: 0.25rem; padding-inline: 1rem; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-white); background: var(--sf-ink); }
.sf-bs .sf-bs-round { border-radius: 4px; }
.sf-bs .sf-bs-round2 { border-radius: 14px; }
.sf-bs .sf-bs-audio { margin-top: 1.5rem; border-radius: 14px; border: 1px solid var(--sf-line); background-color: var(--sf-white); padding: 1.25rem; }
.sf-bs .sf-bs-audio audio { display: block; width: 100%; }
.sf-bs .sf-bs-audio-meta { margin-top: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; font-size: var(--sf-size-12); line-height: 1.5; color: var(--sf-muted); }
.sf-bs .sf-bs-audio-meta a { font-weight: 700; color: var(--sf-bs-kfg, var(--sf-bs-accent)); text-decoration-line: underline; text-underline-offset: 4px; }
.sf-bs .sf-bs-audio-transcript { margin-top: 1rem; border-top: 1px solid var(--sf-line); padding-top: 0.75rem; font-size: var(--sf-size-16); line-height: 1.625; color: var(--sf-muted); }
.sf-bs .sf-bs-audio-transcript summary { cursor: pointer; font-weight: 700; color: var(--sf-text); margin-bottom: 0.5rem; }
.sf-bs .sf-bs-tech { margin-top: 2rem; display: grid; gap: 1.25rem; }
.sf-bs .sf-bs-tech-card { border-radius: 14px; border-style: solid; border-width: 1px; border-color: var(--sf-line); background-color: var(--sf-white); padding: 1.25rem; }
.sf-bs .sf-bs-tech-front { font-size: var(--sf-size-12); line-height: 1.3333; font-weight: 800; letter-spacing: 0.05em; display: inline-block; color: var(--sf-bs-kfg, var(--sf-bs-accent)); background: var(--sf-bs-kbg, transparent); padding: var(--sf-bs-kpad, 0); border-radius: 4px; text-transform: var(--sf-label-case); }
.sf-bs-tech-title { margin-top: 0.375rem; }
.sf-bs .sf-bs-tech-title { font-family: var(--sf-display); font-size: var(--sf-card-title); line-height: var(--sf-heading-leading); font-weight: var(--sf-heading-weight); color: var(--sf-text); text-transform: var(--sf-heading-case); }
.sf-bs-tech-text { margin-top: 0.5rem; }
.sf-bs .sf-bs-tech-text { font-size: var(--sf-size-12); line-height: 1.625; color: var(--sf-muted); }
.sf-bs .sf-bs-brand { position: relative; overflow: hidden; border-radius: 18px; padding: 1.75rem; background: linear-gradient(135deg, var(--sf-bs-ink), var(--sf-bs-ink-shade)); }
.sf-bs .sf-bs-brand-img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; opacity: 0.3; }
.sf-bs .sf-bs-rel { position: relative; }
.sf-bs .sf-bs-brand-eyebrow { font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.22em; color: color-mix(in oklab, var(--sf-white) 70%, transparent); text-transform: var(--sf-label-case); }
.sf-bs-brand-quote { margin-top: 1rem; }
.sf-bs .sf-bs-brand-quote { font-size: var(--sf-bs-text-2xl); line-height: calc(2 / 1.5); font-weight: 900; color: var(--sf-white); }
.sf-bs .sf-bs-brand-text { margin-top: 0.75rem; max-width: 48rem; font-size: var(--sf-size-16); line-height: 1.625; color: color-mix(in oklab, var(--sf-white) 85%, transparent); }
.sf-bs .sf-bs-stats { margin-top: 1.5rem; display: grid; gap: 1rem; }
.sf-bs .sf-bs-stat { border-radius: 10px; border-style: solid; border-width: 1px; border-color: color-mix(in oklab, var(--sf-white) 15%, transparent); background-color: color-mix(in oklab, var(--sf-white) 5%, transparent); padding: 1.25rem; }
.sf-bs .sf-bs-stat-value { display: block; font-size: var(--sf-bs-text-2xl); line-height: calc(2 / 1.5); font-weight: 900; color: var(--sf-white); }
.sf-bs .sf-bs-stat-label { margin-top: 0.25rem; display: block; font-size: var(--sf-size-14); line-height: 1.4286; color: color-mix(in oklab, var(--sf-white) 80%, transparent); }
.sf-bs .sf-bs-brand-light { position: relative; overflow: hidden; border-radius: 18px; padding: 1.75rem; background: var(--sf-bs-tint); }
.sf-bs-brand-lquote { margin-top: 1rem; }
.sf-bs .sf-bs-brand-lquote { font-size: var(--sf-bs-text-2xl); line-height: calc(2 / 1.5); font-weight: 900; color: var(--sf-bs-accent); }
.sf-bs .sf-bs-brand-ltext { margin-top: 0.75rem; max-width: 48rem; font-size: var(--sf-size-16); line-height: 1.625; color: var(--sf-text); }
.sf-bs .sf-bs-lstat { border-radius: 10px; background-color: var(--sf-white); padding: 1.25rem; box-shadow: var(--sf-bs-shadow-sm); }
.sf-bs .sf-bs-lstat-value { display: block; font-size: var(--sf-bs-text-3xl); line-height: calc(2.25 / 1.875); font-weight: 900; color: var(--sf-bs-accent); }
.sf-bs .sf-bs-lstat-label { margin-top: 0.25rem; display: block; font-size: var(--sf-size-14); line-height: 1.4286; color: var(--sf-muted); }
.sf-bs .sf-bs-article { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; border-radius: 14px; border-style: solid; border-width: 1px; border-color: var(--sf-line); background-color: var(--sf-white); padding: 1.5rem; transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-article-icon { display: grid; height: 3rem; width: 3rem; flex-shrink: 0; place-items: center; border-radius: 3.40282e38px; color: var(--sf-white); background: var(--sf-bs-ink); }
.sf-bs .sf-bs-article-body { flex: 1; }
.sf-bs .sf-bs-article-title { margin-top: 0.25rem; display: block; font-size: var(--sf-size-18); line-height: 1.5556; font-weight: 800; color: var(--sf-text); }
.sf-bs .sf-bs-article-intro { margin-top: 0.25rem; display: block; font-size: var(--sf-size-14); line-height: 1.4286; color: var(--sf-muted); }
.sf-bs .sf-bs-article-more { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--sf-size-14); line-height: 1.4286; font-weight: 700; color: var(--sf-text); }
.sf-bs .sf-bs-article-arrow { transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-articleimg { display: grid; overflow: hidden; border-radius: 14px; border-style: solid; border-width: 1px; border-color: var(--sf-line); background-color: var(--sf-white); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-articleimg-fig { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.sf-bs .sf-bs-articleimg-img { height: 100%; width: 100%; object-fit: cover; transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.7s; }
.sf-bs .sf-bs-articleimg-body { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; padding: 1.5rem; }
.sf-bs .sf-bs-articleimg-intro { font-size: var(--sf-size-14); line-height: 1.625; color: var(--sf-muted); }
.sf-bs .sf-bs-articleimg-more { margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); }
.sf-bs .sf-bs-articleimg-arrow { transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-cta { text-align: center; }
.sf-bs .sf-bs-cta-service { margin-bottom: 2rem; display: flex; flex-wrap: wrap; justify-content: center; column-gap: 1.5rem; row-gap: 0.5rem; }
.sf-bs .sf-bs-cta-service-item { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--sf-size-14); line-height: 1.4286; color: var(--sf-muted); }
.sf-bs .sf-bs-accent-icon { color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); }
.sf-bs-cta-text { margin-inline: auto; margin-top: 0.5rem; }
.sf-bs .sf-bs-cta-text { max-width: 32rem; font-size: var(--sf-size-14); line-height: 1.4286; color: var(--sf-muted); }
.sf-bs .sf-bs-cta-chip { margin-top: 1.25rem; display: flex; justify-content: center; }
.sf-bs .sf-bs-cta-btn { margin-top: 1.25rem; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 4px; background-color: var(--sf-bs-accent); padding-inline: 2rem; padding-block: 1rem; font-size: var(--sf-size-16); line-height: 1.5; font-weight: 700; color: var(--sf-bs-accent-text); box-shadow: var(--sf-bs-shadow-lg); transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-lareas { margin-top: 2rem; display: grid; gap: 1.25rem; }
.sf-bs .sf-bs-larea { display: flex; flex-direction: column; overflow: hidden; border-radius: 14px; border-style: solid; border-width: 1px; border-color: var(--sf-line); background-color: var(--sf-white); transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-larea-fig { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.sf-bs .sf-bs-larea-img { height: 100%; width: 100%; object-fit: cover; transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.7s; }
.sf-bs .sf-bs-larea-bar { height: 0.5rem; background: var(--sf-bs-accent); }
.sf-bs .sf-bs-larea-body { display: flex; flex: 1; flex-direction: column; padding: 1.25rem; }
.sf-bs .sf-bs-larea-front { font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.18em; display: inline-block; color: var(--sf-bs-kfg, var(--sf-bs-accent)); background: var(--sf-bs-kbg, transparent); padding: var(--sf-bs-kpad, 0); border-radius: 4px; text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-larea-label { margin-top: 0.25rem; font-size: var(--sf-size-18); line-height: 1.375; font-weight: 800; color: var(--sf-text); }
.sf-bs .sf-bs-larea-text { margin-top: 0.5rem; font-size: var(--sf-size-14); line-height: 1.625; color: var(--sf-muted); }
.sf-bs .sf-bs-larea-more { margin-top: auto; display: inline-flex; align-items: center; gap: 0.375rem; padding-top: 1rem; font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); }
.sf-bs .sf-bs-larea-arrow { transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-kacheln .sf-bs-larea { border-color: transparent; background-color: var(--sf-bs-farbe-f4f3f0); }
.sf-bs .sf-bs-kacheln .sf-bs-larea-fig { aspect-ratio: 4 / 3; padding: 2.25rem 1rem 0.5rem; }
.sf-bs .sf-bs-kacheln .sf-bs-larea-img { object-fit: contain; mix-blend-mode: multiply; }
.sf-bs .sf-bs-kacheln .sf-bs-larea-body { padding: 0.75rem 1.125rem 1.125rem; }
.sf-bs .sf-bs-kacheln .sf-bs-larea-label { margin-top: 0; font-size: var(--sf-size-16); }
.sf-bs .sf-bs-kacheln .sf-bs-larea-text { margin-top: 0.25rem; font-size: var(--sf-size-13); line-height: 1.45; }
.sf-bs .sf-bs-kacheln .sf-bs-larea-more { padding-top: 0.625rem; }
.sf-bs .sf-bs-kachel-sticker { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; border-radius: 6px; background: var(--sf-sale-sticker, var(--sf-bs-farbe-e30613)); padding: 0.3rem 0.6rem 0.2rem; font-size: var(--sf-size-14); font-weight: 800; line-height: 1.2; color: var(--sf-bs-farbe-weiss); white-space: nowrap; }
@container sf-lp (max-width: 767px) {
.sf-bs .sf-bs-lareas.sf-bs-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sf-bs .sf-bs-kacheln .sf-bs-larea-fig { padding: 2rem 0.5rem 0.25rem; }
.sf-bs .sf-bs-kacheln .sf-bs-larea-body { padding: 0.5rem 0.75rem 0.875rem; }
.sf-bs .sf-bs-kacheln .sf-bs-larea-label { font-size: var(--sf-size-14); }
.sf-bs .sf-bs-kacheln .sf-bs-larea-text { display: none; }
.sf-bs .sf-bs-kachel-sticker { top: 0.5rem; left: 0.5rem; font-size: var(--sf-size-12); }
}
.sf-bs .sf-bs-sale-hero { position: relative; display: flex; min-height: 520px; align-items: flex-end; overflow: hidden; background-color: var(--sf-ink); }
.sf-bs .sf-bs-sale-hero.sf-bs-sale-hero--kompakt { min-height: 300px; align-items: center; }
.sf-bs .sf-bs-sale-hero--kompakt .sf-bs-sale-copy { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.sf-bs .sf-bs-sale-hero--kompakt .sf-bs-sale-copy-inner { gap: 0.75rem; }
@container sf-lp (min-width: 768px) {
.sf-bs .sf-bs-sale-hero.sf-bs-sale-hero--kompakt { min-height: 340px; }
.sf-bs .sf-bs-sale-hero--kompakt .sf-bs-sale-copy { padding-top: 2rem; padding-bottom: 2rem; }
}
.sf-bs .sf-bs-sale-side { display: none; }
@container sf-lp (min-width: 768px) {
.sf-bs .sf-bs-sale-side { display: block; position: absolute; top: 0; right: 0; height: 100%; width: auto; max-width: 50%; object-fit: contain; object-position: right center; pointer-events: none; }
.sf-bs .sf-bs-sale-hero--side .sf-bs-sale-copy-inner { max-width: 50%; }
.sf-bs .sf-bs-sale-hero--side .sf-bs-sale-ctas { flex-wrap: wrap; }
.sf-bs .sf-bs-sale-hero--side .sf-bs-sale-cta, .sf-bs .sf-bs-sale-hero--side .sf-bs-sale-cta2 { white-space: nowrap; }
}
.sf-bs .sf-bs-sale-hero--hell { background-color: var(--sf-bs-farbe-f3efe7); }
.sf-bs .sf-bs-sale-hero--hell .sf-bs-sale-title, .sf-bs .sf-bs-sale-hero--hell .sf-bs-sale-sub { color: var(--sf-text); }
.sf-bs .sf-bs-sale-hero--hell .sf-bs-sale-cta2 { border-color: var(--sf-text); background-color: transparent; color: var(--sf-text); }
.sf-bs .sf-bs-shelf { display: none; }
@container sf-lp (min-width: 768px) {
.sf-bs .sf-bs-shelf { position: absolute; right: 1.5rem; bottom: 2.25rem; z-index: 2; display: flex; width: 52%; height: 80%; align-items: flex-end; justify-content: space-between; gap: 0; }
.sf-bs .sf-bs-sale-hero:has(.sf-bs-shelf) .sf-bs-sale-copy-inner { max-width: 44%; }
.sf-bs .sf-bs-shelf::before { content: ""; position: absolute; left: 0; right: 0; bottom: 3.6rem; height: 4px; border-radius: 2px; background: var(--sf-text); transform-origin: left center; animation: sf-shelf-line 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.sf-bs .sf-bs-shelf-item { position: relative; display: flex; flex: 1 1 0; min-width: 0; height: 100%; flex-direction: column; align-items: center; justify-content: flex-end; text-decoration: none; }
.sf-bs .sf-bs-shelf-fig { display: flex; flex: 1 1 auto; width: 100%; min-height: 0; align-items: flex-end; justify-content: center; padding-bottom: 0.25rem; margin-bottom: 1rem; overflow: visible; animation: sf-shelf-drop 0.75s cubic-bezier(0.25, 1.4, 0.45, 1) both; animation-delay: calc(0.35s + var(--sf-bs-i) * 0.14s); }
.sf-bs .sf-bs-shelf-fig img { max-width: 135%; max-height: 100%; object-fit: contain; object-position: center bottom; transition: transform 0.25s ease; }
.sf-bs .sf-bs-shelf-item:hover .sf-bs-shelf-fig img { transform: translateY(-8px) scale(1.04); }
.sf-bs .sf-bs-shelf-badge { display: inline-flex; flex-direction: column; align-items: center; border-radius: 8px; background: var(--sf-sale-sticker, var(--sf-bs-farbe-c8102e)); padding: 0.35rem 0.6rem 0.3rem; font-family: var(--sf-display); font-size: var(--sf-size-18); font-weight: 800; line-height: 1; color: var(--sf-bs-farbe-weiss); white-space: nowrap; box-shadow: 0 8px 18px var(--sf-bs-farbe-schwarz-18); animation: sf-shelf-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1) both, sf-shelf-wiggle 4.8s ease-in-out infinite; animation-delay: calc(0.35s + var(--sf-bs-n) * 0.14s + 0.2s + var(--sf-bs-i) * 0.09s), calc(2.6s + var(--sf-bs-i) * 0.8s); }
.sf-bs .sf-bs-shelf-badge small { margin-top: 0.15rem; font-size: var(--sf-bs-schrift-0-6rem); letter-spacing: 0.08em; }
}
@keyframes sf-shelf-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes sf-shelf-drop { 0% { opacity: 0; transform: translateY(-70px); } 60% { opacity: 1; } 100% { opacity: 1; transform: translateY(0); } }
@keyframes sf-shelf-pop { 0% { opacity: 0; transform: scale(0.2) rotate(-12deg); } 100% { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes sf-shelf-wiggle { 0%, 84%, 100% { transform: rotate(0) scale(1); } 88% { transform: rotate(-6deg) scale(1.08); } 92% { transform: rotate(5deg) scale(1.08); } 96% { transform: rotate(-2deg) scale(1.02); } }
@media (prefers-reduced-motion: reduce) {
.sf-bs .sf-bs-shelf::before, .sf-bs .sf-bs-shelf-fig, .sf-bs .sf-bs-shelf-badge { animation: none; }
}
.sf-bs .sf-bs-sale-overlay { position: absolute; inset: 0; background: var(--sf-bs-sale-overlay); }
.sf-bs .sf-bs-sale-logo { position: absolute; top: 1rem; right: 1rem; z-index: 10; height: 1.75rem; width: auto; }
.sf-bs .sf-bs-sale-copy { position: relative; width: 100%; padding-inline: 1rem; padding-top: 5rem; padding-bottom: 2rem; }
.sf-bs .sf-bs-sale-copy-inner { display: flex; max-width: 48rem; flex-direction: column; align-items: flex-start; gap: 1rem; }
.sf-bs .sf-bs-sale-eyebrow { display: inline-flex; background-color: var(--sf-white); padding-inline: 0.75rem; padding-block: 0.5rem; font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.12em; color: var(--sf-blue); text-transform: uppercase; }
.sf-bs-sale-title { margin: 0; letter-spacing: -0.01em; }
.sf-bs .sf-bs-sale-title { font-family: var(--sf-display); font-size: var(--sf-title); line-height: 0.94; font-weight: 800; color: var(--sf-white); text-transform: none; }
.sf-bs .sf-bs-sale-row { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem; }
.sf-bs .sf-bs-sale-code { display: flex; flex-direction: column; gap: 0.5rem; background-color: var(--sf-white); padding-inline: 1rem; padding-block: 0.75rem; }
.sf-bs .sf-bs-sale-label { font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.12em; color: var(--sf-blue); text-transform: uppercase; }
.sf-bs .sf-bs-sale-cd { display: flex; flex-direction: column; justify-content: center; gap: 0.25rem; padding-inline: 1rem; padding-block: 0.75rem; color: var(--sf-white); background: var(--sf-blue); }
.sf-bs .sf-bs-sale-cd-label { font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.sf-bs .sf-bs-sale-cd-value { font-family: var(--sf-display); font-size: var(--sf-card-title); line-height: 1; font-weight: 800; }
.sf-bs .sf-bs-sale-sub { margin: 0; max-width: 42rem; font-size: var(--sf-size-16); line-height: 1.5; color: var(--sf-white); }
.sf-bs .sf-bs-sale-ctas { display: flex; width: 100%; flex-direction: column; gap: 0.75rem; }
.sf-bs .sf-bs-sale-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding-inline: 1.75rem; padding-block: 1rem; font-size: var(--sf-size-16); font-weight: 700; color: var(--sf-white); background: var(--sf-blue); }
.sf-bs .sf-bs-sale-cta2 { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-style: solid; border-width: 2px; border-color: var(--sf-white); background-color: color-mix(in oklab, var(--sf-white) 10%, transparent); padding-inline: 1.75rem; padding-block: 0.875rem; font-size: var(--sf-size-16); font-weight: 700; color: var(--sf-white); }
.sf-bs .sf-bs-sale-links { border-bottom-style: solid; border-bottom-width: 1px; border-color: var(--sf-line); background-color: var(--sf-white); padding-inline: 1rem; }
.sf-bs .sf-bs-sale-sections { margin-inline: auto; max-width: 72rem; padding-inline: 1rem; padding-block: 3rem; }
.sf-bs .sf-bs-sale-sections > :not(:last-child) { margin-block-start: 0; margin-block-end: calc(0.25rem * 14); }
.sf-bs .sf-bs-partner { border-bottom-style: solid; border-bottom-width: 1px; border-color: var(--sf-line); background-color: var(--sf-white); }
.sf-bs .sf-bs-partner-inner { margin-inline: auto; display: flex; max-width: 72rem; align-items: center; justify-content: space-between; gap: 0.75rem; padding-inline: 1rem; padding-block: 0.75rem; }
.sf-bs .sf-bs-partner-left { display: flex; align-items: center; gap: 0.75rem; }
.sf-bs .sf-bs-partner-logo { height: 1.75rem; width: auto; }
.sf-bs .sf-bs-partner-label { border-style: solid; border-width: 1px; border-color: var(--sf-blue); padding-inline: 0.5rem; padding-block: 0.25rem; font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.1em; color: var(--sf-blue); text-transform: uppercase; }
.sf-bs .sf-bs-partner-right { display: flex; align-items: center; gap: 1rem; }
.sf-bs .sf-bs-partner-rating { display: none; font-size: var(--sf-size-14); color: var(--sf-text); }
.sf-bs .sf-bs-partner-cta { display: none; align-items: center; gap: 0.5rem; padding-inline: 1.25rem; padding-block: 0.75rem; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-white); background: var(--sf-blue); }
.sf-bs .sf-bs-salestack-band { padding-inline: 1rem; padding-block: 1.5rem; }
.sf-bs .sf-bs-salestack { display: grid; }
.sf-bs .sf-bs-saletile { display: flex; flex-direction: column; gap: 0.5rem; padding-inline: 1rem; padding-block: 1.75rem; color: var(--sf-bs-tile-fg); background: var(--sf-bs-tile-bg); }
.sf-bs .sf-bs-saletile-eyebrow { font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85; }
.sf-bs .sf-bs-saletile-value { font-family: var(--sf-display); font-size: var(--sf-bs-stack-value); line-height: 1; font-weight: 800; color: var(--sf-bs-tile-value); }
.sf-bs .sf-bs-saletile-text { max-width: 36rem; font-size: var(--sf-size-14); line-height: 1.5; opacity: 0.9; }
.sf-bs .sf-bs-saleprod-head { display: flex; flex-direction: column; gap: 1rem; }
.sf-bs .sf-bs-saleprod-left { display: flex; flex-direction: column; gap: 0.375rem; }
.sf-bs .sf-bs-saleprod-eyebrow { font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.12em; color: var(--sf-blue); text-transform: uppercase; }
.sf-bs .sf-bs-saleprod-title { margin: 0; font-family: var(--sf-display); font-size: var(--sf-bs-sale-title); line-height: 0.95; font-weight: 800; letter-spacing: -0.01em; color: var(--sf-bs-heading, var(--sf-ink)); text-transform: none; }
.sf-bs .sf-bs-saleprod-claim { margin: 0; font-size: var(--sf-size-16); font-weight: 600; color: var(--sf-ink); }
.sf-bs .sf-bs-saleprod-right { display: flex; flex-direction: column; gap: 0.75rem; }
.sf-bs .sf-bs-saleprod-intro { margin: 0; font-size: var(--sf-size-14); line-height: 1.5; color: var(--sf-text); }
.sf-bs .sf-bs-saleprod-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.sf-bs .sf-bs-saleprod-link { display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-blue); }
.sf-bs .sf-bs-saleprod-groups { margin-top: 2rem; }
.sf-bs .sf-bs-saleprod-groups > :not(:last-child) { margin-block-start: 0; margin-block-end: calc(0.25rem * 6); }
.sf-bs-saleprod-group { margin-bottom: 0.75rem; }
.sf-bs .sf-bs-saleprod-group { font-family: var(--sf-body); font-size: var(--sf-size-12); line-height: inherit; font-weight: 700; letter-spacing: 0.14em; color: var(--sf-muted); text-transform: uppercase; }
.sf-bs .sf-bs-push { display: flex; flex-direction: column; gap: 1.5rem; border-top-style: solid; border-top-width: 4px; border-color: var(--sf-blue); padding-inline: 1.25rem; padding-block: 1.75rem; background: var(--sf-advice-tint); }
.sf-bs .sf-bs-push-left { display: flex; max-width: 42rem; flex-direction: column; gap: 0.5rem; }
.sf-bs .sf-bs-push-title { margin: 0; font-family: var(--sf-display); font-size: var(--sf-section-title); line-height: 1; font-weight: 800; color: var(--sf-ink); text-transform: none; }
.sf-bs .sf-bs-push-right { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.75rem; }
.sf-bs .sf-bs-trust { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.sf-bs .sf-bs-trust-item { display: flex; flex-direction: column; gap: 0.25rem; border-top-style: solid; border-top-width: 3px; border-color: var(--sf-blue); padding-top: 0.75rem; }
.sf-bs .sf-bs-trust-title { font-family: var(--sf-display); font-size: var(--sf-size-20); line-height: 1; font-weight: 800; color: var(--sf-ink); }
.sf-bs .sf-bs-trust-text { font-size: var(--sf-size-13); line-height: 1.375; color: var(--sf-text); }
.sf-bs .sf-bs-salecta { display: flex; flex-direction: column; gap: 1.25rem; padding-inline: 1.25rem; padding-block: 1.75rem; color: var(--sf-white); background: var(--sf-ink); }
.sf-bs .sf-bs-salecta-left { display: flex; flex-direction: column; gap: 0.75rem; }
.sf-bs .sf-bs-salecta-title { margin: 0; font-family: var(--sf-display); font-size: var(--sf-section-title); line-height: 1; font-weight: 800; color: var(--sf-white); text-transform: none; }
.sf-bs .sf-bs-salecta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.sf-bs .sf-bs-salecta-text { font-size: var(--sf-size-14); opacity: 0.8; }
.sf-bs .sf-bs-salecta-service { margin: 0; display: flex; list-style-type: none; flex-wrap: wrap; column-gap: 1.25rem; row-gap: 0.25rem; padding: 0; font-size: var(--sf-size-13); opacity: 0.85; }
.sf-bs .sf-bs-salecta-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.sf-bs .sf-bs-salecta-btn { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 0.5rem; padding-inline: 2rem; padding-block: 1.25rem; font-size: var(--sf-size-16); font-weight: 700; color: var(--sf-white); background: var(--sf-blue); }
.sf-bs .sf-bs-mt4 { margin-top: 1rem; }
.sf-bs .sf-bs-mt8 { margin-top: 2rem; }
.sf-bs .sf-bs-mt14 { margin-top: 3.5rem; }
@media (hover: hover) {
.sf-bs .sf-bs-toc-link:not(.sf-bs-toc-link--current):hover { color: var(--sf-white); background: color-mix(in oklab, var(--sf-white) 12%, transparent); }
.sf-bs .sf-bs-hero-cta:hover { scale: 1.02; }
.sf-bs .sf-bs-hero-cta2:hover { background-color: color-mix(in oklab, var(--sf-white) 20%, transparent); }
.sf-bs .sf-bs-hero-anchor:hover { background-color: color-mix(in oklab, var(--sf-white) 20%, transparent); }
.sf-bs .sf-bs-chip:hover { scale: 1.02; }
.sf-bs .sf-bs-sticky-btn:hover { scale: 1.02; }
.sf-bs .sf-bs-decision-card:hover { translate: 0 calc(0.25rem * -0.5); box-shadow: var(--sf-bs-shadow-md); }
.sf-bs .sf-bs-area:hover { translate: 0 calc(0.25rem * -1); }
.sf-bs .sf-bs-area:hover .sf-bs-area-img { scale: 105% 105%; }
.sf-bs .sf-bs-finder-tile:hover { translate: 0 calc(0.25rem * -0.5); }
.sf-bs .sf-bs-finder-tile:hover .sf-bs-finder-img { scale: 105% 105%; }
.sf-bs .sf-bs-links-chip:hover { border-color: var(--sf-ink); }
.sf-bs .sf-bs-logo-chip:hover { border-color: var(--sf-ink); }
.sf-bs .sf-bs-article:hover { box-shadow: var(--sf-bs-shadow-lg); }
.sf-bs .sf-bs-article:hover .sf-bs-article-arrow { translate: calc(0.25rem * 0.5) 0; }
.sf-bs .sf-bs-articleimg:hover { box-shadow: var(--sf-bs-shadow-lg); }
.sf-bs .sf-bs-articleimg:hover .sf-bs-articleimg-img { scale: 105% 105%; }
.sf-bs .sf-bs-articleimg:hover .sf-bs-articleimg-arrow { translate: calc(0.25rem * 0.5) 0; }
.sf-bs .sf-bs-cta-btn:hover { scale: 1.02; }
.sf-bs .sf-bs-larea:hover { translate: 0 calc(0.25rem * -1); box-shadow: var(--sf-bs-shadow-lg); }
.sf-bs .sf-bs-larea:hover .sf-bs-larea-img { scale: 105% 105%; }
.sf-bs .sf-bs-larea:hover .sf-bs-larea-arrow { translate: calc(0.25rem * 0.5) 0; }
}
@container sf-lp (min-width: 640px) {
.sf-bs .sf-bs-hero-logo { top: 1.5rem; left: 1.5rem; height: 6rem; max-width: 28rem; }
.sf-bs .sf-bs-hero-copy { padding-inline: 1.5rem; }
.sf-bs .sf-bs-hero-copy--media-top { min-height: 540px; padding-top: 4rem; padding-bottom: 18%; }
.sf-bs .sf-bs-hero-copy--media { min-height: 540px; padding-block: 5rem; }
.sf-bs .sf-bs-hero-copy--gross.sf-bs-hero-copy--media-top { min-height: 700px; padding-bottom: 22%; }
.sf-bs .sf-bs-hero-copy--gross.sf-bs-hero-copy--media { min-height: 700px; padding-bottom: 6rem; }
.sf-bs .sf-bs-hero-copy--kompakt.sf-bs-hero-copy--media-top, .sf-bs .sf-bs-hero-copy--kompakt.sf-bs-hero-copy--media { min-height: 400px; padding-bottom: 3.5rem; }
.sf-bs .sf-bs-hero-copy--plain { padding-block: 4rem; }
.sf-bs .sf-bs-hero-eyebrow { font-size: var(--sf-size-14); line-height: 1.4286; }
.sf-bs .sf-bs-hero-sub { font-size: var(--sf-size-18); line-height: 1.5556; }
.sf-bs .sf-bs-hero-ctas { flex-direction: row; }
.sf-bs .sf-bs-cd { gap: 0.75rem; }
.sf-bs .sf-bs-cd-cell { width: 5rem; }
.sf-bs .sf-bs-cd-lcell { width: 5rem; }
.sf-bs .sf-bs-cd-value { font-size: var(--sf-bs-text-3xl); line-height: calc(2.25 / 1.875); }
.sf-bs .sf-bs-cd-lvalue { font-size: var(--sf-bs-text-4xl); line-height: calc(2.5 / 2.25); }
.sf-bs .sf-bs-couponbar-inner { padding-inline: 1.5rem; }
.sf-bs .sf-bs-couponbar-label { display: inline; }
.sf-bs .sf-bs-cphero { flex-direction: row; align-items: stretch; }
.sf-bs .sf-bs-toc-list { padding-inline: 1.5rem; }
.sf-bs .sf-bs-sections > :not(:last-child) { margin-block-start: 0; margin-block-end: calc(0.25rem * 20); }
.sf-bs .sf-bs-sections { padding-inline: 1.5rem; padding-block: 5rem; }
.sf-bs .sf-bs-head-intro { font-size: var(--sf-size-16); line-height: 1.5; }
.sf-bs .sf-bs-intro { font-size: var(--sf-size-18); line-height: 1.5556; }
.sf-bs .sf-bs-decision { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-decision-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-finder-result { padding: 1.5rem; }
.sf-bs .sf-bs-finder-pick { grid-template-columns: minmax(0, 280px) 1fr; }
.sf-bs .sf-bs-band { flex-direction: row; align-items: center; gap: 2rem; padding-inline: 2rem; }
.sf-bs .sf-bs-band-text { font-size: var(--sf-size-16); line-height: 1.5; }
.sf-bs .sf-bs-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-tile { padding: 2rem; }
.sf-bs .sf-bs-tile-value { font-size: var(--sf-figure, 64px); }
.sf-bs .sf-bs-tile-text { font-size: var(--sf-size-16); line-height: 1.5; }
.sf-bs .sf-bs-logos-rail { margin-inline: 0; flex-wrap: wrap; overflow: visible; padding-inline: 0; }
.sf-bs .sf-bs-logos-shop { margin-left: auto; }
.sf-bs .sf-bs-tech { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-brand { padding: 2.5rem; }
.sf-bs .sf-bs-brand-quote { font-size: var(--sf-bs-text-3xl); line-height: calc(2.25 / 1.875); }
.sf-bs .sf-bs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-brand-light { padding: 2.5rem; }
.sf-bs .sf-bs-brand-lquote { font-size: var(--sf-bs-text-3xl); line-height: calc(2.25 / 1.875); }
.sf-bs .sf-bs-article { flex-direction: row; align-items: center; padding: 2rem; }
.sf-bs .sf-bs-articleimg { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.sf-bs .sf-bs-articleimg-fig { aspect-ratio: auto; height: 100%; }
.sf-bs .sf-bs-articleimg-body { padding: 2rem; }
.sf-bs .sf-bs-cta-text { font-size: var(--sf-size-16); line-height: 1.5; }
.sf-bs .sf-bs-lareas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-sale-head { margin-inline: auto; max-width: 72rem; padding-inline: 1.5rem; padding-top: 1.5rem; }
.sf-bs .sf-bs-sale-hero { min-height: 560px; }
.sf-bs .sf-bs-sale-logo { top: 2.5rem; right: 2.5rem; height: 3rem; }
.sf-bs .sf-bs-sale-copy { padding-inline: 2.5rem; padding-bottom: 2.5rem; }
.sf-bs .sf-bs-sale-code { padding-inline: 1.25rem; }
.sf-bs .sf-bs-sale-cd { padding-inline: 1.25rem; }
.sf-bs .sf-bs-sale-sub { font-size: var(--sf-size-20); }
.sf-bs .sf-bs-sale-ctas { width: auto; flex-direction: row; }
.sf-bs .sf-bs-sale-links { padding-inline: 2.5rem; }
.sf-bs .sf-bs-sale-sections > :not(:last-child) { margin-block-start: 0; margin-block-end: calc(0.25rem * 20); }
.sf-bs .sf-bs-sale-sections { padding-inline: 1.5rem; padding-block: 4rem; }
.sf-bs .sf-bs-partner-inner { padding-inline: 1.5rem; }
.sf-bs .sf-bs-partner-left { gap: 1rem; }
.sf-bs .sf-bs-partner-logo { height: 2.25rem; }
.sf-bs .sf-bs-partner-rating { display: inline; }
.sf-bs .sf-bs-partner-cta { display: inline-flex; }
.sf-bs .sf-bs-salestack-band { padding-inline: 0; }
.sf-bs .sf-bs-salestack--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-salestack--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-bs .sf-bs-salestack--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-saletile { padding-inline: 2.5rem; padding-block: 2.75rem; }
.sf-bs .sf-bs-saletile-text { font-size: var(--sf-size-16); }
.sf-bs .sf-bs-saleprod-head { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2rem; }
.sf-bs .sf-bs-saleprod-claim { font-size: var(--sf-size-18); }
.sf-bs .sf-bs-saleprod-right { max-width: 28rem; align-items: flex-end; text-align: right; }
.sf-bs .sf-bs-saleprod-intro { font-size: var(--sf-size-16); }
.sf-bs .sf-bs-saleprod-links { justify-content: flex-end; }
.sf-bs .sf-bs-push { padding-inline: 2.5rem; padding-block: 2.5rem; }
.sf-bs .sf-bs-trust { gap: 1.75rem; }
.sf-bs .sf-bs-trust-title { font-size: var(--sf-card-title); }
.sf-bs .sf-bs-trust-text { font-size: var(--sf-size-14); }
.sf-bs .sf-bs-salecta { padding-inline: 2.5rem; padding-block: 2.25rem; }
.sf-bs .sf-bs-sm3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container sf-lp (max-width: 639px) {
.sf-bs.sf-bs-salepage--dock .sf-bs-couponbar { display: none; }
}
@container sf-lp (min-width: 640px) {
.sf-bs .sf-bs-chip-text--compact { display: inline; }
.sf-bs .sf-bs-sticky-inner { justify-content: space-between; padding-inline: 1.5rem; }
.sf-bs .sf-bs-sticky-name { display: block; }
.sf-bs .sf-bs-sale-sticky-inner { padding-inline: 1.5rem; }
}
@container sf-lp (min-width: 1024px) {
.sf-bs .sf-bs-showcase--img { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-showcase--right > figure { order: 2; }
.sf-bs .sf-bs-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-bs .sf-bs-salestack--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-bs .sf-bs-saletile { padding-inline: 4rem; }
.sf-bs .sf-bs-push { flex-direction: row; align-items: center; justify-content: space-between; }
.sf-bs .sf-bs-push-left { max-width: 28rem; }
.sf-bs .sf-bs-push-right { flex-wrap: nowrap; }
.sf-bs .sf-bs-salecta { flex-direction: row; align-items: center; justify-content: space-between; }
.sf-bs .sf-bs-lg2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-lg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-bs .sf-bs-lg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-bs .sf-bs-lg5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.sf-bs.sf-bs-page, .sf-bs.sf-bs-salepage { --sf-bs-kfg: var(--sf-bs-light-kfg, var(--sf-bs-accent)); --sf-bs-kbg: var(--sf-bs-light-kbg, transparent); --sf-bs-kpad: var(--sf-bs-light-kpad, 0); --sf-bs-base-text: var(--sf-text); --sf-bs-base-muted: var(--sf-muted); --sf-bs-base-line: var(--sf-line); --sf-bs-accent-fill: var(--sf-bs-accent); --sf-bs-accent-text-fill: var(--sf-bs-accent-text); --sf-bs-accent-solid-light: var(--sf-bs-accent-solid, var(--sf-bs-accent)); overflow-x: clip; }
.sf-bs .sf-bs-kicker { display: inline-block; background: var(--sf-bs-kbg, transparent); padding: var(--sf-bs-kpad, 0); border-radius: 4px; }
.sf-bs .sf-bs-hero-copy--bottom { justify-content: flex-end; }
.sf-bs .sf-bs-hero-logo--large { height: 5rem; max-width: 80%; }
.sf-bs .sf-bs-hero-copy--logo { padding-top: 6rem; }
.sf-bs .sf-bs-hero-copy--logo-large { padding-top: 7rem; }
.sf-bs .sf-bs-hero-mark { display: block; width: auto; max-width: 70%; height: 4rem; margin-bottom: 1.5rem; object-fit: contain; filter: var(--sf-bs-drop-shadow); }
.sf-bs .sf-bs-hero-mark--large { height: 5rem; max-width: 80%; }
.sf-bs .sf-bs-hero-kv { position: relative; width: 60%; max-width: var(--sf-bs-kv-width, 30rem); margin: 0 0 1.25rem; }
.sf-bs .sf-bs-hero-kv-img { display: block; width: 100%; height: auto; }
.sf-bs .sf-bs-divided { position: relative; }
.sf-bs .sf-bs-divided::before { content: ""; position: absolute; top: -2rem; left: 0; right: 0; height: 1px; background: color-mix(in oklab, var(--sf-bs-ink) 18%, transparent); pointer-events: none; }
.sf-bs .sf-bs-divided--accent::before { left: 50%; right: auto; width: 4rem; height: 3px; border-radius: 3px; background: var(--sf-bs-accent-fill, var(--sf-bs-accent)); transform: translateX(-50%); }
.sf-bs .sf-bs-tone { border-radius: 18px; padding: 2rem 1.25rem; }
.sf-bs .sf-bs-tone--dunkel { --sf-text: var(--sf-white); --sf-muted: var(--sf-white); --sf-line: color-mix(in oklab, var(--sf-white) 24%, transparent); --sf-bs-kfg: var(--sf-bs-accent-on-dark, var(--sf-bs-accent-light)); --sf-bs-kbg: transparent; --sf-bs-kpad: 0; --sf-bs-accent-solid: var(--sf-bs-accent-on-dark, var(--sf-bs-accent-light)); background: var(--sf-bs-ink); color: var(--sf-white); }
.sf-bs .sf-bs-tone--akzent { --sf-text: var(--sf-bs-accent-text-fill); --sf-muted: var(--sf-bs-accent-text-fill); --sf-line: color-mix(in oklab, var(--sf-bs-accent-text-fill) 28%, transparent); --sf-bs-kfg: var(--sf-bs-accent-text-fill); --sf-bs-kbg: transparent; --sf-bs-kpad: 0; --sf-bs-accent-solid: var(--sf-bs-accent-text-fill); --sf-bs-accent: var(--sf-bs-ink); --sf-bs-accent-text: var(--sf-white); background: var(--sf-bs-accent-fill); color: var(--sf-bs-accent-text-fill); }
.sf-bs .sf-bs-tone--flaeche { background: var(--sf-bs-surface, var(--sf-surface)); }
.sf-bs .sf-bs-tone--dunkel, .sf-bs .sf-bs-tone--akzent { --sf-bs-heading: var(--sf-text); }
.sf-bs .sf-bs-tone .sf-bs-ink-text, .sf-bs .sf-bs-tone .sf-bs-finder-count { color: inherit; }
.sf-bs .sf-bs-tone .sf-bs-tech-card, .sf-bs .sf-bs-tone .sf-bs-larea, .sf-bs .sf-bs-tone .sf-bs-decision-card, .sf-bs .sf-bs-tone .sf-bs-finder-result, .sf-bs .sf-bs-tone .sf-bs-table-wrap, .sf-bs .sf-bs-tone .sf-bs-article, .sf-bs .sf-bs-tone .sf-bs-articleimg, .sf-bs .sf-bs-tone .sf-bs-logo-chip, .sf-bs .sf-bs-tone .sf-bs-step, .sf-bs .sf-bs-tone .sf-bs-faq-item, .sf-bs .sf-bs-tone .sf-bs-reminder-btn, .sf-bs .sf-bs-tone .sf-bs-bead-caption, .sf-bs .sf-bs-tone .sf-bs-bead-console, .sf-bs .sf-bs-tone .sf-bs-bead-home, .sf-bs .sf-bs-tone .sf-bs-sole-visual, .sf-bs .sf-bs-tone .sf-bs-sole-stages, .sf-bs .sf-bs-tone .sf-bs-sole-card, .sf-bs .sf-bs-tone .sf-bs-dl-card, .sf-bs .sf-bs-tone .sf-bs-svc, .sf-bs .sf-bs-tone .sf-shop-card { --sf-bs-heading: var(--sf-bs-base-text); --sf-text: var(--sf-bs-base-text); --sf-muted: var(--sf-bs-base-muted); --sf-line: var(--sf-bs-base-line); --sf-bs-kfg: var(--sf-bs-light-kfg, var(--sf-bs-accent-fill)); --sf-bs-kbg: var(--sf-bs-light-kbg, transparent); --sf-bs-kpad: var(--sf-bs-light-kpad, 0); --sf-bs-accent: var(--sf-bs-accent-fill); --sf-bs-accent-text: var(--sf-bs-accent-text-fill); --sf-bs-accent-solid: var(--sf-bs-accent-solid-light); color: var(--sf-bs-base-text); }
.sf-bs .sf-bs-tone .sf-bs-trust-title, .sf-bs .sf-bs-tone .sf-bs-saleprod-title, .sf-bs .sf-bs-tone .sf-bs-saleprod-claim { color: var(--sf-text); }
.sf-bs .sf-bs-tone .sf-bs-trust-item { border-color: var(--sf-bs-accent-solid); }
.sf-bs .sf-bs-tone .sf-bs-saleprod-eyebrow, .sf-bs .sf-bs-tone .sf-bs-saleprod-link { color: var(--sf-bs-accent-solid); }
.sf-bs .sf-bs-tone .sf-bs-links-shop, .sf-bs .sf-bs-tone .sf-bs-logos-shop { color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); }
@media (hover: hover) {
.sf-bs .sf-bs-tone .sf-bs-links-chip:hover { border-color: var(--sf-text); }
}
.sf-bs .sf-bs-brand-logo { display: block; width: auto; max-width: 12rem; height: 1.75rem; margin-bottom: 0.75rem; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.sf-bs .sf-bs-push--dunkel { border-color: var(--sf-bs-accent-on-dark, var(--sf-bs-accent-light)); background: var(--sf-bs-ink); }
.sf-bs .sf-bs-push--akzent { border-color: var(--sf-bs-ink); background: var(--sf-bs-accent); }
.sf-bs .sf-bs-push--dunkel .sf-bs-push-title, .sf-bs .sf-bs-push--dunkel .sf-bs-cd-until-light { color: var(--sf-white); }
.sf-bs .sf-bs-push--dunkel .sf-bs-saleprod-intro { color: color-mix(in oklab, var(--sf-white) 82%, transparent); }
.sf-bs .sf-bs-push--dunkel .sf-bs-saleprod-eyebrow, .sf-bs .sf-bs-push--dunkel .sf-bs-cd-lvalue { color: var(--sf-bs-accent-on-dark, var(--sf-bs-accent-light)); }
.sf-bs .sf-bs-push--dunkel .sf-bs-cd-lcell { background-color: var(--sf-bs-ink-shade); }
.sf-bs .sf-bs-push--akzent .sf-bs-push-title, .sf-bs .sf-bs-push--akzent .sf-bs-saleprod-eyebrow, .sf-bs .sf-bs-push--akzent .sf-bs-cd-until-light { color: var(--sf-bs-accent-text); }
.sf-bs .sf-bs-push--akzent .sf-bs-saleprod-intro { color: color-mix(in oklab, var(--sf-bs-accent-text) 85%, transparent); }
.sf-bs .sf-bs-push--akzent .sf-bs-cd-lcell { background-color: var(--sf-bs-ink); }
.sf-bs .sf-bs-push--akzent .sf-bs-cd-lvalue { color: var(--sf-bs-accent-on-dark, var(--sf-white)); }
.sf-bs .sf-bs-backdropped { position: relative; }
.sf-bs .sf-bs-backdrop { position: absolute; top: 50%; z-index: 0; width: auto; height: 120%; max-width: 45%; max-height: 40rem; object-fit: contain; opacity: 0.15; pointer-events: none; user-select: none; transform: translateY(-50%); }
.sf-bs .sf-bs-backdrop--rechts { right: -6%; }
.sf-bs .sf-bs-backdrop--links { left: -6%; }
.sf-bs .sf-bs-backdrop--mitte { left: 50%; transform: translate(-50%, -50%); }
.sf-bs .sf-bs-backdrop--flip { transform: translateY(-50%) scaleX(-1); }
.sf-bs .sf-bs-backdrop--mitte.sf-bs-backdrop--flip { transform: translate(-50%, -50%) scaleX(-1); }
.sf-bs .sf-bs-backdrop-content { position: relative; z-index: 1; }
.sf-bs .sf-bs-finder-name { display: flex; flex-direction: column; gap: 0.125rem; }
.sf-bs .sf-bs-finder-text { font-size: var(--sf-size-12); line-height: 1.35; font-weight: 600; color: color-mix(in oklab, var(--sf-white) 88%, transparent); }
.sf-bs .sf-bs-finder-chip-text { display: block; font-size: var(--sf-size-12); font-weight: 500; color: var(--sf-muted); }
.sf-bs .sf-bs-finder-chip--on .sf-bs-finder-chip-text { color: inherit; }
.sf-bs .sf-bs-finder--flow { gap: 1rem; scroll-margin-top: 6rem; }
.sf-bs .sf-bs-finder-count { color: var(--sf-bs-ink); }
.sf-bs .sf-bs-finder-nav { display: inline-flex; flex-wrap: wrap; gap: 1rem; }
.sf-bs .sf-bs-finder-back { justify-self: start; }
.sf-bs .sf-bs-finder-anchor { scroll-margin-top: 6rem; scroll-margin-bottom: 5rem; }
@container sf-lp (min-width: 640px) {
.sf-bs .sf-bs-hero-logo--large { height: 7.5rem; max-width: 32rem; }
.sf-bs .sf-bs-hero-copy--logo { padding-top: 8.5rem; }
.sf-bs .sf-bs-hero-copy--logo-large { padding-top: 10rem; }
.sf-bs .sf-bs-hero-mark { height: 5rem; max-width: 28rem; margin-bottom: 2rem; }
.sf-bs .sf-bs-hero-mark--large { height: 7.5rem; max-width: 32rem; }
.sf-bs .sf-bs-hero-kv { width: 100%; margin-bottom: 1.5rem; }
.sf-bs .sf-bs-divided::before { top: -2.5rem; }
.sf-bs .sf-bs-tone { padding: 3rem 2.5rem; }
.sf-bs .sf-bs-brand-logo { height: 2.25rem; }
.sf-bs .sf-bs-backdrop { max-width: 55%; }
}
@container sf-lp (min-width: 1024px) {
.sf-bs .sf-bs-toc-list--center { justify-content: center; }
}
.sf-bs .sf-bs-sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.sf-bs .sf-bs-steps-option:focus-visible, .sf-bs .sf-bs-steps-reset:focus-visible, .sf-bs .sf-bs-step-box:focus-visible, .sf-bs .sf-bs-faq-q:focus-visible, .sf-bs .sf-bs-steps-group-head:focus-visible, .sf-bs .sf-bs-reminder-btn:focus-visible, .sf-bs .sf-bs-reminder-google:focus-visible { outline: 3px solid var(--sf-bs-accent-solid, var(--sf-blue)); outline-offset: 2px; }
.sf-bs .sf-bs-steps--narrow { margin-inline: auto; max-width: 48rem; }
.sf-bs .sf-bs-steps-layout { margin-top: 1.75rem; display: grid; gap: 1.25rem; }
.sf-bs .sf-bs-steps-aside { display: grid; align-content: start; gap: 1.25rem; }
.sf-bs .sf-bs-steps-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.sf-bs .sf-bs-steps-fact { border-radius: 12px; padding: 0.75rem 0.875rem; background: color-mix(in oklab, var(--sf-text) 6%, transparent); }
.sf-bs .sf-bs-steps-fact:last-child:nth-child(odd) { grid-column: 1 / -1; }
.sf-bs .sf-bs-steps-fact-label, .sf-bs .sf-bs-steps-label { font-size: var(--sf-size-11); line-height: 1.3; font-weight: 700; letter-spacing: 0.14em; color: var(--sf-muted); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-steps-fact-value { margin: 0.25rem 0 0; font-size: var(--sf-size-15); line-height: 1.4; font-weight: 700; color: var(--sf-text); }
.sf-bs .sf-bs-steps-switch { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.25rem; border-radius: 14px; padding: 0.25rem; background: color-mix(in oklab, var(--sf-text) 8%, transparent); }
.sf-bs .sf-bs-steps-option { flex: 1 1 auto; min-height: 2.75rem; border-radius: 10px; padding: 0.5rem 0.75rem; font-size: var(--sf-size-14); line-height: 1.25; font-weight: 700; color: var(--sf-text); background: transparent; text-wrap: balance; transition-property: color, background-color, box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-steps-option--on { color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); box-shadow: var(--sf-bs-shadow-sm); }
.sf-bs .sf-bs-steps-variant-text { margin-top: 0.5rem; font-size: var(--sf-size-14); line-height: 1.45; color: var(--sf-muted); }
.sf-bs .sf-bs-steps-progress { border-radius: 14px; border: 1px solid var(--sf-line); padding: 0.75rem 1rem 1rem; }
.sf-bs .sf-bs-steps-progress-head { display: flex; min-height: 2.75rem; align-items: center; justify-content: space-between; gap: 0.75rem; }
.sf-bs .sf-bs-steps-count { font-size: var(--sf-size-15); font-weight: 800; color: var(--sf-text); font-variant-numeric: tabular-nums; }
.sf-bs .sf-bs-steps-reset { display: inline-flex; min-height: 2.75rem; align-items: center; gap: 0.375rem; padding-inline: 0.25rem; font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-muted); background: transparent; text-decoration-line: underline; text-underline-offset: 4px; }
.sf-bs .sf-bs-steps-bar { height: 0.5rem; overflow: hidden; border-radius: 999px; background: color-mix(in oklab, var(--sf-text) 12%, transparent); }
.sf-bs .sf-bs-steps-bar-fill { display: block; height: 100%; border-radius: inherit; background: var(--sf-bs-accent-solid, var(--sf-bs-accent)); transition: width 0.3s ease-out; }
.sf-bs .sf-bs-steps-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 1rem; }
.sf-bs .sf-bs-step { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); column-gap: 0.875rem; row-gap: 0.875rem; border-radius: 16px; border: 1px solid var(--sf-line); background: var(--sf-white); padding: 1.125rem; color: var(--sf-text); transition-property: border-color, background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.2s; }
.sf-bs .sf-bs-step--done { border-color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); background: color-mix( in oklab, var(--sf-bs-accent-solid, var(--sf-bs-accent)) 5%, var(--sf-white) ); }
.sf-bs .sf-bs-step-head { display: contents; }
.sf-bs .sf-bs-step-num { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: 999px; font-family: var(--sf-display); font-size: var(--sf-size-20); line-height: 1; font-weight: 800; color: var(--sf-white); background: var(--sf-bs-ink); transition-property: color, background-color; transition-duration: 0.2s; }
.sf-bs .sf-bs-step--done .sf-bs-step-num { color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); }
.sf-bs .sf-bs-step-heading { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; align-self: center; column-gap: 0.75rem; row-gap: 0.375rem; }
.sf-bs .sf-bs-step-title { margin: 0; font-family: var(--sf-display); font-size: var(--sf-bs-step-title); line-height: 1.05; font-weight: var(--sf-heading-weight); letter-spacing: -0.01em; color: var(--sf-text); text-transform: var(--sf-heading-case); }
.sf-bs .sf-bs-step-duration { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 999px; padding: 0.1875rem 0.5rem; font-size: var(--sf-size-12); line-height: 1.3; font-weight: 700; white-space: nowrap; color: var(--sf-muted); background: color-mix(in oklab, var(--sf-text) 7%, transparent); }
.sf-bs .sf-bs-step-body { grid-column: 1 / -1; display: grid; min-width: 0; gap: 1rem; }
.sf-bs .sf-bs-step-content { display: grid; gap: 1rem; }
.sf-bs .sf-bs-step-copy { display: grid; min-width: 0; gap: 0.75rem; font-size: var(--sf-size-16); line-height: 1.6; color: var(--sf-text); }
.sf-bs .sf-bs-step-para { margin: 0; }
.sf-bs .sf-bs-step-fig { position: relative; margin: 0; overflow: hidden; border-radius: 12px; background: var(--sf-surface); }
.sf-bs .sf-bs-step-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.sf-bs .sf-bs-callout { display: flex; gap: 0.625rem; border-radius: 12px; border-left: 4px solid; padding: 0.75rem 0.875rem; font-size: var(--sf-size-15); line-height: 1.5; color: var(--sf-text); }
.sf-bs .sf-bs-callout--tip { border-color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); background: color-mix( in oklab, var(--sf-bs-accent-solid, var(--sf-bs-accent)) 7%, var(--sf-white) ); }
.sf-bs .sf-bs-callout--warning { border-color: var(--sf-bs-caution); background: var(--sf-bs-caution-tint); }
.sf-bs .sf-bs-callout-icon { display: grid; width: 1.375rem; height: 1.375rem; flex-shrink: 0; place-items: center; margin-top: 0.0625rem; }
.sf-bs .sf-bs-callout--tip .sf-bs-callout-icon { color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); }
.sf-bs .sf-bs-callout--warning .sf-bs-callout-icon, .sf-bs .sf-bs-callout--warning .sf-bs-callout-label { color: var(--sf-bs-caution); }
.sf-bs .sf-bs-callout-body { display: grid; min-width: 0; gap: 0.125rem; }
.sf-bs .sf-bs-callout-label { font-size: var(--sf-size-12); line-height: 1.4; font-weight: 800; letter-spacing: 0.12em; color: var(--sf-text); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-callout-text { margin: 0; }
.sf-bs .sf-bs-step-check { position: relative; display: inline-flex; min-height: 2.75rem; align-items: center; justify-self: start; gap: 0.625rem; border-radius: 999px; border: 2px solid var(--sf-line); padding: 0.375rem 1.125rem 0.375rem 0.625rem; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-text); cursor: pointer; user-select: none; transition-property: border-color, background-color; transition-duration: 0.15s; }
.sf-bs .sf-bs-step-box { appearance: none; margin: 0; width: 1.5rem; height: 1.5rem; flex-shrink: 0; border-radius: 6px; border: 2px solid var(--sf-muted); background: var(--sf-white); cursor: pointer; transition-property: border-color, background-color; transition-duration: 0.15s; }
.sf-bs .sf-bs-step-box:checked { border-color: var(--sf-bs-accent); background: var(--sf-bs-accent); }
.sf-bs .sf-bs-step-tick { position: absolute; top: 50%; left: 0.625rem; display: grid; width: 1.5rem; height: 1.5rem; place-items: center; translate: 0 -50%; color: var(--sf-bs-accent-text); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.sf-bs .sf-bs-step-box:checked + .sf-bs-step-tick { opacity: 1; }
.sf-bs .sf-bs-step--done .sf-bs-step-check { border-color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); }
.sf-bs .sf-bs-steps-done { margin-top: 1rem; display: flex; align-items: center; gap: 0.75rem; border-radius: 14px; padding: 1rem 1.125rem; font-size: var(--sf-size-16); line-height: 1.4; font-weight: 700; color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); animation: sf-bs-steps-done-in 0.35s ease-out; }
.sf-bs .sf-bs-steps-done-icon { display: grid; width: 2rem; height: 2rem; flex-shrink: 0; place-items: center; border-radius: 999px; background: color-mix(in oklab, var(--sf-bs-accent-text) 18%, transparent); }
@keyframes sf-bs-steps-done-in { from { opacity: 0; transform: translateY(8px); } }
.sf-bs .sf-bs-steps-group { border-radius: 16px; border: 1px solid var(--sf-line); padding-inline: 1rem; }
.sf-bs .sf-bs-steps-group[open] { padding-bottom: 1rem; }
.sf-bs .sf-bs-steps-group-head { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.875rem; list-style: none; cursor: pointer; }
.sf-bs .sf-bs-steps-group-head::-webkit-details-marker { display: none; }
.sf-bs .sf-bs-steps-group-titles { display: grid; gap: 0.125rem; }
.sf-bs .sf-bs-steps-group-label { font-size: var(--sf-size-18); line-height: 1.3; font-weight: 800; color: var(--sf-text); }
.sf-bs .sf-bs-steps-group-text { font-size: var(--sf-size-14); line-height: 1.4; color: var(--sf-muted); }
.sf-bs .sf-bs-faq { margin-top: 2rem; display: grid; gap: 0.75rem; }
.sf-bs .sf-bs-faq-item { border-radius: 14px; border: 1px solid var(--sf-line); background: var(--sf-white); color: var(--sf-text); transition-property: border-color, box-shadow; transition-duration: 0.15s; }
.sf-bs .sf-bs-faq-item[open] { border-color: var(--sf-bs-line-strong); box-shadow: var(--sf-bs-shadow-sm); }
.sf-bs .sf-bs-faq-q { display: flex; min-height: 3.5rem; align-items: center; justify-content: space-between; gap: 1rem; border-radius: 14px; padding: 1rem 1.125rem; font-size: var(--sf-size-16); line-height: 1.4; font-weight: 700; color: var(--sf-text); list-style: none; cursor: pointer; }
.sf-bs .sf-bs-faq-q::-webkit-details-marker { display: none; }
.sf-bs .sf-bs-faq-icon { flex-shrink: 0; color: var(--sf-muted); transition: rotate 0.2s ease; }
.sf-bs .sf-bs-faq-item[open] .sf-bs-faq-icon, .sf-bs .sf-bs-steps-group[open] > .sf-bs-steps-group-head .sf-bs-faq-icon { rotate: 180deg; }
.sf-bs .sf-bs-faq-a { padding: 0 1.125rem 1.125rem; font-size: var(--sf-size-16); line-height: 1.625; color: var(--sf-muted); }
.sf-bs .sf-bs-faq-a .sf-bs-para:last-child, .sf-bs .sf-bs-reminder-text .sf-bs-para:last-child { margin-bottom: 0; }
.sf-bs .sf-bs-reminder { display: grid; gap: 1.75rem; border-radius: 20px; border: 1px solid var(--sf-line); padding: 1.5rem 1.25rem; background: color-mix( in oklab, var(--sf-bs-accent-solid, var(--sf-bs-accent)) 6%, var(--sf-white) ); }
.sf-bs .sf-bs-tone .sf-bs-reminder { border: 0; padding: 0; background: transparent; }
.sf-bs .sf-bs-reminder-icon { display: grid; width: 3rem; height: 3rem; margin-bottom: 1rem; place-items: center; border-radius: 999px; color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); }
.sf-bs .sf-bs-reminder-text { margin-top: 0.75rem; font-size: var(--sf-size-16); line-height: 1.6; color: var(--sf-muted); }
.sf-bs .sf-bs-reminder-options { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.sf-bs .sf-bs-reminder-option { display: flex; flex-wrap: wrap; align-items: center; column-gap: 0.75rem; row-gap: 0.125rem; }
.sf-bs .sf-bs-reminder-btn { display: flex; min-height: 3.5rem; flex: 1 1 13rem; align-items: center; gap: 0.875rem; border-radius: 14px; border: 2px solid var(--sf-line); padding: 0.625rem 1rem 0.625rem 0.75rem; text-align: left; color: var(--sf-text); background: var(--sf-white); box-shadow: var(--sf-bs-shadow-sm); transition-property: border-color, box-shadow, transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 0.15s; }
.sf-bs .sf-bs-reminder-btn:active { transform: scale(0.99); }
.sf-bs .sf-bs-reminder-btn--saved { border-color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); }
.sf-bs .sf-bs-reminder-btn-icon { display: grid; width: 2.25rem; height: 2.25rem; flex-shrink: 0; place-items: center; border-radius: 10px; color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); }
.sf-bs .sf-bs-reminder-btn-text { display: grid; min-width: 0; gap: 0.0625rem; }
.sf-bs .sf-bs-reminder-btn-label { font-size: var(--sf-size-16); line-height: 1.25; font-weight: 800; color: var(--sf-text); }
.sf-bs .sf-bs-reminder-btn-date { font-size: var(--sf-size-13); line-height: 1.35; color: var(--sf-muted); }
.sf-bs .sf-bs-reminder-google { display: inline-flex; min-height: 2.75rem; align-items: center; padding-inline: 0.25rem; font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-text); text-decoration-line: underline; text-underline-offset: 4px; }
.sf-bs .sf-bs-reminder-privacy { margin-top: 1rem; display: flex; align-items: flex-start; gap: 0.5rem; font-size: var(--sf-size-13); line-height: 1.45; color: var(--sf-muted); }
.sf-bs .sf-bs-reminder-privacy-icon { flex-shrink: 0; margin-top: 0.0625rem; }
.sf-bs .sf-bs-reminder-status { font-size: var(--sf-size-14); line-height: 1.45; font-weight: 700; color: var(--sf-text); }
.sf-bs .sf-bs-reminder-status:not(:empty) { margin-top: 0.5rem; }
@media (hover: hover) {
.sf-bs .sf-bs-steps-option:not(.sf-bs-steps-option--on):hover { background: color-mix(in oklab, var(--sf-text) 10%, transparent); }
.sf-bs .sf-bs-step-check:hover, .sf-bs .sf-bs-faq-item:hover { border-color: var(--sf-bs-line-strong); }
.sf-bs .sf-bs-reminder-btn:hover { border-color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); box-shadow: var(--sf-bs-shadow-md); }
}
@media (prefers-reduced-motion: reduce) {
.sf-bs .sf-bs-steps-done { animation: none; }
.sf-bs .sf-bs-steps-bar-fill, .sf-bs .sf-bs-faq-icon { transition: none; }
}
@container sf-lp (min-width: 640px) {
.sf-bs .sf-bs-steps-facts { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.sf-bs .sf-bs-steps-fact:last-child:nth-child(odd) { grid-column: auto; }
.sf-bs .sf-bs-step { column-gap: 1.125rem; padding: 1.5rem; }
.sf-bs .sf-bs-step-body { grid-column: 2; }
.sf-bs .sf-bs-faq-q { padding: 1.125rem 1.5rem; }
.sf-bs .sf-bs-faq-a { padding: 0 1.5rem 1.375rem; }
.sf-bs .sf-bs-steps-group { padding-inline: 1.5rem; }
.sf-bs .sf-bs-reminder { padding: 2.5rem; }
}
@container sf-lp (min-width: 768px) {
.sf-bs .sf-bs-step-content--img { grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr); align-items: start; }
}
@container sf-lp (min-width: 1024px) {
.sf-bs .sf-bs-steps-layout--aside { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); align-items: start; gap: 2.5rem; }
.sf-bs .sf-bs-steps-aside { position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + 5.5rem); }
.sf-bs .sf-bs-steps-aside .sf-bs-steps-facts { grid-template-columns: minmax(0, 1fr); }
.sf-bs .sf-bs-steps-aside .sf-bs-steps-switch { flex-direction: column; }
.sf-bs .sf-bs-steps-aside .sf-bs-steps-option { text-align: left; }
.sf-bs .sf-bs-reminder { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 3rem; padding: 3rem; }
}
.sf-bs .sf-bs-ticket { --sf-bs-ticket-stub: 7.5rem; --sf-bs-ticket-notch: 11px; --sf-bs-ticket-pct-size: clamp(2.5rem, 7vw, 3.5rem); margin-top: 1.75rem; display: flex; width: 100%; max-width: 40rem; overflow: hidden; border-radius: 14px; color: var(--sf-white); background: var(--sf-ink); -webkit-mask: radial-gradient(circle var(--sf-bs-ticket-notch) at var(--sf-bs-ticket-stub) 0, transparent 97%, black) top / 100% 51% no-repeat, radial-gradient(circle var(--sf-bs-ticket-notch) at var(--sf-bs-ticket-stub) 100%, transparent 97%, black) bottom / 100% 51% no-repeat; mask: radial-gradient(circle var(--sf-bs-ticket-notch) at var(--sf-bs-ticket-stub) 0, transparent 97%, black) top / 100% 51% no-repeat, radial-gradient(circle var(--sf-bs-ticket-notch) at var(--sf-bs-ticket-stub) 100%, transparent 97%, black) bottom / 100% 51% no-repeat; }
.sf-bs .sf-bs-ticket--center { margin-inline: auto; }
.sf-bs .sf-bs-ticket-stub { position: relative; display: flex; flex: 0 0 var(--sf-bs-ticket-stub); align-items: center; justify-content: center; color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); }
.sf-bs .sf-bs-ticket-stub::after { content: ""; position: absolute; top: calc(var(--sf-bs-ticket-notch) + 6px); bottom: calc(var(--sf-bs-ticket-notch) + 6px); right: -1px; border-right: 2px dashed color-mix(in oklab, var(--sf-white) 55%, transparent); }
.sf-bs .sf-bs-ticket-pct { display: inline-flex; align-items: flex-start; font-family: var(--sf-display); font-size: var(--sf-bs-ticket-pct-size); font-weight: 800; line-height: 0.9; letter-spacing: -0.02em; }
.sf-bs .sf-bs-ticket-pct-sign { margin-left: 0.08em; font-size: 0.5em; line-height: 1.1; }
.sf-bs .sf-bs-ticket-body { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1.25rem 1.5rem 1.25rem 1.75rem; }
.sf-bs .sf-bs-ticket-kicker { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.18em; color: var(--sf-bs-accent-on-dark); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-ticket-title { font-family: var(--sf-display); font-size: var(--sf-size-20); font-weight: 700; line-height: 1.2; }
.sf-bs .sf-bs-ticket-chip { display: flex; max-width: 100%; flex-wrap: wrap; margin-top: 0.25rem; }
.sf-bs .sf-bs-ticket-note { font-size: var(--sf-size-13); line-height: 1.45; color: color-mix(in oklab, var(--sf-white) 78%, transparent); }
@container sf-lp (max-width: 479px) {
.sf-bs .sf-bs-ticket { --sf-bs-ticket-stub: 5.25rem; --sf-bs-ticket-notch: 9px; }
.sf-bs .sf-bs-ticket-body { padding: 1rem 1rem 1rem 1.25rem; }
.sf-bs .sf-bs-ticket .sf-bs-chip-code--lg { font-size: var(--sf-size-20); }
.sf-bs .sf-bs-ticket .sf-bs-chip-text { display: none; }
}
.sf-bs .sf-bs-hero-fx { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.sf-bs .sf-bs-range:focus-visible, .sf-bs .sf-bs-sole-step-btn:focus-visible, .sf-bs .sf-bs-dl-input:focus-visible, .sf-bs .sf-bs-dl-clear:focus-visible, .sf-bs .sf-bs-dl-cal:focus-visible, .sf-bs .sf-bs-svc-cta:focus-visible, .sf-bs .sf-bs-svc-source-link:focus-visible { outline: 3px solid var(--sf-bs-accent-solid, var(--sf-blue)); outline-offset: 2px; }
.sf-bs .sf-bs-svchead { max-width: 48rem; }
.sf-bs .sf-bs-svchead-text { margin-top: 0.75rem; font-size: var(--sf-size-16); line-height: 1.6; color: var(--sf-muted); }
.sf-bs .sf-bs-svchead-text .sf-bs-para:last-child { margin-bottom: 0; }
.sf-bs .sf-bs-bead-label { margin: 0; font-size: var(--sf-size-11); line-height: 1.3; font-weight: 700; letter-spacing: 0.14em; color: var(--sf-muted); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-range { --sf-bs-range-on: var(--sf-bs-accent-solid, var(--sf-bs-accent)); --sf-bs-range-off: color-mix(in oklab, var(--sf-text) 14%, transparent); display: block; width: 100%; height: 2.75rem; margin: 0; border-radius: 8px; appearance: none; background: transparent; cursor: pointer; touch-action: pan-y; }
.sf-bs .sf-bs-range::-webkit-slider-runnable-track { height: 0.5rem; border-radius: 999px; background: linear-gradient( to right, var(--sf-bs-range-on) 0 var(--sf-bs-range-fill, 0%), var(--sf-bs-range-off) var(--sf-bs-range-fill, 0%) 100% ); }
.sf-bs .sf-bs-range::-moz-range-track { height: 0.5rem; border-radius: 999px; background: var(--sf-bs-range-off); }
.sf-bs .sf-bs-range::-moz-range-progress { height: 0.5rem; border-radius: 999px; background: var(--sf-bs-range-on); }
.sf-bs .sf-bs-range::-webkit-slider-thumb { width: 1.75rem; height: 1.75rem; margin-top: -0.625rem; appearance: none; border-radius: 999px; border: 3px solid var(--sf-bs-range-on); background: var(--sf-white); box-shadow: var(--sf-bs-shadow-md); transition: scale 0.15s ease; }
.sf-bs .sf-bs-range::-moz-range-thumb { width: 1.375rem; height: 1.375rem; border-radius: 999px; border: 3px solid var(--sf-bs-range-on); background: var(--sf-white); box-shadow: var(--sf-bs-shadow-md); }
.sf-bs .sf-bs-range:active::-webkit-slider-thumb { scale: 1.12; }
.sf-bs .sf-bs-bead-control-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.sf-bs .sf-bs-bead-value { font-family: var(--sf-display); font-size: var(--sf-size-20); line-height: 1.1; font-weight: var(--sf-heading-weight); color: var(--sf-text); text-transform: var(--sf-heading-case); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-bs .sf-bs-bead-ends { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.375rem; font-size: var(--sf-size-12); line-height: 1.3; color: var(--sf-muted); }
.sf-bs .sf-bs-bead-seg, .sf-bs .sf-bs-bead-verdict, .sf-bs .sf-bs-bead-item, .sf-bs .sf-bs-sole-step, .sf-bs .sf-bs-sole-card { --sf-bs-severity-color: color-mix( in oklch, var(--sf-bs-caution) var(--sf-bs-severity, 0%), var(--sf-bs-good) ); }
.sf-bs .sf-bs-bead-stage { --sf-bs-bead-base: color-mix(in srgb, var(--sf-bs-ink) 80%, var(--sf-white)); --sf-bs-bead-wet: color-mix(in srgb, var(--sf-bs-bead-base) 34%, var(--sf-ink)); --sf-bs-bead-deep: color-mix(in srgb, var(--sf-bs-bead-base) 18%, var(--sf-ink)); margin-top: 1.75rem; display: grid; gap: 0.75rem; }
.sf-bs .sf-bs-bead-stage--leder { --sf-bs-bead-base: color-mix(in srgb, var(--sf-bs-leather) 86%, var(--sf-bs-ink)); }
.sf-bs .sf-bs-bead-panel { position: relative; margin: 0; overflow: hidden; border-radius: 18px; isolation: isolate; box-shadow: var(--sf-bs-shadow-sm); }
.sf-bs .sf-bs-bead-surface { position: relative; aspect-ratio: 16 / 11; background-color: var(--sf-bs-bead-base); background-image: radial-gradient( 120% 90% at 18% 0%, color-mix(in srgb, var(--sf-white) 18%, transparent), transparent 62% ), radial-gradient( 140% 120% at 100% 100%, color-mix(in srgb, var(--sf-ink) 30%, transparent), transparent 58% ), repeating-linear-gradient( 0deg, color-mix(in srgb, var(--sf-white) 8%, transparent) 0 1px, transparent 1px 18px ), repeating-linear-gradient( 90deg, color-mix(in srgb, var(--sf-white) 8%, transparent) 0 1px, transparent 1px 18px ), repeating-linear-gradient( 0deg, color-mix(in srgb, var(--sf-white) 7%, transparent) 0 1px, transparent 1px 3px ), repeating-linear-gradient( 90deg, color-mix(in srgb, var(--sf-ink) 14%, transparent) 0 1px, transparent 1px 3px ); }
.sf-bs .sf-bs-bead-stage--leder .sf-bs-bead-surface { background-image: radial-gradient( 120% 90% at 18% 0%, color-mix(in srgb, var(--sf-white) 20%, transparent), transparent 62% ), radial-gradient( 140% 120% at 100% 100%, color-mix(in srgb, var(--sf-ink) 32%, transparent), transparent 58% ), radial-gradient( circle at 50% 50%, color-mix(in srgb, var(--sf-ink) 20%, transparent) 0 0.8px, transparent 1.5px ), radial-gradient( circle at 50% 50%, color-mix(in srgb, var(--sf-white) 9%, transparent) 0 0.7px, transparent 1.4px ), radial-gradient( circle at 50% 50%, color-mix(in srgb, var(--sf-ink) 13%, transparent) 0 1.3px, transparent 2.2px ); background-size: auto, auto, 5px 5px, 7px 7px, 11px 9px; background-position: 0 0, 0 0, 0 0, 2px 3px, 4px 1px; }
.sf-bs .sf-bs-bead-canvas, .sf-bs .sf-bs-bead-still { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sf-bs .sf-bs-bead-stain-halo { fill: var(--sf-bs-bead-wet); fill-opacity: 0.22; stroke: var(--sf-bs-bead-deep); stroke-opacity: 0.25; stroke-width: 1; }
.sf-bs .sf-bs-bead-stain { fill: var(--sf-bs-bead-deep); fill-opacity: 0.3; }
.sf-bs .sf-bs-bead-shadow { fill: var(--sf-bs-bead-deep); fill-opacity: 0.24; }
.sf-bs .sf-bs-bead-body { fill: var(--sf-bs-bead-wet); fill-opacity: 0.38; stroke: var(--sf-white); stroke-opacity: 0.35; stroke-width: 0.8; }
.sf-bs .sf-bs-bead-gloss { fill: var(--sf-white); fill-opacity: 0.9; }
.sf-bs .sf-bs-bead-caption { position: absolute; top: 0.75rem; left: 0.75rem; display: grid; max-width: calc(100% - 1.5rem); border-radius: 12px; padding: 0.4375rem 0.75rem 0.5rem; color: var(--sf-text); background: color-mix(in oklab, var(--sf-white) 90%, transparent); box-shadow: var(--sf-bs-shadow-sm); backdrop-filter: blur(6px); }
.sf-bs .sf-bs-bead-caption-label { font-size: var(--sf-size-14); line-height: 1.25; font-weight: 800; }
.sf-bs .sf-bs-bead-caption-state { font-size: var(--sf-size-12); line-height: 1.3; color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-bs .sf-bs-bead-console { margin-top: 0.75rem; display: grid; gap: 1.25rem; border-radius: 18px; border: 1px solid var(--sf-line); padding: 1.25rem; color: var(--sf-text); background: var(--sf-white); }
.sf-bs .sf-bs-bead-control { min-width: 0; }
.sf-bs .sf-bs-bead-scale { display: flex; gap: 3px; }
.sf-bs .sf-bs-bead-seg { min-width: 0.375rem; height: 4px; flex: 1 1 0; border-radius: 999px; background: var(--sf-bs-severity-color); opacity: 0.32; transition: opacity 0.2s; }
.sf-bs .sf-bs-bead-seg--on { opacity: 1; }
.sf-bs .sf-bs-bead-verdict-wrap { min-width: 0; }
.sf-bs .sf-bs-bead-verdict { border-left: 4px solid var(--sf-bs-severity-color); padding: 0.125rem 0 0.125rem 1rem; }
.sf-bs .sf-bs-bead-verdict-title { margin: 0; font-family: var(--sf-display); font-size: var(--sf-bs-step-title); line-height: 1.05; font-weight: var(--sf-heading-weight); letter-spacing: -0.01em; color: var(--sf-text); text-transform: var(--sf-heading-case); }
.sf-bs .sf-bs-bead-verdict-text { margin: 0.375rem 0 0; font-size: var(--sf-size-15); line-height: 1.55; color: var(--sf-muted); }
.sf-bs .sf-bs-bead-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.875rem; }
.sf-bs .sf-bs-bead-item { display: grid; gap: 0.125rem; border-left: 4px solid var(--sf-bs-severity-color); padding-left: 1rem; }
.sf-bs .sf-bs-bead-item-range { font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.08em; color: var(--sf-muted); text-transform: var(--sf-label-case); font-variant-numeric: tabular-nums; }
.sf-bs .sf-bs-bead-item-title { font-size: var(--sf-size-17); line-height: 1.3; font-weight: 800; color: var(--sf-text); }
.sf-bs .sf-bs-bead-item-text { margin: 0; font-size: var(--sf-size-15); line-height: 1.55; color: var(--sf-muted); }
.sf-bs .sf-bs-bead-home { margin-top: 0.75rem; display: flex; align-items: flex-start; gap: 1rem; border-radius: 18px; border: 1px solid color-mix(in oklab, var(--sf-bs-accent-solid, var(--sf-bs-accent)) 24%, transparent); padding: 1.25rem; color: var(--sf-text); background: color-mix( in oklab, var(--sf-bs-accent-solid, var(--sf-bs-accent)) 7%, var(--sf-white) ); }
.sf-bs .sf-bs-bead-home-icon { display: grid; width: 2.5rem; height: 2.5rem; flex-shrink: 0; place-items: center; border-radius: 999px; color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); }
.sf-bs .sf-bs-bead-home-body { display: grid; min-width: 0; gap: 0.25rem; }
.sf-bs .sf-bs-bead-home-title { margin: 0; font-size: var(--sf-size-17); line-height: 1.3; font-weight: 800; color: var(--sf-text); }
.sf-bs .sf-bs-bead-home-text { margin: 0; font-size: var(--sf-size-15); line-height: 1.6; color: var(--sf-text); }
.sf-bs .sf-bs-sole-layout { margin-top: 1.75rem; display: grid; gap: 0.75rem; }
.sf-bs .sf-bs-sole-visual, .sf-bs .sf-bs-sole-stages, .sf-bs .sf-bs-sole-card { min-width: 0; border-radius: 18px; border: 1px solid var(--sf-line); padding: 1.25rem; color: var(--sf-text); background: var(--sf-white); }
.sf-bs .sf-bs-sole-svg, .sf-bs .sf-bs-sole-thumb { display: block; width: 100%; height: auto; }
.sf-bs .sf-bs-sole-upper { fill: color-mix(in srgb, var(--sf-bs-leather) 72%, var(--sf-white)); }
.sf-bs .sf-bs-sole-stitch { fill: none; stroke: color-mix(in srgb, var(--sf-bs-leather) 35%, var(--sf-white)); stroke-width: 1.5; stroke-dasharray: 5 4; }
.sf-bs .sf-bs-sole-rand, .sf-bs .sf-bs-sole-key--rand { fill: color-mix(in srgb, var(--sf-ink) 58%, var(--sf-white)); background: color-mix(in srgb, var(--sf-ink) 58%, var(--sf-white)); }
.sf-bs .sf-bs-sole-mid, .sf-bs .sf-bs-sole-key--mid { fill: color-mix(in srgb, var(--sf-white) 84%, var(--sf-bs-ink)); background: color-mix(in srgb, var(--sf-white) 84%, var(--sf-bs-ink)); }
.sf-bs .sf-bs-sole-out, .sf-bs .sf-bs-sole-lug, .sf-bs .sf-bs-sole-key--lug { fill: color-mix(in srgb, var(--sf-ink) 90%, var(--sf-bs-ink)); background: color-mix(in srgb, var(--sf-ink) 90%, var(--sf-bs-ink)); }
.sf-bs .sf-bs-sole-seam { fill: none; stroke: color-mix(in srgb, var(--sf-ink) 35%, transparent); stroke-width: 1; }
.sf-bs .sf-bs-sole-outline { fill: none; stroke: var(--sf-ink); stroke-width: 1.5; stroke-linejoin: round; }
.sf-bs .sf-bs-sole-worn, .sf-bs .sf-bs-sole-key--worn { fill: color-mix(in srgb, var(--sf-bs-caution) 26%, var(--sf-white)); stroke: var(--sf-bs-caution); stroke-width: 1.5; background: color-mix(in srgb, var(--sf-bs-caution) 26%, var(--sf-white)); box-shadow: inset 0 0 0 1.5px var(--sf-bs-caution); }
.sf-bs .sf-bs-sole-worn--fill { stroke: none; }
.sf-bs .sf-bs-sole-worn--edge { fill: none; }
.sf-bs .sf-bs-sole-scuff { fill: none; stroke: var(--sf-bs-caution); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 5 6; }
.sf-bs .sf-bs-sole-ground { stroke: var(--sf-line); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 2 6; }
.sf-bs .sf-bs-sole-shadow { fill: color-mix(in srgb, var(--sf-ink) 7%, transparent); }
.sf-bs .sf-bs-sole-zoom { position: relative; margin: 0.75rem 0 0; overflow: hidden; border-radius: 12px; border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-bs .sf-bs-sole-zoom-label { position: absolute; top: 0.375rem; left: 0.375rem; border-radius: 6px; padding: 0.125rem 0.375rem; background: color-mix(in oklab, var(--sf-white) 88%, transparent); font-size: var(--sf-size-11); line-height: 1.3; font-weight: 700; letter-spacing: 0.1em; color: var(--sf-muted); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-sole-legend { margin: 0.5rem 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; font-size: var(--sf-size-12); line-height: 1.3; color: var(--sf-muted); }
.sf-bs .sf-bs-sole-legend-item { display: inline-flex; align-items: center; gap: 0.375rem; }
.sf-bs .sf-bs-sole-key { width: 0.75rem; height: 0.75rem; flex-shrink: 0; border-radius: 3px; }
.sf-bs .sf-bs-sole-control { margin-top: 1rem; border-top: 1px solid var(--sf-line); padding-top: 1rem; }
.sf-bs .sf-bs-sole-steps { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.375rem; }
.sf-bs .sf-bs-sole-step { border-radius: 14px; transition: background-color 0.2s; }
.sf-bs .sf-bs-sole-step--on { background: color-mix(in oklab, var(--sf-bs-severity-color) 9%, var(--sf-white)); }
.sf-bs .sf-bs-sole-step-btn { display: flex; width: 100%; min-height: 2.75rem; align-items: center; gap: 0.75rem; border-radius: 14px; padding: 0.5rem 0.75rem; font-size: var(--sf-size-16); line-height: 1.3; font-weight: 700; text-align: left; color: var(--sf-text); background: transparent; }
.sf-bs .sf-bs-sole-step-dot { width: 0.875rem; height: 0.875rem; flex-shrink: 0; border-radius: 999px; border: 2px solid var(--sf-bs-severity-color); background: var(--sf-white); transition: background-color 0.2s; }
.sf-bs .sf-bs-sole-step--past .sf-bs-sole-step-dot, .sf-bs .sf-bs-sole-step--on .sf-bs-sole-step-dot { background: var(--sf-bs-severity-color); }
.sf-bs .sf-bs-sole-step--on .sf-bs-sole-step-dot { box-shadow: 0 0 0 4px color-mix(in oklab, var(--sf-bs-severity-color) 22%, transparent); }
.sf-bs .sf-bs-sole-step--on .sf-bs-sole-step-label { font-weight: 800; }
.sf-bs .sf-bs-sole-step-text { padding: 0 0.875rem 0.875rem 2.375rem; }
.sf-bs .sf-bs-sole-card-text { margin: 0; font-size: var(--sf-size-15); line-height: 1.55; color: var(--sf-muted); }
.sf-bs .sf-bs-sole-list { margin: 1.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.75rem; }
.sf-bs .sf-bs-sole-card { display: grid; gap: 0.75rem; border-top: 4px solid var(--sf-bs-severity-color); }
.sf-bs .sf-bs-sole-card-body { display: grid; gap: 0.25rem; }
.sf-bs .sf-bs-sole-card-label { margin: 0; font-size: var(--sf-size-17); line-height: 1.3; font-weight: 800; color: var(--sf-text); }
.sf-bs .sf-bs-dl-card { margin-top: 1.75rem; border-radius: 20px; border: 1px solid var(--sf-line); padding: 1.25rem; color: var(--sf-text); background: var(--sf-white); }
.sf-bs .sf-bs-dl-top { display: grid; gap: 1.25rem; border-bottom: 1px solid var(--sf-line); padding-bottom: 1.5rem; }
.sf-bs .sf-bs-dl-field { display: grid; gap: 0.5rem; }
.sf-bs .sf-bs-dl-inputrow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; }
.sf-bs .sf-bs-dl-input { min-height: 3rem; min-width: min(100%, 12.5rem); border-radius: 12px; border: 2px solid var(--sf-line); padding: 0.5rem 0.875rem; font: inherit; font-size: var(--sf-size-17); font-weight: 700; color: var(--sf-text); background: var(--sf-white); font-variant-numeric: tabular-nums; color-scheme: light; }
.sf-bs .sf-bs-dl-input:focus-visible { border-color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); }
.sf-bs .sf-bs-dl-input[aria-invalid="true"] { border-color: var(--sf-bs-caution); }
.sf-bs .sf-bs-dl-clear { display: inline-flex; min-height: 2.75rem; align-items: center; padding-inline: 0.25rem; font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-muted); background: transparent; text-decoration-line: underline; text-underline-offset: 4px; }
.sf-bs .sf-bs-dl-hint { margin: 0; font-size: var(--sf-size-14); line-height: 1.45; color: var(--sf-muted); }
.sf-bs .sf-bs-dl-hint--error { font-weight: 700; color: var(--sf-bs-caution); }
.sf-bs .sf-bs-dl-next { border-radius: 16px; padding: 1rem 1.25rem 1.125rem; background: color-mix( in oklab, var(--sf-bs-accent-solid, var(--sf-bs-accent)) 8%, var(--sf-white) ); }
.sf-bs .sf-bs-dl-next-count { margin: 0.25rem 0 0; font-family: var(--sf-display); font-size: var(--sf-bs-dl-count); line-height: 1; font-weight: var(--sf-heading-weight); letter-spacing: -0.01em; color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); text-transform: var(--sf-heading-case); font-variant-numeric: tabular-nums; }
.sf-bs .sf-bs-dl-next-what { margin: 0.5rem 0 0; font-size: var(--sf-size-15); line-height: 1.45; font-weight: 600; color: var(--sf-text); }
.sf-bs .sf-bs-dl-line { margin: 1.5rem 0 0; padding: 0; list-style: none; }
.sf-bs .sf-bs-dl-row { position: relative; display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); column-gap: 0.875rem; padding-bottom: 1.25rem; }
.sf-bs .sf-bs-dl-row:last-child { padding-bottom: 0; }
.sf-bs .sf-bs-dl-row::before { content: ""; position: absolute; top: 1.25rem; bottom: -0.25rem; left: calc(0.75rem - 1px); border-left: 2px dashed var(--sf-line); }
.sf-bs .sf-bs-dl-row:last-child::before { display: none; }
.sf-bs .sf-bs-dl-row--elapsed::before { border-left-style: solid; border-color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); }
.sf-bs .sf-bs-dl-dot { position: relative; z-index: 1; width: 1.5rem; height: 1.5rem; margin-top: 0.125rem; border-radius: 999px; border: 2px solid var(--sf-bs-line-strong); background: var(--sf-white); }
.sf-bs .sf-bs-dl-row--start .sf-bs-dl-dot, .sf-bs .sf-bs-dl-row--today .sf-bs-dl-dot { width: 0.875rem; height: 0.875rem; margin: 0.25rem auto 0; }
.sf-bs .sf-bs-dl-row--start .sf-bs-dl-dot { border: 0; background: var(--sf-bs-accent-solid, var(--sf-bs-accent)); }
.sf-bs .sf-bs-dl-row--today .sf-bs-dl-dot { border: 3px solid var(--sf-bs-accent-solid, var(--sf-bs-accent)); box-shadow: 0 0 0 4px color-mix(in oklab, var(--sf-bs-accent-solid, var(--sf-bs-accent)) 20%, transparent); }
.sf-bs .sf-bs-dl-row--next .sf-bs-dl-dot { border-color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); background: var(--sf-bs-accent-solid, var(--sf-bs-accent)); box-shadow: 0 0 0 5px color-mix(in oklab, var(--sf-bs-accent-solid, var(--sf-bs-accent)) 16%, transparent); }
.sf-bs .sf-bs-dl-row--passed .sf-bs-dl-dot { border-color: var(--sf-line); background: color-mix(in oklab, var(--sf-text) 10%, var(--sf-white)); }
.sf-bs .sf-bs-dl-row-body { display: grid; min-width: 0; align-content: start; gap: 0.25rem; }
.sf-bs .sf-bs-dl-row--next .sf-bs-dl-row-body { margin-top: -0.5rem; border-radius: 14px; border: 1px solid color-mix(in oklab, var(--sf-bs-accent-solid, var(--sf-bs-accent)) 32%, transparent); padding: 0.75rem 1rem 1rem; background: color-mix( in oklab, var(--sf-bs-accent-solid, var(--sf-bs-accent)) 5%, var(--sf-white) ); }
.sf-bs .sf-bs-dl-row-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 0.75rem; }
.sf-bs .sf-bs-dl-when { margin: 0; font-size: var(--sf-size-14); line-height: 1.45; font-weight: 700; color: var(--sf-text); font-variant-numeric: tabular-nums; }
.sf-bs .sf-bs-dl-after { font-weight: 400; color: var(--sf-muted); }
.sf-bs .sf-bs-dl-mark { margin-right: 0.5rem; font-size: var(--sf-size-11); font-weight: 800; letter-spacing: 0.14em; color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-dl-badge { border-radius: 999px; padding: 0.1875rem 0.625rem; font-size: var(--sf-size-12); line-height: 1.3; font-weight: 800; white-space: nowrap; color: var(--sf-text); background: color-mix(in oklab, var(--sf-text) 7%, transparent); font-variant-numeric: tabular-nums; }
.sf-bs .sf-bs-dl-row--next .sf-bs-dl-badge { color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); }
.sf-bs .sf-bs-dl-title { margin: 0.125rem 0 0; font-family: var(--sf-display); font-size: var(--sf-bs-step-title); line-height: 1.05; font-weight: var(--sf-heading-weight); letter-spacing: -0.01em; color: var(--sf-text); text-transform: var(--sf-heading-case); }
.sf-bs .sf-bs-dl-text { margin: 0; font-size: var(--sf-size-15); line-height: 1.55; color: var(--sf-muted); }
.sf-bs .sf-bs-dl-row--passed .sf-bs-dl-when, .sf-bs .sf-bs-dl-row--passed .sf-bs-dl-title, .sf-bs .sf-bs-dl-row--passed .sf-bs-dl-badge { color: var(--sf-muted); }
.sf-bs .sf-bs-dl-row--passed .sf-bs-dl-title { text-decoration-line: line-through; text-decoration-thickness: 2px; }
.sf-bs .sf-bs-dl-actions { margin-top: 0.5rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1rem; }
.sf-bs .sf-bs-dl-cal { display: inline-flex; min-height: 2.75rem; align-items: center; gap: 0.5rem; border-radius: 10px; border: 2px solid var(--sf-line); padding: 0.5rem 0.875rem; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-text); background: var(--sf-white); transition-property: border-color, box-shadow; transition-duration: 0.15s; }
.sf-bs .sf-bs-dl-row--next .sf-bs-dl-cal, .sf-bs .sf-bs-dl-cal--saved { border-color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); }
.sf-bs .sf-bs-dl-rules { display: grid; gap: 0.75rem; padding-top: 1.5rem; }
.sf-bs .sf-bs-dl-card > .sf-bs-dl-rules:first-child { padding-top: 0; }
.sf-bs .sf-bs-dl-rule-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.sf-bs .sf-bs-dl-rule { display: grid; gap: 0.25rem 1rem; border-radius: 12px; padding: 0.875rem 1rem; background: color-mix(in oklab, var(--sf-text) 5%, transparent); }
.sf-bs .sf-bs-dl-rule-when { font-size: var(--sf-size-13); line-height: 1.4; font-weight: 800; color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); font-variant-numeric: tabular-nums; }
.sf-bs .sf-bs-dl-rule-body { display: grid; min-width: 0; gap: 0.125rem; }
.sf-bs .sf-bs-dl-rule-label { font-size: var(--sf-size-16); line-height: 1.35; font-weight: 800; color: var(--sf-text); }
.sf-bs .sf-bs-dl-rule-text { margin: 0; font-size: var(--sf-size-15); line-height: 1.55; color: var(--sf-muted); }
.sf-bs .sf-bs-dl-disclaimer { margin-top: 0.875rem; font-size: var(--sf-size-13); line-height: 1.5; color: var(--sf-muted); }
.sf-bs .sf-bs-svc { display: grid; overflow: hidden; border-radius: 20px; border: 1px solid var(--sf-line); color: var(--sf-text); background: var(--sf-white); transition-property: border-color, box-shadow; transition-duration: 0.25s; }
.sf-bs .sf-bs-svc--inline { margin-top: 0.75rem; }
.sf-bs .sf-bs-svc--on { border-color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); box-shadow: 0 0 0 3px color-mix(in oklab, var(--sf-bs-accent-solid, var(--sf-bs-accent)) 18%, transparent), var(--sf-bs-shadow-md); }
.sf-bs .sf-bs-sections > .sf-bs-section:has(> .sf-bs-svc):has(+ .sf-bs-section > .sf-bs-svc) { margin-block-end: 1.25rem; }
.sf-bs .sf-bs-svc-media { position: relative; margin: 0; background: var(--sf-surface); }
.sf-bs .sf-bs-svc-img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.sf-bs .sf-bs-svc-body { display: grid; min-width: 0; align-content: start; gap: 1.25rem; padding: 1.5rem 1.25rem; }
.sf-bs .sf-bs-svc-main { display: grid; min-width: 0; align-content: start; gap: 1rem; }
.sf-bs .sf-bs-svc-badge { justify-self: start; display: inline-flex; align-items: center; gap: 0.375rem; margin: 0; border-radius: 999px; padding: 0.3125rem 0.75rem; font-size: var(--sf-size-12); line-height: 1.2; font-weight: 800; letter-spacing: 0.08em; color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-svc-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.sf-bs .sf-bs-svc-logo { display: inline-flex; height: 3rem; align-items: center; border-radius: 10px; border: 1px solid var(--sf-line); padding: 0.5rem 0.875rem; background: var(--sf-white); }
.sf-bs .sf-bs-svc-logo--dark { border-color: var(--sf-ink); background: var(--sf-ink); }
.sf-bs .sf-bs-svc-logo-img { display: block; width: auto; max-width: 9rem; height: 100%; object-fit: contain; }
.sf-bs .sf-bs-svc-eyebrow { margin: 0; }
.sf-bs .sf-bs-svc-title { margin: 0; }
.sf-bs .sf-bs-svc-title3 { margin: 0; font-family: var(--sf-display); font-size: var(--sf-bs-step-title); line-height: 1.05; font-weight: var(--sf-heading-weight); letter-spacing: -0.01em; color: var(--sf-text); text-transform: var(--sf-heading-case); }
.sf-bs .sf-bs-svc-text { display: grid; gap: 0.75rem; max-width: 44rem; font-size: var(--sf-size-16); line-height: 1.6; color: var(--sf-muted); }
.sf-bs .sf-bs-svc-para { margin: 0; }
.sf-bs .sf-bs-svc-grid { display: grid; gap: 1.25rem; }
.sf-bs .sf-bs-svc-facts { margin: 0; border-top: 1px solid var(--sf-line); }
.sf-bs .sf-bs-svc-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--sf-line); padding-block: 0.75rem; }
.sf-bs .sf-bs-svc-fact-label { font-size: var(--sf-size-14); line-height: 1.4; color: var(--sf-muted); }
.sf-bs .sf-bs-svc-fact-value { margin: 0; font-size: var(--sf-size-16); line-height: 1.4; font-weight: 800; text-align: right; color: var(--sf-text); font-variant-numeric: tabular-nums; }
.sf-bs .sf-bs-svc-quote { margin: 0; border-left: 4px solid var(--sf-bs-accent-solid, var(--sf-bs-accent)); border-radius: 0 14px 14px 0; padding: 1rem 1.25rem; background: color-mix( in oklab, var(--sf-bs-accent-solid, var(--sf-bs-accent)) 6%, var(--sf-white) ); }
.sf-bs .sf-bs-svc-quote-text { margin: 0; font-size: var(--sf-size-18); line-height: 1.5; font-weight: 600; color: var(--sf-text); }
.sf-bs .sf-bs-svc-quote-text p { margin: 0; }
.sf-bs .sf-bs-svc-quote-by { margin-top: 0.5rem; font-size: var(--sf-size-12); line-height: 1.3; font-weight: 700; letter-spacing: 0.1em; color: var(--sf-muted); text-transform: var(--sf-label-case); }
.sf-bs .sf-bs-svc-note { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; font-size: var(--sf-size-14); line-height: 1.5; color: var(--sf-muted); }
.sf-bs .sf-bs-svc-note-icon { flex-shrink: 0; margin-top: 0.125rem; }
.sf-bs .sf-bs-svc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; border-top: 1px solid var(--sf-line); padding-top: 1rem; }
.sf-bs .sf-bs-svc-source { margin: 0; font-size: var(--sf-size-13); line-height: 1.45; color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-bs .sf-bs-svc-source-link { font-weight: 700; color: var(--sf-text); text-decoration-line: underline; text-underline-offset: 3px; }
.sf-bs .sf-bs-svc-cta { display: inline-flex; min-height: 2.75rem; align-items: center; gap: 0.5rem; border-radius: 4px; padding: 0.625rem 1.25rem; font-size: var(--sf-size-15); line-height: 1.3; font-weight: 700; color: var(--sf-bs-accent-text); background: var(--sf-bs-accent); transition-property: box-shadow, translate; transition-duration: 0.15s; }
@media (hover: hover) {
.sf-bs .sf-bs-sole-step-btn:hover { background: color-mix(in oklab, var(--sf-text) 6%, transparent); }
.sf-bs .sf-bs-sole-step--on .sf-bs-sole-step-btn:hover { background: transparent; }
.sf-bs .sf-bs-dl-cal:hover { border-color: var(--sf-bs-accent-solid, var(--sf-bs-accent)); box-shadow: var(--sf-bs-shadow-sm); }
.sf-bs .sf-bs-svc-cta:hover { box-shadow: var(--sf-bs-shadow-md); translate: 0 -1px; }
}
@media (prefers-reduced-motion: reduce) {
.sf-bs .sf-bs-bead-seg, .sf-bs .sf-bs-sole-step, .sf-bs .sf-bs-sole-step-dot, .sf-bs .sf-bs-svc, .sf-bs .sf-bs-svc-cta, .sf-bs .sf-bs-dl-cal { transition: none; }
.sf-bs .sf-bs-range::-webkit-slider-thumb { transition: none; }
}
@container sf-lp (min-width: 640px) {
.sf-bs .sf-bs-bead-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sf-bs .sf-bs-bead-surface { aspect-ratio: 4 / 3; }
.sf-bs .sf-bs-bead-caption { top: 1rem; left: 1rem; }
.sf-bs .sf-bs-bead-console, .sf-bs .sf-bs-bead-home { padding: 1.5rem 1.75rem; }
.sf-bs .sf-bs-dl-card { padding: 1.75rem 2rem; }
.sf-bs .sf-bs-dl-rule { grid-template-columns: 11.5rem minmax(0, 1fr); align-items: baseline; }
.sf-bs .sf-bs-sole-list { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
}
@container sf-lp (min-width: 640px) {
.sf-bs .sf-bs-sole-zoom { display: none; }
}
@container sf-lp (min-width: 768px) {
.sf-bs .sf-bs-bead-console:not(.sf-bs-bead-console--list) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 2.5rem; }
.sf-bs .sf-bs-dl-top--split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: end; gap: 2rem; }
.sf-bs .sf-bs-svc-body { gap: 1.25rem; padding: 2.25rem 2.5rem; }
.sf-bs .sf-bs-svc--inline .sf-bs-svc-body { padding: 1.75rem 2rem; }
.sf-bs .sf-bs-svc--media { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.sf-bs .sf-bs-svc--media .sf-bs-svc-img { position: absolute; inset: 0; aspect-ratio: auto; }
.sf-bs .sf-bs-svc--split .sf-bs-svc-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 3rem; }
.sf-bs .sf-bs-svc--split .sf-bs-svc-note, .sf-bs .sf-bs-svc--split .sf-bs-svc-foot { grid-column: 1 / -1; }
.sf-bs .sf-bs-sole-visual, .sf-bs .sf-bs-sole-stages { padding: 1.5rem 1.75rem; }
}
@container sf-lp (min-width: 1024px) {
.sf-bs .sf-bs-sole-layout { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: stretch; }
}
.sf-bs.sf-bs-salepage.sf-bs-buehne { background-color: var(--sf-bs-buehne); background-image: radial-gradient(55% 45% at 0% 25%, color-mix(in srgb, var(--sf-bs-buehne-akzent) 55%, transparent), transparent 70%), radial-gradient(45% 40% at 100% 70%, color-mix(in srgb, var(--sf-bs-buehne-akzent) 45%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--sf-bs-buehne) 70%, var(--sf-bs-farbe-schwarz)), var(--sf-bs-buehne) 60%); background-attachment: fixed; }
.sf-bs.sf-bs-salepage.sf-bs-buehne--streifen { background-image: repeating-linear-gradient(115deg, transparent 0 110px, var(--sf-bs-farbe-weiss-5) 110px 180px), radial-gradient(55% 45% at 0% 25%, color-mix(in srgb, var(--sf-bs-buehne-akzent) 55%, transparent), transparent 70%), radial-gradient(45% 40% at 100% 70%, color-mix(in srgb, var(--sf-bs-buehne-akzent) 45%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--sf-bs-buehne) 70%, var(--sf-bs-farbe-schwarz)), var(--sf-bs-buehne) 60%); }
.sf-bs.sf-bs-buehne .sf-bs-sale-sections { background-color: var(--sf-page); }
@container sf-lp (min-width: 768px) {
.sf-bs.sf-bs-buehne .sf-bs-sale-hero { border-radius: 16px; box-shadow: 0 24px 60px var(--sf-bs-farbe-schwarz-35); }
.sf-bs.sf-bs-buehne .sf-bs-sale-sections { margin-top: 1.5rem; border-radius: 16px; box-shadow: 0 24px 60px var(--sf-bs-farbe-schwarz-25); }
}
@font-face { font-family: var(--sf-font-galada); src: url("/web/ai-magazine/407bf05a491a3e1a7a6a58b65337dde9cb1d3ad7.ttf") format("truetype"); font-display: swap; }
.sf-bs.sf-bs-salepage.sf-bs-laut { --sf-page: var(--sf-laut-grund); background-color: var(--sf-laut-grund); background-image: repeating-linear-gradient(115deg, transparent 0 120px, color-mix(in srgb, var(--sf-laut-farbe) 14%, transparent) 120px 200px), radial-gradient(60% 50% at 0% 30%, color-mix(in srgb, var(--sf-laut-farbe) 45%, transparent), transparent 70%), radial-gradient(50% 45% at 100% 80%, color-mix(in srgb, var(--sf-laut-akzent) 18%, transparent), transparent 70%), linear-gradient(180deg, color-mix(in srgb, var(--sf-laut-grund) 70%, var(--sf-bs-farbe-schwarz)), var(--sf-laut-grund)); background-size: 640px 640px, auto, auto, auto; background-attachment: fixed; animation: sf-laut-wandern 18s linear infinite; color: var(--sf-bs-farbe-weiss); overflow-x: clip; }
@keyframes sf-laut-wandern { to { background-position: 640px 0, 0 0, 0 0, 0 0; } }
.sf-bs-laut .sf-bs-laut-band { overflow: hidden; white-space: nowrap; font-family: var(--sf-display); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.sf-bs-laut .sf-bs-laut-lauf { display: inline-block; animation: sf-laut-lauf 30s linear infinite; }
.sf-bs-laut .sf-bs-laut-band i { font-style: normal; margin: 0 1.25rem; }
.sf-bs-laut .sf-bs-laut-band--oben { background: var(--sf-laut-akzent); color: var(--sf-laut-grund); font-size: var(--sf-bs-schrift-1-15rem); padding: 0.7rem 0; }
.sf-bs-laut .sf-bs-laut-band--oben i { color: var(--sf-laut-farbe); }
.sf-bs-laut .sf-bs-laut-band--unten { position: relative; z-index: 3; margin-top: -0.9rem; background: var(--sf-laut-farbe); color: var(--sf-bs-farbe-weiss); font-size: var(--sf-bs-schrift-1-05rem); padding: 0.6rem 0; transform: rotate(-1.2deg); box-shadow: 0 10px 30px var(--sf-bs-farbe-schwarz-35); }
.sf-bs-laut .sf-bs-laut-band--unten i { color: var(--sf-laut-akzent); }
.sf-bs-laut .sf-bs-laut-band--unten .sf-bs-laut-lauf { animation-direction: reverse; animation-duration: 36s; }
@keyframes sf-laut-lauf { to { transform: translateX(-50%); } }
.sf-bs.sf-bs-laut .sf-bs-sale-hero { min-height: 560px; border-radius: 22px; overflow: hidden; background: radial-gradient(70% 90% at 75% 60%, color-mix(in srgb, var(--sf-laut-farbe) 80%, var(--sf-bs-farbe-weiss) 12%), transparent 70%), linear-gradient(120deg, var(--sf-laut-dunkel), var(--sf-laut-farbe) 55%, var(--sf-laut-dunkel)); box-shadow: 0 40px 90px var(--sf-bs-farbe-schwarz-50); align-items: center; }
.sf-bs-laut .sf-bs-laut-riesig { position: absolute; right: -2rem; top: -4rem; font-family: var(--sf-display); font-weight: 900; font-size: clamp(14rem, 34vw, 32rem); line-height: 1; letter-spacing: -0.04em; color: transparent; -webkit-text-stroke: 3px var(--sf-bs-farbe-weiss-14); pointer-events: none; animation: sf-laut-schweben 7s ease-in-out infinite; }
@keyframes sf-laut-schweben { 50% { transform: translate(-18px, 14px) rotate(-2deg); } }
.sf-bs-laut .sf-bs-sale-copy-inner { gap: 1.25rem; }
.sf-bs-laut .sf-bs-sale-eyebrow { background: var(--sf-laut-akzent); color: var(--sf-laut-grund); border-radius: 6px; font-weight: 800; animation: sf-laut-blink 1.6s steps(2) infinite; }
@keyframes sf-laut-blink { 50% { background: var(--sf-bs-farbe-weiss); } }
.sf-bs.sf-bs-laut .sf-bs-sale-title { color: var(--sf-bs-farbe-weiss); font-size: clamp(2.6rem, 5.4vw, 4.75rem); line-height: 0.92; text-shadow: 0 6px 24px var(--sf-bs-farbe-schwarz-25); }
.sf-bs-laut .sf-bs-sale-script { display: block; margin-top: 0.4rem; font-family: var(--sf-font-galada), var(--sf-display); font-weight: 400; font-size: clamp(2.4rem, 4.3vw, 4.2rem); line-height: 1.05; white-space: nowrap; color: var(--sf-laut-akzent); transform: rotate(-3deg); transform-origin: left; }
.sf-bs.sf-bs-laut .sf-bs-sale-sub { color: var(--sf-bs-farbe-weiss); font-weight: 600; }
.sf-bs.sf-bs-laut .sf-bs-sale-cta { background: var(--sf-laut-akzent); color: var(--sf-laut-grund); border-radius: 12px; font-size: var(--sf-size-18); font-weight: 800; animation: sf-laut-puls 2s ease-in-out infinite; }
@keyframes sf-laut-puls { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sf-laut-akzent) 70%, transparent); } 60% { box-shadow: 0 0 0 18px transparent; } }
.sf-bs.sf-bs-laut .sf-bs-sale-cta2 { border-radius: 12px; }
.sf-bs-laut .sf-bs-laut-uhr .sf-bs-cd { display: flex; gap: 0.6rem; }
.sf-bs-laut .sf-bs-laut-uhr .sf-bs-cd-cell { display: flex; min-width: 4.4rem; flex-direction: column; align-items: center; border-radius: 10px; background: var(--sf-bs-farbe-weiss); padding: 0.45rem 0.6rem 0.35rem; box-shadow: 0 8px 0 var(--sf-bs-farbe-schwarz-20); }
.sf-bs-laut .sf-bs-laut-uhr .sf-bs-cd-value { font-family: var(--sf-display); font-size: var(--sf-bs-schrift-2-4rem); font-weight: 900; line-height: 1; color: var(--sf-laut-grund); font-variant-numeric: tabular-nums; }
.sf-bs-laut .sf-bs-laut-uhr .sf-bs-cd-label { font-size: var(--sf-bs-schrift-0-7rem); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-laut-farbe); }
.sf-bs-laut .sf-bs-laut-uhr .sf-bs-cd-cell:last-child .sf-bs-cd-value { animation: sf-laut-tick 1s ease-out infinite; }
@keyframes sf-laut-tick { 0% { transform: scale(1.18); color: var(--sf-laut-farbe); } 40% { transform: scale(1); } }
.sf-bs-laut .sf-bs-laut-stern { position: absolute; right: 1.25rem; top: 1rem; z-index: 4; display: grid; width: 10.5rem; height: 10.5rem; place-items: center; animation: sf-laut-wumm 2.4s ease-in-out infinite; }
.sf-bs-laut .sf-bs-laut-stern svg { position: absolute; inset: 0; fill: var(--sf-laut-akzent); filter: drop-shadow(0 10px 20px var(--sf-bs-farbe-schwarz-35)); animation: sf-laut-drehen 14s linear infinite; }
.sf-bs-laut .sf-bs-laut-stern div { position: relative; text-align: center; font-family: var(--sf-display); font-weight: 900; line-height: 0.9; color: var(--sf-laut-grund); transform: rotate(-8deg); }
.sf-bs-laut .sf-bs-laut-stern small { display: block; font-size: var(--sf-bs-schrift-1-1rem); }
.sf-bs-laut .sf-bs-laut-stern span { font-size: var(--sf-bs-schrift-2-9rem); letter-spacing: -0.03em; white-space: nowrap; }
.sf-bs-laut .sf-bs-laut-stern em { display: block; font-style: normal; font-size: var(--sf-bs-schrift-1-15rem); }
@keyframes sf-laut-drehen { to { transform: rotate(360deg); } }
@keyframes sf-laut-wumm { 50% { transform: scale(1.07); } }
@container sf-lp (min-width: 768px) {
.sf-bs-laut .sf-bs-sale-hero--side .sf-bs-sale-copy-inner, .sf-bs-laut .sf-bs-sale-hero:has(.sf-bs-shelf) .sf-bs-sale-copy-inner { max-width: 46%; }
}
.sf-bs .sf-bs-shelf.sf-bs-shelf--gruppe { display: block; position: absolute; right: 0; bottom: 0; top: 0; width: 54%; height: auto; z-index: 2; }
.sf-bs .sf-bs-shelf--gruppe::before { left: 2%; right: 4%; bottom: 9%; height: 16px; border-radius: 8px; background: linear-gradient(180deg, var(--sf-bs-farbe-weiss), var(--sf-bs-farbe-e9e3d6)); box-shadow: 0 18px 30px var(--sf-bs-farbe-schwarz-35); }
.sf-bs .sf-bs-shelf--gruppe .sf-bs-shelf-item { position: absolute; left: var(--sf-bs-x); bottom: var(--sf-bs-y); z-index: var(--sf-bs-z); display: block; width: auto; height: var(--sf-bs-h); flex: none; }
.sf-bs .sf-bs-shelf--gruppe .sf-bs-shelf-fig { height: 100%; margin: 0; padding: 0; animation: sf-laut-rein 0.8s cubic-bezier(0.2, 1.5, 0.4, 1) both; animation-delay: calc(0.3s + var(--sf-bs-i) * 0.13s); }
.sf-bs .sf-bs-shelf--gruppe .sf-bs-shelf-fig img { height: 100%; width: auto; max-width: none; max-height: none; filter: drop-shadow(0 14px 14px var(--sf-bs-farbe-schwarz-35)); }
@keyframes sf-laut-rein { 0% { transform: translateY(-120px) scale(0.6) rotate(-10deg); } 100% { transform: none; } }
.sf-bs.sf-bs-laut .sf-bs-sale-sections { background: transparent; }
.sf-bs-laut .sf-bs-sale-sections .sf-bs-section-head, .sf-bs-laut .sf-bs-sale-sections h2 { color: var(--sf-bs-farbe-weiss); }
.sf-bs-laut .sf-bs-sale-sections .sf-bs-eyebrow, .sf-bs-laut .sf-bs-sale-sections .sf-bs-kicker { color: var(--sf-laut-akzent); }
.sf-bs-laut .sf-bs-sale-sections p { color: var(--sf-bs-farbe-weiss-86); }
.sf-bs-laut .sf-shop-card { background: var(--sf-bs-farbe-weiss); border-radius: 14px; overflow: hidden; color: var(--sf-laut-grund); }
.sf-bs-laut .sf-shop-card p { color: inherit; }
.sf-bs-laut .sf-bs-logo-chip { background: var(--sf-bs-farbe-weiss); border-radius: 12px; }
.sf-bs .sf-bs-laut-kacheln { margin-top: 2rem; display: grid; gap: 1.4rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-laut-kachel { position: relative; display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; background: var(--sf-bs-farbe-weiss); color: var(--sf-laut-grund, var(--sf-bs-farbe-0d1b2a)); text-decoration: none; box-shadow: 0 20px 40px var(--sf-bs-farbe-schwarz-35); transition: transform 0.25s, box-shadow 0.25s; animation: sf-laut-hoch 0.7s ease both; animation-delay: calc(var(--sf-bs-i) * 0.08s); }
@keyframes sf-laut-hoch { from { transform: translateY(40px); } }
.sf-bs .sf-bs-laut-kachel:hover { transform: translateY(-8px) rotate(-0.6deg); box-shadow: 0 30px 60px var(--sf-bs-farbe-schwarz-45); }
.sf-bs .sf-bs-laut-kbild { display: flex; height: 15rem; align-items: flex-end; justify-content: center; padding: 1.1rem; background: radial-gradient(70% 70% at 60% 55%, var(--sf-bs-farbe-weiss), var(--sf-bs-farbe-f1ece3)); }
.sf-bs .sf-bs-laut-kbild img { max-height: 100%; max-width: 72%; object-fit: contain; transition: transform 0.3s; }
.sf-bs .sf-bs-laut-kachel:hover .sf-bs-laut-kbild img { transform: scale(1.08) rotate(2deg); }
.sf-bs .sf-bs-laut-schaerpe { position: absolute; top: 1.6rem; left: -3rem; z-index: 2; width: 13rem; transform: rotate(-38deg); background: var(--sf-laut-farbe, var(--sf-bs-farbe-c8102e)); color: var(--sf-bs-farbe-weiss); text-align: center; font-family: var(--sf-display); font-weight: 900; font-size: var(--sf-bs-schrift-1-25rem); padding: 0.35rem 0; box-shadow: 0 6px 14px var(--sf-bs-farbe-schwarz-25); text-transform: uppercase; }
.sf-bs .sf-bs-laut-kfuss { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; padding: 1rem 1.25rem 0.25rem; }
.sf-bs .sf-bs-laut-kname { font-family: var(--sf-display); font-weight: 900; font-size: var(--sf-bs-schrift-1-4rem); line-height: 1.1; }
.sf-bs .sf-bs-laut-kcode { border: 2px dashed var(--sf-laut-farbe, var(--sf-bs-farbe-c8102e)); border-radius: 8px; padding: 0.3rem 0.6rem; color: var(--sf-laut-farbe, var(--sf-bs-farbe-c8102e)); font-weight: 900; letter-spacing: 0.04em; white-space: nowrap; }
.sf-bs .sf-bs-laut-ktext { padding: 0.15rem 1.25rem 0.9rem; font-size: var(--sf-size-14); color: var(--sf-bs-farbe-4a5563); }
.sf-bs .sf-bs-laut-kweiter { margin-top: auto; display: flex; align-items: center; justify-content: center; gap: 0.4rem; background: var(--sf-laut-grund, var(--sf-bs-farbe-0d1b2a)); color: var(--sf-bs-farbe-weiss); padding: 0.75rem; font-weight: 800; }
.sf-bs .sf-bs-laut-kachel:hover .sf-bs-laut-kweiter { background: var(--sf-laut-farbe, var(--sf-bs-farbe-c8102e)); }
@container sf-lp (min-width: 1024px) {
.sf-bs .sf-bs-laut-kacheln.sf-bs-lg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-bs .sf-bs-laut-kacheln.sf-bs-lg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container sf-lp (max-width: 767px) {
.sf-bs.sf-bs-laut .sf-bs-sale-hero { min-height: 0; border-radius: 0; flex-direction: column; align-items: stretch; }
.sf-bs-laut .sf-bs-laut-riesig { font-size: var(--sf-bs-schrift-15rem); top: -1rem; }
.sf-bs-laut .sf-bs-laut-stern { width: 7rem; height: 7rem; top: auto; bottom: 12.5rem; right: 0.5rem; }
.sf-bs.sf-bs-laut .sf-bs-sale-copy { order: 1; }
.sf-bs.sf-bs-laut .sf-bs-shelf--gruppe { order: 2; }
.sf-bs-laut .sf-bs-laut-stern span { font-size: var(--sf-bs-schrift-2rem); }
.sf-bs-laut .sf-bs-laut-stern small, .sf-bs-laut .sf-bs-laut-stern em { font-size: var(--sf-bs-schrift-0-85rem); }
.sf-bs-laut .sf-bs-laut-uhr .sf-bs-cd-cell { min-width: 3.6rem; }
.sf-bs-laut .sf-bs-laut-uhr .sf-bs-cd-value { font-size: var(--sf-bs-schrift-1-8rem); }
.sf-bs .sf-bs-shelf.sf-bs-shelf--gruppe { display: block; position: relative; width: 100%; height: 17rem; margin-top: 0.5rem; }
.sf-bs .sf-bs-laut-kacheln { gap: 0.75rem; }
.sf-bs .sf-bs-laut-kbild { height: 9.5rem; padding: 0.75rem; }
.sf-bs .sf-bs-laut-kfuss { flex-direction: column; align-items: flex-start; padding: 0.6rem 0.75rem 0; }
.sf-bs .sf-bs-laut-kname { font-size: var(--sf-bs-schrift-1-05rem); }
.sf-bs .sf-bs-laut-kcode { font-size: var(--sf-bs-schrift-0-72rem); }
.sf-bs .sf-bs-laut-ktext { display: none; }
.sf-bs .sf-bs-laut-schaerpe { font-size: var(--sf-bs-schrift-0-85rem); top: 1rem; left: -3.6rem; }
}
@media (prefers-reduced-motion: reduce) {
.sf-bs-laut, .sf-bs-laut * { animation: none !important; }
}
.sf-bs.sf-bs-laut .sf-bs-sale-sections { --sf-text: #fff; --sf-muted: rgb(255 255 255 / 0.78); --sf-line: rgb(255 255 255 / 0.18); }
.sf-bs-laut .sf-shop-card, .sf-bs-laut .sf-bs-laut-kachel, .sf-bs-laut .sf-bs-logo-chip { --sf-text: #0d1b2a; --sf-muted: #5b6470; --sf-line: #e5e1d8; }
.sf-bs-laut .sf-bs-sale-sections .sf-bs-kicker { color: var(--sf-laut-akzent); }
.sf-bs-laut .sf-bs-sale-sections a:not(.sf-bs-laut-kachel):not(.sf-shop-card):not(.sf-shop-card *) { color: var(--sf-laut-akzent); }
.sf-bs-laut .sf-shop-card-amount { color: var(--sf-sale-sticker, var(--sf-shop-accent)); }
.sf-showcase.sf-bs-salepage .sf-hero-copy-in > * { animation-name: sf-aktion-copy-in; }
@keyframes sf-aktion-copy-in { from { transform: translateY(14px); } }
@container sf-lp (max-width: 639px) {
.sf-bs .sf-bs-hero-media { object-position: var(--sf-bs-fokus-handy, center) !important; }
.sf-bs .sf-bs-sale-hero:has(> .sf-bs-hero-media) { min-height: 0; flex-direction: column; align-items: stretch; }
.sf-bs .sf-bs-sale-hero > .sf-bs-hero-media { position: relative; inset: auto; flex: none; height: 9.5rem; }
.sf-bs .sf-bs-sale-hero:has(> .sf-bs-hero-media) > .sf-bs-sale-overlay { display: none; }
.sf-bs .sf-bs-sale-copy { padding: 1rem 1rem 1.25rem; }
.sf-bs .sf-bs-sale-hero:has(> .sf-bs-sale-logo) .sf-bs-sale-copy { padding-top: 3.25rem; }
.sf-bs .sf-bs-sale-copy-inner, .sf-bs.sf-bs-laut .sf-bs-sale-copy-inner { gap: 0.625rem; }
.sf-bs .sf-bs-sale-title { font-size: var(--sf-section-title); }
.sf-bs.sf-bs-laut .sf-bs-sale-title { font-size: var(--sf-section-title); }
.sf-bs-laut .sf-bs-sale-script { display: inline; margin-top: 0; font-size: var(--sf-card-title); }
.sf-bs .sf-bs-sale-sub, .sf-bs .sf-bs-sale-cta2 { display: none; }
.sf-bs .sf-bs-sale-row { align-items: center; gap: 0.5rem; }
.sf-bs .sf-bs-sale-code { flex-direction: row; align-items: center; gap: 0.5rem; padding: 0.375rem 0.5rem; }
.sf-bs .sf-bs-sale-code .sf-bs-sale-label { display: none; }
.sf-bs .sf-bs-sale-cd { flex-direction: row; align-items: baseline; gap: 0.375rem; padding: 0.5rem 0.625rem; }
.sf-bs .sf-bs-sale-cd-value { font-size: var(--sf-size-20); }
.sf-bs .sf-bs-sale-cta, .sf-bs.sf-bs-laut .sf-bs-sale-cta { padding-block: 0.8rem; font-size: var(--sf-size-16); }
.sf-bs-laut .sf-bs-laut-uhr .sf-bs-cd { gap: 0.375rem; }
.sf-bs-laut .sf-bs-laut-uhr .sf-bs-cd-cell { min-width: 2.9rem; padding: 0.3rem 0.4rem 0.25rem; }
.sf-bs-laut .sf-bs-laut-uhr .sf-bs-cd-value { font-size: var(--sf-size-20); }
.sf-bs-laut .sf-bs-laut-uhr .sf-bs-cd-label { font-size: var(--sf-size-9); letter-spacing: 0.08em; }
.sf-bs .sf-bs-shelf.sf-bs-shelf--gruppe { height: 8.5rem; margin-top: 0; }
.sf-bs-laut .sf-bs-laut-stern { top: auto; bottom: 0.75rem; right: 0.5rem; width: 5.75rem; height: 5.75rem; }
.sf-bs-laut .sf-bs-laut-stern span { font-size: var(--sf-card-title); }
.sf-bs-laut .sf-bs-laut-stern small, .sf-bs-laut .sf-bs-laut-stern em { font-size: var(--sf-size-10); }
.sf-bs .sf-bs-salestack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-saletile { gap: 0.25rem; padding: 0.875rem 0.75rem; }
.sf-bs .sf-bs-saletile-value { font-size: var(--sf-card-title); }
.sf-bs .sf-bs-saletile-text { display: -webkit-box; overflow: hidden; font-size: var(--sf-size-12); line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.sf-bs .sf-bs-salestack-band { padding-block: 0.75rem; }
.sf-bs .sf-bs-sale-sections { padding-block: 1.5rem; }
.sf-bs .sf-bs-sale-sections > :not(:last-child) { margin-block-end: 2rem; }
.sf-bs .sf-bs-laut-kacheln, .sf-bs-salepage .sf-bs-lareas.sf-bs-kacheln { display: flex; gap: 0.75rem; margin-top: 1rem; margin-inline: -1rem; padding: 0 1rem 1.25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; scrollbar-width: none; }
.sf-bs .sf-bs-laut-kacheln > *, .sf-bs-salepage .sf-bs-lareas.sf-bs-kacheln > * { flex: 0 0 42%; scroll-snap-align: start; }
.sf-bs .sf-bs-laut-kbild { height: 7.5rem; }
.sf-bs .sf-bs-saleprod-head { gap: 0.5rem; }
.sf-bs .sf-bs-saleprod-title { font-size: var(--sf-card-title); }
.sf-bs .sf-bs-saleprod-intro { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sf-bs.sf-bs-salepage--dock .sf-bs-saleprod-links > :not(.sf-bs-saleprod-link) { display: none; }
.sf-bs .sf-bs-saleprod-groups { margin-top: 1rem; }
.sf-bs .sf-bs-saleprod-groups .sf-shop-list[data-variant="sale"] { margin-inline: -1rem; padding-inline: 1rem; scroll-padding-inline: 1rem; }
}
.sf-bs-laut .sf-bs-laut-band--oben i { color: var(--sf-blue); }
.sf-bs-laut .sf-bs-trust-title { color: var(--sf-white); }
.sf-bs-laut .sf-bs-laut-claim { display: flex; max-width: 72rem; flex-direction: column; align-items: center; gap: 0.25rem; margin-inline: auto; padding: 2.5rem 1rem 3rem; border-top: 4px solid var(--sf-blue); text-align: center; }
.sf-bs-laut .sf-bs-laut-claim-marke { font-family: var(--sf-display); font-size: var(--sf-card-title); font-weight: 800; line-height: 1; color: var(--sf-white); }
.sf-bs-laut .sf-bs-laut-claim-text { font-family: var(--sf-display-werbung); font-size: clamp(2.4rem, 4.3vw, 4.2rem); font-weight: 300; letter-spacing: 0; line-height: 1.05; color: var(--sf-white); transform-origin: center; }
.sf-bs.sf-bs-salepage.sf-bs-laut.sf-bs-laut--shop { --sf-shop-grund: #fff; --sf-shop-flaeche: #f4f5f6; --sf-shop-linie: #dadae5; --sf-shop-text: #727272; --sf-shop-titel: #173754; --sf-shop-cyan: #0375b4; --sf-shop-rot: #d01642; --sf-shop-rot-tief: #8f0b20; --sf-shop-weiss: #fff; --sf-shop-streifen: rgb(255 255 255 / 0.07); --sf-shop-schatten: rgb(23 55 84 / 0.14); --sf-page: var(--sf-shop-grund); background: var(--sf-shop-grund); animation: none; color: var(--sf-shop-text); }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-hero { min-height: 460px; border-radius: 0; box-shadow: none; background: var(--sf-laut-farbe); }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-copy-inner { gap: 1rem; }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-eyebrow { padding: 0; border-radius: 0; background: none; animation: none; color: var(--sf-laut-akzent); font-family: var(--sf-display-werbung); font-weight: 900; letter-spacing: 0.08em; }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-title { font-family: var(--sf-display-werbung); font-weight: 900; line-height: 0.95; letter-spacing: -0.01em; text-shadow: none; }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-sub { font-family: var(--sf-display-werbung); font-weight: 700; }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-cta { border-radius: 4px; background: var(--sf-shop-rot); color: var(--sf-shop-weiss); font-family: var(--sf-display-werbung); font-weight: 700; animation: none; }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-cta2 { border-radius: 4px; font-family: var(--sf-display-werbung); font-weight: 700; }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-cd { background: none; border: 0; padding: 0; }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-cd-label, .sf-bs.sf-bs-laut--shop .sf-bs-sale-cd-value { color: var(--sf-shop-weiss); font-family: var(--sf-display-werbung); font-weight: 900; }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-sections { --sf-text: var(--sf-shop-text); --sf-muted: var(--sf-shop-text); --sf-line: var(--sf-shop-linie); background: var(--sf-shop-grund); }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-sections .sf-bs-section-head, .sf-bs.sf-bs-laut--shop .sf-bs-sale-sections h2 { color: var(--sf-shop-titel); font-family: var(--sf-display-werbung); font-weight: 900; }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-sections .sf-bs-eyebrow, .sf-bs.sf-bs-laut--shop .sf-bs-sale-sections .sf-bs-kicker { color: var(--sf-shop-cyan); }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-sections p { color: var(--sf-shop-text); }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-sections a:not(.sf-bs-laut-kachel):not(.sf-shop-card):not(.sf-shop-card *) { color: var(--sf-shop-cyan); }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kachel { border: 1px solid var(--sf-shop-linie); border-radius: 0; box-shadow: none; color: var(--sf-shop-text); animation: none; --sf-text: var(--sf-shop-text); --sf-line: var(--sf-shop-linie); }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kachel:hover { transform: none; box-shadow: 0 8px 22px var(--sf-shop-schatten); }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kachel:hover .sf-bs-laut-kbild img { transform: scale(1.04); }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kbild { background: var(--sf-shop-grund); }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-schaerpe { top: 0.75rem; right: 0; left: auto; width: auto; padding: 0.4rem 0.75rem; transform: none; background: var(--sf-shop-rot); color: var(--sf-shop-weiss); font-family: var(--sf-body); font-size: var(--sf-size-14); font-weight: 700; letter-spacing: 0; text-transform: none; box-shadow: none; }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kfuss { justify-content: center; background: var(--sf-shop-grund); color: var(--sf-shop-text); text-align: center; }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kname { font-family: var(--sf-body); font-size: var(--sf-size-16); font-weight: 400; color: var(--sf-shop-text); }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-ktext { color: var(--sf-shop-text); text-align: center; }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kweiter { justify-content: center; background: var(--sf-shop-grund); color: var(--sf-shop-cyan); font-family: var(--sf-body); font-weight: 400; }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kachel:hover .sf-bs-laut-kweiter { background: var(--sf-shop-grund); text-decoration: underline; }
.sf-bs.sf-bs-laut--shop .sf-shop-card { border-radius: 0; color: var(--sf-shop-text); --sf-text: var(--sf-shop-text); --sf-line: var(--sf-shop-linie); }
.sf-bs.sf-bs-laut--shop .sf-shop-card > a, .sf-bs.sf-bs-laut--shop .sf-shop-card > div { border-radius: 0; border-color: var(--sf-shop-linie); }
.sf-bs.sf-bs-laut--shop .sf-shop-card figure { background: var(--sf-shop-grund); }
.sf-bs.sf-bs-laut--shop .sf-shop-list .sf-shop-card figure em { top: 0.6rem; right: 0; left: auto; padding: 0.4rem 0.7rem; background: var(--sf-shop-rot); font: 700 var(--sf-size-16) / 1 var(--sf-body); }
.sf-bs.sf-bs-laut--shop .sf-shop-list .sf-shop-card figure b { right: auto; left: 0; border-left: 0; border-right: 1px solid var(--sf-shop-linie); }
.sf-bs.sf-bs-laut--shop .sf-shop-card-body { align-items: center; text-align: center; }
.sf-bs.sf-bs-laut--shop .sf-shop-card-brand { color: var(--sf-shop-cyan); font-size: var(--sf-size-14); font-weight: 400; letter-spacing: 0; text-transform: none; }
.sf-bs.sf-bs-laut--shop .sf-shop-card strong { font-weight: 400; color: var(--sf-shop-text); }
.sf-bs.sf-bs-laut--shop .sf-shop-card-cta { border-radius: 0; }
.sf-bs.sf-bs-laut--shop .sf-bs-logo-chip { border: 1px solid var(--sf-shop-linie); border-radius: 0; }
.sf-bs.sf-bs-laut--shop .sf-bs-trust-title { color: var(--sf-shop-titel); font-family: var(--sf-display-werbung); font-weight: 900; }
.sf-bs.sf-bs-laut--shop .sf-bs-shop-stoerer { --sf-shop-stoerer-schatten: rgb(0 0 0 / 0.22); position: absolute; z-index: 4; top: 2rem; right: 2.5rem; display: flex; width: 9.5rem; height: 9.5rem; margin: 0; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--sf-shop-rot); color: var(--sf-shop-weiss); font-family: var(--sf-display-werbung); font-weight: 900; line-height: 0.95; text-align: center; transform: rotate(-8deg); box-shadow: 0 10px 24px var(--sf-shop-stoerer-schatten); animation: sf-shop-ploppen 0.6s cubic-bezier(0.2, 1.6, 0.4, 1) 0.5s both; }
.sf-bs.sf-bs-laut--shop .sf-bs-shop-stoerer small { font-size: var(--sf-size-16); color: var(--sf-laut-akzent); }
.sf-bs.sf-bs-laut--shop .sf-bs-shop-stoerer b { font-size: clamp(2.1rem, 3.1vw, 2.7rem); letter-spacing: -0.03em; white-space: nowrap; }
.sf-bs.sf-bs-laut--shop .sf-bs-shop-stoerer em { margin-top: 0.15rem; font-size: var(--sf-size-14); font-style: normal; font-weight: 700; }
@keyframes sf-shop-ploppen { from { transform: scale(0.3) rotate(-40deg); } to { transform: rotate(-8deg); } }
@media (prefers-reduced-motion: reduce) {
.sf-bs.sf-bs-laut--shop .sf-bs-shop-stoerer { animation: none; }
}
@container sf-lp (max-width: 639px) {
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-hero { min-height: 0; }
.sf-bs.sf-bs-laut--shop .sf-bs-shop-stoerer { top: auto; bottom: 0.75rem; right: 0.75rem; width: 6.25rem; height: 6.25rem; }
.sf-bs.sf-bs-laut--shop .sf-bs-shop-stoerer b { font-size: clamp(1.4rem, 7vw, 1.75rem); }
.sf-bs.sf-bs-laut--shop .sf-bs-shop-stoerer small, .sf-bs.sf-bs-laut--shop .sf-bs-shop-stoerer em { font-size: var(--sf-size-11); }
}
.sf-bs.sf-bs-laut.sf-bs-laut--shop { --sf-shop-glas: rgb(255 255 255 / 0.14); --sf-shop-glas-rand: rgb(255 255 255 / 0.34); --sf-shop-knopf-schatten: rgb(208 22 66 / 0.35); --sf-shop-ring: rgb(255 255 255 / 0.22); }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-uhr .sf-bs-cd { gap: 0.5rem; }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-uhr .sf-bs-cd-cell { min-width: 4rem; padding: 0.5rem 0.55rem 0.4rem; border: 1px solid var(--sf-shop-glas-rand); border-radius: 8px; background: var(--sf-shop-glas); box-shadow: none; backdrop-filter: blur(4px); }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-uhr .sf-bs-cd-value { font-family: var(--sf-display-werbung); font-size: clamp(1.6rem, 2.4vw, 2.1rem); color: var(--sf-shop-weiss); }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-uhr .sf-bs-cd-label { color: color-mix(in srgb, var(--sf-shop-weiss) 78%, transparent); font-size: var(--sf-size-10); }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-uhr .sf-bs-cd-cell:last-child .sf-bs-cd-value { color: var(--sf-laut-akzent); animation: sf-shop-tick 1s ease-out infinite; }
@keyframes sf-shop-tick { 0% { transform: scale(1.15); } 40% { transform: none; } }
.sf-bs.sf-bs-laut--shop .sf-bs-shop-stoerer { border: 4px solid var(--sf-shop-weiss); box-shadow: 0 0 0 10px var(--sf-shop-ring), 0 14px 30px var(--sf-shop-stoerer-schatten); }
.sf-bs.sf-bs-laut--shop .sf-bs-shop-stoerer small { font-size: var(--sf-size-14); letter-spacing: 0.06em; text-transform: uppercase; }
@container sf-lp (min-width: 640px) {
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-hero::before { content: ""; position: absolute; top: 50%; right: 7%; width: min(32rem, 42%); aspect-ratio: 1; border-radius: 50%; background: var(--sf-laut-dunkel); opacity: 0.5; transform: translateY(-48%); pointer-events: none; }
}
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-cta { border-radius: 6px; box-shadow: 0 8px 18px var(--sf-shop-knopf-schatten); transition: transform 0.2s, box-shadow 0.2s; }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-cta svg { transition: transform 0.2s; }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-cta2 { border-radius: 6px; background: var(--sf-shop-glas); }
@media (hover: hover) {
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-cta:hover { transform: translateY(-2px); }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-cta:hover svg { transform: translateX(3px); }
}
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kbild { background: var(--sf-shop-flaeche); }
.sf-bs.sf-bs-laut--shop .sf-shop-card figure { background: var(--sf-shop-flaeche); }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kachel { transition: transform 0.2s, box-shadow 0.2s; }
.sf-bs.sf-bs-laut--shop .sf-shop-card > a { transition: transform 0.2s, box-shadow 0.2s; }
@media (hover: hover) {
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kachel:hover, .sf-bs.sf-bs-laut--shop .sf-shop-card > a:hover { transform: translateY(-3px); box-shadow: 0 10px 24px var(--sf-shop-schatten); }
}
@media (prefers-reduced-motion: reduce) {
.sf-bs.sf-bs-laut--shop .sf-bs-laut-uhr .sf-bs-cd-cell:last-child .sf-bs-cd-value { animation: none; }
}
@container sf-lp (min-width: 640px) {
.sf-bs.sf-bs-laut--shop .sf-bs-shop-stoerer { top: 30%; right: 4%; }
}
.sf-bs.sf-bs-laut--shop .sf-bs-trust { grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0; border: 1px solid var(--sf-shop-linie); background: var(--sf-shop-flaeche); }
.sf-bs.sf-bs-laut--shop .sf-bs-trust-item { position: relative; gap: 0.1rem; padding: 0.9rem 1rem 0.9rem 2.6rem; border-top: 0; border-right: 1px solid var(--sf-shop-linie); }
.sf-bs.sf-bs-laut--shop .sf-bs-trust-item:last-child { border-right: 0; }
.sf-bs.sf-bs-laut--shop .sf-bs-trust-item::before { content: "✓"; position: absolute; left: 1rem; top: 0.95rem; display: grid; width: 1.1rem; height: 1.1rem; place-items: center; border-radius: 50%; background: var(--sf-shop-cyan); color: var(--sf-shop-weiss); font-size: var(--sf-size-11); font-weight: 700; }
.sf-bs.sf-bs-laut--shop .sf-bs-trust-title { font-size: var(--sf-size-16); }
.sf-bs.sf-bs-laut--shop .sf-bs-trust-text { font-size: var(--sf-size-14); color: var(--sf-shop-text); }
.sf-bs.sf-bs-laut--shop .sf-bs-logo-chip { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; height: auto; padding-block: 0.75rem; }
.sf-bs.sf-bs-laut--shop .sf-bs-logo-wert { color: var(--sf-shop-rot); font-family: var(--sf-body); font-size: var(--sf-size-14); font-weight: 700; white-space: nowrap; }
@container sf-lp (max-width: 639px) {
.sf-bs.sf-bs-laut--shop .sf-bs-trust { display: flex; overflow-x: auto; scrollbar-width: none; }
.sf-bs.sf-bs-laut--shop .sf-bs-trust-item { flex: 0 0 auto; padding: 0.6rem 0.9rem 0.6rem 2.2rem; }
.sf-bs.sf-bs-laut--shop .sf-bs-trust-item::before { left: 0.75rem; top: 0.7rem; }
.sf-bs.sf-bs-laut--shop .sf-bs-trust-text { display: none; }
.sf-bs.sf-bs-laut--shop .sf-bs-trust-title { font-size: var(--sf-size-14); white-space: nowrap; }
}
.sf-bs.sf-bs-laut--shop .sf-bs-sale-sections .sf-bs-saleprod-title { font-size: clamp(1.7rem, 2.6vw, 2.25rem); line-height: 1.05; }
.sf-bs.sf-bs-laut--shop .sf-bs-shelf-label { font-family: var(--sf-display-werbung); font-size: var(--sf-size-14); font-weight: 900; line-height: 1.1; color: var(--sf-shop-titel); text-align: center; }
@container sf-lp (min-width: 768px) {
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-hero { min-height: 0; align-items: center; }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-copy { padding-top: 2.75rem; padding-bottom: 2.75rem; }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-copy-inner { max-width: 44%; }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-title { font-size: clamp(2.4rem, 4.4vw, 3.9rem); }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-hero::before { display: none; }
.sf-bs.sf-bs-laut--shop .sf-bs-shelf:not(.sf-bs-shelf--gruppe) { top: 1.75rem; bottom: 1.75rem; right: 1.75rem; display: grid; width: 38%; height: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; align-items: stretch; justify-content: normal; gap: 0.75rem; }
.sf-bs.sf-bs-laut--shop .sf-bs-shelf:not(.sf-bs-shelf--gruppe)::before { display: none; }
.sf-bs.sf-bs-laut--shop .sf-bs-shelf:not(.sf-bs-shelf--gruppe) .sf-bs-shelf-item { height: auto; min-height: 0; padding: 2.4rem 0.6rem 0.7rem; gap: 0.35rem; border-radius: 8px; background: var(--sf-shop-weiss); transition: transform 0.2s, box-shadow 0.2s; }
.sf-bs.sf-bs-laut--shop .sf-bs-shelf:not(.sf-bs-shelf--gruppe) .sf-bs-shelf-fig { flex: 1 1 0; min-height: 0; margin: 0; padding: 0; align-items: center; }
.sf-bs.sf-bs-laut--shop .sf-bs-shelf:not(.sf-bs-shelf--gruppe) .sf-bs-shelf-fig img { width: auto; height: 100%; max-width: 100%; object-position: center; }
.sf-bs.sf-bs-laut--shop .sf-bs-shelf:not(.sf-bs-shelf--gruppe) .sf-bs-shelf-badge { position: absolute; top: 0.5rem; left: 0.5rem; border-radius: 4px; background: var(--sf-shop-rot); padding: 0.3rem 0.5rem; font-family: var(--sf-display-werbung); font-size: var(--sf-size-14); font-weight: 900; box-shadow: none; animation: none; }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-hero:has(.sf-bs-shelf:not(.sf-bs-shelf--gruppe)) .sf-bs-shop-stoerer { top: calc(50% - 4.75rem); right: auto; left: calc(51% - 4.75rem); }
}
@media (hover: hover) and (min-width: 768px) {
.sf-bs.sf-bs-laut--shop .sf-bs-shelf:not(.sf-bs-shelf--gruppe) .sf-bs-shelf-item:hover { transform: translateY(-3px); box-shadow: 0 10px 22px var(--sf-shop-stoerer-schatten); }
}
@container sf-lp (max-width: 767px) {
.sf-bs.sf-bs-laut--shop .sf-bs-shelf:not(.sf-bs-shelf--gruppe) { order: 2; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.4rem; padding: 0 1rem 1rem; }
.sf-bs.sf-bs-laut--shop .sf-bs-shelf:not(.sf-bs-shelf--gruppe) .sf-bs-shelf-item { display: flex; flex-direction: column; align-items: center; padding: 0.4rem; border-radius: 6px; background: var(--sf-shop-weiss); text-decoration: none; }
.sf-bs.sf-bs-laut--shop .sf-bs-shelf:not(.sf-bs-shelf--gruppe) .sf-bs-shelf-fig img { height: 3.6rem; width: auto; max-width: 100%; object-fit: contain; }
.sf-bs.sf-bs-laut--shop .sf-bs-shelf:not(.sf-bs-shelf--gruppe) .sf-bs-shelf-badge, .sf-bs.sf-bs-laut--shop .sf-bs-shelf:not(.sf-bs-shelf--gruppe) .sf-bs-shelf-label { display: none; }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-hero:has(.sf-bs-shelf:not(.sf-bs-shelf--gruppe)) .sf-bs-shop-stoerer { top: 1.25rem; bottom: auto; right: 0.75rem; width: 5.75rem; height: 5.75rem; }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-hero:has(.sf-bs-shelf:not(.sf-bs-shelf--gruppe)) :is(.sf-bs-sale-eyebrow, .sf-bs-sale-title) { padding-right: 6rem; }
}
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kacheln { gap: 1rem; }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-schaerpe { top: 0.9rem; padding: 0.5rem 0.8rem; font-family: var(--sf-display-werbung); font-size: var(--sf-size-18); font-weight: 900; }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kfuss { padding: 1rem 1rem 0.15rem; }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kname { font-family: var(--sf-display-werbung); font-size: var(--sf-size-20); font-weight: 900; color: var(--sf-shop-titel); }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-ktext { padding: 0 1rem 0.9rem; }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kweiter { border-top: 1px solid var(--sf-shop-linie); padding: 0.8rem; font-family: var(--sf-display-werbung); font-weight: 700; transition: background-color 0.2s, color 0.2s; }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kachel:hover .sf-bs-laut-kweiter { background: var(--sf-shop-cyan); color: var(--sf-shop-weiss); text-decoration: none; }
@container sf-lp (max-width: 767px) {
.sf-bs.sf-bs-laut--shop .sf-bs-laut-schaerpe { font-size: var(--sf-size-14); padding: 0.35rem 0.6rem; }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kname { font-size: var(--sf-size-16); }
}
.sf-bs.sf-bs-salepage.sf-bs-laut.sf-bs-laut--shop { --sf-shop-seite: color-mix(in srgb, var(--sf-laut-farbe) 8%, var(--sf-shop-weiss)); --sf-page: var(--sf-shop-seite); background: var(--sf-shop-seite); }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-sections { background: transparent; }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-head { padding-top: 0; }
.sf-bs.sf-bs-laut.sf-bs-laut--shop .sf-bs-sale-hero { box-shadow: 0 0 0 100vmax var(--sf-laut-farbe); clip-path: inset(0 -100vmax); }
.sf-bs.sf-bs-laut--shop .sf-bs-trust { background: var(--sf-shop-weiss); }
.sf-bs.sf-bs-laut--shop .sf-bs-laut-kachel, .sf-bs.sf-bs-laut--shop .sf-bs-laut-kbild, .sf-bs.sf-bs-laut--shop .sf-bs-logo-chip { background: var(--sf-shop-weiss); }
.sf-bs.sf-bs-laut--shop .sf-bs-sale-links a { background: var(--sf-shop-weiss); }
.sf-bs.sf-bs-laut.sf-bs-laut--shop.sf-bs-laut--invers { --sf-shop-nacht: #0d1b2a; --sf-shop-weiss-schatten: rgb(0 0 0 / 0.18); }
.sf-bs.sf-bs-laut--invers .sf-bs-shop-stoerer { background: var(--sf-laut-akzent); color: var(--sf-shop-nacht); }
.sf-bs.sf-bs-laut--invers .sf-bs-shop-stoerer small { color: var(--sf-shop-rot); }
.sf-bs.sf-bs-laut.sf-bs-laut--shop.sf-bs-laut--invers .sf-bs-sale-cta { background: var(--sf-shop-weiss); color: var(--sf-shop-rot); box-shadow: 0 8px 18px var(--sf-shop-weiss-schatten); }
.sf-bs-spiel-bild { display: block; }
.sf-bs-spiel-bild img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.sf-bs-fenster { --sf-fenster-grund: var(--sf-laut-grund, var(--sf-club-night)); --sf-fenster-akzent: var(--sf-laut-akzent, var(--sf-white)); --sf-fenster-linie: color-mix(in srgb, var(--sf-white) 24%, transparent); --sf-fenster-schatten: color-mix(in srgb, var(--sf-ink) 80%, transparent); --sf-fenster-glanz: color-mix(in srgb, var(--sf-fenster-akzent) 30%, transparent); }
.sf-bs-fenster-buehne { position: relative; display: flex; justify-content: center; }
.sf-bs-fenster-grund { display: none; }
.sf-bs-fenster-rahmen { position: relative; width: 100%; height: min(780px, calc(100svh - 5.5rem)); min-height: 520px; overflow: hidden; border-radius: 18px; background: var(--sf-fenster-grund); box-shadow: 0 0 0 1px var(--sf-fenster-linie), 0 30px 70px -30px var(--sf-fenster-schatten); }
.sf-bs-fenster-rahmen:fullscreen { width: 100vw; height: 100vh; max-width: none; border-radius: 0; }
.sf-bs-fenster-spiel { display: block; width: 100%; height: 100%; border: 0; }
.sf-bs-fenster .sf-bs-fenster-start { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: none; color: var(--sf-white); text-align: center; cursor: pointer; }
.sf-bs-fenster-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.sf-bs-fenster .sf-bs-fenster-start:hover .sf-bs-fenster-bild, .sf-bs-fenster .sf-bs-fenster-start:focus-visible .sf-bs-fenster-bild { transform: scale(1.03); }
.sf-bs-fenster .sf-bs-fenster-start:focus-visible { outline: 3px solid var(--sf-fenster-akzent); outline-offset: -3px; }
.sf-bs-fenster-start-flaeche { position: absolute; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; gap: 0.65rem; padding: 6rem 1.5rem 1.4rem; background: linear-gradient( to top, color-mix(in srgb, var(--sf-fenster-grund) 94%, transparent) 45%, transparent ); }
.sf-bs-fenster-play { position: relative; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: var(--sf-fenster-akzent); box-shadow: 0 0 0 8px var(--sf-fenster-glanz); animation: sf-fenster-puls 2.4s ease-in-out infinite; }
.sf-bs-fenster-play::after { content: ""; position: absolute; top: 50%; left: 55%; transform: translate(-50%, -50%); border-top: 0.85rem solid transparent; border-bottom: 0.85rem solid transparent; border-left: 1.35rem solid var(--sf-fenster-grund); }
@keyframes sf-fenster-puls { 50% { box-shadow: 0 0 0 18px transparent; } }
.sf-bs-fenster-start-text { font-family: var(--sf-display); font-size: calc(var(--sf-size-20) * 1.35); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.sf-bs-fenster-datenschutz { max-width: 32ch; font-size: var(--sf-size-12); line-height: 1.35; opacity: 0.78; }
.sf-bs-fenster-leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; margin-top: 0.85rem; }
.sf-bs-fenster-hinweis { margin: 0; font-size: var(--sf-size-14); line-height: 1.4; }
.sf-bs-fenster-knoepfe { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sf-bs-fenster .sf-bs-fenster-knopf { display: inline-flex; align-items: center; min-height: 40px; margin: 0; padding: 0 1rem; border: 1px solid var(--sf-fenster-linie); border-radius: 999px; background: none; color: inherit; font-size: var(--sf-size-14); font-weight: 700; text-decoration: none; cursor: pointer; }
.sf-bs-fenster .sf-bs-fenster-knopf:hover { border-color: var(--sf-fenster-akzent); }
@container sf-lp (min-width: 600px) {
.sf-bs-fenster-buehne { overflow: hidden; padding: 2.75rem 1.5rem; border-radius: 18px; background: var(--sf-fenster-grund); box-shadow: 0 0 0 1px var(--sf-fenster-linie); }
.sf-bs-fenster-grund { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; filter: blur(26px) saturate(1.25) brightness(0.5); transform: scale(1.15); }
.sf-bs-fenster-rahmen { width: 440px; height: min(860px, calc(100svh - 8rem)); min-height: 600px; border-radius: 30px; box-shadow: 0 0 0 1px var(--sf-fenster-linie), 0 0 70px -10px var(--sf-fenster-glanz), 0 50px 90px -40px var(--sf-fenster-schatten); }
}
@media (prefers-reduced-motion: reduce) {
.sf-bs-fenster-play { animation: none; }
.sf-bs-fenster-bild { transition: none; }
}
.sf-bs-spiel-bild--hoch { max-width: 420px; margin: 0 auto; }
.sf-bs-spiel-bild--hoch img { aspect-ratio: auto; border-radius: 18px; }
.sf-bs-spiel-knopf { text-align: center; }
.sf-bs .sf-bs-spiel-uebung { margin: 1.25rem auto 0; max-width: 42rem; padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--sf-bs-kfg, var(--sf-bs-accent)); color: var(--sf-ink); font-size: var(--sf-size-14); line-height: 1.45; text-align: center; }
.sf-bs .sf-bs-spiel-uebung strong { display: block; font-size: var(--sf-size-12); letter-spacing: 0.16em; text-transform: uppercase; }
.sf-bs-spiel-hinweis { margin: 0.75rem 0 0; text-align: center; font-size: var(--sf-size-14); }
.sf-bs-laut:not(.sf-bs-laut--shop) { --sf-laut-karte: color-mix(in srgb, var(--sf-white) 7%, transparent); --sf-laut-karte-linie: color-mix(in srgb, var(--sf-white) 18%, transparent); --sf-laut-text-leise: color-mix(in srgb, var(--sf-white) 82%, transparent); }
.sf-bs-laut:not(.sf-bs-laut--shop) .sf-bs-step, .sf-bs-laut:not(.sf-bs-laut--shop) .sf-bs-faq-item { border-color: var(--sf-laut-karte-linie); background: var(--sf-laut-karte); color: var(--sf-white); backdrop-filter: blur(6px); }
.sf-bs-laut:not(.sf-bs-laut--shop) .sf-bs-faq-item[open] { border-color: var(--sf-laut-akzent); }
.sf-bs-laut:not(.sf-bs-laut--shop) .sf-bs-faq-q, .sf-bs-laut:not(.sf-bs-laut--shop) .sf-bs-step-title { color: var(--sf-white); }
.sf-bs-laut:not(.sf-bs-laut--shop) .sf-bs-faq-a, .sf-bs-laut:not(.sf-bs-laut--shop) .sf-bs-step-para { color: var(--sf-laut-text-leise); }
.sf-bs-laut:not(.sf-bs-laut--shop) .sf-bs-faq-icon { color: var(--sf-laut-akzent); }
.sf-bs-laut:not(.sf-bs-laut--shop) .sf-bs-step-num { background: var(--sf-laut-akzent); color: var(--sf-laut-grund); }
.sf-bs-laut:not(.sf-bs-laut--shop) .sf-bs-faq-a a, .sf-bs-laut:not(.sf-bs-laut--shop) .sf-bs-step-para a { color: var(--sf-laut-akzent); }
.sf-bs-laut .sf-bs-laut-claim--halloween { --sf-grusel-glut: #ec8c3e; --sf-grusel-hell: #ffd27a; --sf-grusel-tief: #a8400f; --sf-grusel-mond: #e8ecf6; position: relative; overflow: hidden; padding-top: 3.5rem; padding-bottom: 4.5rem; border-top-color: var(--sf-grusel-glut); box-shadow: inset 0 18px 40px -30px var(--sf-grusel-glut); }
.sf-bs-laut .sf-bs-laut-claim--halloween .sf-bs-laut-claim-marke { position: relative; letter-spacing: 0.04em; text-transform: uppercase; }
.sf-bs-laut .sf-bs-laut-claim--halloween .sf-bs-laut-claim-text { position: relative; padding: 0 0.3em 0.15em; background: linear-gradient(180deg, var(--sf-grusel-hell) 10%, var(--sf-grusel-glut) 55%, var(--sf-grusel-tief) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 14px color-mix(in srgb, var(--sf-grusel-glut) 70%, transparent)); animation: sf-grusel-flackern 4.5s ease-in-out infinite; }
.sf-bs-laut .sf-bs-laut-claim--halloween .sf-bs-laut-claim-text::after { content: ""; position: absolute; top: 82%; left: 18%; width: 64%; height: 1.6rem; background: radial-gradient(circle at 50% 100%, var(--sf-grusel-glut) 0.32rem, transparent 0.34rem) 6% 0 / 0.7rem 1.6rem no-repeat, radial-gradient(circle at 50% 100%, var(--sf-grusel-glut) 0.26rem, transparent 0.28rem) 34% 0 / 0.6rem 1.1rem no-repeat, radial-gradient(circle at 50% 100%, var(--sf-grusel-glut) 0.36rem, transparent 0.38rem) 63% 0 / 0.8rem 1.9rem no-repeat, radial-gradient(circle at 50% 100%, var(--sf-grusel-glut) 0.24rem, transparent 0.26rem) 90% 0 / 0.55rem 1rem no-repeat, linear-gradient(var(--sf-grusel-glut), var(--sf-grusel-glut)) 8% 0 / 0.16rem 1.25rem no-repeat, linear-gradient(var(--sf-grusel-glut), var(--sf-grusel-glut)) 35% 0 / 0.14rem 0.75rem no-repeat, linear-gradient(var(--sf-grusel-glut), var(--sf-grusel-glut)) 64% 0 / 0.18rem 1.5rem no-repeat, linear-gradient(var(--sf-grusel-glut), var(--sf-grusel-glut)) 90% 0 / 0.13rem 0.7rem no-repeat; transform: rotate(3deg); transform-origin: top; animation: sf-grusel-tropfen 3.2s ease-in infinite; }
.sf-bs-grusel-mond { position: absolute; top: 1.1rem; right: max(1.5rem, calc(50% - 22rem)); width: 4.5rem; height: 4.5rem; border-radius: 50%; background: radial-gradient(circle at 38% 36%, var(--sf-grusel-mond), color-mix(in srgb, var(--sf-grusel-mond) 70%, var(--sf-laut-grund)) 70%); box-shadow: 0 0 40px 6px color-mix(in srgb, var(--sf-grusel-mond) 30%, transparent); opacity: 0.85; }
.sf-bs-grusel-fledermaus { position: absolute; top: 1.4rem; left: -2.4rem; width: 1.6rem; height: 0.7rem; background: var(--sf-laut-grund); clip-path: polygon(0 20%, 18% 0, 30% 45%, 50% 30%, 70% 45%, 82% 0, 100% 20%, 86% 70%, 62% 60%, 50% 100%, 38% 60%, 14% 70%); animation: sf-grusel-flug 7s ease-in-out infinite; }
.sf-bs-grusel-fledermaus + .sf-bs-grusel-fledermaus { top: 3.2rem; left: 4.6rem; width: 1.1rem; height: 0.5rem; animation-delay: -3s; animation-duration: 9s; }
@keyframes sf-grusel-flackern { 0%, 100% { opacity: 1; } 46% { opacity: 1; } 48% { opacity: 0.78; } 50% { opacity: 1; } 53% { opacity: 0.86; } 55% { opacity: 1; } }
@keyframes sf-grusel-tropfen { 0% { clip-path: inset(0 0 100% 0); } 60%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes sf-grusel-flug { 0%, 100% { transform: translate(0, 0) scaleY(1); } 25% { transform: translate(1.2rem, -0.6rem) scaleY(0.6); } 50% { transform: translate(2.4rem, 0.2rem) scaleY(1); } 75% { transform: translate(1rem, 0.5rem) scaleY(0.6); } }
.sf-bs .sf-bs-musik { position: fixed; bottom: max(1rem, env(safe-area-inset-bottom)); left: 1rem; z-index: 40; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 44px; margin: 0; padding: 0 1.1rem 0 0.9rem; border: 1px solid color-mix(in srgb, var(--sf-white) 30%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--sf-laut-grund, var(--sf-club-night)) 82%, transparent); backdrop-filter: blur(8px); color: var(--sf-white); font-size: var(--sf-size-14); font-weight: 700; cursor: pointer; box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--sf-ink) 90%, transparent); }
.sf-bs .sf-bs-musik:hover, .sf-bs .sf-bs-musik--an { border-color: var(--sf-laut-akzent, var(--sf-white)); }
.sf-bs-musik-wellen { display: inline-flex; align-items: flex-end; gap: 2px; height: 14px; }
.sf-bs-musik-wellen span { width: 3px; height: 40%; border-radius: 2px; background: var(--sf-laut-akzent, var(--sf-white)); }
.sf-bs-musik--an .sf-bs-musik-wellen span { animation: sf-musik-welle 0.9s ease-in-out infinite; }
.sf-bs-musik--an .sf-bs-musik-wellen span:nth-child(2) { animation-delay: -0.3s; }
.sf-bs-musik--an .sf-bs-musik-wellen span:nth-child(3) { animation-delay: -0.6s; }
@keyframes sf-musik-welle { 0%, 100% { height: 30%; } 50% { height: 100%; } }
@media (prefers-reduced-motion: reduce) {
.sf-bs-laut .sf-bs-laut-claim--halloween .sf-bs-laut-claim-text, .sf-bs-laut .sf-bs-laut-claim--halloween .sf-bs-laut-claim-text::after, .sf-bs-grusel-fledermaus, .sf-bs-musik--an .sf-bs-musik-wellen span { animation: none; }
}
.sf-bs .sf-bs-bkacheln { margin-top: 1.75rem; display: grid; gap: 1.25rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bs .sf-bs-bkachel { display: flex; flex-direction: column; overflow: hidden; border-radius: 18px; border: 1px solid var(--sf-bs-farbe-weiss-14); background: var(--sf-bs-farbe-weiss-5); color: var(--sf-white); text-decoration: none; transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s; }
.sf-bs a.sf-bs-bkachel:hover { transform: translateY(-6px); border-color: var(--sf-laut-akzent, var(--sf-bs-farbe-weiss-86)); box-shadow: 0 24px 50px var(--sf-bs-farbe-schwarz-45); }
.sf-bs .sf-bs-bkachel-fig { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.sf-bs .sf-bs-bkachel-fig img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s; }
.sf-bs a.sf-bs-bkachel:hover .sf-bs-bkachel-fig img { transform: scale(1.05); }
.sf-bs .sf-bs-bkachel-body { display: flex; flex: 1; flex-direction: column; gap: 0.4rem; padding: 1.1rem 1.25rem 1.25rem; }
.sf-bs .sf-bs-bkachel-front { font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-laut-akzent, var(--sf-bs-accent-light)); }
.sf-bs .sf-bs-bkachel-label { font-family: var(--sf-display); font-weight: 900; font-size: clamp(1.25rem, 1.6vw, 1.6rem); line-height: 1.1; }
.sf-bs .sf-bs-bkachel-text { font-size: var(--sf-size-16); line-height: 1.5; color: var(--sf-bs-farbe-weiss-86); }
.sf-bs .sf-bs-bkachel-more { margin-top: auto; padding-top: 0.6rem; display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--sf-size-15); font-weight: 800; color: var(--sf-laut-akzent, var(--sf-white)); }
@container sf-lp (min-width: 1024px) {
.sf-bs .sf-bs-bkacheln.sf-bs-lg3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-bs .sf-bs-bkacheln.sf-bs-lg4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container sf-lp (max-width: 520px) {
.sf-bs .sf-bs-bkacheln { gap: 0.75rem; }
.sf-bs .sf-bs-bkachel-body { padding: 0.8rem 0.85rem 0.95rem; }
.sf-bs .sf-bs-bkachel-label { font-size: 1.1rem; }
.sf-bs .sf-bs-bkachel-text { font-size: var(--sf-size-14); }
}
@media (prefers-reduced-motion: reduce) {
.sf-bs .sf-bs-bkachel, .sf-bs .sf-bs-bkachel-fig img { transition: none; }
}
/* markenwelt.css */
.sf-bs.sf-mw-seite { --sf-section-accent: var(--sf-ink); }
.sf-bs.sf-mw-seite .sf-bs-sections { padding-block: var(--sf-hm-s6) var(--sf-hm-s7); }
.sf-bs.sf-mw-seite .sf-bs-sections > :not(:last-child) { margin-block-end: var(--sf-hm-abschnitt); }
.sf-mw-kennzeichnung { max-width: 72rem; margin-inline: auto; padding: var(--sf-hm-s2) var(--sf-hm-s4); }
.sf-mw-kennzeichnung--seite { box-sizing: border-box; width: min(var(--sf-content), calc(100% - var(--sf-gutter) * 2)); max-width: none; padding: var(--sf-hm-s1) 0 var(--sf-hm-s4); }
.sf-mw-kopf .sf-mw-kennzeichnung { max-width: none; margin: 0; padding: 0; }
.sf-mw-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); max-width: 72rem; margin-inline: auto; padding: var(--sf-hm-s5) var(--sf-hm-s4) 0; }
.sf-mw-kopf-text { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); align-content: start; min-width: 0; }
.sf-mw-kopf-kicker.sf-mw-kopf-kicker { margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-bs-accent-solid, var(--sf-ink)); }
.sf-mw-kopf-titel.sf-mw-kopf-titel { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); font-size: var(--sf-mw-h1); line-height: var(--sf-hb-seitentitel-zeile, var(--sf-hb-titel-zeile)); text-transform: uppercase; text-wrap: balance; color: var(--sf-ink); }
.sf-mw-kopf-sub.sf-mw-kopf-sub { margin: 0; max-width: 46ch; font-size: var(--sf-hb-text); color: var(--sf-ink); }
.sf-mw-kopf-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); padding-top: var(--sf-hm-s2); }
.sf-mw-kopf-bild { position: relative; margin: 0; aspect-ratio: var(--sf-hb-bild); overflow: hidden; background: var(--sf-surface); }
.sf-mw-kopf-bild > img:first-child, .sf-mw-kopf-bild > video:first-child { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-mw-kopf-bild .sf-mw-kopf-logo { position: absolute; top: var(--sf-hm-s4); left: var(--sf-hm-s4); width: auto; max-width: 45%; height: var(--sf-mw-logo); object-fit: contain; }
.sf-mw-kopf-motiv { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: calc(var(--sf-hm-s4) + var(--sf-mw-logo) + var(--sf-hm-s2)) var(--sf-hm-s5) var(--sf-hm-s4); }
.sf-bs .sf-mw-kopf-motiv .sf-bs-hero-kv { display: flex; align-items: center; justify-content: center; width: 100%; max-width: none; height: 100%; margin: 0; }
.sf-bs .sf-mw-kopf-motiv .sf-bs-hero-kv-img { width: auto; max-width: min(70%, var(--sf-bs-kv-width, 30rem)); height: auto; max-height: 100%; object-fit: contain; }
.sf-mw-kopf-bild figcaption { position: absolute; left: var(--sf-hm-s2); bottom: var(--sf-hm-s1); font-size: var(--sf-hb-mini); color: var(--sf-white); }
@container sf-lp (min-width: 1024px) {
.sf-mw-kopf { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--sf-hm-s7); align-items: end; padding-inline: var(--sf-hm-s5); padding-bottom: var(--sf-hm-s5); }
.sf-mw-kopf--video { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); align-items: stretch; padding-bottom: var(--sf-hm-s5); }
.sf-mw-kopf--video .sf-mw-kopf-bild { aspect-ratio: auto; min-height: 100%; }
}
@container sf-lp (min-width: 768px) {
.sf-bs.sf-mw-seite .sf-bs-toc { width: min(100% - 2 * var(--sf-hm-s4), 72rem - 2 * var(--sf-hm-s5)); margin-inline: auto; border-radius: var(--sf-radius); }
}
.sf-mw-modul { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); padding: var(--sf-hm-s5) var(--sf-hm-s4); background: var(--sf-surface); }
.sf-mw-modul-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s2); }
.sf-mw-regler { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); }
.sf-mw-regler-steuer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); align-content: start; }
.sf-mw-temp.sf-mw-temp { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--sf-hm-s3); margin: 0; }
.sf-mw-temp strong { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-size: var(--sf-mw-temp); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--sf-ink); }
.sf-mw-temp span { font-size: var(--sf-hb-text-klein); color: var(--sf-muted); }
.sf-mw-skala { display: grid; gap: var(--sf-hm-s1); }
.sf-mw-skala-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.sf-mw-skala input { width: 100%; min-height: var(--sf-hb-steuer-hoehe); accent-color: var(--sf-ink); }
.sf-mw-skala-enden { display: flex; justify-content: space-between; font-size: var(--sf-hb-mini); color: var(--sf-muted); font-variant-numeric: tabular-nums; }
.sf-mw-lagen.sf-mw-lagen { display: grid; gap: var(--sf-hm-s2); margin: 0; padding: 0; list-style: none; }
.sf-mw-lage { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rolle rolle" "text link"; gap: var(--sf-hm-s1) var(--sf-hm-s3); align-items: center; padding: var(--sf-hm-s3); background: var(--sf-white); border-left: var(--sf-mw-lage-rand) solid var(--sf-bs-accent-solid, var(--sf-ink)); }
.sf-mw-lage[data-sf-lage="0"] { border-left-color: var(--sf-line); }
.sf-mw-lage[data-sf-lage="zusatz"] { border-left-color: var(--sf-caution); }
.sf-mw-lage-rolle { grid-area: rolle; font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-muted); }
.sf-mw-lage-text { grid-area: text; min-width: 0; overflow-wrap: anywhere; font-size: var(--sf-hb-text-klein); font-weight: 700; color: var(--sf-ink); }
.sf-mw-lage-link.sf-mw-lage-link { grid-area: link; font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-ink); white-space: nowrap; }
.sf-mw-lage-link.sf-mw-lage-link::after { content: " ↗"; }
.sf-mw-stufen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); }
.sf-mw-stufe { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s2); }
.sf-mw-hinweis.sf-mw-hinweis { margin: 0; font-size: var(--sf-hb-fein); color: var(--sf-muted); }
@container sf-lp (min-width: 640px) {
.sf-mw-lage { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) auto; grid-template-areas: "rolle text link"; gap: var(--sf-hm-s3); }
}
@container sf-lp (min-width: 768px) {
.sf-mw-modul { padding: var(--sf-hm-s6); }
.sf-mw-regler { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sf-hm-s6); }
}
.sf-mw-einordnung { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); padding: var(--sf-hm-s5) var(--sf-hm-s4); border: 1px solid var(--sf-ink); }
.sf-mw-redaktion.sf-mw-redaktion { margin: 0; font-size: var(--sf-hb-fein); color: var(--sf-muted); }
.sf-mw-redaktion strong { font-size: var(--sf-hb-mini); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-ink); border: 1px solid var(--sf-ink); padding: var(--sf-hm-s1) var(--sf-hm-s2); margin-right: var(--sf-hm-s2); }
.sf-mw-einordnung-spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); }
.sf-mw-einordnung-h.sf-mw-einordnung-h { margin: 0 0 var(--sf-hm-s1); font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-ink); }
.sf-mw-einordnung ul { display: grid; gap: var(--sf-hm-s2); margin: 0; padding: 0; list-style: none; font-size: var(--sf-hb-text-klein); }
.sf-mw-einordnung p { font-size: var(--sf-hb-text-klein); }
@container sf-lp (min-width: 768px) {
.sf-mw-einordnung { padding: var(--sf-hm-s6); }
.sf-mw-einordnung-spalten { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: var(--sf-hm-s5); }
}
.sf-mw-club { display: grid; gap: var(--sf-hm-s3); align-items: center; padding: var(--sf-hm-s4); border: 1px solid var(--sf-club); }
.sf-mw-club-marke.sf-mw-club-marke { justify-self: start; margin: 0; padding: var(--sf-hm-s1) var(--sf-hm-s2); font-size: var(--sf-hb-mini); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-white); background: var(--sf-club); }
.sf-mw-club-text { display: grid; gap: var(--sf-hm-s1); }
.sf-mw-club-zeit.sf-mw-club-zeit { margin: 0; font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-club); }
@container sf-lp (min-width: 768px) {
.sf-mw-club { grid-template-columns: auto 1fr auto; gap: var(--sf-hm-s5); }
}
.sf-embed-root .sf-mw-kopf-titel.sf-mw-kopf-titel { font-size: var(--sf-mw-h1-shop); text-transform: none; }
.sf-mw-einsatz-antwort { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); padding-top: var(--sf-hm-s2); }
.sf-mw-einsatz-text.sf-mw-einsatz-text { margin: 0; max-width: 62ch; font-size: var(--sf-hb-text); color: var(--sf-ink); }
.sf-mw-schnitt { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); align-items: start; }
.sf-mw-schnitt-bild { display: grid; gap: var(--sf-hm-s2); margin: 0; padding: var(--sf-hm-s4); background: var(--sf-white); }
.sf-mw-schnitt-bild figcaption { font-size: var(--sf-hb-fein); font-weight: 700; color: var(--sf-ink); }
.sf-mw-schnitt-ansichten { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--sf-hm-s4); }
.sf-mw-schema { display: block; width: 100%; max-width: 14rem; height: auto; margin-inline: auto; }
.sf-mw-zone { fill: var(--sf-surface); stroke: var(--sf-muted); stroke-width: 1.5; }
.sf-mw-zone[data-sf-belegt] { fill: var(--sf-line); cursor: pointer; }
.sf-mw-zone[data-sf-aktiv] { fill: var(--sf-ink); }
.sf-mw-zonen-steuer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); }
.sf-mw-zonen-steuer .sf-hb-auswahl--chips.sf-hb-auswahl--chips { flex-wrap: wrap; }
.sf-mw-zonen-text.sf-mw-zonen-text { margin: 0; font-size: var(--sf-hb-text); color: var(--sf-ink); }
.sf-mw-zonen.sf-mw-zonen { display: grid; gap: var(--sf-hm-s3); margin: 0; }
.sf-mw-zonen dt { font-weight: 700; font-size: var(--sf-hb-text-klein); }
.sf-mw-zonen dd { margin: 0; font-size: var(--sf-hb-text-klein); }
@container sf-lp (min-width: 768px) {
.sf-mw-schnitt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sf-hm-s6); }
}
.sf-mw-picks { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-kopf-abstand); }
/* markenwelt-story.css */
.sf-mst-lesen { max-width: var(--sf-reading); margin-inline: auto; min-width: 0; }
.sf-mst-auge.sf-mst-auge { margin: 0 0 var(--sf-hm-s3); font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-muted); }
.sf-mst-h2.sf-mst-h2, .sf-mst-h3.sf-mst-h3 { margin: 0 0 var(--sf-hm-s4); font-family: var(--sf-body); font-weight: var(--sf-mst-zwischentitel-gewicht); line-height: 1.1; letter-spacing: -0.01em; text-transform: none; text-wrap: balance; color: var(--sf-ink); }
.sf-mst-h2.sf-mst-h2 { font-size: var(--sf-mst-h2); }
.sf-mst-h3.sf-mst-h3 { font-size: var(--sf-mst-h3); }
.sf-mst-absatz.sf-mst-absatz { margin: 0 0 var(--sf-hm-s4); font-size: var(--sf-hb-text); line-height: 1.6; color: var(--sf-text); }
.sf-mst-vermerk.sf-mst-vermerk { position: absolute; top: var(--sf-hm-s2); right: var(--sf-hm-s2); z-index: 2; margin: 0; padding: 2px 6px; font-size: var(--sf-size-10); line-height: 1.3; color: var(--sf-mst-hell); background: var(--sf-mst-vermerk-grund); }
.sf-mst-kopf { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--sf-mst-nacht); color: var(--sf-white); }
.sf-mst-kopf-bild { position: relative; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; }
.sf-mst-kopf-bild > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-mst-kopf-bild::after { content: ""; position: absolute; inset: 38% 0 0; background: var(--sf-mst-schleier); }
.sf-mst-kopf-text { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); margin-top: -13rem; padding: 0 var(--sf-hm-s5) var(--sf-hm-s6); min-width: 0; }
.sf-mst-kicker.sf-mst-kicker { display: flex; align-items: center; gap: var(--sf-hm-s3); margin: 0; font-family: var(--sf-body); font-size: var(--sf-hb-kapitel); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-mst-hell); }
.sf-mst-kicker-logo { flex: none; width: auto; height: 24px; }
.sf-mst-titel.sf-mst-titel { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); font-size: var(--sf-mst-titel); line-height: 0.94; text-transform: uppercase; text-wrap: balance; color: var(--sf-white); }
.sf-mst-vorspann.sf-mst-vorspann { margin: 0; max-width: 34em; font-size: var(--sf-size-17); line-height: 1.5; color: var(--sf-mst-hell); }
.sf-mst-kopf .sf-kooperation { margin: 0; }
.sf-mst-kopf-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-mst-hoer { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--sf-hm-s3) var(--sf-hm-s4); align-items: center; margin-top: var(--sf-hm-s2); padding-top: var(--sf-hm-s4); border-top: 1px solid var(--sf-mst-hell-linie); }
.sf-mst-hoer--shop { grid-template-columns: minmax(0, 1fr); }
.sf-mst-hoer--shop audio { width: 100%; }
.sf-mst-hoer-knopf.sf-mst-hoer-knopf { display: grid; place-items: center; width: 48px; height: 48px; margin: 0; padding: 0; border: 0; border-radius: var(--sf-radius); background: var(--sf-white); color: var(--sf-ink); cursor: pointer; }
.sf-mst-hoer-knopf svg { width: 18px; height: 18px; fill: currentColor; }
.sf-mst-hoer-knopf:focus-visible { outline: 2px solid var(--sf-white); outline-offset: 3px; }
.sf-mst-hoer-titel.sf-mst-hoer-titel { margin: 0; font-size: var(--sf-size-15); font-weight: 700; line-height: 1.3; color: var(--sf-white); }
.sf-mst-hoer-meta.sf-mst-hoer-meta { margin: 0; font-size: var(--sf-size-13); color: var(--sf-mst-hell-leise); font-variant-numeric: tabular-nums; }
.sf-mst-hoer-spur { grid-column: 1 / -1; position: relative; height: 3px; margin-top: var(--sf-hm-s1); background: var(--sf-mst-hell-linie); }
.sf-mst-hoer-fuellung { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--sf-white); }
.sf-mst-hoer-marke { position: absolute; top: -4px; width: 2px; height: 11px; background: var(--sf-mst-hell-leise); }
.sf-mst-hoer-zeile.sf-mst-hoer-zeile { grid-column: 1 / -1; min-height: 3em; margin: 0; font-size: var(--sf-size-15); line-height: 1.45; color: var(--sf-mst-hell); }
.sf-bs.sf-mw-seite .sf-bs-toc.sf-mst-band { background: var(--sf-surface); box-shadow: none; backdrop-filter: none; border-bottom: 1px solid var(--sf-line); border-radius: 0; }
.sf-bs .sf-mst-band .sf-bs-toc-list { gap: 0; padding-block: 0; }
.sf-bs .sf-mst-band .sf-bs-toc-link { padding: var(--sf-hm-s3) var(--sf-hm-s3) calc(var(--sf-hm-s3) - 2px); border-radius: 0; border-bottom: 2px solid transparent; font-size: var(--sf-size-14); font-weight: 600; color: var(--sf-muted); background: transparent; }
.sf-bs .sf-mst-band .sf-bs-toc-link--current { color: var(--sf-ink); border-bottom-color: var(--sf-ink); background: transparent; }
@media (hover: hover) {
.sf-bs .sf-mst-band .sf-bs-toc-link:not(.sf-bs-toc-link--current):hover { color: var(--sf-ink); background: transparent; }
}
.sf-mst-zahl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--sf-hm-s1) var(--sf-hm-s4); align-items: center; margin: 0 0 var(--sf-hm-s5); padding-block: var(--sf-hm-s4); border-block: 1px solid var(--sf-line); }
.sf-mst-zahl-wert { font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-weight: var(--sf-hb-zahl-gewicht, 800); font-size: var(--sf-mst-zahl); line-height: 0.82; color: var(--sf-ink); font-variant-numeric: tabular-nums; }
.sf-mst-zahl-text { font-size: var(--sf-size-15); line-height: 1.45; color: var(--sf-text); }
.sf-mst-zahl-text strong { display: block; font-size: var(--sf-size-16); color: var(--sf-ink); }
.sf-mst-zitat.sf-mst-zitat { margin: 0; padding: 0; border: 0; }
.sf-mst-zitat-text.sf-mst-zitat-text { margin: 0; font-family: var(--sf-hb-seitentitel-schrift, var(--sf-hb-titel-schrift, var(--sf-display))); font-weight: var(--sf-hb-seitentitel-gewicht, var(--sf-hb-titel-gewicht)); line-height: 1; text-wrap: balance; }
.sf-mst-zitat-quelle.sf-mst-zitat-quelle { margin: var(--sf-hm-s4) 0 0; font-size: var(--sf-size-12); line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; }
.sf-mst-zitat-quelle cite { font-style: normal; }
.sf-mst-zitat-quelle a { color: inherit; }
.sf-mst-zitat-satz.sf-mst-zitat-satz { margin: var(--sf-hm-s3) 0 0; font-size: var(--sf-hb-text); line-height: 1.5; color: var(--sf-text); }
.sf-mst-zitat--gross.sf-mst-zitat--gross { padding: var(--sf-hm-s7) var(--sf-hm-s5); background: var(--sf-mst-nacht); }
.sf-mst-zitat--gross .sf-mst-zitat-innen { max-width: 72rem; margin-inline: auto; }
.sf-mst-zitat--gross .sf-mst-zitat-text { font-size: var(--sf-mst-zitat-gross); color: var(--sf-white); }
.sf-mst-zitat--gross .sf-mst-zitat-quelle { padding-top: var(--sf-hm-s3); border-top: 1px solid var(--sf-mst-hell-linie); color: var(--sf-mst-hell-leise); }
.sf-mst-zitat--gross .sf-mst-zitat-satz { color: var(--sf-mst-hell); }
.sf-mst-zitat--zeile.sf-mst-zitat--zeile { margin-inline: 0; }
.sf-mst-zitat--zeile .sf-mst-zitat-innen { max-width: var(--sf-reading); margin-inline: auto; padding-top: var(--sf-hm-s4); border-top: 2px solid var(--sf-ink); }
.sf-mst-zitat--zeile .sf-mst-zitat-text { font-size: var(--sf-mst-zitat-zeile); color: var(--sf-ink); }
.sf-mst-zitat--zeile .sf-mst-zitat-quelle { margin-top: var(--sf-hm-s3); color: var(--sf-muted); }
.sf-mst-kapitelbild { position: relative; margin: 0; overflow: hidden; background: var(--sf-mst-nacht); }
.sf-mst-kapitelbild > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
.sf-mst-kapitelbild::after { content: ""; position: absolute; inset: 45% 0 0; background: var(--sf-mst-schleier-kapitel); }
.sf-mst-kapitelbild-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 0 var(--sf-hm-s5) var(--sf-hm-s5); }
.sf-mst-kapitelbild-text .sf-mst-auge { color: var(--sf-mst-hell); }
.sf-mst-kapitelbild-text .sf-mst-h2 { margin: 0; color: var(--sf-white); }
.sf-mst-stationen { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s6); }
.sf-mst-zeit { list-style: none; margin: var(--sf-hm-s5) 0 0; padding: 0; }
.sf-mst-zeit li { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--sf-hm-s3); margin: 0; padding-block: var(--sf-hm-s3); border-top: 1px solid var(--sf-ink); }
.sf-mst-zeit li:last-child { border-bottom: 1px solid var(--sf-ink); }
.sf-mst-zeit-wann { font-family: var(--sf-body); font-weight: var(--sf-mst-zwischentitel-gewicht); font-size: var(--sf-mst-station); line-height: 1.1; text-transform: none; color: var(--sf-ink); }
.sf-mst-zeit-text { font-size: var(--sf-size-16); line-height: 1.45; color: var(--sf-text); }
.sf-mst-seite { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); align-content: start; min-width: 0; }
.sf-mst-detail { margin: 0; }
.sf-mst-detail > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--sf-line); }
.sf-mst-bildzeile.sf-mst-bildzeile { margin: var(--sf-hm-s2) 0 0; font-size: var(--sf-size-13); line-height: 1.45; color: var(--sf-muted); }
.sf-mst-produkte { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); margin: 0; padding: 0; list-style: none; }
.sf-mst-produkt.sf-mst-produkt { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--sf-hm-s4); align-items: center; padding: var(--sf-hm-s3) var(--sf-hm-s4) var(--sf-hm-s3) var(--sf-hm-s3); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-white); color: var(--sf-text); text-decoration: none; }
.sf-mst-produkt > img, .sf-mst-produkt-leer { display: block; width: 96px; height: 96px; object-fit: contain; background: var(--sf-white); }
.sf-mst-produkt-text { display: grid; gap: 2px; min-width: 0; }
.sf-mst-produkt-kicker { font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-muted); }
.sf-mst-produkt-name { font-size: var(--sf-size-16); font-weight: 700; line-height: 1.25; color: var(--sf-ink); }
.sf-mst-produkt-satz { font-size: var(--sf-size-14); line-height: 1.4; }
.sf-mst-produkt-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--sf-hm-s1) var(--sf-hm-s3); margin-top: var(--sf-hm-s2); font-size: var(--sf-size-13); }
.sf-mst-preis { font-weight: 700; color: var(--sf-ink); }
.sf-mst-preis small, .sf-mst-preis-leer { font-weight: 400; color: var(--sf-muted); }
.sf-mst-pfeil { font-weight: 700; color: var(--sf-ink); white-space: nowrap; }
@media (hover: hover) {
.sf-mst-produkt:hover .sf-mst-produkt-name { text-decoration: underline; }
}
.sf-mst-wege { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2) var(--sf-hm-s5); margin: var(--sf-hm-s4) 0 0; font-size: var(--sf-size-15); font-weight: 600; }
.sf-mst-wege a.sf-mst-weg { color: var(--sf-ink); text-decoration: underline; text-underline-offset: 3px; }
.sf-mst-tipp-kopf { margin-bottom: var(--sf-hm-s5); }
.sf-mst-tipp-feld { background: var(--sf-mst-nacht); color: var(--sf-white); }
.sf-mst-tipp-raster { display: grid; grid-template-columns: minmax(0, 1fr); }
.sf-mst-tipp-bild { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; }
.sf-mst-tipp-bild > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-mst-tipp-hinweis.sf-mst-tipp-hinweis { position: absolute; left: var(--sf-hm-s3); top: var(--sf-hm-s3); z-index: 2; margin: 0; padding: 5px 8px; font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-ink); background: var(--sf-white); }
.sf-mst-tipp-punkte { position: absolute; inset: 0; z-index: 3; }
.sf-mst-tipp-feld.sf-gc-reiter { display: block; }
.sf-mst-punkt.sf-mst-punkt { position: absolute; display: grid; place-items: center; width: 34px; height: 34px; margin: -17px 0 0 -17px; padding: 0; border: 2px solid var(--sf-white); border-radius: var(--sf-radius); background: var(--sf-mst-punkt-grund); color: var(--sf-white); font-family: var(--sf-hb-zahl-schrift, var(--sf-display)); font-weight: 800; font-size: var(--sf-mst-punkt); line-height: 1; cursor: pointer; }
.sf-mst-punkt[aria-selected="true"] { background: var(--sf-white); color: var(--sf-ink); }
.sf-mst-punkt[aria-selected="true"]::after { content: ""; position: absolute; inset: -8px; border: 2px solid var(--sf-white); animation: sf-mst-ring 1.6s ease-out infinite; }
.sf-mst-punkt:focus-visible { outline: 2px solid var(--sf-white); outline-offset: 4px; }
@keyframes sf-mst-ring { from { opacity: 0.9; transform: scale(0.8); } to { opacity: 0; transform: scale(1.35); } }
.sf-mst-tipp-tafeln { display: grid; gap: var(--sf-hm-s5); align-content: center; padding: var(--sf-hm-s5); min-width: 0; }
.sf-mst-tafel-teil.sf-mst-tafel-teil { margin: 0 0 var(--sf-hm-s1); font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-mst-hell-leise); }
.sf-mst-tafel-titel.sf-mst-tafel-titel { display: flex; align-items: baseline; gap: var(--sf-hm-s3); margin: 0 0 var(--sf-hm-s2); font-family: var(--sf-body); font-weight: var(--sf-mst-zwischentitel-gewicht); font-size: var(--sf-mst-tafel-titel); line-height: 1.1; text-transform: none; color: var(--sf-white); }
.sf-mst-tafel-nr { color: var(--sf-mst-hell-leise); }
.sf-mst-tafel-text.sf-mst-tafel-text { margin: 0; font-size: var(--sf-hb-text); line-height: 1.5; color: var(--sf-mst-hell); }
.sf-mst-tafel-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sf-hm-s3); padding-top: var(--sf-hm-s3); border-top: 1px solid var(--sf-mst-hell-linie); font-size: var(--sf-size-13); color: var(--sf-mst-hell-leise); font-variant-numeric: tabular-nums; }
.sf-mst-weiter.sf-mst-weiter { min-height: 40px; padding: 0 var(--sf-hm-s4); border: 1px solid var(--sf-white); border-radius: var(--sf-radius); background: transparent; color: var(--sf-white); font: 600 var(--sf-size-14) / 1 var(--sf-body); cursor: pointer; }
.sf-mst-tipp-fuss.sf-mst-tipp-fuss { margin: 0; padding: var(--sf-hm-s3) var(--sf-hm-s5) var(--sf-hm-s4); border-top: 1px solid var(--sf-mst-hell-linie); font-size: var(--sf-size-13); color: var(--sf-mst-hell-leise); }
.sf-mst-tipp-unten { margin-top: var(--sf-hm-s5); }
.sf-mst-paar { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s5); }
.sf-mst-paar-bilder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sf-hm-s2); }
.sf-mst-paar-bilder figure { margin: 0; min-width: 0; }
.sf-mst-paar-bilder img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 3; object-fit: cover; }
.sf-mst-farben { display: grid; gap: var(--sf-hm-s1); margin: 0 0 var(--sf-hm-s4); font-size: var(--sf-size-13); color: var(--sf-muted); }
.sf-mst-farbzeile { display: flex; align-items: center; gap: 6px; }
.sf-mst-farbfeld { display: inline-block; flex: none; width: 14px; height: 14px; border: 1px solid var(--sf-ink); background: var(--sf-mst-farbe, var(--sf-surface)); }
.sf-mst-farbfeld:last-of-type { margin-right: var(--sf-hm-s1); }
.sf-mst-schluss { padding: var(--sf-hm-s7) var(--sf-hm-s5); background: var(--sf-mst-nacht); color: var(--sf-mst-hell); }
.sf-mst-schluss-innen { max-width: 72rem; margin-inline: auto; }
.sf-mst-schluss-logo { display: block; width: auto; height: 34px; margin-bottom: var(--sf-hm-s4); }
.sf-mst-schluss .sf-mst-h2 { color: var(--sf-white); }
.sf-mst-schluss-text.sf-mst-schluss-text { margin: 0; font-size: var(--sf-hb-text); color: var(--sf-mst-hell); }
.sf-mst-pack { display: grid; grid-template-columns: minmax(0, 1fr); margin: var(--sf-hm-s5) 0 var(--sf-hm-s6); padding: 0; list-style: none; }
.sf-mst-pack li { margin: 0; border-top: 1px solid var(--sf-mst-hell-linie); }
.sf-mst-pack li:last-child { border-bottom: 1px solid var(--sf-mst-hell-linie); }
.sf-mst-pack a.sf-mst-pack-link { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--sf-hm-s4); align-items: center; padding-block: var(--sf-hm-s3); color: inherit; text-decoration: none; }
.sf-mst-pack-bild, .sf-mst-pack-leer { display: block; width: 72px; height: 72px; object-fit: contain; background: var(--sf-white); }
.sf-mst-pack-text { display: grid; gap: 2px; min-width: 0; }
.sf-mst-pack-rolle { font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-mst-hell-leise); }
.sf-mst-pack-name { font-size: var(--sf-size-16); font-weight: 700; line-height: 1.25; color: var(--sf-white); }
.sf-mst-pack-satz { font-size: var(--sf-size-13); color: var(--sf-mst-hell-leise); }
.sf-mst-pack .sf-mst-preis, .sf-mst-pack .sf-mst-pfeil { color: var(--sf-white); }
.sf-mst-pack .sf-mst-preis small { color: var(--sf-mst-hell-leise); }
.sf-mst-pack .sf-mst-pfeil { font-size: var(--sf-size-14); }
.sf-mst-preis small { white-space: nowrap; }
@media (hover: hover) {
.sf-mst-pack a.sf-mst-pack-link:hover .sf-mst-pack-name { text-decoration: underline; }
}
.sf-mst-knoepfe { display: flex; flex-wrap: wrap; gap: var(--sf-hm-s2); }
.sf-mst-knopf.sf-mst-knopf { display: inline-flex; align-items: center; min-height: 48px; padding: 0 var(--sf-hm-s5); border: 1px solid var(--sf-white); border-radius: var(--sf-radius); font-size: var(--sf-size-15); font-weight: 700; text-decoration: none; }
.sf-mst-knopf--voll.sf-mst-knopf--voll { background: var(--sf-white); color: var(--sf-ink); }
.sf-mst-knopf--linie.sf-mst-knopf--linie { background: transparent; color: var(--sf-white); }
.sf-mst-service.sf-mst-service { margin: var(--sf-hm-s5) 0 0; font-size: var(--sf-size-13); color: var(--sf-mst-hell-leise); }
@container sf-lp (min-width: 720px) {
.sf-mst-kopf-bild { aspect-ratio: 16 / 11; }
.sf-mst-kopf-text { margin-top: -15rem; padding: 0 var(--sf-hm-s7) var(--sf-hm-s6); max-width: 48rem; }
.sf-mst-kapitelbild > img { aspect-ratio: 16 / 9; }
.sf-mst-kapitelbild-text { padding: 0 var(--sf-hm-s7) var(--sf-hm-s6); }
.sf-mst-produkte--zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-mst-pack { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sf-hm-s6); }
.sf-mst-pack li:nth-last-child(2) { border-bottom: 1px solid var(--sf-mst-hell-linie); }
}
@container sf-lp (min-width: 1024px) {
.sf-mst-kopf { grid-template-columns: minmax(0, 1fr) var(--sf-mst-kopf-bild); min-height: var(--sf-mst-kopf-hoehe); }
.sf-mst-kopf-bild { order: 2; aspect-ratio: auto; height: 100%; min-height: var(--sf-mst-kopf-hoehe); }
.sf-mst-kopf-bild::after { display: none; }
.sf-mst-kopf-text { order: 1; align-content: end; max-width: none; margin: 0; padding: var(--sf-hm-s7) calc(var(--sf-hm-s7) + var(--sf-hm-s4)); }
.sf-mst-vorspann.sf-mst-vorspann { font-size: var(--sf-size-20); }
.sf-mst-zitat--gross.sf-mst-zitat--gross { padding: calc(var(--sf-hm-s7) * 1.8) var(--sf-hm-s7) calc(var(--sf-hm-s7) * 1.5); }
.sf-mst-kapitelbild > img { aspect-ratio: 1440 / 640; }
.sf-mst-kapitelbild-text { padding: 0 calc(var(--sf-hm-s7) + var(--sf-hm-s4)) var(--sf-hm-s7); }
.sf-mst-stationen { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sf-hm-s7); align-items: start; }
.sf-mst-stationen .sf-mst-lesen { max-width: none; margin: 0; }
.sf-mst-tipp-raster { grid-template-columns: minmax(0, 1fr) 400px; }
.sf-mst-tipp-tafeln { padding: var(--sf-hm-s7) var(--sf-hm-s6); }
.sf-mst-paar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sf-hm-s7); align-items: center; }
.sf-mst-pack { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--sf-hm-s5); margin-top: var(--sf-hm-s7); }
.sf-mst-pack li, .sf-mst-pack li:last-child, .sf-mst-pack li:nth-last-child(2) { border: 1px solid var(--sf-mst-hell-linie); }
.sf-mst-pack a.sf-mst-pack-link { grid-template-columns: minmax(0, 1fr); gap: var(--sf-hm-s3); padding: 0 0 var(--sf-hm-s4); }
.sf-mst-pack-bild, .sf-mst-pack-leer { width: 100%; height: auto; aspect-ratio: 1 / 1; }
.sf-mst-pack-text, .sf-mst-pack a.sf-mst-pack-link > .sf-mst-pfeil { padding-inline: var(--sf-hm-s4); }
.sf-mst-schluss { padding: calc(var(--sf-hm-s7) * 1.8) var(--sf-hm-s7) calc(var(--sf-hm-s7) * 1.5); }
.sf-mst-schluss-kopf { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sf-hm-s7); align-items: end; }
}
.sf-bs.sf-mst-seite .sf-bs-h2 { font-family: var(--sf-body); font-weight: var(--sf-mst-zwischentitel-gewicht); line-height: 1.1; letter-spacing: -0.01em; text-transform: none; font-size: var(--sf-mst-h2); text-wrap: balance; color: var(--sf-ink); }
.sf-mst-seite .sf-hb-h2.sf-hb-h2 { font-family: var(--sf-body); font-weight: var(--sf-mst-zwischentitel-gewicht); line-height: 1.1; letter-spacing: -0.01em; text-transform: none; font-size: var(--sf-mst-h2); }
.sf-bs.sf-mst-seite .sf-bs-para + .sf-bs-para { margin-top: var(--sf-hm-s4); }
.sf-bs.sf-mst-seite .sf-bs-area { min-height: 0; padding: var(--sf-hm-s5); border: 1px solid var(--sf-line); border-radius: var(--sf-radius); background: var(--sf-white); }
.sf-bs.sf-mst-seite .sf-bs-area-label { color: var(--sf-ink); }
.sf-bs.sf-mst-seite .sf-bs-area-text { color: var(--sf-text); }
.sf-bs.sf-mst-seite .sf-bs-area-more { color: var(--sf-ink); }
.sf-mst-voll.sf-mst-voll { width: 100cqi; max-width: 100cqi; margin-inline: calc(50% - 50cqi); }
@media (prefers-reduced-motion: reduce) {
.sf-mst-punkt[aria-selected="true"]::after { animation: none; opacity: 0.6; }
}
/* goldene-rides.css */
.sf-gr { position: relative; min-height: 100vh; overflow: hidden; background-color: var(--sf-gr-cream); font-family: var(--sf-body); font-size: max(var(--sf-body-size), var(--sf-text-min)); line-height: 1.55; color: var(--sf-ink); }
.sf-gr .sf-gr-page-bg { pointer-events: none; position: absolute; inset: 0; z-index: -10; background: var(--sf-gr-page-bg); }
.sf-gr .sf-gr-heading { margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); line-height: var(--sf-heading-leading); text-transform: var(--sf-heading-case); text-wrap: balance; overflow-wrap: anywhere; }
.sf-gr h1.sf-gr-heading { font-size: var(--sf-title); letter-spacing: -0.018em; }
.sf-gr h2.sf-gr-heading { font-size: var(--sf-section-title); letter-spacing: normal; }
.sf-gr h3.sf-gr-heading { font-size: var(--sf-card-title); letter-spacing: normal; }
.sf-gr .sf-gr-logo, .sf-gr .sf-gr-header-mag, .sf-gr .sf-gr-header-shop, .sf-gr .sf-gr-hero-cta, .sf-gr .sf-gr-cat-link, .sf-gr .sf-gr-cat-chip, .sf-gr .sf-gr-cat-go, .sf-gr .sf-gr-all-link, .sf-gr .sf-gr-pick, .sf-gr .sf-gr-vis-cta, .sf-gr .sf-gr-brand, .sf-gr .sf-gr-club-cta, .sf-gr .sf-gr-band-cta, .sf-gr .sf-gr-article { color: inherit; text-decoration: none; }
.sf-gr .sf-gr-header { position: sticky; top: var(--sf-kopf-klebt, 0px); z-index: 30; border-bottom: 1px solid var(--sf-gr-border); background-color: color-mix(in oklab, var(--sf-gr-surface) 90%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sf-gr .sf-gr-header-inner { margin-inline: auto; display: flex; height: 3.5rem; max-width: 72rem; align-items: center; justify-content: space-between; gap: 0.75rem; padding-inline: 1rem; }
.sf-gr .sf-gr-logo { display: flex; flex-shrink: 0; align-items: center; }
.sf-gr .sf-gr-logo-img { display: block; height: 1.5rem; width: auto; }
.sf-gr .sf-gr-header-actions { display: flex; flex-shrink: 0; align-items: center; gap: 0.5rem; }
.sf-gr .sf-gr-header-mag { display: none; border: 1px solid var(--sf-gr-border); border-radius: calc(infinity * 1px); padding: 0.5rem 1rem; font-size: var(--sf-gr-fs-14); line-height: calc(1.25 / 0.875); font-weight: 700; color: var(--sf-gr-text); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-header-shop { display: inline-flex; align-items: center; gap: 0.375rem; border-radius: calc(infinity * 1px); padding: 0.5rem 1rem; font-size: var(--sf-gr-fs-14); line-height: calc(1.25 / 0.875); font-weight: 700; color: var(--sf-white); background: var(--sf-gr-gold-deep); transition: scale 150ms cubic-bezier(0.4, 0, 0.2, 1); }
@container sf-lp (min-width: 640px) {
.sf-gr .sf-gr-logo-img { height: 1.75rem; }
.sf-gr .sf-gr-header-mag { display: inline-flex; }
}
.sf-gr .sf-gr-hero { position: relative; display: flex; min-height: 58vh; align-items: center; overflow: hidden; }
.sf-gr .sf-gr-hero-media { position: absolute; inset: 0; }
.sf-gr .sf-gr-hero-picture { display: contents; }
.sf-gr .sf-gr-hero-img { display: block; height: 100%; width: 100%; max-width: 100%; object-fit: cover; object-position: 62% 42%; }
.sf-gr .sf-gr-hero-slot { height: 100%; width: 100%; background: var(--sf-gr-hero-slot); }
.sf-gr .sf-gr-hero-shade { position: absolute; inset: 0; background: var(--sf-gr-hero-shade); }
.sf-gr .sf-gr-hero-leaves { pointer-events: none; position: absolute; inset: 0; z-index: 5; overflow: hidden; }
.sf-gr .sf-gr-leaf { display: block; position: absolute; transform: rotate(var(--sf-gr-leaf-rotate, 0deg)); }
.sf-gr .sf-gr-hero-inner { position: relative; z-index: 10; margin-inline: auto; width: 100%; max-width: 72rem; padding: 5rem 1rem; }
.sf-gr .sf-gr-hero-copy { max-width: 36rem; text-align: left; }
.sf-gr .sf-gr-hero-eyebrow { margin: 0; font-size: var(--sf-gr-fs-12); line-height: calc(1 / 0.75); font-weight: 700; text-transform: uppercase; letter-spacing: 0.28em; color: color-mix(in oklab, var(--sf-white) 90%, transparent); }
.sf-gr .sf-gr-hero-title { color: var(--sf-white); text-shadow: var(--sf-gr-text-shadow); }
.sf-gr .sf-gr-hero-accent { color: var(--sf-gr-gold); }
.sf-gr .sf-gr-hero-subline { margin: 0; max-width: 32rem; font-size: var(--sf-gr-fs-20); line-height: calc(1.75 / 1.25); font-weight: 700; color: var(--sf-white); text-shadow: var(--sf-gr-text-shadow); }
.sf-gr .sf-gr-hero-intro { margin: 0; max-width: 32rem; font-size: var(--sf-gr-fs-14); line-height: 1.625; color: color-mix(in oklab, var(--sf-white) 90%, transparent); }
.sf-gr .sf-gr-hero-ctas { margin-top: 2rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.sf-gr .sf-gr-hero-cta { display: inline-flex; align-items: center; border-radius: calc(6px + 4px); padding: 0.75rem 1.5rem; font-size: var(--sf-gr-fs-16); line-height: 1.5; font-weight: 700; color: var(--sf-white); transition: scale 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-hero-cta--blue, .sf-gr .sf-gr-hero-cta--gold { gap: 0.5rem; box-shadow: var(--sf-gr-shadow-xl); }
.sf-gr .sf-gr-hero-cta--blue { background: var(--sf-gr-blue); }
.sf-gr .sf-gr-hero-cta--gold { background: var(--sf-gr-gold-deep); }
.sf-gr .sf-gr-hero-cta--ghost { border: 1px solid color-mix(in oklab, var(--sf-white) 55%, transparent); background-color: color-mix(in oklab, var(--sf-gr-black) 10%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@container sf-lp (max-width: 640px) {
.sf-gr .sf-gr-hero-img { object-position: 36% 38%; }
}
@container sf-lp (min-width: 640px) {
.sf-gr .sf-gr-hero { min-height: 64vh; }
.sf-gr .sf-gr-hero-inner { padding-block: 6rem; }
.sf-gr .sf-gr-hero-subline { font-size: var(--sf-gr-fs-24); line-height: calc(2 / 1.5); }
.sf-gr .sf-gr-hero-intro { font-size: var(--sf-gr-fs-16); }
}
.sf-gr .sf-gr-body { position: relative; margin-inline: auto; max-width: 72rem; padding: 1.5rem 1rem 3.5rem; }
.sf-gr .sf-gr-body > :not(:last-child) { margin-block: 0 4rem; }
.sf-gr .sf-gr-section { position: relative; z-index: 10; scroll-margin-top: 5rem; }
.sf-gr .sf-gr-head { text-align: left; }
.sf-gr .sf-gr-head--center { text-align: center; }
.sf-gr .sf-gr-eyebrow { margin: 0; font-size: var(--sf-gr-fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: var(--sf-gr-gold-deep); }
.sf-gr h2.sf-gr-head-title { letter-spacing: -0.025em; color: var(--sf-gr-text); }
.sf-gr .sf-gr-head-intro { margin: 0; max-width: 42rem; font-size: var(--sf-gr-fs-14); line-height: calc(1.25 / 0.875); color: var(--sf-gr-muted); }
@container sf-lp (min-width: 640px) {
.sf-gr .sf-gr-body { padding-top: 2.5rem; padding-bottom: 5rem; }
.sf-gr .sf-gr-body > :not(:last-child) { margin-block: 0 6rem; }
.sf-gr .sf-gr-head-intro { font-size: var(--sf-gr-fs-16); line-height: 1.5; }
}
.sf-gr .sf-gr-slot { height: 100%; width: 100%; }
.sf-gr .sf-gr-slot[data-sf-tone="gold"] { background: var(--sf-gr-slot-gold); }
.sf-gr .sf-gr-slot[data-sf-tone="forest"] { background: var(--sf-gr-slot-forest); }
.sf-gr .sf-gr-slot[data-sf-tone="dusk"] { background: var(--sf-gr-slot-dusk); }
.sf-gr .sf-gr-cats { margin-top: 2rem; display: grid; gap: 1rem; }
.sf-gr .sf-gr-cat { position: relative; display: flex; min-height: 240px; flex-direction: column; justify-content: flex-end; overflow: hidden; border: 1px solid color-mix(in oklab, var(--sf-white) 40%, transparent); border-radius: calc(6px + 12px); box-shadow: var(--sf-gr-shadow-sm); transition: translate 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-cat--lead { min-height: 390px; }
.sf-gr .sf-gr-cat-link { position: absolute; inset: 0; z-index: 0; }
.sf-gr .sf-gr-cat-img { pointer-events: none; position: absolute; inset: 0; display: block; height: 100%; width: 100%; max-width: 100%; object-fit: cover; transition: scale 700ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-cat-slot, .sf-gr .sf-gr-cat-shade { pointer-events: none; position: absolute; inset: 0; }
.sf-gr .sf-gr-cat-shade { background: var(--sf-gr-cat-shade); }
.sf-gr .sf-gr-cat-icon { pointer-events: none; position: absolute; left: 1rem; top: 1rem; display: grid; height: 2.5rem; width: 2.5rem; place-items: center; border-radius: calc(6px + 4px); color: var(--sf-white); background: var(--sf-gr-glass-14); box-shadow: var(--sf-gr-ring-white-25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sf-gr .sf-gr-cat-copy { pointer-events: none; position: relative; z-index: 0; padding: 1.25rem; color: var(--sf-white); }
.sf-gr .sf-gr-cat-title { display: block; font-size: var(--sf-gr-fs-18); line-height: 1.25; font-weight: 800; filter: var(--sf-gr-drop); }
.sf-gr .sf-gr-cat-blurb { margin-top: 0.25rem; display: -webkit-box; min-height: 2.4rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--sf-gr-fs-14); line-height: calc(1.25 / 0.875); color: color-mix(in oklab, var(--sf-white) 85%, transparent); }
.sf-gr .sf-gr-cat-links { pointer-events: auto; position: relative; z-index: 10; margin-top: 0.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.sf-gr .sf-gr-cat-chip, .sf-gr .sf-gr-cat-go { display: inline-flex; align-items: center; border-radius: calc(infinity * 1px); background: var(--sf-gr-glass-18); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-cat-chip { gap: 0.25rem; padding: 0.375rem 0.75rem; font-size: var(--sf-gr-fs-12); line-height: calc(1 / 0.75); font-weight: 700; }
.sf-gr .sf-gr-cat-go { height: 2rem; width: 2rem; justify-content: center; }
.sf-gr .sf-gr-all { margin-top: 1.75rem; text-align: center; }
.sf-gr .sf-gr-all-link { display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid var(--sf-gr-border); border-radius: calc(infinity * 1px); padding: 0.625rem 1.25rem; font-size: var(--sf-gr-fs-14); line-height: calc(1.25 / 0.875); font-weight: 700; color: var(--sf-gr-text); transition: scale 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-all-arrow { transition: translate 150ms cubic-bezier(0.4, 0, 0.2, 1); }
@container sf-lp (min-width: 640px) {
.sf-gr .sf-gr-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-gr .sf-gr-all-link { font-size: var(--sf-gr-fs-16); line-height: 1.5; }
}
@container sf-lp (min-width: 1024px) {
.sf-gr .sf-gr-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); }
.sf-gr .sf-gr-cat--lead { grid-column: span 2 / span 2; grid-row: span 2 / span 2; }
}
.sf-gr .sf-gr-rail-wrap { position: relative; margin-top: 2rem; }
.sf-gr .sf-gr-rail-btn { position: absolute; top: 50%; display: none; align-items: center; justify-content: center; border: 0; border-radius: calc(infinity * 1px); padding: 0.5rem; background-color: var(--sf-gr-surface); box-shadow: var(--sf-gr-shadow-md); cursor: pointer; transition: scale 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-rail-btn--prev { left: 0; translate: -0.75rem -50%; }
.sf-gr .sf-gr-rail-btn--next { right: 0; translate: 0.75rem -50%; }
.sf-gr .sf-gr-rail-icon { color: var(--sf-gr-text); }
.sf-gr .sf-gr-rail { display: flex; scroll-snap-type: x mandatory; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; -ms-overflow-style: none; scrollbar-width: none; }
.sf-gr .sf-gr-rail::-webkit-scrollbar { display: none; }
.sf-gr .sf-gr-rail-item { width: 250px; flex-shrink: 0; scroll-snap-align: start; }
@container sf-lp (min-width: 640px) {
.sf-gr .sf-gr-rail-btn { display: flex; }
.sf-gr .sf-gr-rail-item { width: 270px; }
}
.sf-gr .sf-gr-rail-btn[hidden] { display: none; }
@keyframes sf-gr-pulse { 50% { opacity: 0.5; } }
.sf-gr .sf-gr-skel { height: 380px; overflow: hidden; border: 1px solid var(--sf-gr-border); border-radius: calc(6px + 8px); background-color: var(--sf-gr-surface); animation: sf-gr-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.sf-gr .sf-gr-skel-media { height: 190px; background-color: var(--sf-gr-surface-muted); }
.sf-gr .sf-gr-skel-body { padding: 1rem; }
.sf-gr .sf-gr-skel-body > :not(:last-child) { margin-block: 0 0.75rem; }
.sf-gr .sf-gr-skel-bar { height: 1.25rem; width: 100%; border-radius: 0.25rem; background-color: var(--sf-gr-surface-muted); }
.sf-gr .sf-gr-skel-bar--brand { height: 0.75rem; width: 4rem; }
.sf-gr .sf-gr-skel-bar--cta { height: 2.25rem; }
.sf-gr .sf-gr-pick { display: flex; height: 380px; flex-direction: column; overflow: hidden; border: 1px solid var(--sf-gr-border); border-radius: calc(6px + 8px); background-color: var(--sf-gr-surface); transition: translate 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-pick-media { position: relative; display: flex; height: 190px; align-items: center; justify-content: center; border-bottom: 1px solid var(--sf-gr-border); background-color: var(--sf-white); padding: 1.25rem; }
.sf-gr .sf-gr-pick-img { display: block; height: 100%; width: 100%; max-width: 100%; object-fit: contain; transition: scale 500ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-pick-label, .sf-gr .sf-gr-pick-discount { position: absolute; top: 0.75rem; border-radius: calc(infinity * 1px); font-weight: 900; color: var(--sf-white); }
.sf-gr .sf-gr-pick-label { left: 0.75rem; padding: 0.375rem 0.75rem; font-size: var(--sf-gr-fs-9); text-transform: uppercase; letter-spacing: 0.05em; }
.sf-gr .sf-gr-pick-discount { right: 0.75rem; padding: 0.25rem 0.625rem; font-size: var(--sf-gr-fs-12); line-height: calc(1 / 0.75); background: var(--sf-gr-gold-deep); }
.sf-gr .sf-gr-tone--gold { background: var(--sf-gr-tone-gold); }
.sf-gr .sf-gr-tone--forest { background: var(--sf-gr-tone-forest); }
.sf-gr .sf-gr-tone--dusk { background: var(--sf-gr-tone-dusk); }
.sf-gr .sf-gr-pick-body { display: flex; flex: 1; flex-direction: column; padding: 1rem; }
.sf-gr .sf-gr-pick-brand { font-size: var(--sf-gr-fs-10); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--sf-gr-muted); }
.sf-gr .sf-gr-pick-name { display: -webkit-box; min-height: 2.5rem; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: var(--sf-gr-text); }
.sf-gr .sf-gr-pick-reason { margin: 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--sf-gr-fs-12); line-height: 1.625; color: var(--sf-gr-muted); }
.sf-gr .sf-gr-pick-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; padding-top: 0.75rem; }
.sf-gr .sf-gr-pick-price { display: block; font-size: var(--sf-gr-fs-16); line-height: 1.5; font-weight: 800; color: inherit; }
.sf-gr .sf-gr-pick-price--sale { color: var(--sf-gr-gold-deep); }
.sf-gr .sf-gr-pick-was { font-size: var(--sf-gr-fs-11); text-decoration-line: line-through; color: var(--sf-gr-muted); }
.sf-gr .sf-gr-pick-go { display: grid; height: 2.25rem; width: 2.25rem; flex-shrink: 0; place-items: center; border-radius: calc(infinity * 1px); color: var(--sf-white); background: var(--sf-gr-blue); transition: scale 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-vis { position: relative; overflow: hidden; border-radius: 2rem; color: var(--sf-white); background: var(--sf-gr-vis-bg); box-shadow: var(--sf-gr-shadow-xl); }
.sf-gr .sf-gr-vis-glow { position: absolute; inset: 0; opacity: 0.35; background: var(--sf-gr-vis-glow); }
.sf-gr .sf-gr-vis-grid { position: relative; display: grid; min-height: 390px; }
.sf-gr .sf-gr-vis-copy { display: flex; flex-direction: column; justify-content: center; padding: 1.75rem; }
.sf-gr .sf-gr-vis-eyebrow { display: inline-flex; width: fit-content; align-items: center; gap: 0.375rem; border-radius: calc(infinity * 1px); padding: 0.25rem 0.75rem; font-size: var(--sf-gr-fs-11); font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sf-white); background-color: color-mix(in oklab, var(--sf-white) 15%, transparent); box-shadow: var(--sf-gr-ring-white-25); }
.sf-gr .sf-gr-vis-title { max-width: 36rem; color: var(--sf-white); }
.sf-gr .sf-gr-vis-text { margin: 0; max-width: 36rem; font-size: var(--sf-gr-fs-14); line-height: 1.625; color: color-mix(in oklab, var(--sf-white) 80%, transparent); }
.sf-gr .sf-gr-vis-cta { margin-top: 1.5rem; display: inline-flex; width: fit-content; align-items: center; gap: 0.5rem; border-radius: calc(6px + 4px); padding: 0.75rem 1.25rem; font-size: var(--sf-gr-fs-14); line-height: calc(1.25 / 0.875); font-weight: 800; color: var(--sf-white); background-color: var(--sf-gr-sky); transition: scale 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-vis-media { position: relative; min-height: 260px; overflow: hidden; }
.sf-gr .sf-gr-vis-img { display: block; height: 100%; width: 100%; max-width: 100%; object-fit: cover; object-position: 60% 45%; }
.sf-gr .sf-gr-vis-logo { position: absolute; right: 0.75rem; top: 0.75rem; border-radius: 6px; padding: 0.625rem 0.875rem; background-color: color-mix(in oklab, var(--sf-white) 95%, transparent); box-shadow: var(--sf-gr-shadow-md); }
.sf-gr .sf-gr-vis-logo-img { display: block; height: 1.75rem; width: auto; max-width: 100%; }
.sf-gr .sf-gr-vis-points { position: relative; display: grid; border: 0 solid var(--sf-gr-white-15); border-top-width: 1px; }
.sf-gr .sf-gr-vis-point { display: flex; gap: 0.75rem; border: 0 solid var(--sf-gr-white-15); padding: 1.25rem; }
.sf-gr .sf-gr-vis-point-icon { display: grid; height: 2.25rem; width: 2.25rem; flex-shrink: 0; place-items: center; border: 1px solid var(--sf-gr-amber-60); border-radius: calc(infinity * 1px); color: var(--sf-gr-amber-light); }
.sf-gr .sf-gr-vis-point-title { color: var(--sf-white); }
.sf-gr .sf-gr-vis-point-text { margin: 0; font-size: var(--sf-gr-fs-12); line-height: 1.625; color: color-mix(in oklab, var(--sf-white) 65%, transparent); }
@container sf-lp (min-width: 640px) {
.sf-gr .sf-gr-vis-copy { padding: 2.5rem; }
.sf-gr .sf-gr-vis-text { font-size: var(--sf-gr-fs-16); }
.sf-gr .sf-gr-vis-points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-gr .sf-gr-vis-point { border-right-width: 1px; }
.sf-gr .sf-gr-vis-point:nth-child(2n) { border-right-width: 0; }
}
@container sf-lp (min-width: 1024px) {
.sf-gr .sf-gr-vis-grid { grid-template-columns: 1.05fr 0.95fr; }
.sf-gr .sf-gr-vis-copy { padding: 3rem; }
.sf-gr .sf-gr-vis-media { min-height: 100%; }
.sf-gr .sf-gr-vis-points { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-gr .sf-gr-vis-point:nth-child(2n) { border-right-width: 1px; }
.sf-gr .sf-gr-vis-point:last-child { border-right-width: 0; }
}
.sf-gr .sf-gr-brands { margin-top: 2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
.sf-gr .sf-gr-brand { display: inline-flex; min-height: 4rem; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--sf-gr-sand); border-radius: calc(6px + 8px); padding: 0.75rem; text-align: center; background-color: color-mix(in oklab, var(--sf-white) 70%, transparent); transition: translate 150ms cubic-bezier(0.4, 0, 0.2, 1), background-color 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-brand-logo { display: block; height: 2rem; width: auto; max-width: 100%; object-fit: contain; }
.sf-gr .sf-gr-brand-name { font-size: var(--sf-gr-fs-14); line-height: calc(1.25 / 0.875); font-weight: 800; color: var(--sf-gr-dusk); }
@container sf-lp (min-width: 640px) {
.sf-gr .sf-gr-brands { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-gr .sf-gr-brand-logo { height: 2.25rem; }
}
@container sf-lp (min-width: 1024px) {
.sf-gr .sf-gr-brands { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
.sf-gr .sf-gr-club { margin-inline: auto; max-width: 56rem; }
.sf-gr .sf-gr-club-card { overflow: hidden; border: 1px solid var(--sf-gr-sand); border-radius: calc(6px + 12px); background-color: var(--sf-white); box-shadow: var(--sf-gr-shadow-xl); }
.sf-gr .sf-gr-club-bar { display: flex; align-items: center; gap: 0.5rem; border: 0 solid var(--sf-gr-sand); border-bottom-width: 1px; padding: 0.75rem 1.25rem; }
.sf-gr .sf-gr-club-icon { display: block; height: 1rem; width: 1rem; flex-shrink: 0; color: var(--sf-gr-gold-deep); }
.sf-gr .sf-gr-club-kicker { font-size: var(--sf-gr-fs-10); font-weight: 700; text-transform: uppercase; letter-spacing: 0.18em; color: var(--sf-gr-gold-deep); }
.sf-gr .sf-gr-club-body { padding: 1.5rem; text-align: center; }
.sf-gr .sf-gr-club-title { color: var(--sf-gr-dusk); }
.sf-gr .sf-gr-club-sub { margin: 0; max-width: 42rem; font-size: var(--sf-gr-fs-14); line-height: calc(1.25 / 0.875); color: var(--sf-gr-muted); }
.sf-gr .sf-gr-club-levels { margin-inline: auto; margin-top: 1.5rem; display: grid; max-width: 28rem; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; }
.sf-gr .sf-gr-club-level { display: flex; height: 100%; flex-direction: column; align-items: center; justify-content: flex-start; border: none; border-radius: calc(6px + 4px); padding: 1rem 0.5rem; text-align: center; color: var(--sf-white); box-shadow: var(--sf-gr-shadow-sm); }
.sf-gr .sf-gr-club-level--blue { background: var(--sf-gr-level-blue); }
.sf-gr .sf-gr-club-level--platinum { background: var(--sf-gr-level-platinum); }
.sf-gr .sf-gr-club-level--gold { background: var(--sf-gr-level-gold); }
.sf-gr .sf-gr-club-level-name { font-size: var(--sf-gr-fs-14); line-height: calc(1.25 / 0.875); font-weight: 800; text-transform: uppercase; letter-spacing: 0.025em; }
.sf-gr .sf-gr-club-level-points { margin-top: 0.25rem; font-size: var(--sf-gr-fs-11); line-height: 1.25; font-weight: 600; color: var(--sf-gr-level-sub); }
.sf-gr .sf-gr-club-cta { margin-top: 1.75rem; display: inline-flex; align-items: center; gap: 0.5rem; border-radius: calc(infinity * 1px); padding: 0.75rem 1.5rem; font-size: var(--sf-gr-fs-14); line-height: calc(1.25 / 0.875); font-weight: 700; color: var(--sf-white); background: var(--sf-gr-blue); transition: scale 150ms cubic-bezier(0.4, 0, 0.2, 1); }
@container sf-lp (min-width: 640px) {
.sf-gr .sf-gr-club-body { padding: 2.5rem; }
.sf-gr .sf-gr-club-sub { font-size: var(--sf-gr-fs-16); line-height: 1.5; }
}
.sf-gr .sf-gr-band { position: relative; left: 50%; width: 100cqi; translate: -50% 0; background-color: var(--sf-gr-band); color: var(--sf-white); }
.sf-gr .sf-gr-band-inner { margin-inline: auto; max-width: 72rem; padding: 3.5rem 1rem; }
.sf-gr .sf-gr-band-top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.sf-gr .sf-gr-band-eyebrow { margin: 0; font-size: var(--sf-gr-fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: var(--sf-gr-amber-mag); }
.sf-gr .sf-gr-band-title { color: var(--sf-white); }
.sf-gr .sf-gr-band-text { margin: 0; font-size: var(--sf-gr-fs-14); line-height: calc(1.25 / 0.875); color: color-mix(in oklab, var(--sf-white) 75%, transparent); }
.sf-gr .sf-gr-band-cta { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: calc(6px + 4px); padding: 0.625rem 1rem; font-size: var(--sf-gr-fs-14); line-height: calc(1.25 / 0.875); font-weight: 700; background-color: var(--sf-gr-sky); }
.sf-gr .sf-gr-articles { margin-top: 1.75rem; display: grid; gap: 1rem; }
.sf-gr .sf-gr-article { overflow: hidden; border-radius: calc(6px + 8px); background-color: var(--sf-white); color: var(--sf-gr-dusk); transition: translate 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-article-media { height: 9rem; overflow: hidden; }
.sf-gr .sf-gr-article-img { display: block; height: 100%; width: 100%; max-width: 100%; object-fit: cover; transition: scale 500ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-gr .sf-gr-article-body { padding: 1rem; }
.sf-gr .sf-gr-article-eyebrow { font-size: var(--sf-gr-fs-9); font-weight: 900; text-transform: uppercase; letter-spacing: 0.18em; color: var(--sf-gr-rust); }
.sf-gr .sf-gr-article-title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; color: inherit; }
.sf-gr .sf-gr-article-teaser { margin: 0; display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--sf-gr-fs-12); line-height: calc(1 / 0.75); color: var(--sf-gr-sage); }
.sf-gr .sf-gr-article-cta { margin-top: 0.75rem; display: inline-flex; align-items: center; gap: 0.25rem; font-size: var(--sf-gr-fs-12); line-height: calc(1 / 0.75); font-weight: 700; color: var(--sf-gr-sky); }
@container sf-lp (min-width: 768px) {
.sf-gr .sf-gr-articles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-gr .sf-gr-scatter { pointer-events: none; position: absolute; inset-block: 0; left: 50%; margin-top: 0; display: none; width: 100cqi; translate: -50% 0; }
@container sf-lp (min-width: 1024px) {
.sf-gr .sf-gr-scatter { display: block; }
}
.sf-gr .sf-gr-footer { padding: 2rem 1rem; text-align: center; font-size: var(--sf-gr-fs-12); line-height: calc(1 / 0.75); color: var(--sf-gr-muted); }
@media (hover: hover) {
.sf-gr .sf-gr-header-mag:hover { background-color: var(--sf-gr-surface-muted); }
.sf-gr .sf-gr-header-shop:hover, .sf-gr .sf-gr-hero-cta:hover, .sf-gr .sf-gr-all-link:hover, .sf-gr .sf-gr-vis-cta:hover, .sf-gr .sf-gr-club-cta:hover { scale: 1.03; }
.sf-gr .sf-gr-cat:hover, .sf-gr .sf-gr-brand:hover, .sf-gr .sf-gr-article:hover { translate: 0 -0.25rem; }
.sf-gr .sf-gr-pick:hover { translate: 0 -0.25rem; box-shadow: var(--sf-gr-shadow-lg); }
.sf-gr .sf-gr-brand:hover { background-color: var(--sf-white); }
.sf-gr .sf-gr-cat:hover .sf-gr-cat-img, .sf-gr .sf-gr-pick:hover .sf-gr-pick-img, .sf-gr .sf-gr-pick:hover .sf-gr-pick-go, .sf-gr .sf-gr-article:hover .sf-gr-article-img { scale: 105% 105%; }
.sf-gr .sf-gr-cat-chip:hover, .sf-gr .sf-gr-cat-go:hover { background-color: color-mix(in oklab, var(--sf-white) 25%, transparent); }
.sf-gr .sf-gr-all-link:hover .sf-gr-all-arrow { translate: 0.25rem 0; }
.sf-gr .sf-gr-rail-btn:hover { scale: 110% 110%; }
}
/* herbst-laeuft.css */
.sf-hl { min-height: 100vh; overflow: hidden; background-color: var(--sf-hl-sand); font-family: var(--sf-body); font-size: var(--sf-size-17); line-height: 1.55; color: var(--sf-hl-text); }
.sf-hl .sf-hl-main { position: relative; }
.sf-hl .sf-hl-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-hl .sf-hl-slot { position: relative; width: 100%; height: 100%; overflow: hidden; background-color: var(--sf-hl-slot); }
.sf-hl .sf-hl-slot::after { content: ""; position: absolute; inset: -20%; opacity: 0.65; background: repeating-radial-gradient( ellipse at 55% 65%, transparent 0 18px, var(--sf-hl-slot-ring) 19px 21px ); }
.sf-hl .sf-hl-slot[data-sf-tone="forest"] { background: linear-gradient( 145deg, var(--sf-hl-forest-a), var(--sf-hl-forest-b) 55%, var(--sf-hl-forest-c) ); }
.sf-hl .sf-hl-slot[data-sf-tone="road"] { background: linear-gradient( 145deg, var(--sf-hl-road-a), var(--sf-hl-road-b) 58%, var(--sf-hl-road-c) ); }
.sf-hl .sf-hl-slot[data-sf-tone="dusk"] { background: linear-gradient( 145deg, var(--sf-hl-dusk-a), var(--sf-hl-dusk-b) 58%, var(--sf-hl-dusk-c) ); }
.sf-hl .sf-hl-slot[data-sf-tone="rust"] { background: linear-gradient( 145deg, var(--sf-hl-rust-a), var(--sf-hl-rust-b) 58%, var(--sf-hl-rust-c) ); }
.sf-hl .sf-hl-paper { position: relative; background-image: radial-gradient(circle at 15% 10%, var(--sf-hl-paper-glow), transparent 25%), linear-gradient(180deg, var(--sf-hl-paper-a), var(--sf-hl-paper-b)); }
.sf-hl .sf-hl-header { position: sticky; top: var(--sf-kopf-klebt, 0px); z-index: 50; border: 0 solid color-mix(in oklab, var(--sf-hl-slate-200) 70%, transparent); border-bottom-width: 1px; background-color: color-mix(in oklab, var(--sf-white) 95%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sf-hl .sf-hl-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 80rem; height: 4rem; margin-inline: auto; padding-inline: 1rem; }
.sf-hl .sf-hl-logo { flex-shrink: 0; }
.sf-hl .sf-hl-logo-img { width: auto; height: 1.75rem; }
.sf-hl .sf-hl-nav { display: flex; align-items: center; gap: 0.5rem; }
.sf-hl .sf-hl-nav-mag, .sf-hl .sf-hl-nav-shop { display: inline-flex; border-radius: calc(infinity * 1px); padding: 0.5rem 1rem; font-size: var(--sf-hl-fs-12); line-height: calc(1 / 0.75); font-weight: 700; }
.sf-hl .sf-hl-nav-mag { padding-inline: 0.75rem; border: 1px solid var(--sf-hl-slate-300); color: var(--sf-hl-slate-700); }
.sf-hl .sf-hl-nav-shop { align-items: center; gap: 0.375rem; background-color: var(--sf-blue); color: var(--sf-white); }
@container sf-lp (min-width: 640px) {
.sf-hl .sf-hl-header-inner { padding-inline: 1.5rem; }
.sf-hl .sf-hl-nav-mag { padding-inline: 1rem; }
}
.sf-hl .sf-hl-hero { position: relative; min-height: 650px; overflow: hidden; background-color: var(--sf-hl-rust); }
.sf-hl .sf-hl-hero-media { position: absolute; inset-block: 0; right: 0; width: 100%; }
.sf-hl .sf-hl-hero-shade { position: absolute; inset: 0; background-image: linear-gradient( to bottom in oklab, transparent 0%, transparent 50%, var(--sf-hl-teal-55) 100% ); }
.sf-hl .sf-hl-hero-fade { position: absolute; inset-inline: 0; top: 0; height: 58%; background-image: linear-gradient( to bottom in oklab, var(--sf-hl-rust) 0%, var(--sf-hl-rust-55) 50%, transparent 100% ); }
.sf-hl .sf-hl-hero-inner { position: relative; z-index: 20; display: flex; align-items: flex-start; max-width: 80rem; min-height: 650px; margin-inline: auto; padding: 5rem 1.25rem 4rem; }
.sf-hl .sf-hl-hero-copy { max-width: 36rem; color: var(--sf-white); }
.sf-hl .sf-hl-hero-title { color: var(--sf-white); }
.sf-hl .sf-hl-hero-sub { font-size: var(--sf-hl-fs-20); line-height: calc(1.75 / 1.25); font-weight: 800; }
.sf-hl .sf-hl-hero-intro { max-width: 28rem; font-size: var(--sf-hl-fs-14); line-height: 1.625; color: color-mix(in oklab, var(--sf-white) 80%, transparent); }
.sf-hl .sf-hl-hero-ctas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; margin-top: 7rem; }
.sf-hl .sf-hl-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; border-radius: calc(infinity * 1px); padding: 0.75rem 1.25rem; font-size: var(--sf-hl-fs-14); line-height: calc(1.25 / 0.875); font-weight: 900; box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 20px 25px -5px var(--sf-hl-shadow), 0 8px 10px -6px var(--sf-hl-shadow); transition: scale 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-hl .sf-hl-cta-desk { display: none; }
.sf-hl .sf-hl-cta-full { grid-column: span 2 / span 2; }
.sf-hl .sf-hl-cta-primary { background-color: var(--sf-blue); color: var(--sf-white); }
.sf-hl .sf-hl-cta-light { background-color: var(--sf-white); color: var(--sf-hl-rust); }
.sf-hl .sf-hl-cta-outline { border: 1px solid color-mix(in oklab, var(--sf-white) 60%, transparent); background-color: color-mix(in oklab, var(--sf-hl-black) 10%, transparent); color: var(--sf-white); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
@media (hover: hover) {
.sf-hl .sf-hl-cta:hover, .sf-hl .sf-hl-club-cta:hover { scale: 1.03; }
}
.sf-hl .sf-hl-eyebrow { font-size: var(--sf-hl-fs-10); font-weight: 900; text-transform: uppercase; letter-spacing: 0.25em; color: var(--sf-hl-rust); }
.sf-hl .sf-hl-eyebrow.sf-hl-inverse { color: var(--sf-hl-sky); }
.sf-hl .sf-hl-title { letter-spacing: -0.025em; color: var(--sf-hl-ink); }
.sf-hl .sf-hl-title.sf-hl-inverse { color: var(--sf-white); }
.sf-hl .sf-hl-intro { max-width: 42rem; font-size: var(--sf-hl-fs-14); line-height: 1.625; color: var(--sf-hl-slate-600); }
.sf-hl .sf-hl-intro.sf-hl-inverse { color: color-mix(in oklab, var(--sf-white) 72%, transparent); }
.sf-hl .sf-hl-terrain { position: relative; max-width: 80rem; margin-inline: auto; padding: 5rem 1.25rem; }
.sf-hl .sf-hl-terrain-head { position: relative; z-index: 20; max-width: 42rem; margin-inline: auto; text-align: center; }
.sf-hl .sf-hl-terrain-grid { position: relative; z-index: 20; display: grid; margin-top: 3rem; overflow: hidden; border-radius: 2rem; background-color: var(--sf-white); box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 20px 70px var(--sf-hl-shadow-warm); }
.sf-hl .sf-hl-terrain-card { position: relative; min-height: 390px; overflow: hidden; border: 0 solid color-mix(in oklab, var(--sf-white) 20%, transparent); }
.sf-hl .sf-hl-terrain-card:first-child { border-bottom-width: 1px; }
.sf-hl .sf-hl-terrain-shade { position: absolute; inset: 0; background-image: linear-gradient( to top in oklab, var(--sf-hl-shade-90) 0%, var(--sf-hl-shade-18) 50%, transparent 100% ); }
.sf-hl .sf-hl-terrain-body { position: absolute; inset-inline: 0; bottom: 0; padding: 1.75rem; color: var(--sf-white); }
.sf-hl .sf-hl-terrain-title { letter-spacing: -0.025em; color: var(--sf-white); }
.sf-hl .sf-hl-terrain-text { max-width: 20rem; font-size: var(--sf-hl-fs-14); line-height: calc(1.25 / 0.875); color: color-mix(in oklab, var(--sf-white) 75%, transparent); }
.sf-hl .sf-hl-terrain-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.25rem; font-size: var(--sf-hl-fs-12); line-height: calc(1 / 0.75); font-weight: 900; }
.sf-hl .sf-hl-terrain-arrow, .sf-hl .sf-hl-gear-arrow, .sf-hl .sf-hl-card-go, .sf-hl .sf-hl-brand, .sf-hl .sf-hl-article { transition-property: color, background-color, border-color, opacity, box-shadow, transform, translate, scale, filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
@media (hover: hover) {
.sf-hl .sf-hl-terrain-card:hover .sf-hl-terrain-arrow { translate: 0.125rem -0.125rem; }
}
.sf-hl .sf-hl-gear { position: relative; max-width: 72rem; margin-inline: auto; padding: 0 1.25rem 6rem; }
.sf-hl .sf-hl-gear-grid { position: relative; z-index: 20; display: grid; gap: 2.5rem; }
.sf-hl .sf-hl-gear-photo { display: none; aspect-ratio: 4 / 5; max-width: 24rem; margin-top: 3rem; overflow: hidden; border-radius: 2rem; }
.sf-hl .sf-hl-gear-list { border: 0 solid color-mix(in oklab, var(--sf-hl-slate-300) 75%, transparent); border-block-width: 1px; }
.sf-hl .sf-hl-gear-list > :not(:last-child) { border: 0 solid color-mix(in oklab, var(--sf-hl-slate-300) 75%, transparent); border-bottom-width: 1px; }
.sf-hl .sf-hl-gear-item { display: grid; grid-template-columns: 48px 1fr auto; align-items: center; gap: 1rem; padding-block: 1.5rem; }
.sf-hl .sf-hl-gear-icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: calc(infinity * 1px); background-color: var(--sf-white); box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 1px 3px 0 var(--sf-hl-shadow), 0 1px 2px -1px var(--sf-hl-shadow); }
.sf-hl .sf-hl-gear-glyph { color: var(--sf-hl-rust); }
.sf-hl .sf-hl-gear-name { color: var(--sf-hl-ink); }
.sf-hl .sf-hl-gear-text { font-size: var(--sf-hl-fs-14); line-height: calc(1.25 / 0.875); color: var(--sf-hl-slate-600); }
.sf-hl .sf-hl-gear-arrow { color: var(--sf-hl-slate-400); }
@media (hover: hover) {
.sf-hl .sf-hl-gear-item:hover .sf-hl-gear-arrow { translate: 0.25rem 0; color: var(--sf-blue); }
}
.sf-hl .sf-hl-gear-all { display: inline-flex; align-items: center; gap: 0.5rem; padding-block: 1.5rem; font-size: var(--sf-hl-fs-14); line-height: calc(1.25 / 0.875); font-weight: 900; color: var(--sf-blue); }
.sf-hl .sf-hl-picks { position: relative; border: 0 solid var(--sf-hl-slate-200); border-block-width: 1px; background-color: color-mix(in oklab, var(--sf-white) 85%, transparent); padding-block: 5rem; }
.sf-hl .sf-hl-picks-inner, .sf-hl .sf-hl-brands-inner, .sf-hl .sf-hl-vis-inner { position: relative; z-index: 20; max-width: 80rem; margin-inline: auto; padding-inline: 1.25rem; }
.sf-hl .sf-hl-picks-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }
.sf-hl .sf-hl-picks-nav { display: none; gap: 0.5rem; }
.sf-hl .sf-hl-picks-btn { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: calc(infinity * 1px); background-color: var(--sf-white); }
.sf-hl .sf-hl-rail { display: flex; margin: 2.5rem -1.25rem 0; padding-inline: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; }
.sf-hl .sf-hl-rail::-webkit-scrollbar { display: none; }
.sf-hl .sf-hl-snap { scroll-snap-align: start; }
.sf-hl .sf-hl-card { display: flex; flex-direction: column; flex-shrink: 0; width: 220px; border: 0 solid var(--sf-hl-slate-200); border-left-width: 1px; padding-inline: 1rem; }
.sf-hl .sf-hl-card:first-child { border-left-width: 0; }
.sf-hl .sf-hl-card-media { position: relative; display: grid; place-items: center; height: 11rem; overflow: hidden; background-color: var(--sf-white); }
.sf-hl .sf-hl-card-loading { width: 7rem; height: 7rem; border-radius: calc(infinity * 1px); background-color: var(--sf-hl-slate-100); animation: sf-hl-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
@keyframes sf-hl-pulse { 50% { opacity: 0.5; } }
.sf-hl .sf-hl-card-img { width: 88%; height: 88%; object-fit: contain; transition: scale 500ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-hl .sf-hl-card-badge { position: absolute; top: 0.5rem; right: 0.5rem; border-radius: calc(infinity * 1px); padding: 0.25rem 0.5rem; background-color: var(--sf-hl-rust); font-size: var(--sf-hl-fs-10); font-weight: 900; color: var(--sf-white); }
.sf-hl .sf-hl-card-body { padding-top: 1rem; }
.sf-hl .sf-hl-card-brand { font-size: var(--sf-hl-fs-9); font-weight: 900; text-transform: uppercase; letter-spacing: 0.18em; color: var(--sf-blue); }
.sf-hl .sf-hl-card-name { min-height: 2.6rem; color: var(--sf-hl-ink); }
.sf-hl .sf-hl-card-reason { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: var(--sf-hl-fs-12); line-height: 1.625; color: var(--sf-hl-slate-500); }
.sf-hl .sf-hl-card-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 0.75rem; margin-top: 1rem; }
.sf-hl .sf-hl-card-price { font-size: var(--sf-hl-fs-14); line-height: calc(1.25 / 0.875); color: var(--sf-hl-ink); }
.sf-hl .sf-hl-card-go { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: calc(infinity * 1px); background-color: var(--sf-blue); color: var(--sf-white); }
@media (hover: hover) {
.sf-hl .sf-hl-card:hover .sf-hl-card-img, .sf-hl .sf-hl-article:hover .sf-hl-article-img { scale: 1.05; }
.sf-hl .sf-hl-card:hover .sf-hl-card-go { translate: 0.125rem 0; }
}
.sf-hl .sf-hl-vis { position: relative; overflow: hidden; background-color: var(--sf-hl-night); padding-block: 5rem; color: var(--sf-white); }
.sf-hl .sf-hl-vis-inner { display: grid; gap: 2.5rem; }
.sf-hl .sf-hl-vis-photo { height: 18rem; overflow: hidden; border-radius: 50% 50% 45% 45% / 38% 42% 58% 62%; }
.sf-hl .sf-hl-vis-cta, .sf-hl .sf-hl-club-cta { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.75rem; border-radius: calc(infinity * 1px); padding: 0.75rem 1.25rem; background-color: var(--sf-blue); font-size: var(--sf-hl-fs-14); line-height: calc(1.25 / 0.875); font-weight: 900; color: var(--sf-white); }
.sf-hl .sf-hl-winter { position: relative; max-width: 72rem; margin-inline: auto; padding: 6rem 1.25rem; }
.sf-hl .sf-hl-winter-grid { position: relative; z-index: 20; display: grid; gap: 3rem; }
.sf-hl .sf-hl-steps { position: relative; padding-left: 3rem; }
.sf-hl .sf-hl-steps::before { content: ""; position: absolute; top: 1.75rem; bottom: 1.75rem; left: 17px; width: 1px; background-color: color-mix(in oklab, var(--sf-blue) 35%, transparent); }
.sf-hl .sf-hl-step { position: relative; padding-bottom: 2.5rem; }
.sf-hl .sf-hl-step:last-child { padding-bottom: 0; }
.sf-hl .sf-hl-step-num { position: absolute; top: 0; left: -3rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 2px solid var(--sf-blue); border-radius: calc(infinity * 1px); background-color: var(--sf-hl-sand); font-size: var(--sf-hl-fs-12); line-height: calc(1 / 0.75); font-weight: 900; color: var(--sf-blue); }
.sf-hl .sf-hl-step-title { color: var(--sf-hl-ink); }
.sf-hl .sf-hl-step-text { font-size: var(--sf-hl-fs-14); line-height: 1.625; color: var(--sf-hl-slate-600); }
.sf-hl .sf-hl-brands { position: relative; overflow: hidden; border: 0 solid var(--sf-hl-slate-200); border-block-width: 1px; background-color: color-mix(in oklab, var(--sf-white) 75%, transparent); padding-block: 3.5rem; }
.sf-hl .sf-hl-brands-inner { text-align: center; }
.sf-hl .sf-hl-brands-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.5rem 2.5rem; margin-top: 2rem; }
.sf-hl .sf-hl-brand { opacity: 0.6; filter: grayscale(100%); }
@media (hover: hover) {
.sf-hl .sf-hl-brand:hover { opacity: 1; filter: grayscale(0%); }
}
.sf-hl .sf-hl-brand-logo { width: auto; height: 1.5rem; }
.sf-hl .sf-hl-brand-name { font-size: var(--sf-hl-fs-14); line-height: calc(1.25 / 0.875); font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: var(--sf-hl-slate-500); }
.sf-hl .sf-hl-club { position: relative; overflow: hidden; border: 0 solid var(--sf-hl-slate-200); border-block-width: 1px; background-color: var(--sf-hl-sand); padding-block: 4rem; }
.sf-hl .sf-hl-club-inner { position: relative; z-index: 20; max-width: 42rem; margin-inline: auto; padding-inline: 1.25rem; }
.sf-hl .sf-hl-club-box { overflow: hidden; border: 1px solid var(--sf-hl-slate-200); border-radius: 18px; background-color: var(--sf-white); box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 1px 3px 0 var(--sf-hl-shadow), 0 1px 2px -1px var(--sf-hl-shadow); }
.sf-hl .sf-hl-club-head { display: flex; align-items: center; gap: 0.5rem; border: 0 solid var(--sf-hl-slate-200); border-bottom-width: 1px; padding: 0.75rem 1.25rem; }
.sf-hl .sf-hl-club-icon { flex-shrink: 0; width: 1rem; height: 1rem; color: var(--sf-blue); }
.sf-hl .sf-hl-club-kicker { font-size: var(--sf-hl-fs-10); font-weight: 900; text-transform: uppercase; letter-spacing: 0.18em; color: var(--sf-blue); }
.sf-hl .sf-hl-club-body { padding: 1.5rem; text-align: center; }
.sf-hl .sf-hl-club-title { color: var(--sf-hl-ink); }
.sf-hl .sf-hl-club-sub { max-width: 42rem; font-size: var(--sf-hl-fs-14); line-height: calc(1.25 / 0.875); color: var(--sf-hl-slate-600); }
.sf-hl .sf-hl-club-levels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.625rem; max-width: 28rem; margin: 1.5rem auto 0; }
.sf-hl .sf-hl-level { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; height: 100%; border-radius: 10px; padding: 1rem 0.5rem; text-align: center; color: var(--sf-white); box-shadow: 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 0 transparent, 0 1px 3px 0 var(--sf-hl-shadow), 0 1px 2px -1px var(--sf-hl-shadow); }
.sf-hl .sf-hl-level-blue { background: linear-gradient(160deg, var(--sf-hl-member-a), var(--sf-hl-member-b)); }
.sf-hl .sf-hl-level-platinum { background: linear-gradient(160deg, var(--sf-hl-premium-a), var(--sf-hl-premium-b)); }
.sf-hl .sf-hl-level-gold { background: linear-gradient(160deg, var(--sf-hl-vip-a), var(--sf-hl-vip-b)); }
.sf-hl .sf-hl-level-name { font-size: var(--sf-hl-fs-14); line-height: calc(1.25 / 0.875); font-weight: 900; text-transform: uppercase; letter-spacing: 0.025em; }
.sf-hl .sf-hl-level-points { margin-top: 0.25rem; font-size: var(--sf-hl-fs-11); line-height: 1.25; font-weight: 700; color: var(--sf-hl-level-sub); }
.sf-hl .sf-hl-club-cta { padding-inline: 1.5rem; transition: scale 150ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-hl .sf-hl-journal { position: relative; width: 100%; overflow: hidden; background-color: var(--sf-hl-ink); color: var(--sf-white); }
.sf-hl .sf-hl-journal-inner { position: relative; z-index: 20; max-width: 80rem; margin-inline: auto; padding: 5rem 1.25rem; }
.sf-hl .sf-hl-journal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem; }
.sf-hl .sf-hl-journal-eyebrow { font-size: var(--sf-hl-fs-11); font-weight: 700; text-transform: uppercase; letter-spacing: 0.22em; color: var(--sf-hl-rust); }
.sf-hl .sf-hl-journal-title { color: var(--sf-white); }
.sf-hl .sf-hl-journal-intro { max-width: 28rem; font-size: var(--sf-hl-fs-14); line-height: calc(1.25 / 0.875); color: color-mix(in oklab, var(--sf-white) 70%, transparent); }
.sf-hl .sf-hl-journal-all { display: inline-flex; align-items: center; gap: 0.5rem; border-radius: 10px; padding: 0.625rem 1rem; background-color: var(--sf-blue); font-size: var(--sf-hl-fs-14); line-height: calc(1.25 / 0.875); font-weight: 700; color: var(--sf-white); }
.sf-hl .sf-hl-journal-grid { display: grid; gap: 1rem; margin-top: 2.5rem; }
.sf-hl .sf-hl-article { overflow: hidden; border-radius: 14px; background-color: var(--sf-white); color: var(--sf-hl-ink); }
@media (hover: hover) {
.sf-hl .sf-hl-article:hover { translate: 0 -0.25rem; }
}
.sf-hl .sf-hl-article-media { height: 10rem; overflow: hidden; }
.sf-hl .sf-hl-article-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: scale 500ms cubic-bezier(0.4, 0, 0.2, 1); }
.sf-hl .sf-hl-article-body { padding: 1.25rem; }
.sf-hl .sf-hl-article-eyebrow { font-size: var(--sf-hl-fs-9); font-weight: 900; text-transform: uppercase; letter-spacing: 0.18em; color: var(--sf-hl-rust); }
.sf-hl .sf-hl-article-title, .sf-hl .sf-hl-article-teaser { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sf-hl .sf-hl-article-teaser { font-size: var(--sf-hl-fs-12); line-height: calc(1 / 0.75); color: var(--sf-hl-moss); }
.sf-hl .sf-hl-article-read { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 0.75rem; font-size: var(--sf-hl-fs-12); line-height: calc(1 / 0.75); font-weight: 700; color: var(--sf-blue); }
.sf-hl .sf-hl-footer { background-color: var(--sf-hl-deep); padding: 2rem 1.25rem; text-align: center; font-size: var(--sf-hl-fs-12); line-height: calc(1 / 0.75); color: color-mix(in oklab, var(--sf-white) 55%, transparent); }
@container sf-lp (min-width: 640px) {
.sf-hl .sf-hl-hero-inner, .sf-hl .sf-hl-terrain, .sf-hl .sf-hl-gear, .sf-hl .sf-hl-picks-inner, .sf-hl .sf-hl-brands-inner, .sf-hl .sf-hl-vis-inner, .sf-hl .sf-hl-winter, .sf-hl .sf-hl-club-inner, .sf-hl .sf-hl-journal-inner { padding-inline: 2rem; }
.sf-hl .sf-hl-hero-sub { font-size: var(--sf-hl-fs-24); line-height: calc(2 / 1.5); }
.sf-hl .sf-hl-hero-intro, .sf-hl .sf-hl-intro { font-size: var(--sf-hl-fs-16); }
.sf-hl .sf-hl-terrain-body { padding: 2.25rem; }
.sf-hl .sf-hl-picks-nav { display: flex; }
.sf-hl .sf-hl-rail { margin-inline: -2rem; padding-inline: 2rem; }
.sf-hl .sf-hl-card { width: 248px; padding-inline: 1.5rem; }
.sf-hl .sf-hl-brand-logo { height: 1.75rem; }
.sf-hl .sf-hl-club-body { padding: 2.5rem; }
.sf-hl .sf-hl-club-sub { font-size: var(--sf-hl-fs-16); line-height: 1.5; }
}
@container sf-lp (min-width: 768px) {
.sf-hl .sf-hl-hero { min-height: 610px; }
.sf-hl .sf-hl-hero-media { width: 58%; }
.sf-hl .sf-hl-hero-img { object-position: 50% 70%; }
.sf-hl .sf-hl-hero-shade { background-image: linear-gradient( to right in oklab, var(--sf-hl-rust) 0%, transparent 50%, transparent 100% ); }
.sf-hl .sf-hl-hero-fade { display: none; }
.sf-hl .sf-hl-hero-inner { align-items: center; min-height: 610px; padding-top: 4rem; padding-bottom: 7rem; }
.sf-hl .sf-hl-hero-ctas { display: flex; flex-wrap: wrap; align-items: center; margin-top: 2rem; }
.sf-hl .sf-hl-cta { width: auto; }
.sf-hl .sf-hl-cta-desk { display: inline-flex; }
.sf-hl .sf-hl-cta-full { grid-column: span 1 / span 1; }
.sf-hl .sf-hl-terrain { padding-block: 7rem; }
.sf-hl .sf-hl-terrain-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-hl .sf-hl-terrain-card:first-child { border-bottom-width: 0; border-right-width: 1px; }
.sf-hl .sf-hl-gear { padding-bottom: 8rem; }
.sf-hl .sf-hl-gear-grid { grid-template-columns: 0.8fr 1.2fr; gap: 5rem; }
.sf-hl .sf-hl-gear-aside { position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + 7rem); align-self: flex-start; }
.sf-hl .sf-hl-gear-photo { display: block; }
.sf-hl .sf-hl-vis { padding-block: 6rem; }
.sf-hl .sf-hl-vis-inner { grid-template-columns: 0.9fr 1.1fr; align-items: center; }
.sf-hl .sf-hl-vis-photo { height: 390px; }
.sf-hl .sf-hl-winter { padding-block: 8rem; }
.sf-hl .sf-hl-winter-grid { grid-template-columns: 0.9fr 1.1fr; gap: 6rem; }
.sf-hl .sf-hl-journal-inner { padding-block: 7rem; }
.sf-hl .sf-hl-journal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* back-to-school.css */
.sf-bts { min-height: 100vh; overflow: hidden; background-color: var(--sf-bts-paper); color: var(--sf-bts-slate-900); font-family: var(--sf-body); font-size: max(var(--sf-body-size), var(--sf-text-min)); line-height: 1.55; }
.sf-bts a:focus-visible, .sf-bts button:focus-visible { outline: 3px solid var(--sf-bts-focus); outline-offset: 3px; }
.sf-bts .sf-bts-header-mag, .sf-bts .sf-bts-header-shop, .sf-bts .sf-bts-cta, .sf-bts .sf-bts-chip, .sf-bts .sf-bts-sale-badge, .sf-bts .sf-bts-badge-limited, .sf-bts .sf-bts-zoom-slow, .sf-bts .sf-bts-arrow, .sf-bts .sf-bts-fav, .sf-bts .sf-bts-fav-img, .sf-bts .sf-bts-dbrand, .sf-bts .sf-bts-dbrand-img, .sf-bts .sf-bts-dbrand-cta, .sf-bts .sf-bts-mag-cta, .sf-bts .sf-bts-article { transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; }
.sf-bts .sf-bts-zoom-slow { transition-duration: 700ms; }
.sf-bts .sf-bts-fav-img, .sf-bts .sf-bts-dbrand-img { transition-duration: 500ms; }
.sf-bts .sf-bts-dbrand, .sf-bts .sf-bts-article { transition-duration: 300ms; }
.sf-bts .sf-bts-paper { background-color: var(--sf-bts-paper); background-image: linear-gradient(var(--sf-bts-grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--sf-bts-grid-line) 1px, transparent 1px); background-size: 32px 32px; }
.sf-bts .sf-bts-card-shadow { box-shadow: var(--sf-bts-card-shadow); }
.sf-bts .sf-bts-h1, .sf-bts .sf-bts-h2, .sf-bts .sf-bts-h3 { margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); line-height: var(--sf-heading-leading); text-transform: var(--sf-heading-case); text-wrap: balance; overflow-wrap: anywhere; color: var(--sf-bts-navy); }
.sf-bts .sf-bts-h1 { font-size: var(--sf-title); letter-spacing: -0.018em; }
.sf-bts .sf-bts-h1-accent { color: var(--sf-bts-blue); }
.sf-bts .sf-bts-h2 { font-size: var(--sf-section-title); letter-spacing: -0.035em; }
.sf-bts .sf-bts-h3 { font-size: var(--sf-card-title); }
.sf-bts .sf-bts-header { position: relative; z-index: 40; border-style: solid; border-width: 0 0 1px; border-color: color-mix(in oklab, var(--sf-bts-slate-200) 80%, transparent); background-color: color-mix(in oklab, var(--sf-white) 95%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sf-bts .sf-bts-header-inner { margin-inline: auto; display: flex; min-height: 56px; max-width: 1280px; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; }
.sf-bts .sf-bts-header-logo { display: inline-flex; flex-shrink: 0; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.sf-bts .sf-bts-header-logo-img { display: block; height: 24px; width: auto; max-width: 100%; }
.sf-bts .sf-bts-header-actions { display: flex; align-items: center; gap: 6px; }
.sf-bts .sf-bts-header-mag { white-space: nowrap; border: 1px solid color-mix(in oklab, var(--sf-bts-navy) 15%, transparent); border-radius: calc(infinity * 1px); padding: 6px 10px; font-size: var(--sf-size-12); font-weight: 900; color: var(--sf-bts-navy); text-decoration: none; }
.sf-bts .sf-bts-header-shop { display: inline-flex; flex-shrink: 0; align-items: center; gap: 4px; white-space: nowrap; border-radius: calc(infinity * 1px); background-color: var(--sf-bts-blue); padding: 6px 10px; font-size: var(--sf-size-12); font-weight: 900; color: var(--sf-white); text-decoration: none; }
.sf-bts .sf-bts-only-wide { display: none; }
.sf-bts .sf-bts-doodle { position: absolute; display: block; }
.sf-bts .sf-bts-doodle-pencil { stroke: var(--sf-bts-doodle-pencil); }
.sf-bts .sf-bts-doodle-plane { stroke: var(--sf-bts-doodle-plane); }
.sf-bts .sf-bts-doodle-ruler { stroke: var(--sf-bts-doodle-ruler); }
.sf-bts .sf-bts-doodle-backpack { stroke: var(--sf-bts-doodle-backpack); }
.sf-bts .sf-bts-doodle-apple { stroke: var(--sf-bts-doodle-apple); }
.sf-bts .sf-bts-doodle-bulb { stroke: var(--sf-bts-doodle-bulb); }
.sf-bts .sf-bts-doodle-spiral { stroke: var(--sf-bts-doodle-spiral); }
.sf-bts .sf-bts-doodle-glasses { stroke: var(--sf-bts-doodle-glasses); }
.sf-bts .sf-bts-doodle-scissors { stroke: var(--sf-bts-doodle-scissors); }
.sf-bts .sf-bts-dd-hero-backpack { right: 24px; top: 32px; display: none; height: 40px; width: 40px; rotate: 6deg; }
.sf-bts .sf-bts-dd-hero-bulb { right: 24px; top: 176px; display: none; height: 28px; width: 28px; rotate: 6deg; }
.sf-bts .sf-bts-dd-hero-glasses { bottom: 24px; left: 30%; display: none; height: 24px; width: 64px; rotate: 3deg; }
.sf-bts .sf-bts-dd-hero-pencil { right: 12px; top: 12px; height: 32px; width: 80px; rotate: -12deg; }
.sf-bts .sf-bts-dd-hero-spiral { bottom: 12px; left: 12px; height: 24px; width: 24px; }
.sf-bts .sf-bts-dd-guide-plane { right: 32px; top: 40px; height: 32px; width: 64px; rotate: 12deg; }
.sf-bts .sf-bts-dd-guide-ruler { bottom: 12px; right: 40px; display: none; height: 20px; width: 80px; rotate: -6deg; }
.sf-bts .sf-bts-dd-guide-spiral { left: 32px; top: 56px; height: 28px; width: 28px; }
.sf-bts .sf-bts-dd-guide-apple { bottom: 12px; left: 40px; display: none; height: 32px; width: 32px; rotate: -6deg; }
.sf-bts .sf-bts-dd-guide-bulb { right: 128px; bottom: 12px; display: none; height: 32px; width: 32px; rotate: 6deg; }
.sf-bts .sf-bts-dd-guide-scissors { bottom: 12px; left: 44%; display: none; height: 28px; width: 28px; rotate: -6deg; }
.sf-bts .sf-bts-dd-guide-glasses { right: 96px; top: 32px; display: none; height: 24px; width: 64px; rotate: -3deg; }
.sf-bts .sf-bts-hero { position: relative; overflow: hidden; }
.sf-bts .sf-bts-hero-blob-a { position: absolute; left: -96px; top: 112px; height: 208px; width: 208px; border-radius: calc(infinity * 1px); background-color: color-mix(in oklab, var(--sf-bts-ice-deep) 80%, transparent); filter: blur(64px); }
.sf-bts .sf-bts-hero-blob-b { position: absolute; right: -80px; bottom: 40px; height: 256px; width: 256px; border-radius: calc(infinity * 1px); background-color: var(--sf-bts-ice-soft); filter: blur(64px); }
.sf-bts .sf-bts-hero-swoosh { pointer-events: none; position: absolute; left: -16px; bottom: 0; display: block; height: 380px; width: 380px; max-width: 100%; rotate: 6deg; opacity: 0.6; }
.sf-bts .sf-bts-hero-grid { position: relative; margin-inline: auto; display: grid; min-height: 620px; max-width: 1280px; }
.sf-bts .sf-bts-hero-copy { position: relative; z-index: 10; order: 2; display: flex; align-items: center; padding: 56px 20px; }
.sf-bts .sf-bts-hero-text { max-width: 576px; }
.sf-bts .sf-bts-kicker { margin: 0; display: inline-flex; align-items: center; border-radius: calc(infinity * 1px); background-color: var(--sf-bts-apricot); padding: 6px 12px; font-size: var(--sf-size-12); font-weight: 900; text-transform: uppercase; letter-spacing: 0.18em; color: var(--sf-bts-orange); }
.sf-bts .sf-bts-hero-subline { margin: 0; max-width: 512px; font-size: var(--sf-size-18); line-height: 1.625; color: var(--sf-bts-slate-600); }
.sf-bts .sf-bts-hero-ctas { margin-top: 32px; display: flex; flex-direction: column; gap: 12px; }
.sf-bts .sf-bts-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 14px 24px; font-size: var(--sf-size-14); line-height: calc(1.25 / 0.875); font-weight: 900; color: var(--sf-white); text-decoration: none; }
.sf-bts .sf-bts-cta-blue { background-color: var(--sf-bts-blue); box-shadow: var(--sf-bts-shadow-base), 0 10px 15px -3px var(--sf-bts-blue-20), 0 4px 6px -4px var(--sf-bts-blue-20); }
.sf-bts .sf-bts-cta-sale { background-color: var(--sf-bts-sale); box-shadow: 0 10px 25px -8px var(--sf-bts-sale-cta-shadow); }
.sf-bts .sf-bts-jump { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.sf-bts .sf-bts-chip { border: 1px solid var(--sf-bts-slate-200); border-radius: calc(infinity * 1px); background-color: var(--sf-white); padding: 6px 14px; font-size: var(--sf-size-12); font-weight: 700; color: var(--sf-bts-navy); text-decoration: none; box-shadow: var(--sf-bts-shadow-base), 0 1px 3px 0 var(--sf-bts-shadow), 0 1px 2px -1px var(--sf-bts-shadow); }
.sf-bts .sf-bts-hero-media { position: relative; order: 1; min-height: 300px; overflow: hidden; }
.sf-bts .sf-bts-hero-img { position: absolute; inset: 0; display: block; height: 100%; width: 100%; max-width: 100%; object-fit: cover; object-position: 42% center; }
.sf-bts .sf-bts-hero-tint { position: absolute; inset: 0; background-image: linear-gradient( to top in oklab, var(--sf-bts-navy-25) 0%, transparent 50%, transparent 100% ); }
.sf-bts .sf-bts-hero-fade { position: absolute; inset-inline: 0; bottom: 0; height: 64px; background-image: linear-gradient(to bottom in oklab, transparent 0%, var(--sf-bts-paper) 100%); }
.sf-bts .sf-bts-sale-badge { position: absolute; right: 16px; top: 16px; z-index: 10; display: flex; height: 128px; width: 128px; rotate: 6deg; flex-direction: column; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); background-color: var(--sf-bts-sale); text-align: center; color: var(--sf-white); text-decoration: none; animation: sf-bts-pulse 2.6s ease-in-out infinite; }
.sf-bts .sf-bts-badge-small { max-width: 92px; font-size: var(--sf-size-11); font-weight: 700; text-transform: uppercase; line-height: 1.25; letter-spacing: 0.025em; }
.sf-bts .sf-bts-badge-gap { margin-top: 6px; }
.sf-bts .sf-bts-badge-big { font-size: var(--sf-bts-text-30); line-height: 1; font-weight: 900; }
.sf-bts .sf-bts-badge-price { margin-top: 6px; max-width: 104px; font-size: var(--sf-size-20); font-weight: 900; line-height: 1.25; }
.sf-bts .sf-bts-badge-limited { position: absolute; bottom: -8px; left: 50%; z-index: 10; translate: -50% 0; rotate: -6deg; white-space: nowrap; border-radius: calc(infinity * 1px); background-color: var(--sf-white); padding: 4px 12px; font-size: var(--sf-size-9); font-weight: 900; text-transform: uppercase; letter-spacing: 0.025em; color: var(--sf-bts-navy); box-shadow: var(--sf-bts-shadow-base), 0 4px 6px -1px var(--sf-bts-shadow), 0 2px 4px -2px var(--sf-bts-shadow); }
.sf-bts .sf-bts-badge-percent { position: absolute; left: -8px; top: 12px; z-index: 20; rotate: -12deg; font-size: var(--sf-bts-text-36); font-weight: 900; line-height: 1; color: var(--sf-bts-sale); text-shadow: 2px 0 0 var(--sf-white), -2px 0 0 var(--sf-white), 0 2px 0 var(--sf-white), 0 -2px 0 var(--sf-white), 2px 2px 0 var(--sf-white), -2px -2px 0 var(--sf-white), 2px -2px 0 var(--sf-white), -2px 2px 0 var(--sf-white); }
@keyframes sf-bts-pulse { 0%, 100% { transform: rotate(6deg) scale(1); box-shadow: 0 0 0 0 var(--sf-bts-sale-55), 0 18px 40px -12px var(--sf-bts-sale-55); } 50% { transform: rotate(6deg) scale(1.06); box-shadow: 0 0 0 14px var(--sf-bts-sale-0), 0 22px 46px -12px var(--sf-bts-sale-60); } }
.sf-bts .sf-bts-wrap { margin-inline: auto; max-width: 1280px; padding-inline: 16px; }
.sf-bts .sf-bts-heading { max-width: 672px; }
.sf-bts .sf-bts-eyebrow { margin: 0; font-size: var(--sf-size-12); font-weight: 900; text-transform: uppercase; letter-spacing: 0.22em; color: var(--sf-bts-blue); }
.sf-bts .sf-bts-heading-text { margin: 0; font-size: var(--sf-size-16); line-height: 1.625; color: var(--sf-bts-slate-600); }
.sf-bts .sf-bts-scrim { position: absolute; inset: 0; background-color: color-mix(in oklab, var(--sf-bts-black) 15%, transparent); }
.sf-bts .sf-bts-scrim-fade { position: absolute; inset-inline: 0; bottom: 0; height: 64%; background-image: linear-gradient( to top in oklab, color-mix(in oklab, var(--sf-bts-black) 95%, transparent) 0%, color-mix(in oklab, var(--sf-bts-black) 75%, transparent) 50%, transparent 100% ); }
.sf-bts .sf-bts-scrim-body { position: absolute; inset-inline: 0; bottom: 0; padding: 20px; color: var(--sf-white); }
.sf-bts .sf-bts-fill-img { position: absolute; inset: 0; display: block; height: 100%; width: 100%; max-width: 100%; object-fit: cover; }
.sf-bts .sf-bts-cover-img { display: block; height: 100%; width: 100%; max-width: 100%; object-fit: cover; }
.sf-bts .sf-bts-arrow { display: inline-flex; height: 36px; width: 36px; align-items: center; justify-content: center; border-radius: calc(infinity * 1px); background-color: var(--sf-white); color: var(--sf-bts-navy); }
.sf-bts .sf-bts-categories { margin-inline: auto; max-width: 1280px; scroll-margin-top: 96px; padding: 80px 16px; }
.sf-bts .sf-bts-cat-grid { margin-top: 36px; display: grid; gap: 16px; }
.sf-bts .sf-bts-cat-tile { position: relative; display: block; aspect-ratio: 4/3; overflow: hidden; border-radius: 26px; background-color: var(--sf-bts-navy); color: inherit; text-decoration: none; }
.sf-bts .sf-bts-h3.sf-bts-cat-title { letter-spacing: -0.025em; color: var(--sf-white); }
.sf-bts .sf-bts-cat-text { margin: 0; max-width: 384px; font-size: var(--sf-size-14); line-height: 1.375; color: color-mix(in oklab, var(--sf-white) 90%, transparent); }
.sf-bts .sf-bts-cat-links { margin-top: 16px; display: flex; align-items: center; gap: 20px; }
.sf-bts .sf-bts-cat-link { display: flex; align-items: center; gap: 8px; color: inherit; text-decoration: none; }
.sf-bts .sf-bts-cat-link-arrow { flex-shrink: 0; }
.sf-bts .sf-bts-cat-link-label { font-size: var(--sf-size-12); font-weight: 900; text-transform: uppercase; letter-spacing: 0.025em; color: var(--sf-white); }
.sf-bts .sf-bts-cat-arrow { margin-top: 16px; }
.sf-bts .sf-bts-cat-icon { position: absolute; left: 16px; top: 16px; z-index: 10; display: inline-flex; height: 44px; width: 44px; align-items: center; justify-content: center; border: 1px solid color-mix(in oklab, var(--sf-white) 30%, transparent); border-radius: 10px; background-color: color-mix(in oklab, var(--sf-white) 15%, transparent); color: var(--sf-white); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.sf-bts .sf-bts-favs { scroll-margin-top: 96px; background-color: var(--sf-white); padding-bottom: 32px; padding-top: 80px; }
.sf-bts .sf-bts-fav-row { margin-top: 36px; display: flex; scroll-snap-type: x mandatory; gap: 16px; overflow-x: auto; padding-bottom: 20px; }
.sf-bts .sf-bts-fav { display: block; width: 245px; flex-shrink: 0; scroll-snap-align: start; overflow: hidden; border: 1px solid var(--sf-bts-slate-200); border-radius: 14px; background-color: var(--sf-white); color: inherit; text-decoration: none; }
.sf-bts .sf-bts-fav-media { aspect-ratio: 4/3; overflow: hidden; background-color: var(--sf-bts-sand); padding: 16px; }
.sf-bts .sf-bts-fav-skeleton { height: 100%; width: 100%; animation: sf-bts-skeleton 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; border-radius: 10px; background-color: var(--sf-bts-slate-100); }
.sf-bts .sf-bts-fav-img { display: block; height: 100%; width: 100%; max-width: 100%; object-fit: contain; }
.sf-bts .sf-bts-fav-body { padding: 16px; }
.sf-bts .sf-bts-fav-brand { margin: 0; font-size: var(--sf-size-10); font-weight: 900; text-transform: uppercase; letter-spacing: 0.18em; color: var(--sf-bts-blue); }
.sf-bts .sf-bts-fav-meta { margin: 0; font-size: var(--sf-size-14); line-height: calc(1.25 / 0.875); color: var(--sf-bts-slate-500); }
.sf-bts .sf-bts-fav-foot { margin-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sf-bts .sf-bts-fav-price { font-size: var(--sf-size-14); line-height: calc(1.25 / 0.875); font-weight: 900; color: var(--sf-bts-navy); }
.sf-bts .sf-bts-fav-cta { display: inline-flex; align-items: center; gap: 6px; font-size: var(--sf-size-14); line-height: calc(1.25 / 0.875); font-weight: 900; color: var(--sf-bts-blue); }
.sf-bts .sf-bts-special-dot { height: 6px; width: 6px; animation: sf-bts-skeleton 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; border-radius: calc(infinity * 1px); background-color: var(--sf-white); }
@keyframes sf-bts-skeleton { 50% { opacity: 0.5; } }
.sf-bts .sf-bts-special { position: relative; overflow: hidden; background-color: var(--sf-white); padding: 24px 16px 48px; }
.sf-bts .sf-bts-special-wrap { position: relative; margin-inline: auto; max-width: 576px; }
.sf-bts .sf-bts-special-back { position: absolute; inset: -16px; rotate: -6deg; border-radius: 34px; background-color: var(--sf-bts-green); box-shadow: var(--sf-bts-shadow-base), 0 1px 3px 0 var(--sf-bts-shadow), 0 1px 2px -1px var(--sf-bts-shadow); }
.sf-bts .sf-bts-special-tilt { position: relative; rotate: -2deg; transition-property: transform, translate, scale, rotate; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 300ms; }
.sf-bts .sf-bts-special-tile { position: relative; z-index: 10; display: flex; aspect-ratio: 3/2; align-items: flex-end; overflow: hidden; border-radius: 28px; background-color: var(--sf-bts-navy-dark); color: inherit; text-decoration: none; animation: sf-bts-pulse-green 2.8s ease-in-out infinite; }
.sf-bts .sf-bts-special-scrim { position: absolute; inset: 0; background-image: linear-gradient( to right in oklab, color-mix(in oklab, var(--sf-bts-black) 90%, transparent) 0%, color-mix(in oklab, var(--sf-bts-black) 55%, transparent) 50%, color-mix(in oklab, var(--sf-bts-black) 10%, transparent) 100% ); }
.sf-bts .sf-bts-special-body { position: relative; display: flex; width: 100%; flex-direction: column; gap: 12px; padding: 24px; color: var(--sf-white); }
.sf-bts .sf-bts-special-copy { max-width: 512px; }
.sf-bts .sf-bts-special-badge { margin-bottom: 8px; display: inline-flex; align-items: center; gap: 6px; border-radius: calc(infinity * 1px); background-color: var(--sf-bts-sale); padding: 4px 12px; font-size: var(--sf-size-10); font-weight: 900; text-transform: uppercase; letter-spacing: 0.025em; color: var(--sf-white); box-shadow: var(--sf-bts-shadow-base), 0 10px 15px -3px var(--sf-bts-shadow), 0 4px 6px -4px var(--sf-bts-shadow); }
.sf-bts .sf-bts-h2.sf-bts-special-title { letter-spacing: -0.025em; color: var(--sf-white); filter: drop-shadow(0 1px 3px var(--sf-bts-text-shadow-60)); }
.sf-bts .sf-bts-special-text { margin: 0; font-size: var(--sf-size-14); line-height: 1.625; color: color-mix(in oklab, var(--sf-white) 90%, transparent); filter: drop-shadow(0 1px 2px var(--sf-bts-text-shadow-60)); }
.sf-bts .sf-bts-special-arrow { height: 44px; width: 44px; flex-shrink: 0; }
@keyframes sf-bts-pulse-green { 0%, 100% { box-shadow: 0 0 0 0 var(--sf-bts-green-50), 0 25px 60px -20px var(--sf-bts-moss-50); } 50% { box-shadow: 0 0 0 12px var(--sf-bts-green-0), 0 28px 65px -18px var(--sf-bts-moss-65); } }
.sf-bts .sf-bts-guide { position: relative; overflow: hidden; scroll-margin-top: 96px; padding-block: 80px; }
.sf-bts .sf-bts-guide-wrap { position: relative; }
.sf-bts .sf-bts-guide-head { text-align: center; }
.sf-bts .sf-bts-h2.sf-bts-guide-title { letter-spacing: -0.025em; }
.sf-bts .sf-bts-tip-grid { margin-top: 36px; display: grid; gap: 16px; }
.sf-bts .sf-bts-tip { border: 1px solid color-mix(in oklab, var(--sf-bts-slate-200) 80%, transparent); border-radius: 14px; background-color: var(--sf-white); padding: 24px; }
.sf-bts .sf-bts-tip-icon { display: inline-flex; height: 48px; width: 48px; align-items: center; justify-content: center; border-radius: 14px; background-color: var(--sf-bts-blue); color: var(--sf-white); }
.sf-bts .sf-bts-tip-text { margin: 0; font-size: var(--sf-size-14); line-height: 1.625; color: var(--sf-bts-slate-600); }
.sf-bts .sf-bts-brands { scroll-margin-top: 96px; background-color: var(--sf-bts-ice); padding-block: 80px; }
.sf-bts .sf-bts-discount { margin-top: 32px; scroll-margin-top: 96px; overflow: hidden; border-radius: 28px; }
.sf-bts .sf-bts-discount-head { display: flex; flex-direction: column; gap: 4px; background-color: var(--sf-bts-sale); padding: 16px 20px; }
.sf-bts .sf-bts-h3.sf-bts-discount-title, .sf-bts .sf-bts-h3.sf-bts-core-title { color: var(--sf-white); }
.sf-bts .sf-bts-discount-note { margin: 0; font-size: var(--sf-size-12); font-weight: 700; color: color-mix(in oklab, var(--sf-white) 90%, transparent); }
.sf-bts .sf-bts-discount-body { background-color: var(--sf-white); padding: 20px; }
.sf-bts .sf-bts-discount-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.sf-bts .sf-bts-dbrand { position: relative; display: flex; width: 100%; flex-direction: column; overflow: hidden; border: 1px solid var(--sf-bts-slate-200); border-radius: 14px; background-color: var(--sf-white); color: inherit; text-decoration: none; }
.sf-bts .sf-bts-dbrand-media { position: relative; display: flex; aspect-ratio: 16/10; align-items: center; justify-content: center; background-color: var(--sf-bts-sand); padding: 24px; }
.sf-bts .sf-bts-dbrand-logo { display: flex; height: 64px; width: 132px; align-items: center; justify-content: center; }
.sf-bts .sf-bts-dbrand-img { display: block; height: 100%; width: 100%; max-width: 100%; object-fit: contain; }
.sf-bts .sf-bts-dbrand-badge { position: absolute; right: 12px; top: 12px; border-radius: calc(infinity * 1px); background-color: var(--sf-bts-sale); padding: 4px 10px; font-size: var(--sf-size-11); font-weight: 900; color: var(--sf-white); box-shadow: var(--sf-bts-shadow-base), 0 10px 15px -3px var(--sf-bts-shadow), 0 4px 6px -4px var(--sf-bts-shadow); }
.sf-bts .sf-bts-dbrand-body { border-style: solid; border-width: 1px 0 0; border-color: var(--sf-bts-slate-100); padding: 12px 16px; }
.sf-bts .sf-bts-dbrand-blurb { margin: 0; font-size: var(--sf-size-12); line-height: 1.375; color: var(--sf-bts-slate-600); }
.sf-bts .sf-bts-dbrand-cta { margin-top: 8px; display: inline-flex; align-items: center; gap: 4px; font-size: var(--sf-size-12); font-weight: 900; color: var(--sf-bts-blue); }
.sf-bts .sf-bts-footnote { margin: 0; font-size: var(--sf-size-11); line-height: 1.625; color: var(--sf-bts-slate-500); }
.sf-bts .sf-bts-core-grid { margin-top: 16px; display: grid; gap: 16px; }
.sf-bts .sf-bts-core { position: relative; display: block; aspect-ratio: 16/10; overflow: hidden; border-radius: 14px; background-color: var(--sf-bts-navy); color: inherit; text-decoration: none; }
.sf-bts .sf-bts-core-eyebrow { margin: 0; font-size: var(--sf-size-10); font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in oklab, var(--sf-white) 80%, transparent); }
.sf-bts .sf-bts-core-text { margin: 0; max-width: 200px; font-size: var(--sf-size-12); line-height: 1.375; color: color-mix(in oklab, var(--sf-white) 90%, transparent); }
.sf-bts .sf-bts-mag { padding: 0 16px 56px; }
.sf-bts .sf-bts-mag-box { position: relative; margin-inline: auto; max-width: 1024px; overflow: hidden; border-radius: 24px; background-color: var(--sf-bts-navy-dark); padding: 24px 20px; color: var(--sf-white); }
.sf-bts .sf-bts-mag-ring { position: absolute; right: -64px; top: -80px; height: 224px; width: 224px; border: 30px dashed color-mix(in oklab, var(--sf-bts-blue) 25%, transparent); border-radius: calc(infinity * 1px); }
.sf-bts .sf-bts-mag-head { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; }
.sf-bts .sf-bts-mag-intro { max-width: 672px; }
.sf-bts .sf-bts-mag-eyebrow { margin: 0; font-size: var(--sf-size-11); font-weight: 900; text-transform: uppercase; letter-spacing: 0.2em; color: var(--sf-bts-sky); }
.sf-bts .sf-bts-h2.sf-bts-mag-title { letter-spacing: -0.025em; color: var(--sf-white); }
.sf-bts .sf-bts-mag-text { margin: 0; font-size: var(--sf-size-14); line-height: calc(1.25 / 0.875); color: color-mix(in oklab, var(--sf-white) 75%, transparent); }
.sf-bts .sf-bts-mag-cta { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; gap: 8px; align-self: flex-start; border-radius: 10px; background-color: var(--sf-bts-blue); padding: 10px 20px; font-size: var(--sf-size-12); font-weight: 900; color: var(--sf-white); text-decoration: none; box-shadow: var(--sf-bts-shadow-base), 0 20px 25px -5px var(--sf-bts-shadow), 0 8px 10px -6px var(--sf-bts-shadow); }
.sf-bts .sf-bts-mag-grid { position: relative; margin-top: 20px; display: grid; gap: 12px; }
.sf-bts .sf-bts-article { display: flex; flex-direction: column; overflow: hidden; border-radius: 10px; background-color: var(--sf-white); color: inherit; text-decoration: none; }
.sf-bts .sf-bts-article-media { position: relative; aspect-ratio: 16/7; overflow: hidden; background-color: var(--sf-bts-slate-100); }
.sf-bts .sf-bts-ai { pointer-events: none; position: absolute; top: 8px; right: 8px; z-index: 10; display: inline-flex; }
.sf-bts .sf-bts-ai-mark { display: block; height: 20px; width: 20px; flex-shrink: 0; filter: drop-shadow(0 1px 2px var(--sf-bts-ai-shadow)); }
.sf-bts .sf-bts-article-body { display: flex; flex: 1; flex-direction: column; padding: 12px; }
.sf-bts .sf-bts-article-teaser { margin: 0; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; flex: 1; font-size: var(--sf-size-11); line-height: 1.375; color: var(--sf-bts-slate-500); }
.sf-bts .sf-bts-article-cta { margin-top: 6px; display: inline-flex; align-items: center; gap: 4px; font-size: var(--sf-size-11); font-weight: 900; color: var(--sf-bts-blue); }
@media (hover: hover) {
.sf-bts .sf-bts-header-mag:hover { background-color: var(--sf-bts-navy); color: var(--sf-white); }
.sf-bts .sf-bts-header-shop:hover, .sf-bts .sf-bts-cta-blue:hover, .sf-bts .sf-bts-mag-cta:hover { background-color: var(--sf-bts-blue-dark); }
.sf-bts .sf-bts-cta:hover, .sf-bts .sf-bts-mag-cta:hover { translate: 0 -2px; }
.sf-bts .sf-bts-chip:hover { border-color: var(--sf-bts-blue); color: var(--sf-bts-blue); }
.sf-bts .sf-bts-sale-badge:hover, .sf-bts .sf-bts-special-tilt:hover, .sf-bts .sf-bts-group:hover .sf-bts-badge-limited { rotate: 0deg; }
.sf-bts .sf-bts-group:hover .sf-bts-zoom-slow, .sf-bts .sf-bts-group:hover .sf-bts-fav-img, .sf-bts .sf-bts-group:hover .sf-bts-dbrand-img { scale: 105% 105%; }
.sf-bts .sf-bts-group:hover .sf-bts-cat-arrow, .sf-bts .sf-bts-group:hover .sf-bts-special-arrow, .sf-bts .sf-bts-link-group:hover .sf-bts-cat-link-arrow { translate: 4px 0; }
.sf-bts .sf-bts-group:hover .sf-bts-dbrand-cta { gap: 6px; }
.sf-bts .sf-bts-fav:hover, .sf-bts .sf-bts-dbrand:hover, .sf-bts .sf-bts-article:hover { translate: 0 -4px; box-shadow: var(--sf-bts-shadow-base), 0 20px 25px -5px var(--sf-bts-shadow), 0 8px 10px -6px var(--sf-bts-shadow); }
}
@media (prefers-reduced-motion: reduce) {
.sf-bts .sf-bts-sale-badge, .sf-bts .sf-bts-special-tile { animation: none; }
}
@container sf-lp (min-width: 640px) {
.sf-bts .sf-bts-header-inner { height: 64px; gap: 0; padding: 0 24px; }
.sf-bts .sf-bts-header-logo-img { height: 32px; }
.sf-bts .sf-bts-header-actions { gap: 8px; }
.sf-bts .sf-bts-header-mag { padding: 8px 16px; font-size: var(--sf-size-14); line-height: calc(1.25 / 0.875); }
.sf-bts .sf-bts-header-shop { gap: 6px; padding: 8px 16px; font-size: var(--sf-size-14); line-height: calc(1.25 / 0.875); }
.sf-bts .sf-bts-only-narrow { display: none; }
.sf-bts .sf-bts-only-wide { display: block; }
.sf-bts .sf-bts-dd-hero-backpack { display: block; }
.sf-bts .sf-bts-dd-hero-pencil { right: 20px; top: 20px; }
.sf-bts .sf-bts-dd-hero-spiral { left: 20px; }
.sf-bts .sf-bts-hero-copy { padding-inline: 32px; }
.sf-bts .sf-bts-hero-ctas { flex-direction: row; }
.sf-bts .sf-bts-jump { justify-content: flex-start; }
.sf-bts .sf-bts-sale-badge { right: 32px; top: 32px; height: 160px; width: 160px; }
.sf-bts .sf-bts-badge-small { max-width: 110px; font-size: var(--sf-size-12); }
.sf-bts .sf-bts-badge-big { font-size: var(--sf-bts-text-36); }
.sf-bts .sf-bts-badge-price { max-width: 128px; font-size: var(--sf-bts-text-24); }
.sf-bts .sf-bts-badge-limited { bottom: -10px; font-size: var(--sf-size-10); }
.sf-bts .sf-bts-badge-percent { left: -12px; top: 20px; font-size: var(--sf-bts-text-48); }
.sf-bts .sf-bts-wrap, .sf-bts .sf-bts-categories, .sf-bts .sf-bts-special, .sf-bts .sf-bts-mag { padding-inline: 24px; }
.sf-bts .sf-bts-cat-grid, .sf-bts .sf-bts-core-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bts .sf-bts-special-back { inset: -24px; }
.sf-bts .sf-bts-special-tile { aspect-ratio: 16/9; }
.sf-bts .sf-bts-special-body { flex-direction: row; align-items: flex-end; justify-content: space-between; padding: 32px; }
.sf-bts .sf-bts-special-text { font-size: var(--sf-size-16); }
.sf-bts .sf-bts-discount-head { flex-direction: row; align-items: center; justify-content: space-between; padding: 20px 32px; }
.sf-bts .sf-bts-discount-note { font-size: var(--sf-size-14); line-height: calc(1.25 / 0.875); }
.sf-bts .sf-bts-discount-body { padding: 32px; }
.sf-bts .sf-bts-dbrand { width: calc(50% - 8px); }
.sf-bts .sf-bts-mag-box { padding: 28px 32px; }
.sf-bts .sf-bts-mag-head { flex-direction: row; align-items: flex-end; }
.sf-bts .sf-bts-mag-cta { align-self: auto; }
}
@container sf-lp (min-width: 768px) {
.sf-bts .sf-bts-tip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-bts .sf-bts-mag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@container sf-lp (min-width: 1024px) {
.sf-bts .sf-bts-dd-hero-backpack { left: 38%; right: auto; top: 48px; }
.sf-bts .sf-bts-dd-hero-glasses, .sf-bts .sf-bts-dd-guide-ruler, .sf-bts .sf-bts-dd-guide-apple, .sf-bts .sf-bts-dd-guide-bulb, .sf-bts .sf-bts-dd-guide-scissors, .sf-bts .sf-bts-dd-guide-glasses { display: block; }
.sf-bts .sf-bts-dd-hero-pencil { left: 8px; right: auto; height: 36px; width: 96px; }
.sf-bts .sf-bts-dd-hero-spiral { bottom: 24px; left: 0; }
.sf-bts .sf-bts-dd-guide-plane { right: 64px; }
.sf-bts .sf-bts-dd-guide-ruler { right: 80px; }
.sf-bts .sf-bts-dd-guide-spiral { left: 64px; }
.sf-bts .sf-bts-dd-guide-apple { left: 80px; }
.sf-bts .sf-bts-dd-guide-bulb, .sf-bts .sf-bts-dd-guide-glasses { right: 160px; }
.sf-bts .sf-bts-hero-swoosh { left: 24px; height: 520px; width: 520px; }
.sf-bts .sf-bts-hero-grid { grid-template-columns: 0.9fr 1.1fr; }
.sf-bts .sf-bts-hero-copy { order: 0; padding-block: 80px; padding-left: 40px; padding-right: 56px; }
.sf-bts .sf-bts-hero-media { order: 0; min-height: 620px; border-bottom-left-radius: 72px; }
.sf-bts .sf-bts-hero-fade { display: none; }
.sf-bts .sf-bts-cat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-bts .sf-bts-tip-grid, .sf-bts .sf-bts-core-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-bts .sf-bts-dbrand { width: calc(25% - 12px); }
}
@container sf-lp (min-width: 1500px) {
.sf-bts .sf-bts-dd-hero-bulb { display: block; }
}
/* regenjacken.css */
.sf-rj { color: var(--sf-rj-text); background: var(--sf-rj-white); font-family: var(--sf-body); overflow-x: clip; }
.sf-rj .sf-rj-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.sf-rj .sf-rj-narrow { max-width: 860px; }
.sf-rj .sf-rj-section { padding: var(--sf-rj-section-pad) 0; }
.sf-rj .sf-rj-section-light { background: var(--sf-rj-paper); }
.sf-rj .sf-rj-section-deep { background: linear-gradient(180deg, var(--sf-rj-deep), var(--sf-rj-night)); color: var(--sf-rj-white); }
.sf-rj .sf-rj-section-night { background: radial-gradient(120% 90% at 50% 0%, var(--sf-rj-deep), var(--sf-rj-storm)); color: var(--sf-rj-white); }
.sf-rj .sf-rj-eyebrow { margin: 0 0 10px; font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-rj-blue); }
.sf-rj .sf-rj-section-deep .sf-rj-eyebrow, .sf-rj .sf-rj-section-night .sf-rj-eyebrow { color: var(--sf-rj-brand-light); }
.sf-rj .sf-rj-h2 { margin: 0 0 12px; font-family: var(--sf-rj-display); font-size: var(--sf-rj-fs-h2); font-weight: 800; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: inherit; }
.sf-rj .sf-rj-lead { max-width: 720px; margin: 0 0 22px; font-size: var(--sf-rj-fs-lead); line-height: 1.55; }
.sf-rj .sf-rj-small { font-size: var(--sf-size-14); opacity: 0.85; }
.sf-rj .sf-rj-textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.sf-rj .sf-rj-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border: 2px solid transparent; border-radius: 999px; font-size: var(--sf-size-16); font-weight: 800; text-decoration: none; cursor: pointer; transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; }
.sf-rj .sf-rj-btn:hover { transform: translateY(-2px); }
.sf-rj .sf-rj-btn-primary { background: var(--sf-rj-brand); color: var(--sf-rj-brand-ink); box-shadow: 0 10px 26px var(--sf-rj-brand-shadow); }
.sf-rj .sf-rj-hero .sf-rj-btn-primary, .sf-rj .sf-rj-section-deep .sf-rj-btn-primary, .sf-rj .sf-rj-section-night .sf-rj-btn-primary { background: var(--sf-rj-white); color: var(--sf-rj-brand); box-shadow: 0 10px 26px var(--sf-rj-shadow-strong); }
.sf-rj .sf-rj-btn-glass { background: var(--sf-rj-glass); border-color: var(--sf-rj-glass-line); color: var(--sf-rj-white); backdrop-filter: blur(8px); }
.sf-rj .sf-rj-btn-ghost { background: transparent; border-color: var(--sf-rj-blue); color: var(--sf-rj-blue); }
.sf-rj .sf-rj-btn-outline { background: var(--sf-rj-white); border-color: var(--sf-rj-ink); color: var(--sf-rj-ink); }
.sf-rj .sf-rj-btn-mic { background: var(--sf-rj-white); color: var(--sf-rj-brand); min-height: 52px; padding: 0 24px; font-size: var(--sf-size-16); }
.sf-rj .sf-rj-link-btn { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--sf-rj-blue); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sf-rj .sf-rj-hero { position: relative; display: flex; align-items: flex-end; padding: 104px 0 40px; overflow: hidden; background: radial-gradient(70% 80% at 82% 0%, var(--sf-rj-brand), transparent 70%), radial-gradient(60% 70% at 10% 100%, var(--sf-rj-deep), transparent 70%), linear-gradient(180deg, var(--sf-rj-night), var(--sf-rj-storm)); color: var(--sf-rj-white); touch-action: pan-y; }
@container sf-lp (min-width: 1024px) {
.sf-rj .sf-rj-hero { min-height: clamp(460px, 60vh, 580px); padding: 112px 0 48px; }
}
.sf-rj .sf-rj-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.sf-rj .sf-rj-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--sf-rj-shade) 100%); pointer-events: none; }
.sf-rj .sf-rj-rain { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.sf-rj .sf-rj-hero-inner { position: relative; z-index: 3; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; pointer-events: none; }
.sf-rj .sf-rj-hero-inner a, .sf-rj .sf-rj-hero-inner button { pointer-events: auto; }
.sf-rj .sf-rj-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 14px; font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-rj-white-80); }
.sf-rj .sf-rj-kicker-logo { display: block; width: auto; height: 26px; filter: brightness(0) invert(1); }
.sf-rj .sf-rj-kicker-logo + span { padding-left: 12px; border-left: 1px solid var(--sf-rj-glass-line); }
.sf-rj .sf-rj-title { max-width: 100%; margin: 0 0 16px; font-family: var(--sf-rj-display); font-size: var(--sf-rj-fs-hero); font-style: italic; font-weight: 800; line-height: 1.02; letter-spacing: 0; text-transform: uppercase; color: var(--sf-rj-white); }
.sf-rj .sf-rj-title-line { display: block; }
.sf-rj .sf-rj-title-accent { color: var(--sf-rj-brand-sky); }
.sf-rj .sf-rj-intro { max-width: 580px; margin: 0 0 10px; font-size: var(--sf-rj-fs-lead); line-height: 1.5; color: var(--sf-rj-white-80); }
.sf-rj .sf-rj-weather { display: inline-flex; margin: 4px 0 0; padding: 5px 12px; border-left: 3px solid var(--sf-rj-brand-bright); background: var(--sf-rj-glass); font-size: var(--sf-size-15); font-weight: 700; }
.sf-rj .sf-rj-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.sf-rj .sf-rj-umbrella { position: absolute; top: 0; left: 0; z-index: 5; width: 1px; height: 1px; overflow: visible; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; will-change: transform; }
.sf-rj .sf-rj-umbrella-on { opacity: 1; }
.sf-rj .sf-rj-umbrella-dim { opacity: 0.45; }
.sf-rj .sf-rj-umbrella svg { position: absolute; overflow: visible; }
.sf-rj .sf-rj-umbrella-panel { fill: var(--sf-rj-brand); }
.sf-rj .sf-rj-umbrella-panel-light { fill: var(--sf-rj-umbrella-light); }
.sf-rj .sf-rj-umbrella-edge { fill: none; stroke: var(--sf-rj-storm); stroke-opacity: 0.35; stroke-width: 1.2; }
.sf-rj .sf-rj-umbrella-shaft { fill: none; stroke: var(--sf-rj-umbrella-shaft); stroke-width: 3; stroke-linecap: round; }
.sf-rj .sf-rj-rain-schirm { cursor: none; }
.sf-rj .sf-rj-bereich { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 100%; padding: 4px; border: 1px solid var(--sf-rj-line); border-radius: 16px; background: var(--sf-rj-paper); text-decoration: none; }
.sf-rj .sf-rj-bereich-tab { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 16px; border-radius: 12px; color: var(--sf-rj-text); text-decoration: none; line-height: 1.2; }
.sf-rj .sf-rj-bereich-tab > svg { flex: none; }
.sf-rj .sf-rj-bereich-tab span { display: grid; min-width: 0; }
.sf-rj .sf-rj-bereich-tab b { font-size: var(--sf-size-15); font-weight: 800; }
.sf-rj .sf-rj-bereich-tab small { font-size: var(--sf-size-12); opacity: 0.75; }
.sf-rj a.sf-rj-bereich-tab:hover { background: var(--sf-rj-white); }
.sf-rj .sf-rj-bereich-wissen .sf-rj-bereich-on { background: var(--sf-rj-blue); color: var(--sf-rj-white); }
.sf-rj .sf-rj-hero-switch { position: absolute; top: 20px; right: 0; left: 0; z-index: 4; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.sf-rj .sf-rj-bereich-kaufen { border-color: var(--sf-rj-glass-line); background: var(--sf-rj-glass); backdrop-filter: blur(8px); }
.sf-rj .sf-rj-bereich-kaufen .sf-rj-bereich-tab { color: var(--sf-rj-white); }
.sf-rj .sf-rj-bereich-kaufen a.sf-rj-bereich-tab:hover { background: var(--sf-rj-glass); }
.sf-rj .sf-rj-bereich-kaufen .sf-rj-bereich-on { background: var(--sf-rj-white); color: var(--sf-rj-brand); }
.sf-rj .sf-rj-know { padding: 20px 0 44px; border-bottom: 1px solid var(--sf-rj-line); background: var(--sf-rj-white); color: var(--sf-rj-text); }
.sf-rj .sf-rj-know-inner { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.sf-rj .sf-rj-know-kicker { display: flex; align-items: center; gap: 8px; margin: 36px 0 12px; font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-rj-blue); }
.sf-rj .sf-rj-know-title { max-width: 22ch; margin: 0 0 14px; font-family: var(--sf-rj-display); font-size: var(--sf-rj-fs-know); font-style: italic; font-weight: 800; line-height: 0.96; letter-spacing: -0.01em; text-transform: uppercase; color: var(--sf-rj-ink); text-wrap: balance; }
.sf-rj .sf-rj-know-title span { display: block; color: var(--sf-rj-blue); }
.sf-rj .sf-rj-know-intro { max-width: 660px; margin: 0; font-size: var(--sf-rj-fs-lead); line-height: 1.5; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.sf-rj .sf-rj-chapters a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border: 1px solid var(--sf-rj-line); border-radius: 14px; background: var(--sf-rj-paper); color: var(--sf-rj-ink); text-decoration: none; }
.sf-rj .sf-rj-chapters a:hover { border-color: var(--sf-rj-blue); }
.sf-rj .sf-rj-chapters em { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sf-rj-blue); color: var(--sf-rj-white); font-style: normal; font-weight: 800; }
.sf-rj .sf-rj-chapters span { display: grid; flex: 1; min-width: 0; }
.sf-rj .sf-rj-chapters b { font-size: var(--sf-size-16); }
.sf-rj .sf-rj-chapters small { font-size: var(--sf-size-13); color: var(--sf-rj-muted); }
.sf-rj .sf-rj-chapters a > svg { flex: none; color: var(--sf-rj-blue); }
@container sf-lp (max-width: 760px) {
.sf-rj .sf-rj-chapters { grid-template-columns: minmax(0, 1fr); }
.sf-rj .sf-rj-bereich { display: grid; }
.sf-rj .sf-rj-bereich-tab { padding: 9px 10px; gap: 8px; }
.sf-rj .sf-rj-bereich-tab small { display: none; }
.sf-rj .sf-rj-bereich-tab b { font-size: var(--sf-size-13); }
}
.sf-rj .sf-rj-lab { display: grid; gap: 32px; align-items: start; }
.sf-rj .sf-rj-tabs { display: inline-flex; gap: 4px; margin-bottom: 18px; padding: 4px; border-radius: 999px; background: var(--sf-rj-white); box-shadow: 0 4px 18px var(--sf-rj-shadow); }
.sf-rj .sf-rj-tab { min-height: 44px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--sf-rj-ink); font-size: var(--sf-size-15); font-weight: 800; cursor: pointer; transition: background 0.2s ease; }
.sf-rj .sf-rj-tab-on { background: var(--sf-rj-ink); color: var(--sf-rj-white); }
.sf-rj .sf-rj-lab-satz { margin: 0 0 18px; font-size: var(--sf-size-18); font-weight: 800; line-height: 1.35; color: var(--sf-rj-ink); }
.sf-rj .sf-rj-traits { margin-bottom: 20px; padding: 14px 18px; border-radius: 18px; background: var(--sf-rj-white); box-shadow: 0 6px 22px var(--sf-rj-shadow); }
.sf-rj .sf-rj-traits-title { margin: 0 0 6px; font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-trait { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--sf-rj-line); font-weight: 700; color: var(--sf-rj-ink); }
.sf-rj .sf-rj-trait-bar { display: inline-flex; gap: 4px; }
.sf-rj .sf-rj-trait-bar em { width: 28px; height: 9px; border-radius: 5px; background: var(--sf-rj-line); transition: background 0.3s ease; }
.sf-rj .sf-rj-trait-bar .sf-rj-trait-on { background: var(--sf-rj-blue); }
.sf-rj .sf-rj-trait-good { margin: 10px 0 0; font-weight: 700; }
.sf-rj .sf-rj-trait-good span { display: inline-block; margin-right: 8px; padding: 2px 8px; border-radius: 4px; background: var(--sf-rj-ink); color: var(--sf-rj-white); font-size: var(--sf-size-12); letter-spacing: 0.08em; text-transform: uppercase; }
.sf-rj .sf-rj-lab-jacken p { margin: 0 0 10px; font-weight: 800; color: var(--sf-rj-ink); }
.sf-rj .sf-rj-lab-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.sf-rj .sf-rj-lab-thumb { width: 68px; height: 68px; padding: 4px; border: 2px solid var(--sf-rj-line); border-radius: 14px; background: var(--sf-rj-white); cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; }
.sf-rj .sf-rj-lab-thumb:hover, .sf-rj .sf-rj-lab-thumb:focus-visible { border-color: var(--sf-rj-ink); transform: translateY(-3px); }
.sf-rj .sf-rj-lab-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sf-rj .sf-rj-xr { margin: 8px 0 28px; }
.sf-rj .sf-rj-xr-pin { display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: 18px; }
.sf-rj .sf-rj-xr-steps { display: grid; grid-template-rows: auto auto; order: 2; width: 100%; }
.sf-rj .sf-rj-xr-nav { grid-row: 2; }
.sf-rj .sf-rj-xr-step { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity 0.18s ease, transform 0.18s ease; pointer-events: none; }
.sf-rj .sf-rj-xr-step-on { opacity: 1; transform: none; transition-delay: 0.16s; transition-duration: 0.3s; pointer-events: auto; }
.sf-rj .sf-rj-xr-step-n { margin: 0 0 6px; font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.14em; color: var(--sf-rj-brand); }
.sf-rj .sf-rj-xr-step h3 { margin: 0 0 8px; font-family: var(--sf-rj-display); font-size: var(--sf-rj-fs-h3); font-style: italic; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--sf-rj-ink); }
.sf-rj .sf-rj-xr-step p { max-width: 460px; margin: 0 0 12px; font-size: var(--sf-rj-fs-lead); line-height: 1.5; color: var(--sf-rj-text); }
.sf-rj .sf-rj-xr-step .sf-rj-tabs { margin: 4px 0 0; }
.sf-rj .sf-rj-xr-stage { position: relative; container-type: inline-size; width: min(100%, 560px); aspect-ratio: 1; overflow: hidden; border-radius: 28px; background: var(--sf-rj-white); box-shadow: 0 24px 60px var(--sf-rj-shadow); }
@container sf-lp (min-width: 900px) {
.sf-rj .sf-rj-xr-pin { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); grid-template-rows: minmax(0, 1fr); align-items: center; gap: 48px; }
.sf-rj .sf-rj-xr-steps { order: 0; }
.sf-rj .sf-rj-xr-stage { width: min(100%, 640px); }
}
.sf-rj .sf-rj-xr-stage-weiter { cursor: zoom-in; }
.sf-rj .sf-rj-xr-nav { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.sf-rj .sf-rj-xr-zoom { display: inline-grid; flex: none; place-items: center; width: 46px; height: 46px; border: 1px solid var(--sf-rj-line); border-radius: 50%; background: var(--sf-rj-white); color: var(--sf-rj-ink); cursor: pointer; box-shadow: 0 4px 14px var(--sf-rj-shadow); }
.sf-rj .sf-rj-xr-zoom-in { border-color: var(--sf-rj-brand); background: var(--sf-rj-brand); color: var(--sf-rj-brand-ink); }
.sf-rj .sf-rj-xr-zoom:disabled { opacity: 0.35; cursor: default; box-shadow: none; }
.sf-rj .sf-rj-xr-dots { display: flex; flex: 1; min-width: 0; gap: 4px; padding: 4px; border-radius: 999px; background: var(--sf-rj-white); box-shadow: 0 4px 14px var(--sf-rj-shadow); }
.sf-rj .sf-rj-xr-dot { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 38px; padding: 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--sf-rj-muted); font-size: var(--sf-size-13); font-weight: 800; white-space: nowrap; cursor: pointer; }
.sf-rj .sf-rj-xr-dot em { display: grid; flex: none; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--sf-rj-line); color: var(--sf-rj-ink); font-size: var(--sf-size-11); font-style: normal; }
.sf-rj .sf-rj-xr-dot-on { background: var(--sf-rj-ink); color: var(--sf-rj-white); }
.sf-rj .sf-rj-xr-dot-on em { background: var(--sf-rj-brand); color: var(--sf-rj-white); }
@container sf-lp (max-width: 560px) {
.sf-rj .sf-rj-xr-dot { padding: 0 4px; font-size: var(--sf-size-12); }
.sf-rj .sf-rj-xr-dot em { display: none; }
}
.sf-rj .sf-rj-xr-ruhig { display: grid; gap: 24px; align-items: center; }
.sf-rj .sf-rj-xr-ruhig .sf-rj-xr-steps { gap: 18px; order: 0; }
.sf-rj .sf-rj-xr-ruhig .sf-rj-xr-step { grid-area: auto; }
.sf-rj .sf-rj-xr-ruhig .sf-rj-xr-stage { width: min(100%, 560px); justify-self: center; }
@container sf-lp (min-width: 900px) {
.sf-rj .sf-rj-xr-ruhig { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 48px; }
}
.sf-rj .sf-rj-xr-photo { position: absolute; inset: 0; transform-origin: calc(var(--sf-rj-xr-px) * 100%) calc(var(--sf-rj-xr-py) * 100%); transform: scale(calc(1 + var(--sf-rj-xr-zoom) * 2.6)); will-change: transform; }
.sf-rj .sf-rj-xr-photo img { display: block; width: 100%; height: 100%; padding: 7%; object-fit: contain; mix-blend-mode: multiply; }
.sf-rj .sf-rj-xr-ring { position: absolute; top: calc(var(--sf-rj-xr-py) * 100%); left: calc(var(--sf-rj-xr-px) * 100%); width: 13%; aspect-ratio: 1; border: 2px solid var(--sf-rj-brand); border-radius: 50%; box-shadow: 0 0 0 7px var(--sf-rj-xr-ring-glow); transform: translate(-50%, -50%); opacity: calc(1 - var(--sf-rj-xr-lupe) * 4); }
.sf-rj .sf-rj-xr-lens { position: absolute; inset: 0; background: radial-gradient(90% 80% at 50% 25%, var(--sf-rj-deep), var(--sf-rj-storm)); clip-path: circle( calc(6.5% * (1 + var(--sf-rj-xr-zoom) * 2.6) + var(--sf-rj-xr-lupe) * 95%) at calc(var(--sf-rj-xr-px) * 100%) calc(var(--sf-rj-xr-py) * 100%) ); }
.sf-rj .sf-rj-xr-scene { position: absolute; inset: 0; perspective: 1400px; perspective-origin: 50% 30%; }
.sf-rj .sf-rj-xr-stack { position: absolute; inset: 0; transform-style: preserve-3d; transform: scale(calc(1.06 - var(--sf-rj-xr-kipp) * 0.5)) rotateX(calc(var(--sf-rj-xr-kipp) * 56deg)) rotateZ(calc(var(--sf-rj-xr-kipp) * -32deg)); }
.sf-rj .sf-rj-xr-slab { position: absolute; inset: 0; border-radius: calc(var(--sf-rj-xr-kipp) * 18px); box-shadow: 0 0 0 1px var(--sf-rj-xr-edge), 0 calc(var(--sf-rj-xr-kipp) * 16px) calc(var(--sf-rj-xr-kipp) * 26px) var(--sf-rj-xr-drop-shadow); }
.sf-rj .sf-rj-xr-slab-1 { background: radial-gradient(120% 90% at 28% 12%, var(--sf-rj-xr-sheen), transparent 55%), linear-gradient(115deg, transparent 32%, var(--sf-rj-xr-rip) 46%, transparent 60%), repeating-linear-gradient(0deg, var(--sf-rj-xr-rip) 0 1.5px, transparent 1.5px 24px), repeating-linear-gradient(90deg, var(--sf-rj-xr-rip) 0 1.5px, transparent 1.5px 24px), repeating-linear-gradient(0deg, var(--sf-rj-xr-weave) 0 1px, transparent 1px 3px), repeating-linear-gradient(90deg, var(--sf-rj-xr-weave-soft) 0 1px, transparent 1px 3px), var(--sf-rj-xr-stoff); transform: translateZ(calc(var(--sf-rj-xr-z1) * 100cqw)); }
.sf-rj .sf-rj-xr-slab-2 { background: radial-gradient(circle, var(--sf-rj-xr-pore) 0 1.4px, transparent 1.8px) 0 0 / 9px 9px, linear-gradient(135deg, var(--sf-rj-xr-membrane-hi), var(--sf-rj-yellow)); }
.sf-rj .sf-rj-xr-slab-3 { transform: translateZ(calc(var(--sf-rj-xr-z3) * 100cqw)); }
.sf-rj .sf-rj-xr-3 .sf-rj-xr-slab-3 { background: repeating-linear-gradient(60deg, var(--sf-rj-xr-knit-line) 0 2px, transparent 2px 7px), repeating-linear-gradient(-60deg, var(--sf-rj-xr-knit-line) 0 2px, transparent 2px 7px), var(--sf-rj-xr-knit); }
.sf-rj .sf-rj-xr-25 .sf-rj-xr-slab-3 { background: radial-gradient(circle, var(--sf-rj-xr-print) 0 1.6px, transparent 2px) 0 0 / 8px 8px, var(--sf-rj-xr-film); }
.sf-rj .sf-rj-xr-2 .sf-rj-xr-slab-3 { background: radial-gradient(circle, transparent 0 3px, var(--sf-rj-xr-mesh) 3.5px) 0 0 / 11px 11px; }
.sf-rj .sf-rj-xr-beads { position: absolute; inset: 0; width: 100%; height: 100%; opacity: calc(var(--sf-rj-xr-lupe) * (1 - var(--sf-rj-xr-kipp) * 2.4)); pointer-events: none; }
.sf-rj .sf-rj-xr-labels { position: absolute; inset: 0; opacity: calc((var(--sf-rj-xr-kipp) - 0.55) * 2.6); pointer-events: none; }
.sf-rj .sf-rj-xr-label { position: absolute; top: calc(52% + var(--sf-rj-xr-ly) * 100cqw); right: 4%; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; border-radius: 999px; background: var(--sf-rj-white); color: var(--sf-rj-ink); font-size: clamp(11px, 2.6cqw, 15px); font-weight: 800; box-shadow: 0 6px 18px var(--sf-rj-shadow-strong); transform: translateY(-50%); }
.sf-rj .sf-rj-xr-label em { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--sf-rj-brand); color: var(--sf-rj-white); font-style: normal; }
.sf-rj .sf-rj-xr-label-1 { --sf-rj-xr-ly: var(--sf-rj-xr-l1); }
.sf-rj .sf-rj-xr-label-2 { --sf-rj-xr-ly: 0; }
.sf-rj .sf-rj-xr-label-2 em { background: var(--sf-rj-yellow); color: var(--sf-rj-yellow-ink); }
.sf-rj .sf-rj-xr-label-3 { --sf-rj-xr-ly: var(--sf-rj-xr-l3); }
.sf-rj .sf-rj-xr-label-3 em { background: var(--sf-rj-sky); }
.sf-rj .sf-rj-xr-flow { position: absolute; inset: 0; opacity: var(--sf-rj-xr-ende); pointer-events: none; }
.sf-rj .sf-rj-xr-drop { position: absolute; top: 9%; width: 3px; height: 18px; border-radius: 3px; background: linear-gradient(transparent, var(--sf-rj-mist)); animation: sf-rj-xr-drop 1.4s linear infinite; animation-delay: var(--sf-rj-delay, 0s); }
@keyframes sf-rj-xr-drop { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 85% { opacity: 1; transform: translateY(16cqw); } 100% { opacity: 0; transform: translateY(16cqw) scaleY(0.2); } }
.sf-rj .sf-rj-xr-vapor { position: absolute; bottom: 9%; width: 9px; height: 9px; border-radius: 50%; background: var(--sf-rj-xr-vapor); box-shadow: 0 0 12px 4px var(--sf-rj-xr-vapor-glow); animation: sf-rj-xr-vapor 2.6s ease-in infinite; animation-delay: var(--sf-rj-delay, 0s); }
@keyframes sf-rj-xr-vapor { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 0.8; } 100% { opacity: 0; transform: translateY(-74cqw); } }
.sf-rj .sf-rj-xr-pill { position: absolute; left: 50%; margin: 0; padding: 7px 16px; border-radius: 999px; font-size: clamp(12px, 2.8cqw, 17px); font-weight: 800; white-space: nowrap; opacity: var(--sf-rj-xr-ende); transform: translateX(-50%); box-shadow: 0 8px 22px var(--sf-rj-shadow-strong); }
.sf-rj .sf-rj-xr-pill-rain { top: 3.5%; background: var(--sf-rj-white); color: var(--sf-rj-ink); }
.sf-rj .sf-rj-xr-pill-vapor { bottom: 3.5%; background: var(--sf-rj-warm); color: var(--sf-rj-warm-ink); }
@media (prefers-reduced-motion: reduce) {
.sf-rj .sf-rj-xr-drop, .sf-rj .sf-rj-xr-vapor { animation: none; display: none; }
}
.sf-rj .sf-rj-static .sf-rj-xr-drop, .sf-rj .sf-rj-static .sf-rj-xr-vapor { display: none; }
.sf-rj .sf-rj-lab-panel { display: grid; gap: 20px; align-items: start; }
@container sf-lp (min-width: 900px) {
.sf-rj .sf-rj-lab-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
}
.sf-rj .sf-rj-traits-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.sf-rj .sf-rj-traits-head .sf-rj-traits-title { margin: 0; }
.sf-rj .sf-rj-traits-head .sf-rj-tabs { margin: 0; }
.sf-rj .sf-rj-traits .sf-rj-lab-satz { font-size: var(--sf-size-16); }
.sf-rj .sf-rj-ex { display: grid; gap: 18px; }
@container sf-lp (min-width: 900px) {
.sf-rj .sf-rj-ex { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-areas: "controls scene" "result scene"; align-items: start; gap: 22px 36px; }
.sf-rj .sf-rj-ex-scene { grid-area: scene; position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + 24px); }
.sf-rj .sf-rj-ex-controls { grid-area: controls; }
.sf-rj .sf-rj-ex-result { grid-area: result; }
}
.sf-rj .sf-rj-ex-scene { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; background: var(--sf-rj-storm); box-shadow: 0 20px 50px var(--sf-rj-shadow); }
.sf-rj .sf-rj-ex-scene canvas { display: block; width: 100%; height: 100%; }
.sf-rj .sf-rj-ex-controls { display: grid; gap: 16px; }
.sf-rj .sf-rj-ex-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.sf-rj .sf-rj-ex-group legend { margin: 0 0 8px; padding: 0; font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-ex-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.sf-rj .sf-rj-ex-option { display: grid; justify-items: center; align-content: center; gap: 6px; min-height: 74px; padding: 10px 6px; border: 1px solid var(--sf-rj-line); border-radius: 14px; background: var(--sf-rj-white); color: var(--sf-rj-ink); font-size: var(--sf-size-14); font-weight: 800; line-height: 1.2; text-align: center; cursor: pointer; transition: background 0.18s ease, border-color 0.18s ease; }
.sf-rj .sf-rj-ex-option:hover { border-color: var(--sf-rj-brand); }
.sf-rj .sf-rj-ex-option-on { border-color: var(--sf-rj-brand); background: var(--sf-rj-brand); color: var(--sf-rj-brand-ink); }
.sf-rj .sf-rj-ex-toggles { display: grid; gap: 8px; }
.sf-rj .sf-rj-ex-toggle { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px; border: 1px solid var(--sf-rj-line); border-radius: 14px; background: var(--sf-rj-white); color: var(--sf-rj-ink); font-size: var(--sf-size-15); font-weight: 700; text-align: left; cursor: pointer; }
.sf-rj .sf-rj-ex-knob { position: relative; flex: none; width: 42px; height: 24px; margin-left: auto; border-radius: 999px; background: var(--sf-rj-line); transition: background 0.18s ease; }
.sf-rj .sf-rj-ex-knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--sf-rj-white); box-shadow: 0 1px 4px var(--sf-rj-shadow-strong); transition: transform 0.18s ease; }
.sf-rj .sf-rj-ex-toggle-on { border-color: var(--sf-rj-brand); }
.sf-rj .sf-rj-ex-toggle-on .sf-rj-ex-knob { background: var(--sf-rj-brand); }
.sf-rj .sf-rj-ex-toggle-on .sf-rj-ex-knob::after { transform: translateX(18px); }
.sf-rj .sf-rj-ex-result { padding: 18px 20px; border-left: 6px solid var(--sf-rj-ex-farbe, var(--sf-rj-brand)); border-radius: 18px; background: var(--sf-rj-paper); }
.sf-rj .sf-rj-ex-trocken { --sf-rj-ex-farbe: var(--sf-rj-green); }
.sf-rj .sf-rj-ex-klamm { --sf-rj-ex-farbe: var(--sf-rj-yellow-deep); }
.sf-rj .sf-rj-ex-nass { --sf-rj-ex-farbe: var(--sf-rj-warm); }
.sf-rj .sf-rj-ex-result p { margin: 0 0 10px; font-size: var(--sf-size-16); line-height: 1.5; }
.sf-rj .sf-rj-ex-result .sf-rj-ex-verdict { margin-bottom: 6px; font-family: var(--sf-rj-display); font-size: var(--sf-rj-fs-h3); font-style: italic; font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--sf-rj-ink); }
.sf-rj .sf-rj-ex-bars { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 12px; margin: 14px 0; font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-ex-bars em { position: relative; height: 10px; overflow: hidden; border-radius: 999px; background: var(--sf-rj-line); }
.sf-rj .sf-rj-ex-bars em::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--sf-rj-ex-w) * 100%); border-radius: inherit; background: var(--sf-rj-warm); transition: width 0.4s ease; }
.sf-rj .sf-rj-ex-bars .sf-rj-ex-bar-out::before { background: var(--sf-rj-brand); }
.sf-rj .sf-rj-ex-tips { display: grid; gap: 8px; margin: 0 0 12px; padding: 0 0 0 18px; font-size: var(--sf-size-15); line-height: 1.45; }
.sf-rj .sf-rj-ex-tips button { padding: 0; border: 0; background: none; color: var(--sf-rj-brand); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sf-rj .sf-rj-ex-jacken p { font-size: var(--sf-size-14); font-weight: 800; }
.sf-rj .sf-rj-ex-result .sf-rj-ex-note { margin: 10px 0 0; font-size: var(--sf-size-12); color: var(--sf-rj-muted); }
.sf-rj .sf-rj-split { display: grid; gap: 36px; align-items: center; }
@container sf-lp (min-width: 1024px) {
.sf-rj .sf-rj-split { grid-template-columns: 6fr 5fr; gap: 64px; }
}
.sf-rj .sf-rj-druck { display: grid; gap: 10px; margin: 0 0 16px; padding: 0; list-style: none; }
.sf-rj .sf-rj-druck li { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border: 1px solid var(--sf-rj-glass-line); border-radius: 16px; background: var(--sf-rj-glass); line-height: 1.4; }
.sf-rj .sf-rj-druck svg { flex: none; color: var(--sf-rj-brand-light); }
.sf-rj .sf-rj-mess { margin: 0; padding: 22px 18px 18px; border: 1px solid var(--sf-rj-glass-line); border-radius: 28px; background: var(--sf-rj-glass); }
.sf-rj .sf-rj-mess > svg { display: block; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.sf-rj .sf-rj-mess-readout { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.sf-rj .sf-rj-mess-label { font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-rj-white-60); }
.sf-rj .sf-rj-mess-count { font-family: var(--sf-rj-display); font-size: var(--sf-rj-fs-h2); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; color: var(--sf-rj-white); transition: color 0.3s ease; }
.sf-rj .sf-rj-mess-done .sf-rj-mess-count { color: var(--sf-rj-yellow); }
.sf-rj .sf-rj-mess-example { min-height: 1.3em; font-size: var(--sf-size-13); color: var(--sf-rj-mist); }
.sf-rj .sf-rj-mess figcaption { max-width: 420px; margin: 8px auto 0; font-size: var(--sf-size-14); line-height: 1.5; text-align: center; color: var(--sf-rj-white-80); }
.sf-rj .sf-rj-stop-water-top { stop-color: var(--sf-rj-mist); }
.sf-rj .sf-rj-stop-water-bottom { stop-color: var(--sf-rj-blue); }
.sf-rj .sf-rj-mess-tick { stroke: var(--sf-rj-white-60); stroke-width: 2; }
.sf-rj .sf-rj-mess-scale { fill: var(--sf-rj-white-60); font-size: var(--sf-rj-svg-fs-s); font-weight: 700; }
.sf-rj .sf-rj-mess-glass { fill: var(--sf-rj-glass); stroke: var(--sf-rj-white-60); stroke-width: 3; }
.sf-rj .sf-rj-mess-shine { fill: var(--sf-rj-white-18); }
.sf-rj .sf-rj-mess-wave { fill: var(--sf-rj-mist); animation: sf-rj-wave 2.4s linear infinite; }
@keyframes sf-rj-wave { to { transform: translateX(40px); } }
.sf-rj .sf-rj-mess-arrow { fill: none; stroke: var(--sf-rj-brand-bright); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.sf-rj .sf-rj-mess-fabric { fill: var(--sf-rj-blue); stroke: var(--sf-rj-mist); stroke-width: 2; }
.sf-rj .sf-rj-mess-clamp { fill: var(--sf-rj-clamp); stroke: var(--sf-rj-white-60); stroke-width: 1.5; }
.sf-rj .sf-rj-mess-note { fill: var(--sf-rj-white-60); font-size: var(--sf-rj-svg-fs-s); font-weight: 700; }
.sf-rj .sf-rj-mess-drop { fill: var(--sf-rj-sky); opacity: 0; transform: translateY(-8px); transition: opacity 0.25s ease, transform 0.35s ease; }
.sf-rj .sf-rj-mess-drop-on { opacity: 1; transform: translateY(0); }
.sf-rj .sf-rj-mess-stop { fill: var(--sf-rj-yellow); font-size: var(--sf-rj-svg-fs-m); font-weight: 800; opacity: 0; transition: opacity 0.3s ease; }
.sf-rj .sf-rj-mess-stop-on { opacity: 1; }
.sf-rj .sf-rj-cmp { margin-top: 48px; padding: 22px 14px; border-radius: 28px; background: var(--sf-rj-white); color: var(--sf-rj-text); box-shadow: 0 30px 70px var(--sf-rj-shadow); }
@container sf-lp (min-width: 768px) {
.sf-rj .sf-rj-cmp { padding: 30px 32px; }
}
.sf-rj .sf-rj-cmp-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 16px; padding: 0 8px; }
.sf-rj .sf-rj-cmp-title { margin: 0; font-family: var(--sf-rj-display); font-size: var(--sf-rj-fs-h3); font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--sf-rj-ink); }
.sf-rj .sf-rj-cmp-hint { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px; background: var(--sf-rj-yellow); color: var(--sf-rj-yellow-ink); font-size: var(--sf-size-14); font-weight: 800; }
.sf-rj .sf-rj-cmp-axis { display: none; }
.sf-rj .sf-rj-cmp-list { margin: 0; padding: 0; list-style: none; }
.sf-rj .sf-rj-cmp-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "thumb name go" "track track val"; gap: 8px 12px; align-items: center; width: 100%; padding: 12px 8px; border: 0; border-bottom: 1px solid var(--sf-rj-line); border-radius: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; transition: background 0.2s ease; }
.sf-rj .sf-rj-cmp-list li:last-child .sf-rj-cmp-row { border-bottom: 0; }
.sf-rj button.sf-rj-cmp-row:hover, .sf-rj button.sf-rj-cmp-row:focus-visible { border-radius: 14px; background: var(--sf-rj-paper); }
.sf-rj .sf-rj-cmp-thumb { grid-area: thumb; display: block; width: 52px; height: 52px; overflow: hidden; border-radius: 12px; background: var(--sf-rj-paper); }
.sf-rj .sf-rj-cmp-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sf-rj .sf-rj-cmp-name { grid-area: name; min-width: 0; font-size: var(--sf-size-15); font-weight: 700; line-height: 1.3; color: var(--sf-rj-ink); }
.sf-rj .sf-rj-cmp-name b { display: block; font-size: var(--sf-size-11); letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-cmp-name em { display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--sf-rj-paper); font-size: var(--sf-size-11); font-style: normal; font-weight: 800; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-cmp-track { grid-area: track; position: relative; display: block; height: 30px; overflow: hidden; border-radius: 10px; background: linear-gradient( 90deg, transparent calc(100% / 3 - 1px), var(--sf-rj-line) calc(100% / 3 - 1px), var(--sf-rj-line) calc(100% / 3), transparent calc(100% / 3), transparent calc(200% / 3 - 1px), var(--sf-rj-line) calc(200% / 3 - 1px), var(--sf-rj-line) calc(200% / 3), transparent calc(200% / 3) ), var(--sf-rj-paper); }
.sf-rj .sf-rj-cmp-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 0; overflow: hidden; border-radius: 10px; background: linear-gradient(90deg, var(--sf-rj-blue), var(--sf-rj-sky)); transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--sf-rj-i) * 0.1s); }
.sf-rj .sf-rj-cmp-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( 115deg, transparent 0, transparent 14px, var(--sf-rj-white-18) 14px, var(--sf-rj-white-18) 20px ); background-size: 200% 100%; animation: sf-rj-flow 3s linear infinite; }
@keyframes sf-rj-flow { to { background-position: -120px 0; } }
.sf-rj .sf-rj-cmp-on .sf-rj-cmp-bar { width: var(--sf-rj-w); }
.sf-rj .sf-rj-cmp-val { grid-area: val; font-size: var(--sf-size-15); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sf-rj-blue); }
.sf-rj .sf-rj-cmp-go { grid-area: go; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--sf-rj-ink); color: var(--sf-rj-white); font-size: var(--sf-size-13); font-weight: 800; white-space: nowrap; }
@container sf-lp (min-width: 900px) {
.sf-rj .sf-rj-cmp-axis { display: grid; grid-template-columns: 52px minmax(0, 250px) 1fr 100px 124px; gap: 16px; padding: 0 8px 6px; font-size: var(--sf-size-12); font-weight: 700; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-cmp-axis-scale { grid-column: 3; display: flex; justify-content: space-between; }
.sf-rj .sf-rj-cmp-row { grid-template-columns: 52px minmax(0, 250px) 1fr 100px 124px; grid-template-areas: "thumb name track val go"; gap: 16px; }
.sf-rj .sf-rj-cmp-go { justify-self: end; }
}
.sf-rj .sf-rj-finder { position: relative; margin-top: 20px; padding: 28px 22px; border-radius: 28px; background: var(--sf-rj-white); box-shadow: 0 30px 80px var(--sf-rj-shadow); }
@container sf-lp (min-width: 768px) {
.sf-rj .sf-rj-finder { padding: 40px; }
}
.sf-rj .sf-rj-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 26px; }
.sf-rj .sf-rj-progress span { height: 6px; border-radius: 6px; background: var(--sf-rj-line); transition: background 0.3s ease; }
.sf-rj .sf-rj-progress .sf-rj-progress-on { background: var(--sf-rj-brand); }
.sf-rj .sf-rj-step-count { margin: 0 0 6px; font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-step-q { margin: 0 0 22px; font-family: var(--sf-rj-display); font-size: var(--sf-rj-fs-h2); font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--sf-rj-ink); }
.sf-rj .sf-rj-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@container sf-lp (min-width: 900px) {
.sf-rj .sf-rj-options { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
.sf-rj .sf-rj-option { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 128px; padding: 18px; border: 2px solid var(--sf-rj-line); border-radius: 18px; background: var(--sf-rj-paper); color: var(--sf-rj-ink); text-align: left; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.sf-rj .sf-rj-option:hover, .sf-rj .sf-rj-option:focus-visible { border-color: var(--sf-rj-ink); background: var(--sf-rj-white); }
.sf-rj .sf-rj-option svg { color: var(--sf-rj-blue); }
.sf-rj .sf-rj-option-label { margin-top: auto; font-size: var(--sf-size-17); font-weight: 800; }
.sf-rj .sf-rj-option-hint { font-size: var(--sf-size-13); color: var(--sf-rj-muted); }
.sf-rj .sf-rj-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 0; border: 0; background: none; color: var(--sf-rj-muted); font-weight: 700; cursor: pointer; }
.sf-rj .sf-rj-result-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sf-rj .sf-rj-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sf-rj .sf-rj-result-actions .sf-rj-back { margin: 0; }
.sf-rj .sf-rj-result-grid { display: grid; gap: 18px; }
@container sf-lp (min-width: 768px) {
.sf-rj .sf-rj-result-grid { grid-template-columns: repeat(3, 1fr); }
}
.sf-rj .sf-rj-result-grid > div { position: relative; }
.sf-rj .sf-rj-best + .sf-rj-card .sf-rj-card-badge { top: 26px; }
.sf-rj .sf-rj-best { position: absolute; z-index: 2; top: -12px; left: 16px; padding: 5px 12px; border-radius: 999px; background: var(--sf-rj-red); color: var(--sf-rj-white); font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-rj .sf-rj-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@container sf-lp (min-width: 768px) {
.sf-rj .sf-rj-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@container sf-lp (min-width: 1180px) {
.sf-rj .sf-rj-grid { grid-template-columns: repeat(4, 1fr); }
}
.sf-rj .sf-rj-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--sf-rj-line); border-radius: 20px; background: var(--sf-rj-white); color: var(--sf-rj-text); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.sf-rj .sf-rj-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px var(--sf-rj-shadow); }
.sf-rj .sf-rj-card-hot { border-color: var(--sf-rj-yellow); box-shadow: 0 0 0 4px var(--sf-rj-yellow), 0 18px 44px var(--sf-rj-shadow-hot); animation: sf-rj-hot 1.4s ease-out 2; }
@keyframes sf-rj-hot { 0% { box-shadow: 0 0 0 0 var(--sf-rj-yellow), 0 18px 44px var(--sf-rj-shadow-hot); } 60% { box-shadow: 0 0 0 10px var(--sf-rj-shadow-hot), 0 18px 44px var(--sf-rj-shadow-hot); } }
.sf-rj .sf-rj-card-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--sf-rj-paper); }
.sf-rj .sf-rj-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 14px; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.4s ease; }
.sf-rj .sf-rj-card:hover .sf-rj-card-media img { transform: scale(1.04); }
.sf-rj .sf-rj-card-seg { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--sf-rj-white); box-shadow: 0 2px 10px var(--sf-rj-shadow); font-size: var(--sf-size-11); font-style: normal; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-rj-ink); }
.sf-rj .sf-rj-card-seg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-rj-seg, var(--sf-rj-blue)); }
.sf-rj .sf-rj-card-seg-damen { --sf-rj-seg: var(--sf-rj-yellow-deep); }
.sf-rj .sf-rj-card-seg-herren { --sf-rj-seg: var(--sf-rj-blue); }
.sf-rj .sf-rj-card-seg-kinder { --sf-rj-seg: var(--sf-rj-red); }
.sf-rj .sf-rj-card-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: var(--sf-rj-ink); color: var(--sf-rj-white); font-size: var(--sf-size-11); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.sf-rj .sf-rj-card-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.sf-rj .sf-rj-card-brand { font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-card-name { margin: 0; font-size: var(--sf-size-17); font-weight: 800; line-height: 1.2; text-transform: none; }
.sf-rj .sf-rj-card-name a { color: var(--sf-rj-ink); text-decoration: none; }
.sf-rj .sf-rj-meter { display: inline-flex; align-items: center; gap: 2px; font-size: var(--sf-size-12); font-weight: 700; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-meter-on { color: var(--sf-rj-blue); fill: var(--sf-rj-blue); }
.sf-rj .sf-rj-meter-off { color: var(--sf-rj-line); }
.sf-rj .sf-rj-meter-text { margin-left: 6px; }
.sf-rj .sf-rj-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sf-rj .sf-rj-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sf-rj .sf-rj-swatch { display: inline-block; width: 20px; height: 20px; padding: 0; border: 2px solid var(--sf-rj-white); border-radius: 50%; box-shadow: 0 0 0 1px var(--sf-rj-line); cursor: pointer; transition: box-shadow 0.15s ease; }
.sf-rj .sf-rj-swatch:hover, .sf-rj .sf-rj-swatch:focus-visible { box-shadow: 0 0 0 2px var(--sf-rj-muted); outline: none; }
.sf-rj .sf-rj-swatch-on { box-shadow: 0 0 0 2px var(--sf-rj-ink); }
.sf-rj .sf-rj-swatch-more, .sf-rj .sf-rj-color-name { font-size: var(--sf-size-12); font-weight: 700; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-color-name { color: var(--sf-rj-text); }
.sf-rj .sf-rj-option-swatches { display: flex; gap: 4px; height: 26px; align-items: center; }
.sf-rj .sf-rj-option-swatches .sf-rj-swatch { width: 22px; height: 22px; cursor: inherit; }
.sf-rj .sf-rj-pill .sf-rj-swatch { width: 14px; height: 14px; margin-right: 6px; border-width: 1px; vertical-align: -2px; cursor: inherit; }
.sf-rj .sf-rj-advisor-name { margin: 0 0 4px; font-family: var(--sf-rj-display); font-size: var(--sf-rj-fs-h3); font-weight: 800; line-height: 1; text-align: center; text-transform: uppercase; color: var(--sf-rj-white); }
.sf-rj .sf-rj-advisor-name small { display: block; margin-top: 4px; font-family: var(--sf-body); font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.12em; color: var(--sf-rj-brand-light); }
.sf-rj .sf-rj-bridge .sf-rj-wrap { text-align: center; }
.sf-rj .sf-rj-bridge .sf-rj-lead { margin-inline: auto; }
.sf-rj .sf-rj-bridge .sf-rj-btn { margin-top: 8px; }
.sf-rj .sf-rj-viewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 4px 0 18px; }
.sf-rj .sf-rj-viewbar-text { margin: 0; font-size: var(--sf-size-14); color: var(--sf-rj-muted); }
.sf-rj .sf-rj-shelves { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
.sf-rj .sf-rj-shelf { min-width: 0; }
.sf-rj .sf-rj-shelf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.sf-rj .sf-rj-shelf-title { margin: 0; font-size: var(--sf-rj-fs-h3); font-weight: 800; line-height: 1.1; color: var(--sf-rj-ink); }
.sf-rj .sf-rj-shelf-title small { margin-left: 6px; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-shelf-text { margin: 4px 0 0; font-size: var(--sf-size-14); color: var(--sf-rj-muted); }
.sf-rj .sf-rj-shelf-nav { display: flex; align-items: center; gap: 8px; }
.sf-rj .sf-rj-shelf-arrow:disabled { visibility: hidden; }
.sf-rj .sf-rj-shelf-all { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--sf-rj-line); border-radius: 999px; background: var(--sf-rj-white); color: var(--sf-rj-ink); font-size: var(--sf-size-14); font-weight: 700; cursor: pointer; }
.sf-rj .sf-rj-shelf-all:hover { border-color: var(--sf-rj-ink); }
.sf-rj .sf-rj-shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, calc((100% - 54px) / 4)); gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 14px; scrollbar-width: thin; }
.sf-rj .sf-rj-shelf-item { scroll-snap-align: start; min-width: 0; }
.sf-rj .sf-rj-shelf-ghost { min-height: 460px; border-radius: 18px; background: var(--sf-rj-paper); }
@container sf-lp (max-width: 900px) {
.sf-rj .sf-rj-shelf-row { grid-auto-columns: minmax(240px, 46%); }
}
@container sf-lp (max-width: 560px) {
.sf-rj .sf-rj-shelf-row { grid-auto-columns: 78%; }
.sf-rj .sf-rj-shelf-arrow { display: none; }
}
.sf-rj .sf-rj-loadmore { display: flex; justify-content: center; margin-top: 28px; }
.sf-rj .sf-rj-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin: 2px 0; padding: 10px 0; border-top: 1px solid var(--sf-rj-line); border-bottom: 1px solid var(--sf-rj-line); }
.sf-rj .sf-rj-specs div { min-width: 0; }
.sf-rj .sf-rj-specs dt { margin: 0; font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-specs dd { margin: 1px 0 0; font-size: var(--sf-size-14); font-weight: 800; overflow-wrap: anywhere; color: var(--sf-rj-ink); }
.sf-rj .sf-rj-card-kurz { margin: 0; font-size: var(--sf-size-14); line-height: 1.45; }
.sf-rj .sf-rj-reasons { margin: 0; padding: 0; list-style: none; font-size: var(--sf-size-14); }
.sf-rj .sf-rj-reasons li { position: relative; padding-left: 20px; line-height: 1.45; }
.sf-rj .sf-rj-reasons li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--sf-rj-green); }
.sf-rj .sf-rj-card-toggle { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--sf-rj-blue); font-size: var(--sf-size-14); font-weight: 800; cursor: pointer; }
.sf-rj .sf-rj-card-toggle svg { transition: transform 0.2s ease; }
.sf-rj .sf-rj-card-toggle-on svg { transform: rotate(180deg); }
.sf-rj .sf-rj-card-more { font-size: var(--sf-size-14); line-height: 1.5; }
.sf-rj .sf-rj-card-more p { margin: 0 0 8px; }
.sf-rj .sf-rj-card-fit b { display: block; font-size: var(--sf-size-12); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-rj-green); }
.sf-rj .sf-rj-card-fit-no b { color: var(--sf-rj-red); }
.sf-rj .sf-rj-card-sizes { font-size: var(--sf-size-12); color: var(--sf-rj-muted); }
.sf-rj .sf-rj-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sf-rj-line); }
.sf-rj .sf-rj-card-price { display: flex; flex-direction: column; line-height: 1.15; }
.sf-rj .sf-rj-card-price strong { font-size: var(--sf-size-18); font-weight: 800; color: var(--sf-rj-ink); }
.sf-rj .sf-rj-card-price small { margin-top: 3px; font-size: var(--sf-size-12); color: var(--sf-rj-muted); }
.sf-rj .sf-rj-card-price-wait { display: inline-block; width: 64px; height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--sf-rj-paper), var(--sf-rj-line), var(--sf-rj-paper)); background-size: 200% 100%; animation: sf-rj-shimmer 1.2s linear infinite; }
@keyframes sf-rj-shimmer { to { background-position: -200% 0; } }
.sf-rj .sf-rj-card-go { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; background: var(--sf-rj-ink); color: var(--sf-rj-white); font-size: var(--sf-size-13); font-weight: 800; text-decoration: none; white-space: nowrap; }
.sf-rj .sf-rj-card-compact .sf-rj-card-media { aspect-ratio: 1; }
.sf-rj .sf-rj-filterbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 6px 0 22px; }
.sf-rj .sf-rj-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-rj .sf-rj-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 2px solid var(--sf-rj-ink); border-radius: 999px; background: var(--sf-rj-white); color: var(--sf-rj-ink); font-weight: 800; cursor: pointer; }
.sf-rj .sf-rj-pill small { font-size: var(--sf-size-12); opacity: 0.6; }
.sf-rj .sf-rj-pill-soft { border-color: var(--sf-rj-line); }
.sf-rj .sf-rj-pill-on { border-color: var(--sf-rj-ink); background: var(--sf-rj-ink); color: var(--sf-rj-white); }
.sf-rj .sf-rj-empty { padding: 30px 0; color: var(--sf-rj-muted); }
.sf-rj .sf-rj-shoplinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.sf-rj .sf-rj-advisor { display: grid; gap: 24px; margin-top: 10px; }
@container sf-lp (min-width: 1024px) {
.sf-rj .sf-rj-advisor { grid-template-columns: 5fr 7fr; gap: 32px; }
}
.sf-rj .sf-rj-advisor-stage { align-self: start; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 20px; border: 1px solid var(--sf-rj-glass-line); border-radius: 28px; background: var(--sf-rj-glass); text-align: center; }
.sf-rj .sf-rj-orb { width: min(150px, 50%); aspect-ratio: 1; }
@container sf-lp (min-width: 1024px) {
.sf-rj .sf-rj-advisor-stage { position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + 96px); }
}
.sf-rj .sf-rj-advisor-stimme .sf-rj-advisor-stage { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "orb name" "orb status" "action action" "consent consent" "switch switch"; align-items: center; justify-items: start; gap: 6px 16px; padding: 18px; text-align: left; }
.sf-rj .sf-rj-advisor-stimme .sf-rj-advisor-stage .sf-rj-advisor-status { align-self: start; font-size: var(--sf-size-16); }
.sf-rj .sf-rj-advisor-stimme .sf-rj-btn-mic { justify-self: stretch; white-space: nowrap; }
.sf-rj .sf-rj-advisor-stimme .sf-rj-orb { grid-area: orb; width: 96px; }
.sf-rj .sf-rj-advisor-stimme .sf-rj-advisor-name { grid-area: name; align-self: end; text-align: left; }
.sf-rj .sf-rj-advisor-stimme .sf-rj-advisor-status { grid-area: status; }
.sf-rj .sf-rj-advisor-stimme .sf-rj-btn-mic, .sf-rj .sf-rj-advisor-stimme .sf-rj-advisor-controls { grid-area: action; align-self: start; margin-top: 4px; }
.sf-rj .sf-rj-advisor-stimme .sf-rj-consent { grid-area: consent; max-width: none; margin-top: 6px; }
.sf-rj .sf-rj-advisor-stimme .sf-rj-switch { grid-area: switch; }
@container sf-lp (min-width: 1024px) {
.sf-rj .sf-rj-advisor-stimme .sf-rj-advisor-stage { grid-template-columns: 124px minmax(0, 1fr); grid-template-areas: "orb name" "orb status" "orb action" "consent consent" "switch switch"; gap: 6px 18px; padding: 20px 22px; }
.sf-rj .sf-rj-advisor-stimme .sf-rj-advisor-stage .sf-rj-advisor-status { align-self: center; font-size: var(--sf-size-18); }
.sf-rj .sf-rj-advisor-stimme .sf-rj-btn-mic { justify-self: start; }
.sf-rj .sf-rj-advisor-stimme .sf-rj-orb { width: 124px; }
}
.sf-rj .sf-rj-advisor-text .sf-rj-orb { display: none; }
.sf-rj .sf-rj-advisor-status { min-height: 1.4em; margin: 0; font-size: var(--sf-size-18); font-weight: 800; }
.sf-rj .sf-rj-consent { max-width: 380px; margin: 0; font-size: var(--sf-size-12); line-height: 1.5; color: var(--sf-rj-white-60); }
.sf-rj .sf-rj-advisor-controls { display: flex; gap: 12px; }
.sf-rj .sf-rj-icon-btn { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--sf-rj-glass-line); border-radius: 50%; background: var(--sf-rj-glass); color: var(--sf-rj-white); cursor: pointer; }
.sf-rj .sf-rj-icon-btn-end { border-color: var(--sf-rj-red); background: var(--sf-rj-red); }
.sf-rj .sf-rj-switch { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--sf-rj-white-80); font-size: var(--sf-size-14); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sf-rj .sf-rj-advisor-talk { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sf-rj .sf-rj-transcript { display: flex; flex-direction: column; gap: 10px; min-height: 180px; max-height: 340px; padding: 16px; border-radius: 20px; background: var(--sf-rj-shade); overflow-y: auto; }
.sf-rj .sf-rj-transcript-hint p { margin: 0 0 8px; color: var(--sf-rj-white-60); }
.sf-rj .sf-rj-transcript-hint ul { margin: 0; padding: 0; list-style: none; }
.sf-rj .sf-rj-transcript-hint button { margin: 0 0 8px; padding: 0; border: 0; background: none; color: var(--sf-rj-mist); font-size: var(--sf-size-15); text-align: left; cursor: pointer; }
.sf-rj .sf-rj-line { max-width: 85%; margin: 0; padding: 10px 14px; border-radius: 16px; font-size: var(--sf-size-15); line-height: 1.45; }
.sf-rj .sf-rj-line-kunde { align-self: flex-end; background: var(--sf-rj-blue); color: var(--sf-rj-white); border-bottom-right-radius: 4px; }
.sf-rj .sf-rj-line-beratung { align-self: flex-start; background: var(--sf-rj-white); color: var(--sf-rj-ink); border-bottom-left-radius: 4px; }
.sf-rj .sf-rj-line-typing { animation: sf-rj-blink 1s ease-in-out infinite; }
@keyframes sf-rj-blink { 50% { opacity: 0.4; } }
.sf-rj .sf-rj-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--sf-rj-yellow); color: var(--sf-rj-yellow-ink); font-weight: 700; }
.sf-rj .sf-rj-input { display: flex; gap: 8px; }
.sf-rj .sf-rj-input input { flex: 1; min-width: 0; min-height: 50px; padding: 0 16px; border: 1px solid var(--sf-rj-glass-line); border-radius: 999px; background: var(--sf-rj-white); color: var(--sf-rj-ink); }
.sf-rj .sf-rj-input button { display: inline-grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--sf-rj-brand-bright); color: var(--sf-rj-brand-ink); cursor: pointer; }
.sf-rj .sf-rj-input button:disabled { opacity: 0.5; cursor: default; }
.sf-rj .sf-rj-tray-title { margin: 6px 0 10px; font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-rj-brand-light); }
.sf-rj .sf-rj-tray-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.sf-rj .sf-rj-ai-note { margin: 0; font-size: var(--sf-size-12); color: var(--sf-rj-white-60); }
.sf-rj .sf-rj-faq { display: grid; gap: 10px; }
.sf-rj .sf-rj-faq-item { border-radius: 16px; background: var(--sf-rj-white); box-shadow: 0 4px 16px var(--sf-rj-shadow); }
.sf-rj .sf-rj-faq-item summary { padding: 18px 20px; font-size: var(--sf-size-17); font-weight: 800; color: var(--sf-rj-ink); cursor: pointer; }
.sf-rj .sf-rj-faq-item p { margin: 0; padding: 0 20px 20px; line-height: 1.6; }
.sf-rj .sf-rj-more { margin-top: 36px; }
.sf-rj .sf-rj-more ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sf-rj .sf-rj-credit { max-width: 1240px; margin: 0 auto; padding: 16px 20px 28px; font-size: var(--sf-size-12); color: var(--sf-rj-muted); }
@media (prefers-reduced-motion: reduce) {
.sf-rj .sf-rj-mess-wave, .sf-rj .sf-rj-cmp-bar::after, .sf-rj .sf-rj-card-hot, .sf-rj .sf-rj-card-price-wait { animation: none; }
.sf-rj .sf-rj-cmp-bar { transition: none; }
}
@container sf-lp (max-width: 560px) {
.sf-rj .sf-rj-meter-text { display: none; }
.sf-rj .sf-rj-card-badge { max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-rj .sf-rj-card-seg { right: 8px; bottom: 8px; }
.sf-rj .sf-rj-card-foot { flex-direction: column; align-items: stretch; }
.sf-rj .sf-rj-card-go { justify-content: center; }
.sf-rj .sf-rj-specs { grid-template-columns: 1fr; }
.sf-rj .sf-rj-card-body { padding: 12px; }
.sf-rj .sf-rj-card-go { padding: 7px 10px; }
}
.sf-rj section[id] { scroll-margin-top: 96px; }
.sf-rjnav { font-family: var(--sf-body); }
.sf-rjnav .sf-rjnav-rail { position: fixed; z-index: 40; top: 50%; right: 22px; display: none; flex-direction: column; align-items: flex-end; gap: 14px; padding: 14px 10px 12px; border: 1px solid var(--sf-rj-nav-line); border-radius: 999px; background: var(--sf-rj-nav-glass); box-shadow: 0 18px 50px var(--sf-rj-shadow-strong); backdrop-filter: blur(14px) saturate(140%); opacity: 0; transform: translate(24px, -50%); pointer-events: none; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.sf-rjnav.sf-rjnav-on .sf-rjnav-rail { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.sf-rjnav .sf-rjnav-track { position: relative; }
.sf-rjnav .sf-rjnav-tube { position: absolute; top: 18px; right: 18px; bottom: 18px; width: 6px; margin-right: -3px; border-radius: 6px; background: var(--sf-rj-nav-line); }
.sf-rjnav .sf-rjnav-water { position: absolute; top: 0; left: 0; width: 100%; border-radius: 4px; background: linear-gradient(180deg, var(--sf-rj-sky), var(--sf-rj-blue)); transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.sf-rjnav .sf-rjnav-front { position: absolute; bottom: -5px; left: 50%; width: 8px; height: 10px; margin-left: -4px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--sf-rj-sky); animation: sf-rjnav-drip 1.6s ease-in-out infinite; }
@keyframes sf-rjnav-drip { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(3px) scale(1.15, 0.9); } }
.sf-rjnav .sf-rjnav-list { position: relative; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.sf-rjnav .sf-rjnav-item, .sf-rjnav .sf-rjnav-top { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0; border: 0; background: none; color: var(--sf-rj-white); text-decoration: none; cursor: pointer; }
.sf-rjnav .sf-rjnav-drop, .sf-rjnav .sf-rjnav-top-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--sf-rj-nav-line); border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: var(--sf-rj-deep); color: var(--sf-rj-white-60); transition: background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; }
.sf-rjnav .sf-rjnav-done .sf-rjnav-drop { border-color: transparent; background: var(--sf-rj-blue); color: var(--sf-rj-white); }
.sf-rjnav .sf-rjnav-now .sf-rjnav-drop { border-color: transparent; background: var(--sf-rj-brand); color: var(--sf-rj-brand-ink); box-shadow: 0 0 0 6px var(--sf-rj-brand-glow); transform: scale(1.12); }
.sf-rjnav .sf-rjnav-item:hover .sf-rjnav-drop, .sf-rjnav .sf-rjnav-item:focus-visible .sf-rjnav-drop, .sf-rjnav .sf-rjnav-top:hover .sf-rjnav-top-icon, .sf-rjnav .sf-rjnav-top:focus-visible .sf-rjnav-top-icon { color: var(--sf-rj-white); transform: scale(1.12); }
.sf-rjnav .sf-rjnav-top-icon { border-radius: 50%; background: var(--sf-rj-white); color: var(--sf-rj-ink); }
.sf-rjnav .sf-rjnav-top:hover .sf-rjnav-top-icon { color: var(--sf-rj-ink); transform: translateY(-3px); }
.sf-rjnav .sf-rjnav-label { position: absolute; right: 50px; padding: 6px 12px; border-radius: 999px; background: var(--sf-rj-white); box-shadow: 0 8px 24px var(--sf-rj-shadow-strong); color: var(--sf-rj-ink); font-size: var(--sf-size-13); font-weight: 800; white-space: nowrap; opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity 0.2s ease, transform 0.25s ease; }
.sf-rjnav .sf-rjnav-now .sf-rjnav-label { opacity: 1; transform: translateX(0); background: var(--sf-rj-brand); color: var(--sf-rj-brand-ink); }
.sf-rjnav .sf-rjnav-item:hover .sf-rjnav-label, .sf-rjnav .sf-rjnav-item:focus-visible .sf-rjnav-label, .sf-rjnav .sf-rjnav-top:hover .sf-rjnav-label, .sf-rjnav .sf-rjnav-top:focus-visible .sf-rjnav-label { opacity: 1; transform: translateX(0); }
.sf-rjnav .sf-rjnav-fab { position: fixed; z-index: 40; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: none; filter: drop-shadow(0 10px 22px var(--sf-rj-shadow-strong)); cursor: pointer; opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sf-rjnav.sf-rjnav-on .sf-rjnav-fab { opacity: 1; transform: none; pointer-events: auto; }
.sf-rjnav .sf-rjnav-fab > svg { position: absolute; inset: 0; width: 60px; height: 60px; }
.sf-rjnav .sf-rjnav-fab-bg { fill: var(--sf-rj-night); }
.sf-rjnav .sf-rjnav-fab-water { fill: var(--sf-rj-blue); transition: y 0.3s ease; }
.sf-rjnav .sf-rjnav-fab-track { fill: none; stroke: var(--sf-rj-nav-line); stroke-width: 3; }
.sf-rjnav .sf-rjnav-fab-ring { fill: none; stroke: var(--sf-rj-brand-bright); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.3s ease; }
.sf-rjnav .sf-rjnav-fab-icon { position: relative; display: grid; place-items: center; color: var(--sf-rj-white); }
.sf-rjnav .sf-rjnav-backdrop { position: fixed; z-index: 39; inset: 0; border: 0; background: var(--sf-rj-shade); backdrop-filter: blur(2px); }
.sf-rjnav .sf-rjnav-sheet { position: fixed; z-index: 41; right: 16px; bottom: calc(156px + env(safe-area-inset-bottom)); display: grid; gap: 4px; width: min(280px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--sf-rj-nav-line); border-radius: 24px; background: var(--sf-rj-nav-glass); box-shadow: 0 24px 60px var(--sf-rj-shadow-strong); backdrop-filter: blur(16px) saturate(140%); animation: sf-rjnav-in 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes sf-rjnav-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
.sf-rjnav .sf-rjnav-sheet-title { display: flex; justify-content: space-between; margin: 0 4px 6px; font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-rj-white-60); }
.sf-rjnav .sf-rjnav-sheet-title span { letter-spacing: 0; text-transform: none; color: var(--sf-rj-brand-light); }
.sf-rjnav .sf-rjnav-sheet-item, .sf-rjnav .sf-rjnav-sheet-top { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 4px 8px; border: 0; border-radius: 14px; background: none; color: var(--sf-rj-white); font-size: var(--sf-size-16); font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.sf-rjnav .sf-rjnav-sheet-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: var(--sf-rj-deep); color: var(--sf-rj-mist); }
.sf-rjnav .sf-rjnav-sheet-now { background: var(--sf-rj-glass); }
.sf-rjnav .sf-rjnav-sheet-now .sf-rjnav-sheet-icon { background: var(--sf-rj-brand); color: var(--sf-rj-brand-ink); }
.sf-rjnav .sf-rjnav-sheet-top { justify-content: center; margin-top: 6px; background: var(--sf-rj-white); color: var(--sf-rj-ink); }
@media (min-width: 1400px) {
.sf-rjnav .sf-rjnav-rail { display: flex; }
.sf-rjnav .sf-rjnav-fab, .sf-rjnav .sf-rjnav-sheet, .sf-rjnav .sf-rjnav-backdrop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.sf-rjnav .sf-rjnav-front, .sf-rjnav .sf-rjnav-sheet { animation: none; }
}
/* xbionic.css */
.sf-xb { color: var(--sf-xb-text); background: var(--sf-xb-white); font-family: var(--sf-body); overflow-x: clip; }
.sf-xb .sf-xb-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.sf-xb .sf-xb-narrow { max-width: 860px; }
.sf-xb .sf-xb-section { padding: 72px 0; }
.sf-xb .sf-xb-section-light { background: var(--sf-xb-paper); }
.sf-xb .sf-xb-section-deep { background: linear-gradient(180deg, var(--sf-xb-deep), var(--sf-xb-deep)); color: var(--sf-xb-white); }
.sf-xb .sf-xb-section-night { background: radial-gradient(120% 90% at 50% 0%, var(--sf-xb-deep), var(--sf-xb-night)); color: var(--sf-xb-white); }
.sf-xb .sf-xb-eyebrow { margin: 0 0 10px; font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-xb-blue); }
.sf-xb .sf-xb-section-deep .sf-xb-eyebrow, .sf-xb .sf-xb-section-night .sf-xb-eyebrow { color: var(--sf-xb-yellow); }
.sf-xb .sf-xb-h2 { margin: 0 0 16px; font-family: var(--sf-display-condensed); font-size: var(--sf-xb-fs-h2); font-weight: 800; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: inherit; }
.sf-xb .sf-xb-lead { max-width: 720px; margin: 0 0 28px; font-size: var(--sf-xb-fs-lead); line-height: 1.55; }
.sf-xb .sf-xb-small { font-size: var(--sf-size-14); opacity: 0.85; }
.sf-xb .sf-xb-textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.sf-xb .sf-xb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border: 2px solid transparent; border-radius: 999px; font-size: var(--sf-size-16); font-weight: 800; text-decoration: none; cursor: pointer; transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; }
.sf-xb .sf-xb-btn:hover { transform: translateY(-2px); }
.sf-xb .sf-xb-btn-primary { background: var(--sf-xb-yellow); color: var(--sf-xb-yellow-ink); box-shadow: 0 10px 30px var(--sf-xb-shadow-hot); }
.sf-xb .sf-xb-btn-glass { background: var(--sf-xb-glass); border-color: var(--sf-xb-glass-line); color: var(--sf-xb-white); backdrop-filter: blur(8px); }
.sf-xb .sf-xb-btn-ghost { background: transparent; border-color: var(--sf-xb-blue); color: var(--sf-xb-blue); }
.sf-xb .sf-xb-btn-outline { background: var(--sf-xb-white); border-color: var(--sf-xb-ink); color: var(--sf-xb-ink); }
.sf-xb .sf-xb-btn-mic { background: var(--sf-xb-yellow); color: var(--sf-xb-yellow-ink); min-height: 56px; padding: 0 28px; font-size: var(--sf-size-17); }
.sf-xb .sf-xb-link-btn { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--sf-xb-blue); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sf-xb .sf-xb-hero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(90vh, 900px); padding: 104px 0 40px; overflow: hidden; background: radial-gradient(70% 55% at 78% 20%, var(--sf-xb-deep), transparent 70%), radial-gradient(60% 50% at 10% 100%, var(--sf-xb-glow-warm), transparent 65%), linear-gradient(180deg, var(--sf-xb-ink), var(--sf-xb-night)); color: var(--sf-xb-white); touch-action: pan-y; }
.sf-xb .sf-xb-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--sf-xb-shade) 100%); pointer-events: none; }
.sf-xb .sf-xb-snow { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.sf-xb .sf-xb-hero-inner { position: relative; z-index: 3; display: grid; gap: 36px; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; pointer-events: none; }
@container sf-lp (min-width: 980px) {
.sf-xb .sf-xb-hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; }
}
.sf-xb .sf-xb-hero-inner a, .sf-xb .sf-xb-hero-inner button { pointer-events: auto; }
.sf-xb .sf-xb-kicker { display: inline-block; margin: 0 0 18px; padding: 7px 14px; border: 1px solid var(--sf-xb-glass-line); border-radius: 999px; background: var(--sf-xb-glass); font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.sf-xb .sf-xb-title { max-width: 16ch; margin: 0 0 18px; font-family: var(--sf-display-condensed); font-size: var(--sf-xb-fs-hero); font-weight: 800; line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase; color: var(--sf-xb-white); text-wrap: balance; }
.sf-xb .sf-xb-title-accent { display: block; color: var(--sf-xb-yellow); }
.sf-xb .sf-xb-intro { max-width: 620px; margin: 0 0 10px; font-size: var(--sf-xb-fs-lead); line-height: 1.5; color: var(--sf-xb-white-80); }
.sf-xb .sf-xb-note { display: inline-flex; margin: 6px 0 0; padding: 6px 12px; border-left: 3px solid var(--sf-xb-amber); background: var(--sf-xb-glass); font-weight: 700; }
.sf-xb .sf-xb-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 30px; }
.sf-xb .sf-xb-facts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; font-size: var(--sf-size-14); color: var(--sf-xb-white-80); }
.sf-xb .sf-xb-facts b { margin-right: 6px; font-family: var(--sf-display-condensed); font-size: var(--sf-size-20); color: var(--sf-xb-yellow); }
.sf-xb .sf-xb-hint { position: relative; z-index: 3; width: 100%; max-width: 1240px; margin: 28px auto 0; padding: 0 20px; font-size: var(--sf-size-13); color: var(--sf-xb-white-60); pointer-events: none; }
.sf-xb .sf-xb-hero-visual { position: relative; align-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 520px; pointer-events: none; }
@container sf-lp (min-width: 980px) {
.sf-xb .sf-xb-hero-visual { justify-self: end; width: 100%; }
}
.sf-xb .sf-xb-xray { position: relative; margin: 0; aspect-ratio: 4 / 5; border: 1px solid var(--sf-xb-glass-line); border-radius: 22px; background: var(--sf-xb-white); overflow: hidden; box-shadow: 0 30px 70px var(--sf-xb-shadow-strong); }
.sf-xb .sf-xb-xray-2 { transform: translateY(34px); }
.sf-xb .sf-xb-xray img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.sf-xb .sf-xb-xray-cover { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 18px; background: linear-gradient(160deg, var(--sf-xb-shell-hi), var(--sf-xb-shell)); animation: sf-xb-jacke-auf 1.4s cubic-bezier(0.7, 0, 0.2, 1) 0.9s both; }
.sf-xb .sf-xb-xray-2 .sf-xb-xray-cover { animation-delay: 1.25s; }
.sf-xb .sf-xb-xray-cover span { font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-xb-white-60); }
@keyframes sf-xb-jacke-auf { from { transform: translateY(0); } to { transform: translateY(-101%); } }
.sf-xb .sf-xb-xray figcaption { position: absolute; left: 10px; bottom: 10px; }
.sf-xb .sf-xb-xray-tag { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--sf-xb-yellow); color: var(--sf-xb-yellow-ink); font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
@container sf-lp (max-width: 979px) {
.sf-xb .sf-xb-hero-visual { max-width: 440px; }
.sf-xb .sf-xb-xray-2 { transform: translateY(22px); }
}
.sf-xb .sf-xb-finder { position: relative; margin-top: 20px; padding: 28px 22px; border-radius: 28px; background: var(--sf-xb-white); box-shadow: 0 30px 80px var(--sf-xb-shadow); }
@container sf-lp (min-width: 768px) {
.sf-xb .sf-xb-finder { padding: 40px; }
}
.sf-xb .sf-xb-progress { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 26px; }
.sf-xb .sf-xb-progress span { height: 6px; border-radius: 6px; background: var(--sf-xb-line); transition: background 0.3s ease; }
.sf-xb .sf-xb-progress .sf-xb-progress-on { background: var(--sf-xb-yellow); }
.sf-xb .sf-xb-step-count { margin: 0 0 6px; font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-xb-muted); }
.sf-xb .sf-xb-step-q { margin: 0 0 22px; font-family: var(--sf-display-condensed); font-size: var(--sf-xb-fs-h2); font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--sf-xb-ink); }
.sf-xb .sf-xb-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@container sf-lp (min-width: 900px) {
.sf-xb .sf-xb-options { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
.sf-xb .sf-xb-option { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 128px; padding: 18px; border: 2px solid var(--sf-xb-line); border-radius: 18px; background: var(--sf-xb-paper); color: var(--sf-xb-ink); text-align: left; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.sf-xb .sf-xb-option:hover, .sf-xb .sf-xb-option:focus-visible { border-color: var(--sf-xb-ink); background: var(--sf-xb-white); }
.sf-xb .sf-xb-option svg { color: var(--sf-xb-blue); }
.sf-xb .sf-xb-option-label { margin-top: auto; font-size: var(--sf-size-17); font-weight: 800; }
.sf-xb .sf-xb-option-hint { font-size: var(--sf-size-13); color: var(--sf-xb-muted); }
.sf-xb .sf-xb-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 0; border: 0; background: none; color: var(--sf-xb-muted); font-weight: 700; cursor: pointer; }
.sf-xb .sf-xb-result-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sf-xb .sf-xb-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sf-xb .sf-xb-result-actions .sf-xb-back { margin: 0; }
.sf-xb .sf-xb-result-grid { display: grid; gap: 18px; }
@container sf-lp (min-width: 768px) {
.sf-xb .sf-xb-result-grid { grid-template-columns: repeat(3, 1fr); }
}
.sf-xb .sf-xb-result-grid > div { position: relative; }
.sf-xb .sf-xb-best { position: absolute; z-index: 2; top: -12px; left: 16px; padding: 5px 12px; border-radius: 999px; background: var(--sf-xb-ember); color: var(--sf-xb-white); font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-xb .sf-xb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@container sf-lp (min-width: 768px) {
.sf-xb .sf-xb-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@container sf-lp (min-width: 1180px) {
.sf-xb .sf-xb-grid { grid-template-columns: repeat(4, 1fr); }
}
.sf-xb .sf-xb-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--sf-xb-line); border-radius: 20px; background: var(--sf-xb-white); color: var(--sf-xb-text); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.sf-xb .sf-xb-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px var(--sf-xb-shadow); }
.sf-xb .sf-xb-card-hot { border-color: var(--sf-xb-yellow); box-shadow: 0 0 0 4px var(--sf-xb-yellow), 0 18px 44px var(--sf-xb-shadow-hot); animation: sf-xb-hot 1.4s ease-out 2; }
@keyframes sf-xb-hot { 0% { box-shadow: 0 0 0 0 var(--sf-xb-yellow), 0 18px 44px var(--sf-xb-shadow-hot); } 60% { box-shadow: 0 0 0 10px var(--sf-xb-shadow-hot), 0 18px 44px var(--sf-xb-shadow-hot); } }
.sf-xb .sf-xb-card-media { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--sf-xb-paper); }
.sf-xb .sf-xb-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 14px; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.4s ease; }
.sf-xb .sf-xb-card:hover .sf-xb-card-media img { transform: scale(1.04); }
.sf-xb .sf-xb-card-seg { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--sf-xb-white); box-shadow: 0 2px 10px var(--sf-xb-shadow); font-size: var(--sf-size-11); font-style: normal; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-xb-ink); }
.sf-xb .sf-xb-card-seg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-xb-seg, var(--sf-xb-blue)); }
.sf-xb .sf-xb-card-seg-damen { --sf-xb-seg: var(--sf-xb-yellow-deep); }
.sf-xb .sf-xb-card-seg-herren { --sf-xb-seg: var(--sf-xb-blue); }
.sf-xb .sf-xb-card-seg-unisex { --sf-xb-seg: var(--sf-xb-ember); }
.sf-xb .sf-xb-card-badge { position: absolute; bottom: 10px; left: 10px; max-width: calc(100% - 20px); overflow: hidden; padding: 4px 10px; border-radius: 999px; background: var(--sf-xb-ink); color: var(--sf-xb-white); font-size: var(--sf-size-11); font-weight: 800; letter-spacing: 0.04em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.sf-xb .sf-xb-card-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.sf-xb .sf-xb-card-brand { font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-xb-muted); }
.sf-xb .sf-xb-card-name { margin: 0; font-size: var(--sf-size-17); font-weight: 800; line-height: 1.2; text-transform: none; }
.sf-xb .sf-xb-card-name a { color: var(--sf-xb-ink); text-decoration: none; }
.sf-xb .sf-xb-meter { display: inline-flex; align-items: center; gap: 8px; font-size: var(--sf-size-12); font-weight: 700; color: var(--sf-xb-muted); }
.sf-xb .sf-xb-meter-bars { display: inline-flex; gap: 3px; }
.sf-xb .sf-xb-meter-bars em { width: 14px; height: 6px; border-radius: 3px; background: var(--sf-xb-line); }
.sf-xb .sf-xb-meter-bars em:nth-child(1).sf-xb-meter-on { background: var(--sf-xb-ice); }
.sf-xb .sf-xb-meter-bars em:nth-child(2).sf-xb-meter-on { background: var(--sf-xb-amber); }
.sf-xb .sf-xb-meter-bars em:nth-child(3).sf-xb-meter-on { background: var(--sf-xb-ember); }
.sf-xb .sf-xb-meter-text { color: var(--sf-xb-ink); }
.sf-xb .sf-xb-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin: 2px 0; padding: 10px 0; border-top: 1px solid var(--sf-xb-line); border-bottom: 1px solid var(--sf-xb-line); }
.sf-xb .sf-xb-specs div { min-width: 0; }
.sf-xb .sf-xb-specs dt { margin: 0; font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-xb-muted); }
.sf-xb .sf-xb-specs dd { margin: 1px 0 0; font-size: var(--sf-size-14); font-weight: 800; overflow-wrap: anywhere; color: var(--sf-xb-ink); }
.sf-xb .sf-xb-card-kurz { margin: 0; font-size: var(--sf-size-14); line-height: 1.45; }
.sf-xb .sf-xb-reasons { margin: 0; padding: 0; list-style: none; font-size: var(--sf-size-14); }
.sf-xb .sf-xb-reasons li { position: relative; padding-left: 20px; line-height: 1.45; }
.sf-xb .sf-xb-reasons li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--sf-xb-green); }
.sf-xb .sf-xb-card-toggle { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--sf-xb-blue); font-size: var(--sf-size-14); font-weight: 800; cursor: pointer; }
.sf-xb .sf-xb-card-toggle svg { transition: transform 0.2s ease; }
.sf-xb .sf-xb-card-toggle-on svg { transform: rotate(180deg); }
.sf-xb .sf-xb-card-more { font-size: var(--sf-size-14); line-height: 1.5; }
.sf-xb .sf-xb-card-more p { margin: 0 0 8px; }
.sf-xb .sf-xb-card-fit b { display: block; font-size: var(--sf-size-12); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-xb-green); }
.sf-xb .sf-xb-card-fit-no b { color: var(--sf-xb-ember); }
.sf-xb .sf-xb-card-sizes { font-size: var(--sf-size-12); color: var(--sf-xb-muted); }
.sf-xb .sf-xb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sf-xb-line); }
.sf-xb .sf-xb-card-price { display: flex; flex-direction: column; line-height: 1.15; }
.sf-xb .sf-xb-card-price strong { font-size: var(--sf-size-18); font-weight: 800; color: var(--sf-xb-ink); white-space: nowrap; }
.sf-xb .sf-xb-card-price small { margin-top: 3px; font-size: var(--sf-size-12); color: var(--sf-xb-muted); }
.sf-xb .sf-xb-card-price-wait { display: inline-block; width: 64px; height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--sf-xb-paper), var(--sf-xb-line), var(--sf-xb-paper)); background-size: 200% 100%; animation: sf-xb-shimmer 1.2s linear infinite; }
@keyframes sf-xb-shimmer { to { background-position: -200% 0; } }
.sf-xb .sf-xb-card-go { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; background: var(--sf-xb-ink); color: var(--sf-xb-white); font-size: var(--sf-size-13); font-weight: 800; text-decoration: none; white-space: nowrap; }
.sf-xb .sf-xb-card-compact .sf-xb-card-media { aspect-ratio: 1; }
.sf-xb .sf-xb-filterbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 6px 0 22px; }
.sf-xb .sf-xb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-xb .sf-xb-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 2px solid var(--sf-xb-ink); border-radius: 999px; background: var(--sf-xb-white); color: var(--sf-xb-ink); font-weight: 800; cursor: pointer; }
.sf-xb .sf-xb-pill small { font-size: var(--sf-size-12); opacity: 0.6; }
.sf-xb .sf-xb-pill-soft { border-color: var(--sf-xb-line); }
.sf-xb .sf-xb-pill-on { border-color: var(--sf-xb-ink); background: var(--sf-xb-ink); color: var(--sf-xb-white); }
.sf-xb .sf-xb-empty { padding: 30px 0; color: var(--sf-xb-muted); }
.sf-xb .sf-xb-shoplinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.sf-xb .sf-xb-advisor { display: grid; gap: 24px; margin-top: 10px; }
@container sf-lp (min-width: 1024px) {
.sf-xb .sf-xb-advisor { grid-template-columns: 5fr 7fr; gap: 40px; }
}
.sf-xb .sf-xb-advisor-stage { align-self: start; display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 28px 20px; border: 1px solid var(--sf-xb-glass-line); border-radius: 28px; background: var(--sf-xb-glass); text-align: center; }
.sf-xb .sf-xb-orb { width: min(220px, 64%); aspect-ratio: 1; }
@container sf-lp (min-width: 1024px) {
.sf-xb .sf-xb-advisor-stage { position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + 96px); }
}
.sf-xb .sf-xb-advisor-text .sf-xb-orb { display: none; }
.sf-xb .sf-xb-advisor-status { min-height: 1.4em; margin: 0; font-size: var(--sf-size-18); font-weight: 800; }
.sf-xb .sf-xb-consent { max-width: 380px; margin: 0; font-size: var(--sf-size-12); line-height: 1.5; color: var(--sf-xb-white-60); }
.sf-xb .sf-xb-advisor-controls { display: flex; gap: 12px; }
.sf-xb .sf-xb-icon-btn { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--sf-xb-glass-line); border-radius: 50%; background: var(--sf-xb-glass); color: var(--sf-xb-white); cursor: pointer; }
.sf-xb .sf-xb-icon-btn-end { border-color: var(--sf-xb-ember); background: var(--sf-xb-ember); }
.sf-xb .sf-xb-switch { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--sf-xb-white-80); font-size: var(--sf-size-14); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sf-xb .sf-xb-advisor-talk { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sf-xb .sf-xb-transcript { display: flex; flex-direction: column; gap: 10px; min-height: 220px; max-height: 360px; padding: 18px; border-radius: 20px; background: var(--sf-xb-shade); overflow-y: auto; }
.sf-xb .sf-xb-transcript-hint p { margin: 0 0 8px; color: var(--sf-xb-white-60); }
.sf-xb .sf-xb-transcript-hint ul { margin: 0; padding: 0; list-style: none; }
.sf-xb .sf-xb-transcript-hint button { margin: 0 0 8px; padding: 0; border: 0; background: none; color: var(--sf-xb-frost); font-size: var(--sf-size-15); text-align: left; cursor: pointer; }
.sf-xb .sf-xb-line { max-width: 85%; margin: 0; padding: 10px 14px; border-radius: 16px; font-size: var(--sf-size-15); line-height: 1.45; }
.sf-xb .sf-xb-line-kunde { align-self: flex-end; background: var(--sf-xb-blue); color: var(--sf-xb-white); border-bottom-right-radius: 4px; }
.sf-xb .sf-xb-line-beratung { align-self: flex-start; background: var(--sf-xb-white); color: var(--sf-xb-ink); border-bottom-left-radius: 4px; }
.sf-xb .sf-xb-line-typing { animation: sf-xb-blink 1s ease-in-out infinite; }
@keyframes sf-xb-blink { 50% { opacity: 0.4; } }
.sf-xb .sf-xb-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--sf-xb-yellow); color: var(--sf-xb-yellow-ink); font-weight: 700; }
.sf-xb .sf-xb-input { display: flex; gap: 8px; }
.sf-xb .sf-xb-input input { flex: 1; min-width: 0; min-height: 50px; padding: 0 16px; border: 1px solid var(--sf-xb-glass-line); border-radius: 999px; background: var(--sf-xb-white); color: var(--sf-xb-ink); }
.sf-xb .sf-xb-input button { display: inline-grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--sf-xb-yellow); color: var(--sf-xb-yellow-ink); cursor: pointer; }
.sf-xb .sf-xb-input button:disabled { opacity: 0.5; cursor: default; }
.sf-xb .sf-xb-tray-title { margin: 6px 0 10px; font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-xb-yellow); }
.sf-xb .sf-xb-tray-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.sf-xb .sf-xb-ai-note { margin: 0; font-size: var(--sf-size-12); color: var(--sf-xb-white-60); }
.sf-xb .sf-xb-faq { display: grid; gap: 10px; }
.sf-xb .sf-xb-faq-item { border-radius: 16px; background: var(--sf-xb-white); box-shadow: 0 4px 16px var(--sf-xb-shadow); }
.sf-xb .sf-xb-faq-item summary { padding: 18px 20px; font-size: var(--sf-size-17); font-weight: 800; color: var(--sf-xb-ink); cursor: pointer; }
.sf-xb .sf-xb-faq-item p { margin: 0; padding: 0 20px 20px; line-height: 1.6; }
.sf-xb .sf-xb-more { margin-top: 36px; }
.sf-xb .sf-xb-more ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sf-xb .sf-xb-credit { max-width: 1240px; margin: 0 auto; padding: 16px 20px 28px; font-size: var(--sf-size-12); color: var(--sf-xb-muted); }
@media (prefers-reduced-motion: reduce) {
.sf-xb .sf-xb-xray-cover, .sf-xb .sf-xb-chip, .sf-xb .sf-xb-card-hot, .sf-xb .sf-xb-card-price-wait { animation: none; }
.sf-xb .sf-xb-xray-cover { display: none; }
.sf-xb .sf-xb-chip { opacity: 1; }
.sf-xb .sf-xb-band-fill { transition: none; }
}
.sf-xb .sf-xb-static .sf-xb-chip, .sf-xb .sf-xb-static .sf-xb-band-fill { animation: none; transition: none; }
@container sf-lp (max-width: 560px) {
.sf-xb .sf-xb-meter-text { display: none; }
.sf-xb .sf-xb-card-badge { top: auto; bottom: 8px; left: 8px; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-xb .sf-xb-card-seg { top: 8px; right: 8px; }
.sf-xb .sf-xb-card-foot { flex-direction: column; align-items: stretch; }
.sf-xb .sf-xb-card-go { justify-content: center; }
.sf-xb .sf-xb-specs { grid-template-columns: 1fr; }
.sf-xb .sf-xb-card-body { padding: 12px; }
.sf-xb .sf-xb-card-go { padding: 7px 10px; }
}
.sf-xb section[id] { scroll-margin-top: 96px; }
.sf-xbnav { font-family: var(--sf-body); }
.sf-xbnav .sf-xbnav-rail { position: fixed; z-index: 40; top: 50%; right: 22px; display: none; flex-direction: column; align-items: flex-end; gap: 14px; padding: 14px 10px 12px; border: 1px solid var(--sf-xb-white-12); border-radius: 999px; background: var(--sf-xb-nav-glass); box-shadow: 0 18px 50px var(--sf-xb-shadow-strong); backdrop-filter: blur(14px) saturate(140%); opacity: 0; transform: translate(24px, -50%); pointer-events: none; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.sf-xbnav.sf-xbnav-on .sf-xbnav-rail { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.sf-xbnav .sf-xbnav-track { position: relative; }
.sf-xbnav .sf-xbnav-tube { position: absolute; top: 18px; right: 18px; bottom: 18px; width: 6px; margin-right: -3px; border-radius: 6px; background: var(--sf-xb-white-12); }
.sf-xbnav .sf-xbnav-water { position: absolute; top: 0; left: 0; width: 100%; border-radius: 4px; background: linear-gradient(180deg, var(--sf-xb-ice), var(--sf-xb-amber), var(--sf-xb-ember)); transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.sf-xbnav .sf-xbnav-front { position: absolute; bottom: -5px; left: 50%; width: 8px; height: 10px; margin-left: -4px; border-radius: 50%; background: var(--sf-xb-ember); animation: sf-xbnav-drip 1.6s ease-in-out infinite; }
@keyframes sf-xbnav-drip { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(3px) scale(1.15, 0.9); } }
.sf-xbnav .sf-xbnav-list { position: relative; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.sf-xbnav .sf-xbnav-item, .sf-xbnav .sf-xbnav-top { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0; border: 0; background: none; color: var(--sf-xb-white); text-decoration: none; cursor: pointer; }
.sf-xbnav .sf-xbnav-drop, .sf-xbnav .sf-xbnav-top-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--sf-xb-white-12); border-radius: 50%; background: var(--sf-xb-deep); color: var(--sf-xb-white-60); transition: background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; }
.sf-xbnav .sf-xbnav-done .sf-xbnav-drop { border-color: transparent; background: var(--sf-xb-ember); color: var(--sf-xb-white); }
.sf-xbnav .sf-xbnav-now .sf-xbnav-drop { border-color: transparent; background: var(--sf-xb-yellow); color: var(--sf-xb-yellow-ink); box-shadow: 0 0 0 6px var(--sf-xb-shadow-hot); transform: scale(1.12); }
.sf-xbnav .sf-xbnav-item:hover .sf-xbnav-drop, .sf-xbnav .sf-xbnav-item:focus-visible .sf-xbnav-drop, .sf-xbnav .sf-xbnav-top:hover .sf-xbnav-top-icon, .sf-xbnav .sf-xbnav-top:focus-visible .sf-xbnav-top-icon { color: var(--sf-xb-white); transform: scale(1.12); }
.sf-xbnav .sf-xbnav-top-icon { border-radius: 50%; background: var(--sf-xb-white); color: var(--sf-xb-ink); }
.sf-xbnav .sf-xbnav-top:hover .sf-xbnav-top-icon { color: var(--sf-xb-ink); transform: translateY(-3px); }
.sf-xbnav .sf-xbnav-label { position: absolute; right: 50px; padding: 6px 12px; border-radius: 999px; background: var(--sf-xb-white); box-shadow: 0 8px 24px var(--sf-xb-shadow-strong); color: var(--sf-xb-ink); font-size: var(--sf-size-13); font-weight: 800; white-space: nowrap; opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity 0.2s ease, transform 0.25s ease; }
.sf-xbnav .sf-xbnav-now .sf-xbnav-label { opacity: 1; transform: translateX(0); background: var(--sf-xb-yellow); color: var(--sf-xb-yellow-ink); }
.sf-xbnav .sf-xbnav-item:hover .sf-xbnav-label, .sf-xbnav .sf-xbnav-item:focus-visible .sf-xbnav-label, .sf-xbnav .sf-xbnav-top:hover .sf-xbnav-label, .sf-xbnav .sf-xbnav-top:focus-visible .sf-xbnav-label { opacity: 1; transform: translateX(0); }
.sf-xbnav .sf-xbnav-fab { position: fixed; z-index: 40; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: none; filter: drop-shadow(0 10px 22px var(--sf-xb-shadow-strong)); cursor: pointer; opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sf-xbnav.sf-xbnav-on .sf-xbnav-fab { opacity: 1; transform: none; pointer-events: auto; }
.sf-xbnav .sf-xbnav-fab > svg { position: absolute; inset: 0; width: 60px; height: 60px; }
.sf-xbnav .sf-xbnav-fab-bg { fill: var(--sf-xb-deep); }
.sf-xbnav .sf-xbnav-fab-water { fill: var(--sf-xb-ember); transition: y 0.3s ease; }
.sf-xbnav .sf-xbnav-fab-track { fill: none; stroke: var(--sf-xb-white-12); stroke-width: 3; }
.sf-xbnav .sf-xbnav-fab-ring { fill: none; stroke: var(--sf-xb-yellow); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.3s ease; }
.sf-xbnav .sf-xbnav-fab-icon { position: relative; display: grid; place-items: center; color: var(--sf-xb-white); }
.sf-xbnav .sf-xbnav-backdrop { position: fixed; z-index: 39; inset: 0; border: 0; background: var(--sf-xb-shade); backdrop-filter: blur(2px); }
.sf-xbnav .sf-xbnav-sheet { position: fixed; z-index: 41; right: 16px; bottom: calc(156px + env(safe-area-inset-bottom)); display: grid; gap: 4px; width: min(280px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--sf-xb-white-12); border-radius: 24px; background: var(--sf-xb-nav-glass); box-shadow: 0 24px 60px var(--sf-xb-shadow-strong); backdrop-filter: blur(16px) saturate(140%); animation: sf-xbnav-in 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes sf-xbnav-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
.sf-xbnav .sf-xbnav-sheet-title { display: flex; justify-content: space-between; margin: 0 4px 6px; font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-xb-white-60); }
.sf-xbnav .sf-xbnav-sheet-title span { letter-spacing: 0; text-transform: none; color: var(--sf-xb-yellow); }
.sf-xbnav .sf-xbnav-sheet-item, .sf-xbnav .sf-xbnav-sheet-top { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 4px 8px; border: 0; border-radius: 14px; background: none; color: var(--sf-xb-white); font-size: var(--sf-size-16); font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.sf-xbnav .sf-xbnav-sheet-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: var(--sf-xb-deep); color: var(--sf-xb-frost); }
.sf-xbnav .sf-xbnav-sheet-now { background: var(--sf-xb-glass); }
.sf-xbnav .sf-xbnav-sheet-now .sf-xbnav-sheet-icon { background: var(--sf-xb-yellow); color: var(--sf-xb-yellow-ink); }
.sf-xbnav .sf-xbnav-sheet-top { justify-content: center; margin-top: 6px; background: var(--sf-xb-white); color: var(--sf-xb-ink); }
@media (min-width: 1400px) {
.sf-xbnav .sf-xbnav-rail { display: flex; }
.sf-xbnav .sf-xbnav-fab, .sf-xbnav .sf-xbnav-sheet, .sf-xbnav .sf-xbnav-backdrop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.sf-xbnav .sf-xbnav-front, .sf-xbnav .sf-xbnav-sheet { animation: none; }
}
.sf-xb .sf-xb-tech { grid-column: 1 / -1; }
.sf-xb .sf-xb-tech-note { margin: -4px 0 14px; font-size: var(--sf-size-13); color: var(--sf-xb-muted); }
.sf-xb .sf-xb-tech-grid { display: grid; gap: 14px; }
@container sf-lp (min-width: 720px) {
.sf-xb .sf-xb-tech-grid { grid-template-columns: repeat(2, 1fr); }
}
@container sf-lp (min-width: 1100px) {
.sf-xb .sf-xb-tech-grid { grid-template-columns: repeat(4, 1fr); }
}
.sf-xb .sf-xb-tech-item { display: flex; flex-direction: column; gap: 8px; padding: 18px; border: 1px solid var(--sf-xb-line); border-radius: 18px; background: var(--sf-xb-white); }
.sf-xb .sf-xb-tech-item b { color: var(--sf-xb-ink); }
.sf-xb .sf-xb-tech-item blockquote, .sf-xb .sf-xb-detail blockquote { margin: 0; padding-left: 12px; border-left: 3px solid var(--sf-xb-amber); font-style: italic; line-height: 1.5; }
.sf-xb .sf-xb-source { display: inline-flex; align-items: center; gap: 4px; font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-xb-blue); }
.sf-xb .sf-xb-tech-thumbs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 6px; }
.sf-xb .sf-xb-thumb { width: 52px; height: 52px; padding: 3px; border: 2px solid var(--sf-xb-line); border-radius: 12px; background: var(--sf-xb-white); cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; }
.sf-xb .sf-xb-thumb:hover, .sf-xb .sf-xb-thumb:focus-visible { border-color: var(--sf-xb-ink); transform: translateY(-3px); }
.sf-xb .sf-xb-thumb img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sf-xb .sf-xb-cmp { margin-top: 8px; }
.sf-xb .sf-xb-band { height: 10px; margin-bottom: 18px; border-radius: 10px; background: var(--sf-xb-white-12); overflow: hidden; }
.sf-xb .sf-xb-band-fill { display: block; width: 0; height: 100%; border-radius: 10px; background: linear-gradient(90deg, var(--sf-xb-ice), var(--sf-xb-amber), var(--sf-xb-ember)); transition: width 1.6s cubic-bezier(0.3, 0.8, 0.2, 1); }
.sf-xb .sf-xb-cmp-on .sf-xb-band-fill { width: 100%; }
.sf-xb .sf-xb-zones { display: grid; gap: 14px; }
@container sf-lp (min-width: 860px) {
.sf-xb .sf-xb-zones { grid-template-columns: repeat(3, 1fr); }
}
.sf-xb .sf-xb-zone { padding: 18px; border: 1px solid var(--sf-xb-white-12); border-top: 4px solid var(--sf-xb-zone, var(--sf-xb-amber)); border-radius: 18px; background: var(--sf-xb-glass); }
.sf-xb .sf-xb-zone-1 { --sf-xb-zone: var(--sf-xb-ice); }
.sf-xb .sf-xb-zone-2 { --sf-xb-zone: var(--sf-xb-amber); }
.sf-xb .sf-xb-zone-3 { --sf-xb-zone: var(--sf-xb-ember); }
.sf-xb .sf-xb-zone-name { margin: 0 0 4px; font-family: var(--sf-display-condensed); font-size: var(--sf-size-20); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sf-xb-zone, var(--sf-xb-white)); }
.sf-xb .sf-xb-zone-text { margin: 0 0 14px; font-size: var(--sf-size-14); line-height: 1.45; color: var(--sf-xb-white-80); }
.sf-xb .sf-xb-zone-lines { display: grid; gap: 8px; }
.sf-xb .sf-xb-chip { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; width: 100%; padding: 8px 12px 8px 8px; border: 2px solid transparent; border-radius: 14px; background: var(--sf-xb-white); color: var(--sf-xb-ink); text-align: left; cursor: pointer; transition: border-color 0.2s ease, transform 0.2s ease; }
.sf-xb .sf-xb-cmp:not(.sf-xb-cmp-on) .sf-xb-chip { opacity: 0; }
.sf-xb .sf-xb-cmp-on .sf-xb-chip { animation: sf-xb-chip-in 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) both; animation-delay: calc(0.5s + var(--sf-xb-i) * 0.12s); }
@keyframes sf-xb-chip-in { from { opacity: 0; transform: translateY(14px) scale(0.96); } to { opacity: 1; transform: none; } }
.sf-xb .sf-xb-chip:hover, .sf-xb .sf-xb-chip:focus-visible { border-color: var(--sf-xb-zone, var(--sf-xb-amber)); }
.sf-xb .sf-xb-chip-on { border-color: var(--sf-xb-yellow); box-shadow: 0 0 0 3px var(--sf-xb-shadow-hot); }
.sf-xb .sf-xb-chip-img { display: block; width: 52px; height: 52px; border-radius: 10px; background: var(--sf-xb-paper); overflow: hidden; }
.sf-xb .sf-xb-chip-img img { width: 100%; height: 100%; padding: 3px; object-fit: contain; mix-blend-mode: multiply; }
.sf-xb .sf-xb-chip-text b { display: block; font-size: var(--sf-size-16); line-height: 1.2; }
.sf-xb .sf-xb-chip-text em { font-size: var(--sf-size-12); font-style: normal; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sf-xb-muted); }
.sf-xb .sf-xb-cmp-hint { display: flex; align-items: center; gap: 8px; margin: 16px 0; font-weight: 700; color: var(--sf-xb-white-80); }
.sf-xb .sf-xb-cmp-hint svg { color: var(--sf-xb-yellow); }
.sf-xb .sf-xb-detail { padding: 22px; border-radius: 22px; background: var(--sf-xb-white); color: var(--sf-xb-text); border-left: 6px solid var(--sf-xb-zone, var(--sf-xb-amber)); }
.sf-xb .sf-xb-detail-1 { --sf-xb-zone: var(--sf-xb-ice); }
.sf-xb .sf-xb-detail-2 { --sf-xb-zone: var(--sf-xb-amber); }
.sf-xb .sf-xb-detail-3 { --sf-xb-zone: var(--sf-xb-ember); }
.sf-xb .sf-xb-detail-kicker, .sf-xb .sf-xb-detail-label { margin: 0 0 4px; font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-xb-muted); }
.sf-xb .sf-xb-detail-label { margin-top: 10px; }
.sf-xb .sf-xb-detail-name { margin: 0 0 8px; font-family: var(--sf-display-condensed); font-size: var(--sf-xb-fs-h2); font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--sf-xb-ink); }
.sf-xb .sf-xb-detail-grid { display: grid; gap: 14px 32px; }
@container sf-lp (min-width: 860px) {
.sf-xb .sf-xb-detail-grid { grid-template-columns: 1fr 1fr; }
}
.sf-xb .sf-xb-detail-grid p { margin: 0 0 4px; line-height: 1.5; }
.sf-xb .sf-xb-detail-products { display: grid; gap: 8px; margin-top: 18px; }
@container sf-lp (min-width: 720px) {
.sf-xb .sf-xb-detail-products { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
}
.sf-xb .sf-xb-detail-product { display: grid; grid-template-columns: 52px 1fr auto; gap: 12px; align-items: center; padding: 8px 12px 8px 8px; border: 2px solid var(--sf-xb-line); border-radius: 14px; background: var(--sf-xb-white); color: var(--sf-xb-ink); text-align: left; cursor: pointer; transition: border-color 0.2s ease; }
.sf-xb .sf-xb-detail-product:hover, .sf-xb .sf-xb-detail-product:focus-visible { border-color: var(--sf-xb-ink); }
.sf-xb .sf-xb-go { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px; background: var(--sf-xb-ink); color: var(--sf-xb-white); font-size: var(--sf-size-12); font-weight: 800; white-space: nowrap; }
.sf-xb .sf-xb-shoes { margin-top: 40px; }
.sf-xb .sf-xb-shoes-title { margin: 0 0 16px; font-family: var(--sf-display-condensed); font-size: var(--sf-size-20); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; color: var(--sf-xb-white); }
.sf-xb .sf-xb-shoes-grid { display: grid; gap: 14px; }
@container sf-lp (min-width: 860px) {
.sf-xb .sf-xb-shoes-grid { grid-template-columns: 1.4fr 1fr 0.8fr; }
}
.sf-xb .sf-xb-shoe { padding: 18px; border: 1px solid var(--sf-xb-white-12); border-radius: 18px; background: var(--sf-xb-glass); }
.sf-xb .sf-xb-shoe-name { margin: 0 0 4px; font-weight: 800; color: var(--sf-xb-yellow); }
.sf-xb .sf-xb-shoe-text { margin: 0 0 12px; font-size: var(--sf-size-14); line-height: 1.45; color: var(--sf-xb-white-80); }
.sf-xb .sf-xb-shoe-socks { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-xb .sf-xb-sock { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 92px; padding: 6px; border: 2px solid transparent; border-radius: 14px; background: var(--sf-xb-white); color: var(--sf-xb-ink); font-size: var(--sf-size-11); font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; }
.sf-xb .sf-xb-sock:hover, .sf-xb .sf-xb-sock:focus-visible { border-color: var(--sf-xb-yellow); }
.sf-xb .sf-xb-sock img { width: 72px; height: 72px; object-fit: contain; mix-blend-mode: multiply; }
.sf-xb .sf-xb-options-2 { grid-template-columns: repeat(2, 1fr); }
.sf-xb .sf-xb-result-item { display: flex; flex-direction: column; gap: 8px; }
.sf-xb .sf-xb-layer-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--sf-xb-ink); color: var(--sf-xb-white); font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-xb .sf-xb-result-note { margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid var(--sf-xb-amber); border-radius: 8px; background: var(--sf-xb-paper); line-height: 1.5; }
.sf-xb .sf-xb-boot { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; margin-top: 20px; padding: 12px; border-radius: 18px; background: var(--sf-xb-paper); }
@container sf-lp (min-width: 768px) {
.sf-xb .sf-xb-boot { grid-template-columns: 150px 1fr; max-width: 760px; }
}
.sf-xb .sf-xb-boot img { width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; background: var(--sf-xb-white); object-fit: cover; object-position: 50% 85%; }
.sf-xb .sf-xb-boot p { margin: 0; line-height: 1.5; }
.sf-xb .sf-xb-boot-title { margin-bottom: 4px; font-weight: 800; color: var(--sf-xb-ink); }
.sf-xb .sf-xb-alts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-weight: 700; color: var(--sf-xb-muted); }
.sf-xb .sf-xb-alts button { min-height: 36px; padding: 0 14px; border: 1px solid var(--sf-xb-line); border-radius: 999px; background: var(--sf-xb-white); color: var(--sf-xb-ink); font-weight: 700; cursor: pointer; }
.sf-xb .sf-xb-alts button:hover, .sf-xb .sf-xb-alts button:focus-visible { border-color: var(--sf-xb-ink); }
.sf-xb .sf-xb-sources { margin: 28px 0 0; font-size: var(--sf-size-13); line-height: 1.5; color: var(--sf-xb-muted); }
.sf-xb .sf-xb-sources a { color: var(--sf-xb-blue); }
.sf-xb .sf-xb-section-lab .sf-xb-lead { color: var(--sf-xb-white-80); }
.sf-xb .sf-xb-bionic { display: grid; gap: 40px; }
.sf-xb .sf-xb-h3 { margin: 0 0 12px; font-family: var(--sf-display-condensed); font-size: var(--sf-xb-fs-h3); font-weight: 800; line-height: 1; letter-spacing: -0.005em; text-transform: uppercase; color: var(--sf-xb-white); }
.sf-xb .sf-xb-zoom-head { margin-top: 24px; }
.sf-xb .sf-xb-zoom-head .sf-xb-lead { margin-bottom: 0; }
.sf-xb .sf-xb-scan { display: grid; gap: 24px; align-items: center; }
@container sf-lp (min-width: 900px) {
.sf-xb .sf-xb-scan { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; }
}
.sf-xb .sf-xb-zoom-poster, .sf-xb .sf-xb-zoom-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.sf-xb .sf-xb-zoom-poster { inset: 4%; width: 92%; height: 92%; object-fit: contain; }
.sf-xb .sf-xb-zoom-bereit .sf-xb-zoom-poster { visibility: hidden; }
.sf-xb .sf-xb-zoom-tag { position: absolute; top: 12px; right: 12px; padding: 5px 10px; border: 1px solid var(--sf-xb-lab-line); border-radius: 999px; background: var(--sf-xb-lab-glass); font-size: var(--sf-size-11); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-xb-yellow); pointer-events: none; }
.sf-xb .sf-xb-scan-hint { position: absolute; bottom: 64px; left: 50%; padding: 5px 12px; border-radius: 999px; background: var(--sf-xb-lab-glass); font-size: var(--sf-size-13); color: var(--sf-xb-lab-text); white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.sf-xb .sf-xb-zoom-side { display: grid; gap: 16px; min-width: 0; align-content: start; }
.sf-xb .sf-xb-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border: 1px solid var(--sf-xb-lab-line); border-radius: 999px; background: var(--sf-xb-lab-panel); }
.sf-xb .sf-xb-mode { min-height: 42px; padding: 0 6px; border: 0; border-radius: 999px; background: transparent; color: var(--sf-xb-lab-text); font-family: var(--sf-body); font-size: var(--sf-size-14); font-weight: 800; line-height: 1.1; cursor: pointer; transition: background 0.2s ease; }
.sf-xb .sf-xb-mode:hover { color: var(--sf-xb-white); }
.sf-xb .sf-xb-mode-on, .sf-xb .sf-xb-mode-on:hover { background: var(--sf-xb-yellow); color: var(--sf-xb-yellow-ink); }
.sf-xb .sf-xb-mode:focus-visible, .sf-xb .sf-xb-objektiv:focus-visible { outline: 2px solid var(--sf-xb-scan); outline-offset: 2px; }
@container sf-lp (min-width: 520px) {
.sf-xb .sf-xb-modes { display: inline-flex; width: max-content; max-width: 100%; }
.sf-xb .sf-xb-mode { padding: 0 16px; font-size: var(--sf-size-15); }
.sf-xb .sf-xb-modes-klein .sf-xb-mode { min-height: 38px; padding: 0 13px; font-size: var(--sf-size-14); }
}
.sf-xb .sf-xb-lab-card { display: grid; gap: 10px; padding: 20px; border: 1px solid var(--sf-xb-lab-line); border-radius: 18px; background: var(--sf-xb-lab-panel); color: var(--sf-xb-lab-text); }
.sf-xb .sf-xb-lab-card p { margin: 0; line-height: 1.55; }
.sf-xb .sf-xb-lab-card-title { margin: 0; font-family: var(--sf-display-condensed); font-size: var(--sf-xb-fs-lab-title); font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--sf-xb-white); }
.sf-xb .sf-xb-lab-quote { margin: 0; padding-left: 12px; border-left: 3px solid var(--sf-xb-yellow); font-size: var(--sf-size-15); line-height: 1.5; color: var(--sf-xb-white); }
.sf-xb .sf-xb-lab-source { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: var(--sf-size-12); font-weight: 700; color: var(--sf-xb-lab-muted); text-decoration: none; }
.sf-xb .sf-xb-lab-source:hover, .sf-xb .sf-xb-lab-source:focus-visible { color: var(--sf-xb-scan); }
.sf-xb .sf-xb-lab-note { margin: 0; font-size: var(--sf-size-13); line-height: 1.5; color: var(--sf-xb-lab-muted); }
.sf-xb .sf-xb-zoom-step { font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sf-xb-scan); }
.sf-xb .sf-xb-zoom-step span { color: var(--sf-xb-lab-muted); }
.sf-xb .sf-xb-thermo { display: grid; gap: 6px; }
.sf-xb .sf-xb-thermo-bar { display: block; height: 10px; border-radius: 999px; background: var(--sf-xb-ironbow); }
.sf-xb .sf-xb-thermo-ends { display: flex; justify-content: space-between; font-size: var(--sf-size-12); color: var(--sf-xb-lab-muted); }
.sf-xb .sf-xb-legende { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--sf-size-13); color: var(--sf-xb-lab-text); }
.sf-xb .sf-xb-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; vertical-align: -1px; }
.sf-xb .sf-xb-dot-warm { background: var(--sf-xb-heat); }
.sf-xb .sf-xb-dot-wind { background: var(--sf-xb-scan); }
.sf-xb .sf-xb-dot-luft { background: var(--sf-xb-air); }
.sf-xb .sf-xb-dot-film { background: var(--sf-xb-film); }
.sf-xb .sf-xb-film { display: grid; gap: 18px; }
@container sf-lp (min-width: 900px) {
.sf-xb .sf-xb-film { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.sf-xb .sf-xb-film .sf-xb-lab-card { min-height: 300px; align-content: start; }
}
.sf-xb .sf-xb-film-main { display: grid; gap: 10px; justify-items: center; min-width: 0; }
.sf-xb .sf-xb-zoom-stage { position: relative; width: 100%; height: min(54vh, 112cqi); height: min(54svh, 112cqi); border: 1px solid var(--sf-xb-lab-line); border-radius: 20px; background: radial-gradient(60% 55% at 50% 45%, var(--sf-xb-lab-glow), transparent 70%), var(--sf-xb-lab-panel); overflow: hidden; }
@container sf-lp (min-width: 900px) {
.sf-xb .sf-xb-zoom-stage, .sf-xb .sf-xb-film-bar { width: min(100%, 72vh, 640px); }
.sf-xb .sf-xb-zoom-stage { height: auto; aspect-ratio: 1; }
}
.sf-xb .sf-xb-film-frame { position: absolute; inset: 0; border-radius: inherit; outline: none; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.sf-xb .sf-xb-film-frame-scan { cursor: ew-resize; }
.sf-xb .sf-xb-film-frame:focus-visible { box-shadow: inset 0 0 0 2px var(--sf-xb-scan); }
.sf-xb .sf-xb-film-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; width: 100%; }
.sf-xb .sf-xb-film-kapitel { grid-column: 1 / -1; grid-row: 1; }
.sf-xb .sf-xb-film-play { grid-column: 1; grid-row: 2; }
.sf-xb .sf-xb-film-again { grid-column: 3; grid-row: 2; }
.sf-xb .sf-xb-film-play, .sf-xb .sf-xb-film-again { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; min-height: 40px; padding: 0 12px; border: 1px solid var(--sf-xb-lab-line); border-radius: 999px; background: var(--sf-xb-lab-panel); color: var(--sf-xb-white); font-family: var(--sf-body); font-size: var(--sf-size-14); font-weight: 800; cursor: pointer; transition: background 0.2s ease; }
.sf-xb .sf-xb-film-play { min-width: 124px; border-color: var(--sf-xb-scan); background: var(--sf-xb-scan); color: var(--sf-xb-ink); }
.sf-xb .sf-xb-film-again:hover { background: var(--sf-xb-lab-glass); }
.sf-xb .sf-xb-film-play:focus-visible, .sf-xb .sf-xb-film-again:focus-visible, .sf-xb .sf-xb-film-step:focus-visible { outline: 2px solid var(--sf-xb-scan); outline-offset: 2px; }
.sf-xb .sf-xb-film-kapitel { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; }
.sf-xb .sf-xb-film-step { display: grid; gap: 6px; width: 100%; min-height: 40px; align-content: center; padding: 0; border: 0; background: transparent; color: var(--sf-xb-lab-muted); font-family: var(--sf-body); text-align: left; cursor: pointer; }
.sf-xb .sf-xb-film-track { display: block; height: 4px; border-radius: 999px; background: var(--sf-xb-white-12); overflow: hidden; }
.sf-xb .sf-xb-film-fill { display: block; height: 100%; background: var(--sf-xb-scan); transform: scaleX(0); transform-origin: left center; }
.sf-xb .sf-xb-film-label { overflow: hidden; font-size: var(--sf-size-12); font-weight: 800; white-space: nowrap; text-overflow: ellipsis; }
.sf-xb .sf-xb-film-step:hover .sf-xb-film-label, .sf-xb .sf-xb-film-step-on .sf-xb-film-label { color: var(--sf-xb-white); }
.sf-xb .sf-xb-film-caption { grid-column: 2; grid-row: 2; min-width: 0; margin: 0; font-size: var(--sf-size-13); line-height: 1.4; color: var(--sf-xb-lab-muted); }
@container sf-lp (max-width: 699px) {
.sf-xb .sf-xb-film-play, .sf-xb .sf-xb-film-again { min-width: 44px; padding: 0; }
.sf-xb .sf-xb-film-play span, .sf-xb .sf-xb-film-again span, .sf-xb .sf-xb-film-label { display: none; }
}
.sf-xb .sf-xb-zoom-readout { position: absolute; top: 10px; left: 14px; display: grid; line-height: 1; pointer-events: none; }
.sf-xb .sf-xb-zoom-readout span { font-family: var(--sf-display-condensed); font-size: var(--sf-xb-fs-readout); font-weight: 800; color: var(--sf-xb-white); font-variant-numeric: tabular-nums; }
.sf-xb .sf-xb-zoom-readout small { margin-top: 2px; font-size: var(--sf-size-10); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-xb-lab-muted); }
.sf-xb .sf-xb-objektive { position: absolute; right: 10px; bottom: 10px; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--sf-xb-lab-line); border-radius: 999px; background: var(--sf-xb-lab-glass); backdrop-filter: blur(6px); }
.sf-xb .sf-xb-objektiv { min-width: 52px; min-height: 40px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: var(--sf-xb-lab-text); font-family: var(--sf-display-condensed); font-size: var(--sf-size-18); font-weight: 800; cursor: pointer; transition: background 0.2s ease; }
.sf-xb .sf-xb-objektiv:hover { color: var(--sf-xb-white); }
.sf-xb .sf-xb-objektiv-on, .sf-xb .sf-xb-objektiv-on:hover { background: var(--sf-xb-scan); color: var(--sf-xb-ink); }
.sf-xb .sf-xb-zoom-key { position: absolute; left: 12px; bottom: 14px; max-width: calc(100% - 210px); pointer-events: none; }
.sf-xb .sf-xb-zoom-key .sf-xb-thermo { width: 140px; }
.sf-xb .sf-xb-zoom-key .sf-xb-legende { display: grid; gap: 4px; font-size: var(--sf-size-12); }
@container sf-lp (max-width: 899px) {
.sf-xb .sf-xb-zoom-side { gap: 10px; }
.sf-xb .sf-xb-zoom-side .sf-xb-lab-card { gap: 6px; padding: 14px 16px; }
.sf-xb .sf-xb-zoom-side .sf-xb-lab-card p { font-size: var(--sf-size-14); line-height: 1.45; }
.sf-xb .sf-xb-zoom-side .sf-xb-lab-quote { font-size: var(--sf-size-13); line-height: 1.42; }
.sf-xb .sf-xb-zoom-side .sf-xb-lab-source { margin-top: 2px; }
.sf-xb .sf-xb-zoom-key { max-width: calc(100% - 190px); }
.sf-xb .sf-xb-zoom-key .sf-xb-thermo { width: 110px; }
}
.sf-xb .sf-xb-section-lab .sf-xb-tech-title, .sf-xb .sf-xb-section-lab .sf-xb-tech-note { color: var(--sf-xb-lab-muted); }
.sf-xb .sf-xb-tech-title { margin: 0 0 8px; font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.sf-xb .sf-xb-section-lab .sf-xb-tech-item { border-color: var(--sf-xb-lab-line); background: var(--sf-xb-lab-panel); color: var(--sf-xb-lab-text); }
.sf-xb .sf-xb-section-lab .sf-xb-tech-item b { color: var(--sf-xb-white); }
.sf-xb .sf-xb-section-lab .sf-xb-tech-item blockquote { border-left-color: var(--sf-xb-yellow); }
.sf-xb .sf-xb-section-lab .sf-xb-source { color: var(--sf-xb-scan); }
.sf-xb .sf-xb-still { margin: 0; padding: 16px; border-radius: 20px; background: var(--sf-xb-white); }
.sf-xb .sf-xb-still img { display: block; width: 100%; max-width: 460px; height: auto; margin: 0 auto; }
.sf-xb .sf-xb-still-list, .sf-xb .sf-xb-still-zoom { display: grid; gap: 14px; }
@container sf-lp (min-width: 900px) {
.sf-xb .sf-xb-still-zoom { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
}
.sf-xb .sf-xb-still-img { display: block; width: 100%; height: auto; border-radius: 12px; }
.sf-xb .sf-xb-material { margin: 0 0 2rem; }
.sf-xb .sf-xb-material-heading { max-width: 760px; margin-bottom: 1.8rem; }
.sf-xb .sf-xb-material-layout { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(250px, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.sf-xb .sf-xb-material-stage { position: relative; aspect-ratio: 4 / 3; background: var(--sf-xb-farbe-0c121c); border: 1px solid var(--sf-xb-farbe-weiss-9); border-radius: 4px; overflow: hidden; }
.sf-xb .sf-xb-material-stage > a { display: block; width: 100%; height: 100%; }
.sf-xb .sf-xb-material-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sf-xb .sf-xb-material-hidden { visibility: hidden; }
.sf-xb .sf-xb-material-canvas { position: absolute; inset: 0; visibility: hidden; }
.sf-xb .sf-xb-material-ready { visibility: visible; cursor: grab; }
.sf-xb .sf-xb-material-ready:active { cursor: grabbing; }
.sf-xb .sf-xb-material-canvas canvas { width: 100%; height: 100%; display: block; }
.sf-xb .sf-xb-material-status { position: absolute; bottom: 0; inset-inline: 0; margin: 0; padding: 1rem; background: var(--sf-xb-farbe-0c121cef); color: var(--sf-xb-farbe-f1f3f5); font-size: var(--sf-xb-schrift-0-85rem); text-align: center; }
.sf-xb .sf-xb-material-nav { display: flex; gap: 0.9rem; border-bottom: 1px solid var(--sf-xb-farbe-weiss-16); margin-bottom: 1.8rem; }
.sf-xb .sf-xb-material-nav button { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; appearance: none; background: none; color: var(--sf-xb-farbe-aab4c0); border: 0; border-bottom: 2px solid transparent; padding: 0.6rem 0 0.8rem; font: inherit; font-size: var(--sf-xb-schrift-0-9rem); cursor: pointer; min-height: 48px; }
.sf-xb .sf-xb-material-nav button span { font-size: var(--sf-xb-schrift-0-7rem); letter-spacing: 0.1em; opacity: 0.7; }
.sf-xb .sf-xb-material-nav button[aria-pressed="true"] { color: var(--sf-xb-farbe-weiss); border-bottom-color: var(--sf-xb-farbe-e9c39a); }
.sf-xb .sf-xb-material-copy h4 { color: var(--sf-xb-farbe-f5f7fa); font-size: clamp(1.3rem, 2vw, 1.9rem); line-height: 1.15; margin: 0 0 1rem; }
.sf-xb .sf-xb-material-copy p { color: var(--sf-xb-farbe-bac3ce); font-size: var(--sf-xb-schrift-0-95rem); line-height: 1.7; }
.sf-xb .sf-xb-material-toggle { display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 0.8rem; padding: 0.8rem 1.1rem; min-height: 48px; border: 1px solid var(--sf-xb-farbe-weiss-31); border-radius: 3px; background: transparent; color: var(--sf-xb-farbe-weiss); font: inherit; cursor: pointer; }
.sf-xb .sf-xb-material-toggle:hover { background: var(--sf-xb-farbe-weiss-4); border-color: var(--sf-xb-farbe-e9c39a); }
.sf-xb .sf-xb-material-copy .sf-xb-material-hint { font-size: var(--sf-xb-schrift-0-75rem); line-height: 1.5; margin-top: 1rem; }
.sf-xb .sf-xb-material-tools { display: flex; gap: 0.5rem; }
.sf-xb .sf-xb-material-tools button { display: grid; place-items: center; background: var(--sf-xb-farbe-weiss-3); color: var(--sf-xb-farbe-weiss); width: 44px; height: 44px; border: 1px solid var(--sf-xb-farbe-weiss-19); border-radius: 3px; cursor: pointer; }
.sf-xb .sf-xb-material button:focus-visible, .sf-xb .sf-xb-material a:focus-visible, .sf-xb .sf-xb-material-canvas:focus-visible, .sf-xb .sf-xb-material-scan summary:focus-visible { outline: 2px solid var(--sf-xb-farbe-e9c39a); outline-offset: -3px; }
.sf-xb .sf-xb-material-note { color: var(--sf-xb-farbe-a1adbb); font-size: var(--sf-xb-schrift-0-75rem); line-height: 1.65; max-width: 850px; margin-top: 1rem; }
.sf-xb .sf-xb-material-scan { border-block: 1px solid var(--sf-xb-farbe-weiss-15); margin-bottom: 2rem; }
.sf-xb .sf-xb-material-scan summary { padding: 1.1rem 0; cursor: pointer; font-size: var(--sf-xb-schrift-0-95rem); color: var(--sf-xb-farbe-dbe3ed); }
.sf-xb .sf-xb-material-scan[open] summary { margin-bottom: 1rem; }
.sf-xb .sf-xb-material-static { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.sf-xb .sf-xb-material-static figure { margin: 0; min-width: 0; }
.sf-xb .sf-xb-material-static img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: var(--sf-xb-farbe-0c121c); }
.sf-xb .sf-xb-material-static figcaption { color: var(--sf-xb-farbe-bac3ce); font-size: var(--sf-xb-schrift-0-85rem); line-height: 1.6; padding-block: 0.8rem; }
@container sf-lp (max-width: 700px) {
.sf-xb .sf-xb-material-layout, .sf-xb .sf-xb-material-static { grid-template-columns: 1fr; gap: 1.2rem; }
.sf-xb .sf-xb-material-nav { margin-bottom: 1.1rem; gap: 1.5rem; }
.sf-xb .sf-xb-material-copy h4 { margin-bottom: 0.6rem; }
.sf-xb .sf-xb-material-copy p { margin-block: 0.5rem; }
}
/* kaufberater.css */
.sf-kb { color: var(--sf-kb-text); background: var(--sf-kb-white); font-family: var(--sf-body); overflow-x: clip; }
.sf-kb .sf-kb-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.sf-kb .sf-kb-narrow { max-width: 860px; }
.sf-kb .sf-kb-section { padding: var(--sf-kb-section-pad) 0; }
.sf-kb .sf-kb-section-light { background: var(--sf-kb-paper); }
.sf-kb .sf-kb-section-deep { background: linear-gradient(180deg, var(--sf-kb-deep), var(--sf-kb-night)); color: var(--sf-kb-white); }
.sf-kb .sf-kb-section-night { background: radial-gradient(120% 90% at 50% 0%, var(--sf-kb-deep), var(--sf-kb-storm)); color: var(--sf-kb-white); }
.sf-kb .sf-kb-eyebrow { margin: 0 0 10px; font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-kb-blue); }
.sf-kb .sf-kb-section-deep .sf-kb-eyebrow, .sf-kb .sf-kb-section-night .sf-kb-eyebrow { color: var(--sf-kb-brand-light); }
.sf-kb .sf-kb-h2 { margin: 0 0 12px; font-family: var(--sf-kb-display); font-size: var(--sf-kb-fs-h2); font-weight: 800; line-height: 1; letter-spacing: -0.01em; text-transform: uppercase; color: inherit; }
.sf-kb .sf-kb-lead { max-width: 720px; margin: 0 0 22px; font-size: var(--sf-kb-fs-lead); line-height: 1.55; }
.sf-kb .sf-kb-small { font-size: var(--sf-size-14); opacity: 0.85; }
.sf-kb .sf-kb-textlink { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.sf-kb .sf-kb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 22px; border: 2px solid transparent; border-radius: 999px; font-size: var(--sf-size-16); font-weight: 800; text-decoration: none; cursor: pointer; transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease; }
.sf-kb .sf-kb-btn:hover { transform: translateY(-2px); }
.sf-kb .sf-kb-btn-primary { background: var(--sf-kb-brand); color: var(--sf-kb-brand-ink); box-shadow: 0 10px 26px var(--sf-kb-brand-shadow); }
.sf-kb .sf-kb-hero .sf-kb-btn-primary, .sf-kb .sf-kb-section-deep .sf-kb-btn-primary, .sf-kb .sf-kb-section-night .sf-kb-btn-primary { background: var(--sf-kb-white); color: var(--sf-kb-brand); box-shadow: 0 10px 26px var(--sf-kb-shadow-strong); }
.sf-kb .sf-kb-btn-glass { background: var(--sf-kb-glass); border-color: var(--sf-kb-glass-line); color: var(--sf-kb-white); backdrop-filter: blur(8px); }
.sf-kb .sf-kb-btn-ghost { background: transparent; border-color: var(--sf-kb-blue); color: var(--sf-kb-blue); }
.sf-kb .sf-kb-btn-outline { background: var(--sf-kb-white); border-color: var(--sf-kb-ink); color: var(--sf-kb-ink); }
.sf-kb .sf-kb-btn-sale { background: var(--sf-kb-red); color: var(--sf-kb-white); box-shadow: 0 10px 26px var(--sf-kb-shadow); }
.sf-kb .sf-kb-btn-mic { background: var(--sf-kb-white); color: var(--sf-kb-brand); min-height: 52px; padding: 0 24px; font-size: var(--sf-size-16); }
.sf-kb .sf-kb-link-btn { margin-top: 6px; padding: 0; border: 0; background: none; color: var(--sf-kb-blue); font-weight: 800; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sf-kb .sf-kb-hero { position: relative; display: flex; align-items: flex-end; padding: 104px 0 40px; overflow: hidden; background: radial-gradient(70% 80% at 82% 0%, var(--sf-kb-brand), transparent 70%), radial-gradient(60% 70% at 10% 100%, var(--sf-kb-deep), transparent 70%), linear-gradient(180deg, var(--sf-kb-night), var(--sf-kb-storm)); color: var(--sf-kb-white); touch-action: pan-y; }
@container sf-lp (min-width: 1024px) {
.sf-kb .sf-kb-hero { min-height: clamp(460px, 60vh, 580px); padding: 112px 0 48px; }
}
.sf-kb .sf-kb-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.32; }
.sf-kb .sf-kb-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--sf-kb-shade) 100%); pointer-events: none; }
.sf-kb .sf-kb-rain { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.sf-kb .sf-kb-hero-inner { position: relative; z-index: 3; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; pointer-events: none; }
.sf-kb .sf-kb-hero-inner a, .sf-kb .sf-kb-hero-inner button { pointer-events: auto; }
.sf-kb .sf-kb-kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 14px; font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-kb-white-80); }
.sf-kb .sf-kb-kicker-logo { display: block; width: auto; height: 26px; filter: brightness(0) invert(1); }
.sf-kb .sf-kb-kicker-logo + span { padding-left: 12px; border-left: 1px solid var(--sf-kb-glass-line); }
.sf-kb .sf-kb-title { max-width: 100%; margin: 0 0 16px; font-family: var(--sf-kb-display); font-size: var(--sf-kb-fs-hero); font-style: italic; font-weight: 800; line-height: 1.02; letter-spacing: 0; text-transform: uppercase; color: var(--sf-kb-white); }
.sf-kb .sf-kb-title-line { display: block; }
.sf-kb .sf-kb-title-accent { color: var(--sf-kb-brand-sky); }
.sf-kb .sf-kb-intro { max-width: 580px; margin: 0 0 10px; font-size: var(--sf-kb-fs-lead); line-height: 1.5; color: var(--sf-kb-white-80); }
.sf-kb .sf-kb-weather { display: inline-flex; margin: 4px 0 0; padding: 5px 12px; border-left: 3px solid var(--sf-kb-brand-bright); background: var(--sf-kb-glass); font-size: var(--sf-size-15); font-weight: 700; }
.sf-kb .sf-kb-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.sf-kb .sf-kb-umbrella { position: absolute; top: 0; left: 0; z-index: 5; width: 1px; height: 1px; overflow: visible; opacity: 0; pointer-events: none; transition: opacity 0.25s ease; will-change: transform; }
.sf-kb .sf-kb-umbrella-on { opacity: 1; }
.sf-kb .sf-kb-umbrella-dim { opacity: 0.45; }
.sf-kb .sf-kb-umbrella svg { position: absolute; overflow: visible; }
.sf-kb .sf-kb-umbrella-panel { fill: var(--sf-kb-brand); }
.sf-kb .sf-kb-umbrella-panel-light { fill: var(--sf-kb-umbrella-light); }
.sf-kb .sf-kb-umbrella-edge { fill: none; stroke: var(--sf-kb-storm); stroke-opacity: 0.35; stroke-width: 1.2; }
.sf-kb .sf-kb-umbrella-shaft { fill: none; stroke: var(--sf-kb-umbrella-shaft); stroke-width: 3; stroke-linecap: round; }
.sf-kb .sf-kb-rain-schirm { cursor: none; }
.sf-kb .sf-kb-bereich { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; max-width: 100%; padding: 4px; border: 1px solid var(--sf-kb-line); border-radius: 16px; background: var(--sf-kb-paper); text-decoration: none; }
.sf-kb .sf-kb-bereich-tab { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 16px; border-radius: 12px; color: var(--sf-kb-text); text-decoration: none; line-height: 1.2; }
.sf-kb .sf-kb-bereich-tab > svg { flex: none; }
.sf-kb .sf-kb-bereich-tab span { display: grid; min-width: 0; }
.sf-kb .sf-kb-bereich-tab b { font-size: var(--sf-size-15); font-weight: 800; }
.sf-kb .sf-kb-bereich-tab small { font-size: var(--sf-size-12); opacity: 0.75; }
.sf-kb a.sf-kb-bereich-tab:hover { background: var(--sf-kb-white); }
.sf-kb .sf-kb-bereich-wissen .sf-kb-bereich-on { background: var(--sf-kb-blue); color: var(--sf-kb-white); }
.sf-kb .sf-kb-hero-switch { position: absolute; top: 20px; right: 0; left: 0; z-index: 4; max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.sf-kb .sf-kb-bereich-kaufen { border-color: var(--sf-kb-glass-line); background: var(--sf-kb-glass); backdrop-filter: blur(8px); }
.sf-kb .sf-kb-bereich-kaufen .sf-kb-bereich-tab { color: var(--sf-kb-white); }
.sf-kb .sf-kb-bereich-kaufen a.sf-kb-bereich-tab:hover { background: var(--sf-kb-glass); }
.sf-kb .sf-kb-bereich-kaufen .sf-kb-bereich-on { background: var(--sf-kb-white); color: var(--sf-kb-brand); }
.sf-kb .sf-kb-know { padding: 20px 0 44px; border-bottom: 1px solid var(--sf-kb-line); background: var(--sf-kb-white); color: var(--sf-kb-text); }
.sf-kb .sf-kb-know-inner { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.sf-kb .sf-kb-know-kicker { display: flex; align-items: center; gap: 8px; margin: 36px 0 12px; font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-kb-blue); }
.sf-kb .sf-kb-know-title { max-width: 22ch; margin: 0 0 14px; font-family: var(--sf-kb-display); font-size: var(--sf-kb-fs-know); font-style: italic; font-weight: 800; line-height: 0.96; letter-spacing: -0.01em; text-transform: uppercase; color: var(--sf-kb-ink); text-wrap: balance; }
.sf-kb .sf-kb-know-title span { display: block; color: var(--sf-kb-blue); }
.sf-kb .sf-kb-know-intro { max-width: 660px; margin: 0; font-size: var(--sf-kb-fs-lead); line-height: 1.5; color: var(--sf-kb-muted); }
.sf-kb .sf-kb-chapters { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }
.sf-kb .sf-kb-chapters a { display: flex; align-items: center; gap: 12px; height: 100%; padding: 14px 16px; border: 1px solid var(--sf-kb-line); border-radius: 14px; background: var(--sf-kb-paper); color: var(--sf-kb-ink); text-decoration: none; }
.sf-kb .sf-kb-chapters a:hover { border-color: var(--sf-kb-blue); }
.sf-kb .sf-kb-chapters em { display: grid; flex: none; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--sf-kb-blue); color: var(--sf-kb-white); font-style: normal; font-weight: 800; }
.sf-kb .sf-kb-chapters span { display: grid; flex: 1; min-width: 0; }
.sf-kb .sf-kb-chapters b { font-size: var(--sf-size-16); }
.sf-kb .sf-kb-chapters small { font-size: var(--sf-size-13); color: var(--sf-kb-muted); }
.sf-kb .sf-kb-chapters a > svg { flex: none; color: var(--sf-kb-blue); }
@container sf-lp (max-width: 760px) {
.sf-kb .sf-kb-chapters { grid-template-columns: minmax(0, 1fr); }
.sf-kb .sf-kb-bereich { display: grid; }
.sf-kb .sf-kb-bereich-tab { padding: 9px 10px; gap: 8px; }
.sf-kb .sf-kb-bereich-tab small { display: none; }
.sf-kb .sf-kb-bereich-tab b { font-size: var(--sf-size-13); }
}
.sf-kb .sf-kb-finder { position: relative; margin-top: 20px; padding: 28px 22px; border-radius: 28px; background: var(--sf-kb-white); box-shadow: 0 30px 80px var(--sf-kb-shadow); }
@container sf-lp (min-width: 768px) {
.sf-kb .sf-kb-finder { padding: 40px; }
}
.sf-kb .sf-kb-progress { display: flex; flex-wrap: nowrap; gap: 6px; margin-bottom: 26px; }
.sf-kb .sf-kb-progress span { flex: 0 1 40px; min-width: 12px; height: 6px; border-radius: 6px; background: var(--sf-kb-line); transition: background 0.3s ease; }
.sf-kb .sf-kb-progress .sf-kb-progress-on { background: var(--sf-kb-brand); }
.sf-kb .sf-kb-step-count { margin: 0 0 6px; font-size: var(--sf-size-13); font-weight: 700; color: var(--sf-kb-muted); }
.sf-kb .sf-kb-step-q { margin: 0 0 22px; font-family: var(--sf-kb-display); font-size: var(--sf-kb-fs-h2); font-weight: 800; line-height: 1; text-transform: uppercase; color: var(--sf-kb-ink); }
.sf-kb .sf-kb-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@container sf-lp (min-width: 900px) {
.sf-kb .sf-kb-options { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
}
.sf-kb .sf-kb-option { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 128px; padding: 18px; border: 2px solid var(--sf-kb-line); border-radius: 18px; background: var(--sf-kb-paper); color: var(--sf-kb-ink); text-align: left; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.sf-kb .sf-kb-option:hover, .sf-kb .sf-kb-option:focus-visible { border-color: var(--sf-kb-ink); background: var(--sf-kb-white); }
.sf-kb .sf-kb-option svg { color: var(--sf-kb-blue); }
.sf-kb .sf-kb-option-label { margin-top: auto; font-size: var(--sf-size-17); font-weight: 800; }
.sf-kb .sf-kb-option-hint { font-size: var(--sf-size-13); color: var(--sf-kb-muted); }
.sf-kb .sf-kb-back { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 0; border: 0; background: none; color: var(--sf-kb-muted); font-weight: 700; cursor: pointer; }
.sf-kb .sf-kb-result-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.sf-kb .sf-kb-result-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.sf-kb .sf-kb-result-actions .sf-kb-back { margin: 0; }
.sf-kb .sf-kb-result-grid { display: grid; gap: 18px; }
@container sf-lp (min-width: 768px) {
.sf-kb .sf-kb-result-grid { grid-template-columns: repeat(3, 1fr); }
}
.sf-kb .sf-kb-result-grid > div { position: relative; }
.sf-kb .sf-kb-best + .sf-kb-card .sf-kb-card-badge { top: 26px; }
.sf-kb .sf-kb-best { position: absolute; z-index: 2; top: -12px; left: 16px; padding: 5px 12px; border-radius: 999px; background: var(--sf-kb-red); color: var(--sf-kb-white); font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-kb .sf-kb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@container sf-lp (min-width: 768px) {
.sf-kb .sf-kb-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; }
}
@container sf-lp (min-width: 1180px) {
.sf-kb .sf-kb-grid { grid-template-columns: repeat(4, 1fr); }
}
.sf-kb .sf-kb-card { display: flex; flex-direction: column; height: 100%; border: 1px solid var(--sf-kb-line); border-radius: 20px; background: var(--sf-kb-white); color: var(--sf-kb-text); overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; }
.sf-kb .sf-kb-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px var(--sf-kb-shadow); }
.sf-kb .sf-kb-card-hot { border-color: var(--sf-kb-yellow); box-shadow: 0 0 0 4px var(--sf-kb-yellow), 0 18px 44px var(--sf-kb-shadow-hot); animation: sf-kb-hot 1.4s ease-out 2; }
@keyframes sf-kb-hot { 0% { box-shadow: 0 0 0 0 var(--sf-kb-yellow), 0 18px 44px var(--sf-kb-shadow-hot); } 60% { box-shadow: 0 0 0 10px var(--sf-kb-shadow-hot), 0 18px 44px var(--sf-kb-shadow-hot); } }
.sf-kb .sf-kb-card-media { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--sf-kb-paper); }
.sf-kb .sf-kb-card-media img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 14px; object-fit: contain; mix-blend-mode: multiply; transition: transform 0.4s ease; }
.sf-kb .sf-kb-card:hover .sf-kb-card-media img { transform: scale(1.04); }
.sf-kb .sf-kb-card-seg { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--sf-kb-white); box-shadow: 0 2px 10px var(--sf-kb-shadow); font-size: var(--sf-size-11); font-style: normal; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-kb-ink); }
.sf-kb .sf-kb-card-seg::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--sf-kb-seg, var(--sf-kb-blue)); }
.sf-kb .sf-kb-card-seg-damen { --sf-kb-seg: var(--sf-kb-yellow-deep); }
.sf-kb .sf-kb-card-seg-herren { --sf-kb-seg: var(--sf-kb-blue); }
.sf-kb .sf-kb-card-seg-kinder { --sf-kb-seg: var(--sf-kb-red); }
.sf-kb .sf-kb-card-badge { position: absolute; top: 10px; left: 10px; padding: 4px 10px; border-radius: 999px; background: var(--sf-kb-ink); color: var(--sf-kb-white); font-size: var(--sf-size-11); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.sf-kb .sf-kb-card-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.sf-kb .sf-kb-card-brand { font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-kb-muted); }
.sf-kb .sf-kb-card-name { margin: 0; font-size: var(--sf-size-17); font-weight: 800; line-height: 1.2; text-transform: none; }
.sf-kb .sf-kb-card-name a { color: var(--sf-kb-ink); text-decoration: none; }
.sf-kb .sf-kb-meter { display: inline-flex; align-items: center; gap: 2px; font-size: var(--sf-size-12); font-weight: 700; color: var(--sf-kb-muted); }
.sf-kb .sf-kb-meter-on { color: var(--sf-kb-blue); fill: var(--sf-kb-blue); }
.sf-kb .sf-kb-meter-off { color: var(--sf-kb-line); }
.sf-kb .sf-kb-meter-text { margin-left: 6px; }
.sf-kb .sf-kb-colors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.sf-kb .sf-kb-swatches { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.sf-kb .sf-kb-swatch { display: inline-block; width: 20px; height: 20px; padding: 0; border: 2px solid var(--sf-kb-white); border-radius: 50%; background: var(--sf-kb-feld, transparent); box-shadow: 0 0 0 1px var(--sf-kb-line); cursor: pointer; transition: box-shadow 0.15s ease; }
.sf-kb .sf-kb-swatch:hover, .sf-kb .sf-kb-swatch:focus-visible { box-shadow: 0 0 0 2px var(--sf-kb-muted); outline: none; }
.sf-kb .sf-kb-swatch-on { box-shadow: 0 0 0 2px var(--sf-kb-ink); }
.sf-kb .sf-kb-swatch-more, .sf-kb .sf-kb-color-name { font-size: var(--sf-size-12); font-weight: 700; color: var(--sf-kb-muted); }
.sf-kb .sf-kb-color-name { color: var(--sf-kb-text); }
.sf-kb .sf-kb-option-swatches { display: flex; gap: 4px; height: 26px; align-items: center; }
.sf-kb .sf-kb-option-swatches .sf-kb-swatch { width: 22px; height: 22px; cursor: inherit; }
.sf-kb .sf-kb-pill .sf-kb-swatch { width: 14px; height: 14px; margin-right: 6px; border-width: 1px; vertical-align: -2px; cursor: inherit; }
.sf-kb .sf-kb-advisor-name { margin: 0 0 4px; font-family: var(--sf-kb-display); font-size: var(--sf-kb-fs-h3); font-weight: 800; line-height: 1; text-align: center; text-transform: uppercase; color: var(--sf-kb-white); }
.sf-kb .sf-kb-advisor-name small { display: block; margin-top: 4px; font-family: var(--sf-body); font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.12em; color: var(--sf-kb-brand-light); }
.sf-kb .sf-kb-bridge .sf-kb-wrap { text-align: center; }
.sf-kb .sf-kb-bridge .sf-kb-lead { margin-inline: auto; }
.sf-kb .sf-kb-bridge .sf-kb-btn { margin-top: 8px; }
.sf-kb .sf-kb-viewbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 4px 0 18px; }
.sf-kb .sf-kb-viewbar-text { margin: 0; font-size: var(--sf-size-14); color: var(--sf-kb-muted); }
.sf-kb .sf-kb-shelves { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
.sf-kb .sf-kb-shelf { min-width: 0; }
.sf-kb .sf-kb-shelf-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 14px; }
.sf-kb .sf-kb-shelf-title { margin: 0; font-size: var(--sf-kb-fs-h3); font-weight: 800; line-height: 1.1; color: var(--sf-kb-ink); }
.sf-kb .sf-kb-shelf-title small { margin-left: 6px; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-kb-muted); }
.sf-kb .sf-kb-shelf-text { margin: 4px 0 0; font-size: var(--sf-size-14); color: var(--sf-kb-muted); }
.sf-kb .sf-kb-shelf-nav { display: flex; align-items: center; gap: 8px; }
.sf-kb .sf-kb-shelf-arrow:disabled { visibility: hidden; }
.sf-kb .sf-kb-shelf-all { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--sf-kb-line); border-radius: 999px; background: var(--sf-kb-white); color: var(--sf-kb-ink); font-size: var(--sf-size-14); font-weight: 700; cursor: pointer; }
.sf-kb .sf-kb-shelf-all:hover { border-color: var(--sf-kb-ink); }
.sf-kb .sf-kb-shelf-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, calc((100% - 54px) / 4)); gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; padding: 4px 2px 14px; scrollbar-width: thin; }
.sf-kb .sf-kb-shelf-item { scroll-snap-align: start; min-width: 0; }
.sf-kb .sf-kb-shelf-ghost { min-height: 460px; border-radius: 18px; background: var(--sf-kb-paper); }
@container sf-lp (max-width: 900px) {
.sf-kb .sf-kb-shelf-row { grid-auto-columns: minmax(240px, 46%); }
}
@container sf-lp (max-width: 560px) {
.sf-kb .sf-kb-shelf-row { grid-auto-columns: 78%; }
.sf-kb .sf-kb-shelf-arrow { display: none; }
}
.sf-kb .sf-kb-loadmore { display: flex; justify-content: center; margin-top: 28px; }
.sf-kb .sf-kb-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin: 2px 0; padding: 10px 0; border-top: 1px solid var(--sf-kb-line); border-bottom: 1px solid var(--sf-kb-line); }
.sf-kb .sf-kb-specs div { min-width: 0; }
.sf-kb .sf-kb-specs dt { margin: 0; font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-kb-muted); }
.sf-kb .sf-kb-specs dd { margin: 1px 0 0; font-size: var(--sf-size-14); font-weight: 800; overflow-wrap: anywhere; color: var(--sf-kb-ink); }
.sf-kb .sf-kb-card-kurz { margin: 0; font-size: var(--sf-size-14); line-height: 1.45; }
.sf-kb .sf-kb-reasons { margin: 0; padding: 0; list-style: none; font-size: var(--sf-size-14); }
.sf-kb .sf-kb-reasons li { position: relative; padding-left: 20px; line-height: 1.45; }
.sf-kb .sf-kb-reasons li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--sf-kb-green); }
.sf-kb .sf-kb-card-toggle { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 0; border: 0; background: none; color: var(--sf-kb-blue); font-size: var(--sf-size-14); font-weight: 800; cursor: pointer; }
.sf-kb .sf-kb-card-toggle svg { transition: transform 0.2s ease; }
.sf-kb .sf-kb-card-toggle-on svg { transform: rotate(180deg); }
.sf-kb .sf-kb-card-more { font-size: var(--sf-size-14); line-height: 1.5; }
.sf-kb .sf-kb-card-more p { margin: 0 0 8px; }
.sf-kb .sf-kb-card-fit b { display: block; font-size: var(--sf-size-12); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-kb-green); }
.sf-kb .sf-kb-card-fit-no b { color: var(--sf-kb-red); }
.sf-kb .sf-kb-card-sizes { font-size: var(--sf-size-12); color: var(--sf-kb-muted); }
.sf-kb .sf-kb-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--sf-kb-line); }
.sf-kb .sf-kb-card-price { display: flex; flex-direction: column; line-height: 1.15; }
.sf-kb .sf-kb-card-price strong { font-size: var(--sf-size-18); font-weight: 800; color: var(--sf-kb-ink); }
.sf-kb .sf-kb-card-price small { margin-top: 3px; font-size: var(--sf-size-12); color: var(--sf-kb-muted); }
.sf-kb .sf-kb-card-price-wait { display: inline-block; width: 64px; height: 14px; border-radius: 4px; background: linear-gradient(90deg, var(--sf-kb-paper), var(--sf-kb-line), var(--sf-kb-paper)); background-size: 200% 100%; animation: sf-kb-shimmer 1.2s linear infinite; }
@keyframes sf-kb-shimmer { to { background-position: -200% 0; } }
.sf-kb .sf-kb-card-go { display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px; border-radius: 999px; background: var(--sf-kb-ink); color: var(--sf-kb-white); font-size: var(--sf-size-13); font-weight: 800; text-decoration: none; white-space: nowrap; }
.sf-kb .sf-kb-card-compact .sf-kb-card-media { aspect-ratio: 1; }
.sf-kb .sf-kb-filterbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin: 6px 0 22px; }
.sf-kb .sf-kb-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-kb .sf-kb-pill { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 2px solid var(--sf-kb-ink); border-radius: 999px; background: var(--sf-kb-white); color: var(--sf-kb-ink); font-weight: 800; cursor: pointer; }
.sf-kb .sf-kb-pill small { font-size: var(--sf-size-12); opacity: 0.6; }
.sf-kb .sf-kb-pill-soft { border-color: var(--sf-kb-line); }
.sf-kb .sf-kb-pill-on { border-color: var(--sf-kb-ink); background: var(--sf-kb-ink); color: var(--sf-kb-white); }
.sf-kb .sf-kb-empty { padding: 30px 0; color: var(--sf-kb-muted); }
.sf-kb .sf-kb-shoplinks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; }
.sf-kb .sf-kb-advisor { display: grid; gap: 24px; margin-top: 10px; }
@container sf-lp (min-width: 1024px) {
.sf-kb .sf-kb-advisor { grid-template-columns: 5fr 7fr; gap: 32px; }
}
.sf-kb .sf-kb-advisor-stage { align-self: start; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 20px; border: 1px solid var(--sf-kb-glass-line); border-radius: 28px; background: var(--sf-kb-glass); text-align: center; }
.sf-kb .sf-kb-orb { width: min(150px, 50%); aspect-ratio: 1; }
@container sf-lp (min-width: 1024px) {
.sf-kb .sf-kb-advisor-stage { position: sticky; top: calc(var(--sf-kopf-klebt, 0px) + 96px); }
}
.sf-kb .sf-kb-advisor-stimme .sf-kb-advisor-stage { display: grid; grid-template-columns: 96px minmax(0, 1fr); grid-template-areas: "orb name" "orb status" "action action" "consent consent" "switch switch"; align-items: center; justify-items: start; gap: 6px 16px; padding: 18px; text-align: left; }
.sf-kb .sf-kb-advisor-stimme .sf-kb-advisor-stage .sf-kb-advisor-status { align-self: start; font-size: var(--sf-size-16); }
.sf-kb .sf-kb-advisor-stimme .sf-kb-btn-mic { justify-self: stretch; white-space: nowrap; }
.sf-kb .sf-kb-advisor-stimme .sf-kb-orb { grid-area: orb; width: 96px; }
.sf-kb .sf-kb-advisor-stimme .sf-kb-advisor-name { grid-area: name; align-self: end; text-align: left; }
.sf-kb .sf-kb-advisor-stimme .sf-kb-advisor-status { grid-area: status; }
.sf-kb .sf-kb-advisor-stimme .sf-kb-btn-mic, .sf-kb .sf-kb-advisor-stimme .sf-kb-advisor-controls { grid-area: action; align-self: start; margin-top: 4px; }
.sf-kb .sf-kb-advisor-stimme .sf-kb-consent { grid-area: consent; max-width: none; margin-top: 6px; }
.sf-kb .sf-kb-advisor-stimme .sf-kb-switch { grid-area: switch; }
@container sf-lp (min-width: 1024px) {
.sf-kb .sf-kb-advisor-stimme .sf-kb-advisor-stage { grid-template-columns: 124px minmax(0, 1fr); grid-template-areas: "orb name" "orb status" "orb action" "consent consent" "switch switch"; gap: 6px 18px; padding: 20px 22px; }
.sf-kb .sf-kb-advisor-stimme .sf-kb-advisor-stage .sf-kb-advisor-status { align-self: center; font-size: var(--sf-size-18); }
.sf-kb .sf-kb-advisor-stimme .sf-kb-btn-mic { justify-self: start; }
.sf-kb .sf-kb-advisor-stimme .sf-kb-orb { width: 124px; }
}
.sf-kb .sf-kb-advisor-text .sf-kb-orb { display: none; }
.sf-kb .sf-kb-advisor-status { min-height: 1.4em; margin: 0; font-size: var(--sf-size-18); font-weight: 800; }
.sf-kb .sf-kb-consent { max-width: 380px; margin: 0; font-size: var(--sf-size-12); line-height: 1.5; color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-advisor-controls { display: flex; gap: 12px; }
.sf-kb .sf-kb-icon-btn { display: inline-grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--sf-kb-glass-line); border-radius: 50%; background: var(--sf-kb-glass); color: var(--sf-kb-white); cursor: pointer; }
.sf-kb .sf-kb-icon-btn-end { border-color: var(--sf-kb-red); background: var(--sf-kb-red); }
.sf-kb .sf-kb-switch { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: var(--sf-kb-white-80); font-size: var(--sf-size-14); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.sf-kb .sf-kb-advisor-talk { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sf-kb .sf-kb-transcript { display: flex; flex-direction: column; gap: 10px; min-height: 180px; max-height: 340px; padding: 16px; border-radius: 20px; background: var(--sf-kb-shade); overflow-y: auto; }
.sf-kb .sf-kb-transcript-hint p { margin: 0 0 8px; color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-transcript-hint ul { margin: 0; padding: 0; list-style: none; }
.sf-kb .sf-kb-transcript-hint button { margin: 0 0 8px; padding: 0; border: 0; background: none; color: var(--sf-kb-mist); font-size: var(--sf-size-15); text-align: left; cursor: pointer; }
.sf-kb .sf-kb-line { max-width: 85%; margin: 0; padding: 10px 14px; border-radius: 16px; font-size: var(--sf-size-15); line-height: 1.45; }
.sf-kb .sf-kb-line-kunde { align-self: flex-end; background: var(--sf-kb-blue); color: var(--sf-kb-white); border-bottom-right-radius: 4px; }
.sf-kb .sf-kb-line-beratung { align-self: flex-start; background: var(--sf-kb-white); color: var(--sf-kb-ink); border-bottom-left-radius: 4px; }
.sf-kb .sf-kb-line-typing { animation: sf-kb-blink 1s ease-in-out infinite; }
@keyframes sf-kb-blink { 50% { opacity: 0.4; } }
.sf-kb .sf-kb-error { margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--sf-kb-yellow); color: var(--sf-kb-yellow-ink); font-weight: 700; }
.sf-kb .sf-kb-input { display: flex; gap: 8px; }
.sf-kb .sf-kb-input input { flex: 1; min-width: 0; min-height: 50px; padding: 0 16px; border: 1px solid var(--sf-kb-glass-line); border-radius: 999px; background: var(--sf-kb-white); color: var(--sf-kb-ink); }
.sf-kb .sf-kb-input button { display: inline-grid; place-items: center; width: 50px; height: 50px; border: 0; border-radius: 50%; background: var(--sf-kb-brand-bright); color: var(--sf-kb-brand-ink); cursor: pointer; }
.sf-kb .sf-kb-input button:disabled { opacity: 0.5; cursor: default; }
.sf-kb .sf-kb-tray-title { margin: 6px 0 10px; font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-kb-brand-light); }
.sf-kb .sf-kb-tray-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.sf-kb .sf-kb-ai-note { margin: 0; font-size: var(--sf-size-12); color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-faq { display: grid; gap: 10px; }
.sf-kb .sf-kb-faq-item { border-radius: 16px; background: var(--sf-kb-white); box-shadow: 0 4px 16px var(--sf-kb-shadow); }
.sf-kb .sf-kb-faq-item summary { padding: 18px 20px; font-size: var(--sf-size-17); font-weight: 800; color: var(--sf-kb-ink); cursor: pointer; }
.sf-kb .sf-kb-faq-item p { margin: 0; padding: 0 20px 20px; line-height: 1.6; }
.sf-kb .sf-kb-more { margin-top: 36px; }
.sf-kb .sf-kb-more ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sf-kb .sf-kb-credit { max-width: 1240px; margin: 0 auto; padding: 16px 20px 28px; font-size: var(--sf-size-12); color: var(--sf-kb-muted); }
.sf-kb .sf-kb-hmark { margin-left: 2px; font-size: 0.7em; font-weight: 800; line-height: 0; vertical-align: super; text-decoration: none; letter-spacing: 0; color: var(--sf-kb-blue); cursor: help; }
.sf-kb .sf-kb-hnote { margin: 18px 0 0; font-size: var(--sf-size-12); color: var(--sf-kb-muted); }
.sf-kb .sf-kb-section-deep .sf-kb-hnote, .sf-kb .sf-kb-section-night .sf-kb-hnote { color: var(--sf-kb-white-80); }
.sf-kb .sf-kb-sale .sf-shop-list { margin-top: 8px; }
.sf-kb .sf-kb-sale .sf-shop-card-amount { color: var(--sf-kb-red); }
.sf-kb .sf-kb-sale-note { margin: 16px 0 0; font-size: var(--sf-size-12); color: var(--sf-kb-muted); }
.sf-kb .sf-kb-section-deep .sf-kb-sale-note, .sf-kb .sf-kb-section-night .sf-kb-sale-note { color: var(--sf-kb-white-80); }
.sf-kb .sf-kb-sale-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.sf-kb .sf-kb-prose { max-width: var(--sf-reading, 680px); font-size: var(--sf-size-17); line-height: 1.7; }
.sf-kb .sf-kb-prose p { margin: 0 0 14px; }
.sf-kb .sf-kb-prose .sf-kb-prose-intro { margin: 0 0 8px; font-size: var(--sf-kb-fs-lead); line-height: 1.55; }
.sf-kb .sf-kb-prose-chapter { margin-top: 30px; }
.sf-kb .sf-kb-prose .sf-kb-prose-h3 { margin: 0 0 10px; font-family: var(--sf-body); font-size: var(--sf-size-20); font-weight: 800; line-height: 1.25; text-transform: none; color: inherit; }
.sf-kb .sf-kb-prose ul { margin: 0 0 14px; padding-left: 1.2em; }
.sf-kb .sf-kb-prose li { margin: 0 0 6px; }
.sf-kb .sf-kb-prose .sf-kb-prose-stand { margin: 28px 0 0; font-size: var(--sf-size-13); color: var(--sf-kb-muted); }
.sf-kb .sf-kb-section-deep .sf-kb-prose-stand, .sf-kb .sf-kb-section-night .sf-kb-prose-stand { color: var(--sf-kb-white-80); }
.sf-kb .sf-kb-table-scroll { max-width: 100%; margin: 14px 0 18px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; border: 1px solid var(--sf-kb-line); border-radius: 12px; background: var(--sf-kb-white); }
.sf-kb .sf-kb-table-scroll:focus-visible { outline: 3px solid var(--sf-kb-blue); outline-offset: 2px; }
.sf-kb .sf-kb-table { width: 100%; border-collapse: collapse; font-size: var(--sf-size-15); line-height: 1.45; color: var(--sf-kb-text); }
.sf-kb .sf-kb-table th, .sf-kb .sf-kb-table td { min-width: 7.5em; padding: 10px 12px; border-bottom: 1px solid var(--sf-kb-line); text-align: left; vertical-align: top; }
.sf-kb .sf-kb-table thead th { font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; color: var(--sf-kb-muted); background: var(--sf-kb-paper); }
.sf-kb .sf-kb-table tbody th { font-weight: 800; color: var(--sf-kb-ink); }
.sf-kb .sf-kb-table tbody tr:last-child > * { border-bottom: 0; }
.sf-kb .sf-kb-compare td { min-width: 0; white-space: nowrap; }
.sf-kb .sf-kb-compare tbody th { min-width: 11em; }
.sf-kb .sf-kb-compare tbody th a { color: var(--sf-kb-ink); text-decoration: none; }
.sf-kb .sf-kb-compare tbody th a:hover { color: var(--sf-kb-blue); text-decoration: underline; }
.sf-kb .sf-kb-compare tbody th small { display: block; font-size: var(--sf-size-11); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-kb-muted); }
.sf-kb .sf-kb-compare .sf-kb-compare-price { font-variant-numeric: tabular-nums; }
.sf-kb .sf-kb-compare-h3 { margin: 26px 0 0; font-size: var(--sf-size-18); font-weight: 800; color: inherit; }
.sf-kb .sf-kb-compare-note { margin: 6px 0 0; font-size: var(--sf-size-12); color: var(--sf-kb-muted); }
.sf-kb .sf-kb-section-deep .sf-kb-compare-note, .sf-kb .sf-kb-section-night .sf-kb-compare-note { color: var(--sf-kb-white-80); }
@media (prefers-reduced-motion: reduce) {
.sf-kb .sf-kb-mess-wave, .sf-kb .sf-kb-cmp-bar::after, .sf-kb .sf-kb-card-hot, .sf-kb .sf-kb-card-price-wait { animation: none; }
.sf-kb .sf-kb-cmp-bar { transition: none; }
}
@container sf-lp (max-width: 560px) {
.sf-kb .sf-kb-meter-text { display: none; }
.sf-kb .sf-kb-card-badge { max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-kb .sf-kb-card-seg { right: 8px; bottom: 8px; }
.sf-kb .sf-kb-card-foot { flex-direction: column; align-items: stretch; }
.sf-kb .sf-kb-card-go { justify-content: center; }
.sf-kb .sf-kb-specs { grid-template-columns: 1fr; }
.sf-kb .sf-kb-card-body { padding: 12px; }
.sf-kb .sf-kb-card-go { padding: 7px 10px; }
}
.sf-kb section[id] { scroll-margin-top: 96px; }
.sf-kbnav { font-family: var(--sf-body); }
.sf-kbnav .sf-kbnav-rail { position: fixed; z-index: 40; top: 50%; right: 22px; display: none; flex-direction: column; align-items: flex-end; gap: 14px; padding: 14px 10px 12px; border: 1px solid var(--sf-kb-nav-line); border-radius: 999px; background: var(--sf-kb-nav-glass); box-shadow: 0 18px 50px var(--sf-kb-shadow-strong); backdrop-filter: blur(14px) saturate(140%); opacity: 0; transform: translate(24px, -50%); pointer-events: none; transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.sf-kbnav.sf-kbnav-on .sf-kbnav-rail { opacity: 1; transform: translate(0, -50%); pointer-events: auto; }
.sf-kbnav .sf-kbnav-track { position: relative; }
.sf-kbnav .sf-kbnav-tube { position: absolute; top: 18px; right: 18px; bottom: 18px; width: 6px; margin-right: -3px; border-radius: 6px; background: var(--sf-kb-nav-line); }
.sf-kbnav .sf-kbnav-water { position: absolute; top: 0; left: 0; width: 100%; border-radius: 4px; background: linear-gradient(180deg, var(--sf-kb-sky), var(--sf-kb-blue)); transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.sf-kbnav .sf-kbnav-front { position: absolute; bottom: -5px; left: 50%; width: 8px; height: 10px; margin-left: -4px; border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; background: var(--sf-kb-sky); animation: sf-kbnav-drip 1.6s ease-in-out infinite; }
@keyframes sf-kbnav-drip { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(3px) scale(1.15, 0.9); } }
.sf-kbnav .sf-kbnav-list { position: relative; display: flex; flex-direction: column; gap: 18px; margin: 0; padding: 0; list-style: none; }
.sf-kbnav .sf-kbnav-item, .sf-kbnav .sf-kbnav-top { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 0; border: 0; background: none; color: var(--sf-kb-white); text-decoration: none; cursor: pointer; }
.sf-kbnav .sf-kbnav-drop, .sf-kbnav .sf-kbnav-top-icon { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--sf-kb-nav-line); border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: var(--sf-kb-deep); color: var(--sf-kb-white-60); transition: background 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease; }
.sf-kbnav .sf-kbnav-done .sf-kbnav-drop { border-color: transparent; background: var(--sf-kb-blue); color: var(--sf-kb-white); }
.sf-kbnav .sf-kbnav-now .sf-kbnav-drop { border-color: transparent; background: var(--sf-kb-brand); color: var(--sf-kb-brand-ink); box-shadow: 0 0 0 6px var(--sf-kb-brand-glow); transform: scale(1.12); }
.sf-kbnav .sf-kbnav-item:hover .sf-kbnav-drop, .sf-kbnav .sf-kbnav-item:focus-visible .sf-kbnav-drop, .sf-kbnav .sf-kbnav-top:hover .sf-kbnav-top-icon, .sf-kbnav .sf-kbnav-top:focus-visible .sf-kbnav-top-icon { color: var(--sf-kb-white); transform: scale(1.12); }
.sf-kbnav .sf-kbnav-top-icon { border-radius: 50%; background: var(--sf-kb-white); color: var(--sf-kb-ink); }
.sf-kbnav .sf-kbnav-top:hover .sf-kbnav-top-icon { color: var(--sf-kb-ink); transform: translateY(-3px); }
.sf-kbnav .sf-kbnav-label { position: absolute; right: 50px; padding: 6px 12px; border-radius: 999px; background: var(--sf-kb-white); box-shadow: 0 8px 24px var(--sf-kb-shadow-strong); color: var(--sf-kb-ink); font-size: var(--sf-size-13); font-weight: 800; white-space: nowrap; opacity: 0; transform: translateX(8px); pointer-events: none; transition: opacity 0.2s ease, transform 0.25s ease; }
.sf-kbnav .sf-kbnav-now .sf-kbnav-label { opacity: 1; transform: translateX(0); background: var(--sf-kb-brand); color: var(--sf-kb-brand-ink); }
.sf-kbnav .sf-kbnav-item:hover .sf-kbnav-label, .sf-kbnav .sf-kbnav-item:focus-visible .sf-kbnav-label, .sf-kbnav .sf-kbnav-top:hover .sf-kbnav-label, .sf-kbnav .sf-kbnav-top:focus-visible .sf-kbnav-label { opacity: 1; transform: translateX(0); }
.sf-kbnav .sf-kbnav-fab { position: fixed; z-index: 40; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: none; filter: drop-shadow(0 10px 22px var(--sf-kb-shadow-strong)); cursor: pointer; opacity: 0; transform: translateY(20px) scale(0.8); pointer-events: none; transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.sf-kbnav.sf-kbnav-on .sf-kbnav-fab { opacity: 1; transform: none; pointer-events: auto; }
.sf-kbnav .sf-kbnav-fab > svg { position: absolute; inset: 0; width: 60px; height: 60px; }
.sf-kbnav .sf-kbnav-fab-bg { fill: var(--sf-kb-night); }
.sf-kbnav .sf-kbnav-fab-water { fill: var(--sf-kb-blue); transition: y 0.3s ease; }
.sf-kbnav .sf-kbnav-fab-track { fill: none; stroke: var(--sf-kb-nav-line); stroke-width: 3; }
.sf-kbnav .sf-kbnav-fab-ring { fill: none; stroke: var(--sf-kb-brand-bright); stroke-width: 3; stroke-linecap: round; transition: stroke-dashoffset 0.3s ease; }
.sf-kbnav .sf-kbnav-fab-icon { position: relative; display: grid; place-items: center; color: var(--sf-kb-white); }
.sf-kbnav .sf-kbnav-backdrop { position: fixed; z-index: 39; inset: 0; border: 0; background: var(--sf-kb-shade); backdrop-filter: blur(2px); }
.sf-kbnav .sf-kbnav-sheet { position: fixed; z-index: 41; right: 16px; bottom: calc(156px + env(safe-area-inset-bottom)); display: grid; gap: 4px; width: min(280px, calc(100vw - 32px)); padding: 14px; border: 1px solid var(--sf-kb-nav-line); border-radius: 24px; background: var(--sf-kb-nav-glass); box-shadow: 0 24px 60px var(--sf-kb-shadow-strong); backdrop-filter: blur(16px) saturate(140%); animation: sf-kbnav-in 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes sf-kbnav-in { from { opacity: 0; transform: translateY(12px) scale(0.96); } }
.sf-kbnav .sf-kbnav-sheet-title { display: flex; justify-content: space-between; margin: 0 4px 6px; font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sf-kb-white-60); }
.sf-kbnav .sf-kbnav-sheet-title span { letter-spacing: 0; text-transform: none; color: var(--sf-kb-brand-light); }
.sf-kbnav .sf-kbnav-sheet-item, .sf-kbnav .sf-kbnav-sheet-top { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 4px 8px; border: 0; border-radius: 14px; background: none; color: var(--sf-kb-white); font-size: var(--sf-size-16); font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; }
.sf-kbnav .sf-kbnav-sheet-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%; background: var(--sf-kb-deep); color: var(--sf-kb-mist); }
.sf-kbnav .sf-kbnav-sheet-now { background: var(--sf-kb-glass); }
.sf-kbnav .sf-kbnav-sheet-now .sf-kbnav-sheet-icon { background: var(--sf-kb-brand); color: var(--sf-kb-brand-ink); }
.sf-kbnav .sf-kbnav-sheet-top { justify-content: center; margin-top: 6px; background: var(--sf-kb-white); color: var(--sf-kb-ink); }
@media (min-width: 1400px) {
.sf-kbnav .sf-kbnav-rail { display: flex; }
.sf-kbnav .sf-kbnav-fab, .sf-kbnav .sf-kbnav-sheet, .sf-kbnav .sf-kbnav-backdrop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.sf-kbnav .sf-kbnav-front, .sf-kbnav .sf-kbnav-sheet { animation: none; }
}
.sf-kb .sf-kb-result-item { display: flex; flex-direction: column; gap: 8px; }
.sf-kb .sf-kb-layer-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--sf-xb-ink); color: var(--sf-xb-white); font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.sf-kb .sf-kb-result-note { margin: 18px 0 0; padding: 12px 16px; border-left: 3px solid var(--sf-xb-amber); border-radius: 8px; background: var(--sf-xb-paper); line-height: 1.5; }
.sf-kb .sf-kb-boot { display: grid; grid-template-columns: 110px 1fr; gap: 16px; align-items: center; margin-top: 20px; padding: 12px; border-radius: 18px; background: var(--sf-xb-paper); }
@container sf-lp (min-width: 768px) {
.sf-kb .sf-kb-boot { grid-template-columns: 150px 1fr; max-width: 760px; }
}
.sf-kb .sf-kb-boot img { width: 100%; aspect-ratio: 4 / 5; border-radius: 12px; background: var(--sf-xb-white); object-fit: cover; object-position: 50% 85%; }
.sf-kb .sf-kb-boot p { margin: 0; line-height: 1.5; }
.sf-kb .sf-kb-boot-title { margin-bottom: 4px; font-weight: 800; color: var(--sf-xb-ink); }
.sf-kb .sf-kb-alts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; font-weight: 700; color: var(--sf-xb-muted); }
.sf-kb .sf-kb-alts button { min-height: 36px; padding: 0 14px; border: 1px solid var(--sf-xb-line); border-radius: 999px; background: var(--sf-xb-white); color: var(--sf-xb-ink); font-weight: 700; cursor: pointer; }
.sf-kb .sf-kb-alts button:hover, .sf-kb .sf-kb-alts button:focus-visible { border-color: var(--sf-xb-ink); }
.sf-kb .sf-kb-bhero { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: min(90vh, 900px); padding: 104px 0 40px; overflow: hidden; background: radial-gradient(70% 55% at 78% 20%, var(--sf-xb-deep), transparent 70%), radial-gradient(60% 50% at 10% 100%, var(--sf-xb-glow-warm), transparent 65%), linear-gradient(180deg, var(--sf-xb-ink), var(--sf-xb-night)); color: var(--sf-xb-white); touch-action: pan-y; }
.sf-kb .sf-kb-bhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--sf-xb-shade) 100%); pointer-events: none; }
.sf-kb .sf-kb-bhero-inner { position: relative; z-index: 3; display: grid; gap: 36px; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 20px; pointer-events: none; }
@container sf-lp (min-width: 980px) {
.sf-kb .sf-kb-bhero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: end; }
}
.sf-kb .sf-kb-bhero-inner a, .sf-kb .sf-kb-bhero-inner button { pointer-events: auto; }
.sf-kb .sf-kb-bkicker { display: inline-block; margin: 0 0 18px; padding: 7px 14px; border: 1px solid var(--sf-xb-glass-line); border-radius: 999px; background: var(--sf-xb-glass); font-size: var(--sf-size-13); font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.sf-kb .sf-kb-btitle { max-width: 16ch; margin: 0 0 18px; font-family: var(--sf-display-condensed); font-size: var(--sf-xb-fs-hero); font-weight: 800; line-height: 0.92; letter-spacing: -0.015em; text-transform: uppercase; color: var(--sf-xb-white); text-wrap: balance; }
.sf-kb .sf-kb-btitle-accent { display: block; color: var(--sf-xb-yellow); }
.sf-kb .sf-kb-bintro { max-width: 620px; margin: 0 0 10px; font-size: var(--sf-xb-fs-lead); line-height: 1.5; color: var(--sf-xb-white-80); }
.sf-kb .sf-kb-bnote { display: inline-flex; margin: 6px 0 0; padding: 6px 12px; border-left: 3px solid var(--sf-xb-amber); background: var(--sf-xb-glass); font-weight: 700; }
.sf-kb .sf-kb-bhero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 30px; }
.sf-kb .sf-kb-bfacts { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0; padding: 0; list-style: none; font-size: var(--sf-size-14); color: var(--sf-xb-white-80); }
.sf-kb .sf-kb-bfacts b { margin-right: 6px; font-family: var(--sf-display-condensed); font-size: var(--sf-size-20); color: var(--sf-xb-yellow); }
.sf-kb .sf-kb-bhint { position: relative; z-index: 3; width: 100%; max-width: 1240px; margin: 28px auto 0; padding: 0 20px; font-size: var(--sf-size-13); color: var(--sf-xb-white-60); pointer-events: none; }
.sf-kb .sf-kb-bhero-visual { position: relative; align-self: center; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 520px; pointer-events: none; }
@container sf-lp (min-width: 980px) {
.sf-kb .sf-kb-bhero-visual { justify-self: end; width: 100%; }
}
.sf-kb .sf-kb-xray { position: relative; margin: 0; aspect-ratio: 4 / 5; border: 1px solid var(--sf-xb-glass-line); border-radius: 22px; background: var(--sf-xb-white); overflow: hidden; box-shadow: 0 30px 70px var(--sf-xb-shadow-strong); }
.sf-kb .sf-kb-xray-2 { transform: translateY(34px); }
.sf-kb .sf-kb-xray img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.sf-kb .sf-kb-xray-cover { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 18px; background: linear-gradient(160deg, var(--sf-xb-shell-hi), var(--sf-xb-shell)); animation: sf-kb-jacke-auf 1.4s cubic-bezier(0.7, 0, 0.2, 1) 0.9s both; }
.sf-kb .sf-kb-xray-2 .sf-kb-xray-cover { animation-delay: 1.25s; }
.sf-kb .sf-kb-xray-cover span { font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-xb-white-60); }
@keyframes sf-kb-jacke-auf { from { transform: translateY(0); } to { transform: translateY(-101%); } }
.sf-kb .sf-kb-xray figcaption { position: absolute; left: 10px; bottom: 10px; }
.sf-kb .sf-kb-xray-tag { display: inline-block; padding: 5px 10px; border-radius: 999px; background: var(--sf-xb-yellow); color: var(--sf-xb-yellow-ink); font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
@container sf-lp (max-width: 979px) {
.sf-kb .sf-kb-bhero-visual { max-width: 440px; }
.sf-kb .sf-kb-xray-2 { transform: translateY(22px); }
}
.sf-kb.sf-kb-ton-nacht { --sf-kb-storm: var(--sf-xb-night); --sf-kb-night: var(--sf-xb-ink); --sf-kb-deep: var(--sf-xb-deep); --sf-kb-brand: var(--sf-xb-yellow); --sf-kb-brand-bright: var(--sf-xb-yellow-deep); --sf-kb-brand-ink: var(--sf-xb-yellow-ink); --sf-kb-brand-light: var(--sf-xb-yellow); --sf-kb-brand-sky: var(--sf-xb-ice); --sf-kb-brand-glow: var(--sf-xb-shadow-hot); --sf-kb-brand-shadow: var(--sf-xb-shadow-hot); --sf-kb-sky: var(--sf-xb-ice); --sf-kb-mist: var(--sf-xb-frost); --sf-kb-nav-glass: var(--sf-xb-nav-glass); }
.sf-kb .sf-kb-modul { background: transparent; color: inherit; overflow-x: visible; }
.sf-kb .sf-kb-snow { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; }
.sf-kb .sf-kb-kopf { display: contents; }
.sf-kb.sf-kb-fragment:not(.sf-kb-skript) .sf-kb-nur-skript { display: none; }
.sf-kb .sf-kb-card-details > summary { list-style: none; cursor: pointer; }
.sf-kb .sf-kb-card-details > summary::-webkit-details-marker { display: none; }
.sf-kb .sf-kb-meter-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--sf-kb-line); }
.sf-kb .sf-kb-meter-dot.sf-kb-meter-on { background: var(--sf-kb-blue); }
.sf-kb .sf-kb-hero .sf-ai-mark, .sf-kb .sf-kb-xray .sf-ai-mark, .sf-kb .sf-kb-boot-bild .sf-ai-mark { z-index: 3; }
.sf-kb .sf-kb-boot-bild { position: relative; display: block; }
.sf-kb .sf-kb-xray { position: relative; }
.sf-kb .sf-kb-lk-f1 { --lk: var(--sf-kb-lk-c1); }
.sf-kb .sf-kb-lk-f2 { --lk: var(--sf-kb-lk-c2); }
.sf-kb .sf-kb-lk-f3 { --lk: var(--sf-kb-lk-c3); }
.sf-kb .sf-kb-lk-buehne { display: grid; gap: 22px; }
.sf-kb .sf-kb-lk .sf-kb-hmark { color: var(--sf-kb-brand-light); }
.sf-kb .sf-kb-lk-punkt { flex: none; display: inline-block; width: 10px; height: 10px; border: 2px solid var(--sf-kb-white-60); border-radius: 50%; }
.sf-kb .sf-kb-lk-chip-drin .sf-kb-lk-punkt, .sf-kb .sf-kb-lk-bahn .sf-kb-lk-punkt, .sf-kb .sf-kb-lk-lampe .sf-kb-lk-punkt { border-color: var(--lk); background: var(--lk); box-shadow: 0 0 10px var(--lk); }
.sf-kb .sf-kb-lk-wahl { display: grid; gap: 10px; }
.sf-kb .sf-kb-lk-wahl-titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin: 0; font-size: var(--sf-size-16); }
.sf-kb .sf-kb-lk-wahl-titel b { font-weight: 800; }
.sf-kb .sf-kb-lk-wahl-titel span { font-size: var(--sf-size-13); color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-chips { display: flex; flex-wrap: wrap; gap: 8px; }
@container sf-lp (max-width: 640px) {
.sf-kb .sf-kb-lk-chips { display: grid; grid-auto-flow: column; grid-template-rows: repeat(2, auto); grid-auto-columns: max-content; justify-content: start; margin: 0 -20px; padding: 2px 44px 6px 20px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-left: 20px; -webkit-mask-image: linear-gradient(90deg, var(--sf-kb-lk-shade) calc(100% - 56px), transparent); mask-image: linear-gradient(90deg, var(--sf-kb-lk-shade) calc(100% - 56px), transparent); }
.sf-kb .sf-kb-lk-chips::-webkit-scrollbar { display: none; }
.sf-kb .sf-kb-lk-chip { scroll-snap-align: start; min-height: 42px; padding: 5px 10px; gap: 8px; }
.sf-kb .sf-kb-lk-chip-weite { padding-left: 8px; }
}
.sf-kb .sf-kb-lk-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 6px 12px; border: 1px solid var(--sf-kb-glass-line); border-radius: 12px; background: var(--sf-kb-glass); color: var(--sf-kb-white); font: inherit; text-align: left; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.sf-kb .sf-kb-lk-chip:hover { border-color: var(--sf-kb-white-80); }
.sf-kb .sf-kb-lk-chip:focus-visible, .sf-kb .sf-kb-lk-karte:focus-visible { outline: 2px solid var(--sf-kb-white); outline-offset: 3px; }
.sf-kb .sf-kb-lk-chip-name { display: grid; line-height: 1.15; }
.sf-kb .sf-kb-lk-chip-name b { font-size: var(--sf-size-14); font-weight: 800; }
.sf-kb .sf-kb-lk-chip-name small { font-size: var(--sf-size-11); color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-chip-weite { padding-left: 10px; border-left: 1px solid var(--sf-kb-white-18); font-size: var(--sf-size-13); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-chip-drin { border-color: var(--lk); background: color-mix(in srgb, var(--lk) 16%, transparent); }
.sf-kb .sf-kb-lk-chip-drin .sf-kb-lk-chip-weite { color: var(--lk); }
.sf-kb .sf-kb-lk-hinweis { min-height: 1.3em; margin: 0; font-size: var(--sf-size-13); color: var(--sf-kb-lk-c1); }
.sf-kb .sf-kb-lk-plan { --sf-kb-lk-x0: var(--sf-kb-lk-x0s); --sf-kb-lk-xw: var(--sf-kb-lk-xws); position: relative; margin: 0; padding: 16px 12px 16px; border: 1px solid var(--sf-kb-lk-panel-line); border-radius: 20px; background: radial-gradient(90% 70% at 0% 50%, var(--sf-kb-lk-panel-glow), transparent 70%), linear-gradient(180deg, var(--sf-kb-lk-panel-top), var(--sf-kb-lk-panel-bottom)); box-shadow: 0 30px 80px var(--sf-kb-shadow-strong), inset 0 1px 0 var(--sf-kb-lk-panel-line); }
@container sf-lp (max-width: 420px) {
.sf-kb .sf-kb-lk-plan { margin: 0 -8px; }
}
.sf-kb .sf-kb-lk-plan .sf-kb-lk-nur-breit { display: none; }
@container sf-lp (min-width: 700px) {
.sf-kb .sf-kb-lk-plan { --sf-kb-lk-x0: var(--sf-kb-lk-x0b); --sf-kb-lk-xw: var(--sf-kb-lk-xwb); padding: 22px 24px 20px; border-radius: 24px; }
.sf-kb .sf-kb-lk-plan .sf-kb-lk-nur-schmal { display: none; }
.sf-kb .sf-kb-lk-plan .sf-kb-lk-nur-breit { display: block; }
}
.sf-kb .sf-kb-lk-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sf-kb .sf-kb-lk-pos { position: absolute; left: calc(var(--sf-kb-lk-x0) + var(--sf-kb-lk-t) * var(--sf-kb-lk-xw)); }
.sf-kb .sf-kb-lk-orte { position: relative; height: calc(var(--sf-kb-lk-zeilen) * 20px + 10px); font-size: var(--sf-size-12); line-height: 16px; }
.sf-kb .sf-kb-lk-ort { bottom: 0; height: calc((var(--sf-kb-lk-z) + 1) * 20px + 10px); white-space: nowrap; }
.sf-kb .sf-kb-lk-ort::before { content: ""; position: absolute; top: 4px; bottom: 0; left: 0; z-index: 1; border-left: 1px solid var(--sf-kb-lk-guide); }
.sf-kb .sf-kb-lk-ort.sf-kb-lk-rechts::before { right: 0; left: auto; border-left: 0; border-right: 1px solid var(--sf-kb-lk-guide); }
.sf-kb .sf-kb-lk-etikett { position: relative; z-index: 2; display: inline-block; margin-left: 1px; padding: 0 6px; }
.sf-kb .sf-kb-lk-rechts > .sf-kb-lk-etikett { margin: 0 1px 0 0; }
.sf-kb .sf-kb-lk-ort b { font-weight: 700; color: var(--sf-kb-white-80); }
.sf-kb .sf-kb-lk-ort span { margin-left: 6px; font-variant-numeric: tabular-nums; color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-rechts { transform: translateX(-100%); }
.sf-kb .sf-kb-lk-orte-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; margin: 0 0 6px; padding: 0; list-style: none; font-size: var(--sf-size-12); line-height: 1.3; color: var(--sf-kb-white-80); }
.sf-kb .sf-kb-lk-orte-liste li { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.sf-kb .sf-kb-lk-orte-liste b { overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.sf-kb .sf-kb-lk-orte-liste span:last-child { color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-nr { flex: none; display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%; background: var(--sf-kb-white-18); font-size: var(--sf-size-11); font-weight: 800; line-height: 1; color: var(--sf-kb-white); }
.sf-kb .sf-kb-lk-ort-nr { transform: translateX(-50%); }
.sf-kb .sf-kb-lk-ort-nr::before { left: 50%; top: 17px; }
.sf-kb .sf-kb-lk-ort-nr .sf-kb-lk-nr { position: relative; z-index: 2; }
.sf-kb .sf-kb-lk-bahnen { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.sf-kb .sf-kb-lk-bahn { display: grid; grid-template-areas: "kopf" "bild" "zahlen" "satz"; gap: 6px; }
.sf-kb .sf-kb-lk-bahn-kopf { grid-area: kopf; display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0; font-size: var(--sf-size-14); line-height: 1.2; }
.sf-kb .sf-kb-lk-bahn-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-kb .sf-kb-lk-bahn-name small { font-size: var(--sf-size-12); color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-bahn-name b { font-weight: 800; }
.sf-kb .sf-kb-lk-bahn-weite { margin-left: auto; white-space: nowrap; font-size: var(--sf-size-12); color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-bahn-weite b { font-family: var(--sf-kb-display); font-size: var(--sf-kb-lk-fs-zahl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; color: var(--lk); }
.sf-kb .sf-kb-lk-bahn-wort { display: none; }
.sf-kb .sf-kb-lk-satz { grid-area: satz; margin: 0; font-size: var(--sf-size-13); line-height: 1.4; color: var(--sf-kb-white-80); }
.sf-kb .sf-kb-lk-bahn-bild { grid-area: bild; position: relative; overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px var(--sf-kb-lk-panel-line), -3px 0 0 var(--lk), 0 14px 30px var(--sf-kb-shadow-strong); }
.sf-kb .sf-kb-lk-bahn-svg { display: block; width: 100%; height: auto; }
@container sf-lp (min-width: 700px) {
.sf-kb .sf-kb-lk-bahn { grid-template-columns: minmax(0, auto) minmax(0, 1fr); grid-template-areas: "kopf satz" "bild bild" "zahlen zahlen"; column-gap: 28px; }
.sf-kb .sf-kb-lk-bahn-kopf { gap: 10px; font-size: var(--sf-size-15); }
.sf-kb .sf-kb-lk-bahn-weite { margin-left: 10px; }
.sf-kb .sf-kb-lk-bahn-wort { display: inline; }
.sf-kb .sf-kb-lk-satz { align-self: center; text-align: right; }
}
.sf-kb .sf-kb-lk-sc-laub-a { fill: var(--sf-kb-lk-leaf-a); }
.sf-kb .sf-kb-lk-sc-laub-b { fill: var(--sf-kb-lk-leaf-b); }
.sf-kb .sf-kb-lk-sc-laub-c { fill: var(--sf-kb-lk-leaf-c); }
.sf-kb .sf-kb-lk-sc-laub-d { fill: var(--sf-kb-lk-leaf-d); }
.sf-kb .sf-kb-lk-sc-laub-e { fill: var(--sf-kb-lk-leaf-e); }
.sf-kb .sf-kb-lk-sc-nadel { fill: var(--sf-kb-lk-needle); }
.sf-kb .sf-kb-lk-sc-halm { stroke: var(--sf-kb-lk-grass); stroke-width: 0.9; stroke-linecap: round; }
.sf-kb .sf-kb-lk-sc-kies-a { fill: var(--sf-kb-lk-gravel-a); }
.sf-kb .sf-kb-lk-sc-kies-b { fill: var(--sf-kb-lk-gravel-b); }
.sf-kb .sf-kb-lk-stop-schatten { stop-color: var(--sf-kb-lk-night); }
.sf-kb .sf-kb-lk-stop-licht { stop-color: var(--sf-kb-lk-light); }
.sf-kb .sf-kb-lk-lichtkarte { mix-blend-mode: multiply; }
.sf-kb .sf-kb-lk-nacht { fill: var(--sf-kb-lk-night); }
.sf-kb .sf-kb-lk-schein { mix-blend-mode: screen; }
.sf-kb .sf-kb-lk-korn { opacity: 0.06; mix-blend-mode: overlay; }
.sf-kb .sf-kb-lk-wachsen { transform-box: view-box; }
.sf-kb .sf-kb-lk-ort-kerben line { stroke: var(--sf-kb-white-60); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.sf-kb .sf-kb-lk-schwelle line { stroke: var(--lk); stroke-width: 1.5px; opacity: 0.7; vector-effect: non-scaling-stroke; }
.sf-kb .sf-kb-lk-schwelle-weg line { stroke-dasharray: 6 4; }
.sf-kb .sf-kb-lk-schwelle-umriss line { stroke-dasharray: 2 4; }
.sf-kb .sf-kb-lk-schwelle path { fill: var(--lk); }
.sf-kb .sf-kb-lk-w-strang, .sf-kb .sf-kb-lk-w-schatten, .sf-kb .sf-kb-lk-w-glanz { fill: none; stroke-linecap: round; }
.sf-kb .sf-kb-lk-w-strang { stroke: var(--sf-kb-lk-root); }
.sf-kb .sf-kb-lk-w-schatten { stroke: var(--sf-kb-lk-root-shadow); }
.sf-kb .sf-kb-lk-w-glanz { stroke: var(--sf-kb-lk-root-hi); }
.sf-kb .sf-kb-lk-w-fuss { fill: var(--sf-kb-lk-root); }
.sf-kb .sf-kb-lk-w-stamm { fill: var(--sf-kb-lk-root-trunk); }
.sf-kb .sf-kb-lk-saum-farbe { flood-color: var(--sf-kb-lk-rim); }
.sf-kb .sf-kb-lk-d-schatten { fill: var(--sf-kb-lk-cast); }
.sf-kb .sf-kb-lk-d-fussschatten { fill: var(--sf-kb-lk-shade); opacity: 0.6; }
.sf-kb .sf-kb-lk-d-wurzel { fill: none; stroke: var(--sf-kb-lk-silhouette); stroke-linecap: round; }
.sf-kb .sf-kb-lk-d-kante { fill: none; stroke: var(--sf-kb-lk-rim); stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; vector-effect: non-scaling-stroke; }
.sf-kb .sf-kb-lk-d-tafel { fill: var(--sf-kb-lk-sign); stroke: var(--sf-kb-lk-wood-dark); stroke-width: 0.6; stroke-linejoin: round; }
.sf-kb .sf-kb-lk-d-schrift { stroke: var(--sf-kb-lk-wood-dark); stroke-width: 0.8; stroke-linecap: round; }
.sf-kb .sf-kb-lk-d-holz { fill: var(--sf-kb-lk-wood); }
.sf-kb .sf-kb-lk-d-holz-seite { fill: var(--sf-kb-lk-wood-dark); opacity: 0.55; }
.sf-kb .sf-kb-lk-d-balken { fill: var(--sf-kb-lk-stripe-white); }
.sf-kb .sf-kb-lk-d-streifen { fill: var(--sf-kb-lk-stripe-red); }
.sf-kb .sf-kb-lk-d-glanzlinie { fill: var(--sf-kb-lk-light); opacity: 0.55; }
.sf-kb .sf-kb-lk-d-pfostenkopf { fill: var(--sf-kb-lk-wood); stroke: var(--sf-kb-lk-wood-dark); stroke-width: 0.8; }
.sf-kb .sf-kb-lk-d-gewicht, .sf-kb .sf-kb-lk-d-gabelkopf { fill: var(--sf-kb-lk-steel); }
.sf-kb .sf-kb-lk-d-pfosten { fill: var(--sf-kb-lk-post); }
.sf-kb .sf-kb-lk-d-pfosten-seite { fill: var(--sf-kb-lk-post-side); }
.sf-kb .sf-kb-lk-d-kappe { fill: var(--sf-kb-lk-band); }
.sf-kb .sf-kb-lk-d-reflektor { fill: var(--sf-kb-lk-reflex); }
.sf-kb .sf-kb-lk-d-blink { fill: var(--sf-kb-lk-reflex-glow); filter: blur(2px); }
.sf-kb .sf-kb-lk-d-funkeln line { stroke: var(--sf-kb-lk-light); stroke-width: 0.7; stroke-linecap: round; opacity: 0.85; }
.sf-kb .sf-kb-lk-d-kronenschatten { fill: var(--sf-kb-lk-crown-shadow); }
.sf-kb .sf-kb-lk-d-krone { fill: var(--sf-kb-lk-crown); }
.sf-kb .sf-kb-lk-d-krone-hell { fill: var(--sf-kb-lk-crown-hi); opacity: 0.75; }
.sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-tafel, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-holz, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-holz-seite, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-balken, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-streifen, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-pfostenkopf, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-gewicht, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-gabelkopf, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-pfosten, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-pfosten-seite, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-kappe, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-krone, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-krone-hell { fill: var(--sf-kb-lk-silhouette); stroke: none; opacity: 1; }
.sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-schrift, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-glanzlinie, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-fussschatten, .sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-kronenschatten { display: none; }
.sf-kb .sf-kb-lk-ding-umriss .sf-kb-lk-d-reflektor { opacity: 0.75; }
.sf-kb .sf-kb-lk-p-schatten { fill: var(--sf-kb-lk-shade); opacity: 0.45; }
.sf-kb .sf-kb-lk-p-rucksack { fill: var(--sf-kb-lk-pack); }
.sf-kb .sf-kb-lk-p-deckel { fill: var(--sf-kb-lk-band); opacity: 0.45; }
.sf-kb .sf-kb-lk-p-jacke { fill: var(--lk); }
.sf-kb .sf-kb-lk-p-arm { fill: color-mix(in srgb, var(--lk) 70%, var(--sf-kb-lk-shade)); }
.sf-kb .sf-kb-lk-p-gurt { fill: var(--sf-kb-lk-band); }
.sf-kb .sf-kb-lk-p-kopf { fill: var(--sf-kb-lk-hat); }
.sf-kb .sf-kb-lk-p-band { fill: none; stroke: var(--sf-kb-lk-band); stroke-width: 1.3; }
.sf-kb .sf-kb-lk-p-bommel { fill: var(--sf-kb-lk-hat-hi); }
.sf-kb .sf-kb-lk-p-lampe { fill: var(--sf-kb-lk-lamp); }
.sf-kb .sf-kb-lk-p-linse { fill: var(--sf-kb-lk-light); }
.sf-kb .sf-kb-lk-flaggen { grid-area: zahlen; position: relative; height: calc(var(--sf-kb-lk-zeilen) * 22px + 2px); font-size: var(--sf-size-13); }
.sf-kb .sf-kb-lk-flagge { top: 0; height: calc((var(--sf-kb-lk-z) + 1) * 22px); display: flex; align-items: flex-end; white-space: nowrap; line-height: 20px; color: var(--sf-kb-white-80); }
.sf-kb .sf-kb-lk-flagge::before { content: ""; position: absolute; top: 0; bottom: 3px; left: 0; z-index: 1; border-left: 2px solid var(--lk); }
.sf-kb .sf-kb-lk-flagge.sf-kb-lk-rechts::before { right: 0; left: auto; border-left: 0; border-right: 2px solid var(--lk); }
.sf-kb .sf-kb-lk-flagge-weg::before { border-left-style: dashed; border-right-style: dashed; }
.sf-kb .sf-kb-lk-flagge-umriss::before { border-left-style: dotted; border-right-style: dotted; }
.sf-kb .sf-kb-lk-flagge b { font-size: var(--sf-size-17); font-weight: 800; font-variant-numeric: tabular-nums; color: var(--lk); }
.sf-kb .sf-kb-lk-zahlen { grid-area: zahlen; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 0; }
.sf-kb .sf-kb-lk-zahlen div { padding-left: 8px; border-left: 2px solid var(--lk); }
.sf-kb .sf-kb-lk-zahlen .sf-kb-lk-zahl-weg { border-left-style: dashed; }
.sf-kb .sf-kb-lk-zahlen .sf-kb-lk-zahl-umriss { border-left-style: dotted; }
.sf-kb .sf-kb-lk-zahlen dt { font-size: var(--sf-size-11); line-height: 1.2; color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-zahlen dd { margin: 2px 0 0; font-family: var(--sf-kb-display); font-size: var(--sf-kb-lk-fs-zahl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1; color: var(--sf-kb-white); }
.sf-kb .sf-kb-lk-skala { position: relative; height: 28px; margin-top: 12px; font-size: var(--sf-size-12); font-variant-numeric: tabular-nums; color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-skala::before { content: ""; position: absolute; top: 0; left: var(--sf-kb-lk-x0); width: var(--sf-kb-lk-xw); border-top: 1px solid var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-skala span { top: 8px; transform: translateX(-50%); white-space: nowrap; }
.sf-kb .sf-kb-lk-skala span::before { content: ""; position: absolute; top: -8px; left: 50%; height: 5px; border-left: 1px solid var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-plan figcaption { display: grid; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--sf-kb-lk-panel-line); }
.sf-kb .sf-kb-lk-legende { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: var(--sf-size-12); color: var(--sf-kb-white-80); }
.sf-kb .sf-kb-lk-legende li { display: flex; align-items: center; gap: 8px; }
.sf-kb .sf-kb-lk-legende li > span { width: 14px; height: 14px; border-radius: 4px; }
.sf-kb .sf-kb-lk-legende-hell { background: var(--sf-kb-lk-sign); box-shadow: 0 0 10px var(--sf-kb-lk-glow); }
.sf-kb .sf-kb-lk-legende-umriss { background: var(--sf-kb-lk-silhouette); box-shadow: 0 0 0 1.5px var(--sf-kb-lk-rim); }
.sf-kb .sf-kb-lk-legende-dunkel { border: 1px dashed var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-fussnote { margin: 0; font-size: var(--sf-size-12); line-height: 1.5; color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-buehne:not(.sf-kb-lk-on) .sf-kb-lk-wachsen { opacity: 0; }
.sf-kb .sf-kb-lk-buehne:not(.sf-kb-lk-on) .sf-kb-lk-dinge, .sf-kb .sf-kb-lk-buehne:not(.sf-kb-lk-on) .sf-kb-lk-schwellen-linien, .sf-kb .sf-kb-lk-buehne:not(.sf-kb-lk-on) .sf-kb-lk-flaggen { opacity: 0; }
.sf-kb .sf-kb-lk-on .sf-kb-lk-wachsen { animation: sf-kb-lk-wachsen 0.65s cubic-bezier(0.25, 0.7, 0.2, 1) both; }
.sf-kb .sf-kb-lk-on .sf-kb-lk-dinge, .sf-kb .sf-kb-lk-on .sf-kb-lk-schwellen-linien, .sf-kb .sf-kb-lk-on .sf-kb-lk-flaggen { animation: sf-kb-lk-auf 0.45s ease-out 0.35s both; }
.sf-kb .sf-kb-lk-on .sf-kb-lk-flackern { animation: sf-kb-lk-flackern 5.2s linear 0.8s infinite; }
.sf-kb .sf-kb-lk-static .sf-kb-lk-wachsen, .sf-kb .sf-kb-lk-static .sf-kb-lk-dinge, .sf-kb .sf-kb-lk-static .sf-kb-lk-schwellen-linien, .sf-kb .sf-kb-lk-static .sf-kb-lk-flaggen, .sf-kb .sf-kb-lk-static .sf-kb-lk-flackern { animation: none; }
@keyframes sf-kb-lk-wachsen { from { opacity: 0.3; transform: scaleX(0.04); } to { opacity: 1; transform: scaleX(1); } }
@keyframes sf-kb-lk-auf { from { opacity: 0; } to { opacity: 1; } }
@keyframes sf-kb-lk-flackern { 0%, 100% { opacity: 0.75; } 41% { opacity: 0.75; } 43% { opacity: 0.66; } 45% { opacity: 0.78; } 72% { opacity: 0.72; } }
@media (prefers-reduced-motion: reduce) {
.sf-kb .sf-kb-lk-on .sf-kb-lk-wachsen, .sf-kb .sf-kb-lk-on .sf-kb-lk-dinge, .sf-kb .sf-kb-lk-on .sf-kb-lk-schwellen-linien, .sf-kb .sf-kb-lk-on .sf-kb-lk-flaggen, .sf-kb .sf-kb-lk-on .sf-kb-lk-flackern { animation: none; }
.sf-kb .sf-kb-lk-chip { transition: none; }
}
.sf-kb .sf-kb-lk-lampen { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
@container sf-lp (min-width: 700px) {
.sf-kb .sf-kb-lk-lampen { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
}
.sf-kb .sf-kb-lk-lampe { display: grid; align-content: start; gap: 10px; padding: 16px 18px 18px; border: 1px solid var(--sf-kb-white-18); border-top: 3px solid var(--lk); border-radius: 16px; background: var(--sf-kb-glass); }
.sf-kb .sf-kb-lk-lampe-kopf { display: flex; align-items: center; gap: 12px; }
.sf-kb .sf-kb-lk-lampe-bild { flex: none; display: grid; place-items: center; width: 58px; height: 58px; overflow: hidden; border-radius: 12px; background: var(--sf-kb-white); }
.sf-kb .sf-kb-lk-lampe-bild img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sf-kb .sf-kb-lk-lampe-kopf p { display: grid; gap: 2px; margin: 0; line-height: 1.2; }
.sf-kb .sf-kb-lk-lampe-kopf small { display: flex; align-items: center; gap: 6px; font-size: var(--sf-size-12); color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-lampe-kopf b { font-size: var(--sf-size-18); font-weight: 800; }
.sf-kb .sf-kb-lk-lampe-weite { display: flex; align-items: baseline; gap: 8px; margin: 2px 0 0; }
.sf-kb .sf-kb-lk-lampe-weite b { font-family: var(--sf-kb-display); font-size: var(--sf-kb-lk-fs-weite); font-weight: 800; line-height: 1; color: var(--lk); }
.sf-kb .sf-kb-lk-lampe-weite span { font-size: var(--sf-size-13); color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-lampe-sicht { margin: 0; font-size: var(--sf-size-13); color: var(--sf-kb-white-80); }
.sf-kb .sf-kb-lk-daten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px 14px; margin: 0; padding-top: 12px; border-top: 1px solid var(--sf-kb-white-18); font-size: var(--sf-size-13); }
.sf-kb .sf-kb-lk-daten div { display: contents; }
.sf-kb .sf-kb-lk-daten dt { color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-daten dd { margin: 0; font-weight: 700; }
.sf-kb .sf-kb-lk-daten small { font-weight: 400; color: var(--sf-kb-white-60); }
.sf-kb .sf-kb-lk-karte { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--lk); font: inherit; font-size: var(--sf-size-14); font-weight: 800; cursor: pointer; }
.sf-kb .sf-kb-lk-merk-titel { margin: 14px 0 0; font-family: var(--sf-kb-display); font-size: var(--sf-kb-fs-h3); font-weight: 800; line-height: 1.05; text-transform: uppercase; color: inherit; }
.sf-kb .sf-kb-lk-merk { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: sf-kb-lk; }
@container sf-lp (min-width: 900px) {
.sf-kb .sf-kb-lk-merk { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-kb .sf-kb-lk-merk li { padding: 18px; border: 1px solid var(--sf-kb-white-18); border-radius: 16px; background: var(--sf-kb-glass); counter-increment: sf-kb-lk; }
.sf-kb .sf-kb-lk-merk li::before { content: counter(sf-kb-lk); display: grid; place-items: center; width: 30px; height: 30px; margin-bottom: 10px; border-radius: 50%; background: var(--sf-kb-brand); color: var(--sf-kb-brand-ink); font-weight: 800; }
.sf-kb .sf-kb-lk-merk b { display: block; margin-bottom: 6px; font-size: var(--sf-size-17); line-height: 1.25; }
.sf-kb .sf-kb-lk-merk p { margin: 0; font-size: var(--sf-size-15); line-height: 1.55; color: var(--sf-kb-white-80); }
.sf-kb .sf-kb-3d-wrap { position: relative; width: 100%; max-width: 520px; pointer-events: auto; }
@container sf-lp (min-width: 980px) {
.sf-kb .sf-kb-3d-wrap { justify-self: end; }
}
.sf-kb .sf-kb-3d { position: relative; aspect-ratio: 4 / 5; border: 1px solid var(--sf-xb-glass-line); border-radius: 22px; overflow: hidden; background: var(--sf-xb-deep); box-shadow: 0 30px 70px var(--sf-xb-shadow-strong); isolation: isolate; }
.sf-kb .sf-kb-3d-bg { position: absolute; inset: -6%; background-image: var(--sf-kb-3d-bild); background-size: cover; background-position: 50% 62%; transform-origin: 50% 60%; will-change: transform; }
.sf-kb .sf-kb-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: pan-y; cursor: grab; opacity: 0; transition: opacity 0.8s ease; }
.sf-kb .sf-kb-3d-bereit .sf-kb-3d-canvas { opacity: 1; }
.sf-kb .sf-kb-3d-canvas:active { cursor: grabbing; }
.sf-kb .sf-kb-3d .sf-ai-mark { z-index: 4; }
.sf-kb .sf-kb-3d-laden { position: absolute; inset: auto 0 46% 0; margin: 0; text-align: center; font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sf-xb-white-80); }
.sf-kb .sf-kb-3d-spot { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none; color: var(--sf-xb-white); font-size: var(--sf-size-12); font-weight: 700; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
.sf-kb .sf-kb-3d-spot.sf-kb-3d-on { opacity: 1; pointer-events: auto; }
.sf-kb .sf-kb-3d-spot.sf-kb-3d-on.sf-kb-3d-dim { opacity: 0.7; }
.sf-kb .sf-kb-3d-dot { display: block; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--sf-xb-yellow); box-shadow: 0 0 0 6px var(--sf-xb-shadow-hot), 0 0 22px var(--sf-xb-yellow); }
.sf-kb .sf-kb-3d-dim .sf-kb-3d-dot { transform: scale(0.75); }
.sf-kb .sf-kb-3d-active .sf-kb-3d-dot { background: var(--sf-xb-white); }
.sf-kb .sf-kb-3d-label { padding: 5px 9px; border: 1px solid var(--sf-xb-glass-line); border-radius: 999px; background: var(--sf-xb-nav-glass); white-space: nowrap; }
.sf-kb .sf-kb-3d-active .sf-kb-3d-label { border-color: var(--sf-xb-yellow); }
.sf-kb .sf-kb-3d-spot:focus-visible .sf-kb-3d-label { outline: 2px solid var(--sf-xb-yellow); outline-offset: 2px; }
.sf-kb .sf-kb-3d-bar { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 3; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.sf-kb .sf-kb-3d-toggle { min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--sf-xb-yellow); color: var(--sf-xb-yellow-ink); font-size: var(--sf-size-14); font-weight: 800; cursor: pointer; box-shadow: 0 10px 28px var(--sf-xb-shadow-strong); }
.sf-kb .sf-kb-3d-toggle:focus-visible { outline: 2px solid var(--sf-xb-white); outline-offset: 3px; }
.sf-kb .sf-kb-3d-hint { font-size: var(--sf-size-12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-xb-white-80); }
.sf-kb .sf-kb-3d-card { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; display: grid; gap: 10px; padding: 12px; border: 1px solid var(--sf-xb-glass-line); border-radius: 16px; background: var(--sf-xb-nav-glass); color: var(--sf-xb-white); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.sf-kb .sf-kb-3d-tabs { display: flex; gap: 6px; }
.sf-kb .sf-kb-3d-tabs button { flex: 1; min-height: 36px; padding: 0 6px; border: 1px solid var(--sf-xb-glass-line); border-radius: 999px; background: transparent; color: var(--sf-xb-white-80); font-size: var(--sf-size-12); font-weight: 800; cursor: pointer; }
.sf-kb .sf-kb-3d-tabs button[aria-selected="true"] { border-color: var(--sf-xb-yellow); background: var(--sf-xb-yellow); color: var(--sf-xb-yellow-ink); }
.sf-kb .sf-kb-3d-tabs .sf-kb-3d-x { flex: none; width: 36px; padding: 0; display: grid; place-items: center; }
.sf-kb .sf-kb-3d-tabs button:focus-visible { outline: 2px solid var(--sf-xb-white); outline-offset: 2px; }
.sf-kb .sf-kb-3d-body { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: center; animation: sf-kb-3d-wechsel 0.35s ease; }
@keyframes sf-kb-3d-wechsel { from { opacity: 0; transform: translateY(6px); } }
.sf-kb .sf-kb-3d-body img { width: 72px; height: 72px; border-radius: 10px; object-fit: contain; background: var(--sf-xb-white); }
.sf-kb .sf-kb-3d-body p { margin: 0; }
.sf-kb .sf-kb-3d-marke { font-size: var(--sf-size-12); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-xb-yellow); }
.sf-kb .sf-kb-3d-name { font-size: var(--sf-size-16); font-weight: 800; line-height: 1.2; }
.sf-kb .sf-kb-3d-text { margin-top: 4px; font-size: var(--sf-size-13); line-height: 1.4; color: var(--sf-xb-white-80); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sf-kb .sf-kb-3d-shop { display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 999px; background: var(--sf-xb-yellow); color: var(--sf-xb-yellow-ink); font-size: var(--sf-size-14); font-weight: 800; text-decoration: none; }
.sf-kb .sf-kb-3d-shop:focus-visible { outline: 2px solid var(--sf-xb-white); outline-offset: 3px; }
.sf-kb .sf-kb-3d-keys { margin: 0; font-size: var(--sf-size-11); letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-xb-white-60); text-align: right; }
@media (pointer: coarse) {
.sf-kb .sf-kb-3d-keys { display: none; }
}
@media (prefers-reduced-motion: reduce) {
.sf-kb .sf-kb-3d-body { animation: none; }
.sf-kb .sf-kb-3d-canvas { transition: none; }
}
/* kaufberater-einstieg.css */
.sf-kb-karte .sf-card-media { position: relative; }
.sf-kb-karte-produkt { background: var(--sf-surface); }
.sf-kb-karte-produkt img { object-fit: contain; padding: 14px; mix-blend-mode: multiply; }
.sf-kb-karte-frage { display: grid; gap: 9px; padding-block: 4px 16px; }
.sf-kb-karte-frage p { margin: 0; font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-ink); }
.sf-kb-antworten { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-kb-antworten a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid var(--sf-line); color: var(--sf-section-accent, var(--sf-blue)); font-size: var(--sf-size-14); font-weight: 700; text-decoration: none; }
.sf-kb-antworten a:hover, .sf-kb-antworten a:focus-visible { border-color: var(--sf-section-accent, var(--sf-blue)); background: var(--sf-section-tint, var(--sf-advice-tint)); }
.sf-kb-felder { display: inline-flex; gap: 2px; }
.sf-kb-felder em { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--sf-line); background: var(--sf-kb-feld, transparent); }
.sf-kb-kasten { margin-block: 28px; padding: 18px 20px; border-top: 3px solid var(--sf-section-accent, var(--sf-advice)); background: var(--sf-section-tint, var(--sf-advice-tint)); display: grid; gap: 10px; }
.sf-kb-kasten .sf-eyebrow { margin: 0; }
.sf-kb-kasten-frage { margin: 0; font-family: var(--sf-display); font-weight: var(--sf-heading-weight); text-transform: var(--sf-heading-case); line-height: var(--sf-heading-leading); font-size: calc(26px * var(--sf-display-scale)); color: var(--sf-ink); }
.sf-kb-kasten .sf-kb-antworten a { background: var(--sf-white); }
.sf-kb-kasten-link { font-size: var(--sf-size-14); font-weight: 700; color: var(--sf-section-accent, var(--sf-blue)); }
/* kaufberater-v3.css */
.sf-kb3 { color: var(--sf-kb3-fg); background: var(--sf-kb3-bg); font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-15); font-weight: 400; line-height: 1.5; letter-spacing: 0; text-align: left; text-transform: none; }
.sf-kb3 :where(p, h1, h2, h3, h4, ul, ol, figure) { margin: 0; }
.sf-kb3 :where(ul, ol) { padding: 0; list-style: none; }
.sf-kb3 :where(li) { margin: 0; line-height: inherit; }
.sf-kb3 :where(button, select) { font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.sf-kb3 :where(button) { background: none; border: 0; border-radius: 0; padding: 0; cursor: pointer; text-align: left; min-height: 0; }
.sf-kb3 :where(a) { color: var(--sf-kb3-blue); font-family: var(--sf-emb-font); text-decoration: none; }
.sf-kb3 :where(a):hover { color: var(--sf-kb3-cta); }
.sf-kb3 :where(img) { max-width: 100%; }
.sf-kb3 :focus-visible { outline: 2px solid var(--sf-kb3-blue); outline-offset: 2px; }
.sf-kb3 [hidden], .sf-kb3[hidden] { display: none !important; }
.sf-kb3:not(.sf-kb3-skript) .sf-kb3-nur-skript { display: none !important; }
.sf-kb3 .sf-kb3-page { max-width: 1240px; margin: 0 auto; padding: 18px 20px 40px; display: flex; flex-direction: column; gap: 38px; }
.sf-kb3 .sf-kb3-h1, .sf-kb3 .sf-kb3-h2, .sf-kb3 .sf-kb3-h3 { margin: 0; font-family: var(--sf-emb-font); letter-spacing: 0; text-transform: none; text-wrap: balance; }
.sf-kb3 .sf-kb3-h1 { font-size: var(--sf-kb3-size-34); font-weight: 300; line-height: 1.15; color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-h2 { font-size: var(--sf-emb-size-26); font-weight: 300; line-height: 1.2; color: var(--sf-kb3-fg); }
.sf-kb3 .sf-kb3-h3 { font-size: var(--sf-emb-size-17); font-weight: 600; line-height: 1.3; color: var(--sf-kb3-ink); margin-bottom: 6px; }
.sf-kb3 .sf-kb3-eyebrow { display: flex; align-items: center; gap: 8px; font-size: var(--sf-emb-size-12); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-sec-h { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 18px; margin-bottom: 16px; }
.sf-kb3 .sf-kb3-sec-h > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-kb3 .sf-kb3-sec-h > p { font-weight: 300; }
.sf-kb3 .sf-kb3-ico { width: 24px; height: 24px; flex: none; }
.sf-kb3 .sf-kb3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 3px; padding: 9px 16px; font-size: var(--sf-emb-size-15); font-weight: 600; line-height: 1.2; min-height: 40px; white-space: nowrap; text-align: center; text-decoration: none; }
.sf-kb3 .sf-kb3-btn-cta { background: var(--sf-kb3-cta); color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-btn-cta:hover { background: var(--sf-kb3-blue); color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-btn-out { border: 1px solid var(--sf-kb3-blue); color: var(--sf-kb3-blue); background: var(--sf-kb3-bg); }
.sf-kb3 .sf-kb3-btn-out:hover { background: var(--sf-kb3-tint); }
.sf-kb3 .sf-kb3-btn-beam { background: var(--sf-kb3-beam); color: var(--sf-kb3-beam-ink); }
.sf-kb3 .sf-kb3-btn-beam:hover { background: var(--sf-kb3-beam-hover); color: var(--sf-kb3-beam-ink); }
.sf-kb3 .sf-kb3-btn-ghost { color: var(--sf-kb3-blue); padding-inline: 6px; }
.sf-kb3 .sf-kb3-btn-sm { min-height: 34px; padding: 6px 12px; font-size: var(--sf-emb-size-14); }
.sf-kb3 .sf-kb3-lnk { color: var(--sf-kb3-blue); font-weight: 600; }
.sf-kb3 .sf-kb3-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.sf-kb3 .sf-kb3-hero-lk { grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); }
.sf-kb3 .sf-kb3-hero-img { position: relative; min-height: 300px; border-radius: 3px; overflow: hidden; background: var(--sf-kb3-hero-bg); display: flex; align-items: flex-end; }
.sf-kb3 .sf-kb3-hero-bild { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.sf-kb3 .sf-kb3-hero-img::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--sf-kb3-hero-veil); }
.sf-kb3 .sf-kb3-hero-img .sf-ai-mark { z-index: 3; }
.sf-kb3 .sf-kb3-hero-in { position: relative; z-index: 2; padding: 28px 30px; display: flex; flex-direction: column; gap: 12px; max-width: 520px; }
.sf-kb3 .sf-kb3-eyebrow-beam { color: var(--sf-kb3-beam); }
.sf-kb3 .sf-kb3-sub { font-size: var(--sf-emb-size-15); font-weight: 300; max-width: 70ch; color: var(--sf-kb3-night-fg); }
.sf-kb3 .sf-kb3-row { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 4px; }
.sf-kb3 .sf-kb3-facts-h { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--sf-kb3-hero-facts); font-size: var(--sf-emb-size-13); }
.sf-kb3 .sf-kb3-facts-h b { color: var(--sf-kb3-on-dark); font-weight: 600; }
.sf-kb3 .sf-kb3-lkt { position: relative; border-radius: 3px; background: var(--sf-kb3-night); color: var(--sf-kb3-night-fg); padding: 20px 20px 18px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.sf-kb3 .sf-kb3-lkt .sf-kb3-eyebrow, .sf-kb3 .sf-kb3-band .sf-kb3-eyebrow { color: var(--sf-kb3-beam); }
.sf-kb3 .sf-kb3-lkt .sf-kb3-h2 { color: var(--sf-kb3-on-dark); font-size: var(--sf-emb-size-22); }
.sf-kb3 .sf-kb3-lkt-text { font-size: var(--sf-emb-size-14); color: var(--sf-kb3-night-mut); }
.sf-kb3 .sf-kb3-lkt-view { position: relative; border-radius: 3px; overflow: hidden; background: var(--sf-kb3-night-deep); border: 1px solid var(--sf-kb3-night-line); aspect-ratio: 1200 / 130; margin-top: auto; cursor: pointer; }
.sf-kb3 .sf-kb3-lkt-view svg, .sf-kb3 .sf-kb3-band-v svg { display: block; width: 100%; height: auto; transition: opacity 0.45s; }
.sf-kb3 .sf-kb3-lk-wechsel svg { opacity: 0; }
.sf-kb3 .sf-kb3-nur-lk { display: none; }
.sf-kb3.sf-kb3-lk-an .sf-kb3-nur-lk { display: block; }
.sf-kb3.sf-kb3-lk-an .sf-kb3-lk-ersatz { display: none; }
.sf-kb3.sf-kb3-lk-an .sf-kb3-lkt-view { aspect-ratio: auto; }
.sf-kb3 .sf-kb3-lk-ersatz { font-size: var(--sf-emb-size-13); color: var(--sf-kb3-night-fg); font-variant-numeric: tabular-nums; }
.sf-kb3 .sf-kb3-lkt-cap .sf-kb3-lk-lbl { margin-top: -2px; }
.sf-kb3 .sf-kb3-lk-lbl { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; font-size: var(--sf-emb-size-12); color: var(--sf-kb3-night-mut); font-variant-numeric: tabular-nums; }
.sf-kb3 .sf-kb3-lk-lbl b { color: var(--sf-kb3-on-dark); font-weight: 600; }
.sf-kb3 .sf-kb3-lkt .sf-kb3-btn { align-self: flex-start; }
.sf-kb3 .sf-kb3-stage { background: var(--sf-kb3-tint); border: 1px solid var(--sf-kb3-tint-line); border-radius: 3px; padding: 18px; display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 16px; align-items: stretch; }
.sf-kb3 .sf-kb3-stage-done { display: block; padding: 12px 16px; }
.sf-kb3 .sf-kb3-fcard { background: var(--sf-kb3-bg); border: 1px solid var(--sf-kb3-line); border-radius: 3px; display: flex; flex-direction: column; min-width: 0; }
.sf-kb3 .sf-kb3-ftop { display: flex; align-items: center; gap: 6px; padding: 12px 16px; border-bottom: 1px solid var(--sf-kb3-line); overflow-x: auto; scrollbar-width: none; }
.sf-kb3 .sf-kb3-dotwrap { display: flex; align-items: center; gap: 6px; flex: none; }
.sf-kb3 .sf-kb3-sep { flex: none; width: 14px; border-top: 1px solid var(--sf-kb3-line); }
.sf-kb3 .sf-kb3-dot { display: flex; align-items: center; gap: 7px; font-size: var(--sf-emb-size-13); color: var(--sf-kb3-mute); white-space: nowrap; padding: 3px 6px; border-radius: 3px; }
.sf-kb3 .sf-kb3-dot:disabled { cursor: default; }
.sf-kb3 .sf-kb3-dot em { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--sf-kb3-line); display: grid; place-items: center; font-style: normal; font-size: var(--sf-emb-size-12); font-weight: 700; }
.sf-kb3 .sf-kb3-dot-on { color: var(--sf-kb3-ink); font-weight: 600; }
.sf-kb3 .sf-kb3-dot-on em { background: var(--sf-kb3-blue); border-color: var(--sf-kb3-blue); color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-dot-ok { color: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-dot-ok em { border-color: var(--sf-kb3-blue); color: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-dot-ok:hover { background: var(--sf-kb3-tint); }
.sf-kb3 .sf-kb3-fbody { padding: 18px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.sf-kb3 .sf-kb3-fq { font-size: var(--sf-emb-size-22); font-weight: 300; line-height: 1.3; color: var(--sf-kb3-ink); margin-bottom: 14px; }
.sf-kb3 .sf-kb3-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sf-kb3 .sf-kb3-opt { display: flex; align-items: center; gap: 12px; border: 1px solid var(--sf-kb3-line); border-radius: 3px; background: var(--sf-kb3-bg); padding: 12px 14px; min-height: 64px; color: var(--sf-kb3-blue); transition: border-color 0.15s, box-shadow 0.15s; }
.sf-kb3 .sf-kb3-opt:hover { border-color: var(--sf-kb3-blue); box-shadow: var(--sf-kb3-shadow-opt); }
.sf-kb3 .sf-kb3-opt-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.sf-kb3 .sf-kb3-opt b { font-weight: 600; color: var(--sf-kb3-ink); }
.sf-kb3 .sf-kb3-opt small { font-size: var(--sf-emb-size-13); color: var(--sf-kb3-fg); font-weight: 300; }
.sf-kb3 .sf-kb3-opt[aria-pressed="true"] { background: var(--sf-kb3-blue); border-color: var(--sf-kb3-blue); color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-opt[aria-pressed="true"] b, .sf-kb3 .sf-kb3-opt[aria-pressed="true"] small { color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-felder { display: flex; gap: 3px; flex: none; }
.sf-kb3 .sf-kb3-feld { width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--sf-kb3-line); background: var(--sf-kb3-feld); }
.sf-kb3 .sf-kb3-fnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; font-size: var(--sf-emb-size-14); }
.sf-kb3 .sf-kb3-hint { color: var(--sf-kb3-mute); font-weight: 300; margin-left: auto; }
.sf-kb3 .sf-kb3-live { background: var(--sf-kb3-bg); border: 1px solid var(--sf-kb3-line); border-radius: 3px; padding: 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sf-kb3 .sf-kb3-live-text { font-size: var(--sf-emb-size-13); font-weight: 300; }
.sf-kb3 .sf-kb3-thumbs { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 5px; }
.sf-kb3 .sf-kb3-thumb { aspect-ratio: 1; border: 1px solid var(--sf-kb3-line); border-radius: 3px; display: grid; place-items: center; background: var(--sf-kb3-bg); transition: opacity 0.35s, filter 0.35s; }
.sf-kb3 .sf-kb3-thumb img { width: 84%; height: 84%; object-fit: contain; }
.sf-kb3 .sf-kb3-raus { opacity: 0.22; filter: grayscale(1); }
.sf-kb3 .sf-kb3-fsum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.sf-kb3 .sf-kb3-fsum > b { color: var(--sf-kb3-ink); font-weight: 600; margin-right: 4px; }
.sf-kb3 .sf-kb3-chips { display: contents; }
.sf-kb3 .sf-kb3-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--sf-kb3-tint-line); border-radius: 999px; padding: 4px 12px; font-size: var(--sf-emb-size-14); color: var(--sf-kb3-ink); background: var(--sf-kb3-bg); }
.sf-kb3 .sf-kb3-chip:hover { border-color: var(--sf-kb3-blue); color: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-chip-edit { font-size: var(--sf-emb-size-12); color: var(--sf-kb3-mute); }
.sf-kb3 .sf-kb3-erg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sf-kb3 .sf-kb3-ehrlich { max-width: 76ch; margin: -4px 0 16px; padding: 10px 14px; border-left: 3px solid var(--sf-kb3-blue); background: var(--sf-kb3-soft); color: var(--sf-kb3-ink); }
.sf-kb3 .sf-kb3-ehrlich[hidden] { display: none; }
.sf-kb3 .sf-kb3-kompromisse { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--sf-kb3-line); }
.sf-kb3 .sf-kb3-kompromisse[hidden] { display: none; }
.sf-kb3 .sf-kb3-kompromisse > p { max-width: 76ch; margin: 8px 0 16px; color: var(--sf-kb3-mute); }
.sf-kb3 .sf-kb3-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--sf-kb3-line); border-radius: 3px; background: var(--sf-kb3-bg); min-width: 0; transition: box-shadow 0.2s, border-color 0.2s; }
.sf-kb3 .sf-kb3-card:hover { border-color: var(--sf-kb3-line-hover); box-shadow: var(--sf-kb3-shadow-card); }
.sf-kb3 .sf-kb3-card-top, .sf-kb3 .sf-kb3-card-top:hover { border-color: var(--sf-kb3-buy); box-shadow: 0 0 0 1px var(--sf-kb3-buy); }
.sf-kb3 .sf-kb3-role { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: var(--sf-emb-size-12); font-weight: 700; color: var(--sf-kb3-ink); background: var(--sf-kb3-panel); border: 1px solid var(--sf-kb3-line); border-radius: 999px; padding: 2px 10px; max-width: calc(100% - 24px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-kb3 .sf-kb3-role:empty { display: none; }
.sf-kb3 .sf-kb3-card-top .sf-kb3-role { background: var(--sf-kb3-buy); border-color: var(--sf-kb3-buy); color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-c-img { display: grid; min-width: 0; width: 100%; place-items: center; aspect-ratio: 4 / 3; padding: 30px 14px 0; background: linear-gradient(180deg, var(--sf-kb3-soft), var(--sf-kb3-bg)); }
.sf-kb3 .sf-kb3-c-img img { mix-blend-mode: multiply; max-width: 70%; max-height: 100%; object-fit: contain; transition: transform 0.3s; }
.sf-kb3 .sf-kb3-card:hover .sf-kb3-c-img img { transform: scale(1.04); }
.sf-kb3 .sf-kb3-c-body { display: flex; flex-direction: column; gap: 2px; padding: 8px 16px 16px; text-align: center; flex: 1; }
.sf-kb3 .sf-kb3-sup { font-size: var(--sf-emb-size-14); color: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-nm { font-size: var(--sf-emb-size-17); color: var(--sf-kb3-fg); font-weight: 300; line-height: 1.3; overflow-wrap: anywhere; }
.sf-kb3 .sf-kb3-lab { display: inline-block; font-size: var(--sf-emb-size-12); font-weight: 600; color: var(--sf-kb3-ink); background: var(--sf-kb3-panel); border-radius: 999px; padding: 1px 10px; align-self: center; margin-top: 2px; }
.sf-kb3 .sf-kb3-pr { margin-top: 6px; font-size: var(--sf-emb-size-22); font-weight: 700; color: var(--sf-kb3-blue); font-variant-numeric: tabular-nums; }
.sf-kb3 .sf-kb3-pr:empty { display: none; }
.sf-kb3 .sf-kb3-pr small { font-size: var(--sf-emb-size-14); font-weight: 600; }
.sf-kb3 .sf-kb3-pr-aus-t { font-size: var(--sf-emb-size-14); font-weight: 600; color: var(--sf-kb3-mute); }
.sf-kb3 .sf-kb3-pr-red { color: var(--sf-kb3-red); }
.sf-kb3 .sf-kb3-hr { width: 100%; border-top: 1px solid var(--sf-kb3-line); margin: 12px 0; }
.sf-kb3 .sf-kb3-facts { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 0; text-align: center; }
.sf-kb3 .sf-kb3-facts > div { flex: 1 1 0; min-width: max-content; padding: 8px 6px 6px; border-radius: 3px; background: var(--sf-kb3-soft); display: flex; flex-direction: column; align-items: center; gap: 1px; }
.sf-kb3 .sf-kb3-facts b { display: block; color: var(--sf-kb3-ink); font-size: var(--sf-emb-size-14); font-weight: 700; line-height: 1.25; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-kb3 .sf-kb3-facts small { display: block; font-size: var(--sf-kb3-size-11); color: var(--sf-kb3-mute); white-space: nowrap; }
.sf-kb3 .sf-kb3-h { display: inline-grid; place-items: center; width: 13px; height: 13px; border-radius: 50%; border: 1px solid currentColor; font-size: var(--sf-kb3-size-11); font-weight: 800; color: var(--sf-kb3-blue); vertical-align: 3px; margin-left: 2px; line-height: 1; text-decoration: none; transform: scale(0.75); }
.sf-kb3 .sf-kb3-why-h { font-size: var(--sf-emb-size-12); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-kb3-mute); text-align: left; margin-bottom: 6px; }
.sf-kb3 .sf-kb3-why { text-align: left; display: flex; flex-direction: column; gap: 5px; font-size: var(--sf-emb-size-14); color: var(--sf-kb3-ink); }
.sf-kb3 .sf-kb3-why li { display: flex; gap: 8px; }
.sf-kb3 .sf-kb3-why li::before { content: "✓"; color: var(--sf-kb3-buy); font-weight: 800; flex: none; }
.sf-kb3 .sf-kb3-why .sf-kb3-no { color: var(--sf-kb3-fg); font-weight: 300; }
.sf-kb3 .sf-kb3-why .sf-kb3-no::before { content: "–"; color: var(--sf-kb3-mute); }
.sf-kb3 .sf-kb3-c-act { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: auto; padding-top: 14px; }
.sf-kb3 .sf-kb3-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.sf-kb3 .sf-kb3-uses { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; min-width: 0; flex: 1; }
.sf-kb3 .sf-kb3-use { display: flex; align-items: center; gap: 8px; border: 1px solid var(--sf-kb3-line); border-radius: 3px; background: var(--sf-kb3-bg); padding: 5px 14px 5px 10px; min-height: 42px; white-space: nowrap; flex: none; color: var(--sf-kb3-blue); font-size: var(--sf-emb-size-14); }
.sf-kb3 .sf-kb3-use b { font-weight: 600; color: var(--sf-kb3-ink); }
.sf-kb3 .sf-kb3-use em { font-style: normal; font-size: var(--sf-emb-size-12); color: var(--sf-kb3-mute); }
.sf-kb3 .sf-kb3-use:hover { border-color: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-use[aria-pressed="true"] { background: var(--sf-kb3-blue); border-color: var(--sf-kb3-blue); color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-use[aria-pressed="true"] b, .sf-kb3 .sf-kb3-use[aria-pressed="true"] em { color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-sort { border: 1px solid var(--sf-kb3-line); border-radius: 3px; padding: 8px 10px; font-size: var(--sf-emb-size-14); background: var(--sf-kb3-bg); color: var(--sf-kb3-ink); height: auto; }
.sf-embed-root .sf-kb3 .sf-kb3-sort { border: 0; }
.sf-kb3 .sf-kb3-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sf-kb3 .sf-kb3-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; border: 1px solid var(--sf-kb3-line); border-radius: 3px; padding: 10px 10px 12px; min-width: 0; text-align: center; color: var(--sf-kb3-fg); background: var(--sf-kb3-bg); font-weight: 300; }
.sf-kb3 .sf-kb3-tile:hover { border-color: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-ti { width: 100%; aspect-ratio: 1 / 1; display: grid; place-items: center; margin-bottom: 6px; }
.sf-kb3 .sf-kb3-ti img { width: 78%; height: 78%; object-fit: contain; }
.sf-kb3 .sf-kb3-tile .sf-kb3-nm { font-size: var(--sf-emb-size-16); }
.sf-kb3 .sf-kb3-mini { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }
.sf-kb3 .sf-kb3-mini span { white-space: nowrap; font-size: var(--sf-emb-size-12); color: var(--sf-kb3-ink); background: var(--sf-kb3-soft); border-radius: 3px; padding: 1px 6px; font-variant-numeric: tabular-nums; }
.sf-kb3 .sf-kb3-tile .sf-kb3-hr { width: 90%; margin: 8px 0 6px; }
.sf-kb3 .sf-kb3-tile .sf-kb3-pr { font-size: var(--sf-kb3-size-20); margin-top: auto; }
.sf-kb3 .sf-kb3-tag-l { position: absolute; top: 12px; left: 12px; z-index: 1; font-size: var(--sf-emb-size-12); font-weight: 700; color: var(--sf-kb3-buy); border: 1px solid var(--sf-kb3-buy); border-radius: 999px; padding: 1px 9px; background: var(--sf-kb3-bg); }
.sf-kb3 .sf-kb3-leer { padding: 30px; text-align: center; border: 1px dashed var(--sf-kb3-line); border-radius: 3px; }
.sf-kb3 .sf-kb3-hn { margin-top: 8px; font-size: var(--sf-emb-size-12); color: var(--sf-kb3-mute); font-weight: 300; }
.sf-kb3 .sf-kb3-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 22px; align-items: center; background: var(--sf-kb3-night); border-radius: 3px; padding: 24px; color: var(--sf-kb3-night-fg); }
.sf-kb3 .sf-kb3-band .sf-kb3-btn { margin-top: 14px; }
.sf-kb3 .sf-kb3-band-v, .sf-kb3 .sf-kb3-band-v [data-sf-kb3-lk-buehne] { display: flex; flex-direction: column; gap: 8px; }
.sf-kb3 .sf-kb3-band-v [data-sf-kb3-lk-buehne] { cursor: pointer; }
.sf-kb3 .sf-kb3-band-v svg { border-radius: 3px; }
.sf-kb3 .sf-kb3-lk-satz { font-size: var(--sf-emb-size-13); color: var(--sf-kb3-night-mut); }
.sf-kb3 .sf-kb3-band .sf-kb3-h2 { color: var(--sf-kb3-on-dark); margin-top: 6px; }
.sf-kb3 .sf-kb3-band-text { margin-top: 8px; font-size: var(--sf-emb-size-14); color: var(--sf-kb3-night-mut); }
.sf-kb3 .sf-kb3-wis { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; }
.sf-kb3 .sf-kb3-more { margin-top: 18px; }
.sf-kb3 .sf-kb3-more ul { margin-top: 6px; display: flex; flex-direction: column; gap: 6px; list-style: none; padding: 0; }
.sf-kb3 .sf-kb3-more-link { font-size: var(--sf-emb-size-15); color: var(--sf-kb3-blue); text-decoration-line: underline; text-underline-offset: 3px; }
.sf-kb3 .sf-kb3-acc { border-top: 1px solid var(--sf-kb3-line); }
.sf-kb3 .sf-kb3-acc-i { border-bottom: 1px solid var(--sf-kb3-line); }
.sf-kb3 .sf-kb3-acc-i > summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 13px 2px; font-size: var(--sf-emb-size-16); color: var(--sf-kb3-blue); cursor: pointer; list-style: none; }
.sf-kb3 .sf-kb3-acc-i > summary::-webkit-details-marker { display: none; }
.sf-kb3 .sf-kb3-acc-i > summary::after { content: "+"; font-size: var(--sf-emb-size-22); line-height: 1; color: var(--sf-kb3-mute); flex: none; }
.sf-kb3 .sf-kb3-acc-i[open] > summary::after { content: "–"; }
.sf-kb3 .sf-kb3-acc-b { padding: 0 2px 16px; font-size: var(--sf-emb-size-15); font-weight: 300; display: flex; flex-direction: column; gap: 10px; }
.sf-kb3 .sf-kb3-tab { overflow-x: auto; }
.sf-kb3 .sf-kb3-acc-b table { border-collapse: collapse; font-size: var(--sf-emb-size-14); width: 100%; }
.sf-kb3 .sf-kb3-acc-b th, .sf-kb3 .sf-kb3-acc-b td { border: 1px solid var(--sf-kb3-line); padding: 6px 8px; text-align: left; vertical-align: top; }
.sf-kb3 .sf-kb3-acc-b th { background: var(--sf-kb3-panel); color: var(--sf-kb3-ink); font-weight: 600; }
.sf-kb3 .sf-kb3-acc-b li { padding-left: 16px; position: relative; }
.sf-kb3 .sf-kb3-acc-b li::before { content: "•"; position: absolute; left: 2px; color: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-shopweiter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; border-top: 1px solid var(--sf-kb3-line); padding-top: 24px; }
.sf-kb3 .sf-kb3-quellen { margin-top: -20px; display: flex; flex-direction: column; gap: 4px; font-size: var(--sf-emb-size-12); font-weight: 300; color: var(--sf-kb3-mute); }
.sf-kb3 .sf-kb3-quellen a { color: inherit; text-decoration: underline; }
.sf-kb3 .sf-kb3-eu { flex: none; min-width: 34px; text-align: center; font-size: var(--sf-emb-size-17); font-weight: 700; letter-spacing: -0.02em; }
.sf-kb3 .sf-kb3-fprev { font-size: var(--sf-emb-size-14); color: var(--sf-kb3-ink); background: var(--sf-kb3-tint); border: 1px solid var(--sf-kb3-tint-line); border-radius: 3px; padding: 8px 12px; margin: -4px 0 12px; }
.sf-kb3 .sf-kb3-knapp { font-style: normal; font-size: var(--sf-emb-size-12); font-weight: 600; color: var(--sf-kb3-warn-ink); margin-top: 2px; }
.sf-kb3 .sf-kb3-opt[aria-pressed="true"] .sf-kb3-knapp { color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-delta { font-size: var(--sf-emb-size-13); color: var(--sf-kb3-fg); font-variant-numeric: tabular-nums; }
.sf-kb3 .sf-kb3-r-tipp .sf-kb3-role { background: var(--sf-kb3-tint); border-color: var(--sf-kb3-tint-line); color: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-r-mehr .sf-kb3-role, .sf-kb3 .sf-kb3-r-rahmen .sf-kb3-role { background: var(--sf-kb3-warn-bg); border-color: var(--sf-kb3-warn-line); color: var(--sf-kb3-warn-ink); }
.sf-kb3 .sf-kb3-konf { background: var(--sf-kb3-warn-bg); border: 1px solid var(--sf-kb3-warn-line); border-radius: 3px; padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.sf-kb3 .sf-kb3-konf .sf-kb3-konf-eyebrow { color: var(--sf-kb3-warn-ink); }
.sf-kb3 .sf-kb3-konf .sf-kb3-h3 { font-size: var(--sf-emb-size-22); font-weight: 300; color: var(--sf-kb3-ink); }
.sf-kb3 .sf-kb3-konf > p { font-weight: 300; }
.sf-kb3 .sf-kb3-konf-opt { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 6px; max-width: 720px; }
.sf-kb3 .sf-kb3-tile.sf-kb3-blass .sf-kb3-ti, .sf-kb3 .sf-kb3-tile.sf-kb3-blass .sf-kb3-mini { opacity: 0.45; filter: grayscale(1); }
@container sf-lp (max-width: 700px) {
.sf-kb3 .sf-kb3-ftop { gap: 10px; padding: 12px; }
.sf-kb3 .sf-kb3-sep { display: none; }
.sf-kb3 .sf-kb3-konf { padding: 16px; }
.sf-kb3 .sf-kb3-konf-opt { grid-template-columns: minmax(0, 1fr); }
}
.sf-kb3 .sf-kb3-c-act { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.sf-kb3 .sf-kb3-c-foot { display: flex; justify-content: center; margin-top: 10px; }
.sf-kb3 .sf-kb3-cmp { display: inline-flex; align-items: center; gap: 8px; font-size: var(--sf-emb-size-13); color: var(--sf-kb3-fg); cursor: pointer; user-select: none; }
.sf-kb3 .sf-kb3-cmp input { width: 16px; height: 16px; margin: 0; accent-color: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-t-act { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; width: 100%; margin-top: 10px; font-size: var(--sf-emb-size-13); }
.sf-kb3 .sf-kb3-t-act .sf-kb3-lnk { font-size: var(--sf-emb-size-13); }
.sf-kb3 .sf-kb3-cbar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 14px; margin: -20px -20px -40px; padding: 10px 20px; background: var(--sf-kb3-bg); border-top: 2px solid var(--sf-kb3-blue); box-shadow: var(--sf-kb3-shadow-bar); }
.sf-kb3 .sf-kb3-cbar > b { color: var(--sf-kb3-ink); white-space: nowrap; }
.sf-kb3 .sf-kb3-cth { display: flex; gap: 8px; flex: none; }
.sf-kb3 .sf-kb3-cth-i, .sf-kb3 .sf-kb3-cth-leer { position: relative; width: 46px; height: 46px; border: 1px solid var(--sf-kb3-line); border-radius: 3px; display: grid; place-items: center; flex: none; background: var(--sf-kb3-bg); }
.sf-kb3 .sf-kb3-cth-leer { border-style: dashed; }
.sf-kb3 .sf-kb3-cth-i img { max-width: 84%; max-height: 84%; object-fit: contain; }
.sf-kb3 .sf-kb3-cth-x { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%; background: var(--sf-kb3-ink); color: var(--sf-kb3-on-dark); font-size: var(--sf-emb-size-12); line-height: 20px; text-align: center; }
.sf-kb3 .sf-kb3-cmsg { flex: 1; min-width: 0; font-size: var(--sf-emb-size-13); color: var(--sf-kb3-warn-ink); }
.sf-kb3 .sf-kb3-cbar .sf-kb3-btn:disabled { opacity: 0.5; cursor: default; }
.sf-embed-root .sf-kb3 .sf-kb3-cbar { padding-right: var(--sf-kb3-shop-knopf); }
@container sf-lp (max-width: 1024px) {
.sf-embed-root .sf-kb3 .sf-kb3-cbar { bottom: calc(var(--sf-kb3-shop-leiste) + env(safe-area-inset-bottom, 0px)); }
}
@container sf-lp (max-width: 480px) {
.sf-embed-root .sf-kb3 .sf-kb3-cbar, .sf-embed-root .sf-kb3 .sf-kb3-cth { gap: 6px; }
.sf-embed-root .sf-kb3 .sf-kb3-cth-leer, .sf-embed-root .sf-kb3 .sf-kb3-cmsg:empty { display: none; }
.sf-embed-root .sf-kb3 .sf-kb3-cth-i { width: 32px; height: 32px; }
.sf-embed-root .sf-kb3 .sf-kb3-cmsg { position: absolute; left: 0; right: 0; bottom: 100%; padding: 6px 12px; background: var(--sf-kb3-bg); border-top: 1px solid var(--sf-kb3-line); }
.sf-embed-root .sf-kb3 .sf-kb3-cbar .sf-kb3-btn { flex: none; padding-inline: 10px; }
}
.sf-kb3.sf-kb3-schicht { position: fixed; inset: 0; z-index: var(--sf-kb3-z-schicht); display: flex; align-items: center; justify-content: center; padding: 20px; padding-right: calc(20px + var(--sf-kb3-rand, 0px)); background: transparent; box-sizing: border-box; }
.sf-kb3.sf-kb3-schicht *, .sf-kb3.sf-kb3-schicht *::before, .sf-kb3.sf-kb3-schicht *::after { box-sizing: border-box; }
.sf-kb3 .sf-kb3-scrim { position: absolute; inset: 0; background: var(--sf-kb3-scrim); }
.sf-kb3 .sf-kb3-dlg { position: relative; width: min(920px, 100%); max-height: 100%; overflow: auto; overscroll-behavior: contain; background: var(--sf-kb3-bg); border-radius: 3px; box-shadow: var(--sf-kb3-shadow-dlg); }
.sf-kb3 .sf-kb3-dlg:focus { outline: none; }
.sf-kb3 .sf-kb3-dlg-qv { width: min(1000px, 100%); }
.sf-kb3 .sf-kb3-dlg-top { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 18px; border-bottom: 1px solid var(--sf-kb3-line); background: var(--sf-kb3-bg); }
.sf-kb3 .sf-kb3-dlg-h { font-size: var(--sf-emb-size-17); font-weight: 600; color: var(--sf-kb3-ink); }
.sf-kb3 .sf-kb3-x { font-size: var(--sf-emb-size-26); line-height: 1; padding: 2px 8px; color: var(--sf-kb3-fg); }
.sf-kb3 .sf-kb3-qv-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
.sf-kb3 .sf-kb3-qv-l { display: flex; flex-direction: column; gap: 14px; padding: 22px; background: var(--sf-kb3-soft); border-right: 1px solid var(--sf-kb3-line); }
.sf-kb3 .sf-kb3-qv-img { display: grid; place-items: center; aspect-ratio: 1 / 1; background: var(--sf-kb3-bg); border: 1px solid var(--sf-kb3-line); border-radius: 3px; }
.sf-kb3 .sf-kb3-qv-img img { width: 78%; height: 78%; object-fit: contain; }
.sf-kb3 .sf-kb3-qv-l .sf-kb3-facts { margin: 0; }
.sf-kb3 .sf-kb3-qv-l .sf-kb3-facts > div { background: var(--sf-kb3-bg); border: 1px solid var(--sf-kb3-line); }
.sf-kb3 .sf-kb3-qv-r { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px 24px; }
.sf-kb3 .sf-kb3-qv-nm { font-size: var(--sf-emb-size-24); font-weight: 300; line-height: 1.25; color: var(--sf-kb3-fg); overflow-wrap: anywhere; }
.sf-kb3 .sf-kb3-qv-r .sf-kb3-lab { margin-top: 6px; }
.sf-kb3 .sf-kb3-qv-r > .sf-kb3-pr { margin: 0; font-size: var(--sf-emb-size-28); }
.sf-kb3 .sf-kb3-qv-act { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 320px; }
.sf-kb3 .sf-kb3-box { border-radius: 3px; padding: 12px 14px; border: 1px solid var(--sf-kb3-ok-line); background: var(--sf-kb3-ok-bg); }
.sf-kb3 .sf-kb3-box-warn { border-color: var(--sf-kb3-warn-line); background: var(--sf-kb3-warn-bg); color: var(--sf-kb3-ink); font-size: var(--sf-emb-size-14); }
.sf-kb3 .sf-kb3-box h3, .sf-kb3 .sf-kb3-qv-sec h3 { margin-bottom: 8px; font-size: var(--sf-emb-size-12); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-kb3-mute); }
.sf-kb3 .sf-kb3-qv-sec > p { font-weight: 300; }
.sf-kb3 .sf-kb3-qv-sec .sf-kb3-hn { margin-top: 6px; }
.sf-kb3 .sf-kb3-stt { width: 100%; border-collapse: collapse; font-size: var(--sf-emb-size-13); }
.sf-kb3 .sf-kb3-stt th, .sf-kb3 .sf-kb3-stt td { padding: 6px 8px; border-bottom: 1px solid var(--sf-kb3-line); text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sf-kb3 .sf-kb3-stt th { background: var(--sf-kb3-soft); color: var(--sf-kb3-ink); font-weight: 600; }
.sf-kb3 .sf-kb3-stt .sf-kb3-rot td:first-child { color: var(--sf-kb3-red); }
.sf-kb3 .sf-kb3-stt em { margin-left: 6px; padding: 0 5px; border-radius: 3px; font-style: normal; font-size: var(--sf-kb3-size-11); font-weight: 700; color: var(--sf-kb3-warn-ink); background: var(--sf-kb3-warn-bg); }
.sf-kb3 .sf-kb3-dl { margin: 0; font-size: var(--sf-emb-size-14); }
.sf-kb3 .sf-kb3-dl > div { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--sf-kb3-line); }
.sf-kb3 .sf-kb3-dl dt { color: var(--sf-kb3-fg); font-weight: 300; }
.sf-kb3 .sf-kb3-dl dd { margin: 0; color: var(--sf-kb3-ink); font-weight: 600; }
.sf-kb3 .sf-kb3-dl small, .sf-kb3 .sf-kb3-vt td small, .sf-kb3 .sf-kb3-vt th small { display: block; font-size: var(--sf-emb-size-12); font-weight: 300; color: var(--sf-kb3-mute); }
.sf-kb3 .sf-kb3-vt { width: 100%; border-collapse: collapse; font-size: var(--sf-emb-size-14); }
.sf-kb3 .sf-kb3-vt th, .sf-kb3 .sf-kb3-vt td { padding: 9px 12px; border-bottom: 1px solid var(--sf-kb3-line); text-align: center; vertical-align: top; }
.sf-kb3 .sf-kb3-vt tbody th { width: 150px; text-align: left; font-weight: 400; color: var(--sf-kb3-fg); }
.sf-kb3 .sf-kb3-vt td { color: var(--sf-kb3-ink); font-weight: 600; }
.sf-kb3 .sf-kb3-vh th { vertical-align: bottom; font-weight: 400; }
.sf-kb3 .sf-kb3-vh img { display: block; width: 90px; height: 90px; margin: 0 auto 6px; object-fit: contain; }
.sf-kb3 .sf-kb3-vh .sf-kb3-sup { display: block; }
.sf-kb3 .sf-kb3-vh b { display: block; font-weight: 600; color: var(--sf-kb3-ink); }
.sf-kb3 .sf-kb3-vt .sf-kb3-pr { margin: 0; font-size: var(--sf-emb-size-17); }
.sf-kb3 .sf-kb3-vt td.sf-kb3-best { color: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-vt td.sf-kb3-best::after, .sf-kb3 .sf-kb3-best-zeichen { content: " ●"; font-size: var(--sf-kb3-size-11); color: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-vt .sf-kb3-btn { white-space: nowrap; }
.sf-kb3 .sf-kb3-vt-legende { padding: 10px 14px 14px; }
@container sf-lp (max-width: 860px) {
.sf-kb3 .sf-kb3-qv-grid { grid-template-columns: minmax(0, 1fr); }
.sf-kb3 .sf-kb3-qv-l { border-right: 0; border-bottom: 1px solid var(--sf-kb3-line); }
.sf-kb3 .sf-kb3-qv-img { width: 100%; max-width: 260px; margin: 0 auto; }
}
@container sf-lp (max-width: 640px) {
.sf-kb3.sf-kb3-schicht { padding: 0; }
.sf-kb3 .sf-kb3-dlg, .sf-kb3 .sf-kb3-dlg-qv { width: 100%; height: 100%; border-radius: 0; }
.sf-kb3 .sf-kb3-qv-l, .sf-kb3 .sf-kb3-qv-r { padding: 16px; }
.sf-kb3 .sf-kb3-vt tbody th { width: 96px; position: sticky; left: 0; z-index: 1; background: var(--sf-kb3-bg); }
.sf-kb3 .sf-kb3-vt th, .sf-kb3 .sf-kb3-vt td { padding: 8px 6px; }
.sf-kb3 .sf-kb3-vh img { width: 64px; height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
.sf-kb3 .sf-kb3-lkt-view svg, .sf-kb3 .sf-kb3-band-v svg, .sf-kb3 .sf-kb3-opt, .sf-kb3 .sf-kb3-thumb, .sf-kb3 .sf-kb3-card, .sf-kb3 .sf-kb3-c-img img { transition: none; }
.sf-kb3 .sf-kb3-card:hover .sf-kb3-c-img img { transform: none; }
}
@container sf-lp (max-width: 980px) {
.sf-kb3 .sf-kb3-hero-lk, .sf-kb3 .sf-kb3-stage { grid-template-columns: minmax(0, 1fr); }
.sf-kb3 .sf-kb3-live { flex-direction: row; flex-wrap: wrap; align-items: center; }
.sf-kb3 .sf-kb3-live .sf-kb3-thumbs { grid-template-columns: repeat(8, minmax(0, 1fr)); flex: 1 1 100%; }
.sf-kb3 .sf-kb3-erg { grid-template-columns: minmax(0, 1fr); }
.sf-kb3 .sf-kb3-card { display: grid; grid-template-columns: 170px minmax(0, 1fr); }
.sf-kb3 .sf-kb3-c-img { aspect-ratio: auto; padding: 44px 12px 14px; align-self: stretch; }
.sf-kb3 .sf-kb3-c-img img { max-width: 100%; }
.sf-kb3 .sf-kb3-c-body { text-align: left; padding: 12px 14px 14px; }
.sf-kb3 .sf-kb3-lab { align-self: flex-start; }
.sf-kb3 .sf-kb3-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-kb3 .sf-kb3-wis { grid-template-columns: minmax(0, 1fr); }
}
@container sf-lp (max-width: 700px) {
.sf-kb3 .sf-kb3-page { padding: 0 14px 30px; gap: 30px; }
.sf-kb3 .sf-kb3-h1 { font-size: var(--sf-emb-size-26); }
.sf-kb3 .sf-kb3-h2 { font-size: var(--sf-emb-size-22); }
.sf-kb3 .sf-kb3-hero { margin-inline: -14px; gap: 0; }
.sf-kb3 .sf-kb3-hero-img { min-height: 340px; border-radius: 0; }
.sf-kb3 .sf-kb3-hero-img::before { background: var(--sf-kb3-hero-veil-schmal); }
.sf-kb3 .sf-kb3-hero-in { padding: 20px 16px; }
.sf-kb3 .sf-kb3-lkt { border-radius: 0; padding: 16px; }
.sf-kb3 .sf-kb3-stage { margin-inline: -14px; border-radius: 0; border-inline: 0; padding: 14px; }
.sf-kb3 .sf-kb3-opts { grid-template-columns: minmax(0, 1fr); }
.sf-kb3 .sf-kb3-opt { min-height: 54px; padding: 10px 12px; }
.sf-kb3 .sf-kb3-fq { font-size: var(--sf-emb-size-19); }
.sf-kb3 .sf-kb3-dot span { display: none; }
.sf-kb3 .sf-kb3-dot-on span { display: inline; }
.sf-kb3 .sf-kb3-live .sf-kb3-thumbs { gap: 3px; }
.sf-kb3 .sf-kb3-card { grid-template-columns: minmax(0, 1fr); }
.sf-kb3 .sf-kb3-c-img { aspect-ratio: 16 / 10; padding: 36px 14px 0; }
.sf-kb3 .sf-kb3-c-img img { max-width: 60%; }
.sf-kb3 .sf-kb3-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-kb3 .sf-kb3-band { grid-template-columns: minmax(0, 1fr); margin-inline: -14px; border-radius: 0; padding: 20px 16px; }
.sf-kb3 .sf-kb3-sort { width: 100%; }
.sf-kb3 .sf-kb3-cbar { gap: 8px; margin: -16px -14px -30px; padding: 8px 12px; }
.sf-kb3 .sf-kb3-cbar > b { display: none; }
.sf-kb3 .sf-kb3-cth-i, .sf-kb3 .sf-kb3-cth-leer { width: 40px; height: 40px; }
}
.sf-kb3.sf-kb3-schicht:has(.sf-kb3-dlg-lk) { padding: 0; }
.sf-kb3 .sf-kb3-dlg-lk { width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; border-radius: 0; background: var(--sf-kb3-night); color: var(--sf-kb3-night-fg); }
.sf-kb3 .sf-kb3-dlg-lk .sf-kb3-dlg-top { padding: 12px 20px; background: var(--sf-kb3-night); border-bottom-color: var(--sf-kb3-night-line); }
.sf-kb3 .sf-kb3-dlg-lk .sf-kb3-dlg-h { font-size: var(--sf-kb3-size-20); color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-dlg-lk .sf-kb3-x { color: var(--sf-kb3-night-fg); }
.sf-kb3 .sf-kb3-dlg-lk .sf-kb3-dlg-body { flex: 1; min-height: 0; display: flex; }
.sf-kb3 .sf-kb3-dlg-lk :focus-visible { outline-color: var(--sf-kb3-beam); }
.sf-kb3 .sf-kb3-lk-main { flex: 1; min-height: 0; display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.sf-kb3 .sf-kb3-lk-side { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--sf-kb3-night-line); background: var(--sf-kb3-night-side); }
.sf-kb3 .sf-kb3-lk-side-h { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 8px; font-size: var(--sf-emb-size-13); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-kb3-night-fg); }
.sf-kb3 .sf-kb3-lk-side-h small { font-size: var(--sf-emb-size-12); font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--sf-kb3-night-mut); }
.sf-kb3 .sf-kb3-lk-list { flex: 1; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; }
.sf-kb3 .sf-kb3-lkr { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 8px; border-radius: 3px; border-left: 3px solid transparent; color: var(--sf-kb3-night-fg); }
.sf-kb3 .sf-kb3-lkr:hover { background: var(--sf-kb3-night-2); }
.sf-kb3 .sf-kb3-lkr[aria-pressed="true"] { background: var(--sf-kb3-night-2); border-left-color: var(--sf-kb3-lk-c); }
.sf-kb3 .sf-kb3-lkr-th { position: relative; width: 38px; height: 38px; border-radius: 3px; background: var(--sf-kb3-bg); display: grid; place-items: center; }
.sf-kb3 .sf-kb3-lkr-th img, .sf-kb3 .sf-kb3-lk-sh img { width: 86%; height: 86%; object-fit: contain; }
.sf-kb3 .sf-kb3-lkr-dot { display: none; position: absolute; top: -4px; right: -4px; width: 12px; height: 12px; border-radius: 50%; background: var(--sf-kb3-lk-c); box-shadow: 0 0 0 2px var(--sf-kb3-night-side), 0 0 8px var(--sf-kb3-lk-c); }
.sf-kb3 .sf-kb3-lkr[aria-pressed="true"] .sf-kb3-lkr-dot { display: block; }
.sf-kb3 .sf-kb3-lkr-tx { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sf-kb3 .sf-kb3-lkr-nm { display: flex; justify-content: space-between; gap: 6px; font-size: var(--sf-emb-size-13); line-height: 1.25; }
.sf-kb3 .sf-kb3-lkr-nm span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-kb3 .sf-kb3-lkr-nm em { flex: none; font-style: normal; color: var(--sf-kb3-beam); }
.sf-kb3 .sf-kb3-lkr-bar { display: flex; align-items: center; gap: 8px; font-size: var(--sf-emb-size-12); color: var(--sf-kb3-night-mut); font-variant-numeric: tabular-nums; }
.sf-kb3 .sf-kb3-lkr-bar span { flex: 1; height: 4px; border-radius: 2px; background: var(--sf-kb3-lk-spur); overflow: hidden; }
.sf-kb3 .sf-kb3-lkr-bar b { display: block; height: 100%; border-radius: 2px; background: var(--sf-kb3-lk-fuell); }
.sf-kb3 .sf-kb3-lkr[aria-pressed="true"] .sf-kb3-lkr-bar b { background: var(--sf-kb3-lk-c); }
.sf-kb3 .sf-kb3-lk-side .sf-kb3-hn { margin: 0; padding: 8px 16px 14px; border-top: 1px solid var(--sf-kb3-night-line); color: var(--sf-kb3-night-mut); }
.sf-kb3 .sf-kb3-lk-body { min-width: 0; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px 26px; }
.sf-kb3 .sf-kb3-lk-sub { color: var(--sf-kb3-night-mut); margin-bottom: 14px; max-width: 80ch; }
.sf-kb3 .sf-kb3-lk-dauer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 14px; font-size: var(--sf-emb-size-13); color: var(--sf-kb3-night-mut); }
.sf-kb3 .sf-kb3-seg2 { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--sf-kb3-night-line); border-radius: 3px; overflow: hidden; }
.sf-kb3 .sf-kb3-seg2 button { padding: 6px 12px; font-size: var(--sf-emb-size-13); color: var(--sf-kb3-night-fg); border-right: 1px solid var(--sf-kb3-night-line); }
.sf-kb3 .sf-kb3-seg2 button:last-child { border-right: 0; }
.sf-kb3 .sf-kb3-seg2 button[aria-pressed="true"] { background: var(--sf-kb3-beam); color: var(--sf-kb3-beam-ink); font-weight: 600; }
.sf-kb3 .sf-kb3-lk-slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sf-kb3 .sf-kb3-lk-slot { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 12px 14px; background: var(--sf-kb3-night-2); border: 1px solid var(--sf-kb3-night-line); border-top: 3px solid var(--sf-kb3-lk-c); border-radius: 3px; }
.sf-kb3 .sf-kb3-lk-frei { align-items: center; justify-content: center; min-height: 120px; text-align: center; font-size: var(--sf-emb-size-13); color: var(--sf-kb3-night-mut); border: 1px dashed var(--sf-kb3-night-line); }
.sf-kb3 .sf-kb3-lk-slot.sf-kb3-lk-aus { opacity: 0.6; }
.sf-kb3 .sf-kb3-lk-sx { position: absolute; top: 8px; right: 8px; padding: 2px 4px; font-size: var(--sf-emb-size-19); line-height: 1; color: var(--sf-kb3-night-mut); }
.sf-kb3 .sf-kb3-lk-sx:hover { color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-lk-sh { display: flex; align-items: center; gap: 8px; padding-right: 20px; min-width: 0; }
.sf-kb3 .sf-kb3-lk-sh img { flex: none; width: 34px; height: 34px; padding: 2px; background: var(--sf-kb3-bg); border-radius: 3px; }
.sf-kb3 .sf-kb3-lk-sh > span { min-width: 0; }
.sf-kb3 .sf-kb3-lk-sh b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: var(--sf-emb-size-14); font-weight: 600; line-height: 1.25; color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-lk-sh small, .sf-kb3 .sf-kb3-lk-row { font-size: var(--sf-emb-size-12); color: var(--sf-kb3-night-mut); font-variant-numeric: tabular-nums; }
.sf-kb3 .sf-kb3-lk-big { display: flex; align-items: baseline; gap: 8px; margin-top: 2px; }
.sf-kb3 .sf-kb3-lk-big b { flex: none; font-size: var(--sf-emb-size-28); font-weight: 300; line-height: 1; color: var(--sf-kb3-on-dark); font-variant-numeric: tabular-nums; }
.sf-kb3 .sf-kb3-lk-big span { font-size: var(--sf-emb-size-13); line-height: 1.3; color: var(--sf-kb3-night-mut); }
.sf-kb3 .sf-kb3-lk-row { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.sf-kb3 .sf-kb3-lk-row b { font-weight: 600; color: var(--sf-kb3-night-fg); }
.sf-kb3 .sf-kb3-lk-go { align-self: flex-start; margin-top: 2px; font-size: var(--sf-emb-size-13); font-weight: 600; color: var(--sf-kb3-beam); }
.sf-kb3 .sf-kb3-lk-scene { margin-top: 18px; padding: 10px 12px 6px; background: var(--sf-kb3-night-deep); border: 1px solid var(--sf-kb3-night-line); border-radius: 3px; }
.sf-kb3 .sf-kb3-lk-marks, .sf-kb3 .sf-kb3-lk-axis { position: relative; font-size: var(--sf-kb3-size-11); color: var(--sf-kb3-night-mut); font-variant-numeric: tabular-nums; }
.sf-kb3 .sf-kb3-lk-marks { height: 30px; }
.sf-kb3 .sf-kb3-lk-marks span { position: absolute; bottom: 4px; transform: translateX(-50%); white-space: nowrap; }
.sf-kb3 .sf-kb3-lk-marks span::after { content: ""; position: absolute; left: 50%; top: 100%; height: 6px; border-left: 1px solid var(--sf-kb3-lk-strich); }
.sf-kb3 .sf-kb3-lk-ln { position: relative; margin-top: 6px; overflow: hidden; border-left: 3px solid var(--sf-kb3-lk-c); border-radius: 2px; }
.sf-kb3 .sf-kb3-lk-ln svg { display: block; width: 100%; height: auto; }
.sf-kb3 .sf-kb3-lk-tag { position: absolute; top: 6px; left: 8px; z-index: 1; display: flex; align-items: center; gap: 5px; max-width: calc(100% - 16px); padding: 1px 7px; border-radius: 3px; background: var(--sf-kb3-lk-tag); font-size: var(--sf-kb3-size-11); font-weight: 600; color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-lk-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sf-kb3-lk-c); }
.sf-kb3 .sf-kb3-lk-leer { height: 60px; background: var(--sf-kb3-lk-leer); }
.sf-kb3 .sf-kb3-lk-axis { height: 22px; margin-top: 6px; }
.sf-kb3 .sf-kb3-lk-axis span { position: absolute; top: 4px; transform: translateX(-50%); }
.sf-kb3 .sf-kb3-lk-axis span::before { content: ""; position: absolute; left: 50%; top: -5px; height: 4px; border-left: 1px solid var(--sf-kb3-lk-achse); }
.sf-kb3 .sf-kb3-lk-msg { min-height: 1em; margin-top: 8px; font-size: var(--sf-emb-size-13); color: var(--sf-kb3-beam); }
.sf-kb3 .sf-kb3-lk-leg { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; font-size: var(--sf-emb-size-12); color: var(--sf-kb3-night-mut); }
.sf-kb3 .sf-kb3-lk-strich { display: inline-block; width: 14px; margin-right: 6px; vertical-align: middle; border-top: 2px solid var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-lk-s1 { border-top-style: dashed; opacity: 0.7; }
.sf-kb3 .sf-kb3-lk-s2 { border-top-style: dashed; opacity: 0.4; }
.sf-kb3 .sf-kb3-lk-how { margin-top: 16px; padding-top: 4px; border-top: 1px solid var(--sf-kb3-night-line); }
.sf-kb3 .sf-kb3-lk-how summary { display: flex; justify-content: space-between; padding: 10px 0; list-style: none; cursor: pointer; font-size: var(--sf-emb-size-14); font-weight: 600; color: var(--sf-kb3-night-fg); }
.sf-kb3 .sf-kb3-lk-how summary::-webkit-details-marker { display: none; }
.sf-kb3 .sf-kb3-lk-how summary::after { content: "+"; font-size: var(--sf-kb3-size-20); line-height: 1; color: var(--sf-kb3-night-mut); }
.sf-kb3 .sf-kb3-lk-how[open] summary::after { content: "–"; }
.sf-kb3 .sf-kb3-lk-merk { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sf-kb3 .sf-kb3-lk-merk p { padding: 12px 14px; background: var(--sf-kb3-night-2); border: 1px solid var(--sf-kb3-night-line); border-radius: 3px; font-size: var(--sf-emb-size-13); color: var(--sf-kb3-night-mut); }
.sf-kb3 .sf-kb3-lk-merk b { display: block; margin-bottom: 4px; font-size: var(--sf-emb-size-14); color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-lk-how .sf-kb3-hn { color: var(--sf-kb3-night-mut); }
.sf-kb3 .sf-kb3-vt-lk { margin: 0 14px 14px; }
@container sf-lp (max-width: 860px) {
.sf-kb3 .sf-kb3-lk-main { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.sf-kb3 .sf-kb3-lk-side { border-right: 0; border-bottom: 1px solid var(--sf-kb3-night-line); }
.sf-kb3 .sf-kb3-lk-side-h { padding: 10px 14px 6px; }
.sf-kb3 .sf-kb3-lk-list { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0 10px 10px; scrollbar-width: none; }
.sf-kb3 .sf-kb3-lkr { flex: none; width: 210px; }
.sf-kb3 .sf-kb3-lk-side .sf-kb3-hn { display: none; }
.sf-kb3 .sf-kb3-lk-merk { grid-template-columns: minmax(0, 1fr); }
}
@container sf-lp (max-width: 640px) {
.sf-kb3 .sf-kb3-lk-body { padding: 14px 14px 22px; }
.sf-kb3 .sf-kb3-lk-slots { grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sf-kb3 .sf-kb3-lk-slot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px; padding: 10px 12px; }
.sf-kb3 .sf-kb3-lk-frei { display: flex; min-height: 48px; }
.sf-kb3 .sf-kb3-lk-big { grid-column: 2; grid-row: 1 / span 2; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.sf-kb3 .sf-kb3-lk-big b { font-size: var(--sf-emb-size-24); }
.sf-kb3 .sf-kb3-lk-sx { position: static; grid-column: 2; grid-row: 3; justify-self: end; }
.sf-kb3 .sf-kb3-lk-sh { padding-right: 0; }
.sf-kb3 .sf-kb3-lk-scene { padding: 8px 8px 4px; }
}
.sf-kb3 .sf-kb3-gs { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: stretch; margin-top: 18px; border: 2px solid var(--sf-kb3-red); border-radius: 3px; overflow: hidden; background: var(--sf-kb3-bg); }
.sf-kb3 .sf-kb3-gs-l { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; grid-row: span 2; min-width: 150px; padding: 16px 26px; background: var(--sf-kb3-red); color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-gs-l b { font-size: var(--sf-kb3-size-40); font-weight: 800; line-height: 1; white-space: nowrap; }
.sf-kb3 .sf-kb3-gs-l span { font-size: var(--sf-emb-size-13); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; }
.sf-kb3 .sf-kb3-gs-l::after { content: ""; position: absolute; top: 0; bottom: 0; right: -9px; width: 18px; background: radial-gradient(circle at 9px 9px, var(--sf-kb3-bg) 6px, transparent 6.5px) 0 0 / 18px 18px repeat-y; }
.sf-kb3 .sf-kb3-gs-m { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-width: 0; padding: 14px 22px 14px 30px; }
.sf-kb3 .sf-kb3-gs-m .sf-kb3-h3 { font-size: var(--sf-emb-size-19); font-weight: 600; color: var(--sf-kb3-ink); }
.sf-kb3 .sf-kb3-gs-m p { font-size: var(--sf-emb-size-13); font-weight: 300; }
.sf-kb3 .sf-kb3-gs-m .sf-kb3-gs-bis { font-weight: 600; color: var(--sf-kb3-ink); }
.sf-kb3 .sf-kb3-gs-r { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 20px; }
.sf-kb3 .sf-kb3-gs-code { padding: 6px 14px; border: 2px dashed var(--sf-kb3-red); border-radius: 3px; background: var(--sf-kb3-red-bg); color: var(--sf-kb3-red); font-family: var(--sf-kb3-mono); font-size: var(--sf-emb-size-22); font-weight: 700; letter-spacing: 0.12em; user-select: all; }
.sf-kb3 .sf-kb3-btn-red { background: var(--sf-kb3-red); color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-btn-red:hover { background: var(--sf-kb3-red-d); color: var(--sf-kb3-on-dark); }
.sf-kb3 .sf-kb3-gs-msg { font-size: var(--sf-emb-size-13); color: var(--sf-kb3-red-d); }
.sf-kb3 .sf-kb3-gs > .sf-kb3-gs-msg { grid-column: 2 / -1; padding: 0 20px 12px 30px; text-align: right; }
.sf-kb3 .sf-kb3-gs-msg:empty { display: none; }
.sf-kb3 .sf-kb3-code-pr { display: block; font-size: var(--sf-emb-size-13); font-weight: 600; color: var(--sf-kb3-red); font-variant-numeric: tabular-nums; }
.sf-kb3 .sf-kb3-code-pr b { margin-right: 2px; padding: 0 5px; border: 1px dashed var(--sf-kb3-red); border-radius: 3px; letter-spacing: 0.06em; }
.sf-kb3 .sf-kb3-gs-zeile { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 6px; padding: 8px 12px; border: 1px solid var(--sf-kb3-red); border-radius: 3px; background: var(--sf-kb3-red-bg); }
.sf-kb3 .sf-kb3-gs-zeile .sf-kb3-code-pr { display: inline; }
.sf-kb3 .sf-kb3-gs-zeile .sf-kb3-gs-msg { flex-basis: 100%; text-align: left; }
@container sf-lp (max-width: 700px) {
.sf-kb3 .sf-kb3-gs { grid-template-columns: auto minmax(0, 1fr); }
.sf-kb3 .sf-kb3-gs-l { grid-row: auto; min-width: 0; padding: 14px 18px; }
.sf-kb3 .sf-kb3-gs-l b { font-size: var(--sf-kb3-size-34); }
.sf-kb3 .sf-kb3-gs-r { grid-column: 1 / -1; justify-content: flex-start; border-top: 1px dashed var(--sf-kb3-red); padding: 12px 16px; }
.sf-kb3 .sf-kb3-gs > .sf-kb3-gs-msg { grid-column: 1 / -1; padding: 0 16px 12px; text-align: left; }
}
@container sf-lp (max-width: 420px) {
.sf-kb3 .sf-kb3-gs { grid-template-columns: minmax(0, 1fr); }
.sf-kb3 .sf-kb3-gs-l { flex-direction: row; gap: 10px; justify-content: flex-start; }
.sf-kb3 .sf-kb3-gs-l::after { display: none; }
.sf-kb3 .sf-kb3-gs-m { padding: 12px 16px; }
.sf-kb3 .sf-kb3-gs-code { font-size: var(--sf-emb-size-19); }
}
.sf-kb3 .sf-kb3-btn, .sf-kb3 .sf-kb3-use, .sf-kb3 .sf-kb3-dot { min-height: 44px; }
.sf-kb3 .sf-kb3-nm, .sf-kb3 .sf-kb3-lnk, .sf-kb3 .sf-kb3-cmp { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
@container sf-lp (max-width: 560px) {
.sf-kb3 .sf-kb3-ftop { gap: 2px; }
}
.sf-kb3 .sf-kb3-gelt { border-radius: 3px; background: var(--sf-kb3-gel-himmel); border: 1px solid var(--sf-kb3-tint-line); padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sf-kb3 .sf-kb3-gelt .sf-kb3-h2 { font-size: var(--sf-emb-size-22); color: var(--sf-kb3-ink); }
.sf-kb3 .sf-kb3-gelt-view { border-radius: 3px; overflow: hidden; border: 1px solid var(--sf-kb3-tint-line); background: var(--sf-kb3-bg); }
.sf-kb3 .sf-kb3-gelt-cap { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--sf-emb-size-13); font-variant-numeric: tabular-nums; }
.sf-kb3 .sf-kb3-gelt-cap b { color: var(--sf-kb3-ink); font-weight: 600; }
.sf-kb3 .sf-kb3-gelt .sf-kb3-btn { align-self: flex-start; margin-top: auto; }
.sf-kb3 .sf-kb3-gel-szene svg { display: block; width: 100%; height: auto; }
.sf-kb3 .sf-kb3-gel-himmel { fill: var(--sf-kb3-gel-himmel); }
.sf-kb3 .sf-kb3-gel-berg { fill: var(--sf-kb3-gel-berg); }
.sf-kb3 .sf-kb3-gel-boden-flach { fill: var(--sf-kb3-gel-gras); }
.sf-kb3 .sf-kb3-gel-boden-wellig { fill: var(--sf-kb3-gel-erde); }
.sf-kb3 .sf-kb3-gel-boden-geroell { fill: var(--sf-kb3-gel-stein); }
.sf-kb3 .sf-kb3-gel-boden-firn { fill: var(--sf-kb3-gel-schnee); }
.sf-kb3 .sf-kb3-gel-weg { fill: var(--sf-kb3-gel-weg); }
.sf-kb3 .sf-kb3-gel-kies { fill: var(--sf-kb3-gel-erde-d); }
.sf-kb3 .sf-kb3-gel-wurzel { fill: none; stroke: var(--sf-kb3-gel-erde-d); stroke-width: 4; stroke-linecap: round; }
.sf-kb3 .sf-kb3-gel-stein { fill: var(--sf-kb3-gel-stein); }
.sf-kb3 .sf-kb3-gel-fels { fill: var(--sf-kb3-gel-fels); }
.sf-kb3 .sf-kb3-gel-spalte { fill: none; stroke: var(--sf-kb3-gel-eis); stroke-width: 3; }
.sf-kb3 .sf-kb3-gel-bein { fill: var(--sf-kb3-gel-bein); }
.sf-kb3 .sf-kb3-gel-knoechel { fill: none; stroke: var(--sf-kb3-ink); stroke-width: 1.6; stroke-dasharray: 3 3; }
.sf-kb3 .sf-kb3-gel-sohle { fill: var(--sf-kb3-gel-sohle); }
.sf-kb3 .sf-kb3-gel-schuh { fill: var(--sf-kb3-gel-schuh); }
.sf-kb3 .sf-kb3-gel-kragen { fill: var(--sf-kb3-gel-kragen); }
.sf-kb3 .sf-kb3-gel-eisen { fill: var(--sf-kb3-gel-fels); }
.sf-kb3 .sf-kb3-gel-linie { stroke: var(--sf-kb3-gel-stein); stroke-width: 1; stroke-dasharray: 4 4; }
.sf-kb3 .sf-kb3-gel-linie-an { stroke: var(--sf-kb3-blue); stroke-width: 3; }
.sf-kb3 .sf-kb3-gel-zeiger { stroke: var(--sf-kb3-ink); stroke-width: 1; }
.sf-kb3 .sf-kb3-gel-zeiger-p { fill: var(--sf-kb3-ink); }
.sf-kb3 .sf-kb3-gel-leg { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; padding: 8px 12px; font-size: var(--sf-emb-size-12); background: var(--sf-kb3-bg); border-top: 1px solid var(--sf-kb3-line); }
.sf-kb3 .sf-kb3-gel-leg > span { display: inline-flex; align-items: center; gap: 6px; }
.sf-kb3 .sf-kb3-gel-leg-l { display: inline-block; width: 16px; border-top: 1px dashed var(--sf-kb3-gel-stein); }
.sf-kb3 .sf-kb3-gel-leg-an { color: var(--sf-kb3-blue); font-weight: 700; }
.sf-kb3 .sf-kb3-gel-leg-an .sf-kb3-gel-leg-l { border-top: 3px solid var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-gel-leg-kn { display: inline-block; width: 8px; height: 8px; border: 1.5px dashed var(--sf-kb3-ink); border-radius: 50%; }
.sf-kb3 .sf-kb3-gel-leg-r { margin-left: auto; color: var(--sf-kb3-mute); }
.sf-kb3 .sf-kb3-gel-karten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.sf-kb3 .sf-kb3-gel-karte { border: 1px solid var(--sf-kb3-line); border-radius: 3px; display: flex; flex-direction: column; min-width: 0; overflow: hidden; background: var(--sf-kb3-bg); }
.sf-kb3 .sf-kb3-gel-karte .sf-kb3-gel-szene { border-bottom: 1px solid var(--sf-kb3-line); background: var(--sf-kb3-gel-himmel); }
.sf-kb3 .sf-kb3-gel-in { padding: 12px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sf-kb3 .sf-kb3-gel-wichtig { display: flex; flex-direction: column; gap: 4px; font-size: var(--sf-emb-size-14); }
.sf-kb3 .sf-kb3-gel-wichtig li { position: relative; padding-left: 14px; }
.sf-kb3 .sf-kb3-gel-wichtig li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-gel-bsp { margin-top: auto; border-top: 1px solid var(--sf-kb3-line); padding-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.sf-kb3 .sf-kb3-gel-bsp > p { font-size: var(--sf-emb-size-13); font-weight: 600; color: var(--sf-kb3-ink); }
.sf-kb3 .sf-kb3-gel-bsp-a { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--sf-emb-size-13); min-width: 0; }
.sf-kb3 .sf-kb3-gel-bsp-a img { width: 40px; height: 40px; object-fit: contain; flex: none; }
.sf-kb3 .sf-kb3-gel-bsp-a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-kb3 .sf-kb3-gel-hinweis { margin-top: 10px; font-size: var(--sf-emb-size-12); color: var(--sf-kb3-mute); }
@container sf-lp (max-width: 980px) {
.sf-kb3 .sf-kb3-gel-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container sf-lp (max-width: 700px) {
.sf-kb3 .sf-kb3-gel-karten { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(80%, 1fr); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
.sf-kb3 .sf-kb3-gel-karte { scroll-snap-align: start; }
.sf-kb3 .sf-kb3-gel-leg-r { margin-left: 0; flex-basis: 100%; }
}
.sf-kb3 .sf-kb3-gel-schale { fill: var(--sf-kb3-bg); stroke: var(--sf-kb3-gel-schuh); stroke-width: 6; }
.sf-kb3 .sf-kb3-gel-fuss { fill: var(--sf-kb3-gel-bein); }
.sf-kb3 .sf-kb3-gel-ski { fill: var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-gel-spur { fill: none; stroke: var(--sf-kb3-gel-eis); stroke-width: 3; stroke-dasharray: 10 8; }
.sf-kb3 .sf-kb3-gel-schaft { fill: var(--sf-kb3-gel-kragen); }
.sf-kb3 .sf-kb3-gel-schaft-ende { fill: none; stroke: var(--sf-kb3-blue); stroke-width: 2; stroke-dasharray: 5 4; }
.sf-kb3 .sf-kb3-gel-last { fill: var(--sf-kb3-gel-berg); }
.sf-kb3 .sf-kb3-gel-last-an { fill: var(--sf-kb3-gel-schuh); }
.sf-kb3 .sf-kb3-gel-leg-leiste-0, .sf-kb3 .sf-kb3-gel-leg-leiste-1, .sf-kb3 .sf-kb3-gel-leg-leiste-2, .sf-kb3 .sf-kb3-gel-leg-aufstieg-0, .sf-kb3 .sf-kb3-gel-leg-aufstieg-1 { display: inline-block; width: 12px; height: 12px; border-radius: 2px; }
.sf-kb3 .sf-kb3-gel-leg-leiste-0 { background: var(--sf-kb3-gel-bein); }
.sf-kb3 .sf-kb3-gel-leg-leiste-1 { border: 2px solid var(--sf-kb3-gel-schuh); }
.sf-kb3 .sf-kb3-gel-leg-leiste-2 { height: 0; border-top: 3px solid var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-gel-leg-aufstieg-0 { height: 0; border-top: 2px dashed var(--sf-kb3-blue); }
.sf-kb3 .sf-kb3-gel-leg-aufstieg-1 { background: var(--sf-kb3-gel-schuh); }
.sf-kb3[data-sf-kb3-marke="hoehenmeter"] { --sf-kb3-blue: var(--sf-section-accent, var(--sf-travel)); --sf-kb3-cta: var(--sf-section-accent, var(--sf-travel)); --sf-kb3-shadow-opt: none; --sf-kb3-shadow-card: none; }
.sf-kb3[data-sf-kb3-marke="hoehenmeter"] *:not([class*="dot"]):not([class*="punkt"]):not(input) { border-radius: 0; }
.sf-kb3[data-sf-kb3-marke="hoehenmeter"] .sf-kb3-opt[aria-pressed="true"], .sf-kb3[data-sf-kb3-marke="hoehenmeter"] .sf-kb3-use[aria-pressed="true"] { background: var(--sf-ink); border-color: var(--sf-ink); }
.sf-kb3[data-sf-kb3-marke="hoehenmeter"] h1, .sf-kb3[data-sf-kb3-marke="hoehenmeter"] h2, .sf-kb3[data-sf-kb3-marke="hoehenmeter"] h3 { font-family: var(--sf-hb-titel-schrift, var(--sf-display)); }
.sf-kb3 .sf-kb3-tile .sf-kb3-nm, .sf-kb3 .sf-kb3-nm { min-height: 0; padding-block: 12px; }
.sf-kb3 .sf-kb3-erg.sf-kb3-einzel { grid-template-columns: minmax(0, 1fr); }
@container sf-lp (min-width: 701px) {
.sf-kb3 .sf-kb3-einzel > .sf-kb3-card { display: grid; grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr); max-width: 1000px; }
.sf-kb3 .sf-kb3-einzel .sf-kb3-c-img { aspect-ratio: auto; padding: 44px 24px 24px; }
.sf-kb3 .sf-kb3-einzel .sf-kb3-c-img img { max-height: 360px; }
.sf-kb3 .sf-kb3-einzel .sf-kb3-c-body { padding: 24px; }
}
/* shop-embeds.css */
.sf-embed-root .sf-emb, .sf-embed-root .sf-emb-lower, .sf-embed-root .sf-emb-teaser { font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-15); font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--sf-emb-fg); }
.sf-embed-root .sf-emb ul, .sf-embed-root .sf-emb li { margin: 0; padding: 0; list-style: none; line-height: inherit; }
.sf-embed-root .sf-emb-link, .sf-embed-root .sf-emb-jump, .sf-embed-root .sf-emb-lower .sf-hub-textlink, .sf-embed-root .sf-emb-lower .sf-hub-link { color: var(--sf-emb-blue); font-family: var(--sf-emb-font); text-decoration: none; }
.sf-embed-root .sf-emb-link:hover, .sf-embed-root .sf-emb-link:focus-visible, .sf-embed-root .sf-emb-jump:hover, .sf-embed-root .sf-emb-jump:focus-visible, .sf-embed-root .sf-emb-lower .sf-hub-textlink:hover, .sf-embed-root .sf-emb-lower .sf-hub-link:hover { color: var(--sf-emb-blue-bright); text-decoration: none; }
.sf-embed-root .sf-emb-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 18px; }
.sf-embed-root .sf-emb-title { margin: 0; font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-26); font-weight: 300; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--sf-emb-fg); }
.sf-embed-root .sf-emb-jump { font-size: var(--sf-emb-size-14); font-weight: 600; white-space: nowrap; }
.sf-embed-root .sf-emb-intro { display: block; max-width: 96ch; margin: 8px 0 0; font-size: var(--sf-emb-size-14); font-weight: 300; line-height: 1.5; }
.sf-embed-root .sf-emb-head .sf-emb-jump { display: inline-block; margin: -12px 0; padding: 12px 0; }
@container sf-embed (min-width: 720px) {
.sf-embed-root .sf-emb-title { font-size: var(--sf-emb-size-32); }
.sf-embed-root .sf-emb-intro { font-size: var(--sf-emb-size-15); }
}
.sf-embed-root .sf-emb-subcats { position: relative; margin: 20px 0 0; }
.sf-embed-root .sf-emb .sf-emb-subcats-rail { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.sf-embed-root .sf-emb-subcats-rail::-webkit-scrollbar { display: none; }
.sf-embed-root .sf-emb .sf-emb-subcat { flex: 0 0 200px; min-width: 0; scroll-snap-align: start; }
.sf-embed-root .sf-emb-subcat-link { display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; height: 184px; padding: 14px; background: var(--sf-white); box-shadow: inset 0 0 70px var(--sf-emb-subcat-shade); color: var(--sf-emb-blue); text-align: center; text-decoration: none; }
.sf-embed-root .sf-emb-subcat-link:hover, .sf-embed-root .sf-emb-subcat-link:focus-visible { color: var(--sf-emb-blue-bright); text-decoration: none; }
.sf-embed-root .sf-emb-subcat-link:focus-visible { outline: 2px solid var(--sf-emb-blue); outline-offset: -2px; }
.sf-embed-root .sf-emb-subcat-media { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; width: 100%; min-height: 0; }
.sf-embed-root .sf-emb-subcat-image { display: block; width: 100%; max-width: 100%; height: 100px; object-fit: contain; mix-blend-mode: darken; }
.sf-embed-root .sf-emb-subcat-name { display: block; width: 100%; margin: 8px 0 0; font-size: var(--sf-emb-size-15); font-weight: 400; line-height: 1.3; overflow-wrap: anywhere; }
.sf-embed-root .sf-emb-subcats-btn { position: absolute; top: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; width: 34px; height: 52px; margin: -26px 0 0; padding: 0; border: 0; background: var(--sf-emb-blue); color: var(--sf-white); cursor: pointer; }
.sf-embed-root .sf-emb-subcats-btn::before { content: ""; width: 11px; height: 11px; border: solid currentColor; border-width: 0 2px 2px 0; }
.sf-embed-root .sf-emb-subcats-btn--prev { left: 0; border-radius: 0 3px 3px 0; }
.sf-embed-root .sf-emb-subcats-btn--prev::before { margin: 0 0 0 5px; transform: rotate(135deg); }
.sf-embed-root .sf-emb-subcats-btn--next { right: 0; border-radius: 3px 0 0 3px; }
.sf-embed-root .sf-emb-subcats-btn--next::before { margin: 0 5px 0 0; transform: rotate(-45deg); }
.sf-embed-root .sf-emb-subcats-btn:hover, .sf-embed-root .sf-emb-subcats-btn:focus-visible { background: var(--sf-emb-blue-deep); }
.sf-embed-root .sf-emb-subcats-btn:focus-visible { outline: 2px solid var(--sf-emb-blue-bright); outline-offset: 2px; }
.sf-embed-root .sf-emb-subcats-btn[hidden], .sf-embed-root .sf-emb-subcats-btn:disabled { display: none; }
@container sf-embed (max-width: 719px) {
.sf-embed-root .sf-emb-subcats { margin: 16px 0 0; }
.sf-embed-root .sf-emb .sf-emb-subcat { flex-basis: calc((100% - 16px) / 2.3); }
.sf-embed-root .sf-emb-subcat-link { height: auto; min-height: 150px; padding: 10px 8px; }
.sf-embed-root .sf-emb-subcat-image { height: 84px; }
.sf-embed-root .sf-emb-subcat-name { font-size: var(--sf-emb-size-14); }
.sf-embed-root .sf-emb-subcats-btn { display: none; }
}
@container sf-embed (max-width: 343px) {
.sf-embed-root .sf-emb-subcat-link { min-height: 120px; padding: 8px 6px; }
.sf-embed-root .sf-emb-subcat-image { height: 64px; }
}
.sf-embed-root .sf-emb-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 18px; }
.sf-embed-root .sf-emb-banner--image { position: relative; display: block; background: var(--sf-emb-panel); }
.sf-embed-root .sf-emb-banner-image { display: block; width: 100%; height: 120px; object-fit: cover; }
.sf-embed-root .sf-emb-logo { display: grid; place-items: center; width: 128px; height: 92px; padding: 12px; border: 1px solid var(--sf-emb-line); background: var(--sf-white); }
.sf-embed-root .sf-emb-logo--light { border-color: var(--sf-emb-logo-plate); background: var(--sf-emb-logo-plate); }
.sf-embed-root .sf-emb-banner--image .sf-emb-logo { position: absolute; top: 0; left: 0; width: 120px; height: 120px; padding: 14px; border: 0; background: var(--sf-emb-popular-veil); }
.sf-embed-root .sf-emb-banner--image .sf-emb-logo--light { background: var(--sf-emb-logo-veil); }
.sf-embed-root .sf-emb-logo img { display: block; width: auto; max-width: 100%; height: auto; max-height: 70px; object-fit: contain; }
.sf-embed-root .sf-emb-popular { display: flex; flex: 1 1 240px; flex-direction: column; min-width: 0; float: none; background: transparent; font-size: var(--sf-emb-size-14); }
.sf-embed-root .sf-emb-banner--image .sf-emb-popular { padding: 12px 0 0; background: var(--sf-white); }
.sf-embed-root .sf-emb-popular-title { display: block; margin: 0 0 6px; font-size: var(--sf-emb-size-17); font-weight: 700; line-height: 1.3; text-transform: uppercase; color: var(--sf-emb-fg); }
.sf-embed-root .sf-emb-popular-link { display: block; padding: 9px 0; border-bottom: 1px solid var(--sf-emb-line); color: var(--sf-emb-blue); font-weight: 400; text-decoration: none; }
.sf-embed-root .sf-emb-popular-link:hover, .sf-embed-root .sf-emb-popular-link:focus-visible { color: var(--sf-emb-blue-bright); }
@container sf-embed (min-width: 720px) {
.sf-embed-root .sf-emb-banner--image { height: 190px; overflow: hidden; }
.sf-embed-root .sf-emb-banner-image { height: 100%; }
.sf-embed-root .sf-emb-banner--image .sf-emb-logo { bottom: 0; width: 210px; height: auto; padding: 24px; }
.sf-embed-root .sf-emb-banner--image .sf-emb-popular { position: absolute; top: 0; right: 0; bottom: 0; width: 270px; padding: 26px 22px; background: var(--sf-emb-popular-veil); }
.sf-embed-root .sf-emb-popular-title { margin-bottom: 10px; }
}
@container sf-embed (max-width: 719px) {
.sf-embed-root .sf-emb-banner { margin: 0 0 12px; }
.sf-embed-root .sf-emb-popular--wide-only { display: none; }
.sf-embed-root .sf-emb-banner--image .sf-emb-popular { padding: 8px 0 0; }
.sf-embed-root .sf-emb-popular-title { display: none; }
.sf-embed-root .sf-emb .sf-emb-popular-list { display: flex; gap: 8px; padding: 0 24px 0 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent); }
.sf-embed-root .sf-emb-popular-list::-webkit-scrollbar { display: none; }
.sf-embed-root .sf-emb .sf-emb-popular-list > li { flex: none; }
.sf-embed-root .sf-emb-popular-link { display: flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 0 14px; border: 1px solid var(--sf-emb-line); border-radius: 3px; background: var(--sf-white); white-space: nowrap; }
.sf-embed-root .sf-emb-popular-link:hover, .sf-embed-root .sf-emb-popular-link:focus-visible { border-color: var(--sf-emb-blue); }
}
.sf-embed-root .sf-emb-lower { display: flex; flex-direction: column; gap: 20px; min-width: 0; margin-top: 22px; scroll-margin-top: 16px; }
.sf-embed-root .sf-emb-lower :where(p, li, summary, td, th) { font-size: inherit; }
.sf-embed-root .sf-emb-lower--category { max-width: 860px; padding-top: 20px; border-top: 3px solid var(--sf-emb-blue); }
.sf-embed-root .sf-emb-lower-head { display: flex; flex-direction: column; gap: 2px; }
.sf-embed-root .sf-emb-eyebrow { margin: 0; font-size: var(--sf-emb-size-12); font-weight: 700; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sf-emb-blue); }
.sf-embed-root .sf-emb-lower .sf-hub-blocks { display: flex; flex-direction: column; gap: 20px; font-family: var(--sf-emb-font); font-size: inherit; line-height: inherit; color: inherit; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks::after { content: none; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks > div { min-width: 0; margin-block: 0; clear: none; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks > div:has(> [data-block-type]:empty) { display: none; }
.sf-embed-root .sf-emb-lower [data-block-type] { display: flex; flex-direction: column; gap: 10px; min-width: 0; scroll-margin-top: 16px; }
.sf-embed-root .sf-emb-lower [data-block-type="heading"] > span[id] { display: block; scroll-margin-top: 16px; }
.sf-embed-root .sf-emb-lower h2, .sf-embed-root .sf-emb-lower h3 { margin: 0; font-family: var(--sf-emb-font); letter-spacing: 0; text-transform: none; text-wrap: balance; }
.sf-embed-root .sf-emb-lower .sf-emb-lower-title { font-size: var(--sf-emb-size-24); font-weight: 300; line-height: 1.15; color: var(--sf-emb-heading); }
.sf-embed-root .sf-emb-lower .sf-hub-blocks h2 { font-size: var(--sf-emb-size-22); font-weight: 300; line-height: 1.25; color: var(--sf-emb-heading); }
.sf-embed-root .sf-emb-lower .sf-hub-blocks h3 { font-size: var(--sf-emb-size-17); font-weight: 600; line-height: 1.25; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-subtitle { font-size: var(--sf-emb-size-15); font-weight: 700; line-height: 1.4; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-lower--category [data-block-type="heading"] > h2, .sf-embed-root .sf-emb-lower--category .sf-emb-section { margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--sf-emb-line); }
.sf-embed-root .sf-emb-lower--supplier .sf-hub-blocks h2 { font-size: var(--sf-emb-size-22); line-height: 1.2; }
.sf-embed-root .sf-emb-lower--supplier .sf-hub-blocks > div:first-child > [data-block-type="heading"] > h2 { padding: 14px 20px; background: var(--sf-emb-blue); color: var(--sf-white); font-size: var(--sf-emb-size-21); }
@container sf-embed (min-width: 720px) {
.sf-embed-root .sf-emb-lower .sf-emb-lower-title { font-size: var(--sf-emb-size-28); }
.sf-embed-root .sf-emb-lower--supplier { gap: 26px; }
.sf-embed-root .sf-emb-lower--supplier .sf-hub-blocks { gap: 22px; }
.sf-embed-root .sf-emb-lower--supplier .sf-hub-blocks h2 { font-size: var(--sf-emb-size-26); }
.sf-embed-root .sf-emb-lower--supplier .sf-hub-blocks > div:first-child > [data-block-type="heading"] > h2 { font-size: var(--sf-emb-size-24); }
}
.sf-embed-root .sf-emb-lower .sf-hub-blocks > div:has(> [data-block-type="heading"] > h2) + div > [data-block-type="shop_article_list"] > .sf-hub-products > h2 { display: none; }
.sf-embed-root .sf-emb-lower .sf-hub-text, .sf-embed-root .sf-emb-lower .sf-emb-card-text, .sf-embed-root .sf-emb-lower .sf-emb-fold-a { display: flex; flex-direction: column; gap: 8px; }
.sf-embed-root .sf-emb-lower--category .sf-hub-text, .sf-embed-root .sf-emb-lower--category .sf-emb-list, .sf-embed-root .sf-emb-lower--category .sf-emb-fold-a { max-width: 72ch; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks p { margin: 0; }
.sf-embed-root .sf-emb-lower .sf-hub-text--lead { font-size: var(--sf-emb-size-17); color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-lower .sf-hub-text--small, .sf-embed-root .sf-emb-lower .sf-emb-small { font-size: var(--sf-emb-size-12); color: var(--sf-emb-mute); }
.sf-embed-root .sf-emb-lower .sf-hub-blocks strong { font-weight: 600; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-lower .sf-hub-text ul, .sf-embed-root .sf-emb-lower .sf-hub-text ol, .sf-embed-root .sf-emb-lower .sf-emb-fold-a ul, .sf-embed-root .sf-emb-lower .sf-emb-fold-a ol, .sf-embed-root .sf-emb-lower .sf-emb-card-text ul, .sf-embed-root .sf-emb-lower .sf-emb-card-text ol, .sf-embed-root .sf-emb-lower .sf-emb-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 0 0 22px; list-style: disc; }
.sf-embed-root .sf-emb-lower .sf-hub-text ol, .sf-embed-root .sf-emb-lower .sf-emb-fold-a ol, .sf-embed-root .sf-emb-lower .sf-emb-card-text ol, .sf-embed-root .sf-emb-lower .sf-emb-list--steps { list-style: decimal; }
.sf-embed-root .sf-emb-lower .sf-hub-text li, .sf-embed-root .sf-emb-lower .sf-emb-fold-a li, .sf-embed-root .sf-emb-lower .sf-emb-card-text li, .sf-embed-root .sf-emb-lower .sf-emb-list > li { margin: 0; padding: 0; line-height: inherit; list-style: inherit; }
.sf-embed-root .sf-emb-lower .sf-emb-list--check { padding-left: 0; list-style: none; }
.sf-embed-root .sf-emb-lower .sf-emb-list--check > li { padding-left: 22px; list-style: none; text-indent: -22px; }
.sf-embed-root .sf-emb-lower .sf-emb-list--check > li::before { content: "✓"; display: inline-block; width: 22px; color: var(--sf-emb-blue); font-weight: 700; text-indent: 0; }
.sf-embed-root .sf-emb-index { display: flex; flex-wrap: wrap; align-items: center; gap: 0 18px; float: none; padding: 0; border-top: 1px solid var(--sf-emb-line); border-bottom: 1px solid var(--sf-emb-line); background: transparent; font-size: var(--sf-emb-size-14); }
.sf-embed-root .sf-emb-lower .sf-emb-index-label { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-lower .sf-emb-index-list { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.sf-embed-root .sf-emb-lower .sf-emb-index-list > li { margin: 0; padding: 0; line-height: inherit; list-style: none; }
.sf-embed-root .sf-emb-lower .sf-emb-index-list .sf-emb-link { display: inline-flex; align-items: center; min-height: 44px; }
.sf-embed-root .sf-emb-fold { padding: 0; border-top: 1px solid var(--sf-emb-line); }
.sf-embed-root .sf-emb-fold:last-child { border-bottom: 1px solid var(--sf-emb-line); }
.sf-embed-root .sf-emb-fold-q { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; box-sizing: border-box; min-height: 44px; padding: 11px 0; color: var(--sf-emb-ink); font-weight: 600; list-style: none; cursor: pointer; }
.sf-embed-root .sf-emb-fold-q::-webkit-details-marker { display: none; }
.sf-embed-root .sf-emb-fold-q::before { content: "+"; flex: none; width: 12px; color: var(--sf-emb-blue); font-weight: 700; }
.sf-embed-root .sf-emb-fold[open] > .sf-emb-fold-q::before { content: "–"; }
.sf-embed-root .sf-emb-fold-q > span { flex: 1 1 0; min-width: 0; }
.sf-embed-root .sf-emb-lower .sf-emb-fold-q > strong { flex: 0 0 100%; box-sizing: border-box; padding-left: 26px; color: var(--sf-emb-blue); font-weight: 700; }
@container sf-embed (min-width: 560px) {
.sf-embed-root .sf-emb-fold-q { flex-wrap: nowrap; }
.sf-embed-root .sf-emb-lower .sf-emb-fold-q > strong { flex: 0 1 auto; padding-left: 0; text-align: right; }
}
.sf-embed-root .sf-emb-lower .sf-emb-fold-a { margin: -3px 0 0 26px; padding: 0 0 12px; }
.sf-embed-root .sf-emb-table { max-width: 100%; overflow-x: auto; }
.sf-embed-root .sf-emb-table-hint { display: none; }
@container sf-embed (max-width: 559px) {
.sf-embed-root .sf-emb-table:not(.sf-emb-table--pairs) { background: linear-gradient(to left, var(--sf-white) 40%, var(--sf-emb-white-0)) right center / 32px 100% no-repeat local, radial-gradient(farthest-side at 100% 50%, var(--sf-emb-scroll-shade), var(--sf-emb-white-0)) right center / 12px 100% no-repeat scroll; }
.sf-embed-root .sf-emb-table-hint { display: block; margin: 0 0 6px; color: var(--sf-emb-mute); font-size: var(--sf-emb-size-13); line-height: 1.4; }
.sf-embed-root .sf-emb-table:not(.sf-emb-table--pairs) th:first-child, .sf-embed-root .sf-emb-table:not(.sf-emb-table--pairs) td:first-child { position: sticky; left: 0; z-index: 1; max-width: 38vw; padding-right: 10px; background: var(--sf-white); box-shadow: 1px 0 0 var(--sf-emb-line); }
}
.sf-embed-root .sf-emb-table table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--sf-emb-size-14); line-height: 1.5; }
.sf-embed-root .sf-emb-table caption { padding-bottom: 8px; color: var(--sf-emb-mute); font-size: var(--sf-emb-size-13); text-align: left; }
.sf-embed-root .sf-emb-table th, .sf-embed-root .sf-emb-table td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--sf-emb-line); font-weight: 400; text-align: left; vertical-align: top; }
.sf-embed-root .sf-emb-table thead th { border-bottom: 2px solid var(--sf-emb-ink); color: var(--sf-emb-ink); font-weight: 700; vertical-align: bottom; }
.sf-embed-root .sf-emb-table tbody th { color: var(--sf-emb-ink); font-weight: 600; }
.sf-embed-root .sf-emb-table .sf-emb-cell--mark { padding-left: 10px; background: var(--sf-emb-panel); color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-badge { display: block; color: var(--sf-emb-blue); font-size: var(--sf-emb-size-12); font-weight: 700; }
.sf-embed-root .sf-emb-lower .sf-emb-tiles { display: grid; grid-auto-columns: 78%; grid-auto-flow: column; gap: 10px; margin: 0; padding: 0; overflow-x: auto; list-style: none; scrollbar-width: none; }
.sf-embed-root .sf-emb-lower .sf-emb-tiles > li { min-width: 0; margin: 0; padding: 0; line-height: inherit; list-style: none; }
.sf-embed-root .sf-emb-tile { position: relative; display: block; height: 150px; overflow: hidden; background: var(--sf-emb-tile); color: var(--sf-white); text-decoration: none; }
.sf-embed-root .sf-emb-tile-image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sf-embed-root .sf-emb-tile:hover .sf-emb-tile-image, .sf-embed-root .sf-emb-tile:focus-visible .sf-emb-tile-image { transform: scale(1.03); }
.sf-embed-root .sf-emb-tile-band { position: absolute; right: 0; bottom: 0; left: 0; padding: 9px 12px 10px; background: var(--sf-emb-tile-band); color: var(--sf-white); font-size: var(--sf-emb-size-14); font-weight: 400; line-height: 1.3; }
.sf-embed-root .sf-emb-lower .sf-emb-tile-band > strong, .sf-embed-root .sf-emb-tile-band > span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.sf-embed-root .sf-emb-lower .sf-emb-tile-band > strong { color: var(--sf-white); font-weight: 700; text-transform: uppercase; }
@media (prefers-reduced-motion: reduce) {
.sf-embed-root .sf-emb-tile-image { transition: none; }
}
.sf-embed-root .sf-emb-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sf-embed-root .sf-emb-card { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 18px 20px 16px; border: 1px solid var(--sf-emb-line); border-top: 3px solid var(--sf-emb-blue); background: var(--sf-white); font-weight: 300; }
.sf-embed-root .sf-emb-card-image { display: block; width: 100%; height: 120px; object-fit: cover; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-card-title { font-size: var(--sf-emb-size-22); font-weight: 300; line-height: 1.2; color: var(--sf-emb-heading); }
.sf-embed-root .sf-emb-card-links { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 6px; font-size: var(--sf-emb-size-14); font-weight: 700; }
.sf-embed-root .sf-emb-card-text .sf-emb-link { font-weight: 700; }
@container sf-embed (min-width: 720px) {
.sf-embed-root .sf-emb-lower .sf-emb-tiles { grid-auto-columns: auto; grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; overflow: visible; }
.sf-embed-root .sf-emb-tile { height: 160px; }
}
@container sf-embed (min-width: 900px) {
.sf-embed-root .sf-emb-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
}
.sf-embed-root .sf-emb-tc { max-width: 100%; margin: 0; padding: 2px 2px 6px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.sf-embed-root .sf-emb-tc:focus-visible { outline: 2px solid var(--sf-emb-blue); outline-offset: 2px; }
.sf-embed-root .sf-emb-lower .sf-emb-tc-list { display: grid; grid-auto-columns: minmax(240px, 82%); grid-auto-flow: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.sf-embed-root .sf-emb-lower .sf-emb-tc-card { box-sizing: border-box; display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 0; padding: 18px 20px 20px; border: 1px solid var(--sf-emb-line); border-radius: 10px; background: var(--sf-white); box-shadow: var(--sf-tc-card-shadow); line-height: 1.5; list-style: none; scroll-snap-align: start; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-tc-title { margin: 0; font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-19); font-weight: 400; line-height: 1.3; letter-spacing: 0; text-align: center; text-transform: none; color: var(--sf-emb-heading); }
.sf-embed-root .sf-emb-lower .sf-emb-tc-range { white-space: nowrap; }
.sf-embed-root .sf-emb-lower .sf-emb-tc-image { display: block; width: 100%; height: 190px; margin: 0 auto; object-fit: contain; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-tc-text { margin: 0; font-size: var(--sf-emb-size-15); font-weight: 400; color: var(--sf-emb-fg); }
.sf-embed-root .sf-emb-lower .sf-emb-tc-points { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sf-embed-root .sf-emb-lower .sf-emb-tc-point { position: relative; min-height: 22px; margin: 0; padding: 1px 0 0 34px; font-size: var(--sf-emb-size-15); font-weight: 400; line-height: 1.45; list-style: none; color: var(--sf-emb-fg); }
.sf-embed-root .sf-emb-tc-mark { position: absolute; top: 0; left: 0; width: 22px; height: 22px; }
.sf-embed-root .sf-emb-tc-mark circle { fill: var(--sf-tc-plus); }
.sf-embed-root .sf-emb-tc-mark--con circle { fill: var(--sf-tc-minus); }
.sf-embed-root .sf-emb-tc-mark path { fill: none; stroke: var(--sf-tc-mark-ink); stroke-width: 2.2; stroke-linecap: round; }
.sf-embed-root .sf-emb-tc-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-tc-links { margin: auto 0 0; padding-top: 4px; font-size: var(--sf-emb-size-14); font-weight: 700; }
@container sf-embed (min-width: 600px) {
.sf-embed-root .sf-emb-lower .sf-emb-tc--2 .sf-emb-tc-list, .sf-embed-root .sf-emb-lower .sf-emb-tc--3 .sf-emb-tc-list { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-embed-root .sf-emb-lower .sf-emb-tc--3 .sf-emb-tc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-embed-root .sf-emb-tc--2, .sf-embed-root .sf-emb-tc--3 { overflow-x: visible; }
}
@container sf-embed (min-width: 820px) {
.sf-embed-root .sf-emb-lower .sf-emb-tc--4 .sf-emb-tc-list { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-embed-root .sf-emb-tc--4 { overflow-x: visible; }
.sf-embed-root .sf-emb-lower .sf-emb-tc-list { gap: 18px; }
}
.sf-embed-root .sf-emb-lower .sf-block-image, .sf-embed-root .sf-emb-lower .sf-hub-video, .sf-embed-root .sf-emb-lower .sf-hub-gallery { max-width: 860px; margin: 0; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-hub-picture { background: var(--sf-emb-panel); }
.sf-embed-root .sf-emb-lower--supplier .sf-hub-text { max-width: 96ch; }
.sf-embed-root .sf-emb-lower .sf-block-image figcaption { color: var(--sf-emb-mute); font-size: var(--sf-emb-size-12); }
.sf-embed-root .sf-emb-lower .sf-hub-blocks [data-align] { float: none; width: auto; max-width: 360px; margin: 0; }
.sf-embed-root .sf-emb-lower .sf-shop-products, .sf-embed-root .sf-emb-lower .sf-hub-products { display: flex; flex-direction: column; gap: 10px; margin-block: 0; }
.sf-embed-root .sf-emb-lower .sf-shop-products > h2 { margin-bottom: 0; }
.sf-embed-root .sf-emb-lower .sf-shop-list { gap: 8px; }
.sf-embed-root .sf-emb-lower .sf-shop-list[data-layout="rail"] { grid-auto-columns: 46%; padding: 0 0 8px; }
.sf-embed-root .sf-emb-lower .sf-shop-card > a, .sf-embed-root .sf-emb-lower .sf-shop-card > div { border-color: var(--sf-emb-line); border-radius: 3px; color: var(--sf-emb-fg); }
.sf-embed-root .sf-emb-lower .sf-shop-card > a:hover { border-color: var(--sf-emb-blue); box-shadow: none; transform: none; }
.sf-embed-root .sf-emb-lower .sf-shop-card figure { background: var(--sf-white); }
.sf-embed-root .sf-emb-lower .sf-shop-card-body { align-items: center; gap: 2px; padding: 4px 10px 14px; text-align: center; }
.sf-embed-root .sf-emb-lower .sf-shop-card-brand { color: var(--sf-emb-blue); font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-13); font-weight: 400; letter-spacing: 0; text-transform: none; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-shop-card strong { color: var(--sf-emb-fg); font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-15); font-weight: 300; }
.sf-embed-root .sf-emb-lower .sf-shop-card-price { color: var(--sf-emb-blue); font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-17); }
.sf-embed-root .sf-emb-lower .sf-shop-card-cta { display: none; }
@container sf-embed (min-width: 720px) {
.sf-embed-root .sf-emb-lower .sf-shop-list[data-layout="rail"] { grid-auto-columns: minmax(150px, calc((100% - 24px) / 4)); }
}
.sf-embed-root .sf-emb-lower .sf-hub-link { font-size: var(--sf-emb-size-14); font-weight: 600; }
.sf-embed-root .sf-emb-lower .sf-disclosure, .sf-embed-root .sf-emb-lower .sf-hub-quellen, .sf-embed-root .sf-emb-lower .sf-block-cta { font-family: var(--sf-emb-font); font-size: inherit; }
.sf-embed-root[data-embed="category-teaser"] { height: 100%; }
.sf-embed-root .sf-emb-teaser { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 130px minmax(0, 1fr); height: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--sf-emb-blue); background: var(--sf-emb-blue); color: var(--sf-white); text-decoration: none; }
.sf-embed-root .sf-emb-teaser:hover, .sf-embed-root .sf-emb-teaser:focus-visible { box-shadow: 0 0 0 2px var(--sf-emb-blue); }
.sf-embed-root .sf-emb-teaser-media { position: relative; display: grid; place-items: center; min-width: 0; overflow: hidden; background: var(--sf-emb-blue-deep); color: var(--sf-white); }
.sf-embed-root .sf-emb-teaser-image { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.sf-embed-root .sf-emb-teaser-symbol { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sf-embed-root .sf-emb-teaser-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px; min-width: 0; padding: 12px; }
.sf-embed-root .sf-emb-teaser-eyebrow { color: var(--sf-emb-on-blue-soft); font-size: var(--sf-emb-size-12); font-weight: 700; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; }
.sf-embed-root .sf-emb-teaser-title, .sf-embed-root .sf-emb-teaser-text { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; }
.sf-embed-root .sf-emb-teaser-title { margin: 0; color: var(--sf-white); font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-17); font-weight: 700; line-height: 1.15; letter-spacing: 0; text-transform: uppercase; text-wrap: balance; -webkit-line-clamp: 4; }
.sf-embed-root .sf-emb-teaser-text { color: var(--sf-white); font-size: var(--sf-emb-size-15); font-weight: 400; line-height: 1.4; -webkit-line-clamp: 3; }
.sf-embed-root .sf-emb-teaser-cta { margin-top: 4px; padding: 9px 14px; border-radius: 3px; background: var(--sf-white); color: var(--sf-emb-blue); font-size: var(--sf-emb-size-14); font-weight: 700; line-height: 1.5; }
@container sf-embed (min-width: 440px) {
.sf-embed-root .sf-emb-teaser { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-rows: minmax(220px, 1fr); }
.sf-embed-root .sf-emb-teaser-media { order: 2; }
.sf-embed-root .sf-emb-teaser-symbol { width: 96px; height: 96px; }
.sf-embed-root .sf-emb-teaser-copy { padding: 22px 20px; }
.sf-embed-root .sf-emb-teaser-title { font-size: var(--sf-emb-size-21); -webkit-line-clamp: 5; }
.sf-embed-root .sf-emb-teaser-text { font-size: var(--sf-emb-size-16); -webkit-line-clamp: 4; }
}
@container sf-embed (min-width: 560px) {
.sf-embed-root .sf-emb-teaser-title { font-size: var(--sf-emb-size-25); }
}
/* shop-blocks.css */
.sf-embed-root .sf-emb-lower .sf-hub-blocks [data-align] .sf-block-image { max-width: none; }
@container sf-embed (max-width: 719px) {
.sf-embed-root .sf-emb-lower .sf-hub-blocks [data-align] { max-width: none; }
}
@container sf-embed (min-width: 720px) {
.sf-embed-root .sf-emb-lower .sf-hub-blocks:has(> div > [data-align]) { display: flow-root; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks:has(> div > [data-align]) > div + div { margin-top: 20px; }
.sf-embed-root .sf-emb-lower--supplier .sf-hub-blocks:has(> div > [data-align]) > div + div { margin-top: 22px; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks:has(> div > [data-align]) > div:not(:has(> [data-block-type="richtext"])) { clear: both; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks:has(> div > [data-align]) > div > [data-block-type="richtext"], .sf-embed-root .sf-emb-lower .sf-hub-blocks:has(> div > [data-align]) > div > [data-block-type="richtext"] > .sf-hub-text { display: block; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks:has(> div > [data-align]) > div > [data-block-type="richtext"] > .sf-hub-text > * + * { margin-top: 8px; }
.sf-embed-root .sf-emb-lower--category .sf-hub-blocks > div:has(> [data-align]):has(+ div > [data-block-type="richtext"]) { max-width: 72ch; }
.sf-embed-root .sf-emb-lower--supplier .sf-hub-blocks > div:has(> [data-align]):has(+ div > [data-block-type="richtext"]) { max-width: 96ch; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks > div:has(+ div > [data-block-type="richtext"]) > [data-align] { width: 40%; min-width: 200px; max-width: 340px; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks > div:has(+ div > [data-block-type="richtext"]) > [data-align="right"] { float: right; margin: 4px 0 12px 24px; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks > div:has(+ div > [data-block-type="richtext"]) > [data-align="left"] { float: left; margin: 4px 24px 12px 0; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks > div:has(+ div > [data-block-type="richtext"]) > [data-align][data-size="small"] { width: 30%; max-width: 260px; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks > div:has(+ div > [data-block-type="richtext"]) > [data-align][data-size="large"] { width: 50%; max-width: 430px; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks [data-align] .sf-hub-picture { aspect-ratio: auto; height: auto; object-fit: cover; background: none; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks > div:not(:has(+ div > [data-block-type="richtext"])) > [data-align] { width: 100%; max-width: none; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks > div:not(:has(+ div > [data-block-type="richtext"])) > [data-align] .sf-hub-picture { width: 100%; max-height: 420px; object-fit: cover; }
.sf-embed-root .sf-emb-lower--supplier .sf-hub-blocks > div:has(> [data-align]):not(:has(+ div > [data-block-type="richtext"])) { max-width: 96ch; }
}
.sf-embed-root .sf-emb-kt { display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 24px; background: var(--sf-emb-blue); color: var(--sf-white); clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%); }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-kt-title { margin: 0; padding: 0; border: 0; color: var(--sf-white); font-size: var(--sf-emb-size-19); font-weight: 700; line-height: 1.3; }
.sf-embed-root .sf-emb-lower .sf-emb-kt-list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-embed-root .sf-emb-lower .sf-emb-kt-list > li { position: relative; margin: 0; padding: 0 0 0 24px; color: var(--sf-white); line-height: 1.5; list-style: none; }
.sf-embed-root .sf-emb-lower .sf-emb-kt-list > li::before { content: "✓"; position: absolute; top: 0; left: 0; color: var(--sf-white); font-weight: 700; }
.sf-embed-root .sf-emb-lower .sf-emb-kt :is(strong, .sf-emb-link) { color: var(--sf-white); }
.sf-embed-root .sf-emb-lower .sf-emb-kt .sf-emb-link { text-decoration: underline; }
@container sf-embed (max-width: 559px) {
.sf-embed-root .sf-emb-table--pairs { overflow-x: visible; }
.sf-embed-root .sf-emb-table--pairs table { min-width: 0; }
.sf-embed-root .sf-emb-table--pairs thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sf-embed-root .sf-emb-table--pairs :is(tbody, tr, th, td) { display: block; }
.sf-embed-root .sf-emb-table--pairs tbody th { padding: 10px 0 2px; border-bottom: 0; }
.sf-embed-root .sf-emb-table--pairs td { padding: 0 0 10px; }
}
.sf-embed-root .sf-emb-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sf-embed-root .sf-emb-fit-box { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px 18px 16px; border: 1px solid var(--sf-emb-fit-yes-line); border-radius: 3px; background: var(--sf-emb-fit-yes); color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-fit-box--no { border-color: var(--sf-emb-fit-no-line); background: var(--sf-emb-fit-no); }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-fit-label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--sf-emb-ink); font-weight: 700; }
.sf-embed-root .sf-emb-fit-text { display: flex; flex-direction: column; gap: 8px; }
.sf-embed-root .sf-emb-lower .sf-emb-fit-list { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0 0 0 20px; list-style: disc; }
.sf-embed-root .sf-emb-lower .sf-emb-fit-list > li { margin: 0; padding: 0; line-height: inherit; list-style: inherit; }
.sf-embed-root .sf-emb-mark { flex: none; width: 20px; height: 20px; }
.sf-embed-root .sf-emb-mark circle { fill: var(--sf-tc-plus); }
.sf-embed-root :is(.sf-emb-mark--no, .sf-emb-mark--con) circle { fill: var(--sf-tc-minus); }
.sf-embed-root .sf-emb-mark path { fill: none; stroke: var(--sf-tc-mark-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sf-embed-root .sf-emb-alt { display: flex; flex-direction: column; gap: 6px; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-alt-label { margin: 0; color: var(--sf-emb-ink); font-weight: 700; }
.sf-embed-root .sf-emb-lower .sf-emb-specs { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.sf-embed-root .sf-emb-lower .sf-emb-spec { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; padding: 14px 16px 12px; border: 1px solid var(--sf-emb-line); border-radius: 3px; background: var(--sf-white); list-style: none; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-spec-title { margin: 0; padding: 0; border: 0; color: var(--sf-emb-ink); font-size: var(--sf-emb-size-15); font-weight: 600; line-height: 1.35; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-spec-value { margin: 0; color: var(--sf-emb-blue); font-size: var(--sf-emb-size-21); font-weight: 300; line-height: 1.2; }
.sf-embed-root .sf-emb-lower .sf-emb-spec-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; list-style: none; }
.sf-embed-root .sf-emb-lower .sf-emb-spec-chips > li { margin: 0; padding: 1px 8px; border: 1px solid var(--sf-emb-line); border-radius: 3px; color: var(--sf-emb-fg); font-size: var(--sf-emb-size-13); line-height: 1.5; list-style: none; }
.sf-embed-root .sf-emb-spec-more { margin-top: auto; padding-top: 2px; }
.sf-embed-root .sf-emb-spec-toggle { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; margin: -10px 0; gap: 6px; color: var(--sf-emb-blue); font-size: var(--sf-emb-size-14); font-weight: 600; list-style: none; cursor: pointer; }
.sf-embed-root .sf-emb-spec-toggle::-webkit-details-marker { display: none; }
.sf-embed-root .sf-emb-spec-toggle::after { content: "+"; font-weight: 700; }
.sf-embed-root .sf-emb-spec-more[open] > .sf-emb-spec-toggle::after { content: "–"; }
.sf-embed-root .sf-emb-spec-text { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; font-size: var(--sf-emb-size-14); }
@container sf-embed (min-width: 560px) {
.sf-embed-root .sf-emb-lower .sf-emb-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@container sf-embed (min-width: 820px) {
.sf-embed-root .sf-emb-lower .sf-emb-specs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.sf-embed-root .sf-emb-lower .sf-emb-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; }
.sf-embed-root .sf-emb-lower .sf-emb-stats--1 { grid-template-columns: minmax(0, 1fr); }
.sf-embed-root .sf-emb-stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 4px; min-width: 0; padding: 12px 0 0; border-top: 2px solid var(--sf-emb-blue); }
.sf-embed-root .sf-emb-lower .sf-emb-stat-value { margin: 0; color: var(--sf-emb-blue); font-size: var(--sf-emb-size-32); font-weight: 300; line-height: 1.1; overflow-wrap: anywhere; }
.sf-embed-root .sf-emb-lower .sf-emb-stat-unit { color: var(--sf-emb-fg); font-size: var(--sf-emb-size-15); font-weight: 400; }
.sf-embed-root .sf-emb-lower .sf-emb-stat-label { margin: 0; color: var(--sf-emb-fg); font-size: var(--sf-emb-size-14); font-weight: 400; line-height: 1.4; }
@container sf-embed (min-width: 560px) {
.sf-embed-root .sf-emb-lower .sf-emb-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-embed-root .sf-emb-lower .sf-emb-stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-embed-root .sf-emb-lower .sf-emb-stats { gap: 20px; }
}
.sf-embed-root .sf-emb-quote { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--sf-emb-blue); }
.sf-embed-root .sf-emb-lower .sf-emb-quote-text { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; color: var(--sf-emb-ink); font-size: var(--sf-emb-size-17); font-weight: 300; line-height: 1.5; }
.sf-embed-root .sf-emb-quote-by { display: flex; flex-wrap: wrap; gap: 2px 10px; color: var(--sf-emb-fg); font-size: var(--sf-emb-size-14); }
.sf-embed-root .sf-emb-video { display: grid; grid-template-columns: minmax(0, 1fr); max-width: 100%; background: var(--sf-emb-panel); }
.sf-embed-root .sf-emb-lower .sf-emb-video-media { max-width: none; margin: 0; }
.sf-embed-root .sf-emb-video-copy { display: flex; flex-direction: column; justify-content: center; gap: 8px; min-width: 0; padding: 16px 18px 18px; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-video-title { margin: 0; padding: 0; border: 0; color: var(--sf-emb-heading); font-size: var(--sf-emb-size-19); font-weight: 300; line-height: 1.25; }
.sf-embed-root .sf-emb-video-text { display: flex; flex-direction: column; gap: 8px; }
@container sf-embed (min-width: 720px) {
.sf-embed-root .sf-emb-video { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.sf-embed-root .sf-emb-video-copy { padding: 22px 26px; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-video-title { font-size: var(--sf-emb-size-22); }
}
/* shop-finder.css */
.sf-embed-root .sf-emb-finder { display: flex; flex-direction: column; gap: 12px; min-width: 0; margin: 14px 0 0; font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-15); font-weight: 400; line-height: 1.5; letter-spacing: 0; text-transform: none; text-align: left; color: var(--sf-emb-fg); }
.sf-embed-root > .sf-emb-finder:first-child { margin-top: 0; }
.sf-embed-root .sf-emb-finder ul { margin: 0; padding: 0; list-style: none; }
.sf-embed-root .sf-emb-finder li { margin: 0; padding: 0; line-height: inherit; }
.sf-embed-root .sf-emb-finder p { margin: 0; }
.sf-embed-root .sf-emb-finder a { font-family: var(--sf-emb-font); text-decoration: none; }
.sf-embed-root .sf-emb-finder :focus-visible { outline: 2px solid var(--sf-emb-blue); outline-offset: 2px; }
.sf-embed-root .sf-emb-finder-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sf-embed-root .sf-emb-finder-q { flex: 0 1 auto; max-width: 42%; font-size: var(--sf-emb-size-17); font-weight: 600; line-height: 1.3; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-finder .sf-emb-finder-uses { display: flex; flex: 1; gap: 8px; min-width: 0; padding: 3px; overflow-x: auto; scrollbar-width: none; }
.sf-embed-root .sf-emb-finder-uses > li { flex: none; }
.sf-embed-root .sf-emb-finder .sf-emb-finder-use { display: flex; flex-direction: column; justify-content: center; min-height: 46px; padding: 5px 14px; border: 1px solid var(--sf-emb-line); border-radius: 3px; background: var(--sf-white); line-height: 1.2; white-space: nowrap; color: var(--sf-emb-blue); cursor: pointer; }
.sf-embed-root .sf-emb-finder-use b { font-weight: 600; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-finder-use small { font-size: var(--sf-emb-size-12); color: var(--sf-emb-fg); }
.sf-embed-root .sf-emb-finder .sf-emb-finder-use:hover { border-color: var(--sf-emb-blue); }
.sf-embed-root .sf-emb-finder .sf-emb-finder-use--on { border-color: var(--sf-emb-blue); background: var(--sf-emb-blue); }
.sf-embed-root .sf-emb-finder-use--on b, .sf-embed-root .sf-emb-finder-use--on small { color: var(--sf-white); }
.sf-embed-root .sf-emb-finder .sf-emb-finder-use--bild { flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; }
.sf-embed-root .sf-emb-finder-thumb { flex: none; width: 44px; height: 44px; margin-left: -9px; overflow: hidden; border-radius: 2px; background: radial-gradient(circle, var(--sf-white) 35%, var(--sf-emb-panel) 100%); isolation: isolate; }
.sf-embed-root .sf-emb-finder-thumb img { display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.sf-embed-root .sf-emb-finder-use-t { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.sf-embed-root .sf-emb-finder .sf-emb-finder-use--ico { flex-direction: row; align-items: center; justify-content: flex-start; gap: 8px; padding-left: 10px; }
.sf-embed-root .sf-emb-finder-ico { display: block; flex: none; width: 24px; height: 24px; color: var(--sf-emb-blue); fill: none; stroke: currentColor; overflow: visible; }
.sf-embed-root .sf-emb-finder-use--on .sf-emb-finder-ico { color: var(--sf-white); }
.sf-embed-root .sf-emb-finder-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; gap: 8px 24px; min-width: 0; padding: 14px 16px; border: 1px solid var(--sf-emb-tint-line); border-radius: 3px; background: var(--sf-emb-tint); }
.sf-embed-root .sf-emb-finder-panel--solo { grid-template-columns: minmax(0, 1fr); }
.sf-embed-root .sf-emb-finder-col { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.sf-embed-root .sf-emb-finder .sf-emb-finder-close { position: absolute; top: 0; right: 0; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 4px; background: transparent; font-size: var(--sf-emb-size-24); font-weight: 400; line-height: 1; color: var(--sf-emb-fg); cursor: pointer; }
.sf-embed-root .sf-emb-finder .sf-emb-finder-close:hover { background: var(--sf-white); color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-finder-who { padding-right: 34px; font-size: var(--sf-emb-size-15); font-weight: 700; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-finder-answer { max-width: 78ch; font-size: var(--sf-emb-size-16); line-height: 1.45; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-finder .sf-emb-finder-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-embed-root .sf-emb-finder-chips > li { padding: 3px 10px; border: 1px solid var(--sf-emb-tint-line); border-radius: 999px; background: var(--sf-white); font-size: var(--sf-emb-size-13); font-weight: 600; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-finder-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.sf-embed-root .sf-emb-finder .sf-emb-finder-more { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--sf-emb-blue); }
.sf-embed-root .sf-emb-finder .sf-emb-finder-more:hover { color: var(--sf-emb-blue-bright); }
.sf-embed-root .sf-emb-finder-h { padding-right: 34px; font-size: var(--sf-emb-size-15); font-weight: 700; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-finder-why { margin-top: -6px; font-size: var(--sf-emb-size-13); color: var(--sf-emb-fg); }
.sf-embed-root .sf-emb-finder .sf-emb-finder-check { display: flex; flex-direction: column; gap: 5px; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-finder-check > li::before { content: "✓"; margin-right: 8px; font-weight: 700; color: var(--sf-emb-blue); }
.sf-embed-root .sf-emb-finder .sf-emb-finder-btn { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 44px; padding: 8px 14px; border-radius: 3px; background: var(--sf-emb-blue-bright); font-size: var(--sf-emb-size-14); font-weight: 700; line-height: 1.3; text-align: center; color: var(--sf-white); }
.sf-embed-root .sf-emb-finder .sf-emb-finder-btn:hover { background: var(--sf-emb-blue); }
.sf-embed-root .sf-emb-finder .sf-emb-finder-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-self: stretch; gap: 8px; }
.sf-embed-root .sf-emb-finder-pick { display: flex; min-width: 0; }
.sf-embed-root .sf-emb-finder .sf-emb-finder-pick > a { display: flex; flex: 1; flex-direction: column; gap: 4px; min-width: 0; padding: 8px; border-radius: 3px; background: var(--sf-white); color: var(--sf-emb-fg); }
.sf-embed-root .sf-emb-finder .sf-emb-finder-pick > a:hover { box-shadow: 0 0 0 2px var(--sf-emb-blue); }
.sf-embed-root .sf-emb-finder-pick img { display: block; width: 56px; height: 56px; object-fit: contain; }
.sf-embed-root .sf-emb-finder-pick-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sf-embed-root .sf-emb-finder-pick-copy b { font-size: var(--sf-emb-size-14); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-finder-pick-copy small { font-size: var(--sf-emb-size-12); line-height: 1.3; }
.sf-embed-root .sf-emb-finder-price { font-size: var(--sf-emb-size-14); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sf-emb-blue); }
.sf-embed-root .sf-emb-finder-price:empty { display: none; }
@container sf-embed (max-width: 719px) {
.sf-embed-root .sf-emb-finder-row { flex-direction: column; align-items: stretch; gap: 6px; }
.sf-embed-root .sf-emb-finder-q { max-width: none; }
.sf-embed-root .sf-emb-finder--kurz .sf-emb-finder-row { flex-direction: row; align-items: center; gap: 10px; }
.sf-embed-root .sf-emb-finder--kurz .sf-emb-finder-q { flex: none; max-width: 34%; font-size: var(--sf-emb-size-15); }
.sf-embed-root .sf-emb-finder.sf-emb-finder--kurz .sf-emb-finder-uses { flex: 1 1 auto; }
.sf-embed-root .sf-emb-finder .sf-emb-finder-uses { flex: none; }
.sf-embed-root .sf-emb-finder-use small { display: none; }
.sf-embed-root .sf-emb-finder-thumb { width: 36px; height: 36px; }
.sf-embed-root .sf-emb-finder .sf-emb-finder-uses { padding-right: 24px; -webkit-mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent); mask-image: linear-gradient(90deg, black calc(100% - 28px), transparent); }
.sf-embed-root .sf-emb-finder-panel { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sf-embed-root .sf-emb-finder-answer { font-size: var(--sf-emb-size-15); }
.sf-embed-root .sf-emb-finder .sf-emb-finder-btn { align-self: stretch; }
}
/* shop-world-extras.css */
.sf-embed-root .sf-emb-club { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 14px 0 0; padding: 8px 12px; border: 1px solid var(--sf-emb-tint-line); border-left: 3px solid var(--sf-emb-blue); background: var(--sf-white); font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-14); font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--sf-emb-fg); }
.sf-embed-root .sf-emb-club-ico { flex: none; width: 20px; height: 20px; color: var(--sf-emb-blue); }
.sf-embed-root .sf-emb-club-label { font-weight: 700; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-club-text { font-weight: 600; color: var(--sf-emb-ink); }
.sf-embed-root .sf-emb-club-meta { font-size: var(--sf-emb-size-13); color: var(--sf-emb-mute); }
.sf-embed-root .sf-emb-club-meta time { font: inherit; color: inherit; }
.sf-embed-root .sf-emb-club-link { font-family: var(--sf-emb-font); font-weight: 600; color: var(--sf-emb-blue); text-decoration: none; white-space: nowrap; }
.sf-embed-root .sf-emb-club-link:hover, .sf-embed-root .sf-emb-club-link:focus-visible { color: var(--sf-emb-blue-bright); text-decoration: none; }
@container sf-embed (min-width: 720px) {
.sf-embed-root .sf-emb-club-link { margin-left: auto; }
}
@container sf-embed (max-width: 719px) {
.sf-embed-root .sf-emb-club { position: relative; flex-wrap: nowrap; box-sizing: border-box; min-height: 44px; padding: 6px 10px; white-space: nowrap; }
.sf-embed-root .sf-emb-club-label { flex: none; }
.sf-embed-root .sf-emb-club-text, .sf-embed-root .sf-emb-club-meta { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sf-embed-root .sf-emb-club-meta { flex-shrink: 100; }
.sf-embed-root .sf-emb-club-levels { display: none; }
.sf-embed-root .sf-emb-club-link { flex: none; margin-left: auto; font-size: var(--sf-emb-size-17); }
.sf-embed-root .sf-emb-club-link::after { content: ""; position: absolute; inset: 0; }
.sf-embed-root .sf-emb-club-cta { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
.sf-embed-root .sf-emb-service { display: flex; align-items: flex-start; gap: 14px; margin: 22px 0; padding: 18px 20px 16px; border: 1px solid var(--sf-emb-line); border-top: 3px solid var(--sf-emb-blue); background: var(--sf-white); font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-15); font-weight: 300; line-height: 1.5; color: var(--sf-emb-fg); }
.sf-embed-root .sf-emb-service-ico { flex: none; width: 28px; height: 28px; margin-top: 2px; color: var(--sf-emb-blue); }
.sf-embed-root .sf-emb-service-copy { min-width: 0; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-service-title, .sf-embed-root .sf-emb-service-title { margin: 0; font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-22); font-weight: 300; line-height: 1.2; letter-spacing: 0; text-transform: none; color: var(--sf-emb-heading); }
.sf-embed-root .sf-emb-service-text { margin: 6px 0 0; max-width: 96ch; font-size: var(--sf-emb-size-15); font-weight: 300; color: var(--sf-emb-fg); }
.sf-embed-root .sf-emb-service-links { margin: 10px 0 0; font-size: var(--sf-emb-size-14); font-weight: 700; }
.sf-embed-root .sf-emb-service-link { display: inline-flex; align-items: center; min-height: 44px; margin: -10px 0; font-weight: 700; text-decoration: none; }
@container sf-embed (max-width: 719px) {
.sf-embed-root .sf-emb-service { padding: 14px 14px 12px; }
.sf-embed-root .sf-emb-lower .sf-hub-blocks .sf-emb-service-title, .sf-embed-root .sf-emb-service-title { font-size: var(--sf-emb-size-19); }
}
/* shop-product.css */
.sf-emb-prod { --sf-emb-prod-night: #18222c; --sf-emb-prod-beam: #ffe9a8; --sf-emb-prod-beam-core: #fff4cf; --sf-emb-prod-scrim: rgba(20, 24, 28, 0.45); --sf-emb-prod-shadow: rgba(20, 24, 28, 0.18); --sf-emb-prod-size-10: 10px; --sf-emb-prod-size-11: 11px; --sf-emb-prod-size-30: 30px; }
.sf-embed-root.sf-emb-prod { font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-15); font-weight: 400; line-height: 1.5; letter-spacing: 0; color: var(--sf-emb-fg); }
.sf-emb-prod-tip { display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 14px; border: 1px solid var(--sf-emb-tint-line); border-left: 4px solid var(--sf-emb-blue); border-radius: 3px; background: var(--sf-emb-tint); color: var(--sf-emb-fg); font-weight: 400; text-align: left; text-decoration: none; }
.sf-emb-prod-tip:hover, .sf-emb-prod-tip:focus-visible { box-shadow: 0 0 0 2px var(--sf-emb-blue); outline: 0; }
.sf-emb-prod-tip-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sf-emb-prod-tip-h { font-size: var(--sf-emb-size-16); font-weight: 700; line-height: 1.25; color: var(--sf-emb-ink); }
.sf-emb-prod-tip-h small { font-size: inherit; font-weight: 400; color: var(--sf-emb-fg); }
.sf-emb-prod-tip-z { display: flex; flex-wrap: wrap; gap: 2px 14px; font-size: var(--sf-emb-size-14); color: var(--sf-emb-fg); }
.sf-emb-prod-tip-z span { color: var(--sf-emb-ink); }
.sf-emb-prod-ok { margin-right: 4px; font-weight: 700; color: var(--sf-emb-blue); }
.sf-emb-prod-tip-c { font-size: var(--sf-emb-size-14); font-weight: 700; white-space: nowrap; color: var(--sf-emb-blue); }
.sf-emb-prod-dialog { position: fixed; inset: 0 0 0 auto; z-index: 2147483000; width: min(600px, 100%); max-width: none; height: 100%; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--sf-white); box-shadow: -8px 0 30px var(--sf-emb-prod-shadow), 0 0 0 100vmax var(--sf-emb-prod-scrim); }
.sf-emb-prod-karte { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--sf-white); color: var(--sf-emb-fg); text-align: left; }
.sf-emb-prod-top { display: flex; align-items: center; gap: 10px; padding: 18px 28px; border-bottom: 1px solid var(--sf-emb-line); }
.sf-emb-prod-top-t { flex: 1; font-size: var(--sf-emb-size-22); font-weight: 700; color: var(--sf-emb-ink); }
.sf-emb-prod-x { display: flex; flex: none; align-items: center; justify-content: center; box-sizing: border-box; width: 44px; height: 44px; margin: -10px -12px -10px 0; padding: 0; border-radius: 4px; font-size: var(--sf-emb-prod-size-30); line-height: 1; color: var(--sf-emb-ink); }
.sf-emb-prod-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: 22px 28px 28px; font-size: var(--sf-emb-size-16); line-height: 1.5; }
.sf-emb-prod-kopf { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: center; padding-bottom: 22px; }
.sf-emb-prod-kopf img { width: 120px; height: 120px; object-fit: contain; border: 1px solid var(--sf-emb-line); background: var(--sf-white); }
.sf-emb-prod-name { font-size: var(--sf-emb-size-13); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sf-emb-fg); }
.sf-emb-prod-label { margin: 4px 0 8px; font-size: var(--sf-emb-size-28); font-weight: 800; line-height: 1.1; text-wrap: balance; color: var(--sf-emb-ink); }
.sf-emb-prod-fakten { font-size: var(--sf-emb-size-15); font-weight: 700; color: var(--sf-emb-ink); }
.sf-emb-prod-q { display: flex; flex-direction: column; gap: 12px; padding: 22px 0; border-top: 1px solid var(--sf-emb-line); }
.sf-emb-prod-q h3 { font-size: var(--sf-emb-size-22); font-weight: 700; line-height: 1.2; color: var(--sf-emb-ink); }
.sf-emb-prod-q h3 small { display: block; margin-top: 2px; font-size: var(--sf-emb-size-14); font-weight: 400; color: var(--sf-emb-fg); }
.sf-emb-prod-liste { display: flex; flex-direction: column; gap: 8px; }
.sf-emb-prod-liste li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; color: var(--sf-emb-ink); }
.sf-emb-prod-liste b { font-weight: 700; color: var(--sf-emb-blue); }
.sf-emb-prod-liste .sf-emb-prod-nein, .sf-emb-prod-liste .sf-emb-prod-nein b { color: var(--sf-emb-fg); }
.sf-emb-prod-euses { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.sf-emb-prod-euse { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 3px; border-radius: 8px; font-size: var(--sf-emb-size-13); font-weight: 600; text-align: center; color: var(--sf-emb-mute); }
.sf-emb-prod-euse svg { width: 24px; height: 24px; }
.sf-emb-prod-euse b { font-size: var(--sf-emb-size-12); font-weight: 700; line-height: 1; }
.sf-emb-prod-euse-ja { color: var(--sf-emb-blue); }
.sf-emb-prod-euse-ja span { color: var(--sf-emb-ink); }
.sf-emb-prod-euse:disabled { cursor: default; }
.sf-emb-prod-euse:hover:not(:disabled), .sf-emb-prod-euse[aria-pressed="true"] { background: var(--sf-emb-panel); }
.sf-emb-prod-say { line-height: 1.45; color: var(--sf-emb-ink); }
.sf-emb-prod-lnk { font-weight: 600; text-decoration: none; color: var(--sf-emb-blue); }
.sf-emb-prod-lnk:hover { color: var(--sf-emb-blue-bright); }
.sf-emb-prod-cap { font-weight: 600; color: var(--sf-emb-ink); }
.sf-emb-prod-cap small { font-size: inherit; font-weight: 400; color: var(--sf-emb-fg); }
.sf-emb-prod-beam { display: block; width: 100%; height: auto; }
.sf-emb-prod-beam-bg { fill: var(--sf-emb-prod-night); }
.sf-emb-prod-beam-weit { fill: var(--sf-emb-prod-beam); fill-opacity: 0.28; }
.sf-emb-prod-beam-nah { fill: var(--sf-emb-prod-beam); fill-opacity: 0.5; }
.sf-emb-prod-beam-punkt { fill: var(--sf-emb-prod-beam-core); }
.sf-emb-prod-beam-marke { stroke: var(--sf-white); stroke-opacity: 0.4; stroke-width: 1; }
.sf-emb-prod-skala { position: relative; height: 16px; font-size: var(--sf-emb-prod-size-10); font-variant-numeric: tabular-nums; color: var(--sf-emb-fg); }
.sf-emb-prod-skala span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.sf-emb-prod-meters { display: flex; flex-direction: column; gap: 8px; }
.sf-emb-prod-meter { display: grid; grid-template-columns: 96px 50px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.sf-emb-prod-meter.sf-emb-prod-meter-kurz { grid-template-columns: 50px minmax(0, 1fr) auto; }
.sf-emb-prod-meter b { font-weight: 600; color: var(--sf-emb-ink); }
.sf-emb-prod-meter em { font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-emb-prod-dots { display: inline-flex; gap: 4px; }
.sf-emb-prod-dots span { width: 12px; height: 12px; border-radius: 50%; background: var(--sf-emb-line); }
.sf-emb-prod-dots .sf-emb-prod-dot-an { background: var(--sf-emb-blue); }
.sf-emb-prod-fold summary { cursor: pointer; font-size: var(--sf-emb-size-14); font-weight: 600; color: var(--sf-emb-blue); }
.sf-emb-prod-fold p { padding-top: 10px; font-size: var(--sf-emb-size-14); }
.sf-emb-prod-alts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sf-emb-prod-alt { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; height: 100%; padding: 12px; border: 1px solid var(--sf-emb-line); font-size: var(--sf-emb-size-14); line-height: 1.3; text-align: left; text-decoration: none; color: var(--sf-emb-fg); }
.sf-emb-prod-alt:hover, .sf-emb-prod-alt:focus-visible { border-color: var(--sf-emb-blue); }
.sf-emb-prod-alt img { width: 100%; height: 84px; margin-bottom: 4px; object-fit: contain; }
.sf-emb-prod-alt small { font-size: var(--sf-emb-prod-size-11); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sf-emb-blue); }
.sf-emb-prod-alt b { color: var(--sf-emb-ink); }
.sf-emb-prod-alt-t { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sf-emb-prod-preis { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--sf-emb-blue); }
.sf-emb-prod-preis:empty { display: none; }
.sf-emb-prod-vgl-h { margin-top: 8px; font-size: var(--sf-emb-size-14); font-weight: 700; color: var(--sf-emb-ink); }
.sf-emb-prod-vgl-w { overflow-x: auto; }
.sf-emb-prod-vgl { width: 100%; font-size: var(--sf-emb-size-14); line-height: 1.3; }
.sf-emb-prod-vgl th, .sf-emb-prod-vgl td { padding: 7px 10px 7px 0; border-top: 1px solid var(--sf-emb-line); font-weight: 400; text-align: left; vertical-align: top; font-variant-numeric: tabular-nums; color: var(--sf-emb-ink); }
.sf-emb-prod-vgl thead th, .sf-emb-prod-vgl thead td { border-top: 0; font-weight: 700; }
.sf-emb-prod-vgl tbody th { color: var(--sf-emb-fg); }
.sf-emb-prod-vgl .sf-emb-prod-gut { font-weight: 700; color: var(--sf-emb-blue); }
.sf-emb-prod-vgl .sf-emb-prod-leer { color: var(--sf-emb-mute); }
.sf-emb-prod-vgl .sf-emb-prod-preis { font-weight: 400; color: var(--sf-emb-ink); }
.sf-emb-prod-vgl-preis:not(:has(.sf-emb-prod-preis:not(:empty))) { display: none; }
.sf-emb-prod-fuss { padding: 16px 28px; border-top: 1px solid var(--sf-emb-line); background: var(--sf-emb-panel); }
@container sf-embed (max-width: 519px) {
.sf-emb-prod-top, .sf-emb-prod-body, .sf-emb-prod-fuss { padding-inline: 16px; }
.sf-emb-prod-kopf { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; }
.sf-emb-prod-kopf img { width: 84px; height: 84px; }
.sf-emb-prod-label { font-size: var(--sf-emb-size-24); }
.sf-emb-prod-alts { grid-template-columns: minmax(0, 1fr); }
.sf-emb-prod-alt { flex-direction: row; align-items: center; gap: 12px; }
.sf-emb-prod-alt img { flex: none; width: 64px; height: 64px; margin: 0; }
.sf-emb-prod-meter { grid-template-columns: 84px 50px minmax(0, 1fr) auto; gap: 8px; }
}
.sf-emb-prod-h { margin-bottom: 10px; font-size: var(--sf-emb-prod-size-30); font-weight: 400; line-height: 1.2; color: var(--sf-emb-blue); }
.sf-emb-prod-kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.sf-emb-prod-kachel { position: relative; display: block; height: 160px; overflow: hidden; background: var(--sf-emb-tile); color: var(--sf-white); text-decoration: none; }
.sf-emb-prod-kachel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.sf-emb-prod-kachel:hover img { transform: scale(1.03); }
.sf-emb-prod-kachel-symbol { background: var(--sf-emb-blue-deep); }
.sf-emb-prod-kachel svg { position: absolute; top: 16px; left: 50%; width: 64px; height: 64px; transform: translateX(-50%); fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.sf-emb-prod-band { position: absolute; right: 0; bottom: 0; left: 0; padding: 9px 12px 10px; background: var(--sf-emb-tile-band); font-size: var(--sf-emb-size-14); font-weight: 400; line-height: 1.3; color: var(--sf-white); }
.sf-emb-prod-band b { display: block; font-weight: 700; text-transform: uppercase; }
.sf-emb-prod-band span { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@container sf-embed (max-width: 719px) {
.sf-emb-prod-h { font-size: var(--sf-emb-size-24); }
.sf-emb-prod-kacheln { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; gap: 10px; overflow-x: auto; scrollbar-width: none; }
.sf-emb-prod-kachel { height: 132px; }
}
@media (prefers-reduced-motion: reduce) {
.sf-emb-prod-kachel img { transition: none; }
}
/* shop-quick-links.css */
.sf-embed-root .sf-emb-lower .sf-emb-quick { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sf-embed-root .sf-emb-lower .sf-emb-quick .sf-emb-quick-list { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 0 0 6px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.sf-embed-root .sf-emb-lower .sf-emb-quick .sf-emb-quick-item { flex: 0 0 auto; margin: 0; padding: 0; list-style: none; scroll-snap-align: start; }
.sf-embed-root .sf-emb-lower .sf-emb-quick .sf-emb-quick-item::before, .sf-embed-root .sf-emb-lower .sf-emb-quick .sf-emb-quick-item::marker { content: none; }
.sf-embed-root .sf-emb-lower .sf-emb-quick .sf-emb-quick-link { display: inline-flex; align-items: center; box-sizing: border-box; min-height: 44px; padding: 7px 12px; border: 1px solid var(--sf-emb-line); border-radius: 3px; background: var(--sf-white); color: var(--sf-emb-blue); font-family: var(--sf-emb-font); font-size: var(--sf-emb-size-14); font-weight: 400; line-height: 1.3; text-decoration: none; white-space: nowrap; }
.sf-embed-root .sf-emb-lower .sf-emb-quick .sf-emb-quick-link:hover, .sf-embed-root .sf-emb-lower .sf-emb-quick .sf-emb-quick-link:focus-visible { border-color: var(--sf-emb-blue); color: var(--sf-emb-blue-deep); text-decoration: none; }
.sf-embed-root .sf-emb-lower .sf-emb-quick .sf-emb-quick-link:focus-visible { outline: 2px solid var(--sf-emb-blue-bright); outline-offset: 2px; }
@container sf-embed (min-width: 720px) {
.sf-embed-root .sf-emb-lower .sf-emb-quick .sf-emb-quick-list { flex-wrap: wrap; padding-bottom: 0; overflow: visible; }
}
/* shop-embed.css */
.sf-embed-root { container: sf-embed / inline-size; box-sizing: border-box; font-family: var(--sf-ui-arial); font-size: var(--sf-size-16); line-height: 1.5; color: var(--sf-ink); }
.sf-embed-root *, .sf-embed-root *::before, .sf-embed-root *::after { box-sizing: inherit; }
.sf-embed-root.sf-delivery { min-height: 0; background: transparent; }
.sf-embed-root.sf-embed-nav2, .sf-embed-root[data-embed="magazine-nav-promo"] { font-family: var(--sf-body); line-height: 1.4; }
.sf-embed-root .sf-embed-nav-brand { display: flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; padding: 12px 0 4px; color: var(--sf-ink); text-decoration: none; }
.sf-embed-root .sf-embed-nav-brand-signet { flex: 0 0 auto; width: 26px; height: 26px; }
.sf-embed-root .sf-embed-nav-brand-wort { font-size: var(--sf-marke-wort-shop); font-weight: 800; line-height: 1; letter-spacing: 0.03em; text-transform: uppercase; }
.sf-embed-root .sf-embed-nav-brand-von { font-size: var(--sf-size-13); line-height: 1.3; color: var(--sf-muted); }
.sf-embed-root .sf-embed-nav-bar { display: flex; align-items: center; gap: 8px 32px; border-bottom: 1px solid var(--sf-line); }
.sf-embed-root .sf-embed-nav, .sf-embed-root .sf-embed-nav-apps { float: none; background: transparent; }
.sf-embed-root .sf-embed-nav { flex: 1 1 auto; min-width: 0; margin: 0; }
.sf-embed-root .sf-embed-nav-list { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0 28px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.sf-embed-root .sf-embed-nav-list li, .sf-embed-root .sf-embed-nav-apps-list li { flex-shrink: 0; margin: 0; padding: 0; line-height: inherit; list-style: none; }
.sf-embed-root .sf-embed-nav-list a { display: flex; align-items: center; min-height: 60px; padding: 3px 0 0; border-bottom: 3px solid transparent; color: var(--sf-ink); font-size: var(--sf-size-15); font-weight: 700; text-decoration: none; white-space: nowrap; }
.sf-embed-root .sf-embed-nav-list a:hover, .sf-embed-root .sf-embed-nav-list a[aria-current="page"] { color: var(--sf-area, var(--sf-blue)); }
.sf-embed-root .sf-embed-nav-list a[aria-current="page"] { border-color: var(--sf-area, var(--sf-blue)); }
.sf-embed-root .sf-embed-nav-tools { display: flex; flex-shrink: 0; align-items: center; gap: 16px; }
.sf-embed-root .sf-embed-nav-inhaltslinks { display: inline-flex; align-items: center; gap: var(--sf-hm-s4); }
.sf-embed-root .sf-embed-nav-all { color: var(--sf-ink); font-size: var(--sf-size-14); font-weight: 700; text-decoration: none; white-space: nowrap; }
.sf-embed-root .sf-embed-nav-all:hover { color: var(--sf-area, var(--sf-blue)); }
.sf-embed-root .sf-embed-nav-search { display: flex; align-items: stretch; margin: 0; padding: 0; border: 1px solid var(--sf-line); background: var(--sf-white); }
.sf-embed-root .sf-embed-nav-search input { width: 220px; min-width: 0; height: auto; min-height: 40px; margin: 0; padding: 8px 12px; border: 0; border-radius: 0; box-shadow: none; background: transparent; color: var(--sf-ink); font: inherit; font-size: var(--sf-size-14); appearance: none; }
.sf-embed-root .sf-embed-nav-search button { flex-shrink: 0; min-height: 40px; margin: 0; padding: 0 14px; border: 0; border-left: 1px solid var(--sf-line); border-radius: 0; box-shadow: none; background: var(--sf-surface); color: var(--sf-ink); font: inherit; font-size: var(--sf-size-14); font-weight: 700; cursor: pointer; }
.sf-embed-root .sf-embed-nav-search:focus-within { outline: 2px solid var(--sf-area, var(--sf-blue)); outline-offset: 1px; }
.sf-embed-root .sf-embed-nav-apps { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 0; border-bottom: 1px solid var(--sf-line); overflow-x: auto; scrollbar-width: none; }
.sf-embed-root .sf-embed-nav-apps-label { display: inline-flex; flex-shrink: 0; align-items: center; gap: 7px; padding: 8px 8px 8px 0; color: var(--sf-area, var(--sf-blue)); font-size: var(--sf-size-11); font-weight: 650; letter-spacing: 0.1em; text-decoration: none; text-transform: var(--sf-label-case); white-space: nowrap; }
.sf-embed-root .sf-embed-nav-apps-list { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-embed-root .sf-embed-nav-app a { display: inline-flex; align-items: center; padding: 7px 12px; border: 1px solid var(--sf-line); background: var(--sf-surface); color: var(--sf-ink); font-size: var(--sf-size-13); font-weight: 650; text-decoration: none; white-space: nowrap; }
.sf-embed-root .sf-embed-nav-app a:hover { border-color: var(--sf-area, var(--sf-blue)); background: var(--sf-area, var(--sf-blue)); color: var(--sf-white); }
.sf-embed-root.sf-embed-nav2 a:focus-visible, .sf-embed-root.sf-embed-nav2 button:focus-visible { outline: 2px solid var(--sf-area, var(--sf-blue)); outline-offset: 2px; }
@container sf-embed (max-width: 760px) {
.sf-embed-root .sf-embed-nav-bar { flex-wrap: wrap; gap: 0; }
.sf-embed-root .sf-embed-nav { flex-basis: 100%; }
.sf-embed-root .sf-embed-nav-list { gap: 0 22px; }
.sf-embed-root .sf-embed-nav-list a { min-height: 48px; font-size: var(--sf-size-14); }
.sf-embed-root .sf-embed-nav-tools { flex-basis: 100%; flex-wrap: wrap; gap: 12px; padding: 10px 0; border-top: 1px solid var(--sf-line); }
.sf-embed-root .sf-embed-nav-search { flex: 1 1 100%; min-width: 0; }
.sf-embed-root .sf-embed-nav-search input { flex: 1 1 auto; width: 100%; }
}
.sf-embed-root[data-embed="magazine-nav-promo"] .sf-topbar-ad { margin: 12px 0 4px; }
.sf-embed-root.sf-embed-nav3 { font-family: var(--sf-body); line-height: 1.4; }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-brand, .sf-embed-root.sf-embed-nav3 .sf-embed-nav-bar, .sf-embed-root.sf-embed-nav3 .sf-embed-nav-sub, .sf-embed-root.sf-embed-nav3[data-embed="magazine-nav-promo"] .sf-topbar-ad { width: min(var(--sf-content), calc(100% - 2 * clamp(20px, 4cqw, 64px))); margin-inline: auto; }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-search input { width: 200px; }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-search-go { display: inline-flex; align-items: center; justify-content: center; width: 44px; padding: 0; border-left: 0; background: var(--sf-blue); color: var(--sf-white); }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-search-go:hover { background: var(--sf-ink); }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-search-go svg { display: block; flex-shrink: 0; stroke-linecap: round; }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-sub { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 22px; float: none; padding: 10px 0; border-bottom: 1px solid var(--sf-line); background: transparent; overflow-x: auto; scrollbar-width: none; }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-group { display: flex; flex-shrink: 0; align-items: center; gap: 8px; }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-group + .sf-embed-nav-group { padding-left: 22px; border-left: 1px solid var(--sf-line); }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-group-label { display: inline-flex; flex-shrink: 0; align-items: center; gap: 7px; padding: 8px 4px 8px 0; color: var(--sf-area, var(--sf-blue)); font-size: var(--sf-size-11); font-weight: 650; letter-spacing: 0.1em; text-decoration: none; text-transform: var(--sf-label-case); white-space: nowrap; }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-group-label svg { flex-shrink: 0; }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-group-list { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-group-list li { flex-shrink: 0; margin: 0; padding: 0; line-height: inherit; list-style: none; }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-group-list a { display: inline-flex; align-items: center; padding: 7px 12px; border: 1px solid var(--sf-line); background: var(--sf-surface); color: var(--sf-ink); font-size: var(--sf-size-13); font-weight: 650; text-decoration: none; white-space: nowrap; }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-group-list a:hover, .sf-embed-root.sf-embed-nav3 .sf-embed-nav-group-list a[aria-current="page"] { border-color: var(--sf-area, var(--sf-blue)); background: var(--sf-area, var(--sf-blue)); color: var(--sf-white); }
.sf-embed-root.sf-embed-nav3 a:focus-visible, .sf-embed-root.sf-embed-nav3 button:focus-visible { outline: 2px solid var(--sf-area, var(--sf-blue)); outline-offset: 2px; }
@container sf-embed (max-width: 760px) {
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-search input { flex: 1 1 auto; width: 100%; }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-sub { gap: 0 16px; padding: 8px 0; }
.sf-embed-root.sf-embed-nav3 .sf-embed-nav-group + .sf-embed-nav-group { padding-left: 16px; }
}
.sf-embed-root .sf-lp-sticky { position: static; top: auto; }
.sf-embed-root .sf-wb-kapitel { position: static; top: auto; }
.sf-embed-root .sf-hero-zoom, .sf-embed-root .sf-hero-copy-in > * { animation-name: none; }
.sf-embed-root.sf-motion .sf-hero-zoom { animation-name: sf-hero-zoom; }
.sf-embed-root.sf-motion .sf-hero-copy-in > * { animation-name: sf-hero-copy-in; }
.sf-embed-root.sf-motion [data-sf-reveal] { transition: opacity 0.55s ease-out, transform 0.55s ease-out; }
.sf-embed-root.sf-motion [data-sf-reveal]:not([data-sf-revealed]) { opacity: 0; transform: translateY(24px); }
@media (prefers-reduced-motion: reduce) {
.sf-embed-root.sf-motion .sf-hero-zoom, .sf-embed-root.sf-motion .sf-hero-copy-in > * { animation-name: none; }
.sf-embed-root.sf-motion [data-sf-reveal]:not([data-sf-revealed]) { opacity: 1; transform: none; }
}
.sf-embed-root .sf-nav-neu { margin-left: var(--sf-hm-s1); padding: 2px var(--sf-hm-s1); color: var(--sf-ink); background: var(--sf-zz-signal); font-size: var(--sf-size-10); }