/* * Shared motion tokens (release pill handoff, favourites filter dock, auth soft-nav enter). * JS reads --sv-motion-duration-* via getComputedStyle(document.documentElement). */ html { /* Fallback until template.main.php sets --sv-current-season-color on . */ --sv-current-season-color: #8cba18; --sv-widget-surface-bg: linear-gradient(145deg, color-mix(in srgb, var(--sv-current-season-color, #e83331) 1.5%, #fff) 0%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, #fff) 48%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, #fff) 100%); --sv-widget-surface-orb-primary: color-mix(in srgb, var(--sv-current-season-color, #e83331) 6%, transparent); --sv-widget-surface-orb-secondary: color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, transparent); --sv-widget-surface-orb-red: var(--sv-widget-surface-orb-primary); --sv-widget-surface-orb-gold: var(--sv-widget-surface-orb-secondary); --sv-widget-surface-border: 1px solid rgba(255, 255, 255, 0.62); --sv-widget-surface-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%); --sv-widget-surface-shadow: 0 24px 55px rgba(80, 52, 38, 0.13); /* Squircle media frame tints (slider thumb shell) — keep in sync with surface intensity passes */ --sv-widget-media-frame-fill-a: color-mix(in srgb, var(--sv-current-season-color, #e83331) 10%, #fff); --sv-widget-media-frame-fill-b: color-mix(in srgb, var(--sv-current-season-color, #e83331) 8%, #fff); --sv-widget-media-frame-border: color-mix(in srgb, var(--sv-current-season-color, #e83331) 14%, rgba(116, 106, 100, 0.16)); --sv-widget-media-frame-inset: color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, transparent); --sv-motion-duration-fast: 0.15s; --sv-motion-duration-ui: 0.18s; --sv-motion-duration-handoff: 0.22s; --sv-motion-duration-filter-handoff: 0.26s; --sv-motion-duration-page-enter: 0.24s; --sv-motion-ease-standard: cubic-bezier(0.22, 1, 0.36, 1); --sv-motion-ease-handoff: cubic-bezier(0.22, 1.18, 0.36, 1); --sv-motion-chrome-pill-opacity: 0.9; --sv-motion-chrome-docked-opacity: 0.6; --sv-motion-fav-filter-docked-opacity: 0.7; --sv-motion-handoff-opacity: 0.6; --sv-motion-handoff-filter-opacity: 0.7; /* Page hero typography — 85% opacity (15% transparent) so season orbs read through. --sv-header-text-color / --sv-subheader-text-color are optional overrides; without a fallback, `p.subHeadline` inside `.string-content` inherited body grey instead of CI red. */ --sv-page-header-color: var(--sv-header-text-color, color-mix(in srgb, #342c28 85%, transparent)); --sv-page-subheader-color: var(--sv-subheader-text-color, color-mix(in srgb, #e83331 85%, transparent)); --sv-motion-handoff-translate-y: 3px; --sv-motion-handoff-scale: 0.972; --sv-motion-handoff-filter-scale: 0.986; --sv-motion-handoff-rotate: -0.25deg; --sv-motion-pill-title-lift-y: -1px; --sv-motion-pill-title-scale: 1.025; --sv-motion-pill-title-shadow: 0 10px 24px rgba(80, 52, 38, 0.18); } @media (prefers-reduced-motion: reduce) { html { --sv-motion-duration-handoff: 1ms; --sv-motion-duration-filter-handoff: 1ms; --sv-motion-duration-page-enter: 1ms; --sv-motion-duration-ui: 1ms; } } /* Auth / search soft-nav: brief enter on #main-content swap (svAuthBoot.js). */ #main-content { transition: opacity var(--sv-motion-duration-page-enter) var(--sv-motion-ease-standard), transform var(--sv-motion-duration-page-enter) var(--sv-motion-ease-standard); } #main-content.sv-main-content--entering { opacity: 0.94; transform: translateY(4px); } @media (prefers-reduced-motion: reduce) { #main-content { transition: none; } #main-content.sv-main-content--entering { opacity: 1; transform: none; } } /* * Icon squircle — match release-layer cover (first reference: ~18px on ~100px thumb). * lg = layer/modal head; md = list/topic/favourites covers; sm = compact row tiles (~22–28px). */ .webRoot.moduleDesign { --sv-icon-squircle-radius-sm: 12px; --sv-icon-squircle-radius-md: 16px; --sv-icon-squircle-radius-lg: 18px; --sv-icon-squircle-bg: #fff; --sv-icon-squircle-shadow: 0 12px 26px rgba(85, 65, 48, 0.1); --sv-icon-squircle-shadow-sm: 0 4px 10px rgba(85, 65, 48, 0.1); } /* 15px vertical rhythm: module stack + viewport edges (desktop + mobile). */ #main-content:has(.webRoot.moduleDesign) { --moduleDesign-module-gap: 15px; padding-top: var(--moduleDesign-module-gap) !important; padding-bottom: var(--moduleDesign-module-gap) !important; } /* * moduleDesign pages: flex footer band (chips + legal links in-flow). * Core sticky footer: #main-wrapper min-height calc(100dvh - var(--sv-chrome-top)); moduleDesign footer in-flow (relative). * 15px #main-content gap only applies when the footer follows content in the layout. */ #main-wrapper:has(.webRoot.moduleDesign) { display: flex; flex-direction: column; } #main-wrapper:has(.webRoot.moduleDesign) > .wrap-inner { width: 100%; min-width: 0; box-sizing: border-box; } #main-wrapper:has(.webRoot.moduleDesign) > footer { margin-top: auto; position: relative !important; bottom: auto !important; left: 0 !important; right: auto !important; width: 100% !important; min-width: 320px !important; clear: both; display: flex; flex-direction: column; justify-content: center; align-items: stretch; min-height: 72px; padding: 10px 0 14px; box-sizing: border-box; z-index: auto; } #main-wrapper:has(.webRoot.moduleDesign) > footer ul { margin-top: 0 !important; } #main-wrapper:has(.webRoot.moduleDesign) > footer .socialIcons { position: static !important; float: none !important; left: auto !important; right: auto !important; bottom: auto !important; align-self: center; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: auto; border-top: 0 !important; border-left: 0 !important; min-width: 0 !important; } #main-wrapper:has(.webRoot.moduleDesign) > footer .navigation.footer { display: block !important; position: static !important; bottom: auto !important; right: auto !important; left: auto !important; align-self: stretch; width: 100%; box-sizing: border-box; margin: 10px 0 0; padding: 0 16px; text-align: center; } #main-wrapper:has(.webRoot.moduleDesign) > footer .navigation.footer > ul { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0 !important; } #main-wrapper:has(.webRoot.moduleDesign) > footer .navigation.footer > ul > li { float: none !important; } .webRoot.moduleDesign { --moduleDesign-module-gap: 15px; /* Canonical widget/module card surface (.releaseStatsWidget-card) */ --sv-widget-surface-shadow: 0 24px 55px rgba(80, 52, 38, 0.13); --sv-widget-surface-radius: 24px; --sv-widget-surface-border: 1px solid rgba(255, 255, 255, 0.62); --sv-widget-surface-highlight: linear-gradient(135deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 42%); --sv-widget-inset-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.52)); --sv-widget-inset-border: 1px solid rgba(255, 255, 255, 0.58); --sv-widget-inset-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.76), 0 12px 26px rgba(85, 65, 48, 0.08); position: relative; display: flow-root; padding: 0; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; } /* * Favourites / body-mounted release layer: `#openReleaseById` appends `#sv-global-release-layer-host` inside this * wrapper so all `.webRoot.moduleDesign .releaseView-container …` tokens apply. Zero footprint in normal flow * (only fixed descendants paint); neutralise stack/margin rules meant for real module stacks. */ #sv-global-release-md-wrap.webRoot.moduleDesign.sv-global-release-moduleDesign { position: static !important; display: block !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: 0 !important; overflow: visible !important; background: transparent !important; box-shadow: none !important; border: 0 !important; pointer-events: none; } #sv-global-release-md-wrap.webRoot.moduleDesign.sv-global-release-moduleDesign > #sv-global-release-layer-host { margin-bottom: 0 !important; } /* Full-viewport portal stacking (wrap is `height:0` in flow — fixed layer needs its own band). */ body.sv-release-layer-open #sv-global-release-md-wrap.webRoot.moduleDesign.sv-global-release-moduleDesign { position: fixed; inset: 0; z-index: 10060; width: 100%; height: auto !important; max-height: none !important; pointer-events: none; } /* Widget CSS files set their own margins; stack spacing lives on .webRoot.moduleDesign only. */ .webRoot.moduleDesign .releaseStatsWidget, .webRoot.moduleDesign .releaseFavouritesWidget { margin: 0; } .webRoot.moduleDesign > .moduleContainer.awardViewer, .webRoot.moduleDesign .blankContainer > .moduleContainer.awardViewer, .webRoot.moduleDesign .contentArea > .moduleContainer.awardViewer { margin-top: 0; margin-bottom: var(--moduleDesign-module-gap); } .webRoot.moduleDesign > * { position: relative; z-index: 1; margin-bottom: var(--moduleDesign-module-gap); } .webRoot.moduleDesign:after, .webRoot.moduleDesign > .blankContainer:after, .webRoot.moduleDesign > .contentArea:after { content: ""; display: block; clear: both; } .webRoot.moduleDesign > .blankContainer, .webRoot.moduleDesign > .contentArea { display: flow-root; margin-top: 0; margin-bottom: 0; padding-top: 0; } .webRoot.moduleDesign .blankContainer > :not(.node-toolBar), .webRoot.moduleDesign .contentArea > :not(.node-toolBar) { position: relative; z-index: 1; margin-bottom: var(--moduleDesign-module-gap); } .webRoot.moduleDesign > *:last-child, .webRoot.moduleDesign .blankContainer > :not(.node-toolBar):last-child, .webRoot.moduleDesign .contentArea > :not(.node-toolBar):last-child { margin-bottom: 0; } .webRoot.moduleDesign .releaseViewer.slider, .webRoot.moduleDesign .blankContainer > .moduleContainer, .webRoot.moduleDesign .blankContainer > .testimonialViewer, .webRoot.moduleDesign .blankContainer > .subscriptionPicker, .webRoot.moduleDesign .blankContainer > .stripeShop, .webRoot.moduleDesign .blankContainer > .releaseStatsWidget, .webRoot.moduleDesign .blankContainer > .releaseFavouritesWidget, .webRoot.moduleDesign .blankContainer > .releaseSearch, .webRoot.moduleDesign .blankContainer > .video, .webRoot.moduleDesign .blankContainer > .image, .webRoot.moduleDesign .blankContainer > .string, .webRoot.moduleDesign .blankContainer > .releaseViewer.list, .webRoot.moduleDesign .blankContainer > .releaseViewer.topic, .webRoot.moduleDesign .contentArea > .moduleContainer, .webRoot.moduleDesign .contentArea > .testimonialViewer, .webRoot.moduleDesign .contentArea > .subscriptionPicker, .webRoot.moduleDesign .contentArea > .stripeShop, .webRoot.moduleDesign .contentArea > .releaseStatsWidget, .webRoot.moduleDesign .contentArea > .releaseFavouritesWidget, .webRoot.moduleDesign .contentArea > .releaseSearch, .webRoot.moduleDesign .contentArea > .video, .webRoot.moduleDesign .contentArea > .image, .webRoot.moduleDesign .contentArea > .string, .webRoot.moduleDesign .contentArea > .releaseViewer.list, .webRoot.moduleDesign .contentArea > .releaseViewer.topic, .webRoot.moduleDesign > .moduleContainer, .webRoot.moduleDesign > .testimonialViewer, .webRoot.moduleDesign > .subscriptionPicker, .webRoot.moduleDesign > .stripeShop, .webRoot.moduleDesign > .releaseStatsWidget, .webRoot.moduleDesign > .releaseFavouritesWidget, .webRoot.moduleDesign > .releaseSearch, .webRoot.moduleDesign > .video, .webRoot.moduleDesign > .image, .webRoot.moduleDesign > .string, .webRoot.moduleDesign > .releaseViewer.list, .webRoot.moduleDesign > .releaseViewer.topic { margin-top: 0; margin-bottom: var(--moduleDesign-module-gap); } .webRoot.moduleDesign .releaseViewer.slider:last-child, .webRoot.moduleDesign .blankContainer > .moduleContainer:last-child, .webRoot.moduleDesign .blankContainer > .testimonialViewer:last-child, .webRoot.moduleDesign .blankContainer > .subscriptionPicker:last-child, .webRoot.moduleDesign .blankContainer > .stripeShop:last-child, .webRoot.moduleDesign .blankContainer > .releaseStatsWidget:last-child, .webRoot.moduleDesign .blankContainer > .releaseFavouritesWidget:last-child, .webRoot.moduleDesign .blankContainer > .releaseSearch:last-child, .webRoot.moduleDesign .blankContainer > .video:last-child, .webRoot.moduleDesign .blankContainer > .image:last-child, .webRoot.moduleDesign .blankContainer > .string:last-child, .webRoot.moduleDesign .blankContainer > .releaseViewer.list:last-child, .webRoot.moduleDesign .blankContainer > .releaseViewer.topic:last-child, .webRoot.moduleDesign .contentArea > .moduleContainer:last-child, .webRoot.moduleDesign .contentArea > .testimonialViewer:last-child, .webRoot.moduleDesign .contentArea > .subscriptionPicker:last-child, .webRoot.moduleDesign .contentArea > .stripeShop:last-child, .webRoot.moduleDesign .contentArea > .releaseStatsWidget:last-child, .webRoot.moduleDesign .contentArea > .releaseFavouritesWidget:last-child, .webRoot.moduleDesign .contentArea > .releaseSearch:last-child, .webRoot.moduleDesign .contentArea > .video:last-child, .webRoot.moduleDesign .contentArea > .image:last-child, .webRoot.moduleDesign .contentArea > .string:last-child, .webRoot.moduleDesign .contentArea > .releaseViewer.list:last-child, .webRoot.moduleDesign .contentArea > .releaseViewer.topic:last-child, .webRoot.moduleDesign > .moduleContainer:last-child, .webRoot.moduleDesign > .testimonialViewer:last-child, .webRoot.moduleDesign > .subscriptionPicker:last-child, .webRoot.moduleDesign > .stripeShop:last-child, .webRoot.moduleDesign > .releaseStatsWidget:last-child, .webRoot.moduleDesign > .releaseFavouritesWidget:last-child, .webRoot.moduleDesign > .releaseSearch:last-child, .webRoot.moduleDesign > .video:last-child, .webRoot.moduleDesign > .image:last-child, .webRoot.moduleDesign > .string:last-child, .webRoot.moduleDesign > .releaseViewer.list:last-child, .webRoot.moduleDesign > .releaseViewer.topic:last-child { margin-bottom: 0; } /* Module shells — releaseStatsWidget-card warm gradient (widgets use inner *-card instead) */ .webRoot.moduleDesign .blankContainer > .moduleContainer, .webRoot.moduleDesign .blankContainer > .testimonialViewer, .webRoot.moduleDesign .blankContainer > .video, .webRoot.moduleDesign .blankContainer > .image, .webRoot.moduleDesign .blankContainer > .stripeShop, .webRoot.moduleDesign .blankContainer > .releaseViewer.list, .webRoot.moduleDesign .blankContainer > .releaseSearch, .webRoot.moduleDesign .blankContainer > .string, .webRoot.moduleDesign .contentArea > .moduleContainer, .webRoot.moduleDesign .contentArea > .testimonialViewer, .webRoot.moduleDesign .contentArea > .video, .webRoot.moduleDesign .contentArea > .image, .webRoot.moduleDesign .contentArea > .stripeShop, .webRoot.moduleDesign .contentArea > .releaseViewer.list, .webRoot.moduleDesign .contentArea > .releaseSearch, .webRoot.moduleDesign .contentArea > .string, .webRoot.moduleDesign > .moduleContainer, .webRoot.moduleDesign > .testimonialViewer, .webRoot.moduleDesign > .video, .webRoot.moduleDesign > .image, .webRoot.moduleDesign > .stripeShop, .webRoot.moduleDesign > .releaseViewer.list, .webRoot.moduleDesign > .releaseSearch, .webRoot.moduleDesign > .string { position: relative; overflow: hidden; border-radius: var(--sv-widget-surface-radius); border: var(--sv-widget-surface-border); background: var(--sv-widget-surface-highlight), var(--sv-widget-surface-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), var(--sv-widget-surface-shadow); } /* Home slider: inner .releaseView-container is the sized shell (see releaseViewerSliderWidget.css) */ .webRoot.moduleDesign .blankContainer > .releaseViewer.slider, .webRoot.moduleDesign .contentArea > .releaseViewer.slider, .webRoot.moduleDesign > .releaseViewer.slider { position: relative; overflow: hidden; border-radius: var(--sv-widget-surface-radius); background: transparent; border: var(--sv-widget-surface-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), var(--sv-widget-surface-shadow); } .webRoot.moduleDesign .releaseViewer.slider > .releaseView-container.slider { overflow: hidden; border-radius: inherit; background: radial-gradient(circle at calc(100% - 18px) -36px, var(--sv-widget-surface-orb-primary) 0, var(--sv-widget-surface-orb-primary) 72px, transparent 73px), radial-gradient(circle at 82% 88%, var(--sv-widget-surface-orb-secondary) 0, var(--sv-widget-surface-orb-secondary) 36px, transparent 37px), var(--sv-widget-surface-bg); } /* Topic viewer: overflow visible so Jahreskreis pills can stick / fixed-dock under chrome */ .webRoot.moduleDesign .blankContainer > .releaseViewer.topic, .webRoot.moduleDesign .contentArea > .releaseViewer.topic, .webRoot.moduleDesign > .releaseViewer.topic { position: relative; overflow: visible; border-radius: var(--sv-widget-surface-radius); border: var(--sv-widget-surface-border); background: var(--sv-widget-surface-highlight), var(--sv-widget-surface-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), var(--sv-widget-surface-shadow); } /* subscriptionPicker: core clearfix uses ::before/::after — orbs via layered background */ .webRoot.moduleDesign .blankContainer > .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker), .webRoot.moduleDesign .contentArea > .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker), .webRoot.moduleDesign > .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker) { position: relative; overflow: visible; border-radius: var(--sv-widget-surface-radius); border: var(--sv-widget-surface-border); background: var(--sv-widget-surface-highlight), radial-gradient(circle at calc(100% - 18px) -36px, var(--sv-widget-surface-orb-red) 0, var(--sv-widget-surface-orb-red) 72px, transparent 73px), radial-gradient(circle at 82% 88%, var(--sv-widget-surface-orb-gold) 0, var(--sv-widget-surface-orb-gold) 36px, transparent 37px), var(--sv-widget-surface-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), var(--sv-widget-surface-shadow); } .webRoot.moduleDesign .blankContainer > .moduleContainer::before, .webRoot.moduleDesign .blankContainer > .testimonialViewer::before, .webRoot.moduleDesign .blankContainer > .video::before, .webRoot.moduleDesign .blankContainer > .image::before, .webRoot.moduleDesign .blankContainer > .stripeShop::before, .webRoot.moduleDesign .blankContainer > .releaseViewer.list::before, .webRoot.moduleDesign .blankContainer > .releaseViewer.topic::before, .webRoot.moduleDesign .blankContainer > .releaseSearch::before, .webRoot.moduleDesign .blankContainer > .string::before, .webRoot.moduleDesign .contentArea > .moduleContainer::before, .webRoot.moduleDesign .contentArea > .testimonialViewer::before, .webRoot.moduleDesign .contentArea > .video::before, .webRoot.moduleDesign .contentArea > .image::before, .webRoot.moduleDesign .contentArea > .stripeShop::before, .webRoot.moduleDesign .contentArea > .releaseViewer.list::before, .webRoot.moduleDesign .contentArea > .releaseViewer.topic::before, .webRoot.moduleDesign .contentArea > .releaseSearch::before, .webRoot.moduleDesign .contentArea > .string::before, .webRoot.moduleDesign > .moduleContainer::before, .webRoot.moduleDesign > .testimonialViewer::before, .webRoot.moduleDesign > .video::before, .webRoot.moduleDesign > .image::before, .webRoot.moduleDesign > .stripeShop::before, .webRoot.moduleDesign > .releaseViewer.list::before, .webRoot.moduleDesign > .releaseViewer.topic::before, .webRoot.moduleDesign > .releaseSearch::before, .webRoot.moduleDesign > .string::before { content: ""; position: absolute; z-index: 0; top: -64px; right: -52px; width: 190px; height: 190px; border-radius: 50%; background: var(--sv-widget-surface-orb-red); filter: blur(0.2px); pointer-events: none; } .webRoot.moduleDesign .blankContainer > .string::before, .webRoot.moduleDesign .contentArea > .string::before, .webRoot.moduleDesign > .string::before { background: var(--sv-widget-surface-orb-primary); } .webRoot.moduleDesign .blankContainer > .moduleContainer::after, .webRoot.moduleDesign .blankContainer > .testimonialViewer::after, .webRoot.moduleDesign .blankContainer > .video::after, .webRoot.moduleDesign .blankContainer > .image::after, .webRoot.moduleDesign .blankContainer > .stripeShop::after, .webRoot.moduleDesign .blankContainer > .releaseViewer.list::after, .webRoot.moduleDesign .blankContainer > .releaseViewer.topic::after, .webRoot.moduleDesign .blankContainer > .releaseSearch::after, .webRoot.moduleDesign .blankContainer > .string::after, .webRoot.moduleDesign .contentArea > .moduleContainer::after, .webRoot.moduleDesign .contentArea > .testimonialViewer::after, .webRoot.moduleDesign .contentArea > .video::after, .webRoot.moduleDesign .contentArea > .image::after, .webRoot.moduleDesign .contentArea > .stripeShop::after, .webRoot.moduleDesign .contentArea > .releaseViewer.list::after, .webRoot.moduleDesign .contentArea > .releaseViewer.topic::after, .webRoot.moduleDesign .contentArea > .releaseSearch::after, .webRoot.moduleDesign .contentArea > .string::after, .webRoot.moduleDesign > .moduleContainer::after, .webRoot.moduleDesign > .testimonialViewer::after, .webRoot.moduleDesign > .video::after, .webRoot.moduleDesign > .image::after, .webRoot.moduleDesign > .stripeShop::after, .webRoot.moduleDesign > .releaseViewer.list::after, .webRoot.moduleDesign > .releaseViewer.topic::after, .webRoot.moduleDesign > .releaseSearch::after, .webRoot.moduleDesign > .string::after { content: ""; position: absolute; z-index: 0; right: 34px; bottom: 34px; width: 92px; height: 92px; border-radius: 50%; background: var(--sv-widget-surface-orb-gold); opacity: 0.82; pointer-events: none; } .webRoot.moduleDesign .blankContainer > .string::after, .webRoot.moduleDesign .contentArea > .string::after, .webRoot.moduleDesign > .string::after { background: var(--sv-widget-surface-orb-secondary); } .webRoot.moduleDesign .blankContainer > .moduleContainer > div, .webRoot.moduleDesign .blankContainer > .string .string-content, .webRoot.moduleDesign .blankContainer > .video .video, .webRoot.moduleDesign .blankContainer > .image, .webRoot.moduleDesign .blankContainer > .releaseSearch, .webRoot.moduleDesign .blankContainer > .stripeShop > .stripeShop-module, .webRoot.moduleDesign .blankContainer > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign .blankContainer > .releaseViewer.topic > .releaseView-container, .webRoot.moduleDesign .contentArea > .moduleContainer > div, .webRoot.moduleDesign .contentArea > .string .string-content, .webRoot.moduleDesign .contentArea > .video .video, .webRoot.moduleDesign .contentArea > .image, .webRoot.moduleDesign .contentArea > .releaseSearch, .webRoot.moduleDesign .contentArea > .stripeShop > .stripeShop-module, .webRoot.moduleDesign .contentArea > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign .contentArea > .releaseViewer.topic > .releaseView-container, .webRoot.moduleDesign > .moduleContainer > div, .webRoot.moduleDesign > .string .string-content, .webRoot.moduleDesign > .video .video, .webRoot.moduleDesign > .image, .webRoot.moduleDesign > .releaseSearch, .webRoot.moduleDesign > .stripeShop > .stripeShop-module, .webRoot.moduleDesign > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign > .releaseViewer.topic > .releaseView-container { position: relative; z-index: 1; padding: 24px; box-sizing: border-box; } /* List: 10px inset from widget shell — container pad; typeHead margin-top 0 (core seasonHead margin is 10px; public list does not load favouritesFilter.css) */ .webRoot.moduleDesign .blankContainer > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign .contentArea > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign .releaseViewer.list .releaseView-container { padding-top: 10px !important; padding-left: 10px !important; padding-right: 24px; padding-bottom: 24px; } .webRoot.moduleDesign .releaseViewer.list .releaseView-container > .seasonHead.typeHead { margin: 0 0 17.5px; padding: 0; } /* Topic Jahreskreis: 10px inset (same as list); cancel core seasonSection margin stack on first row */ .webRoot.moduleDesign .releaseViewer.topic .topicView-container { padding-top: 10px !important; padding-left: 10px !important; padding-right: 24px; padding-bottom: 24px; box-sizing: border-box; } .webRoot.moduleDesign .releaseViewer.topic .topicView-container > .seasonSection.seasonHead { margin: 0 0 17.5px; padding: 0; width: 100%; max-width: 100%; box-sizing: border-box; } .webRoot.moduleDesign .releaseViewer.topic .topicView-container > .seasonSection.seasonHead ~ .seasonSection.seasonHead { margin-top: 10px; } /* Topic Jahreskreis: sticky pills + column season sections (public + member; same as favouritesFilter.css) */ .webRoot.moduleDesign .blankContainer > .releaseViewer.topic, .webRoot.moduleDesign .contentArea > .releaseViewer.topic, .webRoot.moduleDesign > .releaseViewer.topic { overflow: visible !important; } .webRoot.moduleDesign .releaseViewer.topic .topicView-container > .seasonSection.seasonHead { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; /* Match first-season desktop grid row-gap (10px) between pill cluster and seasonContent */ gap: 10px; } /* Each season's in-flow cluster always visible at its own position; portal hides only the * scroll-active one to avoid duplicate with #sv-topic-season-sticky-pill. */ .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonSection.seasonHead > .sv-releaseHeadStickyCluster { visibility: visible; pointer-events: auto; opacity: 1; } .webRoot.moduleDesign .releaseViewer.topic .topicView-container.sv-topic-season-pill-portal-on > .seasonSection.seasonHead.sv-seasonHead--scrollActive > .sv-releaseHeadStickyCluster { visibility: hidden !important; pointer-events: none !important; } .webRoot.moduleDesign .releaseViewer.list .releaseView-container .seasonHead.typeHead > .sv-releaseHeadStickyCluster-docked, .webRoot.moduleDesign .releaseViewer.list .releaseView-container .seasonHead.typeHead > .sv-releaseHeadStickyCluster.sv-releaseHeadStickyCluster-docked { opacity: var(--sv-motion-chrome-docked-opacity, 0.6); background: transparent; box-shadow: none; padding: 0; } .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonSection > .seasonContent { flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; } @media (max-width: 800px) { .webRoot.moduleDesign .blankContainer > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign .contentArea > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign .releaseViewer.list .releaseView-container, .webRoot.moduleDesign .releaseViewer.topic .topicView-container { padding-top: 10px !important; padding-left: 10px !important; } } .webRoot.moduleDesign .blankContainer > .string .string-content, .webRoot.moduleDesign .contentArea > .string .string-content, .webRoot.moduleDesign > .string .string-content { position: relative; z-index: 1; } .webRoot.moduleDesign.home > .string { border: 1px solid rgba(255, 255, 255, 0.76); /* keep releaseStats-style gradient + orbs from .string rules above */ background: linear-gradient( 145deg, color-mix(in srgb, var(--sv-current-season-color, #e83331) 3%, rgba(255, 255, 255, 0.92)) 0%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 7%, rgba(255, 255, 255, 0.9)) 48%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 11%, rgba(255, 255, 255, 0.9)) 100% ); box-shadow: var(--sv-widget-surface-shadow); } .webRoot.moduleDesign.home > .string .string-content { border-radius: 24px; } .webRoot.moduleDesign .string-content.subHeadline, .webRoot.moduleDesign .string-content.backdropLightgray { display: block; padding: 18px 22px; border: var(--sv-widget-inset-border); border-radius: 20px; background: var(--sv-widget-inset-bg); box-shadow: var(--sv-widget-inset-shadow); } .webRoot.moduleDesign .string-content.subHeadline { color: var(--sv-page-subheader-color, color-mix(in srgb, #e83331 85%, transparent)); } .webRoot.moduleDesign .moduleContainer.textAndImage .mc-image, .webRoot.moduleDesign .moduleContainer.imageAndText .mc-image { max-width: 36%; margin-bottom: 12px; padding: 10px; border: var(--sv-widget-inset-border); border-radius: 22px; background: var(--sv-widget-inset-bg); box-shadow: var(--sv-widget-inset-shadow); } .webRoot.moduleDesign .moduleContainer.textAndImage .mc-image { margin-left: 24px; } .webRoot.moduleDesign .moduleContainer.imageAndText .mc-image { margin-right: 24px; } .webRoot.moduleDesign .moduleContainer .mc-image img, .webRoot.moduleDesign .blankContainer > .image img, .webRoot.moduleDesign .contentArea > .image img, .webRoot.moduleDesign > .image img, .webRoot.moduleDesign .video .stage, .webRoot.moduleDesign .stripeShop-card-image img { display: block; max-width: 100%; border-radius: 18px; box-shadow: 0 16px 34px rgba(85, 65, 48, 0.12); } .webRoot.moduleDesign .moduleContainer .mc-text, .webRoot.moduleDesign > .string .string-content, .webRoot.moduleDesign .blankContainer > .string .string-content, .webRoot.moduleDesign .contentArea > .string .string-content, .webRoot.moduleDesign .stripeShop-intro, .webRoot.moduleDesign .stripeShop-card-desc, .webRoot.moduleDesign .stripeShop-card-hint { color: #746a64; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.62; } .webRoot.moduleDesign .moduleContainer .mc-text h1, .webRoot.moduleDesign .moduleContainer .mc-text h2, .webRoot.moduleDesign .moduleContainer .mc-text h3, .webRoot.moduleDesign > .string .string-content h1, .webRoot.moduleDesign > .string .string-content h2, .webRoot.moduleDesign > .string .string-content h3, .webRoot.moduleDesign .blankContainer > .string .string-content h1, .webRoot.moduleDesign .blankContainer > .string .string-content h2, .webRoot.moduleDesign .blankContainer > .string .string-content h3, .webRoot.moduleDesign .contentArea > .string .string-content h1, .webRoot.moduleDesign .contentArea > .string .string-content h2, .webRoot.moduleDesign .contentArea > .string .string-content h3 { color: var(--sv-page-header-color); font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.02em; margin: 0.75em 0 0.08em; line-height: 1.2; } .webRoot.moduleDesign .stripeShop-card-title { color: var(--sv-header-text-color); font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.02em; } .webRoot.moduleDesign .moduleContainer .mc-text h1:first-child, .webRoot.moduleDesign .moduleContainer .mc-text h2:first-child, .webRoot.moduleDesign .moduleContainer .mc-text h3:first-child, .webRoot.moduleDesign > .string .string-content h1:first-child, .webRoot.moduleDesign > .string .string-content h2:first-child, .webRoot.moduleDesign > .string .string-content h3:first-child, .webRoot.moduleDesign .blankContainer > .string .string-content h1:first-child, .webRoot.moduleDesign .blankContainer > .string .string-content h2:first-child, .webRoot.moduleDesign .blankContainer > .string .string-content h3:first-child, .webRoot.moduleDesign .contentArea > .string .string-content h1:first-child, .webRoot.moduleDesign .contentArea > .string .string-content h2:first-child, .webRoot.moduleDesign .contentArea > .string .string-content h3:first-child { margin-top: 0; } .webRoot.moduleDesign .moduleContainer .mc-text a, .webRoot.moduleDesign > .string .string-content a, .webRoot.moduleDesign .blankContainer > .string .string-content a, .webRoot.moduleDesign .contentArea > .string .string-content a, .webRoot.moduleDesign .stripeShop-intro a { color: #e83331; font-weight: 700; } /* Standalone string modules: flow-root contains margins / inner floats. Do NOT apply flow-root to .moduleContainer .mc-text — it isolates the text column from the sibling floated .mc-image so line boxes no longer wrap the float inside the module card. */ .webRoot.moduleDesign > .string .string-content, .webRoot.moduleDesign .blankContainer > .string .string-content, .webRoot.moduleDesign .contentArea > .string .string-content { display: flow-root; } .webRoot.moduleDesign .moduleContainer .mc-text p, .webRoot.moduleDesign > .string .string-content p, .webRoot.moduleDesign .blankContainer > .string .string-content p, .webRoot.moduleDesign .contentArea > .string .string-content p { margin: 0 0 0.85em; } .webRoot.moduleDesign .moduleContainer .mc-text p:last-child, .webRoot.moduleDesign > .string .string-content p:last-child, .webRoot.moduleDesign .blankContainer > .string .string-content p:last-child, .webRoot.moduleDesign .contentArea > .string .string-content p:last-child { margin-bottom: 0; } .webRoot.moduleDesign .moduleContainer .mc-text ul, .webRoot.moduleDesign .moduleContainer .mc-text ol, .webRoot.moduleDesign > .string .string-content ul, .webRoot.moduleDesign > .string .string-content ol, .webRoot.moduleDesign .blankContainer > .string .string-content ul, .webRoot.moduleDesign .blankContainer > .string .string-content ol, .webRoot.moduleDesign .contentArea > .string .string-content ul, .webRoot.moduleDesign .contentArea > .string .string-content ol { margin: 0.35em 0 0.9em; padding-left: 1.35em; } @media (max-width: 800px) { #main-content .webRoot.moduleDesign .moduleContainer .mc-text ul, #main-content .webRoot.moduleDesign > .string .string-content ul, #main-content .webRoot.moduleDesign .blankContainer > .string .string-content ul, #main-content .webRoot.moduleDesign .contentArea > .string .string-content ul { list-style: none; margin-left: 0; padding-left: 0; } #main-content .webRoot.moduleDesign .moduleContainer .mc-text ul > li, #main-content .webRoot.moduleDesign > .string .string-content ul > li, #main-content .webRoot.moduleDesign .blankContainer > .string .string-content ul > li, #main-content .webRoot.moduleDesign .contentArea > .string .string-content ul > li { position: relative; padding-left: 22px; } #main-content .webRoot.moduleDesign .moduleContainer .mc-text ul > li::before, #main-content .webRoot.moduleDesign > .string .string-content ul > li::before, #main-content .webRoot.moduleDesign .blankContainer > .string .string-content ul > li::before, #main-content .webRoot.moduleDesign .contentArea > .string .string-content ul > li::before { content: "\2022"; position: absolute; left: 2px; top: 0.62em; transform: translateY(-50%); line-height: 1; } } html.sv-force-mobile-landscape #main-content .webRoot.moduleDesign .moduleContainer .mc-text ul, html.sv-force-mobile-landscape #main-content .webRoot.moduleDesign > .string .string-content ul, html.sv-force-mobile-landscape #main-content .webRoot.moduleDesign .blankContainer > .string .string-content ul, html.sv-force-mobile-landscape #main-content .webRoot.moduleDesign .contentArea > .string .string-content ul { list-style: none; margin-left: 0; padding-left: 0; } html.sv-force-mobile-landscape #main-content .webRoot.moduleDesign .moduleContainer .mc-text ul > li, html.sv-force-mobile-landscape #main-content .webRoot.moduleDesign > .string .string-content ul > li, html.sv-force-mobile-landscape #main-content .webRoot.moduleDesign .blankContainer > .string .string-content ul > li, html.sv-force-mobile-landscape #main-content .webRoot.moduleDesign .contentArea > .string .string-content ul > li { position: relative; padding-left: 22px; } html.sv-force-mobile-landscape #main-content .webRoot.moduleDesign .moduleContainer .mc-text ul > li::before, html.sv-force-mobile-landscape #main-content .webRoot.moduleDesign > .string .string-content ul > li::before, html.sv-force-mobile-landscape #main-content .webRoot.moduleDesign .blankContainer > .string .string-content ul > li::before, html.sv-force-mobile-landscape #main-content .webRoot.moduleDesign .contentArea > .string .string-content ul > li::before { content: "\2022"; position: absolute; left: 2px; top: 0.62em; transform: translateY(-50%); line-height: 1; } /* Release layer modal prose — bullets 5px right of fließtext (openInLayer only; host outside #main-content). */ .webRoot.moduleDesign .releaseView-container .release.openInLayer .mediaDescriptionContainer .mediaDescription :is(.description, .description-short, .sv-publicDescriptionTeaser-copy) :is(ul, ol), body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .mediaDescriptionContainer .mediaDescription :is(.description, .description-short, .sv-publicDescriptionTeaser-copy) :is(ul, ol) { margin: 0.35em 0 0.9em !important; padding-left: 0 !important; padding-inline-start: 0 !important; margin-left: 0 !important; margin-inline-start: 0 !important; } .webRoot.moduleDesign .releaseView-container .release.openInLayer .mediaDescriptionContainer .mediaDescription :is(.description, .description-short, .sv-publicDescriptionTeaser-copy) ul, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .mediaDescriptionContainer .mediaDescription :is(.description, .description-short, .sv-publicDescriptionTeaser-copy) ul { list-style: none !important; } .webRoot.moduleDesign .releaseView-container .release.openInLayer .mediaDescriptionContainer .mediaDescription :is(.description, .description-short, .sv-publicDescriptionTeaser-copy) ul > li, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .mediaDescriptionContainer .mediaDescription :is(.description, .description-short, .sv-publicDescriptionTeaser-copy) ul > li { position: relative; margin: 0.28em 0; padding-left: calc(5px + 0.6em) !important; } .webRoot.moduleDesign .releaseView-container .release.openInLayer .mediaDescriptionContainer .mediaDescription :is(.description, .description-short, .sv-publicDescriptionTeaser-copy) ul > li::before, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .mediaDescriptionContainer .mediaDescription :is(.description, .description-short, .sv-publicDescriptionTeaser-copy) ul > li::before { content: "\2022"; position: absolute; left: 5px; top: 0.62em; transform: translateY(-50%); line-height: 1; } .webRoot.moduleDesign .releaseView-container .release.openInLayer .mediaDescriptionContainer .mediaDescription :is(.description, .description-short, .sv-publicDescriptionTeaser-copy) ol, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .mediaDescriptionContainer .mediaDescription :is(.description, .description-short, .sv-publicDescriptionTeaser-copy) ol { list-style-position: outside; padding-left: calc(5px + 1.15em) !important; } .webRoot.moduleDesign .releaseView-container .release.openInLayer .mediaDescriptionContainer .mediaDescription :is(.description, .description-short, .sv-publicDescriptionTeaser-copy) ol > li, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .mediaDescriptionContainer .mediaDescription :is(.description, .description-short, .sv-publicDescriptionTeaser-copy) ol > li { margin: 0.28em 0; padding-left: 0 !important; } .webRoot.moduleDesign .moduleContainer .mc-text li, .webRoot.moduleDesign > .string .string-content li, .webRoot.moduleDesign .blankContainer > .string .string-content li, .webRoot.moduleDesign .contentArea > .string .string-content li { margin: 0.28em 0; } .webRoot.moduleDesign .moduleContainer .mc-text ul ul, .webRoot.moduleDesign .moduleContainer .mc-text ul ol, .webRoot.moduleDesign .moduleContainer .mc-text ol ul, .webRoot.moduleDesign .moduleContainer .mc-text ol ol, .webRoot.moduleDesign > .string .string-content ul ul, .webRoot.moduleDesign > .string .string-content ul ol, .webRoot.moduleDesign > .string .string-content ol ul, .webRoot.moduleDesign > .string .string-content ol ol, .webRoot.moduleDesign .blankContainer > .string .string-content ul ul, .webRoot.moduleDesign .blankContainer > .string .string-content ul ol, .webRoot.moduleDesign .blankContainer > .string .string-content ol ul, .webRoot.moduleDesign .blankContainer > .string .string-content ol ol, .webRoot.moduleDesign .contentArea > .string .string-content ul ul, .webRoot.moduleDesign .contentArea > .string .string-content ul ol, .webRoot.moduleDesign .contentArea > .string .string-content ol ul, .webRoot.moduleDesign .contentArea > .string .string-content ol ol { margin-top: 0.35em; margin-bottom: 0.35em; } .webRoot.moduleDesign .moduleContainer .mc-text h4, .webRoot.moduleDesign .moduleContainer .mc-text h5, .webRoot.moduleDesign .moduleContainer .mc-text h6, .webRoot.moduleDesign > .string .string-content h4, .webRoot.moduleDesign > .string .string-content h5, .webRoot.moduleDesign > .string .string-content h6, .webRoot.moduleDesign .blankContainer > .string .string-content h4, .webRoot.moduleDesign .blankContainer > .string .string-content h5, .webRoot.moduleDesign .blankContainer > .string .string-content h6, .webRoot.moduleDesign .contentArea > .string .string-content h4, .webRoot.moduleDesign .contentArea > .string .string-content h5, .webRoot.moduleDesign .contentArea > .string .string-content h6 { margin: 0.55em 0 0.1em; color: var(--sv-header-text-color); font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-weight: 700; letter-spacing: -0.015em; line-height: 1.25; } .webRoot.moduleDesign .moduleContainer .mc-text h4:first-child, .webRoot.moduleDesign .moduleContainer .mc-text h5:first-child, .webRoot.moduleDesign .moduleContainer .mc-text h6:first-child, .webRoot.moduleDesign > .string .string-content h4:first-child, .webRoot.moduleDesign > .string .string-content h5:first-child, .webRoot.moduleDesign > .string .string-content h6:first-child, .webRoot.moduleDesign .blankContainer > .string .string-content h4:first-child, .webRoot.moduleDesign .blankContainer > .string .string-content h5:first-child, .webRoot.moduleDesign .blankContainer > .string .string-content h6:first-child, .webRoot.moduleDesign .contentArea > .string .string-content h4:first-child, .webRoot.moduleDesign .contentArea > .string .string-content h5:first-child, .webRoot.moduleDesign .contentArea > .string .string-content h6:first-child { margin-top: 0; } .webRoot.moduleDesign .moduleContainer .mc-text h1 + p, .webRoot.moduleDesign .moduleContainer .mc-text h2 + p, .webRoot.moduleDesign .moduleContainer .mc-text h3 + p, .webRoot.moduleDesign .moduleContainer .mc-text h4 + p, .webRoot.moduleDesign > .string .string-content h1 + p, .webRoot.moduleDesign > .string .string-content h2 + p, .webRoot.moduleDesign > .string .string-content h3 + p, .webRoot.moduleDesign > .string .string-content h4 + p, .webRoot.moduleDesign .blankContainer > .string .string-content h1 + p, .webRoot.moduleDesign .blankContainer > .string .string-content h2 + p, .webRoot.moduleDesign .blankContainer > .string .string-content h3 + p, .webRoot.moduleDesign .blankContainer > .string .string-content h4 + p, .webRoot.moduleDesign .contentArea > .string .string-content h1 + p, .webRoot.moduleDesign .contentArea > .string .string-content h2 + p, .webRoot.moduleDesign .contentArea > .string .string-content h3 + p, .webRoot.moduleDesign .contentArea > .string .string-content h4 + p { margin-top: 0; } /* Page hero subtitle — same as core `.subHeadline`, beats inherited body grey on `.string-content` */ .webRoot.moduleDesign > .string .string-content p.subHeadline, .webRoot.moduleDesign .blankContainer > .string .string-content p.subHeadline, .webRoot.moduleDesign .contentArea > .string .string-content p.subHeadline, .webRoot.moduleDesign .moduleContainer .mc-text p.subHeadline { color: var(--sv-page-subheader-color, color-mix(in srgb, #e83331 85%, transparent)); font-size: 17px; font-weight: 600; padding-left: 1px; } @media (max-width: 800px) { .webRoot.moduleDesign .moduleContainer .mc-text h1, .webRoot.moduleDesign > .string .string-content h1, .webRoot.moduleDesign .blankContainer > .string .string-content h1, .webRoot.moduleDesign .contentArea > .string .string-content h1 { font-size: 28px; line-height: 30px; } .webRoot.moduleDesign > .string .string-content p.subHeadline, .webRoot.moduleDesign .blankContainer > .string .string-content p.subHeadline, .webRoot.moduleDesign .contentArea > .string .string-content p.subHeadline, .webRoot.moduleDesign .moduleContainer .mc-text p.subHeadline { font-size: 15px; } } /* After h1–h6 base margins: tighten title + subtitle (any heading → heading) */ .webRoot.moduleDesign .moduleContainer .mc-text :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6), .webRoot.moduleDesign > .string .string-content :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6), .webRoot.moduleDesign .blankContainer > .string .string-content :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6), .webRoot.moduleDesign .contentArea > .string .string-content :is(h1, h2, h3, h4, h5, h6) + :is(h1, h2, h3, h4, h5, h6) { margin-top: 0.14em; } .webRoot.moduleDesign .moduleContainer .mc-text blockquote, .webRoot.moduleDesign > .string .string-content blockquote, .webRoot.moduleDesign .blankContainer > .string .string-content blockquote, .webRoot.moduleDesign .contentArea > .string .string-content blockquote { margin: 1em 0; padding: 12px 16px 12px 18px; border-left: 4px solid color-mix(in srgb, var(--sv-current-season-color, #e83331) 55%, #ffc500); border-radius: 0 14px 14px 0; background: color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent); color: #4a403c; font-style: normal; } .webRoot.moduleDesign .moduleContainer .mc-text blockquote p:last-child, .webRoot.moduleDesign > .string .string-content blockquote p:last-child, .webRoot.moduleDesign .blankContainer > .string .string-content blockquote p:last-child, .webRoot.moduleDesign .contentArea > .string .string-content blockquote p:last-child { margin-bottom: 0; } .webRoot.moduleDesign .moduleContainer .mc-text hr, .webRoot.moduleDesign > .string .string-content hr, .webRoot.moduleDesign .blankContainer > .string .string-content hr, .webRoot.moduleDesign .contentArea > .string .string-content hr { margin: 1.25em 0; border: 0; border-top: 1px solid rgba(52, 44, 40, 0.12); } .webRoot.moduleDesign .moduleContainer .mc-text pre, .webRoot.moduleDesign > .string .string-content pre, .webRoot.moduleDesign .blankContainer > .string .string-content pre, .webRoot.moduleDesign .contentArea > .string .string-content pre { margin: 1em 0; padding: 14px 16px; overflow-x: auto; border-radius: 12px; background: rgba(52, 44, 40, 0.06); font-family: "Roboto Mono", ui-monospace, monospace; font-size: 13px; line-height: 1.45; } .webRoot.moduleDesign .moduleContainer .mc-text code, .webRoot.moduleDesign > .string .string-content code, .webRoot.moduleDesign .blankContainer > .string .string-content code, .webRoot.moduleDesign .contentArea > .string .string-content code { padding: 0.12em 0.35em; border-radius: 6px; background: rgba(52, 44, 40, 0.07); font-family: "Roboto Mono", ui-monospace, monospace; font-size: 0.92em; } .webRoot.moduleDesign .moduleContainer .mc-text pre code, .webRoot.moduleDesign > .string .string-content pre code, .webRoot.moduleDesign .blankContainer > .string .string-content pre code, .webRoot.moduleDesign .contentArea > .string .string-content pre code { padding: 0; background: transparent; font-size: inherit; } .webRoot.moduleDesign .moduleContainer .mc-text table, .webRoot.moduleDesign > .string .string-content table, .webRoot.moduleDesign .blankContainer > .string .string-content table, .webRoot.moduleDesign .contentArea > .string .string-content table { width: 100%; margin: 1em 0; border-collapse: collapse; font-size: 14px; line-height: 1.45; } .webRoot.moduleDesign .moduleContainer .mc-text th, .webRoot.moduleDesign .moduleContainer .mc-text td, .webRoot.moduleDesign > .string .string-content th, .webRoot.moduleDesign > .string .string-content td, .webRoot.moduleDesign .blankContainer > .string .string-content th, .webRoot.moduleDesign .blankContainer > .string .string-content td, .webRoot.moduleDesign .contentArea > .string .string-content th, .webRoot.moduleDesign .contentArea > .string .string-content td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(52, 44, 40, 0.1); } .webRoot.moduleDesign .moduleContainer .mc-text thead th, .webRoot.moduleDesign > .string .string-content thead th, .webRoot.moduleDesign .blankContainer > .string .string-content thead th, .webRoot.moduleDesign .contentArea > .string .string-content thead th { color: var(--sv-header-text-color); font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-weight: 700; background: color-mix(in srgb, var(--sv-current-season-color, #e83331) 6%, transparent); } .webRoot.moduleDesign .moduleContainer .mc-text img, .webRoot.moduleDesign .moduleContainer .mc-text video, .webRoot.moduleDesign .moduleContainer .mc-text iframe, .webRoot.moduleDesign > .string .string-content img, .webRoot.moduleDesign > .string .string-content video, .webRoot.moduleDesign > .string .string-content iframe, .webRoot.moduleDesign .blankContainer > .string .string-content img, .webRoot.moduleDesign .blankContainer > .string .string-content video, .webRoot.moduleDesign .blankContainer > .string .string-content iframe, .webRoot.moduleDesign .contentArea > .string .string-content img, .webRoot.moduleDesign .contentArea > .string .string-content video, .webRoot.moduleDesign .contentArea > .string .string-content iframe { max-width: 100%; height: auto; border-radius: 12px; } .webRoot.moduleDesign .moduleContainer .mc-text figure, .webRoot.moduleDesign > .string .string-content figure, .webRoot.moduleDesign .blankContainer > .string .string-content figure, .webRoot.moduleDesign .contentArea > .string .string-content figure { margin: 1em 0; } .webRoot.moduleDesign .moduleContainer .mc-text figcaption, .webRoot.moduleDesign > .string .string-content figcaption, .webRoot.moduleDesign .blankContainer > .string .string-content figcaption, .webRoot.moduleDesign .contentArea > .string .string-content figcaption { margin-top: 8px; font-size: 13px; line-height: 1.4; color: rgba(116, 106, 100, 0.95); } .webRoot.moduleDesign .moduleContainer .mc-text strong, .webRoot.moduleDesign .moduleContainer .mc-text b, .webRoot.moduleDesign > .string .string-content strong, .webRoot.moduleDesign > .string .string-content b, .webRoot.moduleDesign .blankContainer > .string .string-content strong, .webRoot.moduleDesign .blankContainer > .string .string-content b, .webRoot.moduleDesign .contentArea > .string .string-content strong, .webRoot.moduleDesign .contentArea > .string .string-content b { color: #342c28; font-weight: 700; } /* TinyMCE/GDocs often wrap headings in — don't steal KoHo / page-header color. */ .webRoot.moduleDesign .moduleContainer .mc-text :is(h1, h2, h3, h4, h5, h6) :is(strong, b), .webRoot.moduleDesign > .string .string-content :is(h1, h2, h3, h4, h5, h6) :is(strong, b), .webRoot.moduleDesign .blankContainer > .string .string-content :is(h1, h2, h3, h4, h5, h6) :is(strong, b), .webRoot.moduleDesign .contentArea > .string .string-content :is(h1, h2, h3, h4, h5, h6) :is(strong, b) { color: inherit; font-weight: inherit; } /* Paste leftovers (font tags, inline Arial/12pt) must not override CI Open Sans / heading sizes. */ .webRoot.moduleDesign .moduleContainer .mc-text :is(font, [style*="font-family"], [style*="font-size"]), .webRoot.moduleDesign > .string .string-content :is(font, [style*="font-family"], [style*="font-size"]), .webRoot.moduleDesign .blankContainer > .string .string-content :is(font, [style*="font-family"], [style*="font-size"]), .webRoot.moduleDesign .contentArea > .string .string-content :is(font, [style*="font-family"], [style*="font-size"]) { font-family: inherit !important; font-size: inherit !important; } .webRoot.moduleDesign .moduleContainer .mc-text h1 a, .webRoot.moduleDesign .moduleContainer .mc-text h2 a, .webRoot.moduleDesign .moduleContainer .mc-text h3 a, .webRoot.moduleDesign .moduleContainer .mc-text h4 a, .webRoot.moduleDesign > .string .string-content h1 a, .webRoot.moduleDesign > .string .string-content h2 a, .webRoot.moduleDesign > .string .string-content h3 a, .webRoot.moduleDesign > .string .string-content h4 a, .webRoot.moduleDesign .blankContainer > .string .string-content h1 a, .webRoot.moduleDesign .blankContainer > .string .string-content h2 a, .webRoot.moduleDesign .blankContainer > .string .string-content h3 a, .webRoot.moduleDesign .blankContainer > .string .string-content h4 a, .webRoot.moduleDesign .contentArea > .string .string-content h1 a, .webRoot.moduleDesign .contentArea > .string .string-content h2 a, .webRoot.moduleDesign .contentArea > .string .string-content h3 a, .webRoot.moduleDesign .contentArea > .string .string-content h4 a { color: inherit; font-weight: inherit; } .webRoot.moduleDesign .moduleContainer .mc-text dl, .webRoot.moduleDesign > .string .string-content dl, .webRoot.moduleDesign .blankContainer > .string .string-content dl, .webRoot.moduleDesign .contentArea > .string .string-content dl { margin: 0.75em 0 1em; } .webRoot.moduleDesign .moduleContainer .mc-text dt, .webRoot.moduleDesign > .string .string-content dt, .webRoot.moduleDesign .blankContainer > .string .string-content dt, .webRoot.moduleDesign .contentArea > .string .string-content dt { margin-top: 0.5em; font-weight: 700; color: #342c28; } .webRoot.moduleDesign .moduleContainer .mc-text dd, .webRoot.moduleDesign > .string .string-content dd, .webRoot.moduleDesign .blankContainer > .string .string-content dd, .webRoot.moduleDesign .contentArea > .string .string-content dd { margin: 0.2em 0 0.5em 0.9em; } /* Frosted “callout” variants: sit clearly inside the outer text card */ .webRoot.moduleDesign > .string .string-content.subHeadline, .webRoot.moduleDesign > .string .string-content.backdropLightgray, .webRoot.moduleDesign .blankContainer > .string .string-content.subHeadline, .webRoot.moduleDesign .blankContainer > .string .string-content.backdropLightgray, .webRoot.moduleDesign .contentArea > .string .string-content.subHeadline, .webRoot.moduleDesign .contentArea > .string .string-content.backdropLightgray { margin-top: 4px; margin-bottom: 4px; } .webRoot.moduleDesign .moduleContainer.awardViewer { box-sizing: border-box; display: block; width: auto; margin-left: 0; vertical-align: top; } .webRoot.moduleDesign .moduleContainer.awardViewer + .moduleContainer.awardViewer { margin-left: 0; } /* Award pairs: inline-block 50% wraps (borders + HTML whitespace); 2-col grid on the host. */ .webRoot.moduleDesign .blankContainer:has(> .moduleContainer.awardViewer), .webRoot.moduleDesign .contentArea:has(> .moduleContainer.awardViewer) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: var(--moduleDesign-module-gap); } .webRoot.moduleDesign .blankContainer:has(> .moduleContainer.awardViewer) > :not(.moduleContainer.awardViewer), .webRoot.moduleDesign .contentArea:has(> .moduleContainer.awardViewer) > :not(.moduleContainer.awardViewer) { grid-column: 1 / -1; } .webRoot.moduleDesign .moduleContainer.awardViewer > div { min-height: 184px; text-align: left; } .webRoot.moduleDesign .moduleContainer.awardViewer .logo { float: left; margin-right: 18px; margin-bottom: 8px; } .webRoot.moduleDesign .moduleContainer.awardViewer .logo img { border-radius: 16px; background: #fff; } .webRoot.moduleDesign .moduleContainer.awardViewer .text { display: block; overflow: hidden; } .webRoot.moduleDesign .moduleContainer.awardViewer .text .line { width: 44px; height: 4px; margin-bottom: 12px; border-radius: 999px; background: color-mix(in srgb, var(--sv-current-season-color, #e83331) 50%, #ffc500); } .webRoot.moduleDesign .moduleContainer.awardViewer .text .main { margin-top: 0; color: var(--sv-header-text-color); font-size: 22px; line-height: 1.12; } .webRoot.moduleDesign .moduleContainer.awardViewer .text .sub { margin-top: 8px; color: #746a64; } .webRoot.moduleDesign .blankContainer > .testimonialViewer, .webRoot.moduleDesign .contentArea > .testimonialViewer, .webRoot.moduleDesign > .testimonialViewer { clear: both; display: flow-root; min-height: 1px; padding: 24px; box-sizing: border-box; } .webRoot.moduleDesign .releaseSearch { margin: 0; } .webRoot.moduleDesign #testimonialViewer { padding-top: 38px; overflow: visible; } .webRoot.moduleDesign #testimonialViewer .viewerWrapper { position: relative; height: 100%; min-height: 0; overflow: hidden; } /* Header pill — same metrics as releaseViewer slider `.topicTitle` (releaseViewerSliderWidget.css) */ .webRoot.moduleDesign #testimonialViewer .viewerTitle { position: absolute; top: 0; left: 0; display: inline-flex; align-items: baseline; margin-bottom: 0; padding: 8.75px 16.25px; border-radius: 999px; background-color: var(--sv-current-season-color, #e83331); color: #fff; font-size: 13.75px !important; font-weight: 700; letter-spacing: 0.12em; line-height: 1; text-shadow: 0 1.25px 5px rgba(52, 44, 40, 0.18); text-transform: uppercase; box-shadow: 0 12.5px 27.5px rgba(52, 44, 40, 0.12); } .webRoot.moduleDesign #testimonialViewer .testimonial .paddingWrap { padding: 0 18px 0 0; } .webRoot.moduleDesign #testimonialViewer .testimonial:nth-child(2n) .paddingWrap, .webRoot.moduleDesign #testimonialViewer .testimonial.single .paddingWrap { padding: 0; } .webRoot.moduleDesign #testimonialViewer .testimonial .title { color: var(--sv-header-text-color); font-size: 18px; font-weight: 700; } .webRoot.moduleDesign #testimonialViewer .testimonial .author { color: #9f9289; font-weight: 700; } .webRoot.moduleDesign #testimonialViewer .testimonial .content, .webRoot.moduleDesign .stripeShop-card, .webRoot.moduleDesign .subscriptionPicker .subscription { border: var(--sv-widget-inset-border); border-radius: 20px; background: var(--sv-widget-inset-bg); box-shadow: var(--sv-widget-inset-shadow); color: #746a64; } /* Subscription / membership picker — warm cards (overrides core absolute price/CTA) */ /* Live DOM has nested `.subscriptionPicker` wrappers; inner must not become its own grid. */ .webRoot.moduleDesign .subscriptionPicker .subscriptionPicker, #main-content .webRoot.moduleDesign .subscriptionPicker .subscriptionPicker { display: contents !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; } /* Core `.clearfix` ::before/::after (`display:table`) must not become grid/flex items */ #main-content .webRoot.moduleDesign .subscriptionPicker::before, #main-content .webRoot.moduleDesign .subscriptionPicker::after, .webRoot.moduleDesign .subscriptionPicker::before, .webRoot.moduleDesign .subscriptionPicker::after { content: none !important; display: none !important; } /* Outer picker only (exclude nested wrapper) */ #main-content .webRoot.moduleDesign .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker), .webRoot.moduleDesign .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker) { display: flex !important; flex-direction: column !important; width: 100% !important; max-width: none !important; gap: var(--moduleDesign-module-gap, 15px); overflow: visible; margin-left: 0 !important; margin-right: 0 !important; padding: 24px 24px 20px; flex-wrap: nowrap !important; align-items: stretch; box-sizing: border-box; isolation: isolate; } @media (min-width: 801px) { #main-content .webRoot.moduleDesign .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker), .webRoot.moduleDesign .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); } #main-content .webRoot.moduleDesign .subscriptionPicker .subscription, .webRoot.moduleDesign .subscriptionPicker .subscription { margin-left: 0 !important; margin-right: 0 !important; margin-bottom: 0 !important; } } @media (min-width: 1100px) { #main-content .webRoot.moduleDesign .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker), .webRoot.moduleDesign .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker) { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .webRoot.moduleDesign .subscriptionPicker .subscription, .webRoot.moduleDesign .subscriptionPicker .subscription.sv-subscription-card { --sv-subscription-card-pad-x: 22px; --sv-subscription-card-pad-y: 20px; text-decoration: none !important; position: relative !important; display: flex !important; flex: none !important; flex-direction: column; align-items: stretch; width: 100% !important; min-width: 0; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden; border-radius: 24px !important; border: 1px solid rgba(255, 255, 255, 0.76) !important; text-align: center; background: linear-gradient(155deg, #ffffff 0%, #fffbf2 42%, #fff6f4 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 16px 36px rgba(85, 65, 48, 0.1) !important; transition: box-shadow 0.22s ease, transform 0.22s ease; } .webRoot.moduleDesign .subscriptionPicker .subscription .sv-subscription-cardBody { padding: var(--sv-subscription-card-pad-y) var(--sv-subscription-card-pad-x); text-align: center; } .webRoot.moduleDesign .subscriptionPicker .subscription:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 20px 44px rgba(85, 65, 48, 0.14) !important; transform: translateY(-2px); text-decoration: none !important; } /* Beat legacy core `#main-content .subscriptionPicker .badge` (absolute, top:-22px, rotate) */ #main-content .webRoot.moduleDesign .subscriptionPicker .subscription .badge { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; white-space: normal !important; } .webRoot.moduleDesign .subscriptionPicker .subscription .badge { display: none; position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; box-sizing: border-box; width: 100%; max-width: none; margin: 0; padding: 14px 16px 13px; border-radius: 23px 23px 0 0; background: linear-gradient(135deg, #ffe9a8 0%, #ffd45c 55%, #f5c038 100%); color: #4a3b12; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; white-space: normal; text-align: center; box-shadow: none; overflow: visible; flex-shrink: 0; z-index: 2; } .webRoot.moduleDesign .subscriptionPicker .subscription.hasBadge .badge { display: block; } /* Badge copy is Aurora `string` — must not inherit standalone string-module card chrome */ .webRoot.moduleDesign .subscriptionPicker .subscription .badge .string, .webRoot.moduleDesign .subscriptionPicker .subscription .badge .nodeBase.string { position: static; margin: 0; padding: 0; border: none; border-radius: 0; overflow: visible; background: transparent !important; box-shadow: none !important; } .webRoot.moduleDesign .subscriptionPicker .subscription .badge .string::before, .webRoot.moduleDesign .subscriptionPicker .subscription .badge .string::after { display: none !important; content: none !important; } .webRoot.moduleDesign .subscriptionPicker .subscription .badge .string-content { position: static; z-index: auto; margin: 0; padding: 0 !important; border: none; border-radius: 0; background: transparent !important; box-shadow: none !important; color: inherit; text-align: center; } .webRoot.moduleDesign .subscriptionPicker .subscription .badge .string-content p { margin: 0; padding: 0; color: inherit; font-family: inherit; font-size: inherit; font-weight: inherit; line-height: 1.45; text-align: center; overflow: visible; } .webRoot.moduleDesign .subscriptionPicker .subscription .badge .string-content p:first-child { margin-top: 0; } .webRoot.moduleDesign .subscriptionPicker .subscription .title { width: 100%; margin: 0 0 10px !important; padding: 0; text-align: center; } .webRoot.moduleDesign .subscriptionPicker .subscription .title h3 { margin: 0; color: var(--sv-header-text-color); font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-size: 22px; font-weight: 700; line-height: 1.25; text-align: center; } .webRoot.moduleDesign .subscriptionPicker .subscription .description { flex: 1 1 auto; width: 100%; margin: 0 0 18px; padding: 0 !important; color: #746a64; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.55; text-align: center; } .webRoot.moduleDesign .subscriptionPicker .subscription .description p { margin: 0 0 0.65em; text-align: center; } .webRoot.moduleDesign .subscriptionPicker .subscription .description p:last-child { margin-bottom: 0; } .webRoot.moduleDesign .subscriptionPicker .subscription .price { position: static !important; bottom: auto !important; left: auto !important; right: auto !important; width: 100%; margin: 0 0 14px; padding: 14px 0 0; border-top: 1px solid rgba(116, 106, 100, 0.14); text-align: center; } .webRoot.moduleDesign .subscriptionPicker .subscription .sv-subscription-priceAmount { display: block; color: var(--sv-header-text-color); font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-size: 26px; font-weight: 700; line-height: 1.15; text-align: center; } .webRoot.moduleDesign .subscriptionPicker .subscription .sv-subscription-duration, .webRoot.moduleDesign .subscriptionPicker .subscription .price > div, .webRoot.moduleDesign .subscriptionPicker .subscription .price > .sv-subscription-duration { display: block; position: static !important; margin-top: 4px; color: #9f9289; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 600; line-height: 1.4; text-align: center; } .webRoot.moduleDesign .subscriptionPicker .subscription .purchaseButton { position: static !important; bottom: auto !important; left: auto !important; right: auto !important; display: flex; justify-content: center; width: 100%; margin: auto 0 0; padding: 0; text-align: center; } .webRoot.moduleDesign .subscriptionPicker .subscription .purchaseButton .button, .webRoot.moduleDesign .subscriptionPicker .subscription .purchaseButton .button.sv-subscription-cta { display: inline-flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 0; min-height: 0; height: auto; margin: 0 auto; padding: var(--sv-btn-subscription-padding-y) var(--sv-btn-subscription-padding-x) !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; background: linear-gradient(145deg, #ef3a38 0%, #d82321 52%, #b81a18 100%) !important; color: #fff !important; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 19px !important; letter-spacing: 0.01em; white-space: nowrap; box-shadow: 0 6px 14px rgba(216, 35, 33, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; text-decoration: none !important; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .webRoot.moduleDesign .subscriptionPicker .subscription .purchaseButton .button:hover, .webRoot.moduleDesign .subscriptionPicker .subscription .purchaseButton .button.sv-subscription-cta:hover { background: linear-gradient(145deg, #e02f2d 0%, #c41f1d 52%, #a31614 100%) !important; color: #fff !important; box-shadow: 0 8px 18px rgba(216, 35, 33, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; transform: translateY(-1px); } /* /abo/ — membership overview polish, aligned with checkout glass cards. */ .webRoot.moduleDesign.pageKey-abo { --sv-abo-gap: 18px; --sv-abo-card-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 250, 235, 0.94) 52%, rgba(255, 244, 244, 0.95) 100%); --sv-abo-inset-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.88) 0%, rgba(255, 251, 243, 0.86) 100%); } .webRoot.moduleDesign.pageKey-abo > .string:first-child { max-width: none; padding: 0; } .webRoot.moduleDesign.pageKey-abo > .string:first-child .string-content { margin: 0; text-align: left; } .webRoot.moduleDesign.pageKey-abo > .string:first-child .string-content h1 { margin-bottom: 0.08em; letter-spacing: -0.02em; } .webRoot.moduleDesign.pageKey-abo > .string:first-child .string-content p.subHeadline { margin: 0; max-width: 38rem; } #main-content .webRoot.moduleDesign.pageKey-abo > .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker), .webRoot.moduleDesign.pageKey-abo > .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker) { gap: var(--sv-abo-gap); padding: 18px; } @media (min-width: 1100px) { #main-content .webRoot.moduleDesign.pageKey-abo > .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker), .webRoot.moduleDesign.pageKey-abo > .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker) { grid-template-columns: minmax(0, 0.92fr) repeat(3, minmax(0, 1fr)); align-items: stretch; } } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription, .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription.sv-subscription-card { border-radius: 26px !important; border: var(--sv-widget-surface-border) !important; background: var(--sv-widget-surface-highlight), var(--sv-abo-card-bg) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 18px 42px rgba(80, 52, 38, 0.11) !important; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 90% 6%, rgba(232, 51, 49, 0.1) 0, transparent 112px), radial-gradient(circle at 6% 106%, rgba(255, 191, 45, 0.13) 0, transparent 130px); } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .badge, .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .sv-subscription-cardBody { position: relative; z-index: 1; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .badge { padding: 10px 14px 9px; background: linear-gradient(135deg, rgba(255, 231, 166, 0.98) 0%, rgba(255, 207, 84, 0.96) 58%, rgba(245, 183, 38, 0.94) 100%); color: #503915; text-transform: none; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .sv-subscription-cardBody { display: flex; flex: 1 1 auto; flex-direction: column; box-sizing: border-box; width: 100%; padding: 16px; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .title { margin-bottom: 10px !important; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .description { margin-bottom: 14px; color: #675e58; font-size: 14px; line-height: 1.45; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .price { box-sizing: border-box; width: 100%; margin: auto 0 12px; padding: 10px 10px 9px; border: var(--sv-widget-inset-border); border-radius: 16px; background: var(--sv-widget-inset-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72); } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .sv-subscription-priceAmount { color: #4a403c; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .sv-subscription-duration { color: #756a62; font-size: 12px; font-weight: 600; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .sv-subscription-duration p { margin: 0; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .purchaseButton { margin-top: 0; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .purchaseButton .button, .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .purchaseButton .button.sv-subscription-cta { padding: var(--sv-btn-subscription-padding-y) var(--sv-btn-subscription-padding-x) !important; box-shadow: 0 6px 14px rgba(216, 35, 33, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription.sv-subscription-card--2 { background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 252, 238, 0.95) 54%, rgba(242, 252, 234, 0.94) 100%) !important; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription.sv-subscription-card--2 .badge { background: linear-gradient(135deg, #e7f7c8 0%, #cbe978 58%, #9cc63c 100%); color: #33451a; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription.sv-subscription-card--2 .purchaseButton .button, .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription.sv-subscription-card--2 .purchaseButton .button.sv-subscription-cta { background: linear-gradient(145deg, #8fbf24 0%, #6fa118 58%, #5a8410 100%) !important; box-shadow: 0 8px 18px rgba(111, 161, 24, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } .webRoot.moduleDesign.pageKey-abo > .string:not(:first-child) { background: var(--sv-abo-card-bg); } .webRoot.moduleDesign.pageKey-abo > .string:not(:first-child) .string-content { max-width: 860px; margin: 0 auto; } @media (max-width: 800px) { .webRoot.moduleDesign.pageKey-abo { --sv-abo-gap: 14px; } #main-content .webRoot.moduleDesign.pageKey-abo > .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker), .webRoot.moduleDesign.pageKey-abo > .subscriptionPicker:not(.subscriptionPicker .subscriptionPicker) { padding: 14px; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .sv-subscription-cardBody { padding: 14px; } } .webRoot.moduleDesign .stripeShop-module { max-width: none; margin-bottom: 0; } .webRoot.moduleDesign .stripeShop-grid { gap: var(--moduleDesign-module-gap); } .webRoot.moduleDesign .stripeShop-card { border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 14px 30px rgba(85, 65, 48, 0.08); } .webRoot.moduleDesign .stripeShop-btn { border-radius: 999px; background: #342c28; font-weight: 700; } .webRoot.moduleDesign .stripeShop-btn:hover { background: #e83331; } .webRoot.moduleDesign .stripeShop-alert { border-radius: 16px; } .webRoot.moduleDesign .releaseStatsWidget, .webRoot.moduleDesign .releaseFavouritesWidget { max-width: none; } .webRoot.moduleDesign .releaseStatsWidget > .releaseStatsWidget { max-width: none; } .webRoot.moduleDesign .releaseViewer.list, .webRoot.moduleDesign .releaseViewer.topic { overflow: visible; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; } .webRoot.moduleDesign .releaseView-container, .webRoot.moduleDesign .releaseViewer.topic .topicView-container { overflow: visible; background: transparent; } .webRoot.moduleDesign .releaseView-container .release:not(.openInLayer), .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer { position: relative; isolation: isolate; overflow: hidden; margin: 0 0 var(--moduleDesign-module-gap) !important; padding: 0; border: 1px solid rgba(255, 255, 255, 0.76); border-radius: 20px; background: radial-gradient(circle at 92% 8%, rgba(255, 255, 255, 0.86) 0, rgba(255, 255, 255, 0.86) 42px, transparent 43px), linear-gradient(145deg, rgba(255, 255, 255, 0.84) 0%, rgba(255, 249, 232, 0.76) 52%, rgba(255, 242, 242, 0.8) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 14px 30px rgba(85, 65, 48, 0.08); } body.sv-release-layer-open .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.sv-release-layer-owner { z-index: 10070; } .webRoot.moduleDesign .releaseView-container .release::before, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(circle at 88% 10%, var(--release-season-color, var(--season-color, #91be14)) 0, transparent 116px), radial-gradient(circle at 4% 112%, var(--release-season-color, var(--season-color, #ffb300)) 0, transparent 132px); opacity: 0.07; } .webRoot.moduleDesign .releaseViewer.list .releaseView-container .release:not(.openInLayer)::before { background: radial-gradient(circle at 96% 8%, var(--release-season-color, #91be14) 0, transparent 166px), radial-gradient(circle at 8% 106%, var(--release-season-color, #91be14) 0, transparent 134px), radial-gradient(circle at 78% 58%, var(--release-season-color, #91be14) 0, transparent 104px), linear-gradient(112deg, var(--release-season-color, #91be14) 0, transparent 44%); opacity: 0.06; } .webRoot.moduleDesign .releaseView-container .release > .head, .webRoot.moduleDesign .releaseView-container .release > .content, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer > .topic-container, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer > .children { position: relative; z-index: 1; } /* Horizontal overflow on the layer breaks sticky for descendants in some engines; scroll lives on > .content. */ .webRoot.moduleDesign .releaseView-container .release.openInLayer, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer { overflow-x: hidden; overflow-y: hidden; } .webRoot.moduleDesign .releaseView-container .release:hover, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 252, 244, 0.9) 55%, rgba(255, 246, 246, 0.92) 100%); } /* Jahreskreis (topic): season pill — favourites-widget metrics; count inside pill, no icon */ .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonSection > .sv-releaseHeadStickyCluster > .topicTitle, .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonHead > .sv-releaseHeadStickyCluster > .topicTitle { display: inline-flex; flex-wrap: nowrap; align-items: center; margin: 0; padding: 8px 14px; border: 1px solid rgba(255, 255, 255, 0.38); border-radius: 999px; color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 20px rgba(80, 52, 38, 0.14); text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); opacity: var(--sv-motion-chrome-pill-opacity, 0.9); } .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonSection > .sv-releaseHeadStickyCluster > .topicTitle .seasonHead-title, .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonHead > .sv-releaseHeadStickyCluster > .topicTitle .seasonHead-title { display: inline; text-transform: uppercase; } .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonSection > .sv-releaseHeadStickyCluster > .topicTitle .seasonHead-count, .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonHead > .sv-releaseHeadStickyCluster > .topicTitle .seasonHead-count { display: inline; margin: 0; padding: 0; font-size: inherit; font-weight: 600; color: #fff; white-space: nowrap; text-transform: none; letter-spacing: normal; } .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonSection > .sv-releaseHeadStickyCluster > .topicTitle, .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonHead > .sv-releaseHeadStickyCluster > .topicTitle { gap: 0.25em !important; justify-content: flex-start !important; width: max-content !important; max-width: 100%; letter-spacing: 0; } .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonSection > .sv-releaseHeadStickyCluster > .topicTitle .seasonHead-title, .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonHead > .sv-releaseHeadStickyCluster > .topicTitle .seasonHead-title { letter-spacing: 0.06em; } /* List: release type pill — flat on light typeHead (no border, no drop shadow halo) */ .webRoot.moduleDesign .releaseViewer.list .releaseView-container .seasonHead.typeHead > .sv-releaseHeadStickyCluster > .topicTitle { border: 0; box-shadow: none; opacity: var(--sv-motion-chrome-pill-opacity, 0.9); } .webRoot.moduleDesign .releaseViewer.list .releaseView-container .seasonHead.typeHead > .sv-releaseHeadStickyCluster.sv-releaseHeadStickyCluster-docked > .topicTitle, .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonSection > .sv-releaseHeadStickyCluster.sv-releaseHeadStickyCluster-docked > .topicTitle, .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonHead > .sv-releaseHeadStickyCluster.sv-releaseHeadStickyCluster-docked > .topicTitle { opacity: 1; } .webRoot.moduleDesign .releaseViewer.list .releaseView-container .seasonHead.typeHead > .sv-releaseHeadStickyCluster > .topicTitle .topicName h3 { letter-spacing: normal; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.12); text-transform: none; } .webRoot.moduleDesign .releaseViewer.list .releaseView-container .seasonHead.typeHead > .sv-releaseHeadStickyCluster > .seasonHead-desc, .webRoot.moduleDesign .releaseViewer.list .releaseView-container .seasonHead.typeHead > .sv-releaseHeadStickyCluster > .desc { color: var(--sv-typehead-desc-color, #e83331); } .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonHead > .sv-releaseHeadStickyCluster > .seasonHead-desc, .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonHead > .sv-releaseHeadStickyCluster > .desc, .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonSection > .sv-releaseHeadStickyCluster > .seasonHead-desc, .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonSection > .sv-releaseHeadStickyCluster > .desc { color: var(--season-color, #e83331); } /* Season bracket — match releaseFavouritesWidget `.releaseFavouritesWidget-seasonTopics` */ .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonContent .seasonContent-topics { position: relative; isolation: isolate; padding-left: 12px; border-left: 4px solid var(--season-color, #e83331); border-radius: 12px 0 0 12px; } .webRoot.moduleDesign .releaseViewer.topic .topicView-container .seasonContent .seasonContent-topics::before { content: ""; position: absolute; inset: -6px -8px -6px 0; z-index: -1; border-radius: 18px; background: radial-gradient(circle at 0 10%, var(--season-color, #e83331) 0, transparent 126px), linear-gradient(90deg, var(--season-color, #e83331) 0, transparent 46%); opacity: 0.045; pointer-events: none; } .webRoot.moduleDesign .releaseViewer.topic .topicView-container .topic-container { position: relative; isolation: isolate; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.55); background: radial-gradient(circle at 92% 12%, rgba(255, 255, 255, 0.82) 0, rgba(255, 255, 255, 0.82) 32px, transparent 33px), linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 250, 240, 0.88) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75), 0 8px 22px rgba(85, 65, 48, 0.08); padding: 0; } .webRoot.moduleDesign .releaseViewer.topic .topicView-container .topic-container::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: radial-gradient(circle at 92% 16%, var(--season-color, #91be14) 0, transparent 96px); opacity: 0.06; pointer-events: none; } .webRoot.moduleDesign .releaseViewer.topic .topicView-container .topic-container > * { position: relative; z-index: 1; } .webRoot.moduleDesign .releaseViewer.topic .topicView-container .topic-container:hover { background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 254, 248, 0.96) 100%); } .webRoot.moduleDesign .releaseView-container .release > .head { padding: 14px; } .webRoot.moduleDesign .releaseView-container .release > .head > .block.upper, .webRoot.moduleDesign .releaseViewer.topic .topic .image-inner { padding-right: 18px; } /* List rows: thumb + text + actions (heart right, title band) */ .webRoot.moduleDesign .releaseView-container .release > .head > .releaseHeadMain { display: flex; flex-direction: row; align-items: flex-start; flex-wrap: nowrap; width: 100%; min-width: 0; } .webRoot.moduleDesign .releaseView-container .release > .head > .releaseHeadMain > .block { float: none; margin-bottom: 0; } .webRoot.moduleDesign .releaseView-container .release > .head > .releaseHeadMain > .block.upper { flex-shrink: 0; } .webRoot.moduleDesign .releaseView-container .release > .head > .releaseHeadMain > .block.text { flex: 1 1 0; min-width: 0; } .webRoot.moduleDesign .releaseView-container .release > .head .releaseHeadActions { flex: 0 0 auto; align-self: flex-start; margin-left: auto; padding-left: 10px; padding-top: 2px; line-height: 0; } /* Cover is already shown in .releaseIcon; legacy float-right image breaks the row */ .webRoot.moduleDesign .releaseView-container .release > .head > .releaseHeadMain > .block > .title .image-inner { display: none !important; } /* Cover thumbs — list rows + topic accordion releases (not layer head, not Jahreskreis/topic-card art) */ .webRoot.moduleDesign .releaseViewer .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper > .releaseIcon img, .webRoot.moduleDesign .releaseView-container .release:not(.openInLayer) > .head > .block > .releaseIcon img { border-radius: var(--sv-icon-squircle-radius-md); background: var(--sv-icon-squircle-bg); box-shadow: var(--sv-icon-squircle-shadow); } .webRoot.moduleDesign .releaseView-container .release:not(.openInLayer) > .head > .block.upper > .releaseIcon, .webRoot.moduleDesign .releaseViewer .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper > .releaseIcon { overflow: hidden; border-radius: var(--sv-icon-squircle-radius-md); } /* * Topic view: keep season-pill icons decorative only. * Season .icon assets are outline artwork; squircle clip reads as broken arcs. */ .webRoot.moduleDesign .topicView-container .seasonHead > .sv-releaseHeadStickyCluster > .topicTitle .icon, .webRoot.moduleDesign .topicView-container .seasonSection > .sv-releaseHeadStickyCluster > .topicTitle .icon, .webRoot.moduleDesign .topicView-container .seasonHead > .sv-releaseHeadStickyCluster > .topicTitle .icon img, .webRoot.moduleDesign .topicView-container .seasonSection > .sv-releaseHeadStickyCluster > .topicTitle .icon img, .webRoot.moduleDesign .releaseView-container > .seasonHead > .sv-releaseHeadStickyCluster > .topicTitle .icon, .webRoot.moduleDesign .releaseView-container > .seasonHead > .sv-releaseHeadStickyCluster > .topicTitle .icon img { border-radius: 0 !important; background: none !important; box-shadow: none !important; } .webRoot.moduleDesign .releaseViewer.topic .topic .image-inner .image-wrap { width: 72px; height: 72px; border-radius: var(--sv-icon-squircle-radius-md); background: var(--sv-icon-squircle-bg); box-shadow: var(--sv-icon-squircle-shadow); overflow: hidden; } .webRoot.moduleDesign .releaseViewer.topic .topic .image-inner img { display: block; width: 72px; height: 72px; border: 0; border-radius: inherit; background: transparent; box-shadow: none; object-fit: cover; } .webRoot.moduleDesign .releaseViewer.topic .topic.imageVisible .image-inner img { border: 0; } /* Widget modules — same cover chrome as release viewer (favourites, slider placeholder, …) */ .webRoot.moduleDesign .releaseFavouritesWidget-rowIcon, .webRoot.moduleDesign .releaseFavouritesWidget-topicThumb, .webRoot.moduleDesign .releaseFavouritesWidget-accordionTypeIcon, .webRoot.moduleDesign .releaseViewer.slider .releaseSlider .slide .mediaPreview .stage-placeholder-image .stage .placeholder img { border-radius: var(--sv-icon-squircle-radius-md); background: var(--sv-icon-squircle-bg); box-shadow: var(--sv-icon-squircle-shadow); } .webRoot.moduleDesign .releaseFavouritesWidget-accordionTypeIcon { border-radius: var(--sv-icon-squircle-radius-sm); box-shadow: var(--sv-icon-squircle-shadow-sm); } .webRoot.moduleDesign .releaseFavouritesWidget-rowIcon, .webRoot.moduleDesign .releaseFavouritesWidget-topicThumb, .webRoot.moduleDesign .releaseFavouritesWidget-accordionTypeIcon { overflow: hidden; } .webRoot.moduleDesign .releaseFavouritesWidget-rowIcon img, .webRoot.moduleDesign .releaseFavouritesWidget-topicThumb img, .webRoot.moduleDesign .releaseFavouritesWidget-accordionTypeIcon img { border-radius: inherit; background: transparent; box-shadow: none; } .webRoot.moduleDesign .releaseView-container .release > .head > .block.text .title-inner, .webRoot.moduleDesign .releaseViewer.topic .topic .title-inner { padding-top: 0; line-height: 1.1; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadMain { display: flex; flex-direction: row; align-items: flex-start; flex-wrap: nowrap; width: 100%; min-width: 0; padding: 11px 14px; box-sizing: border-box; gap: 10px; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadMeta { display: flex; flex: 1 1 auto; min-width: 0; align-items: flex-start; gap: 10px; } .webRoot.moduleDesign .releaseViewer.topic .topic .image-inner { flex-shrink: 0; padding-right: 0; } .webRoot.moduleDesign .releaseViewer.topic .topic .block.text { flex: 1 1 0; min-width: 0; float: none; padding-right: 0; } .webRoot.moduleDesign .releaseViewer.topic .topic .topicTitleRow { display: flex; flex-wrap: nowrap; align-items: baseline; gap: 0.2em 0.45em; min-width: 0; } .webRoot.moduleDesign .releaseViewer.topic .topic .topicTitleRow h2, .webRoot.moduleDesign .releaseViewer.topic .topic .topicCount { white-space: nowrap; } .webRoot.moduleDesign .releaseViewer.topic .topic .topicCount { color: #746a64; font-size: 13px; font-weight: 600; line-height: 1.2; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadChevron { display: block !important; flex: 0 0 auto; width: 11px; height: 11px; margin-top: 7px; color: #746a64; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); opacity: 0.45; transition: transform 0.2s ease, opacity 0.2s ease; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadActions { flex: 0 0 auto; align-self: flex-start; margin-left: auto; padding-left: 4px; padding-top: 1px; line-height: 0; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadFavourite { line-height: 0; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadFavourite:empty { display: none; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadFavourite .releaseFavourite-btn--inHead { cursor: pointer; padding: 2px; margin: 0; border: 0; background: transparent; line-height: 0; border-radius: 4px; color: #e83331; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadFavourite .releaseFavourite-btn--inHead .releaseFavourite-heart { display: block; width: 20px; height: 20px; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadFavourite .releaseFavourite-btn--inHead .releaseFavourite-heart--solid { display: none; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadFavourite .releaseFavourite-btn--inHead[aria-pressed="true"] .releaseFavourite-heart--line { display: none; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadFavourite .releaseFavourite-btn--inHead[aria-pressed="true"] .releaseFavourite-heart--solid { display: block; } .webRoot.moduleDesign .releaseView-container .release h2 { color: var(--sv-header-text-color); font-size: 24px; font-weight: 700; letter-spacing: -0.02em; } .webRoot.moduleDesign .releaseViewer.topic .topic h2 { color: var(--sv-header-text-color); font-size: 16px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; } .webRoot.moduleDesign .releaseView-container .release > .head > .releaseHeadMain > .block > .subTitle { padding-top: 8px; color: var(--sv-subheader-text-color); font-weight: 700; clear: none; float: none; } .webRoot.moduleDesign .releaseViewer.list .releaseView-container .release > .head .releaseTopicLink, .webRoot.moduleDesign .releaseView-container .release.openInLayer > .head .releaseTopicLink, body.sv-release-layer-open #sv-global-release-layer-host .release.openInLayer > .head .releaseTopicLink { display: block; margin: 8px 0 0; font-size: 13px; line-height: 1.35; color: #746a64; } .webRoot.moduleDesign .releaseViewer.list .releaseView-container .release > .head .releaseTopicLink-label, .webRoot.moduleDesign .releaseView-container .release.openInLayer > .head .releaseTopicLink-label, body.sv-release-layer-open #sv-global-release-layer-host .release.openInLayer > .head .releaseTopicLink-label { display: inline; font-weight: 600; margin: 0; } .webRoot.moduleDesign .releaseViewer.list .releaseView-container .release > .head .releaseTopicLink-anchor, .webRoot.moduleDesign .releaseView-container .release.openInLayer > .head .releaseTopicLink-anchor, body.sv-release-layer-open #sv-global-release-layer-host .release.openInLayer > .head .releaseTopicLink-anchor { display: inline; margin-left: 0.35em; color: var(--release-season-color, #e83331); font-weight: 700; text-decoration: none; } .webRoot.moduleDesign .releaseViewer.list .releaseView-container .release > .head .releaseTopicLink-arrow, .webRoot.moduleDesign .releaseView-container .release.openInLayer > .head .releaseTopicLink-arrow, body.sv-release-layer-open #sv-global-release-layer-host .release.openInLayer > .head .releaseTopicLink-arrow { display: inline-block; margin-left: 0.2em; font-size: 0.95em; line-height: 1; white-space: nowrap; opacity: 0.85; } .webRoot.moduleDesign .releaseViewer.list .releaseView-container .release > .head .releaseTopicLink-anchor:hover, .webRoot.moduleDesign .releaseViewer.list .releaseView-container .release > .head .releaseTopicLink-anchor:focus-visible, .webRoot.moduleDesign .releaseView-container .release.openInLayer > .head .releaseTopicLink-anchor:hover, .webRoot.moduleDesign .releaseView-container .release.openInLayer > .head .releaseTopicLink-anchor:focus-visible { text-decoration: underline; } .webRoot.moduleDesign .releaseView-container .release > .head > .block > .description { margin: 9px 0 0; color: #746a64 !important; font-family: "Open Sans", Arial, Helvetica, sans-serif; line-height: 1.5; } .webRoot.moduleDesign .releaseViewer.topic .topic .description { margin: 4px 0 0; color: #746a64 !important; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 12px; line-height: 1.4; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer:not(.open) .topic .description { max-height: 2.8em; overflow: hidden; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.open .topic-container { background: rgba(255, 255, 255, 0.62); border-bottom: 1px solid rgba(116, 106, 100, 0.14); } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.open .topic .description { max-height: none; overflow: visible; } .webRoot.moduleDesign .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text > .description, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text > .description { display: none; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.open .topicHeadChevron { transform: rotate(225deg); opacity: 0.68; } /* Open topic: nested release rows should read like favourites-widget rows, not full list cards. */ .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) { border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 22px rgba(85, 65, 48, 0.07); } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head { padding: 10px 12px; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain { gap: 10px; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text > .title, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text > .title > .title-inner { min-width: 0; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text { float: none; margin: 0; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper { padding-right: 0; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper > .releaseIcon, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper > .releaseIcon img { width: 48px; min-width: 48px; max-width: 48px; height: 48px; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text .title-inner { display: block; padding-top: 1px; line-height: 1.15; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) h2 { margin: 0; color: var(--sv-header-text-color); font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block > .subTitle { padding-top: 0; margin-top: 3px; clear: none; float: none; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block > .subTitle h4 { margin: 0; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 700; color: var(--sv-subheader-text-color); line-height: 1.2; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head .releaseHeadActions { padding-left: 0; padding-top: 1px; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) .releaseHeadFavourite { line-height: 0; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) .releaseHeadFavourite:empty { display: none; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) .releaseHeadActions .releaseFavourite-btn--inHead .releaseFavourite-heart { width: 20px; height: 20px; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text > .description { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } /* Ribbon uses a square PNG (triangle); border-radius:999px was clipping it to a disk behind the thumb */ .webRoot.moduleDesign .releaseView-container .release.new .badge, .webRoot.moduleDesign .releaseViewer.topic .topic .badge { border-radius: 0; box-shadow: none; } .webRoot.moduleDesign .filterBar, .webRoot.moduleDesign .indexBar { position: relative; overflow: visible; margin-bottom: var(--moduleDesign-module-gap); border-radius: 18px; background: rgba(255, 255, 255, 0.72); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 12px 24px rgba(85, 65, 48, 0.07); } .webRoot.moduleDesign .filterBar { z-index: 18; } .webRoot.moduleDesign .indexBar { z-index: 36; } /* Topic Jahreskreis: sticky under fixed chrome (`--sv-chrome-top` = body padding-top / #sidebar height) */ .webRoot.moduleDesign .topicView-container > .indexBar.compact { position: sticky !important; z-index: 45; top: var(--sv-chrome-top, 80px); } @media (max-width: 800px) { .webRoot.moduleDesign .topicView-container > .indexBar.compact:not(.open) { top: var(--sv-chrome-top, 80px) !important; left: auto !important; right: auto !important; width: auto !important; max-width: none !important; margin-bottom: var(--moduleDesign-module-gap); } body.sv-mobile-header-compact .webRoot.moduleDesign .topicView-container > .indexBar.compact:not(.open) { top: var(--sv-chrome-top, 52px) !important; } .webRoot.moduleDesign .topicView-container .topic-container-outer { scroll-margin-top: calc(var(--sv-topic-chrome-stack-height, var(--sv-chrome-top, 80px)) + 8px); } .webRoot.moduleDesign .releaseViewer.topic, .webRoot.moduleDesign .releaseViewer.topic .topicView-container { overflow: visible !important; } .topicView-container > .indexBar.compact.sv-mobile-indexBar-pinned:not(.open) { position: sticky !important; } .sv-indexBar-sticky-placeholder { display: none !important; } } html.sv-force-mobile-landscape .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer:not(.open) .topic .topicHeadMain .image-inner .image-wrap { width: 72px !important; height: 72px !important; max-width: 100% !important; } html.sv-force-mobile-landscape .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer:not(.open) .topic.imageVisible .topicHeadMain .image-inner img { max-height: 72px !important; } html.sv-force-mobile-landscape .webRoot.moduleDesign .releaseViewer.topic .topicHeadMain { position: relative; } html.sv-force-mobile-landscape .webRoot.moduleDesign .releaseViewer.topic .topicHeadMeta { width: 100%; max-width: 100%; box-sizing: border-box; } html.sv-force-mobile-landscape .webRoot.moduleDesign .releaseViewer.topic .topicHeadActions { position: absolute; top: 12px; right: 14px; z-index: 3; margin-left: 0; padding: 0; } html.sv-force-mobile-landscape .webRoot.moduleDesign .releaseViewer.topic .topicHeadChevron { position: absolute; top: 18px; right: 49px; margin-top: 0; z-index: 2; } html.sv-force-mobile-landscape .webRoot.moduleDesign .releaseViewer.topic .topicHeadMain:not(:has(.topicHeadFavourite .releaseFavourite-btn--inHead)) .topicHeadChevron { right: 14px; } html.sv-force-mobile-landscape .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.open .topicHeadMeta { display: flow-root; } html.sv-force-mobile-landscape .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.open .topic .image-inner { float: left !important; margin: -8px 14px 0 0; } html.sv-force-mobile-landscape .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.open .topicHeadMeta::after { content: ''; display: table; clear: both; } @media (min-width: 801px) { .webRoot.moduleDesign .topicView-container > .indexBar.compact { top: var(--sv-chrome-top, 100px); } /* Desktop Jahreskreis: left/mid of pill = scroll to season, right = accordion (see template.indexBar.php zones) */ .webRoot.moduleDesign .indexBar.compact > .blocks > .block > .title { cursor: pointer; } } .webRoot.moduleDesign .filterBar > .blocks, .webRoot.moduleDesign .indexBar > .blocks { padding: 12px; } /* Jahreskreis: core `.indexBar > .blocks` is solid white; rounded pills show parent through transparent corner pixels. */ .webRoot.moduleDesign .indexBar.compact > .blocks { background: transparent !important; } .webRoot.moduleDesign .filterBar > .title, .webRoot.moduleDesign .indexBar > .title { color: var(--sv-header-text-color); font-weight: 700; } .webRoot.moduleDesign .filterBar-wrapper { position: relative; z-index: 26; } .webRoot.moduleDesign .topicView-container > .filterBar-wrapper { z-index: 46; } /* Filter chips: white pill — `.block.filterBlock` (nicht nur `> div`), damit core `@media (max-width:640px)` `.block.filterBlock > .title` nicht „gewinnt“ und Ecken flacht. */ .webRoot.moduleDesign .filterBar-wrapper .filterBar > .blocks > .block.filterBlock > .title { border-radius: 999px !important; background: #fff; box-shadow: 0 7px 16px rgba(85, 65, 48, 0.08); padding-right: 28px; } .webRoot.moduleDesign .filterBar-wrapper .filterBar > .blocks > .block.filterBlock > .title:hover { background: #fff7e5; opacity: 1; } /* Jahreskreis: Saisonfarbe inline auf .block + .title; äußere .block-Pill deckt anti-aliased Ecken. */ .webRoot.moduleDesign .indexBar.compact > .blocks > .block { border-radius: 999px; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > .title { border-radius: 999px !important; box-shadow: 0 7px 16px rgba(85, 65, 48, 0.08); } /* core: `.indexBar.compact > .blocks > div > .title:hover { opacity: 0.9 }` lässt Untergrund durch — Saison-Pills bleiben deckend. */ .webRoot.moduleDesign .indexBar.compact > .blocks > .block > .title:hover { opacity: 1; filter: brightness(1.06); } .webRoot.moduleDesign .filterBar-wrapper .filterBar > .blocks > .block.filterBlock > ul, .webRoot.moduleDesign .indexBar.compact > .blocks > .block > ul { z-index: 160; overflow: visible; min-width: 210px; padding: 7px; border: 1px solid rgba(255, 255, 255, 0.76); border-radius: 14px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 16px 34px rgba(85, 65, 48, 0.16); } .webRoot.moduleDesign .filterBar-wrapper .filterBar > .blocks > .block.filterBlock > ul > li, .webRoot.moduleDesign .indexBar.compact > .blocks > .block > ul > li { border-radius: 10px; } .webRoot.moduleDesign .filterBar-wrapper .filterBar > .blocks > .block.filterBlock > ul > li:hover, .webRoot.moduleDesign .indexBar.compact > .blocks > .block > ul > li:hover { background: color-mix(in srgb, var(--sv-current-season-color, #e83331) 6%, transparent); } .webRoot.moduleDesign .filterBar-wrapper .filterBar > .blocks > div.dropBlock a { color: var(--sv-header-text-color); font-weight: 700; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > ul > li.subBlock:hover > ul { z-index: 170; } .webRoot.moduleDesign .releaseView-container .release.openInLayer, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer { border: 1px solid rgba(255, 255, 255, 0.55); border-radius: 24px; background: linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 250, 236, 0.96) 48%, rgba(255, 245, 245, 0.97) 100%); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 24px 55px rgba(80, 52, 38, 0.13); } .webRoot.moduleDesign .releaseView-container .release.openInLayer > .content, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer > .content { background: linear-gradient(180deg, rgba(255, 252, 245, 0.98) 0%, rgba(255, 248, 240, 0.97) 100%); } @media (max-width: 800px) { .webRoot.moduleDesign .releaseView-container .release.openInLayer, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer { border-radius: 0 !important; border-left: 0 !important; border-right: 0 !important; box-shadow: none !important; } .webRoot.moduleDesign .releaseView-container .release.openInLayer .head, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .head { border-radius: 0 !important; } /* Media tabs: wrap row + ellipsis (see `_mediaOverrides.scss` mixin). */ .webRoot.moduleDesign .releaseView-container .release .mediaGroup, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release .mediaGroup { width: 100%; box-sizing: border-box; } .webRoot.moduleDesign .releaseView-container .release .mediaGroup .mediaContainer, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release .mediaGroup .mediaContainer { width: 100%; box-sizing: border-box; } .webRoot.moduleDesign .releaseView-container .release ul.mediaTabs li, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release ul.mediaTabs li { display: flex !important; align-items: center; flex: 0 1 auto !important; max-width: 100%; min-width: 0; transform: none !important; } .webRoot.moduleDesign .releaseView-container .release ul.mediaTabs li.active, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release ul.mediaTabs li.active { transform: none !important; } .webRoot.moduleDesign .releaseView-container .release ul.mediaTabs li a, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release ul.mediaTabs li a { display: block; width: 100%; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .index > ul > li, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release .indexContainer .index > ul > li { max-width: min(42vw, 9.5rem); min-width: 0; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .index > ul > li a, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release .indexContainer .index > ul > li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .webRoot.moduleDesign .releaseView-container .release.openInLayer .closeButton, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .closeButton { width: 34px; height: 34px; border-radius: 999px; background: #fff; box-shadow: 0 10px 24px rgba(80, 52, 38, 0.16); color: var(--sv-header-text-color); line-height: 34px; text-align: center; } .webRoot.moduleDesign .releaseView-container .release.openInLayer .head, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .head { border-radius: 24px 24px 0 0; margin-bottom: 0; background: radial-gradient(circle at 86% 18%, var(--release-season-color, #91be14) 0, transparent 154px), linear-gradient(105deg, rgba(255, 255, 255, 0) 0%, var(--release-season-color, #91be14) 100%), linear-gradient(145deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 250, 236, 0.96) 48%, rgba(255, 245, 245, 0.97) 100%); background-blend-mode: overlay, overlay, normal; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 10px 28px rgba(80, 52, 38, 0.08); } .webRoot.moduleDesign .releaseView-container .release.openInLayer .head.scrolling, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .head.scrolling { box-shadow: 0 12px 28px rgba(85, 65, 48, 0.12); } .webRoot.moduleDesign .releaseView-container .release.openInLayer .head .description, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .head .description { color: #746a64 !important; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.55; } .webRoot.moduleDesign .releaseView-container .release.openInLayer .head > .block > .subTitle, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .head > .block > .subTitle { color: #d82321; } /* Release layer / global host (#sv-global-release-md-wrap is outside #main-content) */ .webRoot.moduleDesign .releaseView-container .release.openInLayer .releaseIcon, .webRoot.moduleDesign .releaseView-container .release.openInLayer .releaseIcon img, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .releaseIcon, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .releaseIcon img { border-radius: var(--sv-icon-squircle-radius-lg); } .webRoot.moduleDesign .releaseView-container .release.openInLayer .releaseIcon, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .releaseIcon { overflow: hidden; } .webRoot.moduleDesign .releaseView-container .release.openInLayer .releaseIcon img, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .releaseIcon img { opacity: 0.96; filter: saturate(0.96) contrast(1); background: var(--sv-icon-squircle-bg); box-shadow: var(--sv-icon-squircle-shadow); } /* Favourite: icon-only; nav bar sits above indexContainer ::before (z-index). */ .webRoot.moduleDesign .releaseView-container .release .releaseFavourite-btn--inHead { background: transparent; border: 0; box-shadow: none; color: #9a908a; } .webRoot.moduleDesign .releaseView-container .release .releaseFavourite-btn--inHead:hover { color: #d82321; } .webRoot.moduleDesign .releaseView-container .release .releaseFavourite-btn--inHead[aria-pressed="true"] { background: transparent; border: 0; box-shadow: none; color: #d82321; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .releaseIndexNavBar-favourite .releaseFavourite-btn { color: rgba(255, 255, 255, 0.95); } .webRoot.moduleDesign .releaseView-container .release .indexContainer .releaseIndexNavBar-favourite .releaseFavourite-btn:hover { color: #fff; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .releaseIndexNavBar-favourite .releaseFavourite-btn[aria-pressed="true"] { color: #fff; } .webRoot.moduleDesign .releaseView-container .release:not(.openInLayer) .content { border-radius: 20px; } .webRoot.moduleDesign .releaseView-container .release:not(.openInLayer) .indexContainer { margin-bottom: var(--moduleDesign-module-gap); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 12px 24px rgba(85, 65, 48, 0.08); } /* Release detail layer: square top on nav bar only; bottom corners stay rounded. */ .webRoot.moduleDesign .releaseView-container .release.openInLayer > .content, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer > .content { border-radius: 0; padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)); } .webRoot.moduleDesign .releaseView-container .release.openInLayer .indexContainer, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .indexContainer { margin-top: 0; margin-bottom: 0; border-top-left-radius: 0 !important; border-top-right-radius: 0 !important; border-bottom-left-radius: 18px !important; border-bottom-right-radius: 18px !important; box-shadow: 0 12px 24px rgba(85, 65, 48, 0.08); overflow: hidden; } .webRoot.moduleDesign .releaseView-container .release .indexContainer:before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.34)); pointer-events: none; } .webRoot.moduleDesign .releaseView-container .release.openInLayer .indexContainer:before, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release.openInLayer .indexContainer:before { border-top-left-radius: 0; border-top-right-radius: 0; border-bottom-left-radius: 18px; border-bottom-right-radius: 18px; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .releaseIndexNavBar, .webRoot.moduleDesign .releaseView-container .release .indexContainer .index { position: relative; z-index: 1; } /* Section anchor strip: pill links on season-colored bar (matches filter chips / media tabs). */ .webRoot.moduleDesign .releaseView-container .release .indexContainer .releaseIndexNavBar-track { mask-image: linear-gradient( 90deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100% ); -webkit-mask-image: linear-gradient( 90deg, transparent 0, #000 10px, #000 calc(100% - 14px), transparent 100% ); } .webRoot.moduleDesign .releaseView-container .release .indexContainer .index > ul { min-height: 24px; padding: 3px 8px 3px 9px !important; gap: 0; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .index > ul > li { border-radius: 0; color: #fff; text-shadow: none; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .index > ul > li:not(:last-child)::after { content: "|"; flex: 0 0 auto; margin: 0 6px 0 8px; color: rgba(255, 255, 255, 0.55); font-weight: 300; font-size: 0.85em; line-height: 1; pointer-events: none; -webkit-user-select: none; user-select: none; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .index > ul > li a { font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.01em; line-height: 1.2; color: rgba(255, 255, 255, 0.94); text-shadow: 0 1px 4px rgba(52, 44, 40, 0.14); padding: 2px 0; border-radius: 0; transition: color 0.15s ease, opacity 0.15s ease; text-decoration: none !important; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .index > ul > li a:hover { color: #fff; background: transparent; box-shadow: none; opacity: 1; text-decoration: none !important; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .index > ul > li a:focus-visible { color: #fff; background: transparent; outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 2px; border-radius: 3px; text-decoration: none !important; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .releaseIndexNavBar-favourite { margin-left: 0; padding: 0 8px 0 5px !important; border-left: 0; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .releaseIndexNavBar-favourite .releaseFavourite-btn { padding: 4px 5px !important; border-radius: 0; transition: color 0.15s ease, opacity 0.15s ease; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .releaseIndexNavBar-favourite .releaseFavourite-btn:hover { background: transparent; } .webRoot.moduleDesign .releaseView-container .release .indexContainer .releaseIndexNavBar-favourite .releaseFavourite-btn:focus-visible { background: rgba(255, 255, 255, 0.22); outline: 2px solid rgba(255, 255, 255, 0.92); outline-offset: 1px; } .webRoot.moduleDesign .releaseView-container .release .content h2, .webRoot.moduleDesign .releaseView-container .release .content h3 { color: var(--sv-header-text-color); font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-weight: 700; } .webRoot.moduleDesign .releaseView-container .release .mediaGroup { margin-right: 24px; margin-left: 24px; padding-top: 2px; position: relative; } /* Intro short-description lives in mediaGroup; PDF/chords sit in the following subContainer. */ .webRoot.moduleDesign .releaseView-container .release .mediaGroup + .subContainer, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release .mediaGroup + .subContainer { margin-top: 12px; } .webRoot.moduleDesign .releaseView-container .release ul.mediaTabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 2px 3px; margin: 0 0 0 0 !important; padding: 0; list-style: none; position: relative; z-index: 2; } .webRoot.moduleDesign .releaseView-container .release ul.mediaTabs:has(> li:only-child > a.mediaTab) { display: none; } .webRoot.moduleDesign .releaseView-container .release ul.mediaTabs > li.mediaTabs-rowFill { display: none; } .webRoot.moduleDesign .releaseView-container .release ul.mediaTabs li { margin: 0 !important; padding: 0; border-radius: 11px 11px 0 0; background: rgba(255, 249, 238, 0.92); border: 1px solid rgba(130, 105, 78, 0.12); border-bottom: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75); transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .webRoot.moduleDesign .releaseView-container .release ul.mediaTabs li a { display: block; padding: 4px 14px 5px; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: 0.01em; color: #8f8174; border-radius: 0; } .webRoot.moduleDesign .releaseView-container .release ul.mediaTabs li:hover:not(.active) { background: rgba(255, 245, 228, 0.98); border-color: rgba(130, 105, 78, 0.18); } .webRoot.moduleDesign .releaseView-container .release ul.mediaTabs li:hover:not(.active) a { color: #6f6256; } .webRoot.moduleDesign .releaseView-container .release ul.mediaTabs li.active { background: #fff; border-color: rgba(255, 255, 255, 0.92); box-shadow: 0 -2px 8px rgba(85, 65, 48, 0.06); transform: translateY(1px); z-index: 3; } .webRoot.moduleDesign .releaseView-container .release ul.mediaTabs li.active a { top: 0; color: #d82321; } .webRoot.moduleDesign .releaseView-container .release ul.mediaTabs li a:focus-visible { outline: 2px solid #d82321; outline-offset: 2px; border-radius: 4px; } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer { margin: 0; width: 100%; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.76); border-radius: 0 22px 22px 22px; background: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 16px 36px rgba(85, 65, 48, 0.1); position: relative; z-index: 1; } .webRoot.moduleDesign .releaseView-container .release .mediaGroup:has(ul.mediaTabs > li:only-child) .mediaContainer { margin-top: 12px; border-radius: 22px; } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaEmbed { overflow: hidden; border-radius: 18px; box-shadow: 0 16px 34px rgba(85, 65, 48, 0.12); } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer .mediaDescriptionTitle { border-radius: 18px 18px 0 0; } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer .mediaDescription { border-radius: 0 0 18px 18px; } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer, .webRoot.moduleDesign .releaseView-container .release .content .audioDownloadContainer, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer, .webRoot.moduleDesign .releaseView-container .release .content .audioBar, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container, .webRoot.moduleDesign .releaseView-container .release .content .relatedContainer { position: relative; isolation: isolate; overflow: hidden; border-radius: 20px; border: 1px solid rgba(124, 45, 45, 0.08); background: radial-gradient(circle at 91% 10%, rgba(255, 255, 255, 0.86) 0, rgba(255, 255, 255, 0.86) 56px, transparent 57px), radial-gradient(circle at 14% 116%, rgba(255, 180, 0, 0.12) 0, rgba(255, 180, 0, 0.12) 108px, transparent 109px), linear-gradient(145deg, #fffdf8 0%, #fff7ed 48%, #fffefc 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 14px 30px rgba(85, 65, 48, 0.09); } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer::before, .webRoot.moduleDesign .releaseView-container .release .content .audioDownloadContainer::before, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer::before, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer::before, .webRoot.moduleDesign .releaseView-container .release .content .audioBar::before, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container::before, .webRoot.moduleDesign .releaseView-container .release .content .relatedContainer::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at calc(100% + 34px) -42px, var(--sv-widget-surface-orb-red) 0, var(--sv-widget-surface-orb-red) 112px, transparent 113px), radial-gradient(circle at 11% calc(100% + 28px), var(--sv-widget-surface-orb-gold) 0, var(--sv-widget-surface-orb-gold) 78px, transparent 79px), radial-gradient(circle at 78% 68%, var(--release-season-color, #91be14) 0, transparent 60px), radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent) 40px, transparent 41px), radial-gradient(circle at 58% 110%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent) 52px, transparent 53px), radial-gradient(circle at calc(100% + 10px) 58%, var(--release-season-color, #91be14) 0, transparent 36px), radial-gradient(circle at 44% 54%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, transparent) 24px, transparent 25px), radial-gradient(circle at 16% 34%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, transparent) 28px, transparent 29px), radial-gradient(circle at 88% 88%, var(--release-season-color, #91be14) 0, transparent 24px); opacity: 0.48; pointer-events: none; } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer::before { opacity: 0.58; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container::before { opacity: 0.56; } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer > *, .webRoot.moduleDesign .releaseView-container .release .content .audioDownloadContainer > *, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer > *, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer > *, .webRoot.moduleDesign .releaseView-container .release .content .audioBar > *, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > *, .webRoot.moduleDesign .releaseView-container .release .content .relatedContainer > * { position: relative; z-index: 1; } .webRoot.moduleDesign .releaseView-container .release .content { --sv-release-section-header-h: 34px; } .webRoot.moduleDesign .releaseView-container .release .content .audioDownloadContainer > .title, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer > .title, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer > .title, .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title, .webRoot.moduleDesign .releaseView-container .release .content .relatedContainer > .title, .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer .mediaDescriptionTitle { box-sizing: border-box; display: flex; align-items: center; min-height: var(--sv-release-section-header-h); margin-top: 0; padding: 0 16px; border: none; border-radius: 16px 16px 0 0; background: linear-gradient(128deg, #ffe0d9 0%, #fff2d6 46%, #fffcfa 100%); color: #7a221e; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.2; font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88); position: relative; overflow: hidden; } .webRoot.moduleDesign .releaseView-container .release .content .audioDownloadContainer > .title::before, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer > .title::before, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer > .title::before, .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title::before, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title::before, .webRoot.moduleDesign .releaseView-container .release .content .relatedContainer > .title::before, .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer .mediaDescriptionTitle::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 92% 50%, var(--release-season-color, #91be14) 0, transparent 116px), linear-gradient(90deg, var(--release-season-color, #91be14) 0, transparent 52%); opacity: 0.15; pointer-events: none; } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer .mediaDescriptionTitle::before { opacity: 0.2; } .webRoot.moduleDesign .releaseView-container .release .content .audioDownloadContainer > .title::after, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer > .title::after, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer > .title::after, .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title::after, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title::after, .webRoot.moduleDesign .releaseView-container .release .content .relatedContainer > .title::after, .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer .mediaDescriptionTitle::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(216, 35, 33, 0.1) 18%, rgba(216, 35, 33, 0.1) 82%, transparent 100%); pointer-events: none; } .webRoot.moduleDesign .releaseView-container .release .content .audioDownloadContainer > .title > *, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer > .title > *, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer > .title > *, .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title > *, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title > :not(.right):not(.sv-chordAction-group), .webRoot.moduleDesign .releaseView-container .release .content .relatedContainer > .title > *, .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer .mediaDescriptionTitle > * { margin: 0; font-size: inherit; line-height: inherit; font-weight: inherit; position: relative; z-index: 1; } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer > .title, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer > .title { background: rgba(255, 250, 242, 0.78); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer > .title::before, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer > .title::before { content: none; } /* Release detail: audio player — warm row + SVG transport (moduleDesign) */ .webRoot.moduleDesign .releaseView-container .release .content .audioBar { background: radial-gradient(circle at 18% 112%, rgba(255, 180, 0, 0.14) 0, rgba(255, 180, 0, 0.14) 86px, transparent 87px), linear-gradient(145deg, #fffdf9 0%, #fff6ee 54%, #ffffff 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 18px 40px rgba(85, 65, 48, 0.12); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar::after { content: none; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title { justify-content: space-between; gap: 10px; min-height: 48px; padding-left: 18px; padding-right: 18px; background: linear-gradient(90deg, rgba(122, 34, 30, 0.08) 0, rgba(122, 34, 30, 0) 64px), linear-gradient(128deg, #ffe0d9 0%, #fff0cf 45%, #fffaf4 100%); color: #7a221e; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title > .audioBar-sectionLabel, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release .content .audioBar > .title > .audioBar-sectionLabel { flex: 1 1 auto; min-width: 0; position: relative; padding-left: 30px; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title > .audioBar-sectionLabel::before, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release .content .audioBar > .title > .audioBar-sectionLabel::before { content: "\266B"; position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 999px; background: radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.42) 0, transparent 38%), var(--release-season-color, #91be14); color: #fff; font-size: 13px; line-height: 1; transform: translateY(-50%); box-shadow: 0 3px 8px rgba(120, 60, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.42); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .audioBar-trackTitle:empty, body.sv-release-layer-open #sv-global-release-layer-host.releaseView-container .release .content .audioBar .audioBar-trackTitle:empty { display: none; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title .volume { position: relative; top: auto; right: auto; transform: none; flex: 0 0 auto; display: flex; align-items: center; gap: 8px; margin-left: auto; z-index: 2; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title .volume .label { color: rgba(85, 65, 48, 0.72); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title .volume .control { position: relative; top: auto; width: 112px; height: 13px; border: 2px solid rgba(255, 255, 255, 0.84); border-radius: 999px; background: rgba(85, 65, 48, 0.1); overflow: hidden; box-shadow: 0 1px 4px rgba(85, 65, 48, 0.12), inset 0 1px 2px rgba(85, 65, 48, 0.08); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title .volume .control .cover { width: 100%; height: 100%; border-radius: 999px; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title .volume .control .inner { border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 18%), var(--release-season-color, #91be14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.38), 0 0 12px rgba(120, 60, 40, 0.12); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content { padding: 20px 24px 24px; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table { display: block; width: 100%; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; grid-template-areas: "controls title title download" "controls progress time download"; align-items: center; column-gap: 16px; row-gap: 8px; padding: 18px 20px 18px 24px; border-radius: 22px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 249, 244, 0.82) 100%); border: 1px solid rgba(85, 65, 48, 0.1); backdrop-filter: blur(4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78), 0 10px 24px rgba(85, 65, 48, 0.08); transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; isolation: isolate; overflow: hidden; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item::before { content: ""; position: absolute; inset: 0; z-index: 0; background: transparent url("/imageAssetDirect/login-modal-birds.jpg") no-repeat right 10px center; background-size: 148px auto; opacity: 0.12; mix-blend-mode: multiply; pointer-events: none; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item:hover { transform: translateY(-1px); background: linear-gradient(180deg, #fff 0%, rgba(255, 239, 229, 0.86) 100%); border-color: rgba(216, 35, 33, 0.15); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), 0 14px 30px rgba(85, 65, 48, 0.11); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item.playing { background: linear-gradient(180deg, #fff 0%, rgba(255, 232, 220, 0.72) 100%); border-color: var(--release-season-color, #91be14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 16px 32px rgba(85, 65, 48, 0.12); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item > div { display: block; padding: 0; white-space: normal; position: relative; z-index: 1; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item > :first-child { grid-area: controls; align-self: center; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item > div.title { grid-area: title; align-self: end; min-width: 0; max-width: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 800; line-height: 1.25; color: #554130; letter-spacing: -0.02em; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item > div.alignRight.time { grid-area: time; justify-self: end; align-self: center; padding-left: 10px; font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums; color: rgba(85, 65, 48, 0.68); letter-spacing: 0.02em; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item > div.takeWidth { grid-area: progress; align-self: center; width: 100%; min-width: 72px; padding: 0 !important; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item > div.download { grid-area: download; justify-self: end; align-self: center; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .progress { position: relative; top: auto; left: auto; right: auto; min-width: 0; height: 10px; margin: 0; border-radius: 999px; background: repeating-linear-gradient(90deg, rgba(85, 65, 48, 0.07) 0, rgba(85, 65, 48, 0.07) 1px, transparent 1px, transparent 10px), rgba(85, 65, 48, 0.1); box-shadow: inset 0 1px 2px rgba(85, 65, 48, 0.08), 0 1px 0 rgba(255, 255, 255, 0.8); overflow: hidden; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .progress > .current { height: 100%; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 18%), var(--release-season-color, #91be14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), 0 0 14px rgba(120, 60, 40, 0.12); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .progress > .browse { height: 100%; border-radius: 999px; background: #7a221e; opacity: 0.16; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .controls div.label { display: none !important; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .controls div.button { position: relative; z-index: 1; flex-shrink: 0; width: 48px; height: 48px; min-width: 48px; min-height: 48px; margin: 0; background-image: none !important; background-size: 0 !important; border-radius: 50%; box-shadow: 0 6px 16px rgba(120, 60, 40, 0.14); cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .controls div.button::before, .webRoot.moduleDesign .releaseView-container .release .content .audioBar .controls div.button::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .controls div.button::before { width: 48px; height: 48px; border-radius: 50%; box-shadow: 0 8px 18px rgba(120, 60, 40, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.46); transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .controls div.button.play::before { background: radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.34) 0, transparent 38%), var(--release-season-color, #91be14); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .controls div.button.stop::before { background: linear-gradient(155deg, #ff8a7a 0%, #e53935 55%, #c62828 100%); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .controls div.button::after { width: 24px; height: 24px; background-repeat: no-repeat; background-position: 50% 50%; transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .controls div.button.play::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 7.5v9l8.5-4.5z'/%3E%3C/svg%3E"); background-size: 17px auto; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .controls div.button.stop::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 7h3.5v10H7zm6.5 0H17v10h-3.5z'/%3E%3C/svg%3E"); background-size: 12px auto; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item:hover .controls div.button { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(120, 60, 40, 0.14); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item:hover .controls div.button::before { transform: translate(-50%, -50%) scale(1.06); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item:hover .controls div.button::after { transform: translate(-50%, -50%) scale(1.05); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .item.loading .controls div.button.stop::after { width: 16px; height: 16px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; background: none !important; animation: sv-audioBar-spin 0.75s linear infinite; } @keyframes sv-audioBar-spin { to { transform: translate(-50%, -50%) rotate(360deg); } } .webRoot.moduleDesign .releaseView-container .release .content .audioBar a.downloadLink { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin: 0; padding: 0; border-radius: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 239, 199, 0.96)) !important; border: 2px solid rgba(255, 255, 255, 0.78); box-shadow: 0 6px 16px rgba(120, 60, 40, 0.12); text-indent: 0 !important; text-decoration: none !important; transition: transform 0.18s ease, box-shadow 0.18s ease; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar a.downloadLink span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar a.downloadLink::before, .webRoot.moduleDesign .releaseView-container .release .content .audioBar a.downloadLink::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar a.downloadLink::before { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(155deg, #ffe082 0%, #ffb300 48%, #ff8f00 100%); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.45); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar a.downloadLink::after { width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='M8.5 11.5 12 15l3.5-3.5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50% 50%; background-size: 15px auto; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar a.downloadLink:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(120, 60, 40, 0.14); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar a.downloadLink:hover::before { transform: translate(-50%, -50%) scale(1.08); } .webRoot.moduleDesign .releaseView-container .release .content .audioBar a.downloadLink:hover::after { transform: translate(-50%, -50%) scale(1.06); } @media (max-width: 800px) { .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title .volume { display: flex !important; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar > .title .volume .label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "controls title download" "controls progress download" "controls time download"; column-gap: 8px; row-gap: 5px; padding: 12px 8px; border-radius: 18px; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item::before { background-position: right 4px center; background-size: 110px auto; opacity: 0.1; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item > div.title { min-width: 0; max-width: none !important; font-size: 14px; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .content .table > div.item > div.alignRight.time { justify-self: start; padding-left: 0; font-size: 12px; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .controls div.button { width: 38px; height: 38px; min-width: 38px; min-height: 38px; } .webRoot.moduleDesign .releaseView-container .release .content .audioBar .controls div.button::before { width: 38px; height: 38px; } } /* Release detail: chord header — icon-only actions (title left, toggler + PDF right) */ .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title { justify-content: space-between; flex-wrap: nowrap; gap: 6px 8px; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title .right, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title .sv-chordAction-group { position: static; top: auto; right: auto; display: flex; flex-wrap: nowrap; flex-shrink: 0; align-items: center; justify-content: flex-end; gap: 6px; margin-left: auto; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title .sv-chordAction-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.printTrigger, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordDownload { background-image: none !important; text-indent: 0 !important; position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; min-width: 28px; min-height: 28px; padding: 0; margin-left: 0; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.65); font-size: 0; line-height: 0; text-transform: none; text-decoration: none !important; box-shadow: 0 2px 8px rgba(120, 60, 40, 0.08); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler { color: #8b231f !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 236, 232, 0.88)); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordDownload { color: #7a4a00 !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 243, 210, 0.92)); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.printTrigger { color: #5d2f6b !important; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(245, 233, 250, 0.92)); } /* Icon bubble: colored disc + white glyph (::after) */ .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler::before, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.printTrigger::before, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordDownload::before { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); border-radius: var(--sv-icon-squircle-radius-sm); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.45); pointer-events: none; transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1), box-shadow 0.18s ease; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler::before { background: linear-gradient(155deg, #ff8a7a 0%, #e53935 55%, #c62828 100%); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordDownload::before { background: linear-gradient(155deg, #ffe082 0%, #ffb300 48%, #ff8f00 100%); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.printTrigger::before { background: linear-gradient(155deg, #ce93d8 0%, #ab47bc 52%, #8e24aa 100%); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler::after, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.printTrigger::after, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordDownload::after { content: ""; position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; transform: translate(-50%, -50%); background-repeat: no-repeat; background-position: 50% 50%; filter: none; opacity: 0.98; pointer-events: none; transition: transform 0.2s cubic-bezier(0.34, 1.4, 0.64, 1); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linecap='round'%3E%3Cpath d='M6 8h12M6 12h12M6 16h8'/%3E%3C/svg%3E"); background-size: 13px auto; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordDownload::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='M8.5 11.5 12 15l3.5-3.5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E"); background-size: 12px auto; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.printTrigger::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M7 8V4h10v4'/%3E%3Crect x='6' y='8' width='12' height='10' rx='1.5'/%3E%3Cpath d='M9 14h6' stroke-linecap='round'/%3E%3C/svg%3E"); background-size: 12px auto; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler:hover, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.printTrigger:hover, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordDownload:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(120, 60, 40, 0.14); border-color: rgba(255, 255, 255, 0.95); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler:hover { color: #6d1c19 !important; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordDownload:hover { color: #5c3d00 !important; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.printTrigger:hover { color: #4a1f56 !important; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler:hover::before, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.printTrigger:hover::before, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordDownload:hover::before { transform: translate(-50%, -50%) scale(1.08); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.55); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler:hover::after, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.printTrigger:hover::after, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordDownload:hover::after { transform: translate(-50%, -50%) scale(1.08); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler.is-lyrics-only::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3Cpath d='M17 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3Cpath d='M11 16V6l9-2v10'/%3E%3C/svg%3E"); background-size: 12px auto; } .webRoot.moduleDesign .releaseView-container .release .subContainer > .audioDownloadContainer + .documentDownloadContainer, .webRoot.moduleDesign .releaseView-container .release .subContainer > .documentDownloadContainer + .audioDownloadContainer, .webRoot.moduleDesign .releaseView-container .release .subContainer > .audioDownloadContainer + .chordViewer-container, .webRoot.moduleDesign .releaseView-container .release .subContainer > .documentDownloadContainer + .chordViewer-container, .webRoot.moduleDesign .releaseView-container .release .subContainer > .chordViewer-container + .audioDownloadContainer, .webRoot.moduleDesign .releaseView-container .release .subContainer > .chordViewer-container + .documentDownloadContainer { margin-top: 12px; } .webRoot.moduleDesign .releaseView-container .release .content .audioDownloadContainer .tableContainer, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer .tableContainer , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer .tableContainer { margin-right: 0; margin-left: 0; padding: 8px 10px 10px; } .webRoot.moduleDesign .releaseView-container .release .content .audioDownloadContainer.isTable .table, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table { margin-top: 0; } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div { background: rgba(255, 255, 255, 0.68); backdrop-filter: blur(2px); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div:nth-child(even), .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div:nth-child(even) { background: rgba(255, 255, 255, 0.52); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div:hover, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div:hover { background: rgba(255, 255, 255, 0.78); } .webRoot.moduleDesign .releaseView-container .release .content .audioDownloadContainer.isTable .table > div > div, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div { padding-top: 5px; padding-bottom: 5px; } /* Release detail: PDF rows — soft rounded tiles + inline SVG glyphs (moduleDesign) */ .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon { position: relative; box-sizing: border-box; width: 36px; min-width: 36px; height: 32px; padding: 0 8px 0 0 !important; background: transparent !important; background-image: none !important; vertical-align: middle; } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon::before, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon::before, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon::after, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon::after { content: ""; position: absolute; left: 0; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); pointer-events: none; } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon::before, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon::before { border-radius: var(--sv-icon-squircle-radius-sm); background: linear-gradient(145deg, #ff9a8b 0%, #e53935 52%, #c62828 100%); box-shadow: 0 2px 7px rgba(198, 40, 40, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.42); transition: transform 0.18s ease, box-shadow 0.18s ease; } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon::after, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon::after { background-repeat: no-repeat; background-position: 50% 50%; background-size: 15px 15px; filter: none; opacity: 0.98; transition: transform 0.18s ease; } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-guitarChords::before , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-guitarChords::before { background: linear-gradient(145deg, #ffb74d 0%, #f57c00 55%, #e65100 100%); box-shadow: 0 2px 7px rgba(230, 81, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.42); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-portfolio::before, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-portfolio::before, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-pictureCards::before , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-pictureCards::before { background: linear-gradient(145deg, #ffcc80 0%, #ffa726 52%, #fb8c00 100%); box-shadow: 0 2px 7px rgba(251, 140, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.42); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-workSheet::before, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-workSheet::before, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-gameManual::before , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-gameManual::before { background: linear-gradient(145deg, #90caf9 0%, #42a5f5 55%, #1e88e5 100%); box-shadow: 0 2px 7px rgba(30, 136, 229, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.42); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-musicStory::before, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-musicStory::before, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-textStory::before , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-textStory::before { background: linear-gradient(145deg, #ce93d8 0%, #ab47bc 55%, #8e24aa 100%); box-shadow: 0 2px 7px rgba(142, 36, 170, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.42); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-::after, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-::after, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-sheetFile::after , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-sheetFile::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3Cpath d='M17 16a2 2 0 1 0 0-4 2 2 0 0 0 0 4z'/%3E%3Cpath d='M11 16V6l9-2v10'/%3E%3C/svg%3E"); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-guitarChords::after , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-guitarChords::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20c2-3 2-8 4-11 1.5-2.2 3.5-3 5-2.5 1.2.4 1.8 2 1 3.8-.8 1.6-2.5 2.4-4 2.2'/%3E%3Cpath d='M6.5 17.5 5 19'/%3E%3Ccircle cx='16.5' cy='8.5' r='1.2' fill='%23fff' stroke='none'/%3E%3C/svg%3E"); background-size: 16px 16px; } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-portfolio::after, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-portfolio::after, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-pictureCards::after , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-pictureCards::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linejoin='round'%3E%3Crect x='4' y='6' width='13' height='13' rx='2'/%3E%3Cpath d='M9 12l2 2 4-4' stroke-linecap='round'/%3E%3Cpath d='M15 6V5a2 2 0 0 1 2-2h3v14'/%3E%3C/svg%3E"); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-workSheet::after , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-workSheet::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M8 4h8l3 3v13H8z'/%3E%3Cpath d='M16 4v4h4M9 12h6M9 15h4'/%3E%3C/svg%3E"); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-musicStory::after , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-musicStory::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h11v14H6z'/%3E%3Cpath d='M9 18a2 2 0 1 0 0-4'/%3E%3Cpath d='M6 8h11'/%3E%3C/svg%3E"); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-textStory::after , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-textStory::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M6 4h12v16H6z'/%3E%3Cpath d='M9 9h6M9 12h6M9 15h4'/%3E%3C/svg%3E"); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-gameManual::after , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.icon.iconType-gameManual::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 14v3M16 11v6'/%3E%3Cpath d='M6 10h12v8a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2v-8z'/%3E%3Cpath d='M9 10V8a3 3 0 0 1 6 0v2'/%3E%3C/svg%3E"); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.downloadIcon , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.downloadIcon { position: relative; box-sizing: border-box; width: 34px; min-width: 34px; padding: 0 4px 0 0 !important; background: transparent !important; background-image: none !important; vertical-align: middle; } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.downloadIcon::before, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.downloadIcon::before, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.downloadIcon::after, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.downloadIcon::after { content: ""; position: absolute; right: 4px; top: 50%; width: 26px; height: 26px; transform: translateY(-50%); pointer-events: none; } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.downloadIcon::before, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.downloadIcon::before { border-radius: var(--sv-icon-squircle-radius-sm); background: linear-gradient(155deg, #ffe082 0%, #ffb300 48%, #ff8f00 100%); box-shadow: 0 2px 6px rgba(255, 143, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.5); transition: transform 0.18s ease, box-shadow 0.18s ease; } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div > div.downloadIcon::after, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div > div.downloadIcon::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='M8.5 11.5 12 15l3.5-3.5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 50% 50%; background-size: 11px auto; filter: none; opacity: 0.98; transition: transform 0.18s ease; } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div:hover > div.icon , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div:hover > div.icon { background: transparent !important; background-image: none !important; } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div:hover > div.icon::before , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div:hover > div.icon::before { transform: translateY(-50%) scale(1.06); box-shadow: 0 3px 10px rgba(198, 40, 40, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.5); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div:hover > div.icon::after , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div:hover > div.icon::after { transform: translateY(-50%) scale(1.04); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div:hover > div.downloadIcon::before, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div:hover > div.downloadIcon::before { transform: translateY(-50%) scale(1.08); box-shadow: 0 3px 10px rgba(255, 143, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.55); } .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer.isTable .table > div:hover > div.downloadIcon::after , .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer.isTable .table > div:hover > div.downloadIcon::after { transform: translateY(-50%) scale(1.06); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container .chordView-inner > .title { border-radius: 16px; } .webRoot.moduleDesign .releaseView-container .release .chordViewer-container .chordViewer, .webRoot.moduleDesign .releaseView-container .release .chordViewer-container .chordView, .webRoot.moduleDesign .releaseView-container .release .chordViewer-container .chordSet { position: relative; isolation: isolate; background: linear-gradient(145deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 250, 242, 0.84) 100%) !important; } .webRoot.moduleDesign .releaseView-container .release .chordViewer-container .chordViewer::before, .webRoot.moduleDesign .releaseView-container .release .chordViewer-container .chordView::before, .webRoot.moduleDesign .releaseView-container .release .chordViewer-container .chordSet::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(circle at calc(100% + 42px) -36px, var(--sv-widget-surface-orb-red) 0, var(--sv-widget-surface-orb-red) 118px, transparent 119px), radial-gradient(circle at 10% calc(100% + 22px), var(--sv-widget-surface-orb-gold) 0, var(--sv-widget-surface-orb-gold) 82px, transparent 83px), radial-gradient(circle at 67% 43%, var(--release-season-color, #91be14) 0, transparent 56px), radial-gradient(circle at 23% 28%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 8%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 8%, transparent) 36px, transparent 37px), radial-gradient(circle at 46% calc(100% + 10px), color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent) 50px, transparent 51px), radial-gradient(circle at calc(100% + 12px) 76%, var(--release-season-color, #91be14) 0, transparent 34px), radial-gradient(circle at 36% 58%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 3%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 3%, transparent) 22px, transparent 23px), radial-gradient(circle at 82% 28%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent) 30px, transparent 31px), radial-gradient(circle at 14% 72%, var(--release-season-color, #91be14) 0, transparent 26px); opacity: 0.5; pointer-events: none; } .webRoot.moduleDesign .releaseView-container .release .chordViewer-container .chordViewer > *, .webRoot.moduleDesign .releaseView-container .release .chordViewer-container .chordView > *, .webRoot.moduleDesign .releaseView-container .release .chordViewer-container .chordSet > * { position: relative; z-index: 1; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container .chordSet { border-radius: 0 0 18px 18px; } @media (min-width: 801px) { .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer::before, .webRoot.moduleDesign .releaseView-container .release .content .audioDownloadContainer::before, .webRoot.moduleDesign .releaseView-container .release .content .documentDownloadContainer::before, .webRoot.moduleDesign .releaseViewer.topic .release .content .documentDownloadContainer::before, .webRoot.moduleDesign .releaseView-container .release .content .audioBar::before, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container::before, .webRoot.moduleDesign .releaseView-container .release .content .relatedContainer::before { background: radial-gradient(circle at calc(100% + 34px) -42px, var(--sv-widget-surface-orb-red) 0, var(--sv-widget-surface-orb-red) 112px, transparent 113px), radial-gradient(circle at 11% calc(100% + 28px), var(--sv-widget-surface-orb-gold) 0, var(--sv-widget-surface-orb-gold) 78px, transparent 79px), radial-gradient(circle at 78% 68%, var(--release-season-color, #91be14) 0, transparent 58px), radial-gradient(circle at 30% 18%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, transparent) 38px, transparent 39px), radial-gradient(circle at 58% 110%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent) 50px, transparent 51px), radial-gradient(circle at calc(100% + 10px) 58%, var(--release-season-color, #91be14) 0, transparent 36px), radial-gradient(circle at 42% 38%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 3%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 3%, transparent) 32px, transparent 33px), radial-gradient(circle at 18% 62%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, transparent) 42px, transparent 43px), radial-gradient(circle at 88% 34%, var(--release-season-color, #91be14) 0, transparent 28px); opacity: 0.5; } .webRoot.moduleDesign .releaseView-container .release .chordViewer-container .chordViewer::before, .webRoot.moduleDesign .releaseView-container .release .chordViewer-container .chordView::before, .webRoot.moduleDesign .releaseView-container .release .chordViewer-container .chordSet::before { background: radial-gradient(circle at calc(100% + 42px) -36px, var(--sv-widget-surface-orb-red) 0, var(--sv-widget-surface-orb-red) 118px, transparent 119px), radial-gradient(circle at 10% calc(100% + 22px), var(--sv-widget-surface-orb-gold) 0, var(--sv-widget-surface-orb-gold) 82px, transparent 83px), radial-gradient(circle at 67% 43%, var(--release-season-color, #91be14) 0, transparent 54px), radial-gradient(circle at 23% 28%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 6%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 6%, transparent) 34px, transparent 35px), radial-gradient(circle at 46% calc(100% + 10px), color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent) 48px, transparent 49px), radial-gradient(circle at calc(100% + 12px) 76%, var(--release-season-color, #91be14) 0, transparent 34px), radial-gradient(circle at 34% 68%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 3%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 3%, transparent) 36px, transparent 37px), radial-gradient(circle at 82% 22%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, transparent) 44px, transparent 45px), radial-gradient(circle at 56% 82%, var(--release-season-color, #91be14) 0, transparent 30px); opacity: 0.5; } } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .description-short, .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer, .webRoot.moduleDesign .releaseView-container .release .subContainer, .webRoot.moduleDesign .releaseView-container .release .relatedContainer { border: 1px solid rgba(124, 45, 45, 0.07); border-radius: 20px; background: radial-gradient(circle at 91% 12%, rgba(255, 255, 255, 0.82) 0, rgba(255, 255, 255, 0.82) 48px, transparent 49px), radial-gradient(circle at 12% 112%, rgba(255, 180, 0, 0.13) 0, rgba(255, 180, 0, 0.13) 84px, transparent 85px), linear-gradient(145deg, #fffdf9 0%, #fff6ec 56%, #ffffff 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 14px 30px rgba(85, 65, 48, 0.09); } .webRoot.moduleDesign .releaseView-container .release .subContainer, .webRoot.moduleDesign .releaseView-container .release .relatedContainer { margin: 16px 24px; padding: 16px; } .webRoot.moduleDesign .releaseView-container .release .subContainer:empty, .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .description-short:empty { display: none !important; margin: 0; padding: 0; border: none; box-shadow: none; } .webRoot.moduleDesign .releaseView-container .release .relatedContainer > .title { color: #7a221e; font-weight: 600; } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer .mediaDescriptionTitle { color: #7a221e; font-weight: 600; } /* Public release media teaser — same header rhythm as PDF / downloads */ .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer.sv-publicMediaTeaserCard { overflow: hidden; border-radius: 22px; border: 1px solid rgba(124, 45, 45, 0.07); background: radial-gradient(circle at 91% 12%, rgba(255, 255, 255, 0.82) 0, rgba(255, 255, 255, 0.82) 48px, transparent 49px), radial-gradient(circle at 12% 112%, rgba(255, 180, 0, 0.13) 0, rgba(255, 180, 0, 0.13) 84px, transparent 85px), linear-gradient(145deg, #fffdf9 0%, #fff6ec 56%, #ffffff 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 16px 34px rgba(85, 65, 48, 0.1); } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer.sv-publicMediaTeaserCard .mediaDescriptionTitle { border-radius: 22px 22px 0 0; } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer.sv-publicMediaTeaserCard .mediaDescription.public { border-radius: 0 0 22px 22px; margin-right: 0; margin-bottom: 0; } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer.sv-publicMediaTeaserCard .mediaDescription.public .description { padding: 18px 20px 22px; } /* Membership CTA — pill gradient (core `a.button` is pill site-wide) */ .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer.sv-publicMediaTeaserCard .mediaDescription.public a.button.sv-membership-cta, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard .teaserButton a.button.sv-membership-cta, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard .teaserButton a.button.sv-membership-cta, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container:has(> .teaserButton) .teaserButton a.button.sv-membership-cta, .webRoot.moduleDesign .releaseView-container .release a.button.small.sv-membership-cta { display: inline-flex !important; align-items: center !important; justify-content: center !important; margin-top: 12px !important; padding: var(--sv-btn-membership-padding-y) var(--sv-btn-membership-padding-x) !important; border-radius: 999px !important; border: 1px solid rgba(255, 255, 255, 0.45) !important; background: linear-gradient(145deg, #ef3a38 0%, #d82321 52%, #b81a18 100%) !important; color: #fff !important; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; letter-spacing: 0.01em; line-height: 1.25 !important; white-space: normal !important; box-shadow: 0 8px 18px rgba(216, 35, 33, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; text-decoration: none !important; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer.sv-publicMediaTeaserCard .mediaDescription.public .description { text-align: left; } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer.sv-publicMediaTeaserCard .mediaDescription.public a.button.sv-membership-cta:hover, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard .teaserButton a.button.sv-membership-cta:hover, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard .teaserButton a.button.sv-membership-cta:hover, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container:has(> .teaserButton) .teaserButton a.button.sv-membership-cta:hover, .webRoot.moduleDesign .releaseView-container .release a.button.small.sv-membership-cta:hover { background: linear-gradient(145deg, #e02f2d 0%, #c41f1d 52%, #a31614 100%) !important; color: #fff !important; box-shadow: 0 12px 28px rgba(216, 35, 33, 0.34), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; transform: translateY(-1px); } /* Chord viewer: public / trial teaser — same card + header rhythm as media / PDF blocks */ .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container:has(> .teaserButton) { overflow: hidden; border-radius: 22px; border: 1px solid rgba(124, 45, 45, 0.07); background: radial-gradient(circle at 91% 12%, rgba(255, 255, 255, 0.82) 0, rgba(255, 255, 255, 0.82) 48px, transparent 49px), radial-gradient(circle at 12% 112%, rgba(255, 180, 0, 0.15) 0, rgba(255, 180, 0, 0.15) 84px, transparent 85px), linear-gradient(145deg, #fffdf9 0%, #fff6ec 56%, #ffffff 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 16px 34px rgba(85, 65, 48, 0.1); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard > .title, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard > .title, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container:has(> .teaserButton) > .title { display: flex !important; align-items: center !important; min-height: var(--sv-release-section-header-h) !important; margin-top: 0 !important; padding: 0 16px !important; border: none !important; border-radius: 22px 22px 0 0 !important; line-height: 1.2 !important; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard > .title .right, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard > .title .right, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container:has(> .teaserButton) > .title .right { display: none !important; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard .chordViewer, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard .chordViewer, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container:has(> .teaserButton) .chordViewer { margin: 0; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard .teaserButton, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard .teaserButton, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container:has(> .teaserButton) .teaserButton { margin: 0 !important; padding: 18px 20px 22px; text-align: left; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard .teaserButton a.button.sv-membership-cta, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard .teaserButton a.button.sv-membership-cta, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container:has(> .teaserButton) .teaserButton a.button.sv-membership-cta { margin-top: 0; max-width: 100%; box-sizing: border-box; } @media (min-width: 801px) { .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head { padding: 16px 18px; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain { gap: 16px; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper { padding-right: 0; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper > .releaseIcon, .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper > .releaseIcon img, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper > .releaseIcon, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper > .releaseIcon img { width: 60px; min-width: 60px; max-width: 60px; height: 60px; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text .title-inner, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text .title-inner { display: block; padding-top: 2px; line-height: 1.14; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) h2, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) h2 { font-size: 20px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block > .subTitle, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block > .subTitle { padding-top: 0; margin-top: 6px; padding-right: 0; clear: none; float: none; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block > .subTitle h4, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block > .subTitle h4 { margin: 0; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-size: 15px; font-weight: 700; line-height: 1.25; letter-spacing: 0; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text > .description, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text > .description { display: -webkit-box !important; margin: 7px 0 0 !important; padding: 0 !important; height: auto !important; min-height: 0 !important; overflow: hidden !important; color: #746a64 !important; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 15px; line-height: 1.48; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadMain { gap: 16px; padding: 16px 18px; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadMeta { gap: 16px; } .webRoot.moduleDesign .releaseViewer.topic .topic .image-inner .image-wrap, .webRoot.moduleDesign .releaseViewer.topic .topic .image-inner img { width: 96px; height: 96px; } .webRoot.moduleDesign .releaseViewer.topic .topic h2 { font-size: 22px; font-weight: 800; line-height: 1.16; } .webRoot.moduleDesign .releaseViewer.topic .topic .description { margin-top: 6px; font-size: 15px; line-height: 1.48; max-height: 4.44em; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.open .topic .description { max-height: none; overflow: visible; } } @media (max-width: 760px) { .webRoot.moduleDesign > *, .webRoot.moduleDesign .blankContainer > :not(.node-toolBar), .webRoot.moduleDesign .contentArea > :not(.node-toolBar) { margin-bottom: var(--moduleDesign-module-gap); } .webRoot.moduleDesign .blankContainer > .moduleContainer > div, .webRoot.moduleDesign .blankContainer > .testimonialViewer, .webRoot.moduleDesign .blankContainer > .string .string-content, .webRoot.moduleDesign .blankContainer > .video .video, .webRoot.moduleDesign .blankContainer > .stripeShop > .stripeShop-module, .webRoot.moduleDesign .blankContainer > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign .blankContainer > .releaseViewer.topic > .releaseView-container, .webRoot.moduleDesign .contentArea > .moduleContainer > div, .webRoot.moduleDesign .contentArea > .testimonialViewer, .webRoot.moduleDesign .contentArea > .string .string-content, .webRoot.moduleDesign .contentArea > .video .video, .webRoot.moduleDesign .contentArea > .stripeShop > .stripeShop-module, .webRoot.moduleDesign .contentArea > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign .contentArea > .releaseViewer.topic > .releaseView-container, .webRoot.moduleDesign > .moduleContainer > div, .webRoot.moduleDesign > .testimonialViewer, .webRoot.moduleDesign > .string .string-content, .webRoot.moduleDesign > .video .video, .webRoot.moduleDesign > .stripeShop > .stripeShop-module, .webRoot.moduleDesign > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign > .releaseViewer.topic > .releaseView-container { padding: 20px; } /* List + topic: keep 10px top/left — shorthand `padding: 20px` must not override inset */ .webRoot.moduleDesign .blankContainer > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign .contentArea > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign > .releaseViewer.list > .releaseView-container, .webRoot.moduleDesign .releaseViewer.list .releaseView-container, .webRoot.moduleDesign .releaseViewer.topic .topicView-container { padding-top: 10px !important; padding-left: 10px !important; } .webRoot.moduleDesign .moduleContainer.textAndImage .mc-image, .webRoot.moduleDesign .moduleContainer.imageAndText .mc-image { float: none; max-width: none; margin: 0 0 16px; } .webRoot.moduleDesign .moduleContainer.awardViewer { display: block; width: auto; } .webRoot.moduleDesign .moduleContainer.awardViewer + .moduleContainer.awardViewer { margin-left: 0; } .webRoot.moduleDesign .blankContainer:has(> .moduleContainer.awardViewer), .webRoot.moduleDesign .contentArea:has(> .moduleContainer.awardViewer) { grid-template-columns: 1fr; column-gap: 0; } .webRoot.moduleDesign .releaseView-container .release > .head > .block.upper { float: none; padding-right: 14px; margin-bottom: 0; } .webRoot.moduleDesign .releaseView-container .release > .head > .block > .releaseIcon { min-width: 0; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head { padding: 9px 10px; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain { gap: 10px; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper { padding-right: 0; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper > .releaseIcon, .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper > .releaseIcon img { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text .title-inner { display: block; padding-top: 1px; line-height: 1.15; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) .releaseHeadActions .releaseFavourite-btn--inHead .releaseFavourite-heart { width: 20px !important; height: 20px !important; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head .releaseHeadActions { padding-top: 0 !important; transform: translateY(-5px) !important; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) h2 { margin: 0; font-size: 16px !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block > .subTitle { padding-top: 0; margin-top: 1px !important; padding-right: 0 !important; clear: none; float: none; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head { padding: 9px 10px; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper > .releaseIcon, .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block.upper > .releaseIcon img { width: 44px !important; min-width: 44px !important; max-width: 44px !important; height: 44px !important; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) h2 { font-size: 15px !important; font-weight: 700 !important; line-height: 1.08 !important; letter-spacing: -0.02em !important; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block > .subTitle { margin-top: 1px !important; padding-right: 0 !important; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head > .releaseHeadMain > .block > .subTitle h4 { font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head .releaseHeadActions { padding-top: 0 !important; transform: translateY(-5px) !important; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) .releaseHeadActions .releaseFavourite-btn--inHead .releaseFavourite-heart { width: 20px !important; height: 20px !important; } .webRoot.moduleDesign .releaseViewer.topic .topic .topicHeadMain .image-inner .image-wrap { width: 72px; height: 72px; max-width: 100%; } .webRoot.moduleDesign .releaseViewer.topic .topic h2 { font-size: 16px !important; font-weight: 800 !important; line-height: 1.2 !important; } .webRoot.moduleDesign .releaseViewer.topic .topic.imageVisible .topicHeadMain .image-inner img { max-height: 72px; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadActions .releaseFavourite-btn--inHead .releaseFavourite-heart { width: 18px; height: 18px; } /* Match core: hide list-row release description; full copy remains in layer/content. */ .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block.text > .description { display: none !important; margin: 0 !important; padding: 0 !important; height: 0 !important; min-height: 0 !important; overflow: hidden !important; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .block.text .title-inner h2 { font-size: 16px; line-height: 1.08; } .webRoot.moduleDesign .releaseView-container:not(.slider) .release:not(.openInLayer) > .head > .releaseHeadMain > .block > .subTitle h4 { margin: 0; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: 0 !important; } .webRoot.moduleDesign .releaseView-container .release .mediaGroup, .webRoot.moduleDesign .releaseView-container .release .subContainer, .webRoot.moduleDesign .releaseView-container .release .relatedContainer { margin-right: 16px; margin-left: 16px; } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer { padding: 16px; } .webRoot.moduleDesign .releaseView-container .release .mediaGroup:has(ul.mediaTabs > li:nth-child(2)) .mediaContainer { border-radius: 0 18px 18px 18px; } .webRoot.moduleDesign .releaseView-container .release .mediaGroup:has(ul.mediaTabs > li:only-child) .mediaContainer { border-radius: 18px; } } @media (max-width: 800px) { .webRoot.moduleDesign .releaseViewer.topic .topic { display: block; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadMain { position: relative; display: flex; flex-wrap: nowrap; align-items: flex-start; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadMeta { display: flex; flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0; align-items: flex-start; gap: 10px; box-sizing: border-box; } .webRoot.moduleDesign .releaseViewer.topic .topic .image-inner { float: none !important; display: block !important; margin: 0; padding-right: 0; max-width: none; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadActions { position: absolute; top: 12px; right: 14px; z-index: 3; margin-left: 0; padding: 0; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadChevron { position: absolute; top: 18px; right: 49px; margin-top: 0; z-index: 2; } .webRoot.moduleDesign .releaseViewer.topic .topicHeadMain:not(:has(.topicHeadFavourite .releaseFavourite-btn--inHead)) .topicHeadChevron { right: 14px; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.open .topicHeadMeta { display: flow-root; flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.open .topic .image-inner { float: left !important; margin: -8px 14px 0 0; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.open .topic .block.text { display: block; box-sizing: border-box; padding-right: 0; } .webRoot.moduleDesign .releaseViewer.topic .topic .image-inner img { width: 72px !important; height: 72px !important; } .webRoot.moduleDesign .releaseViewer.topic .topic.imageVisible .image-inner .image-wrap { width: 72px; height: 72px; max-width: 100%; } .webRoot.moduleDesign .releaseViewer.topic .topic.imageVisible .image-inner img { width: 100% !important; height: 100% !important; max-width: 100%; max-height: 100%; object-fit: cover; object-position: center center; box-sizing: border-box; } .webRoot.moduleDesign .releaseViewer.topic .topic .block.text { display: block; padding-right: 0; overflow: visible; } .webRoot.moduleDesign .releaseViewer.topic .topic .block.text .title, .webRoot.moduleDesign .releaseViewer.topic .topic .block.text .title-inner, .webRoot.moduleDesign .releaseViewer.topic .topic .block.text .title h2, .webRoot.moduleDesign .releaseViewer.topic .topic .block.text .description { overflow-wrap: break-word; word-break: normal; -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 6 4 4; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.open .topicHeadMeta::after { content: ''; display: table; clear: both; } .webRoot.moduleDesign .releaseViewer.topic .topic::after { content: ''; display: table; clear: both; } } @media (max-width: 800px) { /* Jahreskreis mobile: Saison-Pills in einer Zeile; geöffnete Themen = Accordion-Panel volle Breite unter der Zeile (kein schmales Dropdown). */ .webRoot.moduleDesign .indexBar { background: transparent; box-shadow: none; padding-bottom: 0; } .topicView-container > .indexBar-topicPanel-backdrop { z-index: 10030; } /* Open: in-place fixed (no DOM portaling) — indexBar stays in `.topicView-container` */ body.sv-indexBar-topicPanel-open .webRoot.moduleDesign .topicView-container > .indexBar.compact.open { position: fixed !important; left: 0 !important; right: 0 !important; top: var(--sv-chrome-top, 80px) !important; margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; max-width: 100% !important; z-index: 10041 !important; padding-bottom: 0 !important; margin: 0 !important; box-sizing: border-box; background: transparent; pointer-events: auto; } body.sv-mobile-header-compact.sv-indexBar-topicPanel-open .webRoot.moduleDesign .topicView-container > .indexBar.compact.open { top: var(--sv-chrome-top, 52px) !important; } .sv-indexBar-portal-placeholder { display: block; width: 100%; margin: 0; padding: 0; border: 0; visibility: hidden; pointer-events: none; } .webRoot.moduleDesign .indexBar.compact > .blocks, .webRoot.moduleDesign .indexBar.open > .blocks { display: flex !important; flex-direction: row !important; flex-wrap: nowrap; align-items: flex-start; gap: 5px; padding: 4px max(6px, env(safe-area-inset-left, 0px)) 6px max(6px, env(safe-area-inset-right, 0px)); position: relative; } /* core `ul { width:100% }` = pill width — panel anchors to `.blocks` via JS + static .block */ .webRoot.moduleDesign .indexBar.compact > .blocks > .block, .webRoot.moduleDesign .indexBar.compact > .blocks > div.block { display: block; flex: 1 1 0; min-width: 52px; margin-right: 0 !important; margin-bottom: 0 !important; border-radius: 999px; overflow: visible; border: 1px solid rgba(255, 255, 255, 0.48); box-shadow: 0 7px 16px rgba(85, 65, 48, 0.08); position: static !important; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block:last-child { margin-bottom: 0; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > .title { display: flex !important; align-items: center; justify-content: center; position: relative; margin-bottom: 0 !important; padding: 5px 16px 5px 6px !important; min-height: 0; border-radius: 999px !important; box-shadow: none !important; overflow: hidden; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > .title::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: rgba(255, 255, 255, 0.24); pointer-events: none; z-index: 0; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > .title > span, .webRoot.moduleDesign .indexBar.compact > .blocks > .block > .title > i { position: relative; z-index: 1; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > .title span { font-size: clamp(9px, 2.65vw, 11px) !important; font-weight: 700 !important; line-height: 1.12 !important; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; padding: 0 1px; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > .title .sub { display: none !important; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > .title i { display: block !important; position: absolute !important; top: 50% !important; right: 4px !important; left: auto !important; margin: 0 !important; transform: translateY(-50%); } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > .title i.arrow { transition: transform 0.22s ease; transform: translateY(-50%); } .webRoot.moduleDesign .indexBar.compact > .blocks > .block.open > .title i.arrow { transform: translateY(-50%) rotate(180deg); } /* Accordion panel: full width under pill row (not core per-pill dropdown) */ .webRoot.moduleDesign .indexBar.compact > .blocks > .block:not(.open) > ul, .webRoot.moduleDesign .indexBar.compact > .blocks > div.block:not(.open) > ul, .webRoot.moduleDesign .indexBar.compact > .blocks > .block.hover:not(.open) > ul, .webRoot.moduleDesign .indexBar.compact > .blocks > div.block.hover:not(.open) > ul { display: none !important; visibility: hidden !important; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > ul, .webRoot.moduleDesign .indexBar.compact > .blocks > div.block > ul { position: absolute !important; top: auto !important; left: 0 !important; right: 0 !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin-top: 0 !important; padding: 8px 10px 10px !important; border-radius: 14px !important; border: 1px solid rgba(85, 65, 48, 0.1) !important; background: rgba(255, 252, 248, 0.98) !important; box-shadow: 0 8px 22px rgba(80, 52, 38, 0.1) !important; z-index: 2 !important; max-height: min(48vh, 380px); overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block.open > ul, .webRoot.moduleDesign .indexBar.compact > .blocks > div.block.open > ul, .webRoot.moduleDesign .indexBar.compact > .blocks > .block.open > ul.sv-mobile-topic-panel, .webRoot.moduleDesign .indexBar.compact > .blocks > div.block.open > ul.sv-mobile-topic-panel { display: block !important; visibility: visible !important; padding-top: 8px !important; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > ul > li { border-radius: 10px; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > ul > li a { border-radius: 999px; font-weight: 600; color: var(--sv-header-text-color) !important; } /* indexBarMaxItems overflow: keep “Ältere Themen” row; nested topics only when .subBlock.open */ .webRoot.moduleDesign .indexBar.compact > .blocks > .block > ul > li.subBlock > .title { display: flex !important; align-items: center; justify-content: space-between; border-radius: 999px; padding: 6px 12px !important; margin-top: 4px; font-weight: 700; cursor: pointer; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > ul > li.subBlock:not(.open) > ul { display: none !important; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > ul > li.subBlock.open > ul { display: block !important; position: relative !important; left: auto !important; top: auto !important; box-shadow: none !important; border: 0 !important; background: transparent !important; padding: 4px 0 0 !important; margin: 0 !important; max-height: none !important; } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > ul > li:hover { background: color-mix(in srgb, var(--sv-current-season-color, #e83331) 5%, transparent); } .webRoot.moduleDesign .indexBar.compact > .blocks > .block > ul > li.subBlock:hover > ul { z-index: auto; } /* Public chord teaser in release layer: stack header + CTA (core absolute .right + flex title breaks on narrow viewports). */ .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard { width: 100%; max-width: 100%; box-sizing: border-box; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard > .title, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard > .title { display: flex !important; align-items: center !important; min-height: var(--sv-release-section-header-h) !important; padding: 0 16px !important; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard .teaserButton, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard .teaserButton { margin-left: 0 !important; margin-right: 0 !important; text-align: left; } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard .teaserButton a.button.sv-membership-cta, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard .teaserButton a.button.sv-membership-cta { display: inline-flex !important; width: auto; max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; } } @media (max-width: 480px) { .webRoot.moduleDesign .releaseViewer.topic .topic .image-inner { max-width: none; padding-right: 0; } .webRoot.moduleDesign .releaseViewer.topic .topic.imageVisible .image-inner .image-wrap { width: 64px; height: 64px; max-width: 100%; } .webRoot.moduleDesign .releaseViewer.topic .topic .image-inner img { width: 64px !important; height: 64px !important; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.open .topic.imageVisible .image-inner .image-wrap { width: 60px; height: 60px; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer.open .topic .image-inner img { width: 60px !important; height: 60px !important; } .webRoot.moduleDesign .releaseViewer.topic .topic-container-outer .children .releaseView-container .release:not(.openInLayer) > .head { padding: 9px 10px; } } /* * Subscription checkout (/abo/bestellen/) — single vertical rhythm + clearer nesting * (membership + voucher/sum + payment in `.checkout-orderSummary`; one `#cart-*` for AJAX). */ .webRoot.moduleDesign .checkout#checkoutModule { --checkout-gap: 16px; --checkout-pad-x: 22px; --checkout-pad-y: 20px; --checkout-inner-gap: 14px; --checkout-section-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 250, 235, 0.94) 54%, rgba(255, 244, 244, 0.95) 100%); --checkout-inset-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 251, 243, 0.92) 100%); --checkout-divider: 1px solid rgba(80, 52, 38, 0.1); /* Customer form row rhythm (was 14px / 6px / 12px — −⅓). */ --checkout-field-row-gap: calc(14px * 2 / 3); --checkout-field-label-gap: calc(6px * 2 / 3); --checkout-field-pair-gap: calc(12px * 2 / 3); /* Primary pills (login, voucher, finalize) — toolbar-modal weight, not input-tall. */ --checkout-pill-py: 9px; --checkout-pill-px: 22px; --checkout-pill-fs: 15px; position: relative; isolation: isolate; max-width: 820px; margin-left: auto; margin-right: auto; padding: var(--checkout-gap) 4px calc(var(--checkout-gap) + 4px); box-sizing: border-box; border: var(--sv-widget-surface-border); background: var(--sv-widget-surface-highlight), linear-gradient(165deg, color-mix(in srgb, var(--sv-current-season-color, #e83331) 3%, rgba(255, 255, 255, 0.94)) 0%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 6%, rgba(255, 255, 255, 0.92)) 42%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 10%, rgba(255, 255, 255, 0.94)) 100%); border-radius: 28px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), var(--sv-widget-surface-shadow); } /* Decorative orbs — mirrors .releaseStatsWidget-card:before / :after (no raster asset in widget). */ .webRoot.moduleDesign .checkout#checkoutModule::before { content: ""; position: absolute; z-index: 0; top: -48px; right: -36px; width: 170px; height: 170px; border-radius: 50%; background: color-mix(in srgb, var(--sv-current-season-color, #e83331) 10%, transparent); pointer-events: none; } .webRoot.moduleDesign .checkout#checkoutModule::after { content: ""; position: absolute; z-index: 0; right: 8%; bottom: 8%; width: 78px; height: 78px; border-radius: 50%; background: color-mix(in srgb, var(--sv-current-season-color, #e83331) 8%, transparent); pointer-events: none; } .webRoot.moduleDesign .checkout#checkoutModule > * { position: relative; z-index: 1; } /* One rhythm between major blocks (replaces mixed 12/15/18/20/22/25px). */ .webRoot.moduleDesign .checkout#checkoutModule > .checkoutHeaderCard { position: relative; z-index: 1; box-sizing: border-box; overflow: hidden; margin: 0 0 var(--checkout-gap); padding: 20px var(--checkout-pad-x) 22px; border: var(--sv-widget-surface-border); border-radius: var(--sv-widget-surface-radius); background: var(--sv-widget-surface-highlight), var(--sv-widget-surface-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), var(--sv-widget-surface-shadow); } .webRoot.moduleDesign .checkout#checkoutModule > .checkoutHeaderCard::before { content: ""; position: absolute; z-index: 0; top: -68px; right: -48px; width: 184px; height: 184px; border-radius: 50%; background: var(--sv-widget-surface-orb-primary); pointer-events: none; } .webRoot.moduleDesign .checkout#checkoutModule > .checkoutHeaderCard::after { content: ""; position: absolute; z-index: 0; right: 34px; bottom: 26px; width: 86px; height: 86px; border-radius: 50%; background: var(--sv-widget-surface-orb-secondary); opacity: 0.82; pointer-events: none; } .webRoot.moduleDesign .checkout#checkoutModule .checkoutHeaderCard-title, .webRoot.moduleDesign .checkout#checkoutModule .checkoutHeaderCard-subtitle { position: relative; z-index: 1; } .webRoot.moduleDesign .checkout#checkoutModule .checkoutHeaderCard-title { max-width: 38rem; color: var(--sv-header-text-color); font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-size: clamp(1.55rem, 4.6vw, 2rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; } .webRoot.moduleDesign .checkout#checkoutModule .checkoutHeaderCard-title .string-content, .webRoot.moduleDesign .checkout#checkoutModule .checkoutHeaderCard-subtitle .string-content { margin: 0; font: inherit; color: inherit; } .webRoot.moduleDesign .checkout#checkoutModule .checkoutHeaderCard-title .string-content p, .webRoot.moduleDesign .checkout#checkoutModule .checkoutHeaderCard-subtitle .string-content p { margin: 0; } .webRoot.moduleDesign .checkout#checkoutModule .checkoutHeaderCard-subtitle { margin-top: 6px; color: #e83331; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-size: clamp(1.02rem, 3.5vw, 1.18rem); font-weight: 700; letter-spacing: 0.005em; line-height: 1.25; } .webRoot.moduleDesign .checkout#checkoutModule > .title { margin-bottom: var(--checkout-gap); } /* Payment-update uses the same #checkoutModule shell but not checkoutHeaderCard layout. */ .webRoot.moduleDesign .checkout.payment-update#checkoutModule { padding: var(--checkout-pad-y) var(--checkout-pad-x) calc(var(--checkout-pad-y) + 4px); } .webRoot.moduleDesign .checkout.payment-update#checkoutModule > .title.payment-update-head { margin-bottom: var(--checkout-inner-gap); padding: 0; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .payment-update-head h2 { margin: 0 0 10px; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .payment-update-lead { margin: 0; line-height: 1.45; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-frame.payment-update-ccForm, .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-form { margin-top: var(--checkout-inner-gap); max-width: 520px; padding: 16px 16px 18px; border-radius: 20px; border: var(--sv-widget-inset-border); background: var(--sv-widget-surface-highlight), var(--checkout-section-bg, linear-gradient(165deg, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, rgba(255, 255, 255, 0.98)) 0%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 8%, rgba(255, 255, 255, 0.96)) 48%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 12%, rgba(255, 255, 255, 0.94)) 100%)); box-shadow: var(--sv-widget-inset-shadow); box-sizing: border-box; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-frame.payment-update-ccForm { display: block; min-height: 0; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-frame.payment-update-ccForm.hidden { display: none; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .payment-update-ccFieldRow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .payment-update-ccFieldRow .set { padding-bottom: 0; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-frame.payment-update-ccForm .head, .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-form .head { padding-bottom: 14px; font-family: KoHo, "Open Sans", Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.45; color: #4a403c; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-frame.payment-update-ccForm .set, .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-form .set { padding-bottom: 12px; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-frame.payment-update-ccForm > .set:last-child, .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-form .set:last-child { padding-bottom: 0; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-frame.payment-update-ccForm .set .label, .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-frame.payment-update-ccForm .set .label label, .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-form .set .label, .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-form .set .label label { display: block; margin: 0 0 6px; padding-bottom: 0; font-family: KoHo, "Open Sans", Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 600; line-height: 1.3; color: #746a64; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .payment-update-ccShell { /* Host shell is focus/hit target only — mPAY raw fields already draw their own * input chrome. A second border/padding here caused the double-frame look. */ box-sizing: border-box; width: 100%; min-height: 44px; height: 44px; overflow: hidden; padding: 0; border: 0; border-radius: 12px; background: transparent; box-shadow: none; transition: box-shadow 0.15s ease; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .payment-update-ccShell--focus { box-shadow: 0 0 0 3px rgba(232, 51, 49, 0.12); } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .payment-update-ccShell iframe { display: block; width: 100%; height: 44px; min-height: 44px; max-width: none; border: 0; background: transparent; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-form input { width: 100% !important; max-width: 100% !important; box-sizing: border-box; height: auto !important; min-height: 44px; padding: 10px 12px !important; border: 1px solid rgba(80, 52, 38, 0.15) !important; border-radius: 12px !important; background: #fff !important; font-family: KoHo, "Open Sans", Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.35 !important; color: var(--sv-header-text-color) !important; box-shadow: none !important; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .entry-form input:focus { border-color: #e83331 !important; outline: 0; box-shadow: 0 0 0 3px rgba(232, 51, 49, 0.12) !important; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .response.visible { display: block; max-width: 520px; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .response.success, .webRoot.moduleDesign .checkout.payment-update#checkoutModule .response.PROFILE_UPDATED { color: #2d6b2a; font-size: 17px; font-weight: 600; line-height: 1.4; background: rgba(244, 252, 236, 0.96); border: 1px solid rgba(148, 191, 54, 0.42); padding: 14px 18px 16px; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .response.warning { background: rgba(255, 246, 246, 0.95); border-color: rgba(232, 51, 49, 0.45); color: #4a403c; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .payment-update-backLink { margin: 12px 0 0; font-size: 15px; font-weight: 500; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .payment-update-backLink.hidden { display: none; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .payment-update-backLink a { color: #5a8410 !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .webRoot.moduleDesign .checkout.payment-update#checkoutModule .payment-update-backLink a:hover { color: #45680c !important; } .webRoot.moduleDesign .checkout#checkoutModule > .title.sub { margin-top: var(--checkout-gap); margin-bottom: var(--checkout-gap); } .webRoot.moduleDesign .checkout#checkoutModule > .section { margin-bottom: var(--checkout-gap) !important; padding: var(--checkout-pad-y) var(--checkout-pad-x) !important; } .webRoot.moduleDesign .checkout#checkoutModule > .section.checkout-final { padding-top: var(--checkout-pad-y) !important; padding-bottom: var(--checkout-pad-y) !important; margin-bottom: var(--checkout-gap) !important; } .webRoot.moduleDesign .checkout#checkoutModule > .title h2 { font-size: clamp(1.35rem, 2.6vw, 1.85rem); letter-spacing: -0.025em; line-height: 1.22; margin: 0; font-weight: 700; color: var(--sv-header-text-color); } .webRoot.moduleDesign .checkout#checkoutModule > .title.sub h3 { font-size: clamp(1.05rem, 2vw, 1.28rem); font-weight: 700; letter-spacing: -0.015em; margin: 0; color: #4a403c; } .webRoot.moduleDesign .checkout#checkoutModule > .section, .webRoot.moduleDesign .checkout#checkoutModule > div > .section, .webRoot.moduleDesign .checkout#checkoutModule .section.checkout-subscription, .webRoot.moduleDesign .checkout#checkoutModule > div > div > .section, .webRoot.moduleDesign .checkout#checkoutModule .section.checkout-orderSummary, .webRoot.moduleDesign .checkout#checkoutModule .checkout-paymentMethod-wrapper > .section.checkout-paymentMethod { border-radius: 20px; border: var(--sv-widget-inset-border); background: var(--sv-widget-surface-highlight), var(--checkout-section-bg); box-shadow: var(--sv-widget-inset-shadow); } .webRoot.moduleDesign .checkout#checkoutModule > .section { overflow: hidden; } .webRoot.moduleDesign .checkout#checkoutModule > .section::before { display: inline-flex; align-items: center; width: fit-content; margin: 0 0 14px; padding: 5px 10px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--sv-current-season-color, #e83331) 16%, transparent); background: color-mix(in srgb, var(--sv-current-season-color, #e83331) 9%, transparent); color: color-mix(in srgb, var(--sv-current-season-color, #e83331) 82%, #4a3830); font-size: 13px; font-weight: 700; line-height: 1.2; letter-spacing: 0.01em; } .webRoot.moduleDesign .checkout#checkoutModule > .section.checkout-customerData::before { content: "1. Deine Daten"; } .webRoot.moduleDesign .checkout#checkoutModule > .section.checkout-orderSummary::before { content: "2. Deine Bestellung"; } .webRoot.moduleDesign .checkout#checkoutModule > .section.checkout-final::before { content: "3. Abschließen"; } /* Order summary: membership, voucher, sum, payment — one glass section, one `#cart-*` for AJAX. */ .webRoot.moduleDesign .checkout#checkoutModule .checkout-orderSummary .cart.checkout-orderCart { margin: 0; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-orderSummary .cart-wrapper { gap: var(--checkout-inner-gap); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-orderSummary .voucherEntry-container { margin-top: 0 !important; padding: var(--checkout-inner-gap); border: var(--checkout-divider); border-radius: 18px; background: var(--checkout-inset-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-orderSummary > .title.sub, .webRoot.moduleDesign .checkout#checkoutModule .checkout-orderSummary .title.sub { margin-top: 0; margin-bottom: var(--checkout-gap); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-orderSummary .title.sub h3 { font-size: clamp(1.05rem, 2vw, 1.28rem); font-weight: 700; letter-spacing: -0.015em; margin: 0; color: #4a403c; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-orderSummary .sumList-container { margin: 0 !important; padding: 12px 14px; border: var(--checkout-divider); border-radius: 16px; background: rgba(255, 255, 255, 0.72); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-orderSummary .checkout-cartStack { padding-top: 0; border-top: 0; } /* Order column: line items + trial + payment share one vertical gap (no “floating” blocks). */ .webRoot.moduleDesign .checkout#checkoutModule .checkout-cartStack { display: flex; flex-direction: column; gap: var(--checkout-gap); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-cartStack .trialInfoBlock { margin: 0; padding: var(--checkout-inner-gap); border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.76); background: linear-gradient( 145deg, rgba(255, 253, 245, 0.98) 0%, rgba(255, 244, 214, 0.94) 48%, rgba(255, 236, 228, 0.92) 100% ); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85), 0 10px 26px rgba(80, 52, 38, 0.07); font-size: 15px; line-height: 1.55; } /* Payment: inset under order summary — not a second floating card. */ .webRoot.moduleDesign .checkout#checkoutModule .checkout-cartStack .checkout-paymentMethod-wrapper { margin: 0; padding: var(--checkout-inner-gap); border-radius: 18px; border: var(--checkout-divider); background: var(--checkout-inset-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-cartStack .checkout-paymentMethod-wrapper > .title { margin-bottom: 10px; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-cartStack .checkout-paymentMethod-wrapper > .title h3 { margin: 0; font-size: clamp(1.02rem, 1.9vw, 1.22rem); font-weight: 700; color: #4a403c; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-cartStack .checkout-paymentMethod-wrapper > .section.checkout-paymentMethod { margin-bottom: 0 !important; padding: 0 !important; border-radius: 16px; border: 0; background: transparent; box-shadow: none; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-cartStack .checkout-paymentMethod-wrapper .paymentNotice { top: calc(var(--checkout-gap) + 2px); right: 2px; } /* Payment-update (no cart stack): keep self-contained payment card. */ .webRoot.moduleDesign .checkout#checkoutModule:not(:has(.checkout-cartStack)) .checkout-paymentMethod-wrapper { margin-top: var(--checkout-gap); padding: var(--checkout-pad-y) var(--checkout-pad-x); border-radius: 20px; background: linear-gradient( 145deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 249, 232, 0.95) 52%, rgba(255, 242, 242, 0.96) 100% ); border: 1px solid rgba(255, 255, 255, 0.78); box-shadow: 0 16px 40px rgba(80, 52, 38, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.88); } .webRoot.moduleDesign .checkout#checkoutModule:not(:has(.checkout-cartStack)) .checkout-paymentMethod-wrapper .paymentNotice { top: 12px; right: 14px; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .itemList.cartContent { border-radius: 18px; border: var(--checkout-divider); background: var(--checkout-inset-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86); overflow: hidden; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .itemList.cartContent:empty { display: none; } /* Line item: flex row (overrides core table-cell cart layout). */ .webRoot.moduleDesign .checkout#checkoutModule .cart.full .itemList.cartContent > .item { display: flex !important; flex-direction: row; align-items: flex-start; justify-content: space-between; gap: 12px 20px; width: 100%; padding: calc(var(--checkout-gap) + 2px) var(--checkout-pad-x); box-sizing: border-box; background: transparent; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .itemList.cartContent > .item .col { display: block !important; float: none !important; width: auto !important; padding: 0 !important; vertical-align: top !important; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .itemList.cartContent > .item .col.cartItem-product { flex: 1 1 auto; min-width: 0; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .itemList.cartContent > .item .col.cartItem-price { flex: 0 0 auto; align-self: flex-start; margin-top: 2px; padding-right: 0 !important; text-align: right; font-size: clamp(1.05rem, 2.2vw, 1.2rem); font-weight: 700; color: #5a7a28; white-space: nowrap; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .itemList.cartContent > .item .basics .title h3 { margin: 0 0 6px; font-size: clamp(1rem, 2vw, 1.12rem); font-weight: 700; line-height: 1.3; color: var(--sv-header-text-color); } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .itemList.cartContent > .item .priceInfo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; line-height: 1.45; color: #7a716c; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .itemList.cartContent > .item .priceInfo .label { float: none !important; margin: 0 !important; font-weight: 600; color: #6a625c; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .itemList.cartContent > .item .priceInfo .content { margin: 0; } /* Cart footer: stacked voucher block + full-width total row (receipt rhythm). */ .webRoot.moduleDesign .checkout#checkoutModule .cart.full .cart-wrapper { display: flex; flex-direction: column; align-items: stretch; gap: var(--checkout-inner-gap); } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .cart-wrapper > .itemList.cartContent, .webRoot.moduleDesign .checkout#checkoutModule .cart.full .checkout-orderSummary .itemList.cartContent { width: 100%; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .cart-wrapper > .voucherEntry-container, .webRoot.moduleDesign .checkout#checkoutModule .cart.full .checkout-orderSummary .voucherEntry-container { float: none !important; width: 100% !important; max-width: 100%; min-width: 0; margin: 0 !important; box-sizing: border-box; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .cart-wrapper > .sumList-container, .webRoot.moduleDesign .checkout#checkoutModule .cart.full .checkout-orderSummary .sumList-container { float: none !important; width: 100% !important; box-sizing: border-box; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .sumList { float: none; margin-top: 0; width: 100%; max-width: 100%; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .sumList .cartSum .wrapper { float: none; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 16px; width: 100%; margin-bottom: 0; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .sumList .cartSum .wrapper .label, .webRoot.moduleDesign .checkout#checkoutModule .cart.full .sumList .cartSum .wrapper .value { float: none; width: auto; min-width: 0; padding-right: 0; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .sumList .cartSum .wrapper .label { text-align: left; font-weight: 700; color: #4a403c; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .sumList .cartSum .wrapper .value { text-align: right; margin-left: auto; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .col.voucher { border-top: 1px dashed rgba(80, 52, 38, 0.12); background: rgba(255, 252, 246, 0.92); } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry { margin-left: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, auto); grid-template-areas: "vlabel vlabel" "vinput vbutton" "vcomment vcomment"; gap: 8px 14px; align-items: center; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry::before, .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry::after, .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .clearfix::before, .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .clearfix::after { content: none !important; display: none !important; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .clearfix { display: contents; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .label { grid-area: vlabel; float: none; margin: 0; font-weight: 700; font-size: 15px; color: #4a403c; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .inputField { grid-area: vinput; float: none; margin: 0; min-width: 0; max-width: 100%; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .button { grid-area: vbutton; float: none; margin: 0; display: flex; align-items: center; justify-content: flex-end; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry input { display: block; width: 100%; box-sizing: border-box; min-width: 0; min-height: 44px; padding: 10px 12px !important; border: 1px solid rgba(80, 52, 38, 0.15) !important; border-radius: 12px !important; background: #fff !important; font-size: 16px !important; line-height: 1.35; font-family: KoHo, "Open Sans", Arial, Helvetica, sans-serif; box-shadow: none !important; text-transform: uppercase; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .shopButton, .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .shopButton.small { height: auto !important; min-height: 0 !important; line-height: normal !important; margin-top: 0 !important; display: inline-flex; align-items: center; box-shadow: none !important; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .shopButton a.button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 0; height: auto; padding: var(--checkout-pill-py) var(--checkout-pill-px); border-radius: 999px; font-weight: 600; font-size: var(--checkout-pill-fs); line-height: 1.25; white-space: nowrap; border: none; background: #e83331; color: #fff !important; text-decoration: none !important; box-shadow: 0 8px 18px rgba(232, 51, 49, 0.22); } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .shopButton a.button:hover { background: #d82321; color: #fff !important; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .comment { grid-area: vcomment; margin: 0; padding: 0; border-radius: 0; background: transparent; color: #7a716c; font-size: 13px; line-height: 1.4; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .comment .responseContainer { float: none; width: 100%; max-width: 100%; margin: 6px 0 0; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .comment .responseContainer:not(.visible) { display: none; margin: 0; height: 0; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .sumList .cartSum.totalSum .wrapper .value { font-size: clamp(1.08rem, 2.2vw, 1.22rem); font-weight: 700; color: var(--sv-header-text-color); } /* Checkout customer form — same readable tokens as /mein-benutzerkonto/ (modal / account). */ .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm-container { display: block; width: 100%; margin-top: 0; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm-container .webForm { float: none; margin-right: 0; width: 100%; max-width: 100%; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet { margin-bottom: var(--checkout-field-row-gap); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .label { margin-bottom: var(--checkout-field-label-gap); color: #5c5248; font-size: 14px; font-weight: 500; line-height: 1.35; } /* Help copy under fields — warm hint card (replaces legacy grey core .comment box) */ .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .comment, .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .comment { clear: both; margin-top: 8px; max-width: 100%; padding: 12px 14px; border: none; border-radius: 12px; background: var(--sv-widget-surface-bg); box-shadow: 0 4px 14px rgba(80, 52, 38, 0.06); color: #746a64; font-family: "Open Sans", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .comment p, .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .comment p { margin: 0; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet.fieldSet--error .label, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet.fieldSet--error .label p, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet.fieldSet--error .label span { color: #9b2c2c; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet.fieldSet--error input, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet.fieldSet--error textarea, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet.fieldSet--error .selectboxit-container .selectboxit { border-color: #c44 !important; box-shadow: 0 0 0 2px rgba(196, 68, 68, 0.14); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .checkmarkContainer.checkmarkContainer--error { border-radius: 12px; box-shadow: 0 0 0 2px rgba(196, 68, 68, 0.18); background: rgba(196, 68, 68, 0.05); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet-pair { display: flex; flex-wrap: wrap; gap: var(--checkout-field-pair-gap); margin-bottom: var(--checkout-field-row-gap); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet-pair::before, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet-pair::after { display: none; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet-pair > div { float: none !important; min-width: 0; margin-right: 0 !important; flex: 1 1 12rem; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field .group { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--checkout-field-pair-gap); float: none; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field .group::before, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field .group::after { display: none; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field .group > div { float: none !important; margin-right: 0 !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field .fiveDigits { flex: 0 0 7.5rem; max-width: 38%; min-width: 5.5rem; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field .fiveDigits input { width: 100% !important; min-width: 0; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field .short { flex: 1 1 10rem; min-width: 0; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field .short input { width: 100% !important; max-width: 100% !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm input:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm textarea, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm input:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .newCustomerForm input:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .newCustomerForm textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; height: auto !important; min-height: 44px; padding: 10px 12px !important; border: 1px solid rgba(80, 52, 38, 0.15) !important; border-radius: 12px !important; background: #fff !important; font-family: KoHo, "Open Sans", Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.35 !important; color: var(--sv-header-text-color) !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm input:not([type="checkbox"]):not([type="radio"]):focus, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm textarea:focus, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm input:focus { border-color: #e83331 !important; outline: 0; box-shadow: 0 0 0 3px rgba(232, 51, 49, 0.12) !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm textarea, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .newCustomerForm textarea { min-height: 88px; resize: vertical; } /* UID/VAT live validation — base checkout input rule uses background:#fff !important and hides core .busy/.valid/.invalid */ .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm input.busy:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .newCustomerForm input.busy:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm input.busy:not([type="checkbox"]):not([type="radio"]) { background-color: #fff !important; background-image: url('/img/core/loadIndicators/field-busy.ddd.gif') !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: auto !important; padding-right: 40px !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm input.valid:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .newCustomerForm input.valid:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm input.valid:not([type="checkbox"]):not([type="radio"]) { background-color: #fff !important; background-image: url('/img/core/icons/field-checkmark.ok.png') !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 22px 22px !important; padding-right: 40px !important; } /* * Valid checkmark overlay on the input wrapper — not on .field (core .field extends .clearfix and owns ::after). */ .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field > div:has(> input.valid:not([type="checkbox"]):not([type="radio"])) { position: relative; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field > div:has(> input.valid:not([type="checkbox"]):not([type="radio"]))::after { content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: transparent url('/img/core/icons/field-checkmark.ok.png') no-repeat center / contain; pointer-events: none; z-index: 2; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm input.invalid:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .newCustomerForm input.invalid:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm input.invalid:not([type="checkbox"]):not([type="radio"]) { background-color: #e83331 !important; background-image: none !important; color: #fff !important; border-color: #c42a28 !important; padding-right: 12px !important; } /* VIES transient (e.g. DE MS_UNAVAILABLE) — warn, not “invalid VAT” */ .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm input.sv-vat-unavailable:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .newCustomerForm input.sv-vat-unavailable:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm input.sv-vat-unavailable:not([type="checkbox"]):not([type="radio"]) { background-color: #fff9e6 !important; background-image: none !important; color: #5c4a32 !important; border-color: #d4a012 !important; padding-right: 40px !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field > div:has(> input.sv-vat-unavailable:not([type="checkbox"]):not([type="radio"])) { position: relative; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field > div:has(> input.sv-vat-unavailable:not([type="checkbox"]):not([type="radio"]))::after { content: "!"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #d4a012; color: #fff; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 700; line-height: 20px; text-align: center; pointer-events: none; z-index: 2; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet:has(input.sv-vat-unavailable) .comment { box-shadow: 0 4px 14px rgba(212, 160, 18, 0.12); border-left: 3px solid #d4a012; padding-left: 11px; } .webRoot.moduleDesign .customerManagement-card .webForm input.busy:not([type="checkbox"]):not([type="radio"]) { background-color: #fff !important; background-image: url('/img/core/loadIndicators/field-busy.ddd.gif') !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: auto !important; padding-right: 40px !important; } .webRoot.moduleDesign .customerManagement-card .webForm input.valid:not([type="checkbox"]):not([type="radio"]) { background-color: #fff !important; background-image: url('/img/core/icons/field-checkmark.ok.png') !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 22px 22px !important; padding-right: 40px !important; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field > div:has(> input.valid:not([type="checkbox"]):not([type="radio"])) { position: relative; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field > div:has(> input.valid:not([type="checkbox"]):not([type="radio"]))::after { content: ""; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; background: transparent url('/img/core/icons/field-checkmark.ok.png') no-repeat center / contain; pointer-events: none; z-index: 2; } .webRoot.moduleDesign .customerManagement-card .webForm input.invalid:not([type="checkbox"]):not([type="radio"]) { background-color: #e83331 !important; background-image: none !important; color: #fff !important; border-color: #c42a28 !important; padding-right: 12px !important; } .webRoot.moduleDesign .customerManagement-card .webForm input.sv-vat-unavailable:not([type="checkbox"]):not([type="radio"]) { background-color: #fff9e6 !important; background-image: none !important; color: #5c4a32 !important; border-color: #d4a012 !important; padding-right: 40px !important; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field > div:has(> input.sv-vat-unavailable:not([type="checkbox"]):not([type="radio"])) { position: relative; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field > div:has(> input.sv-vat-unavailable:not([type="checkbox"]):not([type="radio"]))::after { content: "!"; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: #d4a012; color: #fff; font-family: "KoHo", "Open Sans", Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 700; line-height: 20px; text-align: center; pointer-events: none; z-index: 2; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet:has(input.sv-vat-unavailable) .comment { box-shadow: 0 4px 14px rgba(212, 160, 18, 0.12); border-left: 3px solid #d4a012; padding-left: 11px; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .selectboxit-container { display: block; width: 100% !important; max-width: 100%; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .selectboxit-container .selectboxit, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .selectboxit-btn { width: 100% !important; max-width: 100% !important; min-height: 44px; padding: 10px 12px !important; border: 1px solid rgba(80, 52, 38, 0.15) !important; border-radius: 12px !important; background: radial-gradient(circle at calc(100% - 12px) 50%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 10%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 10%, transparent) 34px, transparent 35px), linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 251, 243, 0.94) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; box-sizing: border-box; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .selectboxit-container .selectboxit.selectboxit-open, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .selectboxit-container .selectboxit:focus, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .selectboxit-btn.selectboxit-open, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .selectboxit-btn:focus { border-color: #e83331 !important; box-shadow: 0 0 0 3px rgba(232, 51, 49, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .selectboxit-container span, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .selectboxit-container .selectboxit-text { height: auto !important; line-height: 1.35 !important; font-size: 16px !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData #field-countrySelectBoxIt { width: 100% !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm .shopButton.submit { display: flex; justify-content: flex-start; width: 100%; margin-top: 14px; height: auto !important; line-height: normal !important; box-shadow: none !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm .shopButton.submit { min-height: 0 !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm .shopButton.submit a.button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 0; height: auto; padding: var(--checkout-pill-py) var(--checkout-pill-px); border-radius: 999px; background: #e83331; color: #fff !important; font-weight: 600; font-size: var(--checkout-pill-fs); line-height: 1.25; text-decoration: none !important; border: none; box-shadow: 0 4px 14px rgba(232, 51, 49, 0.35); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm .shopButton.submit a.button:hover { background: #d82321; color: #fff !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData #customerData-responseContainer { opacity: 0; visibility: hidden; float: none; clear: both; width: 100%; max-width: 100%; margin: 14px 0 0; padding: 0; height: 0; min-height: 0; overflow: hidden; background: transparent; position: relative; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData #customerData-responseContainer.visible { opacity: 1; visibility: visible; height: auto; overflow: visible; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm.visible, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .newCustomerForm.visible { margin-bottom: 8px; } /* Smooth scroll target: clear fixed header / body padding when jumping to login (existing-account radio). */ .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm { scroll-margin-top: 110px; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .newCustomerForm.open { margin-bottom: 10px; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .customerAccount > .target { margin-bottom: 12px; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .customerAccount > .target:last-child { margin-bottom: 0; } /* Round iCheck choice controls — checkout/abo + toolbar modals (login etc.). */ .webRoot.moduleDesign .icheckbox_square-green, .webRoot.moduleDesign .iradio_square-green, .loginBlock-modal .icheckbox_square-green, .loginBlock-modal .iradio_square-green, .searchBlock-mobileModal .icheckbox_square-green, .searchBlock-mobileModal .iradio_square-green, #newsletterPlugin .window .icheckbox_square-green, #newsletterPlugin .window .iradio_square-green, #modalContentBox .icheckbox_square-green, #modalContentBox .iradio_square-green { display: inline-block !important; flex-shrink: 0; width: 22px !important; height: 22px !important; min-width: 22px !important; min-height: 22px !important; margin: 0 !important; padding: 0 !important; border: none !important; border-radius: 50%; background: url(/img/core/icheck/red.png) no-repeat !important; background-size: 240px 24px !important; box-shadow: none !important; vertical-align: top; cursor: pointer; } /* Checkboxes use the same round sprite as payment radios (not legacy square iCheck frames). */ .webRoot.moduleDesign .icheckbox_square-green, .webRoot.moduleDesign .iradio_square-green, .loginBlock-modal .icheckbox_square-green, .loginBlock-modal .iradio_square-green, .searchBlock-mobileModal .icheckbox_square-green, .searchBlock-mobileModal .iradio_square-green, #newsletterPlugin .window .icheckbox_square-green, #newsletterPlugin .window .iradio_square-green, #modalContentBox .icheckbox_square-green, #modalContentBox .iradio_square-green { background-position: -120px 0 !important; } .webRoot.moduleDesign .icheckbox_square-green.hover, .webRoot.moduleDesign .iradio_square-green.hover, .loginBlock-modal .icheckbox_square-green.hover, .loginBlock-modal .iradio_square-green.hover, .searchBlock-mobileModal .icheckbox_square-green.hover, .searchBlock-mobileModal .iradio_square-green.hover, #newsletterPlugin .window .icheckbox_square-green.hover, #newsletterPlugin .window .iradio_square-green.hover, #modalContentBox .icheckbox_square-green.hover, #modalContentBox .iradio_square-green.hover { background-position: -144px 0 !important; } .webRoot.moduleDesign .icheckbox_square-green.checked, .webRoot.moduleDesign .iradio_square-green.checked, .loginBlock-modal .icheckbox_square-green.checked, .loginBlock-modal .iradio_square-green.checked, .searchBlock-mobileModal .icheckbox_square-green.checked, .searchBlock-mobileModal .iradio_square-green.checked, #newsletterPlugin .window .icheckbox_square-green.checked, #newsletterPlugin .window .iradio_square-green.checked, #modalContentBox .icheckbox_square-green.checked, #modalContentBox .iradio_square-green.checked { background-position: -168px 0 !important; } @media (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dppx) { .webRoot.moduleDesign .icheckbox_square-green, .webRoot.moduleDesign .iradio_square-green, .loginBlock-modal .icheckbox_square-green, .loginBlock-modal .iradio_square-green, .searchBlock-mobileModal .icheckbox_square-green, .searchBlock-mobileModal .iradio_square-green, #newsletterPlugin .window .icheckbox_square-green, #newsletterPlugin .window .iradio_square-green, #modalContentBox .icheckbox_square-green, #modalContentBox .iradio_square-green { background-image: url(/img/core/icheck/red@2x.png) !important; } } .webRoot.moduleDesign .checkout#checkoutModule .paymentMethods .method { display: flex; align-items: flex-start; gap: 10px 12px; margin: 0 0 10px; padding: 11px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(80, 52, 38, 0.08); box-sizing: border-box; } .webRoot.moduleDesign .checkout#checkoutModule .paymentMethods .method:last-child { margin-bottom: 0; } .webRoot.moduleDesign .checkout#checkoutModule .paymentMethods .method > .field, .webRoot.moduleDesign .checkout#checkoutModule .paymentMethods .method > .label { display: block; float: none !important; white-space: normal; } .webRoot.moduleDesign .checkout#checkoutModule .paymentMethods .method > .field { flex: 0 0 auto; margin: 2px 0 0; min-width: 22px; } .webRoot.moduleDesign .checkout#checkoutModule .paymentMethods .method > .label { flex: 1 1 auto; min-width: 0; line-height: 1.45; font-weight: 500; color: #403832; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper { display: flex; flex-direction: column; gap: 9px; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper .checkmarkContainer, .webRoot.moduleDesign .customerManagement-card .customerNewsletterReg.checkmarkContainer, .webRoot.moduleDesign .customerManagement-card .customerAccountDelete.checkmarkContainer { white-space: normal; display: flex; align-items: flex-start; gap: 10px 12px; padding: 11px 12px; margin-top: 0; border-radius: 14px; background: rgba(255, 255, 255, 0.76); border: 1px solid rgba(80, 52, 38, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.74); box-sizing: border-box; } /* core clearfix adds ::before/::after on choice rows — drop them when flex layout is active. */ .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper .checkmarkContainer::before, .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper .checkmarkContainer::after, .webRoot.moduleDesign .customerManagement-card .customerNewsletterReg.checkmarkContainer::before, .webRoot.moduleDesign .customerManagement-card .customerNewsletterReg.checkmarkContainer::after, .webRoot.moduleDesign .customerManagement-card .customerAccountDelete.checkmarkContainer::before, .webRoot.moduleDesign .customerManagement-card .customerAccountDelete.checkmarkContainer::after { content: none !important; display: none !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper .checkmarkContainer > div, .webRoot.moduleDesign .customerManagement-card .customerNewsletterReg.checkmarkContainer > div, .webRoot.moduleDesign .customerManagement-card .customerAccountDelete.checkmarkContainer > div { white-space: normal; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper .checkmarkContainer .field, .webRoot.moduleDesign .customerManagement-card .customerNewsletterReg.checkmarkContainer .webForm, .webRoot.moduleDesign .customerManagement-card .customerAccountDelete.checkmarkContainer .webForm { float: none; margin: 2px 0 0; flex: 0 0 auto; width: auto; min-width: 22px; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper .checkmarkContainer .label, .webRoot.moduleDesign .customerManagement-card .customerNewsletterReg.checkmarkContainer .label, .webRoot.moduleDesign .customerManagement-card .customerAccountDelete.checkmarkContainer .label { float: none; flex: 1 1 auto; min-width: 0; margin: 0; line-height: 1.45; font-weight: 500; color: #403832; } .webRoot.moduleDesign .customerManagement-card .customerNewsletterReg.checkmarkContainer .label label, .webRoot.moduleDesign .customerManagement-card .customerAccountDelete.checkmarkContainer .label label { cursor: pointer; } .webRoot.moduleDesign .checkout#checkoutModule .checkmarkContainer input[type="checkbox"], .webRoot.moduleDesign .checkout#checkoutModule .paymentMethods input[type="radio"], .webRoot.moduleDesign .customerManagement-card .customerNewsletterReg input[type="checkbox"], .webRoot.moduleDesign .customerManagement-card .customerAccountDelete input[type="checkbox"] { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; border: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; opacity: 0 !important; background: transparent !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper .shopButton.finalize { display: flex; justify-content: flex-start; width: 100%; margin-top: 8px; height: auto !important; line-height: normal !important; box-shadow: none !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper .shopButton.finalize a.button { display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: 0; height: auto; width: auto; padding: var(--checkout-pill-py) 28px; border-radius: 999px; background: #e83331; color: #fff !important; font-weight: 600; font-size: 15px; line-height: 1.25; text-decoration: none !important; text-transform: none; letter-spacing: normal; border: none; box-shadow: 0 4px 14px rgba(232, 51, 49, 0.35); white-space: nowrap; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper .shopButton.finalize a.button:hover { background: #d82321; color: #fff !important; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper .shopButton.finalize a.button.busy { background: #ccc !important; color: #eee !important; cursor: default !important; box-shadow: none !important; } /* Checkout alerts — same inline tokens as .voucherEntry .responseContainer (Gutscheincode = reference). */ .webRoot.moduleDesign .checkout#checkoutModule #checkout-response:empty { display: none; margin: 0; padding: 0; } .webRoot.moduleDesign .checkout#checkoutModule #checkout-response:not(:empty), .webRoot.moduleDesign .checkout#checkoutModule #customerData-responseContainer.visible { display: block; width: 100%; max-width: 100%; margin: 0 0 var(--checkout-gap, 16px); padding: 0; background: transparent !important; box-shadow: none !important; overflow: visible; } /* Neutralize legacy core.css #checkout-response red bar (container only). */ .webRoot.moduleDesign .checkout#checkoutModule .finalizeWrapper #checkout-response:not(:empty) { background: transparent !important; padding: 0 !important; color: inherit !important; margin-top: 0 !important; margin-bottom: 0 !important; } .webRoot.moduleDesign .checkout#checkoutModule .finalizeWrapper #checkout-response > div.response, .webRoot.moduleDesign .checkout#checkoutModule .finalizeWrapper #checkout-response > div.response:first-child { box-sizing: border-box; padding: 12px 16px 14px !important; color: #4a403c !important; line-height: 1.45 !important; border-bottom: 0 !important; margin-bottom: 0 !important; font-size: 14px !important; } .webRoot.moduleDesign .checkout#checkoutModule .finalizeWrapper #checkout-response > div.response > div { color: inherit !important; line-height: inherit !important; padding-left: 0 !important; padding-bottom: 0 !important; } /* Legacy core.css #checkout-response ul { padding-left:0; margin-left:18px } — match Gutscheincode inset. */ .webRoot.moduleDesign .checkout#checkoutModule .finalizeWrapper #checkout-response .response ul { margin: 0 !important; padding: 0 0 0 1.15em !important; list-style: disc !important; } .webRoot.moduleDesign .checkout#checkoutModule .finalizeWrapper #checkout-response .response li { margin: 0 0 6px; color: inherit !important; } .webRoot.moduleDesign .checkout#checkoutModule .finalizeWrapper #checkout-response .response li:last-child { margin-bottom: 0; } .webRoot.moduleDesign .checkout#checkoutModule #checkout-response .response, .webRoot.moduleDesign .checkout#checkoutModule #customerData-responseContainer .response { display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; padding: 12px 16px 14px !important; border-radius: 12px; font-family: KoHo, "Open Sans", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.45; color: #4a403c; background: rgba(255, 246, 246, 0.95); border: 1px solid rgba(232, 51, 49, 0.45); box-shadow: none; } .webRoot.moduleDesign .checkout#checkoutModule #checkout-response .response strong, .webRoot.moduleDesign .checkout#checkoutModule #checkout-response .response > .nodeBase.string:first-child, .webRoot.moduleDesign .checkout#checkoutModule #checkout-response .response > div:first-child, .webRoot.moduleDesign .checkout#checkoutModule #customerData-responseContainer .response strong, .webRoot.moduleDesign .checkout#checkoutModule #customerData-responseContainer .response > .nodeBase.string:first-child, .webRoot.moduleDesign .checkout#checkoutModule #customerData-responseContainer .response > div:first-child { display: block; margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.35; color: #342c28 !important; border-bottom: 0 !important; padding: 0 !important; } .webRoot.moduleDesign .checkout#checkoutModule #checkout-response a, .webRoot.moduleDesign .checkout#checkoutModule #checkout-response .response a, .webRoot.moduleDesign .checkout#checkoutModule #customerData-responseContainer .response a { color: #e83331 !important; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .webRoot.moduleDesign .checkout#checkoutModule #checkout-response a:hover, .webRoot.moduleDesign .checkout#checkoutModule #checkout-response .response a:hover, .webRoot.moduleDesign .checkout#checkoutModule #customerData-responseContainer .response a:hover { color: #d82321 !important; } .webRoot.moduleDesign .checkout#checkoutModule #checkout-response .response.warning, .webRoot.moduleDesign .checkout#checkoutModule #customerData-responseContainer .response.warning { background: rgba(255, 246, 246, 0.95); border-color: rgba(232, 51, 49, 0.45); color: #4a403c; } .webRoot.moduleDesign .checkout#checkoutModule #checkout-response .response.info, .webRoot.moduleDesign .checkout#checkoutModule #customerData-responseContainer .response.info { background: rgba(244, 252, 236, 0.96) !important; border: 1px solid rgba(148, 191, 54, 0.42) !important; color: #3a4534 !important; box-shadow: none !important; } @media (max-width: 800px) { .webRoot.moduleDesign .checkout#checkoutModule { --checkout-gap: 14px; --checkout-pad-x: 18px; --checkout-pad-y: 18px; --checkout-inner-gap: 12px; padding-left: 2px; padding-right: 2px; } .webRoot.moduleDesign .checkout#checkoutModule > .section::before { margin-bottom: 12px; font-size: 12px; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet-pair { flex-direction: column; align-items: stretch; gap: var(--checkout-field-row-gap); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet-pair > div { flex: 1 1 100%; width: 100%; max-width: 100%; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet-pair .fieldSet { width: 100%; max-width: 100%; box-sizing: border-box; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet-pair .fieldSet .field, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet-pair .fieldSet .field .extraLong, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet-pair .fieldSet .field .extraLong input { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field .group { flex-direction: row; flex-wrap: nowrap; align-items: stretch; width: 100%; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field .fiveDigits { flex: 0 0 6.75rem; max-width: none; min-width: 5.25rem; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .webForm .fieldSet .field .short { flex: 1 1 0; min-width: 0; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry { grid-template-columns: 1fr; grid-template-areas: "vlabel" "vinput" "vbutton" "vcomment"; gap: 8px; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .button { justify-content: stretch; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .shopButton, .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .shopButton a.button { width: 100%; } .webRoot.moduleDesign .checkout#checkoutModule .checkout-cartStack .trialInfoBlock { padding: 14px; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .itemList.cartContent > .item { flex-wrap: wrap; gap: 8px 12px; padding: 16px; } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .itemList.cartContent > .item .col.cartItem-price { margin-left: auto; } } /* --- Restored: customer account + membership manager (moduleDesign) --- */ /* * Customer account (/mein-benutzerkonto/) — warm cards + birds watermark (login modal asset). * Full #main-content width (same as blankContainer moduleDesign modules; no 760px column). */ .webRoot.moduleDesign .customerManagement-root { --sv-account-gap: 16px; --sv-account-pad-x: 22px; --sv-account-pad-y: 20px; --sv-account-hover-wash: rgba(255, 255, 255, 0.3); /* Customer form row rhythm (was 14px / 6px / 12px — −⅓; checkout parity). */ --checkout-field-row-gap: calc(14px * 2 / 3); --checkout-field-label-gap: calc(6px * 2 / 3); --checkout-field-pair-gap: calc(12px * 2 / 3); position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--sv-account-gap); width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding: 4px 2px calc(var(--sv-account-gap) + 4px); box-sizing: border-box; } .webRoot.moduleDesign .customerManagement-root::before { content: ""; position: absolute; z-index: 0; top: -12px; right: -4%; width: min(52%, 340px); height: min(42vw, 260px); border-radius: 0; background: transparent url("/imageAssetDirect/login-modal-birds.jpg") no-repeat right top; background-size: contain; opacity: 0.24; mix-blend-mode: multiply; pointer-events: none; } /* Lean pref card: landscape allow for screen sync (top of account page, mobile only) */ .webRoot.moduleDesign .customerManagement-card.customerManagement-card--pref.customerManagement-card--mobileOnly { display: none; } html.sv-force-mobile-landscape .webRoot.moduleDesign .customerManagement-card.customerManagement-card--pref.customerManagement-card--mobileOnly { display: block; } @media (max-width: 800px) { .webRoot.moduleDesign .customerManagement-card.customerManagement-card--pref.customerManagement-card--mobileOnly { display: block; } } .webRoot.moduleDesign .customerManagement-card.customerManagement-card--pref { --sv-account-card-bg: linear-gradient(165deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 249, 235, 0.9) 55%, rgba(255, 244, 244, 0.92) 100%); border-radius: 18px; box-shadow: 0 14px 32px rgba(80, 52, 38, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.92); } .webRoot.moduleDesign .customerManagement-card.customerManagement-card--pref::before, .webRoot.moduleDesign .customerManagement-card.customerManagement-card--pref::after { display: none; } .webRoot.moduleDesign .customerLandscapeAllow-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px 18px; box-sizing: border-box; } .webRoot.moduleDesign .customerLandscapeAllow-copy { flex: 1 1 12rem; min-width: 0; } .webRoot.moduleDesign .customerLandscapeAllow-title { margin: 0 0 4px; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--sv-header-text-color); } .webRoot.moduleDesign .customerLandscapeAllow-desc { margin: 0; font-size: 13px; line-height: 1.4; color: #4a403c; } .webRoot.moduleDesign .sv-prefSwitch { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; cursor: pointer; margin: 0; } .webRoot.moduleDesign .sv-prefSwitch-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .webRoot.moduleDesign .sv-prefSwitch-track { position: relative; display: block; width: 46px; height: 26px; border-radius: 999px; background: rgba(80, 52, 38, 0.22); transition: background 0.16s ease; box-sizing: border-box; } .webRoot.moduleDesign .sv-prefSwitch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(52, 44, 40, 0.22); transition: transform 0.16s ease; } .webRoot.moduleDesign .sv-prefSwitch-input:checked + .sv-prefSwitch-track { background: #e83331; } .webRoot.moduleDesign .sv-prefSwitch-input:checked + .sv-prefSwitch-track::after { transform: translateX(20px); } .webRoot.moduleDesign .sv-prefSwitch-input:focus-visible + .sv-prefSwitch-track { outline: 0; box-shadow: 0 0 0 3px rgba(232, 51, 49, 0.18); } @media (max-width: 800px) { .webRoot.moduleDesign .customerLandscapeAllow-row { padding: 12px 14px; } } html.sv-force-mobile-landscape .webRoot.moduleDesign .customerLandscapeAllow-row { padding: 12px 14px; } .webRoot.moduleDesign .customerManagement-card { --sv-account-card-bg: linear-gradient(165deg, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, rgba(255, 255, 255, 0.98)) 0%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 8%, rgba(255, 255, 255, 0.96)) 48%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 12%, rgba(255, 255, 255, 0.94)) 100%); position: relative; z-index: 1; box-sizing: border-box; overflow: hidden; border-radius: 24px; border: var(--sv-widget-surface-border); background: var(--sv-widget-surface-highlight), var(--sv-account-card-bg); box-shadow: 0 22px 50px rgba(80, 52, 38, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.92); padding: 0; margin: 0 !important; transition: background-image 0.15s ease; } .webRoot.moduleDesign .customerManagement-card::before { content: ""; position: absolute; z-index: 0; top: -56px; right: -44px; width: 176px; height: 176px; border-radius: 50%; background: color-mix(in srgb, var(--sv-current-season-color, #e83331) 9%, transparent); pointer-events: none; } .webRoot.moduleDesign .customerManagement-card::after { content: ""; position: absolute; z-index: 0; right: 30px; bottom: 30px; width: 88px; height: 88px; border-radius: 50%; background: color-mix(in srgb, var(--sv-current-season-color, #e83331) 8%, transparent); pointer-events: none; } .webRoot.moduleDesign .customerManagement-card .blockContainer { display: block; width: 100%; margin-top: 0; } .webRoot.moduleDesign .customerManagement-card .blockContainer .column { display: block; width: 100% !important; max-width: none; float: none; } .webRoot.moduleDesign .customerManagement-card .blockContainer .column.right { margin-top: 0; } .webRoot.moduleDesign .customerManagement-card .webForm-container .webForm { float: none; margin-right: 0; width: 100%; max-width: 100%; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet { margin-bottom: var(--checkout-field-row-gap); } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .label { margin-bottom: var(--checkout-field-label-gap); color: #5c5248; font-size: 14px; font-weight: 500; line-height: 1.35; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet-pair { display: flex; flex-wrap: wrap; gap: var(--checkout-field-pair-gap); margin-bottom: var(--checkout-field-row-gap); } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet-pair::before, .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet-pair::after { display: none; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet-pair > div { float: none !important; min-width: 0; margin-right: 0 !important; flex: 1 1 12rem; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field .group { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--checkout-field-pair-gap); float: none; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field .group::before, .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field .group::after { display: none; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field .group > div { float: none !important; margin-right: 0 !important; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field .fiveDigits { flex: 0 0 7.5rem; max-width: 38%; min-width: 5.5rem; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field .fiveDigits input { width: 100% !important; min-width: 0; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field .short { flex: 1 1 10rem; min-width: 0; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field .short input { width: 100% !important; max-width: 100% !important; } .webRoot.moduleDesign .customerManagement-card .shopButton.finalize { display: flex; justify-content: flex-start; width: 100%; margin-top: 18px; height: auto !important; line-height: normal !important; box-shadow: none !important; float: none; } .webRoot.moduleDesign .customerManagement-card .shopButton.finalize a.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--sv-btn-modal-padding-y) var(--sv-btn-modal-padding-x); border-radius: 999px; background: #e83331; color: #fff !important; font-weight: 600; font-size: 15px; line-height: 1.25; text-decoration: none !important; text-transform: none; letter-spacing: normal; border: none; box-sizing: border-box; box-shadow: 0 4px 14px rgba(232, 51, 49, 0.35); white-space: normal; } .webRoot.moduleDesign .customerManagement-card .shopButton.finalize a.button:hover { background: #d82321; color: #fff !important; box-shadow: 0 4px 14px rgba(232, 51, 49, 0.35); } .webRoot.moduleDesign .customerManagement-card--danger { background: linear-gradient(165deg, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, rgba(255, 255, 255, 0.98)) 0%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 9%, rgba(255, 255, 255, 0.96)) 55%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 13%, rgba(255, 255, 255, 0.94)) 100%); border-color: rgba(232, 51, 49, 0.14); } .webRoot.moduleDesign .customerManagement-card--danger::before { background: color-mix(in srgb, var(--sv-current-season-color, #e83331) 6%, transparent); } /* Account form fields — same readable tokens as login / newsletter modals (no legacy 18px / inset glass). */ .webRoot.moduleDesign .customerManagement-card .webForm input:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .customerManagement-card .webForm textarea, .webRoot.moduleDesign .customerManagement-card input:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .customerManagement-card textarea { width: 100% !important; max-width: 100% !important; box-sizing: border-box; height: auto !important; min-height: 44px; padding: 10px 12px !important; border: 1px solid rgba(80, 52, 38, 0.15) !important; border-radius: 12px !important; background: #fff !important; font-family: KoHo, "Open Sans", Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.35 !important; color: var(--sv-header-text-color) !important; box-shadow: none !important; -webkit-appearance: none; appearance: none; } .webRoot.moduleDesign .customerManagement-card .webForm input:not([type="checkbox"]):not([type="radio"]):focus, .webRoot.moduleDesign .customerManagement-card .webForm textarea:focus, .webRoot.moduleDesign .customerManagement-card input:not([type="checkbox"]):not([type="radio"]):focus, .webRoot.moduleDesign .customerManagement-card textarea:focus { border-color: #e83331 !important; outline: 0; box-shadow: 0 0 0 3px rgba(232, 51, 49, 0.12) !important; } .webRoot.moduleDesign .customerManagement-card textarea { min-height: 88px; resize: vertical; } .webRoot.moduleDesign .customerManagement-card .selectboxit-container { display: block; width: 100% !important; max-width: 100%; } .webRoot.moduleDesign .customerManagement-card .selectboxit-container .selectboxit, .webRoot.moduleDesign .customerManagement-card .selectboxit-btn { width: 100% !important; max-width: 100% !important; min-height: 44px; padding: 10px 12px !important; border: 1px solid rgba(80, 52, 38, 0.15) !important; border-radius: 12px !important; background: radial-gradient(circle at calc(100% - 12px) 50%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 10%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 10%, transparent) 34px, transparent 35px), linear-gradient(180deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 251, 243, 0.94) 100%) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; box-sizing: border-box; } .webRoot.moduleDesign .customerManagement-card .selectboxit-container .selectboxit.selectboxit-open, .webRoot.moduleDesign .customerManagement-card .selectboxit-container .selectboxit:focus, .webRoot.moduleDesign .customerManagement-card .selectboxit-btn.selectboxit-open, .webRoot.moduleDesign .customerManagement-card .selectboxit-btn:focus { border-color: #e83331 !important; box-shadow: 0 0 0 3px rgba(232, 51, 49, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.72) !important; } .webRoot.moduleDesign .customerManagement-card .selectboxit-container span, .webRoot.moduleDesign .customerManagement-card .selectboxit-container .selectboxit-text { height: auto !important; line-height: 1.35 !important; font-size: 16px !important; } .webRoot.moduleDesign .customerManagement-card #field-countrySelectBoxIt { width: 100% !important; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field label { color: #5c5248; font-weight: 500; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field label .required { color: #e83331; } /* Account feedback — inline alert cards (login / newsletter tokens), not legacy fullscreen overlay. */ .webRoot.moduleDesign .customerManagement-root .responseContainer { opacity: 0; visibility: hidden; float: none; clear: both; width: 100%; max-width: 100%; margin: 16px 0 0; padding: 0; height: 0; min-height: 0; overflow: hidden; background: transparent; position: relative; box-sizing: border-box; font-size: 14px; } .webRoot.moduleDesign .customerManagement-root .responseContainer.visible { opacity: 1; visibility: visible; height: auto; min-height: 0; overflow: visible; } .webRoot.moduleDesign .customerManagement-root .responseContainer.fluid { margin: 16px 0 0; max-width: 100%; } .webRoot.moduleDesign .customerManagement-root .responseContainer.fluid:not(.visible) { visibility: hidden !important; height: 0; min-height: 0; margin-top: 0; } .webRoot.moduleDesign .customerManagement-root .responseContainer.fluid.visible { visibility: visible !important; height: auto; } .webRoot.moduleDesign .customerManagement-root .responseContainer .responseHolder { margin: 0; padding: 0; border: 0; background: transparent; opacity: 1; } .webRoot.moduleDesign .customerManagement-root .responseContainer .response, .webRoot.moduleDesign .customerManagement-root .responseContainer .responseHolder > .response { display: block; width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; padding: 14px 16px 16px; border-radius: 14px; font-family: KoHo, "Open Sans", Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.5; color: #4a403c; background: rgba(255, 246, 246, 0.98); border: 1px solid rgba(232, 51, 49, 0.42); box-shadow: 0 10px 28px rgba(80, 52, 38, 0.08); } .webRoot.moduleDesign .customerManagement-root .responseContainer .response strong, .webRoot.moduleDesign .customerManagement-root .responseContainer .responseHolder > .nodeBase.string:first-child, .webRoot.moduleDesign .customerManagement-root .responseContainer .responseHolder > p:first-child { display: block; margin: 0 0 8px; font-size: 15px; font-weight: 700; line-height: 1.35; color: var(--sv-header-text-color); } .webRoot.moduleDesign .customerManagement-root .responseContainer .response ul, .webRoot.moduleDesign .customerManagement-root .responseContainer .responseHolder ul { margin: 0; padding: 0 0 0 1.15em; list-style: disc; } /* Inline emphasis inside error/info bullets must stay inline — the title-heading rule above turns every into a block, which broke each bold word onto its own line. */ .webRoot.moduleDesign .customerManagement-root .responseContainer .response li strong, .webRoot.moduleDesign .customerManagement-root .responseContainer .responseHolder li strong { display: inline; margin: 0; font-size: inherit; line-height: inherit; color: inherit; } .webRoot.moduleDesign .customerManagement-root .responseContainer .response li, .webRoot.moduleDesign .customerManagement-root .responseContainer .responseHolder li { margin: 0 0 6px; } .webRoot.moduleDesign .customerManagement-root .responseContainer .response li:last-child, .webRoot.moduleDesign .customerManagement-root .responseContainer .responseHolder li:last-child { margin-bottom: 0; } .webRoot.moduleDesign .customerManagement-root .responseContainer .response a, .webRoot.moduleDesign .customerManagement-root .responseContainer .responseHolder a { color: #e83331; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .webRoot.moduleDesign .customerManagement-root .responseContainer .response.warning, .webRoot.moduleDesign .customerManagement-root .responseContainer .responseHolder > .response.warning { background: rgba(255, 246, 246, 0.98); border-color: rgba(232, 51, 49, 0.42); color: #4a403c; } .webRoot.moduleDesign .customerManagement-root .responseContainer .response.info, .webRoot.moduleDesign .customerManagement-root .responseContainer .responseHolder > .response.info { background: rgba(244, 252, 236, 0.98); border-color: rgba(148, 191, 54, 0.45); color: #3a4534; box-shadow: 0 10px 28px rgba(80, 52, 38, 0.06); } @media (max-width: 800px) { .webRoot.moduleDesign .customerManagement-root { padding-left: 0; padding-right: 0; } .webRoot.moduleDesign .customerManagement-root::before { right: -8%; opacity: 0.2; height: 200px; } .webRoot.moduleDesign .customerManagement-card { border-radius: 20px; } .webRoot.moduleDesign .customerManagement-accordion:not(.customerManagement-accordion--open) .customerManagement-accordionHeader { border-radius: 20px; } /* Street + PLZ/Ort were one 2-col pair — stack so street is full width, address line below. */ .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet-pair { flex-direction: column; align-items: stretch; gap: var(--checkout-field-row-gap); } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet-pair > div { flex: 1 1 100%; width: 100%; max-width: 100%; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet-pair .fieldSet { width: 100%; max-width: 100%; box-sizing: border-box; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet-pair .fieldSet .field, .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet-pair .fieldSet .field .extraLong, .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet-pair .fieldSet .field .extraLong input { width: 100% !important; max-width: 100% !important; box-sizing: border-box; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field .group { flex-direction: row; flex-wrap: nowrap; align-items: stretch; width: 100%; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field .fiveDigits { flex: 0 0 6.75rem; max-width: none; min-width: 5.25rem; } .webRoot.moduleDesign .customerManagement-card .webForm .fieldSet .field .short { flex: 1 1 0; min-width: 0; } /* Inline alerts only — cancel legacy fullscreen `.customerManagement .responseContainer` overlay. */ .webRoot.moduleDesign .customerManagement-root .column.left .responseContainer, .webRoot.moduleDesign .customerManagement-root .column.right .responseContainer, .webRoot.moduleDesign .customerManagement-root .column.left .responseContainer.visible, .webRoot.moduleDesign .customerManagement-root .column.right .responseContainer.visible { display: block !important; position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; margin: 16px 0 0 !important; padding: 0 !important; z-index: auto !important; float: none !important; text-align: left !important; background: transparent !important; } .webRoot.moduleDesign .customerManagement-root .responseContainer:not(.visible) { display: none !important; height: 0 !important; min-height: 0 !important; margin-top: 0 !important; overflow: hidden !important; } .webRoot.moduleDesign .customerManagement-root .responseContainer .responseHolder { display: block !important; width: 100% !important; height: auto !important; padding: 0 !important; vertical-align: top !important; background: transparent !important; } } .webRoot.moduleDesign .customerManagement-root > .customerManagement-card.contentArea.full { margin-bottom: 0; padding-top: 0; padding-bottom: 0; border-bottom: 0; } .webRoot.moduleDesign .customerManagement-accordionHeader { display: block; width: 100%; position: relative; z-index: 2; margin: 0; overflow: hidden; box-sizing: border-box; } .webRoot.moduleDesign .customerManagement-accordion:not(.customerManagement-accordion--open) .customerManagement-accordionHeader { border-radius: 24px; } /* Collapsed: full-card 30% wash (layered on card bg; corner orbs stay on ::before/::after). */ .webRoot.moduleDesign .customerManagement-card.customerManagement-accordion:not(.customerManagement-accordion--open):hover, .webRoot.moduleDesign .customerManagement-card.customerManagement-accordion:not(.customerManagement-accordion--open):focus-within { background-image: linear-gradient(var(--sv-account-hover-wash), var(--sv-account-hover-wash)), var(--sv-account-card-bg); } /* Open: wash only the header row (panel must not tint). */ .webRoot.moduleDesign .customerManagement-accordion--open > .customerManagement-accordionHeader::before { content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none; background-color: var(--sv-account-hover-wash); opacity: 0; transition: opacity 0.15s ease; } .webRoot.moduleDesign .customerManagement-accordion--open > .customerManagement-accordionHeader:hover::before, .webRoot.moduleDesign .customerManagement-accordion--open:focus-within > .customerManagement-accordionHeader::before { opacity: 1; } .webRoot.moduleDesign .customerManagement-accordionTrigger { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin: 0; padding: 16px var(--sv-account-pad-x); border: 0; border-radius: 0; position: relative; z-index: 1; background: transparent; color: var(--sv-header-text-color); font-family: inherit; text-align: left; cursor: pointer; } .webRoot.moduleDesign .customerManagement-accordionTrigger:hover { background: transparent; } .webRoot.moduleDesign .customerManagement-accordionTrigger:focus-visible { outline: 2px solid #e83331; outline-offset: -2px; } .webRoot.moduleDesign .customerManagement-accordion--open > .customerManagement-accordionHeader { border-bottom: 1px solid rgba(116, 106, 100, 0.14); } .webRoot.moduleDesign .customerManagement-accordion--open > .customerManagement-accordionHeader .customerManagement-accordionTrigger { background: transparent; border-bottom: 0; } .webRoot.moduleDesign .customerManagement-accordionTitleRow { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35em; min-width: 0; flex: 1 1 auto; } .webRoot.moduleDesign .customerManagement-accordionTitle h2 { margin: 0; font-size: clamp(1.12rem, 2.4vw, 1.45rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.22; color: var(--sv-header-text-color); } .webRoot.moduleDesign .customerManagement-accordionChevron { flex: 0 0 auto; width: 9px; height: 9px; margin-top: -3px; border-right: 2px solid #e83331; border-bottom: 2px solid #e83331; transform: rotate(45deg); transition: transform 0.2s ease, margin 0.2s ease; } .webRoot.moduleDesign .customerManagement-accordion--open .customerManagement-accordionChevron { margin-top: 2px; transform: rotate(-135deg); } /* Favourites auto-open: spinner only (no wash overlay) on card face until expand finishes. */ .webRoot.moduleDesign .customerManagement-accordion--favourites.customerManagement-accordion--pending-open { pointer-events: none; } .webRoot.moduleDesign .customerManagement-accordionHeader .customerManagement-accordionBusy { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; margin: 0; padding: 0; box-sizing: border-box; background: transparent; border: 0; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, visibility 0.22s ease; } .webRoot.moduleDesign .customerManagement-accordion--pending-open .customerManagement-accordionBusy:not([hidden]) { opacity: 1; visibility: visible; } .webRoot.moduleDesign .customerManagement-accordionBusy[hidden] { display: none !important; } .webRoot.moduleDesign .customerManagement-accordionBusy .sv-piepsi-spinner { position: absolute; top: 50%; left: 50%; margin: calc(var(--sv-piepsi-spinner-size) / -2) 0 0 calc(var(--sv-piepsi-spinner-size) / -2); } .webRoot.moduleDesign .customerManagement-accordionPanel { --sv-account-accordion-duration: 0.45s; display: block; position: relative; z-index: 1; margin: 0; max-height: 0; overflow: hidden; opacity: 1; padding: 0 var(--sv-account-pad-x); /* No opacity transition — it promotes a heavy compositor layer that can overdraw fixed * #sidebar chrome when the favourites embed scrolls beneath it (Brave/Chromium). */ transition: max-height var(--sv-account-accordion-duration) cubic-bezier(0.4, 0, 0.2, 1), padding var(--sv-account-accordion-duration) cubic-bezier(0.4, 0, 0.2, 1); } .webRoot.moduleDesign .customerManagement-accordionPanel[hidden] { display: none !important; max-height: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; transition: none !important; } .webRoot.moduleDesign .customerManagement-accordion--open .customerManagement-accordionPanel:not([hidden]) { max-height: min(4000px, var(--sv-account-accordion-max-h, 4000px)); padding-bottom: var(--sv-account-pad-y); } @media (prefers-reduced-motion: reduce) { .webRoot.moduleDesign .customerManagement-accordionPanel { transition: none; } } .webRoot.moduleDesign .customerManagement-accordionPanel > .infoText, .webRoot.moduleDesign .customerManagement-accordionPanel > .blockContainer { position: relative; z-index: 1; } .webRoot.moduleDesign .customerManagement-accordionPanel > .infoText { margin-top: 0; margin-bottom: 14px; padding-top: 4px; color: #4a403c; font-size: 14px; line-height: 1.55; } .webRoot.moduleDesign .customerManagement-accordionPanel > .blockContainer { display: block; width: 100%; margin-top: 0; } /* Favourites widget embedded in account accordion (no nested warm card). */ .webRoot.moduleDesign .customerManagement-accordionPanel > .customerManagement-favouritesEmbed { position: relative; z-index: 1; padding-top: 4px; } .webRoot.moduleDesign .customerManagement-accordion--favourites .releaseFavouritesWidget-card { padding: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: visible; } .webRoot.moduleDesign .customerManagement-accordion--favourites .releaseFavouritesWidget-card::before, .webRoot.moduleDesign .customerManagement-accordion--favourites .releaseFavouritesWidget-card::after { display: none; } .webRoot.moduleDesign .customerManagement-accordion--favourites .releaseFavouritesWidget-eyebrow, .webRoot.moduleDesign .customerManagement-accordion--favourites .releaseFavouritesWidget-titleBlock-head { display: none; } .webRoot.moduleDesign .customerManagement-accordion--favourites .releaseFavouritesWidget-titleBlock { margin-bottom: 10px; width: 100%; max-width: 100%; box-sizing: border-box; overflow: visible; } @media (min-width: 641px) { .webRoot.moduleDesign .customerManagement-accordion--favourites .releaseFavouritesWidget-titleBlock { padding-right: 100px; min-height: 46px; } .webRoot.moduleDesign .customerManagement-accordion--favourites .releaseFavouritesWidget-viewToggle { position: absolute; top: 0; right: 2px; max-width: min(92px, calc(100% - 8px)); } } @media (max-width: 800px) { .webRoot.moduleDesign .customerManagement-accordion--favourites .releaseFavouritesWidget-titleBlock { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding-right: 0; min-height: 0; } .webRoot.moduleDesign .customerManagement-accordion--favourites .releaseFavouritesWidget-viewToggle { position: relative; top: auto; right: auto; float: none; margin: 0; order: 2; flex: 0 0 auto; } .webRoot.moduleDesign .customerManagement-accordion--favourites .releaseFavouritesWidget-lead { order: 1; flex: 1 1 auto; min-width: 0; max-width: 100%; } } .webRoot.moduleDesign .customerManagement-accordion--favourites .releaseFavouritesWidget-release .subTitle { margin-top: 0; } .webRoot.moduleDesign .webForm input:not([type="checkbox"]):not([type="radio"]), .webRoot.moduleDesign .webForm textarea { max-width: 100% !important; box-sizing: border-box; } /* * Favourites page (/meine-favoriten/) — same full #main-content width as account. */ .webRoot.moduleDesign .customerFavourites-root { position: relative; isolation: isolate; width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding: 4px 2px 20px; box-sizing: border-box; } .webRoot.moduleDesign .customerFavourites-trial { position: relative; z-index: 1; box-sizing: border-box; padding: 22px 24px 24px; border-radius: var(--sv-widget-surface-radius, 24px); background: var(--sv-widget-surface-bg); box-shadow: var(--sv-widget-surface-shadow, 0 24px 55px rgba(80, 52, 38, 0.13)); font-family: "Open Sans", Arial, Helvetica, sans-serif; } .webRoot.moduleDesign .customerFavourites-trialHint { margin: 0; color: #3f3834; font-size: 15px; line-height: 1.5; } .webRoot.moduleDesign .customerFavourites-trialCtaWrap { margin: 16px 0 0; } .webRoot.moduleDesign .customerFavourites-trialCta { display: inline-flex; align-items: center; color: color-mix(in srgb, var(--sv-current-season-color, #e83331) 35%, #ca645d); font-weight: 700; text-decoration: none; } .webRoot.moduleDesign .customerFavourites-trialCta:hover { text-decoration: underline; } @media (max-width: 800px) { .webRoot.moduleDesign .customerFavourites-root { padding-left: 0; padding-right: 0; } } /* * Membership management (/abo-manager/) — stack + accordion cards + birds watermark. */ .webRoot.moduleDesign .subscriptionManagement-stack { --sv-membership-gap: 14px; --sv-membership-pad-x: 18px; --sv-membership-pad-y: 16px; position: relative; isolation: isolate; display: flex; flex-direction: column; gap: var(--sv-membership-gap); /* Full #main-content width — same as page hero .string / customerManagement-root */ width: 100%; max-width: none; margin-left: 0; margin-right: 0; padding: 4px 2px calc(var(--sv-membership-gap) + 4px); box-sizing: border-box; font-family: KoHo, "Open Sans", Arial, Helvetica, sans-serif; } .webRoot.moduleDesign .subscriptionManagement-stack::before { content: ""; position: absolute; z-index: 0; top: -12px; right: -4%; width: min(52%, 340px); height: min(42vw, 260px); background: transparent url("/imageAssetDirect/login-modal-birds.jpg") no-repeat right top; background-size: contain; opacity: 0.24; mix-blend-mode: multiply; pointer-events: none; } .webRoot.moduleDesign .subscriptionManagement-list { position: relative; z-index: 1; display: flex; flex-direction: column; gap: var(--sv-membership-gap); } .webRoot.moduleDesign .subscriptionManagement-list.subAccount .hideForSubaccount { display: none !important; } .webRoot.moduleDesign .subscriptionManagement-card { position: relative; z-index: 1; box-sizing: border-box; overflow: hidden; border-radius: 22px; border: var(--sv-widget-surface-border); background: var(--sv-widget-surface-highlight), linear-gradient(165deg, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, rgba(255, 255, 255, 0.98)) 0%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 8%, rgba(255, 255, 255, 0.96)) 48%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 12%, rgba(255, 255, 255, 0.94)) 100%); box-shadow: 0 16px 38px rgba(80, 52, 38, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.92); padding: 0; margin: 0 !important; } .webRoot.moduleDesign .subscriptionManagement-card::before { content: ""; position: absolute; z-index: 0; top: -56px; right: -44px; width: 176px; height: 176px; border-radius: 50%; background: color-mix(in srgb, var(--sv-current-season-color, #e83331) 9%, transparent); pointer-events: none; } .webRoot.moduleDesign .subscriptionManagement-card::after { content: ""; position: absolute; z-index: 0; right: 30px; bottom: 30px; width: 88px; height: 88px; border-radius: 50%; background: color-mix(in srgb, var(--sv-current-season-color, #e83331) 8%, transparent); pointer-events: none; } .webRoot.moduleDesign .subscriptionManagement-accordionHeader { position: relative; z-index: 2; margin: 0; } .webRoot.moduleDesign .subscriptionManagement-accordionTrigger { display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; width: 100%; margin: 0; padding: 15px var(--sv-membership-pad-x); border: 0; border-radius: 0; background: transparent; color: var(--sv-header-text-color); font-family: inherit; text-align: left; cursor: pointer; transition: background 0.15s ease; } .webRoot.moduleDesign .subscriptionManagement-accordionTrigger:hover { background: rgba(255, 255, 255, 0.45); } .webRoot.moduleDesign .subscriptionManagement-accordionTrigger:focus-visible { outline: 2px solid #e83331; outline-offset: -2px; } .webRoot.moduleDesign .subscriptionManagement-accordion--open > .subscriptionManagement-accordionHeader .subscriptionManagement-accordionTrigger { background: rgba(255, 255, 255, 0.5); border-bottom: 1px solid rgba(116, 106, 100, 0.14); } .webRoot.moduleDesign .subscriptionManagement-accordionTitleRow { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; flex: 1 1 auto; } .webRoot.moduleDesign .subscriptionManagement-accordion--info .subscriptionManagement-accordionTitleRow { flex-direction: row; align-items: center; } .webRoot.moduleDesign .subscriptionManagement-accordionTitle { font-size: clamp(1rem, 2vw, 1.22rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; color: var(--sv-header-text-color); } .webRoot.moduleDesign .subscriptionManagement-accordionTitle h2 { margin: 0; font: inherit; color: inherit; } .webRoot.moduleDesign .subscriptionManagement-accordionMeta { display: flex; flex-wrap: wrap; gap: 6px 8px; font-size: 12px; font-weight: 600; color: #746a64; } .webRoot.moduleDesign .subscriptionManagement-accordionMetaItem--status { color: #4f6030; background: color-mix(in srgb, var(--sv-current-season-color, #94bf36) 12%, rgba(255, 255, 255, 0.72)); border: 1px solid color-mix(in srgb, var(--sv-current-season-color, #94bf36) 16%, rgba(255, 255, 255, 0.74)); } .webRoot.moduleDesign .subscriptionManagement-accordionMetaItem--statusCancelled { color: #8a4b1f; background: rgba(255, 244, 230, 0.92); border: 1px solid rgba(232, 147, 49, 0.28); } .webRoot.moduleDesign .subscriptionManagement-accordionMetaItem { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: 999px; line-height: 1.2; } .webRoot.moduleDesign .subscriptionManagement-accordionMetaItem--price { color: #6d625b; background: rgba(255, 255, 255, 0.56); border: 1px solid rgba(255, 255, 255, 0.7); } .webRoot.moduleDesign .subscriptionManagement-accordionChevron { flex: 0 0 auto; width: 9px; height: 9px; margin-top: -3px; border-right: 2px solid #e83331; border-bottom: 2px solid #e83331; transform: rotate(45deg); transition: transform 0.2s ease, margin 0.2s ease; } .webRoot.moduleDesign .subscriptionManagement-accordion--open .subscriptionManagement-accordionChevron { margin-top: 2px; transform: rotate(-135deg); } .webRoot.moduleDesign .subscriptionManagement-accordionPanel { display: none; position: relative; z-index: 1; margin: 0; padding: 0 var(--sv-membership-pad-x) var(--sv-membership-pad-y); } .webRoot.moduleDesign .subscriptionManagement-accordionPanel[hidden] { display: none !important; } .webRoot.moduleDesign .subscriptionManagement-accordion--open .subscriptionManagement-accordionPanel { display: block; } .webRoot.moduleDesign .subscriptionManagement-entry > .subscriptionManagement-accordionPanel { padding-top: var(--sv-membership-gap); } .webRoot.moduleDesign .subscriptionManagement-infoText { margin: 0; padding-top: 4px; color: #4a403c; font-size: 14px; line-height: 1.55; background: transparent !important; } .webRoot.moduleDesign .subscriptionManagement-entryFacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 18px; margin: 0 0 12px; padding: 14px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(255, 255, 255, 0.76); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78); } .webRoot.moduleDesign .subscriptionManagement-entryFacts-col { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: 8px 12px; min-width: 0; } .webRoot.moduleDesign .subscriptionManagement-entryFacts-row { display: contents; } .webRoot.moduleDesign .subscriptionManagement-entryFeedback { margin: 0 0 12px; } .webRoot.moduleDesign .subscriptionManagement-entryFeedback:empty { display: none; margin: 0; } .webRoot.moduleDesign .subscriptionManagement-entryFacts-label { font-size: 12px; font-weight: 600; color: #746a64; } .webRoot.moduleDesign .subscriptionManagement-entryFacts-value { font-size: 13px; font-weight: 600; color: var(--sv-header-text-color); } .webRoot.moduleDesign .subscriptionManagement-entryFacts-value a.loadSubscriptionDetail { color: #e83331; text-decoration: none; } .webRoot.moduleDesign .subscriptionManagement-entryFacts-value a.loadSubscriptionDetail:hover { color: #d82321; text-decoration: underline; } .webRoot.moduleDesign .subscriptionManagement-entryDetailsInline { margin-bottom: 12px; font-size: 14px; line-height: 1.5; color: #4a403c; } .webRoot.moduleDesign .subscriptionManagement-entryActions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 9px 0 10px; padding: 0 2px; } .webRoot.moduleDesign .subscriptionManagement-actionButtons { display: flex; flex-wrap: wrap; gap: 8px; } .webRoot.moduleDesign .subscriptionManagement-actionButton { min-height: 34px; padding: var(--sv-btn-compact-padding-y) var(--sv-btn-compact-padding-x); border-radius: var(--sv-btn-radius-compact); font-family: inherit; font-size: var(--sv-btn-compact-font-size); font-weight: 600; line-height: var(--sv-btn-compact-line-height); white-space: nowrap; cursor: pointer; opacity: var(--sv-btn-pill-opacity); transition: background-color var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), border-color var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), box-shadow var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), transform var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), color var(--sv-btn-motion-duration) var(--sv-btn-motion-ease); } .webRoot.moduleDesign .subscriptionManagement-actionButton--primary { color: var(--sv-btn-primary-fg); border: 1px solid var(--sv-btn-primary-border); background: var(--sv-btn-primary-bg); box-shadow: var(--sv-btn-primary-shadow); } .webRoot.moduleDesign .subscriptionManagement-actionButton--primary:hover { color: var(--sv-btn-primary-fg); border-color: var(--sv-btn-primary-bg-hover); background: var(--sv-btn-primary-bg-hover); box-shadow: var(--sv-btn-primary-shadow-hover); transform: translateY(var(--sv-btn-hover-lift-y)); } .webRoot.moduleDesign .subscriptionManagement-actionButton--secondary { color: var(--sv-header-text-color); border: 1px solid var(--sv-btn-ghost-ring-hover); background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--sv-btn-ghost-ring), 0 1px 3px rgba(0, 0, 0, 0.08); } .webRoot.moduleDesign .subscriptionManagement-actionButton--secondary:hover { color: #e83331; border-color: rgba(232, 51, 49, 0.42); background: #fffdf1; box-shadow: inset 0 0 0 1px var(--sv-btn-ghost-ring-hover), var(--sv-btn-primary-shadow-hover); transform: translateY(var(--sv-btn-hover-lift-y)); } .webRoot.moduleDesign .subscriptionManagement-actionButton:active { transform: translateY(0); box-shadow: var(--sv-btn-primary-shadow); } .webRoot.moduleDesign .subscriptionManagement-actionButton:focus-visible { outline: 2px solid #e83331; outline-offset: 2px; } .webRoot.moduleDesign .subscriptionManagement-entry.subscriptionManagement-entry.open { border-color: rgba(232, 51, 49, 0.22); } .webRoot.moduleDesign .subscriptionDetails-outerWrapper { display: none; margin-top: 8px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.62); border: 1px solid rgba(80, 52, 38, 0.08); } .webRoot.moduleDesign .subscriptionDetails-outerWrapper.open { display: block; } .webRoot.moduleDesign .subscriptionManagement-alert { padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(148, 191, 54, 0.35); background: linear-gradient(145deg, rgba(244, 252, 236, 0.98) 0%, rgba(255, 252, 235, 0.95) 100%); color: #3a4534; font-size: 14px; line-height: 1.5; font-weight: 600; } .webRoot.moduleDesign .subscriptionManagement-alert--cancelled { margin: 0 0 12px; border-color: rgba(232, 147, 49, 0.38); background: linear-gradient(145deg, rgba(255, 248, 236, 0.98) 0%, rgba(255, 252, 245, 0.95) 100%); color: #6d4a28; } .webRoot.moduleDesign .subscriptionManagement-list .emptyList { padding: 16px 18px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.82); background: linear-gradient(165deg, color-mix(in srgb, var(--sv-current-season-color, #e83331) 4%, rgba(255, 255, 255, 0.98)) 0%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 8%, rgba(255, 255, 255, 0.96)) 48%, color-mix(in srgb, var(--sv-current-season-color, #e83331) 12%, rgba(255, 255, 255, 0.94)) 100%); box-shadow: 0 16px 40px rgba(80, 52, 38, 0.1); color: #4a403c; font-size: 14px; line-height: 1.55; } /* Hide legacy table layout if cached HTML still renders it */ .webRoot.moduleDesign .subscriptionManagement-stack table.subscriptionList { display: none !important; } .webRoot.moduleDesign .subscriptionManagement-entryGroup { display: flex; flex-direction: column; gap: var(--sv-membership-gap); position: relative; z-index: 1; } .webRoot.moduleDesign .subscriptionManagement-invoicesCard { overflow: hidden; } .webRoot.moduleDesign .subscriptionManagement-invoicesCard .subscriptionManagement-accordionTitleRow { flex-direction: row; align-items: center; } .webRoot.moduleDesign .subscriptionManagement-invoicesCard .subscriptionManagement-accordionPanel { padding-top: var(--sv-membership-gap); } .webRoot.moduleDesign .subscriptionManagement-invoicesList { margin: 0; padding: 0; list-style: none; } .webRoot.moduleDesign .subscriptionManagement-invoiceLink { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: #e83331; text-decoration: none; } .webRoot.moduleDesign .subscriptionManagement-invoiceLink:hover { color: #d82321; } .webRoot.moduleDesign .subscriptionManagement-invoiceLink:hover .subscriptionManagement-invoiceLink-text { text-decoration: underline; } .webRoot.moduleDesign .subscriptionManagement-invoiceLink-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(145deg, #f04a48 0%, #e83331 55%, #d82321 100%); box-shadow: 0 2px 8px rgba(232, 51, 49, 0.28); position: relative; } .webRoot.moduleDesign .subscriptionManagement-invoiceLink-icon::before { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: no-repeat center / contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.1' stroke-linejoin='round'%3E%3Cpath d='M7 8V4h10v4'/%3E%3Crect x='6' y='8' width='12' height='10' rx='1.5'/%3E%3Cpath d='M9 14h6' stroke-linecap='round'/%3E%3C/svg%3E"); } .webRoot.moduleDesign .subscriptionManagement-invoiceLink-icon::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 11px; height: 11px; background: no-repeat center / contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v10'/%3E%3Cpath d='M8.5 11.5 12 15l3.5-3.5'/%3E%3Cpath d='M5 19h14'/%3E%3C/svg%3E"); } .webRoot.moduleDesign .subscriptionManagement-invoiceLink-text { line-height: 1.35; } .webRoot.moduleDesign .subscriptionManagement-invoices { margin-top: 16px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.55); border: 1px solid rgba(255, 255, 255, 0.76); } .webRoot.moduleDesign .subscriptionManagement-invoicesTitle { margin: 0 0 10px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--sv-header-text-color); } .webRoot.moduleDesign .subscriptionManagement-invoiceRow { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(116, 106, 100, 0.12); font-size: 14px; } .webRoot.moduleDesign .subscriptionManagement-invoiceRow:last-child { border-bottom: none; padding-bottom: 0; } .webRoot.moduleDesign .subscriptionManagement-invoiceDate { font-weight: 600; color: #746a64; } .webRoot.moduleDesign .subscriptionManagement-invoiceNumber { font-weight: 700; color: var(--sv-header-text-color); } /* Cancellation modal — match login / search / newsletter warm card */ #modalOverlay.visible.sv-membership-cancel-overlay { opacity: 1 !important; background: rgba(52, 44, 40, 0.48) !important; } #modalContentBox.visible:has(.sv-membership-cancel-modal-inner), #modalContentBox.visible .sv-membership-cancel-modal-inner { font-family: KoHo, "Open Sans", Arial, Helvetica, sans-serif; } #modalContentBox.visible:has(.sv-membership-cancel-modal-inner) { top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; width: min(92vw, 440px) !important; max-width: 440px; height: auto !important; max-height: min(88dvh, calc(100dvh - 48px)) !important; margin: 0 !important; padding: 0 !important; transform: translate(-50%, -50%) !important; border-radius: 24px; overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; border: var(--sv-widget-surface-border); background: var(--sv-widget-surface-highlight), var(--sv-widget-surface-bg); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.82), var(--sv-widget-surface-shadow); isolation: isolate; } #modalContentBox.visible:has(.sv-membership-cancel-modal-inner)::before { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: transparent url("/imageAssetDirect/login-modal-birds.jpg") no-repeat right 8px top 18px; background-size: auto min(72%, 260px); opacity: 0.18; mix-blend-mode: multiply; pointer-events: none; } #modalContentBox.visible:has(.sv-membership-cancel-modal-inner)::after { content: ""; position: absolute; z-index: 0; inset: 0; border-radius: inherit; background: radial-gradient(circle at calc(100% + 18px) -34px, color-mix(in srgb, var(--sv-current-season-color, #e83331) 14%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 14%, transparent) 128px, transparent 129px), radial-gradient(circle at calc(100% - 76px) calc(100% - 70px), color-mix(in srgb, var(--sv-current-season-color, #e83331) 9%, transparent) 0, color-mix(in srgb, var(--sv-current-season-color, #e83331) 9%, transparent) 54px, transparent 55px); filter: blur(0.2px); opacity: 0.95; pointer-events: none; } #modalContentBox .sv-membership-cancel-modal-inner { position: relative; z-index: 1; margin: 0; padding: 0; background: transparent; } #modalContentBox .sv-membership-cancel-modal-inner > .title, #modalContentBox .sv-membership-cancel-modal-inner > .content { display: none !important; } #modalContentBox .sv-membership-cancel-close { position: absolute; z-index: 4; top: 13px; right: 14px; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.72); color: #e83331; font-size: 27px; line-height: 30px; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(232, 51, 49, 0.16); } #modalContentBox .sv-membership-cancel-modalBody { position: relative; z-index: 1; padding: 24px 20px 22px; color: var(--sv-header-text-color); } #modalContentBox .sv-membership-cancel-kicker { display: inline-block; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background-color: var(--sv-current-season-color, #e83331); color: #fff; font-size: 13px; line-height: 18px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 1px 5px rgba(52, 44, 40, 0.12); } #modalContentBox .sv-membership-cancel-kicker .string-content, #modalContentBox .sv-membership-cancel-title .string-content, #modalContentBox .sv-membership-cancel-text .string-content, #modalContentBox .sv-membership-cancel-buttons .string-content { display: contents; } #modalContentBox .sv-membership-cancel-title { margin: 0 36px 12px 0; padding: 0; background: transparent !important; color: var(--sv-header-text-color) !important; font-size: clamp(1.35rem, 4vw, 28px); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; } #modalContentBox .sv-membership-cancel-text { margin: 0; color: #4a403c; font-size: 15px; line-height: 1.55; font-weight: 500; } #modalContentBox .sv-membership-cancel-buttons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px; width: 100%; margin: 36px 0 0; padding: 0; position: static; min-height: 0; } #modalContentBox .sv-membership-cancel-buttons .button { position: static !important; display: inline-flex; align-items: center; justify-content: center; min-height: var(--sv-btn-modal-min-height); padding: var(--sv-btn-modal-padding-y) var(--sv-btn-modal-padding-x); border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none !important; box-sizing: border-box; float: none !important; } #modalContentBox .sv-membership-cancel-buttons .button.cancel { background: #e83331; color: #fff !important; box-shadow: 0 4px 14px rgba(232, 51, 49, 0.35); } #modalContentBox .sv-membership-cancel-buttons .button.cancel:hover { background: #d82321; color: #fff !important; } #modalContentBox .sv-membership-cancel-buttons .button.proceed { background: rgba(255, 255, 255, 0.92); color: #5c5248 !important; box-shadow: inset 0 0 0 1px rgba(80, 52, 38, 0.18); } #modalContentBox .sv-membership-cancel-buttons .button.proceed:hover { background: #fff; color: var(--sv-header-text-color) !important; } @media (max-width: 800px) { .webRoot.moduleDesign .subscriptionManagement-stack { padding-left: 0; padding-right: 0; } .webRoot.moduleDesign .subscriptionManagement-entryFacts { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px 14px; } .webRoot.moduleDesign .subscriptionManagement-entryFacts-col { grid-template-columns: minmax(7rem, 42%) 1fr; } .webRoot.moduleDesign .subscriptionManagement-accordionTrigger { padding: 14px 16px; } .webRoot.moduleDesign .subscriptionManagement-accordionPanel { padding: 0 16px 18px; } .webRoot.moduleDesign .subscriptionManagement-entryActions { align-items: stretch; flex-direction: row; width: 100%; } .webRoot.moduleDesign .subscriptionManagement-actionButtons { display: flex; flex-wrap: nowrap; align-items: stretch; width: 100%; gap: 8px; } .webRoot.moduleDesign .subscriptionManagement-actionButton { flex: 1 1 0; min-width: 0; width: auto; max-width: none; box-sizing: border-box; white-space: normal; text-align: center; padding-left: 10px; padding-right: 10px; font-size: 13px; line-height: 1.25; } #modalContentBox.visible:has(.sv-membership-cancel-modal-inner) { top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; width: min(94vw, 440px) !important; max-width: 440px; height: auto !important; max-height: min(86dvh, calc(100dvh - max(24px, env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px) + 32px))) !important; transform: translate(-50%, -50%) !important; } #modalContentBox .sv-membership-cancel-modalBody { padding: 20px 16px 18px; } #modalContentBox .sv-membership-cancel-text { margin-bottom: 0; } #modalContentBox .sv-membership-cancel-buttons { margin-top: 32px; flex-direction: row; flex-wrap: wrap; justify-content: center; } } /* === sv-buttons waves 3–4 (moduleDesign) — site pills @ 0.9; no RV nav / fav widget === */ /* Wave 3 — subscription CTAs */ .webRoot.moduleDesign .subscriptionPicker .subscription .purchaseButton .button, .webRoot.moduleDesign .subscriptionPicker .subscription .purchaseButton .button.sv-subscription-cta, .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .purchaseButton .button, .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .purchaseButton .button.sv-subscription-cta { opacity: var(--sv-btn-pill-opacity); background: var(--sv-btn-emphasis-gradient-bg) !important; box-shadow: var(--sv-btn-emphasis-gradient-shadow) !important; transition: background var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), box-shadow var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), transform var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), opacity var(--sv-btn-motion-duration) var(--sv-btn-motion-ease); } .webRoot.moduleDesign .subscriptionPicker .subscription .purchaseButton .button:hover, .webRoot.moduleDesign .subscriptionPicker .subscription .purchaseButton .button.sv-subscription-cta:hover, .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .purchaseButton .button:hover, .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription .purchaseButton .button.sv-subscription-cta:hover { background: var(--sv-btn-emphasis-gradient-bg-hover) !important; box-shadow: var(--sv-btn-emphasis-gradient-shadow-hover) !important; transform: translateY(var(--sv-btn-hover-lift-y)); } /* Trial card green CTA — keep green gradient, add pill opacity only */ .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription.sv-subscription-card--2 .purchaseButton .button, .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription.sv-subscription-card--2 .purchaseButton .button.sv-subscription-cta { opacity: var(--sv-btn-pill-opacity); background: linear-gradient(145deg, #8fbf24 0%, #6fa118 58%, #5a8410 100%) !important; box-shadow: 0 8px 18px rgba(111, 161, 24, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.22) !important; } .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription.sv-subscription-card--2 .purchaseButton .button:hover, .webRoot.moduleDesign.pageKey-abo .subscriptionPicker .subscription.sv-subscription-card--2 .purchaseButton .button.sv-subscription-cta:hover { background: linear-gradient(145deg, #82ad20 0%, #639015 58%, #4f7310 100%) !important; box-shadow: 0 10px 22px rgba(111, 161, 24, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important; } /* Wave 3 — checkout / account primary pills */ .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .shopButton a.button, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm .shopButton.submit a.button, .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper .shopButton.finalize a.button, .webRoot.moduleDesign .customerManagement-card .shopButton.finalize a.button { opacity: var(--sv-btn-pill-opacity); background: var(--sv-btn-primary-bg); box-shadow: var(--sv-btn-primary-shadow-emphasis); transition: background-color var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), box-shadow var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), transform var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), color var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), opacity var(--sv-btn-motion-duration) var(--sv-btn-motion-ease); } .webRoot.moduleDesign .checkout#checkoutModule .cart.full .voucherEntry-container .voucherEntry .shopButton a.button:hover, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .loginForm .shopButton.submit a.button:hover, .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper .shopButton.finalize a.button:hover, .webRoot.moduleDesign .customerManagement-card .shopButton.finalize a.button:hover { background: var(--sv-btn-primary-bg-hover); box-shadow: var(--sv-btn-primary-shadow-emphasis-hover); transform: translateY(var(--sv-btn-hover-lift-y)); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-final .finalizeWrapper .shopButton.finalize a.button:active, .webRoot.moduleDesign .customerManagement-card .shopButton.finalize a.button:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); } /* Wave 3 — Stripe shop */ .webRoot.moduleDesign .stripeShop-btn { opacity: var(--sv-btn-pill-opacity); border-radius: var(--sv-btn-radius-pill); background: var(--sv-btn-neutral-dark-bg); font-weight: 700; transition: background-color var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), box-shadow var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), transform var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), opacity var(--sv-btn-motion-duration) var(--sv-btn-motion-ease); } .webRoot.moduleDesign .stripeShop-btn:hover { background: var(--sv-btn-primary-bg); transform: translateY(var(--sv-btn-hover-lift-y)); box-shadow: var(--sv-btn-primary-shadow-emphasis-hover); } /* Wave 3 — SelectBoxIt triggers (checkout, account) */ .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .selectboxit-container .selectboxit, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .selectboxit-btn, .webRoot.moduleDesign .customerManagement-card .selectboxit-container .selectboxit, .webRoot.moduleDesign .customerManagement-card .selectboxit-btn { transition: border-color var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), box-shadow var(--sv-btn-motion-duration) var(--sv-btn-motion-ease); } .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .selectboxit-container .selectboxit:hover, .webRoot.moduleDesign .checkout#checkoutModule .checkout-customerData .selectboxit-btn:hover, .webRoot.moduleDesign .customerManagement-card .selectboxit-container .selectboxit:hover, .webRoot.moduleDesign .customerManagement-card .selectboxit-btn:hover { border-color: var(--sv-btn-ghost-ring-hover) !important; box-shadow: 0 0 0 3px var(--sv-btn-ghost-ring), inset 0 1px 2px rgba(0, 0, 0, 0.04) !important; } /* Wave 4 — membership CTA (paywall teaser pills only) */ .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer.sv-publicMediaTeaserCard .mediaDescription.public a.button.sv-membership-cta, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard .teaserButton a.button.sv-membership-cta, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard .teaserButton a.button.sv-membership-cta, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container:has(> .teaserButton) .teaserButton a.button.sv-membership-cta, .webRoot.moduleDesign .releaseView-container .release a.button.small.sv-membership-cta { opacity: var(--sv-btn-pill-opacity); background: var(--sv-btn-emphasis-gradient-bg) !important; box-shadow: var(--sv-btn-emphasis-gradient-shadow) !important; transition: background var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), box-shadow var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), transform var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), opacity var(--sv-btn-motion-duration) var(--sv-btn-motion-ease); } .webRoot.moduleDesign .releaseView-container .release .content .mediaContainer .mediaDescriptionContainer.sv-publicMediaTeaserCard .mediaDescription.public a.button.sv-membership-cta:hover, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container.sv-publicChordTeaserCard .teaserButton a.button.sv-membership-cta:hover, .webRoot.moduleDesign .releaseView-container .release .subContainer .chordViewer-container.sv-publicChordTeaserCard .teaserButton a.button.sv-membership-cta:hover, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container:has(> .teaserButton) .teaserButton a.button.sv-membership-cta:hover, .webRoot.moduleDesign .releaseView-container .release a.button.small.sv-membership-cta:hover { background: var(--sv-btn-emphasis-gradient-bg-hover) !important; box-shadow: var(--sv-btn-emphasis-gradient-shadow-hover) !important; transform: translateY(var(--sv-btn-hover-lift-y)); } /* Wave 4 — icon toggles (release detail + topic head; not .releaseFavouritesWidget) */ .webRoot.moduleDesign .releaseView-container .release .releaseFavourite-btn--inHead, .webRoot.moduleDesign .releaseViewer.topic .topicHeadFavourite .releaseFavourite-btn--inHead { transition: color var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), transform var(--sv-btn-motion-duration) var(--sv-btn-motion-ease); } .webRoot.moduleDesign .releaseView-container .release .releaseFavourite-btn--inHead:hover, .webRoot.moduleDesign .releaseViewer.topic .topicHeadFavourite .releaseFavourite-btn--inHead:hover { transform: translateY(var(--sv-btn-hover-lift-y)); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.printTrigger, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordDownload { box-shadow: var(--sv-btn-icon-toggle-shadow); transition: transform var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), box-shadow var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), border-color var(--sv-btn-motion-duration) var(--sv-btn-motion-ease), background var(--sv-btn-motion-duration) var(--sv-btn-motion-ease); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler:hover, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.printTrigger:hover, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordDownload:hover { transform: translateY(var(--sv-btn-hover-lift-y)); box-shadow: var(--sv-btn-icon-toggle-shadow-hover); } .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordToggler:active, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.printTrigger:active, .webRoot.moduleDesign .releaseView-container .release .content .chordViewer-container > .title a.chordDownload:active { transform: translateY(0); box-shadow: var(--sv-btn-icon-toggle-shadow); } /* Voucher-Kampagne WebNode (Herbst-Design ready; Frühling/Sommer/Winter pending). */ .webRoot.moduleDesign .sv-voucher-campaign { --sv-promo-red: #e83331; --sv-promo-rust: #913702; --sv-promo-gold: #d89a2b; isolation: isolate; position: relative; display: grid; grid-template-columns: minmax(215px, 0.82fr) minmax(250px, 1.05fr) minmax(310px, 1.2fr); align-items: center; min-height: 220px; padding: 22px 28px; box-sizing: border-box; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.72); border-radius: var(--sv-widget-surface-radius, 24px); background: radial-gradient(circle at 90% -35%, color-mix(in srgb, var(--sv-current-season-color, #913702) 16%, transparent) 0 165px, transparent 166px), radial-gradient(circle at 67% 125%, rgba(232, 51, 49, 0.07) 0 105px, transparent 106px), linear-gradient(145deg, rgba(255, 255, 255, 0.94), rgba(253, 241, 232, 0.9)); box-shadow: var(--sv-widget-surface-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.84); color: #342c28; } .webRoot.moduleDesign .sv-voucher-campaign::after { content: "♪"; position: absolute; top: 12px; right: 23%; z-index: -1; color: rgba(145, 55, 2, 0.14); font-size: 42px; line-height: 1; transform: rotate(10deg); } .sv-voucher-campaign-badge { position: absolute; top: 8px; right: 10px; z-index: 4; display: block; width: 92px; height: 92px; box-sizing: border-box; cursor: pointer; filter: drop-shadow(0 8px 11px rgba(193, 39, 34, 0.38)); transform: rotate(12deg); animation: svVoucherBadgeWobble 3.4s ease-in-out infinite; } .webRoot.moduleDesign .sv-voucher-campaign a.sv-voucher-campaign-badge, .webRoot.moduleDesign .sv-voucher-campaign a.sv-voucher-campaign-badge:hover, .webRoot.moduleDesign .sv-voucher-campaign a.sv-voucher-campaign-badge:focus { color: #fffef6 !important; text-decoration: none !important; } .sv-voucher-campaign-badge:hover, .sv-voucher-campaign-badge:focus-visible { animation: none; filter: drop-shadow(0 10px 14px rgba(193, 39, 34, 0.48)); transform: rotate(12deg) scale(1.07); } .sv-voucher-campaign-badge:focus-visible { outline: 2px solid rgba(216, 154, 43, 0.95); outline-offset: 3px; } .sv-voucher-campaign-badge-seal { position: relative; display: grid; width: 100%; height: 100%; place-items: center; box-sizing: border-box; background: linear-gradient(155deg, #ef4d42 0%, #e83331 48%, #c12722 100%); clip-path: polygon(50% 0%, 60% 13%, 75% 7%, 79% 23%, 96% 23%, 89% 39%, 100% 50%, 87% 60%, 94% 76%, 77% 78%, 74% 95%, 59% 87%, 50% 100%, 40% 87%, 25% 94%, 22% 77%, 5% 74%, 13% 59%, 0% 49%, 13% 39%, 6% 23%, 23% 21%, 26% 5%, 41% 13%); color: #fffef6; } .sv-voucher-campaign-badge-seal::before { content: ""; position: absolute; inset: 9px; border: 1.5px dashed rgba(255, 214, 106, 1); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(216, 154, 43, 0.45); } .sv-voucher-campaign-badge-seal > span { position: relative; z-index: 1; font-size: 13px; font-weight: 900; letter-spacing: 0.045em; line-height: 1; text-transform: uppercase; white-space: nowrap; text-shadow: 0 1px 0 rgba(120, 20, 16, 0.38); } @keyframes svVoucherBadgeWobble { 0%, 100% { transform: rotate(12deg) scale(1); } 45% { transform: rotate(7deg) scale(1.04); } 70% { transform: rotate(14deg) scale(1.02); } } .sv-voucher-campaign-art { position: relative; grid-column: 1; grid-row: 1; align-self: stretch; min-width: 205px; } .sv-voucher-campaign-art::before { content: ""; position: absolute; top: -18px; left: -28px; z-index: 0; width: 215px; height: 168px; border-radius: 42% 58% 52% 48% / 55% 42% 58% 45%; background: radial-gradient(circle at 38% 32%, rgba(232, 51, 49, 0.16), rgba(232, 51, 49, 0.07) 42%, transparent 68%), radial-gradient(circle at 70% 78%, rgba(216, 154, 43, 0.14), transparent 58%); transform: rotate(-7deg); } .sv-voucher-campaign-discount { position: absolute; top: 38%; left: 3px; z-index: 2; display: block; width: 205px; height: 112px; color: #71371e; line-height: 1; text-align: left; text-decoration: none; transform: translateY(-56%) rotate(-3deg); transition: transform 0.18s ease; } .webRoot.moduleDesign .sv-voucher-campaign a.sv-voucher-campaign-discount, .webRoot.moduleDesign .sv-voucher-campaign a.sv-voucher-campaign-discount:hover, .webRoot.moduleDesign .sv-voucher-campaign a.sv-voucher-campaign-discount:focus { text-decoration: none !important; } .sv-voucher-campaign-discount:hover { transform: translateY(-56%) rotate(-3deg) scale(1.025); } .sv-voucher-campaign-discount strong { display: block; color: #e0473d; font-size: 70px; font-weight: 600; line-height: 0.9; letter-spacing: -0.08em; white-space: nowrap; text-shadow: 0 0 7px rgba(255, 255, 255, 0.98), 0 0 18px rgba(232, 71, 61, 0.34), 0 9px 22px rgba(224, 71, 61, 0.16); } .sv-voucher-campaign-discount span { position: absolute; top: 67px; left: 55px; display: block; color: #4f3329; font-size: 20px; font-weight: 800; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; white-space: nowrap; text-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 14px rgba(217, 154, 49, 0.42), 0 2px 0 rgba(255, 255, 255, 0.9); transform: rotate(1deg); } .sv-voucher-campaign-discount .sv-voucher-campaign-discountLabel { /* keep absolute placement from parent span rule */ } .sv-voucher-campaign-leaves { position: absolute; top: 100px; left: 25px; bottom: auto; z-index: 1; width: 160px; height: auto; opacity: 0.72; transform: rotate(-5deg); } .sv-voucher-campaign-stem { fill: none; stroke: #9c6b43; stroke-linecap: round; stroke-width: 3; } .sv-voucher-campaign-leaf--red { fill: #df5540; } .sv-voucher-campaign-leaf--gold { fill: #d99b31; } .sv-voucher-campaign-leaf--rust { fill: #a74a22; } .sv-voucher-campaign-acorn { fill: #9a592c; } .sv-voucher-campaign-acorn-cap { fill: #68452f; } .sv-voucher-campaign-offer { position: relative; z-index: 1; grid-column: 2; grid-row: 1; align-self: center; padding: 0 26px 48px 20px; border-right: 1px dashed rgba(145, 55, 2, 0.2); } .sv-voucher-campaign-balloons { position: absolute; top: -18px; right: 8px; z-index: -1; width: 112px; height: auto; opacity: 0.14; transform: rotate(7deg); } .sv-voucher-campaign-balloon { stroke: rgba(255, 255, 255, 0.72); stroke-width: 2; } .sv-voucher-campaign-balloon--red { fill: #e83331; } .sv-voucher-campaign-balloon--gold { fill: #d89a2b; } .sv-voucher-campaign-balloon--green { fill: #2c7b70; } .sv-voucher-campaign-balloon-string { fill: none; stroke: #913702; stroke-linecap: round; stroke-width: 1.5; } .sv-voucher-campaign-celebrate { margin: 0 0 5px; color: #2c7b70; font-size: 13px; font-weight: 700; letter-spacing: 0.14em; line-height: 1; text-transform: uppercase; } .sv-voucher-campaign-offer h2 { margin: 0; line-height: 0.9; text-transform: uppercase; } .sv-voucher-campaign-offer h2 strong { display: block; color: var(--sv-promo-red); font-size: clamp(52px, 5.2vw, 76px); font-weight: 600; letter-spacing: -0.05em; text-shadow: 0 6px 18px rgba(232, 51, 49, 0.12); } .sv-voucher-campaign-offer h2 span { display: block; margin-top: 7px; color: #342c28; font-size: 28px; font-weight: 700; letter-spacing: 0.04em; } .sv-voucher-campaign-countdown { position: relative; z-index: 2; grid-column: 2; grid-row: 1; align-self: end; min-width: 0; margin: 0 26px 0 20px; padding: 9px 11px 8px; box-sizing: border-box; border: 1px solid rgba(232, 51, 49, 0.15); border-radius: 14px; background: rgba(255, 255, 255, 0.68); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.86); } .sv-voucher-campaign-countdown-copy { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; color: #674238; font-size: 11px; font-weight: 600; line-height: 1.15; } .sv-voucher-campaign-countdown-copy strong { color: #e83331; font-size: 17px; line-height: 0; } .sv-voucher-campaign-countdown-copy b { color: #913702; font-size: 12px; letter-spacing: 0.05em; } .sv-voucher-campaign-codeLabel::after, .sv-voucher-campaign-expiryPrefix::after { content: '\00a0'; } .sv-voucher-campaign-countdown:not(.sv-voucher-campaign-countdown--limited) .sv-voucher-campaign-countdown-status, .sv-voucher-campaign-countdown:not(.sv-voucher-campaign-countdown--limited) .sv-voucher-campaign-countdown-track { display: none; } .sv-voucher-campaign-countdown-track { display: block; height: 5px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: rgba(145, 55, 2, 0.1); } .sv-voucher-campaign-countdown-track > span { display: block; height: 100%; min-width: 3px; border-radius: inherit; background: linear-gradient(90deg, #d89a2b, #e83331); } .sv-voucher-campaign-details { position: relative; z-index: 1; grid-column: 3; grid-row: 1; display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 10px; padding: 10px 72px 10px 28px; min-width: 0; box-sizing: border-box; } .sv-voucher-campaign-details p { grid-row: 2; margin: 0; color: #342c28; font-size: 18px; font-weight: 600; line-height: 1.25; } .sv-voucher-campaign-details p strong { color: #913702; font-weight: 700; } .sv-voucher-campaign-details time { grid-row: 1; justify-self: start; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 8px 16px; box-sizing: border-box; border: 1px dashed #e83331; border-radius: 14px; background: linear-gradient(105deg, rgba(255, 222, 117, 0.72), rgba(255, 238, 185, 0.4)); color: #d9292d; font-size: 13px; font-weight: 800; letter-spacing: 0.045em; text-transform: uppercase; white-space: nowrap; width: max-content; max-width: 100%; flex-shrink: 0; transform: rotate(-1deg); } .sv-voucher-campaign-details time::before { content: none; } .webRoot.moduleDesign .sv-voucher-campaign a.button.sv-voucher-campaign-cta { grid-row: 3; display: inline-flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-width: 0; min-height: 42px; margin: 0; padding: 11px 17px; box-sizing: border-box; border: 0; border-radius: var(--sv-btn-radius-pill, 999px); background: var(--sv-btn-emphasis-gradient-bg, linear-gradient(145deg, #ef4d42, #d52f2d)); box-shadow: var(--sv-btn-emphasis-gradient-shadow, 0 8px 18px rgba(232, 51, 49, 0.24)); color: #fff !important; font-size: 14px; font-weight: 700; line-height: 1.15; opacity: var(--sv-btn-pill-opacity, 0.9); white-space: normal; transition: transform var(--sv-btn-motion-duration, 0.18s) var(--sv-btn-motion-ease, ease), box-shadow var(--sv-btn-motion-duration, 0.18s) var(--sv-btn-motion-ease, ease); } .webRoot.moduleDesign .sv-voucher-campaign a.button.sv-voucher-campaign-cta:hover { background: var(--sv-btn-emphasis-gradient-bg-hover, linear-gradient(145deg, #f35a50, #c92725)); box-shadow: var(--sv-btn-emphasis-gradient-shadow-hover, 0 11px 24px rgba(232, 51, 49, 0.3)); text-decoration: none !important; transform: translateY(var(--sv-btn-hover-lift-y, -2px)); } .sv-voucher-campaign-cta span { font-size: 19px; font-weight: 400; line-height: 1; } .sv-voucher-campaign-ctaLabel { font-size: inherit; font-weight: inherit; line-height: inherit; } .sv-voucher-campaign .sv-voucher-inline-edit { outline: 1px dashed transparent; border-radius: 4px; cursor: text; transition: outline-color 0.15s ease, background-color 0.15s ease; } .sv-voucher-campaign .sv-voucher-inline-edit:hover { outline-color: rgba(145, 55, 2, 0.35); background: rgba(255, 255, 255, 0.35); } .sv-voucher-campaign .sv-voucher-inline-edit:focus { outline: 2px solid rgba(232, 51, 49, 0.55); background: rgba(255, 255, 255, 0.72); } .nodeBase.voucherCampaign.inlineEdit .sv-voucher-inline-edit:focus { box-shadow: 0 0 0 3px rgba(232, 51, 49, 0.12); } @media (min-width: 801px) and (max-width: 1065px) { .webRoot.moduleDesign .sv-voucher-campaign { grid-template-columns: 215px minmax(205px, 0.9fr) minmax(220px, 1fr); padding: 20px 22px; } .sv-voucher-campaign-offer { padding: 0 18px 48px 10px; } .sv-voucher-campaign-countdown { margin-right: 18px; margin-left: 10px; } .sv-voucher-campaign-badge { width: 82px; height: 82px; } .sv-voucher-campaign-details { grid-template-columns: 1fr; gap: 8px; padding-right: 64px; padding-left: 20px; } .sv-voucher-campaign-details p, .sv-voucher-campaign-details time, .webRoot.moduleDesign .sv-voucher-campaign a.button.sv-voucher-campaign-cta { grid-column: auto; justify-self: start; } } @media (max-width: 800px) { .webRoot.moduleDesign .sv-voucher-campaign { grid-template-columns: 96px minmax(0, 1fr); min-height: 0; padding: 17px 18px 18px; text-align: left; background: radial-gradient(circle at 108% -8%, color-mix(in srgb, var(--sv-current-season-color, #913702) 18%, transparent) 0 112px, transparent 113px), radial-gradient(circle at -8% 40%, rgba(232, 51, 49, 0.07) 0 88px, transparent 89px), linear-gradient(155deg, rgba(255, 255, 255, 0.96), rgba(253, 239, 229, 0.92)); } .webRoot.moduleDesign .sv-voucher-campaign::after { top: 15px; right: 8%; font-size: 30px; } .sv-voucher-campaign-badge { top: 6px; right: 6px; width: 74px; height: 74px; filter: drop-shadow(0 6px 8px rgba(193, 39, 34, 0.36)); } .sv-voucher-campaign-badge-seal::before { inset: 7px; } .sv-voucher-campaign-badge-seal > span { font-size: 10.5px; letter-spacing: 0.03em; } .sv-voucher-campaign-art { grid-column: 1; grid-row: 1; min-width: 0; min-height: 104px; } .sv-voucher-campaign-art::before { content: none; } .sv-voucher-campaign-discount { top: 50%; left: 0; width: 96px; height: 78px; transform: translateY(-58%) rotate(-4deg); } .sv-voucher-campaign-discount strong { font-size: 40px; } .sv-voucher-campaign-discount span { top: 42px; left: 18px; font-size: 12px; } .sv-voucher-campaign-leaves { top: auto; left: 14px; bottom: -13px; width: 110px; opacity: 0.66; transform: rotate(-8deg); } .sv-voucher-campaign-offer { grid-column: 2; grid-row: 1; align-self: center; padding: 4px 70px 4px 16px; border-right: 0; border-left: 1px dashed rgba(145, 55, 2, 0.18); } .sv-voucher-campaign-balloons { top: -10px; right: -2px; width: 78px; opacity: 0.11; } .sv-voucher-campaign-celebrate { margin-bottom: 3px; font-size: 9px; letter-spacing: 0.12em; } .sv-voucher-campaign-offer h2 { line-height: 1.05; } .sv-voucher-campaign-offer h2 strong { display: inline; font-size: clamp(28px, 8.5vw, 36px); letter-spacing: -0.03em; white-space: nowrap; } .sv-voucher-campaign-offer h2 span { margin-top: 3px; font-size: clamp(15px, 4.2vw, 18px); } .sv-voucher-campaign-countdown { grid-column: 1 / -1; grid-row: 2; align-self: auto; margin: 13px 0 0; padding: 10px 12px 9px; } .sv-voucher-campaign-countdown-copy { justify-content: center; gap: 5px 12px; font-size: 12px; } .sv-voucher-campaign-countdown-copy strong { font-size: 18px; } .sv-voucher-campaign-details { grid-column: 1 / -1; grid-row: 3; grid-template-columns: 1fr; gap: 10px; padding: 13px 0 0; border-top: 1px dashed rgba(145, 55, 2, 0.18); text-align: center; } .sv-voucher-campaign-details p { grid-row: 1; grid-column: auto; font-size: 17px; } .sv-voucher-campaign-details time { grid-row: 2; justify-self: center; } .webRoot.moduleDesign .sv-voucher-campaign a.button.sv-voucher-campaign-cta { grid-row: 3; width: 100%; min-height: 46px; white-space: normal; } } @media (prefers-reduced-motion: reduce) { .webRoot.moduleDesign .sv-voucher-campaign a.button.sv-voucher-campaign-cta { transition: none; } .sv-voucher-campaign-badge { animation: none; } .sv-voucher-campaign-badge:hover, .sv-voucher-campaign-badge:focus-visible { transform: rotate(12deg); } } /* Voucher campaign embed: reduced presentation with the canonical campaign data. */ .webRoot.moduleDesign .sv-voucher-campaign--compact { grid-template-columns: 128px minmax(0, 1fr) minmax(210px, 0.62fr); gap: 18px; min-height: 118px; padding: 14px 18px; background: radial-gradient(circle at 95% -60%, color-mix(in srgb, var(--sv-current-season-color, #913702) 14%, transparent) 0 130px, transparent 131px), radial-gradient(circle at 8% 145%, rgba(216, 154, 43, 0.11) 0 95px, transparent 96px), linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(253, 241, 232, 0.91)); } .webRoot.moduleDesign .sv-voucher-campaign--compact::after { top: 10px; right: 34%; font-size: 28px; opacity: 0.72; } .webRoot.moduleDesign .sv-voucher-campaign a.sv-voucher-campaign-compactDiscount, .webRoot.moduleDesign .sv-voucher-campaign a.sv-voucher-campaign-compactDiscount:hover, .webRoot.moduleDesign .sv-voucher-campaign a.sv-voucher-campaign-compactDiscount:focus { text-decoration: none !important; } .sv-voucher-campaign-compactDiscount { position: relative; z-index: 1; display: grid; min-height: 84px; place-content: center; box-sizing: border-box; border: 1px solid rgba(232, 51, 49, 0.13); border-radius: 22px; background: radial-gradient(circle at 32% 25%, rgba(255, 255, 255, 0.95), transparent 42%), linear-gradient(145deg, rgba(255, 247, 235, 0.94), rgba(255, 232, 222, 0.88)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 8px 18px rgba(145, 55, 2, 0.08); color: #4f3329; text-align: center; transition: transform 0.18s ease, box-shadow 0.18s ease; } .sv-voucher-campaign-compactDiscount:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 10px 22px rgba(232, 51, 49, 0.14); transform: translateY(-1px); } .sv-voucher-campaign-compactDiscount strong { display: block; color: var(--sv-promo-red); font-size: 35px; font-weight: 650; letter-spacing: -0.055em; line-height: 0.95; white-space: nowrap; } .sv-voucher-campaign-compactDiscount .sv-voucher-campaign-discountLabel { display: block; margin-top: 5px; color: #4f3329; font-size: 11px; font-weight: 800; letter-spacing: 0.12em; line-height: 1; text-transform: uppercase; } .sv-voucher-campaign-compactCopy { position: relative; z-index: 1; min-width: 0; } .sv-voucher-campaign--compact .sv-voucher-campaign-celebrate { margin: 0 0 3px; font-size: 9px; } .sv-voucher-campaign-compactCopy h2 { margin: 0 0 9px; color: #342c28; font-size: clamp(20px, 2.2vw, 27px); font-weight: 700; letter-spacing: -0.015em; line-height: 1; } .sv-voucher-campaign-compactCopy h2 strong { color: var(--sv-promo-red); font-size: 1.18em; font-weight: 650; } .sv-voucher-campaign-compactCopy h2 span { margin-left: 0.24em; font-size: 0.72em; letter-spacing: 0.04em; } .webRoot.moduleDesign .sv-voucher-campaign--compact .sv-voucher-campaign-countdown { grid-column: auto; grid-row: auto; align-self: auto; max-width: 520px; margin: 0; padding: 7px 9px 6px; border-radius: 12px; } .sv-voucher-campaign--compact .sv-voucher-campaign-countdown-copy { gap: 5px 12px; font-size: 10px; } .sv-voucher-campaign--compact .sv-voucher-campaign-countdown-copy b { font-size: 11px; } .sv-voucher-campaign--compact .sv-voucher-campaign-countdown-track { height: 4px; margin-top: 5px; } .sv-voucher-campaign-compactAction { position: relative; z-index: 1; display: grid; min-width: 0; gap: 9px; } .sv-voucher-campaign-compactAction time { justify-self: center; display: inline-flex; align-items: center; min-height: 28px; padding: 5px 11px; box-sizing: border-box; border: 1px dashed rgba(232, 51, 49, 0.8); border-radius: 999px; background: rgba(255, 237, 181, 0.55); color: #d9292d; font-size: 11px; font-weight: 800; letter-spacing: 0.035em; line-height: 1; text-transform: uppercase; white-space: nowrap; } .webRoot.moduleDesign .sv-voucher-campaign--compact a.button.sv-voucher-campaign-cta { grid-row: auto; min-height: 40px; padding: 9px 15px; } @media (min-width: 801px) and (max-width: 1065px) { .webRoot.moduleDesign .sv-voucher-campaign--compact { grid-template-columns: 112px minmax(0, 1fr) minmax(185px, 0.55fr); gap: 14px; min-height: 112px; padding: 12px 15px; } .sv-voucher-campaign-compactDiscount { min-height: 78px; border-radius: 19px; } .sv-voucher-campaign-compactDiscount strong { font-size: 31px; } .sv-voucher-campaign-compactCopy h2 { font-size: 21px; } } @media (max-width: 800px) { .webRoot.moduleDesign .sv-voucher-campaign--compact { grid-template-columns: 86px minmax(0, 1fr); grid-template-rows: auto auto; gap: 11px 13px; min-height: 0; padding: 13px; } .webRoot.moduleDesign .sv-voucher-campaign--compact::after { top: 9px; right: 9%; font-size: 22px; } .sv-voucher-campaign-compactDiscount { grid-column: 1; grid-row: 1; min-height: 76px; border-radius: 18px; } .sv-voucher-campaign-compactDiscount strong { font-size: 29px; } .sv-voucher-campaign-compactCopy { grid-column: 2; grid-row: 1; align-self: center; } .sv-voucher-campaign-compactCopy h2 { margin-bottom: 7px; font-size: clamp(18px, 5.3vw, 23px); } .webRoot.moduleDesign .sv-voucher-campaign--compact .sv-voucher-campaign-countdown { grid-column: auto; grid-row: auto; padding: 6px 8px 5px; } .sv-voucher-campaign--compact .sv-voucher-campaign-countdown-copy { justify-content: space-between; gap: 4px 8px; } .sv-voucher-campaign-compactAction { grid-column: 1 / -1; grid-row: 2; grid-template-columns: auto minmax(150px, 1fr); align-items: center; gap: 9px; } .sv-voucher-campaign-compactAction time { justify-self: start; } .webRoot.moduleDesign .sv-voucher-campaign--compact a.button.sv-voucher-campaign-cta { width: 100%; min-height: 42px; } } @media (max-width: 480px) { .sv-voucher-campaign-compactAction { grid-template-columns: 1fr; } .sv-voucher-campaign-compactAction time { justify-self: center; } } @media (prefers-reduced-motion: reduce) { .sv-voucher-campaign-compactDiscount { transition: none; } }