rotiert bei jedem Theme-Duplikat (so ging der Look verloren) — der
Section-Key (custom_liquid_…) bleibt dagegen stabil. */
[id$="__custom_liquid_PDRxBX"], [id$="__custom_liquid_A6UwdH"] {
h2 {
padding: 0 !important;
}
.section-spacing {
background: linear-gradient(150deg, var(--color-lavender) 0%, var(--color-lavender2) 100%);
padding: var(--side-spacing);
border-radius: var(--container-radius);
margin-bottom: 2em;
position: relative;
}
.section-spacing::after {
content: "";
background-image: url("/cdn/shop/files/herzeln.svg?v=1727468674");
width: 100px;
height: 100px;
background-size: contain;
background-position: right;
background-repeat: no-repeat;
position: absolute;
bottom: 1em;
right: 1em;
}
a.button {
margin-top: 4em;
margin-bottom: 0.2em;
}
}
/************* | PAGE: HOME | *************/
.height--full.video-container {
height: var(--viewport-height);
min-height: 400px !important;
@media (min-width: 992px) {
min-height: 800px !important;
}
/* include padding and announcement bar in max-height) */
max-height: calc(var(--max-container-height) + var(--site-top-margin) + 2* var(--side-spacing) - 45px);
}
[id^="shopify-section-template--"][id$="__background_video_fnpPDh"] .height--full.video-container {
padding-bottom: calc(var(--site-top-margin) + 2 * var(--side-spacing)) !important;
margin-bottom: calc(-1 * var(--site-top-margin) - 2 * var(--side-spacing)) !important;
}
/* XO preview */
/* image hover */
[id^="shopify-section-template--"][id$="__slideshow_rBN6Rr"] {
.button {
opacity: 0;
background-color: #000;
color: #fff;
}
.button:hover {
cursor: pointer;
color: #000;
background: transparent;
}
.line-3 {
margin-top: 0;
}
@media (min-width: 768px) {
.slide a:hover, .overlay-type:hover {
cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42' fill='none'%3E%3Cg%3E%3Cpath d='M41 21C41 17.0444 39.827 13.1776 37.6294 9.8886C35.4318 6.59962 32.3082 4.03617 28.6537 2.52242C24.9992 1.00867 20.9778 0.612599 17.0982 1.3843C13.2186 2.15601 9.65492 4.06082 6.85787 6.85787C4.06082 9.65492 2.15601 13.2186 1.3843 17.0982C0.612599 20.9778 1.00867 24.9992 2.52242 28.6537C4.03617 32.3082 6.59962 35.4318 9.8886 37.6294C13.1776 39.827 17.0444 41 21 41C23.6264 41 26.2272 40.4827 28.6537 39.4776C31.0802 38.4725 33.285 36.9993 35.1421 35.1421C36.9993 33.285 38.4725 31.0802 39.4776 28.6537C40.4827 26.2272 41 23.6264 41 21Z' stroke='black' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M23.334 14L30.334 21' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M23.334 28L30.334 21' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='M11.667 21L30.3337 21' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E%0A") 21 21, auto;
}
.slide:hover .button {
opacity: 1;
}
.slide:hover .rimage-outer-wrapper {
opacity: 0.9;
}
}
}
/************* | PAGE: PRODUCT OVERVIEW | *************/
#page-content .shopify-section.section-featured-collection {
width: calc(100% - var(--side-spacing)) !important;
.wide-container, .product-block, .product-block .image {
padding-left: 0 !important;
padding-right: 0 !important;
}
div.product-list {
padding-left: calc(var(--side-spacing)/2) !important;
padding-right: calc(var(--side-spacing)/2) !important;
margin-bottom: calc(2 * var(--side-spacing));
}
.product-block {
padding-left: calc(var(--side-spacing)/2) !important;
padding-right: calc(var(--side-spacing)/2) !important;
display: block !important;
transform: none !important;
margin-bottom: 0.5rem !important;
margin-top: 0 !important;
padding-top: 1rem;
}
.product-block a.caption, ul.cc-swatches {
padding-left: var(--side-spacing);
padding-right: var(--side-spacing);
}
.product-block a.caption {
display: block;
}
ul.cc-swatches li {
margin-right: calc(var(--side-spacing)/2) !important;
margin-bottom: calc(var(--side-spacing)/2) !important;
}
}
.product-block__inner .image {
border-radius: var(--box-radius);
overflow: hidden;
}
/************* | PAGE: PRODUCT | *************/
/* for related products */
.product-detail__gap-lg h2 {
margin-top: 1em !important;
margin-bottom: 0em !important;
}
/* show headline below slideshow */
[id^="section-id-template--"][id$="__slideshow_dpXVKi"] {
height: 100svh !important;
min-height: 400px !important;
@media (min-width: 992px) {
min-height: 800px !important;
}
margin-bottom: calc(-1 * (var(--side-spacing) + var(--site-top-margin) + 10em)) !important;
padding-bottom: calc((var(--side-spacing) + var(--site-top-margin) + 10em)) !important;
transition: height 0.5s;
}
[id^="shopify-section-template--"][id$="__slideshow_dpXVKi"] .slideshow {
height: 100% !important;
transform: scale(1.0);
max-height: var(--max-container-height);
}
[id^="shopify-section-template--"][id$="__slideshow_dpXVKi"] .slick-list, [id^="shopify-section-template--"][id$="__slideshow_dpXVKi"] .slick-track, [id^="shopify-section-template--"][id$="__slideshow_dpXVKi"] .rimage-outer-wrapper {
height: 100% !important;
min-height: 1px !important;
}
/* Custom styles for mobile slider */
@media(max-width:767px){
.product-area__media .product-slider{
width: calc(100% + 1.4em) !important;
margin-left: -0.7em;
}
.product-area__media .product-slider .theme-img {
padding-left: var(--side-spacing);
padding-right: var(--side-spacing)
}
.product-area .product-area__media .product-slider .rimage-wrapper, .product-area .product-area__media .product-slider .plyr--video {
padding-top: 0 !important;
height: 100% !important;
}
.product-area .product-area__media .product-slider .plyr .plyr__poster {
background-size: cover;
}
.product-slider .product-media img, .product-slider .product-media video {
object-fit: cover;
width: 100% !important;
height: 100% !important;
}
}
.product-media img, .product-media video, .product-media .plyr__poster {
border-radius: var(--container-radius); -webkit-border-radius: var(--container-radius); transform: translateZ(0);
}
[data-layout="one-column"] .theme-img {
margin-bottom: var(--side-spacing);
}
@media (min-width: 768px) {
.product-area .product-area__details .product-area__details__header {
padding-top: 0;
}
}
.product-area .option-selectors li {
display: block;
float: left;
width: fit-content;
}
.product-area .selector-wrapper {
margin-bottom: 0 !important;
margin-top: 0 !important;
}
.clickyboxes:not(.options-motif) li button::after {
content: " ";
position: absolute;
top: 0;
left: -8px;
width: calc(100% + 16px);
height: calc(100% + 8px);
transition: opacity 0.4s;
background-color: {{ col_page_bg }};
opacity: 0;
}
.product-area .option-selectors {
display: flex;
flex-direction: row; /* can be switched to row if selection areas should be next to each other */
flex-wrap: wrap;
column-gap: 2rem;
max-width: 100%;
margin-top: 1rem;
.selector-wrapper {
overflow: hidden;
flex: 0 1 auto;
}
.has-clickyboxes label {
font-weight: 500 !important;
margin-bottom: 0.5em !important;
clear: both;
}
}
.product-area .option-selectors::before { /* hiding theme elements that add gap */
display: none;
}
.product-area h2 {
margin-bottom: 0;
padding-bottom: 0;
}
.page-motion-print .product-area .option-selectors::after, .page-motion-print .product-area .option-selectors::before {
display: none;
}
.page-motion-print {
[class^="style_header"] {
display: none;
}
}
#rbr-container-element-addOn {
margin-top: -1rem;
}
.product-area .clickyboxes li {
padding: 0 0.5em .1em 0;
list-style: none;
}
.product-area .option-selectors .cc-swatches .clickyboxes li button {
border-radius: var(--control-radius);
border: none;
box-shadow: none !important;
background: transparent;
margin-left: 2px;
margin-top: 2px;
}
.product-area .option-selectors .cc-swatches .clickyboxes li button.active, .product-area .product-area .option-selectors .cc-swatches .clickyboxes li button:hover {
box-shadow: 0 0 0 2px #000 !important;
}
.product-area .option-selectors .cc-swatches .clickyboxes li button::before {
border-radius: var(--control-radius);
}
/* don't cross out unavailable colors */
.product-area .option-selectors .cc-swatches .clickyboxes li button::after {
display: none !important;
}
.selector-wrapper label {
/* display: none !important; */
span.cc-swatches__label {
font-weight: 300 !important;
}
}
#clickyboxes-option-shape-9981584441691 .cc-hover-line, #clickyboxes-option-motif-10148422648155 .cc-hover-line {
display: none;
}
label[for="option-shape-9981584441691"], label[for="option-color-10148422648155"], label[for="option-motif-10148422648155"] {
display: block !important;
}
label[for="option-shape-9981584441691"]::after, label[for="option-motif-10148422648155"]::after {
content: ":";
position: relative;
left: -.15em;
}
ul.clickyboxes.options-shape button, ul.clickyboxes.options-motif button{
background: none;
color: black;
display: inline-block;
padding: 0;
border: none;
font-weight: 500;
padding: 0.2em 0.5em;
border-radius: var(--control-radius);
border: 2px solid #fff;
}
ul.clickyboxes.options-shape button.active, ul.clickyboxes.options-motif button.active {
border: 2px solid #000;
}
ul.clickyboxes.options-motif li button {
display: inline-block;
width: 43px;
height: 43px;
background-size: cover;
color: transparent;
}
ul.clickyboxes.options-motif li button:hover {
color: transparent !important;
}
ul.clickyboxes.options-motif li button.active::before {
content: attr(data-value);
display: block; /* or inline-block */
color: #000;
position: absolute;
font-weight: 300;
top: -1.71rem;
left: 3em;
}
ul.clickyboxes.options-motif li button.opt--diamond {
background-image: url("/cdn/shop/files/icon-diamond.svg?v=1761049776");
}
ul.clickyboxes.options-motif li button.opt--grid {
background-image: url("/cdn/shop/files/icon-grid.svg?v=1761049776");
}
ul.clickyboxes.options-motif button {
display: none;
}
/*** Page PLAYTS ***/
/* floating images */
[id^="section-id-template--"][id$="__rich_text_8Y3cmC"] {
p:nth-child(1)::before,
p:nth-child(2)::before {
content: "";
display: inline-block;
width: 18rem;
height: 18rem;
background-size: cover;
vertical-align: middle;
position: relative;
}
p:nth-child(1)::before {
background-image: url("/cdn/shop/files/fl-brot.png?v=1762340150");
float: right;
right: -4rem;
}
p:nth-child(2)::before {
background-image: url("/cdn/shop/files/fl-pflaume.png?v=1762340163");
left: -4rem;
top: -3rem;
}
}
/*** Bundle Selection Styling ***/
/* hide non-available options (for square playt) */
#rbr-container-element-true span[aria-disabled="true"] {
display: none;
}
/* add-on (motion print page) */
.rbr-page-container {
padding: 0 !important;
span {
font-size: var(--text-size-base) !important;
}
}
.rbr-page-container, .product-area {
.rbr-thumbnail-container {
border: none !important;
}
.rbr-sbap_item, [class^="style_items"] > div {
padding: var(--side-spacing);
border: 1px solid #ddd;
border-radius: var(--control-radius);
margin-top: 1rem;
}
.rbr-sbap_item {
margin-top: 1em;
}
.rbr-sbap_variants > div > div > div, .selectBoxCustom_variants_d9387324.selectBoxCustom_box_d9387324 {
padding: 0;
border: none;
}
.rbr-divider__container:not(.rbr-page-container div) {
display: none;
}
.rbr-divider__container {
background-color: #000 !important;
}
.rbr-productNamePrice__title__container a {
font-weight: 500;
}
.colorSwatch_title_c65258f9 { /* don't show labels like "farbe" or "shape" */
display: none;
}
/* hide shape selector because shape is pre-selected for our bundles */
.colorSwatch_variant_c65258f9:nth-child(2) [aria-disabled="true"] {
display: none;
}
.rbr-poweredBy__container {
display: none;
}
.rbr-color {
border-radius: var(--control-radius) !important;
display: block;
border: 2px solid #fff !important;
span {
width: 100% !important;
height: 100% !important;
border-radius: var(--control-radius) !important;
display: block;
}
}
.rbr-color[aria-selected="true"] {
border-color: #000 !important;
}
.rbr-shape {
background: none !important;
border: 2px solid #ddd;
color: #000 !important;
border-radius: var(--control-radius) !important;
}
[class^="style_price"] {
width: 100%;
text-align: right;
color: #000;
font-weight: 600;
}
}
.option-selectors li:has(.opt--sand-lavender) {
clear: both;
}
.price-area, .product-policies, .xo-discount {
text-align: right;
span {
font-size: 1em !important;
}
padding: 0 !important;
}
.product-policies {
padding-bottom: 0.7em !important;
}
.price-area {
padding-top: 1rem !important;
}
.price-area, .xo-discount {
font-weight: 600 !important;
}
.xo-discount {
color: #008424;
}
.product-policies p {
font-style: normal;
}
.product-area .product-detail__gap-lg {
padding-top: 0;
padding-bottom: 0;
}
.product-area .price-area .was-price {
opacity: 1;
color: #aaa;
margin-right: .2em;
}
.product-detail__form__action.product-detail__form__options--with-quantity {
display: flex;
flex-wrap: wrap;
gap: 0.7em;
margin-bottom: 0.7em;
align-items: stretch;
}
/* Quantity + ATC button on one row, payment buttons below */
.product-detail__form__action.product-detail__form__options--with-quantity .quantity-wrapper {
flex: 0 0 auto;
}
.product-detail__form__action.product-detail__form__options--with-quantity > button[type="submit"] {
flex: 1 1 0;
min-width: 0;
}
/* Payment button wrapper: full width on its own row */
.product-detail__form__action.product-detail__form__options--with-quantity .shopify-payment-button {
flex: 0 0 100%;
width: 100%;
margin-top: 0;
}
/* Fast checkout buttons: height via theme variable */
.product-detail__form__action.product-detail__form__options--with-quantity .shopify-payment-button {
--gravity-button-padding: 19px;
}
/* Additional payment methods link: centered */
.product-detail__form__action.product-detail__form__options--with-quantity .shopify-payment-button .shopify-payment-button__more-options {
display: block;
width: 100%;
text-align: center;
padding: 0.4em 0;
}
/* Mobile: ensure quantity+ATC stay on one row */
@media (max-width: 767px) {
.product-detail__form__action.product-detail__form__options--with-quantity {
display: flex !important;
flex-wrap: wrap !important;
float: none !important;
width: 100% !important;
}
.product-detail__form__action.product-detail__form__options--with-quantity .quantity-wrapper {
flex: 0 0 auto !important;
margin-bottom: 0 !important;
}
.product-detail__form__action.product-detail__form__options--with-quantity > button[type="submit"] {
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
}
.product-detail__form__action.product-detail__form__options--with-quantity .shopify-payment-button {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
}
.product-detail__form__options .option-selectors .selector-wrapper:last-child {
margin-bottom: 1em;
}
.quantity-wrapper input {
padding: 0;
line-height: 2.5em !important;
}
.quantity-wrapper {
flex: 0 0 auto;
margin-bottom: 0 !important;
margin-right: 0 !important;
}
.quantity-wrapper button {
padding: 0;
flex: 1;
}
.product-area .error-message {
border: 1px solid #d32d2d;
border-radius: var(--container-radius); -webkit-border-radius: var(--container-radius); transform: translateZ(0);
padding: var(--side-spacing);
}
.product-area .cc-accordion-item, .product-area .cc-accordion {
border: none;
}
.product-area .product-detail-accordion {
margin-top: 0.7em;
margin-bottom: 0.7em;
}
/* top spacing with sticky product info */
@media(min-width:768px){
[id^="shopify-section-template--"][id$="__main"] .product-area__details .product-area__details__inner .product-area__details__header {
padding-top: 0 !important;
}
[id^="shopify-section-template--"][id$="__main"] .product-area__details__inner {
top: var(--nav-height);
margin-top: calc(var(--nav-height) - 0.7em) !important;
}
}
[id^="shopify-section-template--"][id$="__main"] .theme-images {
padding-top: 0 !important;
}
@media (min-width: 768px) {
.product-area .product-area__media .theme-gallery[data-column-count="2"] .theme-images .media-column .theme-img {
margin-bottom: 20px;
}
}
/* media columns */
.text-column__image {
border-radius: var(--container-radius);
overflow: hidden;
}
/* horizontal scroll section (e.g. instagram) */
[id^="shopify-section-template--"][id$="__text_columns_with_images_hzDPVh"], /* Product Page */
[id^="shopify-section-template--"][id$="__text_columns_with_images_HCXD98"], /* Studio Page */
[id^="shopify-section-template--"][id$="__text_columns_with_images_miYqLr"], /* Studio Page */
[id^="shopify-section-template--"][id$="__text_columns_with_images_dByXy9"],
[id^="shopify-section-template--"][id$="__text_columns_with_images_WafAqV"] { /* Motion Print Page */
overflow: visible;
max-width: calc(100% - 2* var(--side-spacing)) !important;
.flexible-layout {
flex-direction: row;
flex-wrap: initial;
overflow-x: auto;
overflow-y: hidden;
justify-content: flex-start;
width: calc(100% + 4* var(--side-spacing)) !important;
padding-right: calc(2* var(--side-spacing)) !important;
margin-left: calc(-2* var(--side-spacing)) !important;
/* Redesign 10-26: Spalten tragen 1× --side-spacing links → mit diesem
Polster landet die erste Spalte auf --content-inset. */
padding-left: var(--side-spacing);
@media (min-width: 1200px) {
padding-left: calc((100% - var(--site-max-width)) / 2 + var(--side-spacing));
}
}
.column {
flex: 0 0 auto;
margin-bottom: 0.7em;
padding-left: var(--side-spacing);
padding-right: 0 !important;
width: min(33%, calc(var(--site-max-width)/3));
}
/*
.column:first-of-type {
margin-left: 1.4em !important;
}
*/
.text-column__title {
margin-left: 0 !important;
}
}
.section-text-columns-with-images .text-column .text-column__image {
margin-bottom: 1.2em;
}
/* with border-radius and spacing on non-instagram */
[id^="shopify-section-template--"][id$="__text_columns_with_images_HCXD98"], [id^="shopify-section-template--"][id$="__text_columns_with_images_miYqLr"], [id^="shopify-section-template--"][id$="__text_columns_with_images_dByXy9"] {
.text-column__title {
border: 0;
padding: 0;
}
.rimage-outer-wrapper, .section-background-video {
border-radius: var(--container-radius); -webkit-border-radius: var(--container-radius); transform: translateZ(0);
overflow: hidden;
}
@media (max-width: 1200px) {
.flexible-layout--variable-columns .column {
width: 33.333%;
padding-right: var(--side-spacing);
}
}
}
/************* | PAGE: STUDIO | *************/
[id^="section-id-template--"][id$="__rich_text_GrWb4c"] {
.section-rich-text__image {
position: absolute !important;
top: 0 !important;
width: 550px;
right: max(calc((100vw - 550px)/2), -10vw);
}
h2 {
margin-bottom: 130px !important;
}
}
/** Cookie Banner **/
pandectes-cmp .actions, pandectes-cmp .header, pandectes-cmp .body {
padding: calc(2 * var(--side-spacing)) !important;
font-size: var(--text-size-base) !important;
}
pandectes-cmp .header {
padding-bottom: 1rem;
}
pandectes-cmp button {
font-size: var(--text-size-base) !important;
}
pandectes-cmp .footer {
display: none !important;
}
/** Cookie Banner Archive **/
#pd-cp-preferences .pd-cp-bold-messaging, #pd-cp-preferences .pd-cp-ui-title, #pd-cp-preferences .pd-cp-ui-close, #pd-cp-preferences .pd-cp-purpose-actions {
font-weight: 500;
}
#pd-cp-preferences button:hover {
background: #fff;
color: #000 !important;
}
#pd-cp-preferences .pd-cp-ui-close:hover, #pd-cp-preferences .pd-cp-toggle:hover {
background: initial;
color: #fff !important;
}
#pd-cp-preferences .pd-cp-ui-rejectAll, #pd-cp-preferences .pd-cp-ui-acceptAll {
color: #fff !important;
background-color: transparent;
border: 1px solid #fff;
}
#pd-cp-preferences .pd-cp-ui-rejectAll {
margin-right: 0.5em;
}
#pd-cp-preferences .pd-cp-ui-horizontal-buttons {
gap: 0.5em;
}
#pd-cp-preferences .pd-cp-ui-horizontal-buttons .pd-cp-btn {
max-width: 100%;
}
@media (max-width: 699px) {
.pd-cp-ui-horizontal-buttons .pd-cp-btn {
display: inline-block;
padding: 0.8em !important;
}
.pd-cp-ui-horizontal-buttons .pd-cp-btn:first-child {
margin-right: 0 !important;
}
}
/* accounts/subscribe */
div.shopify-email-marketing-confirmation__container h1 {
display: none;
}
div.shopify-email-marketing-confirmation__container > p:first-of-type {
font-size: 200% !important;
font-weight: 500;
}
/* page: newsletter sign up ipad */
.page-20-rabatt-fur-deine-anmeldung, .page-gewinnspiel-anmeldung {
[data-section-type=newsletter-popup] {
display: none !important;
}
#shopify-section-footer, #site-control {
display: none !important;
}
.content h1, .content p{
text-align: center !important;
}
.overlay-type, #page-content .content {
padding-top: 0 !important;
}
#page-content .content, .overlay-type {
padding-bottom: 1em !important;
}
.button-row {
margin-top: 0 !important;
}
}
[id^="section-id-template--"][id$="__rich_text_knmPBT"] {
display: none;
}
.page-10-rabatt-fur-deine-anmeldung:has(.signup-form__response) [id^="section-id-template--"][id$="__rich_text_knmPBT"] {
display:block;
}
/* ─── Horizontal Scroll Gallery Edge-to-Edge Fix ───
These galleries use horizontal scroll and need their content to bleed
past the container edges to reach the screen edges.
The sections use .wide-container for normal centering/max-width.
We only override overflow so the scroll strip can extend beyond the
container boundary. The theme's .cc-animate-enabled sets overflow:hidden
which would clip the scrolling content — this overrides that. */
.shopify-section:has(.use-case-gallery),
.section-community-gallery,
[id^="shopify-section-template--"][id$="__community_gallery"] {
overflow: visible !important;
}
/* ─── Community Gallery: Mobile Edge-Scroll ─── */
@media (max-width: 767px) {
.section-community-gallery {
overflow: visible !important;
}
.community-gallery {
overflow: visible !important;
}
.community-gallery__mobile {
width: 100vw !important;
margin-left: calc(-1 * var(--side-spacing)) !important;
padding-left: var(--side-spacing) !important;
padding-right: var(--side-spacing) !important;
scroll-padding-left: var(--side-spacing) !important;
-ms-overflow-style: none !important;
scrollbar-width: none !important;
}
.community-gallery__mobile::-webkit-scrollbar { display: none; }
}
/* ─── Community Gallery: Desktop Sticky ─── */
@media (min-width: 768px) {
/* Fix: body overflow:hidden breaks position:sticky.
Use overflow-x:clip instead — prevents horizontal scroll
without creating a new scroll container that breaks sticky.
Selectors match the body classes Shopify adds for this page. */
body.page-community {
overflow-x: clip !important;
overflow-y: visible !important;
}
/* Neutralize cc-animate transforms on layout and children */
.community-layout,
.community-layout .shopify-section,
.community-layout [data-cc-animate] {
overflow: visible !important;
transform: none !important;
will-change: auto !important;
}
/* Newsletter form button: rounded right corners to match the row border-radius */
.nl-inline__btn {
border-top-right-radius: 8px !important;
border-bottom-right-radius: 8px !important;
}
}
/************* | BLOG / ARTICLE | *************/
/* Full-width content area for article pages */
#page-content .central {
width: 100%;
max-width: 100%;
}
/* Inline images in article body – respect editor size, only add styling */
.rte img,
.rte--allow-full-width-images img {
border-radius: var(--box-radius);
display: block;
height: auto;
max-aspect-ratio: 4 / 5;
object-fit: cover;
margin-top: 1rem;
margin-bottom: 1rem;
}
/* Featured image (wide mode) – height controlled via --article-hero-height CSS variable (px) */
.article-header.image-overlay {
height: var(--article-hero-height, 600px);
}
/* Hero overlay: headline bottom-aligned on all screen sizes */
.article-hero-overlay {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
}
.article-hero-overlay .overlay__content {
width: 100%;
}
/* ─────────────────────────────────────────────
SONNTAG BLOG ARTICLE LAYOUT
───────────────────────────────────────────── */
/* ── Hero ── */
.sonntag-article__hero {
position: relative;
width: 100%;
height: var(--hero-height-desktop, 600px);
overflow: hidden;
border-radius: var(--container-radius);
}
.sonntag-article__hero-bg {
position: absolute;
inset: 0;
background-size: cover;
background-position: center;
}
.sonntag-article__hero-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sonntag-article__hero-overlay {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: flex-end;
background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 60%);
}
.sonntag-article__hero-content {
/* Align to text column: max-width 680px centred, same as .sonntag-block__text-inner */
width: 100%;
max-width: calc(680px + 4rem); /* 680px text + 2rem padding each side */
margin: 0 auto;
padding: 2rem;
color: #fff;
}
.sonntag-article__date {
font-size: 0.85em;
opacity: 0.8;
margin-bottom: 0.4rem;
}
.sonntag-article__hero .sonntag-article__title {
font-size: clamp(1.6rem, 4vw, 3rem);
font-weight: 500;
line-height: 1.1;
color: #fff !important;
margin: 0;
}
.sonntag-article__date {
color: #fff;
}
/* ── Body ── */
.sonntag-article__body {
padding-top: 1rem;
}
/* ── Text block ── */
.sonntag-block--text {
display: flex;
justify-content: center;
padding: var(--side-spacing);
}
.sonntag-block__text-inner {
width: 100%;
max-width: 680px;
font-size: 1rem;
line-height: 1.65;
}
/* No top margin on first element inside RTE
Override: .template-article .rte { margin-top: 2em } from styles.css */
.template-article .sonntag-block__text-inner.rte,
.sonntag-block__text-inner.rte {
margin-top: 0 !important;
}
.sonntag-block__text-inner.rte > *:first-child {
margin-top: 0;
}
.sonntag-block__text-inner h2 {
font-size: clamp(1.2rem, 2.5vw, 1.6rem);
font-weight: 500;
margin-top: 2rem;
margin-bottom: 0.5rem;
}
/* ── Images block ── */
.sonntag-block--images {
display: grid;
gap: 4rem;
margin: 3rem 0 2rem;
padding: 0 4rem;
align-items: start;
}
/* 1 image: centered, max 70% width on desktop */
.sonntag-block--images-1 {
grid-template-columns: 1fr;
justify-items: center;
}
.sonntag-block--images-1 .sonntag-block__image {
width: 100%;
max-width: 680px;
}
/* 2 images: 3 alternating layouts via Liquid cycle classes
A → big left (5:4), right drops down
B → big right (4:5), left drops down
C → big left (5:4), right nearly top-aligned (small offset)
*/
.sonntag-block--images-2 {
grid-template-columns: 5fr 4fr;
align-items: end;
}
/* Variant A: big left, right drops down */
.sonntag-block--images-2.images-2--a {
grid-template-columns: 5fr 4fr;
align-items: end;
}
.sonntag-block--images-2.images-2--a .sonntag-block__image--1 {
margin-top: 0;
}
.sonntag-block--images-2.images-2--a .sonntag-block__image--2 {
margin-top: 3rem;
}
/* Variant B: big right, left drops down */
.sonntag-block--images-2.images-2--b {
grid-template-columns: 4fr 5fr;
align-items: start;
}
.sonntag-block--images-2.images-2--b .sonntag-block__image--1 {
margin-top: 3rem;
}
.sonntag-block--images-2.images-2--b .sonntag-block__image--2 {
margin-top: 0;
}
/* Variant C: big left, right top-aligned */
.sonntag-block--images-2.images-2--c {
grid-template-columns: 5fr 4fr;
align-items: start;
}
.sonntag-block--images-2.images-2--c .sonntag-block__image--1 {
margin-top: 0;
}
.sonntag-block--images-2.images-2--c .sonntag-block__image--2 {
margin-top: 0;
}
/* 3 images: 2-column desktop layout — img 1+2 side by side (img 2 offset down), img 3 below centred */
.sonntag-block--images-3 {
grid-template-columns: 1fr 1fr;
align-items: start;
}
.sonntag-block--images-3 .sonntag-block__image--1 {
margin-top: 0;
}
.sonntag-block--images-3 .sonntag-block__image--2 {
margin-top: 4rem;
}
.sonntag-block--images-3 .sonntag-block__image--3 {
grid-column: 1 / -1;
max-width: 55%;
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
/* Images — container clips to max 4:5 portrait ratio */
.sonntag-block__image {
overflow: hidden;
border-radius: var(--box-radius);
/* Natural aspect ratio — no cropping */
}
.sonntag-block__image img {
width: 100%;
height: auto;
display: block;
}
/* ── Mobile: stack all images with whitespace + alternating offset ── */
@media (max-width: 767px) {
.sonntag-block--images-2,
.sonntag-block--images-2.images-2--a,
.sonntag-block--images-2.images-2--b,
.sonntag-block--images-2.images-2--c,
.sonntag-block--images-3 {
grid-template-columns: 1fr !important;
gap: 1.2rem;
}
/* All images: not full-width, with some breathing room */
.sonntag-block--images-2 .sonntag-block__image,
.sonntag-block--images-3 .sonntag-block__image {
max-width: 82%;
margin-top: 0 !important;
}
/* Odd images: pushed right */
.sonntag-block--images-2 .sonntag-block__image--1,
.sonntag-block--images-3 .sonntag-block__image--1,
.sonntag-block--images-3 .sonntag-block__image--3 {
margin-left: auto;
margin-right: 0;
}
/* Even images: pushed left */
.sonntag-block--images-2 .sonntag-block__image--2,
.sonntag-block--images-3 .sonntag-block__image--2 {
margin-left: 0;
margin-right: auto;
}
/* Reset 3rd image desktop centering */
.sonntag-block--images-3 .sonntag-block__image--3 {
grid-column: auto;
max-width: 82%;
}
.sonntag-article__hero {
height: var(--hero-height-mobile, 400px);
}
.sonntag-article__hero-content {
padding: 1.2rem;
max-width: 100%;
}
}
/* ==========================================================================
INSPIRATION BLOG TEMPLATE
========================================================================== */
.sonntag-blog-inspiration {
padding: 0 var(--side-spacing);
max-width: 1400px;
margin: 0 auto;
}
.sonntag-latest-articles-section {
padding-left: var(--side-spacing);
padding-right: var(--side-spacing);
}
.sonntag-inspo-grid-section {
padding-left: 0;
padding-right: 0;
}
/* ── 1. Intro ── */
.sonntag-blog-intro {
display: flex;
justify-content: center;
margin-bottom: 4rem;
text-align: center;
}
.sonntag-blog-intro__inner {
max-width: 680px;
}
.sonntag-blog-intro__title {
font-size: clamp(2rem, 4vw, 3rem);
margin-bottom: 1.5rem;
}
/* ── 2. Product Inspo Grid (Varied Layout) ── */
.sonntag-inspo-grid {
display: grid;
grid-template-columns: repeat(12, 1fr);
column-gap: 2rem;
row-gap: 4rem;
margin-bottom: 6rem;
align-items: start;
}
.sonntag-inspo-item {
display: flex;
flex-direction: column;
}
.sonntag-inspo-item__image-wrapper {
border-radius: var(--box-radius);
overflow: hidden;
margin-bottom: 1rem;
width: 100%;
/* Intrinsic aspect ratio: set via inline style from Liquid */
}
/* ==========================================================================
LAYOUT OPTIONS (up to 8 images each)
========================================================================== */
/* ── Option 1: Portrait Focus 1 (Asymmetric) ── */
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-1 { grid-column: 1 / 6; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-2 { grid-column: 7 / 13; margin-top: 4rem; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-3 { grid-column: 2 / 8; margin-top: 4rem; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-4 { grid-column: 9 / 13; margin-top: 0; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-5 { grid-column: 1 / 5; margin-top: 3rem; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-6 { grid-column: 6 / 12; margin-top: 1rem; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-7 { grid-column: 3 / 9; margin-top: 2rem; }
.sonntag-inspo-grid--portrait-1 .sonntag-inspo-item--pattern-8 { grid-column: 10 / 13; margin-top: 5rem; }
/* ── Option 2: Portrait Focus 2 (Staggered) ── */
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-1 { grid-column: 2 / 7; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-2 { grid-column: 8 / 12; margin-top: 6rem; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-3 { grid-column: 1 / 6; margin-top: 2rem; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-4 { grid-column: 7 / 13; margin-top: 3rem; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-5 { grid-column: 3 / 8; margin-top: 1rem; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-6 { grid-column: 9 / 13; margin-top: 4rem; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-7 { grid-column: 1 / 5; margin-top: 2rem; }
.sonntag-inspo-grid--portrait-2 .sonntag-inspo-item--pattern-8 { grid-column: 6 / 11; margin-top: 5rem; }
/* ── Option 3: Portrait Focus 3 (Alternating) ── */
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-1 { grid-column: 1 / 7; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-2 { grid-column: 8 / 13; margin-top: 3rem; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-3 { grid-column: 7 / 13; margin-top: 2rem; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-4 { grid-column: 1 / 6; margin-top: 0; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-5 { grid-column: 2 / 8; margin-top: 4rem; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-6 { grid-column: 9 / 13; margin-top: 1rem; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-7 { grid-column: 1 / 5; margin-top: 2rem; }
.sonntag-inspo-grid--portrait-3 .sonntag-inspo-item--pattern-8 { grid-column: 6 / 12; margin-top: 3rem; }
/* ── Option 4: Mixed 1 (Wide & Narrow) ── */
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-1 { grid-column: 1 / 10; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-2 { grid-column: 10 / 13; margin-top: 8rem; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-3 { grid-column: 1 / 5; margin-top: 4rem; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-4 { grid-column: 6 / 13; margin-top: 0; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-5 { grid-column: 3 / 11; margin-top: 4rem; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-6 { grid-column: 1 / 6; margin-top: 3rem; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-7 { grid-column: 7 / 13; margin-top: 1rem; }
.sonntag-inspo-grid--mixed-1 .sonntag-inspo-item--pattern-8 { grid-column: 4 / 10; margin-top: 4rem; }
/* ── Option 5: Mixed 2 (Editorial) ── */
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-1 { grid-column: 3 / 11; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-2 { grid-column: 1 / 6; margin-top: 3rem; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-3 { grid-column: 7 / 13; margin-top: 6rem; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-4 { grid-column: 2 / 10; margin-top: 2rem; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-5 { grid-column: 10 / 13; margin-top: 0; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-6 { grid-column: 1 / 7; margin-top: 4rem; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-7 { grid-column: 8 / 12; margin-top: 1rem; }
.sonntag-inspo-grid--mixed-2 .sonntag-inspo-item--pattern-8 { grid-column: 3 / 11; margin-top: 3rem; }
/* ── Option 6: Mixed 3 (Dynamic) ── */
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-1 { grid-column: 1 / 6; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-2 { grid-column: 7 / 13; margin-top: 4rem; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-3 { grid-column: 1 / 11; margin-top: 3rem; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-4 { grid-column: 8 / 13; margin-top: 2rem; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-5 { grid-column: 1 / 7; margin-top: 0; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-6 { grid-column: 4 / 10; margin-top: 4rem; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-7 { grid-column: 1 / 5; margin-top: 2rem; }
.sonntag-inspo-grid--mixed-3 .sonntag-inspo-item--pattern-8 { grid-column: 6 / 13; margin-top: 5rem; }
.sonntag-inspo-item__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.sonntag-inspo-item__link {
font-size: 0.9rem;
text-decoration: underline;
text-underline-offset: 4px;
align-self: flex-start;
padding-left: var(--side-spacing);
}
/* ── 3. Recent Articles ── */
.sonntag-recent-articles {
margin-top: 0;
}
.sonntag-recent-articles__title {
font-size: clamp(1.5rem, 3vw, 2rem);
margin-bottom: 2rem;
text-align: center;
}
.sonntag-recent-articles__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 220px));
gap: 1.25rem;
justify-content: center;
}
.sonntag-recent-article__link {
display: block;
text-decoration: none;
color: inherit;
}
.sonntag-recent-article__image-wrapper {
border-radius: var(--box-radius);
overflow: hidden;
aspect-ratio: 1 / 1;
margin-bottom: 0.75rem;
position: relative;
}
.sonntag-recent-article__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.3s ease;
}
.sonntag-inspo-item__image {
width: 100%;
height: auto;
display: block;
border-radius: var(--box-radius);
transition: transform 0.3s ease;
}
.sonntag-recent-article__link:hover .sonntag-recent-article__image {
transform: scale(1.03);
}
.sonntag-recent-article__heading {
font-size: 1em !important;
font-weight: 500 !important;
line-height: 1.4;
text-align: center;
}
/* ── Mobile Adjustments ── */
@media (max-width: 767px) {
.sonntag-blog-inspiration {
padding-top: 2rem;
}
/* Inspo Grid: single column on mobile */
.sonntag-inspo-grid {
display: flex;
flex-direction: column;
gap: 2rem;
}
.sonntag-inspo-item {
margin-top: 0 !important;
}
/* Mobile: varied widths and offsets for editorial feel */
/* All items are at least 60% wide */
.sonntag-inspo-item:nth-child(8n+1) {
width: 85%;
align-self: flex-start;
margin-left: 0;
}
.sonntag-inspo-item:nth-child(8n+2) {
width: 70%;
align-self: flex-end;
margin-right: 0;
}
.sonntag-inspo-item:nth-child(8n+3) {
width: 95%;
align-self: center;
}
.sonntag-inspo-item:nth-child(8n+4) {
width: 65%;
align-self: flex-start;
margin-left: 5%;
}
.sonntag-inspo-item:nth-child(8n+5) {
width: 80%;
align-self: flex-end;
margin-right: 2%;
}
.sonntag-inspo-item:nth-child(8n+6) {
width: 60%;
align-self: flex-start;
margin-left: 10%;
}
.sonntag-inspo-item:nth-child(8n+7) {
width: 90%;
align-self: flex-end;
}
.sonntag-inspo-item:nth-child(8n+8) {
width: 75%;
align-self: center;
}
/* Recent Articles: 2 columns on mobile */
.sonntag-recent-articles__grid {
grid-template-columns: repeat(2, 1fr);
}
/* Recent Articles: horizontal scroll on mobile */
.sonntag-recent-articles__grid--scroll {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
gap: 1rem;
padding-bottom: 1rem;
scrollbar-width: none;
-ms-overflow-style: none;
margin-right: calc(var(--side-spacing) * -1);
padding-right: var(--side-spacing);
}
.sonntag-recent-articles__grid--scroll::-webkit-scrollbar {
display: none;
}
.sonntag-recent-articles__grid--scroll .sonntag-recent-article {
flex: 0 0 45%;
scroll-snap-align: start;
}
}
/* ==========================================================================
INSPIRATION CTA SECTION
Horizontal scroll gallery — single row on mobile and desktop.
Uses the same wide-container > flexible-layout HTML structure as the
About-page horizontal-scroll sections.
The .wide-container class handles centering/max-width.
The .flexible-layout strip breaks out of the container using the same
trick as line 1287:
width: calc(100% + 4*side-spacing)
margin-left: calc(-2*side-spacing)
=> strip reaches both window edges.
Images capped at 4:5 aspect ratio. No scroll-snap.
========================================================================== */
/* ======================================================
REUSABLE: Edge-to-edge horizontal scroll
──────────────────────────────────────────────────────
Pattern from line 1287 (.flexible-layout breakout trick).
Utility classes (for future sections):
.section-edge-scroll → on .shopify-section
.edge-scroll-strip → on the inner scrollable
For the Inspiration CTA section the same rules also
target the existing selectors directly so they work
regardless of Liquid cache state.
HTML skeleton:
.shopify-section.section-edge-scroll ← or .section-inspiration-cta
.wide-container
.edge-scroll-strip ← or .sonntag-inspo-cta__strip
.item .item .item …
====================================================== */
/* ── Section wrapper ──
overflow:visible lets the strip bleed past the container.
max-width widens the .shopify-section so the strip math works. */
.section-edge-scroll,
.section-inspiration-cta {
overflow: visible !important;
max-width: calc(100% - 2 * var(--side-spacing)) !important;
}
/* Override .wide-container's default 70 px padding
to match the side-spacing used in the breakout math. */
.section-edge-scroll .wide-container,
.section-inspiration-cta .wide-container {
padding-left: var(--side-spacing) !important;
padding-right: var(--side-spacing) !important;
}
/* ── Scrollable strip ── */
.edge-scroll-strip,
.sonntag-inspo-cta__strip {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
justify-content: flex-start;
/* Break out: 2 × side-spacing on each side */
width: calc(100% + 4 * var(--side-spacing)) !important;
margin-left: calc(-2 * var(--side-spacing)) !important;
padding-right: calc(2 * var(--side-spacing)) !important;
/* Mobile default: first item aligns with content margin */
padding-left: var(--side-spacing);
scroll-padding-left: var(--side-spacing);
/* Hide scrollbar */
scrollbar-width: none;
-ms-overflow-style: none;
}
.edge-scroll-strip::-webkit-scrollbar,
.sonntag-inspo-cta__strip::-webkit-scrollbar {
display: none;
}
/* Desktop ≥ 1200 px: align with centred site-max-width */
@media (min-width: 1200px) {
.edge-scroll-strip,
.sonntag-inspo-cta__strip {
padding-left: calc((100vw - var(--site-max-width)) / 2);
scroll-padding-left: calc((100vw - var(--site-max-width)) / 2);
}
}
/* ── PLAYTS use-case-gallery: mobile-only edge-to-edge scroll ──
On desktop (>=768px) the track switches to a CSS grid layout,
so the edge-scroll breakout only applies on mobile. Gilt für ALLE
Use-Case-Galerien (Section-Klasse aus dem Schema), nicht nur die der
PLAYTS-Übersicht — Konfigurator/Set-Seiten/PLAYTS-Produkt hatten Rand. */
@media (max-width: 767px) {
.shopify-section.section-use-case-gallery {
overflow: visible !important;
max-width: calc(100% - 2 * var(--side-spacing)) !important;
}
.shopify-section.section-use-case-gallery .wide-container {
padding-left: 0 !important;
padding-right: 0 !important;
}
.shopify-section.section-use-case-gallery .use-case-gallery__track {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
justify-content: flex-start;
width: calc(100% + 4 * var(--side-spacing)) !important;
margin-left: calc(-2 * var(--side-spacing)) !important;
padding-left: var(--content-inset);
padding-right: calc(2 * var(--side-spacing)) !important;
scroll-padding-left: var(--content-inset);
scrollbar-width: none;
-ms-overflow-style: none;
}
.shopify-section.section-use-case-gallery .use-case-gallery__track::-webkit-scrollbar {
display: none;
}
}
/* ======================================================
Inspo CTA — section-specific additions
====================================================== */
/* Vertical stagger + gap */
.sonntag-inspo-cta__strip {
align-items: flex-start;
gap: var(--side-spacing, 20px);
padding-bottom: 20px;
padding-top: 0;
box-sizing: content-box;
}
/* Image items */
.sonntag-inspo-cta__m-col {
flex: 0 0 auto;
}
.sonntag-inspo-cta__m-img {
overflow: hidden;
border-radius: var(--box-radius, 8px);
container-type: inline-size;
}
/* ─── Inspiration CTA: clickable image links ─── */
.sonntag-inspo-cta__m-img--link {
display: block;
text-decoration: none;
color: inherit;
overflow: hidden;
}
.sonntag-inspo-cta__m-img--link img {
transition: transform 0.35s ease;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.sonntag-inspo-cta__m-img--link:hover img,
.sonntag-inspo-cta__m-img--link:focus-visible img {
transform: scale(1.04);
}
.sonntag-inspo-cta__m-img img,
.sonntag-inspo-cta__m-img .placeholder-svg {
display: block;
width: 100%;
height: auto;
max-height: calc(100cqi * 5 / 4);
object-fit: cover;
}
@supports not (max-height: 1cqi) {
.sonntag-inspo-cta__m-img {
aspect-ratio: 4 / 5;
}
.sonntag-inspo-cta__m-img img {
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
}
}
/* Arrow button */
.sonntag-inspo-cta__m-arrow-wrap {
flex: 0 0 auto;
align-self: center;
padding-right: calc(2 * var(--side-spacing));
padding-left: 16px;
}
.sonntag-inspo-cta__arrow-btn {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 50%;
border: 1.5px solid #000;
color: #000;
text-decoration: none;
flex-shrink: 0;
transition: background-color 0.2s, color 0.2s;
}
.sonntag-inspo-cta__arrow-btn:hover {
background-color: #000;
color: #fff;
}
/* ======================================================
Featured Collection: 4-column grid from 1100px
Override the base theme's 992px breakpoint so that
.column.quarter (grid=4) shows 3 columns below 1100px
and 4 columns at 1100px and above.
====================================================== */
.section-featured-collection .column.quarter,
.section-featured-collection .grid li.quarter {
width: 33.3%;
}
@media (min-width: 1100px) {
.section-featured-collection .column.quarter,
.section-featured-collection .grid li.quarter {
width: 25%;
}
.grid--uniform .section-featured-collection .column.quarter:nth-child(3n+1),
.section-featured-collection .grid--uniform .column.quarter:nth-child(3n+1),
.section-featured-collection .grid--uniform .grid li.quarter:nth-child(3n+1) {
clear: none;
}
.grid--uniform .section-featured-collection .column.quarter:nth-child(4n+1),
.section-featured-collection .grid--uniform .column.quarter:nth-child(4n+1),
.section-featured-collection .grid--uniform .grid li.quarter:nth-child(4n+1) {
clear: left;
}
}
/* (Der frühere #page-content-Grid-Hack für Galerie+Accordions wurde durch die
DOM-Adoption innerhalb der Konfigurator-Section ersetzt — siehe
playts-set-configurator.liquid + playts-configurator.css.) */
/* ── Reviews carousel side-fade ───────────────────────────────────────────
The Judge.me cards carousel (.jdgm-cards-carousel) scrolls horizontally and
is hard-clipped by the section's `overflow-x: hidden`. Fade both edges to
the (white) page background so the cards dissolve out instead of looking
cut off. Pseudo-elements sit on the position:relative .jdgm-content and are
pushed out by 1× --side-spacing to land on the actual clip edge; they're
clipped by the same section overflow so they never stick out. Applies
wherever the carousel appears (configurator page + main PLAYTS page). */
.jdgm-cards-carousel .jdgm-content { position: relative; }
.jdgm-cards-carousel .jdgm-content::before,
.jdgm-cards-carousel .jdgm-content::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 70px;
z-index: 3;
pointer-events: none;
}
.jdgm-cards-carousel .jdgm-content::before {
left: calc(var(--side-spacing, 1.1rem) * -1);
background: linear-gradient(to right, #fff 18%, rgba(255, 255, 255, 0));
}
.jdgm-cards-carousel .jdgm-content::after {
right: calc(var(--side-spacing, 1.1rem) * -1);
background: linear-gradient(to left, #fff 18%, rgba(255, 255, 255, 0));
}
/* Judge.me-Karten ohne Bewertungsfotos: Bildkarten werden zu Textkarten
(gleiche Größe, Text vertikal mittig wie bei den übrigen Karten). */
.jdgm-cards-carousel .jdgm-card img,
.jdgm-cards-carousel .jdgm-card video {
display: none !important;
}
/* Kein Aufblitzen: Judge.me lädt seine Karussell-CSS asynchron — kommen die
Karten vorher, stehen sie kurz untereinander in voller Breite. Bis das JS
(studio-sonntag-custom.js) „ss-jdgm-ready“ setzt: unsichtbar + Höhe gedeckelt. */
.jdgm-cards-carousel:not(.ss-jdgm-ready) {
opacity: 0;
max-height: 560px;
overflow: hidden;
}
.jdgm-cards-carousel.ss-jdgm-ready {
opacity: 1;
transition: opacity .4s ease;
}
/* Judge.me im Redesign-Stil: keine Rundungen an Karten/Medien; Texte in der
globalen Basisgröße (die App setzt fest 16px, mobil ist die Basis 15px). */
.jdgm-widget .jdgm-card,
.jdgm-widget .jdgm-card img,
.jdgm-widget .jdgm-card video,
.jdgm-widget .jdgm-videos-container,
.jdgm-widget .jdgm-carousel-item {
border-radius: 0 !important;
}
.jdgm-widget,
.jdgm-widget .jdgm-text,
.jdgm-widget .jdgm-text p,
.jdgm-widget .jdgm-reviewer-name,
.jdgm-widget .jdgm-prev-badge__text {
font-size: var(--text-size-base) !important;
}
/* Slider-Dots auf Mobile — Apple-Style: aktive Pille füllt sich über die Autoslide-Dauer, inaktiv kleine solide Punkte. */
@keyframes ss-pill-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 767px) {
.theme-gallery .slick-dots,
.slideshow .slick-dots { padding-left: 8px; padding-right: 8px; font-size: 0; line-height: 0; white-space: nowrap; }
.slick-dots li { margin: 0 1px; vertical-align: middle; }
/* inaktiv: kleiner solider Punkt — rund geclippt, kein Morph (verhindert Quadrat-Blitzer) */
.slick-dots li button.custom-dot { width: 20px; height: 20px; padding: 0; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; background: none; border-radius: 50%; overflow: hidden; transition: none; }
.slick-dots li button.custom-dot svg { width: 10px; height: 10px; filter: none; overflow: visible; background: transparent; }
.slick-dots li button.custom-dot circle { fill: rgba(255, 255, 255, 0.7); stroke: none; animation: none; }
/* aktiv: Pille — Spur via inset-Schatten, weisse Fuellung via ::after (scaleX ueber --slide-ms) */
.slick-dots li.slick-active button.custom-dot { width: 39px; height: 10px; padding: 0; border-radius: 6px; overflow: hidden; position: relative; transition: none; box-shadow: inset 0 0 0 99px rgba(255, 255, 255, 0.4); }
.slick-dots li.slick-active button.custom-dot svg { display: none; }
.slick-dots li.slick-active button.custom-dot::after { content: ""; position: absolute; inset: 0; border-radius: 6px; background: #ffffff; transform-origin: left; transform: scaleX(1); }
.slideshow[data-autoplay="true"] .slick-dots li.slick-active button.custom-dot::after { transform: scaleX(0); animation: ss-pill-fill var(--slide-ms, 3000ms) linear forwards; }
/* Viele Bilder (≥8, Klasse via Liquid): Dots enger zusammenrücken, damit die
Reihe nicht zu breit wird / umbricht. Der sichtbare Punkt bleibt 10px, nur
der Abstand (Button-Breite + margin) schrumpft. */
.slideshow--dense-dots .slick-dots li { margin: 0; }
.slideshow--dense-dots .slick-dots li button.custom-dot { width: 15px; }
.slideshow--dense-dots .slick-dots li.slick-active button.custom-dot { width: 30px; }
/* aktive Pille etwas Luft geben (2px links/rechts) */
.slideshow--dense-dots .slick-dots li.slick-active { margin: 0 2px; }
}
/* ── PLAYTS FAQ: reguläres Section-Spacing auf Mobil ─────────────────────────
Die Theme-Accordion-Wrapper legen inneres Seiten-Padding oben drauf
(.accordion-container.reading-width ≈ 10,5px + innere .container--large 20px),
sodass die FAQ-Inhalte bei ~41px statt bei 1× --side-spacing (11px) sitzen.
Fix nur für die FAQ (hat einen Titel → :not(.no-title); die titel-lose
Produktdetail-Akkordeon bleibt unberührt), nur auf PLAYTS-Seiten
(Body-Klasse enthält „playts": greift für alle /pages/playts-* + Set-Produkte
+ Konfigurator-Seite), nur auf Mobil. */
@media (max-width: 767px) {
/* Die FAQ hatte ÜBER den Theme-Standard hinaus (Section-Margin + reading-width
= 2× --side-spacing) noch die feste .container--large-Polsterung (20px), sodass
der Inhalt zu weit innen saß. Nur diese Extra-Polsterung entfernen — der
reading-width-Abstand (= 1× --side-spacing) bleibt, damit die FAQ beim
Standard landet: 2× --side-spacing gesamt. */
body[class*="playts"] .accordion-container.reading-width:not(.no-title) .container--large {
padding-inline: 0 !important;
}
/* Redesign 10-26: gilt jetzt für ALLE Akkordeons (auch die titellosen
Produktdetails im Konfigurator) — Text sitzt auf --content-inset. */
.accordion-container .container--large {
padding-inline: 0 !important;
}
}
/* ── Presse-Reihe Startseite: AD-Monogramm ─────────────────────────────────
Die Sektion begrenzt jedes Logo auf logo_max_width (100px) BREITE. Die
Wortmarken füllen das aus, das fast quadratische AD nur zu ~55% — der
Rest bleibt Leerraum im Kasten und sieht wie zusätzlicher Abstand aus.
Deshalb bekommt AD eine eigene Maximalbreite, sodass Kasten = Glyphe und
die Lücken zwischen allen Logos gleich groß sind. 60px ergibt bei der
randlos beschnittenen Datei (762x536) 42px Höhe — wie JOLIE.
Selektor bewusst über [class*=] statt der generierten Block-ID, damit er
eine Neugenerierung des Blocks überlebt. */
[class*="ai-press-section__logo-image"][src*="/AD.png"] {
max-width: 60px;
}
/* Mobil bestimmt der Flex-Container die Breite, nicht das Bild. */
[class*="ai-press-section__logo-item"]:has(img[src*="/AD.png"]) {
flex-basis: min(17vw, 60px);
}
/* ── Kaufargumente unter dem Warenkorb-Button (snippets/usp-args.liquid) ────
Optik 1:1 aus dem Konfigurator (.playts-config__args). Die dortigen Styles
liegen in playts-configurator.css, die nur auf der Konfiguratorseite geladen
wird — deshalb hier global noch einmal, damit sie auf allen Produkt-
Templates greifen. */
.ss-usp {
list-style: none;
margin: 10px 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 7px;
}
.ss-usp li {
display: flex;
align-items: center;
gap: 9px;
font-size: var(--text-size-small, 0.875rem);
line-height: 1.35;
}
.ss-usp__icon { flex: 0 0 auto; }
.ss-usp__icon--ship { color: #f0a500; } /* Lieferung — gelb */
.ss-usp__icon--return { color: #5f80b8; } /* Rückgabe — blau */
.ss-usp__icon--eco { color: #2f9d5a; } /* Nachhaltigkeit — grün */
/************* | REDESIGN 10-26: HEADER-PILL, SCHATTEN | *************/
/* Header: Logo links ohne Hintergrund, Navigation + Icons als rechtsbündige,
erhöhte Pill (angelehnt an tylko.com). Beides bleibt beim Scrollen fixiert;
über .needs-alt-logo-Bildern schaltet das Theme auf das helle Logo. */
#shopify-section-header .links.site-control__inner {
display: flex;
justify-content: space-between !important;
align-items: center;
min-height: 0;
}
#shopify-section-header .site-control .logo {
position: relative !important;
left: auto !important;
transition: opacity .3s, visibility .3s;
}
.site-control__pill {
display: flex;
align-items: center;
gap: 2px;
margin-left: auto;
padding: 6px 14px;
/* Glas-Look: Deckkraft + Unschärfe im Header-Editor einstellbar. */
background: var(--header-pill-bg, rgba(255, 255, 255, 0.72));
-webkit-backdrop-filter: saturate(180%) blur(var(--header-pill-blur, 16px));
backdrop-filter: saturate(180%) blur(var(--header-pill-blur, 16px));
border: 1px solid rgba(255, 255, 255, 0.5);
border-radius: var(--button-radius);
box-shadow: var(--shadow-elevated);
pointer-events: auto;
transition: background-color .3s, box-shadow .3s;
}
#shopify-section-header .site-control__pill .nav-right-side {
position: static !important;
width: auto !important;
display: flex;
align-items: center;
gap: 2px;
}
#shopify-section-header .site-control__pill a.cart:not(.nav-search),
#shopify-section-header .site-control__pill a.menu {
position: relative !important;
top: auto !important;
right: auto !important;
left: auto !important;
margin: 0 !important;
width: 36px;
height: 36px;
border-radius: var(--button-radius);
display: inline-flex !important;
align-items: center;
justify-content: center;
transition: background-color .2s;
}
#shopify-section-header .site-control__pill a.cart:not(.nav-search):hover,
#shopify-section-header .site-control__pill a.menu:hover {
background-color: rgba(0, 0, 0, 0.05);
}
/* Warenkorb-Icon = Original-Icon des Themes (Korb mit Zähler), etwas kleiner,
damit die Pill flacher wird. Zähler sitzt wie im Original bei ~60 % der
Icon-Höhe im Korb. */
#shopify-section-header .site-control__pill a.cart:not(.nav-search) {
display: inline-block !important;
width: 36px;
height: 36px;
text-align: center;
}
/* Optisch zentriert wird der Korb-Körper (SVG-viewBox 0–22: dünner Stiel 0–7,
Korb 7–22 → Mitte bei ~66 % der Höhe), nicht die SVG-Box. Bei 24px Icon im
36px-Feld: Icon 2.5px nach unten, Zähler-Mitte bei 18px = Feld-Mitte. */
#shopify-section-header .site-control__pill a.cart svg {
width: 24px !important;
height: 24px !important;
margin-top: 2.5px;
}
#shopify-section-header .site-control__pill a.cart > div {
top: 18px !important;
font-size: 9px;
}
/* Etwas kräftigere Linien: das Icon besteht aus gefüllten Flächen (Linienstärke
1 Einheit) — eine Kontur in Icon-Farbe macht sie ~1,4 Einheiten stark. */
#shopify-section-header .site-control__pill a.cart svg :is(path, rect) {
stroke: #000;
stroke-width: 0.4;
stroke-linejoin: round;
}
body.modal-active #shopify-section-header .site-control__pill a.cart svg :is(path, rect) {
fill: #fff !important;
stroke: #fff;
}
#shopify-section-header .site-control__pill .menu .icon-menu {
transform: scale(0.85);
}
/* Pill bleibt dunkel-auf-weiß, auch wenn das Theme über Bildern das helle
Alt-Logo (use-alt-logo) aktiviert und Header-Icons/Links weiß färbt. */
body:not(.modal-active).use-alt-logo #shopify-section-header .site-control__pill svg {
fill: #000 !important;
}
body:not(.modal-active).use-alt-logo #shopify-section-header .site-control__pill a,
body:not(.modal-active).use-alt-logo #shopify-section-header .site-control__pill .cart {
color: #000 !important;
}
body:not(.modal-active).use-alt-logo #shopify-section-header .site-control__pill .menu .icon-menu .icon-menu__bar {
background: #000 !important;
}
/* Offenes Menü / Warenkorb-Overlay (schwarz, weiße Icons): Pill bleibt als
graue Leiste sichtbar. */
body.modal-active #shopify-section-header .site-control__pill {
background: #333;
border-color: transparent;
box-shadow: none;
}
/* Kein weißer Hover-Balken mehr über die volle Header-Breite. */
body:not(.use-alt-logo):not(.modal-active) .site-control:hover {
background-color: transparent !important;
}
@media (min-width: 1100px) {
/* Desktop: Textlinks sitzen mit in der Pill, Burger entfällt. */
#shopify-section-header .site-control.nav-inline-desktop .site-control__pill .site-control__inline-links {
display: block;
}
/* Gleichmäßige Seiten: Theme-Polster (2em) der Linkliste raus, Pill links
etwas schmaler als rechts (Textlinks haben eigenes Innenpolster). */
#shopify-section-header .site-control.nav-inline-desktop .site-control__pill {
padding: 6px 14px 6px 8px;
}
#shopify-section-header .site-control.nav-inline-desktop .site-control__pill .nav-row .tier-1 {
padding: 0 !important;
}
#shopify-section-header .site-control.nav-inline-desktop .site-control__pill .nav-right-side {
margin-left: 6px;
}
#shopify-section-header .site-control.nav-inline-desktop .site-control__pill .nav-row a {
padding: 0.4em 1em;
font-size: var(--text-size-base);
border-radius: var(--button-radius);
outline: none;
box-shadow: none !important;
transition: background-color .2s;
}
/* Kein Unterstrich (Hover/Aktiv) — stattdessen dezente Fläche in der Pill. */
#shopify-section-header .site-control.nav-inline-desktop .site-control__pill .nav-row .tier-1 ul > li > a::after {
display: none !important;
}
#shopify-section-header .site-control.nav-inline-desktop .site-control__pill .tier-1 > ul > li > a:hover {
background-color: rgba(0, 0, 0, 0.05);
}
#shopify-section-header .site-control.nav-inline-desktop .site-control__pill .tier-1 > ul > li > a.active {
background-color: rgba(0, 0, 0, 0.08);
}
#shopify-section-header .site-control.nav-inline-desktop .site-control__pill a.menu {
display: none !important;
}
/* Dropdown (Sub-Navigation): deckend + erhöht, eckig wie alle Boxen.
Der 20px-Border oben bleibt transparent als Hover-Brücke. */
.site-control.nav-inline-desktop .site-control__inner .nav-row .contains-children .nav-rows {
background-color: var(--header-pill-bg, #fff);
-webkit-backdrop-filter: saturate(180%) blur(var(--header-pill-blur, 16px));
backdrop-filter: saturate(180%) blur(var(--header-pill-blur, 16px));
border-top-color: transparent;
min-width: 220px;
left: 0;
box-shadow: var(--shadow-elevated);
background-clip: padding-box;
}
}
@media (min-width: 768px) {
#shopify-section-header .site-control .logo img {
width: var(--logo-w, 140px) !important;
height: auto;
}
}
/* Mobil: Logo + Icons kompakter. */
@media (max-width: 767px) {
#shopify-section-header .site-control .logo img {
width: var(--logo-w, 116px) !important;
height: auto;
}
.site-control__pill {
padding: 5px 12px;
}
#shopify-section-header .site-control__pill a.cart:not(.nav-search),
#shopify-section-header .site-control__pill a.menu {
width: 34px;
height: 34px;
}
/* Mobil: bewährte Position (Roman: passte so) — 26px Icon, 4px nach unten. */
#shopify-section-header .site-control__pill a.cart svg {
width: 26px !important;
height: 26px !important;
margin-top: 4px;
}
#shopify-section-header .site-control__pill a.cart > div { top: 20px !important; }
}
/* Schatten für interaktive Elemente (Buttons) — leicht, beim Hover etwas mehr. */
.button:not(.alt):not(.button--link),
input[type=submit],
button[type=submit]:not(.bis-submit),
.shopify-payment-button__button {
box-shadow: var(--shadow-button);
transition: box-shadow .2s, transform .2s;
}
.button:not(.alt):not(.button--link):hover,
input[type=submit]:hover,
button[type=submit]:not(.bis-submit):hover,
.shopify-payment-button__button:hover {
box-shadow: var(--shadow-button-hover);
}
/* Header-Overlap (Redesign 10-26, Runde 3): Ist die erste Section eine
.header-overlap-section (Hero-Bild/-Video, Slideshow, Konfigurator, Produkt-
Medien …), setzt das Theme body.header-section-overlap. Diese Section läuft
dann FULL-BLEED (ohne Seitenabstand, ohne max-width) und beginnt bündig oben
direkt unter der Ankündigungsleiste; Logo + Pill schweben darüber.
Text-Bereiche darin behalten --content-inset.
Selektor = erste Overlap-Section im DOM (dieselbe, die theme.checkViewportFillers
prüft) — robust gegen leere App-Sections davor. */
body.header-section-overlap #page-content {
top: 0;
}
body.header-section-overlap .cc-announcement {
margin-bottom: 0 !important;
}
body.header-section-overlap #page-content > .shopify-section:is(.header-overlap-section, :has(.header-overlap-section)):not(.shopify-section:is(.header-overlap-section, :has(.header-overlap-section)) ~ .shopify-section) {
/* margin-bottom bleibt der Section überlassen (z. B. Story-Hero: Editor-Abstand). */
margin-top: 0 !important;
}
/* Full-bleed nur mobil — Desktop: innere Seitenbreite (Option „Volle
Bildschirmbreite" pro Section, siehe unten). */
@media (max-width: 767px) {
body.header-section-overlap #page-content > .shopify-section:is(.header-overlap-section, :has(.header-overlap-section)):not(.shopify-section:is(.header-overlap-section, :has(.header-overlap-section)) ~ .shopify-section) {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
}
body.header-section-overlap #page-content > .shopify-section:is(.header-overlap-section, :has(.header-overlap-section)):not(.shopify-section:is(.header-overlap-section, :has(.header-overlap-section)) ~ .shopify-section) .product-area__details {
padding-left: var(--content-inset) !important;
padding-right: var(--content-inset) !important;
}
}
/* Konfigurator als Overlap-Section (nur mobil): Bühne full-bleed, alles darunter
auf --content-inset. Desktop: normale Section auf innerer Seitenbreite. */
@media (max-width: 767px) {
body.header-section-overlap #page-content > .shopify-section:is(.header-overlap-section, :has(.header-overlap-section)):not(.shopify-section:is(.header-overlap-section, :has(.header-overlap-section)) ~ .shopify-section).section-playts-configurator .playts-config {
padding: 0 var(--content-inset);
}
body.header-section-overlap #page-content > .shopify-section:is(.header-overlap-section, :has(.header-overlap-section)):not(.shopify-section:is(.header-overlap-section, :has(.header-overlap-section)) ~ .shopify-section).section-playts-configurator .playts-config__stage {
margin-left: calc(-1 * var(--content-inset));
margin-right: calc(-1 * var(--content-inset));
}
}
/* Alle Headlines linksbündig (Redesign 10-26) — auch Overlay-Texte auf Hero-Bildern:
Theme-Positionen „zentriert"/„rechts" werden horizontal auf links gelegt, die
vertikale Position (Editor) bleibt. AUSNAHME Hintergrund-Video-Sections (z. B.
„Mit Hand und Herz gefertigt"): dort gilt die Text-Position aus dem Editor. */
.shopify-section:not(.section-background-video) .overlay-type .inner > *,
.shopify-section:not(.section-background-video) .overlay-type :is(.line-1, .line-2, .line-3),
.shopify-section:not(.section-background-video) .overlay-type .overlay__content :is(h1, h2, h3, p, .feature-subheader) {
text-align: left !important;
}
.shopify-section:not(.section-background-video) .overlay-type :is(.line-1, .line-2) {
margin-left: 0 !important;
margin-right: auto !important;
}
/* AUSNAHME 2: Medien mit eigener Überschrift darunter (Section direkt über einer
„Überschrift mit Anker“, z. B. Alle-Produkte-Seite): Headline auf dem Bild
zentriert. */
#page-content .shopify-section:has(+ .section-anchor-heading) .overlay-type .inner > *,
#page-content .shopify-section:has(+ .section-anchor-heading) .overlay-type :is(.line-1, .line-2, .line-3),
#page-content .shopify-section:has(+ .section-anchor-heading) .overlay-type .overlay__content :is(h1, h2, h3, p, .feature-subheader) {
text-align: center !important;
}
#page-content .shopify-section:has(+ .section-anchor-heading) .overlay-type :is(.line-1, .line-2) {
margin-left: auto !important;
margin-right: auto !important;
}
/* In der Full-Bleed-Hero-Section sitzen Overlay-Texte auf der Content-Linie
(wie der Text aller anderen Sections). */
body.header-section-overlap #page-content > .shopify-section:is(.header-overlap-section, :has(.header-overlap-section)):not(.shopify-section:is(.header-overlap-section, :has(.header-overlap-section)) ~ .shopify-section) .overlay-type {
padding-left: max(var(--content-inset), calc((100% - var(--responsive-max-width)) / 2 + var(--content-inset))) !important;
padding-right: max(var(--content-inset), calc((100% - var(--responsive-max-width)) / 2 + var(--content-inset))) !important;
}
/* Startseite: „Mit Hand und Herz gefertigt"-Video läuft mobil full-bleed (Desktop:
innere Seitenbreite bzw. Option „Volle Bildschirmbreite"); Overlay-Text auf
der Content-Linie. */
@media (max-width: 767px) {
#page-content > [id$="__background_video_HWbYb8"] {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
}
}
#page-content > [id$="__background_video_HWbYb8"] .overlay-type {
padding-left: max(var(--content-inset), calc((100% - var(--responsive-max-width)) / 2 + var(--content-inset))) !important;
padding-right: max(var(--content-inset), calc((100% - var(--responsive-max-width)) / 2 + var(--content-inset))) !important;
}
/* Mobile-Menü: Links im Gewicht der Headlines. */
#page-menu .main-nav a,
#page-menu .main-nav a span {
font-weight: var(--headline-weight) !important;
}
/* Option „Volle Bildschirmbreite" (Hero-/Video-Sections, Desktop): Section-Wrapper
ohne Seitenabstand, Inhalt bis zur Maximalbreite; ist der Bildschirm breiter,
blendet der Inhalt an den Rändern weich in den Hintergrund aus (Mask). */
[data-fullscreen-width="1440"] { --fs-max: 1440px; }
[data-fullscreen-width="1600"] { --fs-max: 1600px; }
[data-fullscreen-width="1920"] { --fs-max: 1920px; }
[data-fullscreen-width="2560"] { --fs-max: 2560px; }
@media (min-width: 768px) {
#page-content > .shopify-section:has([data-fullscreen-width]) {
margin-left: 0 !important;
margin-right: 0 !important;
max-width: none !important;
}
/* Weiches Ausblenden nur am Rand: Breite 7 % (max. 160px), Verlauf nach
„smootherstep" (6t⁵ − 15t⁴ + 10t³) — ohne Knick am Anfang und Ende, daher
keine sichtbare Kante; am äußeren Rand voll transparent (= reines Weiß).
Greift nur, wenn der Bildschirm breiter als --fs-max ist. */
[data-fullscreen-width] {
--fs-fade: clamp(0px, calc((100vw - var(--fs-max, 1920px)) * 100), min(7%, 160px));
--fs-mask: linear-gradient(to right,
transparent 0,
rgba(0, 0, 0, 0.009) calc(var(--fs-fade) * 0.1),
rgba(0, 0, 0, 0.058) calc(var(--fs-fade) * 0.2),
rgba(0, 0, 0, 0.163) calc(var(--fs-fade) * 0.3),
rgba(0, 0, 0, 0.317) calc(var(--fs-fade) * 0.4),
rgba(0, 0, 0, 0.500) calc(var(--fs-fade) * 0.5),
rgba(0, 0, 0, 0.683) calc(var(--fs-fade) * 0.6),
rgba(0, 0, 0, 0.837) calc(var(--fs-fade) * 0.7),
rgba(0, 0, 0, 0.942) calc(var(--fs-fade) * 0.8),
rgba(0, 0, 0, 0.991) calc(var(--fs-fade) * 0.9),
#000 var(--fs-fade),
#000 calc(100% - var(--fs-fade)),
rgba(0, 0, 0, 0.991) calc(100% - var(--fs-fade) * 0.9),
rgba(0, 0, 0, 0.942) calc(100% - var(--fs-fade) * 0.8),
rgba(0, 0, 0, 0.837) calc(100% - var(--fs-fade) * 0.7),
rgba(0, 0, 0, 0.683) calc(100% - var(--fs-fade) * 0.6),
rgba(0, 0, 0, 0.500) calc(100% - var(--fs-fade) * 0.5),
rgba(0, 0, 0, 0.317) calc(100% - var(--fs-fade) * 0.4),
rgba(0, 0, 0, 0.163) calc(100% - var(--fs-fade) * 0.3),
rgba(0, 0, 0, 0.058) calc(100% - var(--fs-fade) * 0.2),
rgba(0, 0, 0, 0.009) calc(100% - var(--fs-fade) * 0.1),
transparent 100%);
max-width: var(--fs-max, 1920px);
margin-left: auto;
margin-right: auto;
-webkit-mask-image: var(--fs-mask);
mask-image: var(--fs-mask);
}
}
/* ─────────────────────────────────────────────────────────────────────────────
Globale UI-Bausteine (Redesign 10-26) — auf allen Seiten wiederverwenden,
statt sie pro Section neu zu stylen. Entstanden auf der CUT-E-Seite.
.button--white Theme-Button in Weiß (auf Bildern, z. B. Hero-CTA)
.glass-surface Glasfläche wie die Header-Pill
.float-bar schwebende Leiste unten (Safari-26-sicher)
.badge-outline Outline-Pill „Made in …“ / Status
.badge-filled gefüllte weiße Pill (z. B. „Neu“ auf Bildern)
.progress-line dünne Fortschrittsleiste auf Bildern ( = Füllung)
.input-underline leises Textfeld, nur Unterlinie
.choice-card Auswahlkarte (Radio/Checkbox im Label)
.swatch-dot runder Farbknopf mit aktivem Ring (--swatch, --swatch-size)
───────────────────────────────────────────────────────────────────────────── */
@media (min-width: 768px) {
:root { --pill-button-h: 46px; --pill-button-px: 1.6em; }
}
.button.button--white {
background: #fff !important;
color: #000 !important;
border-color: #fff !important;
}
.glass-surface {
background: var(--glass-bg);
/* Wert ausgeschrieben: WebKit/Safari ignoriert backdrop-filter, wenn der
ganze Wert aus einer Variablen kommt (var() nur innerhalb von blur()). */
-webkit-backdrop-filter: saturate(180%) blur(var(--header-pill-blur, 16px));
backdrop-filter: saturate(180%) blur(var(--header-pill-blur, 16px));
border: var(--glass-border);
}
/* Safari 26 liest Hintergrund/backdrop-filter fixierter Elemente am Rand und
malt danach eine Fläche hinter seine Leiste (Seite wirkt abgeschnitten) →
das fixierte Element bleibt transparent, Glas + Schatten sitzen auf ::before.
Ausgeblendete schwebende Leisten mit display:none entfernen. */
.float-bar {
position: fixed;
z-index: 90;
background: transparent !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
border-color: transparent !important;
box-shadow: none !important;
}
.float-bar::before {
content: "";
position: absolute;
z-index: -1;
inset: -1px;
border-radius: inherit;
background: var(--glass-bg);
/* Wert ausgeschrieben: WebKit/Safari ignoriert backdrop-filter, wenn der
ganze Wert aus einer Variablen kommt (var() nur innerhalb von blur()). */
-webkit-backdrop-filter: saturate(180%) blur(var(--header-pill-blur, 16px));
backdrop-filter: saturate(180%) blur(var(--header-pill-blur, 16px));
border: var(--glass-border);
box-shadow: var(--shadow-float-bottom);
pointer-events: none;
}
.badge-outline {
display: inline-block;
padding: 0.18em 0.65em;
border: 1px solid currentColor;
border-radius: var(--button-radius, 999px);
font-size: var(--text-size-base);
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
}
/* Gefüllte Pill (weiß), z. B. „Neu“ auf Bildern. */
.badge-filled {
display: inline-block;
padding: 0.18em 0.65em;
border-radius: var(--button-radius, 999px);
background: #fff;
color: #000;
font-size: var(--text-size-base);
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
text-shadow: none;
}
@media (max-width: 767px) {
/* Mobil neben kleineren Headlines: wie Fließtext (normale Stärke, schmaler). */
.badge-outline, .badge-filled { font-weight: 400; padding: 0.12em 0.55em; }
}
.progress-line {
height: 3px;
border-radius: 3px;
overflow: hidden;
background: var(--progress-track);
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12);
}
.progress-line > i {
display: block;
height: 100%;
border-radius: inherit;
background: var(--progress-fill);
transform: scaleX(0);
transform-origin: 0 50%;
will-change: transform;
}
input.input-underline {
display: block;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 0.5em 0;
background: transparent;
border: 0 !important;
border-bottom: 1px solid rgba(0, 0, 0, 0.35) !important;
/* Globaler Input-Stil rundet zur Pill ab → hier gerade Unterlinie. */
border-radius: 0 !important;
box-shadow: none;
outline: none;
-webkit-appearance: none;
appearance: none;
color: inherit;
font: inherit;
font-size: var(--text-size-base);
line-height: 1.4;
transition: border-color .2s ease;
}
input.input-underline::placeholder { color: rgba(0, 0, 0, 0.5); opacity: 1; }
input.input-underline:focus { border-bottom-color: currentColor !important; }
@media (max-width: 767px) {
/* iOS zoomt in Felder unter 16px hinein. */
input.input-underline { font-size: 16px; }
}
.choice-card {
display: flex;
gap: 0.8em;
align-items: flex-start;
padding: 0.9em 1em;
border: 1px solid rgba(0, 0, 0, 0.18);
border-radius: var(--control-radius, 0.4rem);
background: #fff;
cursor: pointer;
text-transform: none;
letter-spacing: normal;
transition: border-color .2s, box-shadow .2s;
}
.choice-card:has(input:checked) { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.choice-card input { width: auto; flex: 0 0 auto; margin: 0.2em 0 0; accent-color: #000; }
/* Theme-Hover für button (Hintergrund = Buttonfarbe, bleibt auf Touch nach dem
Tippen hängen) gilt hier nicht → Farbe bleibt immer die Swatch-Farbe. */
.swatch-dot {
flex: 0 0 auto;
width: var(--swatch-size, 30px);
height: var(--swatch-size, 30px);
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
cursor: pointer;
transition: box-shadow .2s ease, transform .2s ease;
}
.swatch-dot, .swatch-dot:hover, .swatch-dot:focus, .swatch-dot:active {
background-color: var(--swatch, #ccc) !important;
color: transparent !important;
}
.swatch-dot[aria-pressed="true"], .swatch-dot.is-active { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #000; }
@media (hover: hover) {
.swatch-dot:not([aria-pressed="true"]):not(.is-active):hover { transform: scale(1.08); }
}
.swatch-dot:focus-visible { outline: 2px solid #000; outline-offset: 4px; }