@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
:root {
--color-black: #000;
--color-white: #fff;
--color-error: #b00020;
--color-font: #786d68;
--color-bg-header: #f4f2f0;
--color-font-header: #8b7e79;
--color-bg-footer: #ebe8e4;
--color-bg-ansprechpartner: #f4f2f0;
--color-bg-offcanvas: #f4f2f0;
--color-border: #786d68;
--color-bg-product: #f7f7f7;
--color-bg-image: #f4f2f0;
--font-serif: "FSSiena";
--font-serif-bold: "FSSienaProSemiBold";
--font-sans-serif: "Montserrat";
--button-border-color: black;
--max-width-text: 880px;
--max-width-content: 1440px;
--height-concepts-link: 40px;
--height-navigation: 85px;
}
@media (min-width: 1024px) {
:root {
--height-navigation: 104px;
}
}
:root {
/* seiler & patek */
--color-seiler-beige: #F4F2F0;
--color-seiler-braun: #786D68;
--color-seiler-braun-50: #BBB5B3;
--color-seiler-braun-35: #CFCBC9;
--color-services-icon: #948054;
/* panerai */
--color-panerai-schwarz: #000000;
--color-panerai-weiss: #ffffff;
--color-panerai-grau: #f2f2f2;
/* oris */
--color-oris-schwarz: #000000;
--color-oris-weiss: #ffffff;
--color-oris-grau: #F6F5F5;
--color-oris-grau-ansprechpartner: #F6F5F5;
--color-oris-bg: #F6F5F5;
}
.panerai, .panerai-font {
--color-seiler-braun-50: #F2F2F2;
--color-seiler-braun-35: #0c2340;
--color-bg-ansprechpartner: var(--color-panerai-grau);
--color-bg-footer: var(--color-panerai-grau);
--color-bg-header: var(--color-panerai-grau);
--color-border: var(--color-panerai-schwarz);
--color-bg-product: var(--color-panerai-grau);
--color-bg-offcanvas: var(--color-panerai-schwarz);
}
.panerai .bg-panerai-black, .panerai-font .bg-panerai-black {
background-color: var(--color-panerai-schwarz);
}
.panerai .panerai-white, .panerai-font .panerai-white {
color: var(--color-panerai-weiss);
}
.panerai, .panerai-font {
--color-font: var(--color-panerai-schwarz);
--color-services-icon: var(--color-panerai-schwarz);
--font-serif: "helvetica-neue-lt-pro";
--font-serif-bold: "helvetica-neue-lt-pro";
--font-sans-serif: "helvetica-neue-lt-pro";
}
.oris, .oris-font {
--color-seiler-braun-50: #b5b5b5;
--color-seiler-braun-35: #f2a7a7;
--color-oris-pink: #f2a7a7;
--color-bg-ansprechpartner: var(--color-oris-grau-ansprechpartner);
--color-bg-footer: var(--color-oris-grau);
--color-bg-header: var(--color-oris-grau);
--color-bg-product: var(--color-oris-grau);
--color-bg-offcanvas: var(--color-oris-weiss);
--color-services-icon: var(--color-oris-pink);
--color-font: var(--color-oris-schwarz);
--font-serif: "BrownLLSub-Light";
--font-serif-bold: "BrownLLSub-Medium";
--font-sans-serif: "BrownLLSub-Light";
}
/* fontsfontsfonts */
/* fontsfontsfonts */
/* fonts */
/* fonts */
/* fontsfontsfonts */
/* fontsfontsfonts */
/* fonts */
/* fonts */
/* fonts */
/* fonts */
:root {
/* fonts */
/* seiler - default */
--font-size-h1: 31px;
--lineheight-h1: 33px;
--letter-spacing-h1: 0;
--fw-h1: 300;
--font-size-h2: 27px;
--lineheight-h2: 31px;
--letter-spacing-h2: 0;
--fw-h2: 300;
--font-size-h3: 19px;
--lineheight-h3: 26px;
--letter-spacing-h3: 0.04em;
--fw-h3: 600;
--font-size-lead: 16px;
--lineheight-lead: 23px;
--letter-spacing-lead: 0;
--fw-lead: 300;
--font-size-copy: 15px;
--lineheight-copy: 19px;
--letter-spacing-copy: 0;
--fw-copy: 300;
--font-size-akkordeon: 15px;
--lineheight-akkordeon: 23px;
--letter-spacing-akkordeon: 0.07em;
--fw-akkordeon: 500;
--font-size-footerfilter: 15px;
--lineheight-footerfilter: 23px;
--letter-spacing-footerfilter: 0;
--fw-footerfilter: 500;
--fw-footerakkordeon: 600;
--font-size-links: 12px;
--lineheight-links: 16px;
--letter-spacing-links: 0.07em;
--fw-links: 500;
}
@media (min-width: 1024px) {
:root {
--font-size-h1: 44px;
--lineheight-h1: 50px;
--font-size-h2: 34px;
--lineheight-h2: 42px;
--font-size-h3: 23px;
--lineheight-h3: 28px;
--font-size-lead: 20px;
--lineheight-lead: 29px;
--font-size-copy: 18px;
--lineheight-copy: 24px;
--font-size-akkordeon: 21px;
--lineheight-akkordeon: 27px;
--font-size-footerfilter: 14px;
--lineheight-footerfilter: 23px;
--font-size-links: 13px;
--lineheight-links: 17px;
}
}
.panerai, .panerai-font {
--font-size-h1: 25px;
--lineheight-h1: 34px;
--fw-h1: 700;
--font-size-h2: 23px;
--lineheight-h2: 30px;
--fw-h2: 700;
--font-size-h3: 17px;
--lineheight-h3: 22px;
--letter-spacing-h3: 1;
--fw-h3: 700;
--font-size-lead: 15px;
--lineheight-lead: 22px;
--fw-lead: 400;
--font-size-copy: 14px;
--lineheight-copy: 20px;
--fw-copy: 400;
--font-size-akkordeon: 15px;
--lineheight-akkordeon: 22px;
--letter-spacing-akkordeon: 1;
--fw-akkordeon: 400;
--font-size-footerfilter: 14.5px;
--lineheight-footerfilter: 26px;
--fw-footerfilter: 400;
--letter-spacing-footerfilter: 0.01em;
--font-size-links: 13px;
--lineheight-links: 16px;
--letter-spacing-links: 1;
--fw-links: 400;
}
@media (min-width: 1024px) {
.panerai, .panerai-font {
--font-size-h1: 32px;
--lineheight-h1: 42px;
--font-size-h2: 24px;
--lineheight-h2: 38px;
--font-size-h3: 17px;
--lineheight-h3: 22px;
--font-size-lead: 15px;
--lineheight-lead: 22px;
--font-size-copy: 15px;
--lineheight-copy: 22px;
--font-size-akkordeon: 20px;
--lineheight-akkordeon: 24px;
--font-size-footerfilter: 14.5px;
--lineheight-footerfilter: 26px;
--font-size-links: 13px;
--lineheight-links: 25px;
}
}
.oris, .oris-font {
--font-size-h1: 32px;
--lineheight-h1: 42px;
--letter-spacing-h1: 0.04em;
--font-size-h2: 32px;
--lineheight-h2: 42px;
--letter-spacing-h2: 0.04em;
--font-size-h3: 20px;
--lineheight-h3: 26px;
--letter-spacing-h3: 0.04em;
--font-size-lead: 16px;
--lineheight-lead: 24px;
--letter-spacing-lead: 0.01em;
--font-size-copy: 16px;
--lineheight-copy: 24px;
--letter-spacing-copy: 0.01em;
--font-size-akkordeon: 17px;
--lineheight-akkordeon: 26px;
--letter-spacing-akkordeon: 0.07em;
--font-size-footerfilter: 14.5px;
--lineheight-footerfilter: 23px;
--letter-spacing-footerfilter: 0.01em;
--font-size-links: 16px;
--lineheight-links: 24px;
--letter-spacing-links: 0.07em;
}
@media (min-width: 1024px) {
.oris, .oris-font {
--font-size-h1: 50px;
--lineheight-h1: 58px;
--letter-spacing-h1: 0;
--font-size-h2: 42px;
--lineheight-h2: 53px;
--font-size-h3: 20px;
--lineheight-h3: 26px;
--font-size-lead: 18px;
--lineheight-lead: 26px;
--font-size-copy: 17px;
--lineheight-copy: 25px;
--font-size-akkordeon: 23px;
--lineheight-akkordeon: 32px;
--font-size-footerfilter: 14.5px;
--lineheight-footerfilter: 23px;
--font-size-links: 17px;
--lineheight-links: 26px;
}
}
@font-face {
font-family: "FSSiena";
src: url(../fonts/FSSienaWeb-Light/FSSienaWeb-Light.woff2) format("woff2"), url(../fonts/FSSienaWeb-Light/FSSienaWeb-Light.woff) format("woff");
}
@font-face {
font-family: "FSSienaProSemiBold";
src: url("../fonts/FSSienaProSemiBold/font.woff2") format("woff2"), url("../fonts/FSSienaProSemiBold/font.woff") format("woff");
}
@font-face {
font-family: "FSSienaWebLight";
src: url(../fonts/FSSienaWeb-Light/FSSienaWeb-Light.woff2) format("woff2"), url(../fonts/FSSienaWeb-Light/FSSienaWeb-Light.woff) format("woff");
}
@font-face {
font-family: "FSSienaWebExtraLight";
src: url(../fonts/FSSienaWeb-ExtraLight/FSSienaWeb-ExtraLight.woff2) format("woff2"), url(../fonts/FSSienaWeb-ExtraLight/FSSienaWeb-ExtraLight.woff) format("woff");
}
/* oris */
@font-face {
font-family: "BrownLLSub-Light";
src: url("../fonts/Brown/BrownLLSub-Light.woff2") format("woff2"), url(../fonts/Brown/BrownLLSub-Light.woff) format("woff");
}
@font-face {
font-family: "BrownLLSub-Medium";
src: url("../fonts/Brown/BrownLLSub-Medium.woff2") format("woff2"), url(../fonts/Brown/BrownLLSub-Medium.woff) format("woff");
}
.tk-helvetica-neue-lt-pro {
font-family: "helvetica-neue-lt-pro", sans-serif;
}
.FSSienaProSemiBold {
font-family: "FSSienaProSemiBold", sans-serif;
}
.FSSiena {
font-family: "FSSiena", sans-serif;
}
.FSSienaWebLight {
font-family: "FSSienaWebLight", sans-serif;
}
.FSSienaWebExtraLight {
font-family: "FSSienaWebExtraLight", sans-serif;
}
.BrownRegular, .BrownLLSub-Medium {
font-family: "BrownLLSub-Medium", sans-serif;
}
.BrownLight, .BrownLLSub-Light {
font-family: "BrownLLSub-Light", sans-serif;
}
.montserrat-500 {
font-family: "Montserrat", sans-serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}
.fssiena-300 {
font-weight: 300;
}
.fssiena-600 {
font-weight: 600;
}
.Helvetica {
font-family: "helvetica-neue-lt-pro", sans-serif;
}
.HelveticaNeue {
font-family: "helvetica-neue-lt-pro", sans-serif;
}
.font-serif {
font-family: var(--font-serif);
}
.font-sans-serif {
font-family: var(--font-sans-serif);
}
body {
color: var(--color-font);
font-family: var(--font-serif);
font-size: var(--font-size-copy);
line-height: var(--lineheight-copy);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, .h1, h2, .h2, h3, .h3, p, ul li, a,
.copytext, .font-copytext,
.leadtext, .font-leadtext,
.links, .font-links,
.font-akkordeon,
.font-footer,
.font-filter {
color: var(--color-font);
font-family: var(--font-serif);
}
.seilerConcepts body h3, .seilerConcepts body .h3,
.juwelierSeiler body h3,
.juwelierSeiler body .h3,
.patek body h3,
.patek body .h3,
.seiler-font h3,
.seiler-font .h3 {
font-family: "FSSienaProSemiBold", sans-serif;
}
.seilerConcepts body .links, .seilerConcepts body .font-links,
.seilerConcepts body .font-akkordeon,
.seilerConcepts body .font-footer,
.seilerConcepts body .font-filter,
.juwelierSeiler body .links,
.juwelierSeiler body .font-links,
.juwelierSeiler body .font-akkordeon,
.juwelierSeiler body .font-footer,
.juwelierSeiler body .font-filter,
.patek body .links,
.patek body .font-links,
.patek body .font-akkordeon,
.patek body .font-footer,
.patek body .font-filter,
.seiler-font .links,
.seiler-font .font-links,
.seiler-font .font-akkordeon,
.seiler-font .font-footer,
.seiler-font .font-filter {
font-family: Montserrat;
}
.seilerConcepts body h3, .seilerConcepts body .h3,
.seilerConcepts body .links, .seilerConcepts body .font-links,
.seilerConcepts body .font-akkordeon,
.juwelierSeiler body h3,
.juwelierSeiler body .h3,
.juwelierSeiler body .links,
.juwelierSeiler body .font-links,
.juwelierSeiler body .font-akkordeon,
.patek body h3,
.patek body .h3,
.patek body .links,
.patek body .font-links,
.patek body .font-akkordeon,
.seiler-font h3,
.seiler-font .h3,
.seiler-font .links,
.seiler-font .font-links,
.seiler-font .font-akkordeon {
text-transform: uppercase;
}
.seilerConcepts body p strong,
.juwelierSeiler body p strong,
.patek body p strong,
.seiler-font p strong {
font-family: "FSSienaProSemiBold", sans-serif;
}
.seilerConcepts body h3.h1,
.juwelierSeiler body h3.h1,
.patek body h3.h1,
.seiler-font h3.h1 {
font-family: var(--font-serif);
text-transform: none;
}
.panerai body, .panerai-font {
font-family: "helvetica-neue-lt-pro", sans-serif;
}
.panerai body h1, .panerai body .h1, .panerai body h2, .panerai body .h2, .panerai body h3, .panerai body .h3, .panerai-font h1, .panerai-font .h1, .panerai-font h2, .panerai-font .h2, .panerai-font h3, .panerai-font .h3 {
font-family: "helvetica-neue-lt-pro", sans-serif;
}
@media (min-width: 1024px) {
.panerai body, .panerai-font {
--fw-akkordeon: 700;
}
}
.oris body h1, .oris body .h1, .oris body h2, .oris body .h2, .oris body h3, .oris body .h3, .oris-font h1, .oris-font .h1, .oris-font h2, .oris-font .h2, .oris-font h3, .oris-font .h3 {
font-family: "BrownLLSub-Medium", sans-serif;
font-weight: 400;
}
.oris body .copytext, .oris body .font-copytext, .oris body p,
.oris body .leadtext, .oris body .font-leadtext,
.oris body .links, .oris body .font-links,
.oris body .font-akkordeon,
.oris body .font-footer,
.oris body .font-filter, .oris-font .copytext, .oris-font .font-copytext, .oris-font p,
.oris-font .leadtext, .oris-font .font-leadtext,
.oris-font .links, .oris-font .font-links,
.oris-font .font-akkordeon,
.oris-font .font-footer,
.oris-font .font-filter {
font-family: "BrownLLSub-Light", sans-serif;
font-weight: 400;
}
.oris body h1, .oris body .h1,
.oris body h2, .oris body .h2,
.oris body h3, .oris body .h3,
.oris body .links, .oris body .font-links,
.oris body .font-akkordeon, .oris-font h1, .oris-font .h1,
.oris-font h2, .oris-font .h2,
.oris-font h3, .oris-font .h3,
.oris-font .links, .oris-font .font-links,
.oris-font .font-akkordeon {
text-transform: uppercase;
}
h1, .h1 {
font-size: var(--font-size-h1);
line-height: var(--lineheight-h1);
letter-spacing: var(--letter-spacing-h1);
font-weight: var(--fw-h1);
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
}
h2, .h2 {
font-size: var(--font-size-h2);
line-height: var(--lineheight-h2);
letter-spacing: var(--letter-spacing-h2);
font-weight: var(--fw-h2);
}
h3, .h3 {
font-size: var(--font-size-h3);
line-height: var(--lineheight-h3);
letter-spacing: var(--letter-spacing-h3);
font-weight: var(--fw-h3);
}
.copytext, .font-copytext, p {
font-size: var(--font-size-copy);
line-height: var(--lineheight-copy);
letter-spacing: var(--letter-spacing-copy);
font-weight: var(--fw-copy);
}
.leadtext, .font-leadtext {
font-size: var(--font-size-lead);
line-height: var(--lineheight-lead);
letter-spacing: var(--letter-spacing-lead);
font-weight: var(--fw-lead);
}
.links, .font-links {
font-size: var(--font-size-links);
line-height: var(--lineheight-links);
letter-spacing: var(--letter-spacing-links);
font-weight: var(--fw-links);
}
.font-akkordeon {
font-size: var(--font-size-akkordeon);
line-height: var(--lineheight-akkordeon);
letter-spacing: var(--letter-spacing-akkordeon);
font-weight: var(--fw-akkordeon);
}
.font-footer,
.font-filter {
font-size: var(--font-size-footerfilter);
line-height: var(--lineheight-footerfilter);
letter-spacing: var(--letter-spacing-footerfilter);
font-weight: var(--fw-footerfilter);
}
section p, section ul, section ol {
margin-bottom: 8px;
}
.hyphens {
hyphens: auto;
hyphenate-limit-chars: 6 3 3;
}
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl, .container-fluid {
max-width: var(--max-width-content);
}
.container-xxl, .container-fluid {
--bs-gutter-x: 32px;
}
@media (min-width: 768px) {
.container-xxl, .container-fluid {
--bs-gutter-x: 96px;
}
}
.container-xxl .row, .container-fluid .row {
--bs-gutter-x: 32px;
}
@media (min-width: 768px) {
.container-xxl .row, .container-fluid .row {
--bs-gutter-x: 96px;
}
}
.container-xxl, .container-fluid {
/*
.row {
--bs-gutter-x: 16px !important;
}
padding-right: calc((48px) * .5);
padding-left: calc((48px) * .5);
@media (min-width: 1200px) {
padding-right: calc((96px) * .5);
padding-left: calc((96px) * .5);
}
*/
}
section {
margin-top: 48px;
margin-bottom: 96px;
}
.portrait {
aspect-ratio: 3/4;
object-fit: cover;
}
.portrait {
aspect-ratio: 660/704;
object-fit: cover;
}
.square {
aspect-ratio: 1/1;
object-fit: cover;
}
.landscape {
aspect-ratio: 3/2;
object-fit: cover;
}
.landscape {
aspect-ratio: 433/363;
object-fit: cover;
}
/* small link */
.link, .linkButton, .textck a {
font-family: var(--font-sans-serif);
font-weight: 500;
font-size: var(--font-size-links);
line-height: var(--lineheight-links);
text-transform: uppercase;
color: var(--color-font);
text-decoration: none;
letter-spacing: var(--letter-spacing-links);
display: inline-block;
border-bottom: 1px solid transparent;
transition: border-bottom-color 0.4s;
}
.link::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='9.7' viewBox='0 0 5.28 8.6'%3E%3Cpolygon points='.83 8.6 0 7.73 3.55 4.29 0 .86 .83 0 5.28 4.29 .83 8.6' fill='%23786D68'/%3E%3C/svg%3E");
margin-left: 10px;
}
a:hover .link, .textck a:hover {
border-bottom: 1px solid var(--color-border);
}
.link.link-copy {
font-size: var(--font-size-copy);
line-height: var(--lineheight-copy);
letter-spacing: var(--letter-spacing-copy);
}
.link.link-copy::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.4' height='12' viewBox='0 0 5.28 8.6'%3E%3Cpolygon points='.83 8.6 0 7.73 3.55 4.29 0 .86 .83 0 5.28 4.29 .83 8.6' fill='%23786D68'/%3E%3C/svg%3E");
margin-left: 10px;
}
.linkButton {
border: 1px solid var(--color-border);
padding: 16px 32px;
transition: all 0.4s;
}
.linkButton:hover {
border: 1px solid var(--color-border);
background-color: var(--color-border);
color: var(--color-white);
}
.linkButtonInvert {
color: var(--color-white);
background-color: var(--color-border);
}
.linkButtonInvert:hover {
color: var(--color-border);
background-color: var(--color-white);
}
.bg-special {
background-color: var(--color-bg-image);
}
.panerai .linkButton {
padding: 12px 24px;
}
.panerai .linkButton, .panerai .textck a {
text-transform: none;
}
.oris .linkButton {
padding: 0;
border: 0;
}
.oris .linkButton span {
border-bottom: 1px solid var(--color-font);
}
.oris .linkButton:hover {
background-color: var(--color-white);
color: var(--color-font);
}
.oris .linkButton:hover span {
border-bottom: 1px solid var(--color-oris-pink);
}
.oris .linkButton, .oris .textck a {
text-transform: none;
}
.mb-36px {
margin-bottom: 36px;
}
.p-32px {
padding: 32px;
}
.cursor-pointer:hover {
cursor: pointer;
}
.bg-color-image {
background-color: var(--color-bg-image);
}
.bg-color-product {
background-color: var(--color-bg-product);
}
.oris .bg-color-product {
background-image: linear-gradient(to bottom, #F3C1C2, var(--color-oris-grau));
}
img {
max-width: 100%;
}
/*
nav, footer {padding: 24px;margin-bottom:48px;}
nav, footer {border:1px solid #eee;position:relative}
*/
.bg-transparent {
background-color: transparent;
}
.gutter-x-18px {
--bs-gutter-x: 18px !important;
}
.color-black {
color: #000;
}
.color-white {
color: #fff;
}
@media (min-width: 768px) {
.w-md-25 {
width: 25% !important;
}
}
@media (min-width: 768px) {
.w-md-50 {
width: 50% !important;
}
}
section.component-headline-text:has(+ section.component-cta) {
margin-bottom: 16px;
}
section.component-headline-text + section.component-cta {
margin-top: 0px;
}
.weekday {
width: 32px;
display: inline-block;
}
.scroll-margin-top {
scroll-margin-top: 150px;
}
nav#breadcrumb {
background-color: transparent;
}
nav .breadcrumb {
--bs-breadcrumb-item-padding-x: 10px;
--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.7' height='8' viewBox='0 0 5.28 8.6'%3E%3Cpolygon points='.83 8.6 0 7.73 3.55 4.29 0 .86 .83 0 5.28 4.29 .83 8.6' fill='%23BBB5B3'/%3E%3C/svg%3E");
color: var(--color-font);
}
nav .breadcrumb a {
text-decoration: none;
color: var(--color-seiler-braun-50);
}
.panerai nav .breadcrumb a, .panerai nav .breadcrumb .breadcrumb-item.active {
color: var(--color-panerai-weiss);
}
.oris nav .breadcrumb a, .oris nav .breadcrumb .breadcrumb-item.active {
color: var(--color-oris-schwarz);
}
.backlink::before {
--bs-backlink-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4.7' height='8' viewBox='0 0 5.28 8.6'%3E%3Cpolygon points='.83 8.6 0 7.73 3.55 4.29 0 .86 .83 0 5.28 4.29 .83 8.6' fill='%23BBB5B3'/%3E%3C/svg%3E");
--bs-breadcrumb-item-padding-x: 10px;
float: left;
content: var(--bs-backlink-divider, "/");
padding-left: var(--bs-breadcrumb-item-padding-x);
transform: rotate(180deg);
height: 27px;
}
/* =========================================================================
Warenkorb & Bestellvorgang
Zu den Templates templates/_includes/cart.twig und cart-steps.twig.
Der Warenkorb selbst ist unter `.cart` gekapselt; die Schrittleiste darunter
ist eine wörtliche Übernahme aus dem alten Projekt und behält deshalb dessen
Klassennamen.
========================================================================= */
/* --- Schrittleiste -------------------------------------------------------
1:1 aus dem alten Projekt übernommen – Markup in
templates/_includes/cart-steps.twig (Kopie von
_partials/_checkout-steps-row.html), Regeln unten wörtlich aus der
Live-styles.css von seiler-juwelier.ch. Geometrie, Klassennamen und Aufbau
sind unverändert; angepasst sind nur Typo und Farben, die jetzt aus den
Design-Tokens des neuen Projekts kommen – damit trägt die Leiste auch die
Panerai-/Oris-Varianten mit. Bewusst nicht unter `.cart` geschachtelt, damit
die Selektoren die des Originals bleiben. Die Pfeilspitzen liegen als
web/images/pfeil.svg und web/images/pfeil-active.svg im Webroot; ihre
Füllungen verweisen ebenfalls auf die Tokens.
------------------------------------------------------------------------ */
/* `.row-checkout-steps` ist selbst eine `.row`. In _base.scss bekommt jede
`.row` innerhalb von `.container-xxl` einen Gutter von 32px (ab 768px 96px)
und damit negative Aussenränder von -16px bzw. -48px. Die Spalten der Leiste
tragen aber bewusst kein Padding (siehe .col-checkout-wrapper-*), das also
nichts zurückholt – die Leiste würde über den Container hinausragen.
Doppelte Klasse für die Spezifität: `.container-xxl .row` wiegt gleich
schwer, diese Regel steht nur später. */
.row.row-checkout-steps {
--bs-gutter-x: 0;
margin-bottom: 30px;
background-color: var(--color-white);
}
.row-checkout-steps .row-checkout-wrapper {
position: relative;
height: 57px;
margin-right: 15px;
padding-left: 15px;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
/* Typo der Beschriftung nach dem neuen Design (war: 17px/27px in #574341 mit
geerbter Schrift). `top:13px` war auf die alte Zeilenhöhe von 27px gerechnet
und würde bei kleinerer Schrift nicht mehr mittig sitzen – deshalb über die
volle Höhe zentriert statt von oben abgesetzt. Die horizontale Platzierung
(left:30px / right:0) ist die des Originals. */
.row-checkout-steps .row-checkout-wrapper span {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 30px;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-sans-serif);
font-weight: 500;
font-size: var(--font-size-links);
line-height: var(--lineheight-links);
letter-spacing: var(--letter-spacing-links);
text-transform: uppercase;
text-align: center;
color: var(--color-font);
}
/* Der aktive Schritt bekommt sein Fett im Original über den Wrapper vererbt –
das greift nicht mehr, seit das span selbst ein font-weight setzt. */
.row-checkout-steps .row-checkout-wrapper--active span {
font-weight: 600;
}
/* Der erste Schritt hat keine einlaufende Spitze, die Beschriftung darf weiter
nach links. */
.row-checkout-steps .row-checkout-wrapper--1 span {
left: 15px;
}
.row-checkout-steps .row-checkout-wrapper--active {
background-color: var(--color-bg-header);
font-weight: 700;
}
.col-checkout-wrapper-1 {
border-left: 1px solid var(--color-border);
}
.col-checkout-wrapper-1,
.col-checkout-wrapper-2,
.col-checkout-wrapper-3,
.col-checkout-wrapper-4 {
padding-right: 0;
padding-left: 0;
}
/* Die Spitze hängt rechts aus ihrem Kasten heraus und ragt in den nächsten
Schritt hinein. `pfeil-left` ist dieselbe Grafik am linken Rand – sie bildet
die Kerbe. */
.pfeil-left,
.pfeil1,
.pfeil1-active,
.pfeil2,
.pfeil2-active,
.pfeil3,
.pfeil3-active,
.pfeil4,
.pfeil4-active {
position: absolute;
top: -1px;
right: -27px;
width: 28px;
height: 57px;
}
.pfeil-left {
left: 0;
}
/* Frühere Schritte liegen über den späteren, damit ihre Spitze den Nachbarn
überdeckt und nicht umgekehrt. */
.col-checkout-wrapper-1 {
z-index: 50;
}
.col-checkout-wrapper-2 {
z-index: 40;
}
.col-checkout-wrapper-3 {
z-index: 30;
}
.col-checkout-wrapper-4 {
z-index: 20;
}
/* --- Warenkorb ----------------------------------------------------------- */
.cart {
/* Meldungen: Flash-Messages und Commerce-Notices */
}
.cart__message {
margin-bottom: 16px;
padding: 12px 16px;
border: 1px solid var(--color-border);
font-size: var(--font-size-copy);
line-height: var(--lineheight-copy);
}
.cart__message--error {
border-color: var(--color-error);
color: var(--color-error);
}
.cart {
/* Kopfzeile der Positionsliste (nur Desktop) */
}
.cart__head {
padding-bottom: 12px;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-sans-serif);
font-weight: 500;
font-size: var(--font-size-links);
line-height: var(--lineheight-links);
letter-spacing: var(--letter-spacing-links);
text-transform: uppercase;
}
.cart {
/* Eine Position */
}
.cart__item {
align-items: flex-start;
padding: 24px 0;
border-bottom: 1px solid var(--color-seiler-braun-35);
}
.cart__item--error {
border-left: 2px solid var(--color-error);
}
.cart__image .lqip-wrapper,
.cart__image img {
background-color: var(--color-bg-product);
}
.cart__brand {
margin-bottom: 4px;
}
.cart__title {
margin-bottom: 12px;
font-size: var(--font-size-copy);
line-height: var(--lineheight-copy);
}
.cart__title a {
color: var(--color-font);
text-decoration: none;
}
.cart__title a:hover {
text-decoration: underline;
}
.cart {
/* Artikelnummer, Grösse, Menge – Beschriftung und Wert nebeneinander */
}
.cart__meta {
margin: 0;
font-family: var(--font-sans-serif);
font-size: var(--font-size-links);
line-height: var(--lineheight-links);
letter-spacing: var(--letter-spacing-links);
color: var(--color-seiler-braun-50);
}
.cart__meta dt {
float: left;
clear: left;
margin-right: 6px;
font-weight: 500;
}
.cart__meta dt::after {
content: ":";
}
.cart__meta dd {
margin: 0;
font-weight: 300;
}
.cart__errors {
margin: 12px 0 0;
padding-left: 18px;
color: var(--color-error);
font-size: var(--font-size-copy);
line-height: var(--lineheight-copy);
}
.cart {
/* Preis und Entfernen-Knopf */
}
.cart__price {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
margin-top: 16px;
font-size: var(--font-size-copy);
line-height: var(--lineheight-copy);
}
.cart__amount-label {
margin-right: 4px;
}
.cart__remove {
flex: 0 0 auto;
padding: 0 4px;
border: 0;
background: transparent;
color: var(--color-seiler-braun-50);
font-size: 24px;
line-height: 1;
cursor: pointer;
transition: color 0.3s;
}
.cart__remove:hover {
color: var(--color-font);
}
.cart {
/* Summen */
}
.cart__totals {
padding-top: 16px;
font-size: var(--font-size-copy);
line-height: var(--lineheight-copy);
}
.cart__totals--sum {
padding-bottom: 16px;
font-family: var(--font-serif-bold);
font-weight: 600;
}
.cart {
/* Weiter einkaufen / weiter zur Adresse */
}
.cart__actions {
row-gap: 16px;
margin-top: 48px;
}
.cart__empty {
margin-bottom: 24px;
font-size: var(--font-size-lead);
line-height: var(--lineheight-lead);
}
@media (min-width: 992px) {
.cart__price {
justify-content: flex-end;
gap: 32px;
margin-top: 0;
}
}
@media (max-width: 1199px) {
footer .container-footer, footer .row-footer, footer .col-footer {
padding: 0;
margin: 0;
width: 100%;
}
footer .accordion-item {
padding: 16px;
}
footer .accordion-item .accordion-body {
padding: 0;
}
}
@media (min-width: 1200px) {
footer .font-akkordeon {
font-size: var(--font-size-footerfilter);
line-height: var(--lineheight-footerfilter);
letter-spacing: var(--letter-spacing-footerfilter);
font-weight: var(--fw-footerakkordeon) !important;
}
}
footer .accordion {
--bs-accordion-bg: var(--color-bg-footer) !important;
}
footer {
background-color: var(--color-bg-footer);
}
footer .accordion .accordion-item,
footer .accordion .accordion-item:first-child {
background-color: transparent;
border-top: none;
border-bottom: 1px solid var(--color-seiler-braun-35);
}
footer .accordion .accordion-item .accordion-body,
footer .accordion .accordion-item:first-child .accordion-body {
margin: 0;
}
footer .accordion-item h2 button,
footer .accordion-item .accordion-body,
footer .accordion-item .accordion-body a,
footer .accordion-item .accordion-body a span,
footer .footer-block-body,
footer .footer-block-body a,
footer .footer-block-body a span {
text-decoration: none;
}
@media (min-width: 1200px) {
footer {
padding-top: 80px;
}
footer .footer-block {
padding-bottom: 8px;
}
footer .footer-block-title {
margin-bottom: 16px;
}
}
footer svg {
width: 10px;
height: 10px;
}
footer .somed svg {
fill: var(--color-font);
}
footer .somed .link-instagram svg {
width: 18px;
height: 18px;
}
footer .somed .link-facebook svg {
width: 8px;
height: 18px;
}
footer .somed .link-youtube svg {
width: 25.5px;
height: 18px;
}
footer .somed .link-linkedin svg {
width: 24px;
height: 24px;
}
footer .zahlungsarten {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
color: var(--color-font);
font-size: 22px;
line-height: 1;
}
footer .zahlungsarten .pf-svg svg {
height: 22px;
width: auto;
fill: currentColor;
display: block;
}
header img {
aspect-ratio: 1440/423;
object-fit: cover;
}
@media (min-width: 1200px) {
header .header-text {
position: absolute;
left: 48px;
bottom: 48px;
background-color: var(--color-bg-header);
}
}
@media (max-width: 1199px) {
header a {
border-bottom: 1px solid var(--color-border);
}
}
header.section-homepage img {
aspect-ratio: auto;
max-height: 80vh;
object-fit: cover;
}
/*
body:has(#navswitch:checked) {
background-color: red !important;
.col-navswitch .navswitch,
.col-search-close .button-search {
display: none;
}
}
*/
.button-favoriten {
position: relative;
}
.counterbubble {
font-size: 11px;
line-height: 11px;
font-weight: 400;
border: 1px solid var(--color-font);
display: flex;
justify-content: center;
align-items: center;
width: 16px;
height: 16px;
border-radius: 32px;
padding-bottom: 1px;
background-color: var(--color-bg-footer);
color: var(--color-font);
left: -7px;
bottom: -7px;
}
.counterbubble-big {
width: 20px;
height: 20px;
}
.navbar-to-concepts {
background-color: var(--color-bg-header);
border-bottom: 1px solid rgb(218, 213, 210);
height: var(--height-concepts-link);
}
.navbar-to-concepts svg {
transform: scaleX(-1);
height: 11px;
width: 11px;
}
.navbar-to-concepts span {
font-family: Montserrat;
font-size: 13px;
font-weight: 500;
line-height: 1.23;
letter-spacing: 0.91px;
color: #786d68;
}
.oris .navbar-to-concepts {
background-color: var(--color-oris-weiss);
}
@media (max-width: 767px) {
body.navi-active header {
margin-top: var(--height-navigation);
}
}
@media (min-width: 768px) {
body:has(#offcanvasNavigation.show) #navswitch + nav {
position: relative;
z-index: 1050;
}
body:has(#offcanvasNavigation.show) #navswitch + nav .navswitch .line1 {
top: 8px;
transform: rotate(45deg);
}
body:has(#offcanvasNavigation.show) #navswitch + nav .navswitch .line2 {
display: none;
}
body:has(#offcanvasNavigation.show) #navswitch + nav .navswitch .line3 {
top: 8px;
transform: rotate(135deg);
}
body.show-concepts-link:has(#offcanvasNavigation.show) #navswitch + nav {
top: auto;
}
}
nav .col-logo svg, #offcanvasNavigation .col-logo svg {
max-width: 50vw;
width: 157.4px;
height: 43.5px;
}
@media (min-width: 768px) {
nav .col-logo svg, #offcanvasNavigation .col-logo svg {
width: 202.1px;
height: 55.9px;
}
}
.panerai nav .col-logo svg, .panerai #offcanvasNavigation .col-logo svg {
width: 184.3px;
height: 21.5px;
}
@media (min-width: 768px) {
.panerai nav .col-logo svg, .panerai #offcanvasNavigation .col-logo svg {
width: 184.3px;
height: 21.5px;
}
}
.oris nav .col-logo svg, .oris #offcanvasNavigation .col-logo svg {
width: 90px;
height: 40.37px;
}
@media (min-width: 768px) {
.oris nav .col-logo svg, .oris #offcanvasNavigation .col-logo svg {
width: 90px;
height: 40.37px;
}
}
nav {
display: flex;
height: var(--height-navigation);
background-color: var(--color-bg-header);
}
nav .container-nav {
margin-top: auto;
margin-bottom: auto;
}
nav .navswitch {
position: relative;
display: block;
width: 24px;
height: 18px;
}
nav .navswitch .line {
width: 24px;
height: 1px;
background-color: var(--color-font);
position: absolute;
transform: rotate(0);
transition: 0.25s ease-in-out;
}
nav .navswitch .line1 {
top: 0;
}
nav .navswitch .line2 {
top: 8px;
}
nav .navswitch .line3 {
top: 16px;
}
nav .navswitch .menu-str {
position: absolute;
font-family: Montserrat;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.91px;
color: #6d635f;
left: 40px;
top: -3px;
}
nav .col-search-close svg {
width: 16px;
}
@media (min-width: 768px) {
nav .col-search-close svg {
width: 18px;
}
}
nav .button-patek {
margin-left: 40px;
}
nav .button-patek svg {
width: 143.3px;
height: 84px;
}
#offcanvasNavigation {
width: 100%;
max-width: 768px;
}
@media (min-width: 768px) {
#offcanvasNavigation {
top: var(--height-navigation);
max-width: 50%;
}
}
@media (min-width: 800px) {
#offcanvasNavigation {
max-width: 400px;
}
}
#offcanvasNavigation .offcanvas-header {
height: var(--height-navigation);
}
#offcanvasNavigation {
border: none;
background-color: var(--color-bg-header);
}
#offcanvasNavigation .col-search-close svg {
width: 16px;
}
#offcanvasNavigation .col-search-close .button-close {
display: block;
}
#offcanvasNavigation .col-search-close button {
background-color: transparent;
border: none;
padding: 0;
}
#offcanvasNavigation .links1 .nav-item {
padding-top: 16px;
padding-bottom: 16px;
}
#offcanvasNavigation .links1 .nav-item a,
#offcanvasNavigation .links1 .nav-item span {
font-family: Montserrat;
font-size: 16px;
font-weight: 500;
line-height: 1;
letter-spacing: 1.12px;
color: #786d68;
text-transform: uppercase;
text-decoration: none;
}
#offcanvasNavigation .links1 .nav-item a svg,
#offcanvasNavigation .links1 .nav-item span svg {
height: 14px;
}
#offcanvasNavigation .links1 .nav-item label:hover,
#offcanvasNavigation .links1 .nav-item a:hover span,
#offcanvasNavigation .links1 .nav-item span:hover {
cursor: pointer;
text-decoration: underline;
}
#offcanvasNavigation .offcanvas-body {
flex-grow: 0;
border-top: 1px solid var(--color-seiler-braun-35);
}
#offcanvasNavigation .offcanvas-body hr {
border-top: 1px solid var(--color-seiler-braun-35);
height: 0;
opacity: 1;
margin-left: -16px;
margin-right: -16px;
}
#offcanvasNavigation .links2 .nav-item {
padding-top: 12px;
padding-bottom: 12px;
}
#offcanvasNavigation .links2 .nav-item a {
font-family: Montserrat;
font-size: 15px;
font-weight: 500;
line-height: 1.07;
letter-spacing: normal;
color: #786d68;
text-decoration: none;
}
#offcanvasNavigation .links2 .nav-item a svg {
width: 20px;
height: auto;
margin-right: 20px;
}
#offcanvasNavigation .arrow-back {
display: none;
transform: rotate(180deg);
}
#offcanvasNavigation .links1 .nav-item {
display: flex;
}
#offcanvasNavigation .links1 .nav-item label {
justify-content: space-between;
}
#offcanvasNavigation .links1 .nav-item + ul {
display: none;
}
@media (max-width: 767px) {
#offcanvasNavigation .links1:has(.nav-item input:checked) .nav-item {
display: none;
}
#offcanvasNavigation .links1:has(.nav-item input:checked) .nav-item:has(input:checked) {
display: flex;
}
#offcanvasNavigation .links1:has(.nav-item input:checked) .nav-item:has(input:checked) .arrow-back {
display: block;
}
#offcanvasNavigation .links1:has(.nav-item input:checked) .nav-item:has(input:checked) .arrow-forward {
display: none;
}
#offcanvasNavigation .links1:has(.nav-item input:checked) .nav-item:has(input:checked) label {
justify-content: start;
}
}
#offcanvasNavigation .links1:has(.nav-item input:checked) .nav-item:has(input:checked) + ul {
display: block;
}
#offcanvasNavigation .links1:has(.nav-item input:checked) .nav-item:has(input:checked) + ul .nav-item {
display: flex;
}
@media (min-width: 768px) {
#offcanvasNavigation .links1 .links1 {
position: absolute;
left: 400px;
padding: 16px;
display: block;
width: 400px;
height: 100vh;
top: 0;
background-color: var(--color-bg-offcanvas);
border-left: 1px solid var(--color-seiler-braun-35);
border-top: 1px solid var(--color-seiler-braun-35);
}
}
@media (min-width: 768px) {
.show-concepts-link #offcanvasNavigation {
top: calc(var(--height-concepts-link) + var(--height-navigation));
}
}
@media (min-width: 768px) {
.show-concepts-link .offcanvas-backdrop {
top: calc(var(--height-concepts-link) + var(--height-navigation));
}
}
.show-concepts-link .component-product-overview .offcanvas-backdrop {
top: 0;
}
.panerai nav {
background-color: var(--color-panerai-schwarz);
color: var(--color-panerai-weiss);
}
.panerai nav .navswitch .menu-str {
font-family: helvetica-neue-lt-pro;
color: var(--color-panerai-weiss);
}
.panerai nav svg {
color: var(--color-panerai-weiss);
fill: var(--color-panerai-weiss);
}
.panerai nav svg path {
fill: var(--color-panerai-weiss) !important;
}
.panerai nav .navswitch .line {
background-color: var(--color-panerai-weiss);
}
.panerai #offcanvasNavigation {
background-color: var(--color-panerai-schwarz);
color: var(--color-panerai-weiss);
}
.panerai #offcanvasNavigation .links1 .nav-item a,
.panerai #offcanvasNavigation .links1 .nav-item span,
.panerai #offcanvasNavigation .links2 .nav-item a,
.panerai #offcanvasNavigation .links2 .nav-item span {
font-family: helvetica-neue-lt-pro;
color: var(--color-panerai-weiss);
}
.panerai #offcanvasNavigation .links1 .nav-item a svg,
.panerai #offcanvasNavigation .links1 .nav-item span svg,
.panerai #offcanvasNavigation .links2 .nav-item a svg,
.panerai #offcanvasNavigation .links2 .nav-item span svg {
color: var(--color-panerai-weiss);
fill: var(--color-panerai-weiss);
}
.panerai #offcanvasNavigation .links1 .nav-item a svg path,
.panerai #offcanvasNavigation .links1 .nav-item span svg path,
.panerai #offcanvasNavigation .links2 .nav-item a svg path,
.panerai #offcanvasNavigation .links2 .nav-item span svg path {
fill: var(--color-panerai-weiss) !important;
}
.oris nav {
background-color: var(--color-oris-weiss);
color: var(--color-oris-schwarz);
}
.oris nav .navswitch .menu-str {
font-family: BrownLLSub-Light;
color: var(--color-oris-schwarz);
}
.oris nav svg {
color: var(--color-oris-schwarz);
fill: var(--color-oris-schwarz);
}
.oris nav svg path {
fill: var(--color-oris-schwarz) !important;
}
.oris nav .navswitch .line {
background-color: var(--color-oris-schwarz);
}
.oris #offcanvasNavigation {
background-color: var(--color-oris-weiss);
color: var(--color-oris-schwarz);
}
.oris #offcanvasNavigation .links1 .nav-item a,
.oris #offcanvasNavigation .links1 .nav-item span,
.oris #offcanvasNavigation .links2 .nav-item a,
.oris #offcanvasNavigation .links2 .nav-item span {
font-family: BrownLLSub-Light;
color: var(--color-oris-schwarz);
}
.oris #offcanvasNavigation .links1 .nav-item a svg,
.oris #offcanvasNavigation .links1 .nav-item span svg,
.oris #offcanvasNavigation .links2 .nav-item a svg,
.oris #offcanvasNavigation .links2 .nav-item span svg {
color: var(--color-oris-schwarz);
fill: var(--color-oris-schwarz);
}
.oris #offcanvasNavigation .links1 .nav-item a svg path,
.oris #offcanvasNavigation .links1 .nav-item span svg path,
.oris #offcanvasNavigation .links2 .nav-item a svg path,
.oris #offcanvasNavigation .links2 .nav-item span svg path {
fill: var(--color-oris-schwarz) !important;
}
body.navi-fix nav#navigation {
position: fixed !important;
width: 100%;
z-index: 20;
top: 0 !important;
}
body.navi-fix {
margin-top: var(--height-navigation);
/*
@media (min-width: 768px) {
.show-concepts-link #offcanvasNavigation {
top: calc(var(--height-navigation));
}
}
.show-concepts-link {
//--height-concepts-link: 0px;
.offcanvas-backdrop{
top: var(--height-concepts-link);
}
}
*/
}
nav {
position: relative;
}
nav .nav-search {
position: absolute;
inset: 0;
z-index: 1;
display: flex;
background-color: var(--color-white);
opacity: 0;
visibility: hidden;
transform: translateY(-12px);
transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
nav .nav-search .nav-search-input {
background-color: transparent;
border: 1px solid var(--color-font);
color: var(--color-font);
outline: none;
}
nav .nav-search .nav-search-input::placeholder {
color: var(--color-font);
opacity: 1;
}
nav .nav-search .nav-search-spacer {
visibility: hidden;
pointer-events: none;
}
nav .nav-search .nav-search-results {
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: var(--color-white);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
max-height: calc(100dvh - var(--height-navigation));
overflow-y: auto;
display: none;
}
nav .nav-search .nav-search-results.is-visible {
display: block;
}
nav .nav-search .nav-search-status {
padding: 0.75rem 0 0.25rem;
font-size: var(--font-size-lead);
line-height: var(--lineheight-lead);
letter-spacing: var(--letter-spacing-lead);
color: var(--color-font);
opacity: 0.7;
}
nav .nav-search .nav-search-err {
color: #b00020;
opacity: 1;
}
nav .nav-search .nav-search-hits {
padding-bottom: 0.5rem;
}
nav .nav-search .nav-search-hit {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.6rem 0;
border-top: 1px solid rgba(0, 0, 0, 0.08);
color: var(--color-font);
text-decoration: none;
}
nav .nav-search .nav-search-hit:first-child {
border-top: 0;
}
nav .nav-search .nav-search-hit:hover .nav-search-hit-title {
text-decoration: underline;
}
nav .nav-search .nav-search-hit-img {
flex: none;
width: 78px;
height: 78px;
object-fit: cover;
border-radius: 6px;
background: var(--color-bg-image);
}
nav .nav-search .nav-search-hit-body {
display: flex;
flex-direction: column;
min-width: 0;
}
nav .nav-search .nav-search-hit-title {
font-size: var(--font-size-lead);
line-height: var(--lineheight-lead);
letter-spacing: var(--letter-spacing-lead);
font-weight: 600;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
nav .nav-search .nav-search-hit-sub {
font-size: var(--font-size-copy);
line-height: var(--lineheight-copy);
letter-spacing: var(--letter-spacing-copy);
opacity: 0.7;
}
nav .nav-search .nav-search-hit-price {
margin-left: auto;
white-space: nowrap;
font-size: var(--font-size-lead);
font-variant-numeric: tabular-nums;
}
nav.nav-search-active .nav-search {
z-index: 4;
opacity: 1;
visibility: visible;
transform: translateY(0);
}
body.nav-search-open {
overflow: hidden;
}
.splide img {
width: 100%;
}
.splide .splide__arrows .splide__arrow {
background-color: transparent;
border: none;
border-radius: 0;
}
.splide .splide__arrows .splide__arrow--prev {
left: -28px;
}
@media (min-width: 1200px) {
.splide .splide__arrows .splide__arrow--prev {
left: -42px;
}
}
.splide .splide__arrows .splide__arrow--next {
right: -28px;
}
@media (min-width: 1200px) {
.splide .splide__arrows .splide__arrow--next {
right: -42px;
}
}
@media (max-width: 767px) {
.splide-wrapper {
padding-top: 60px;
}
.splide-wrapper .splide__arrows {
position: absolute;
top: -48px;
right: 0;
width: 72px;
height: 40px;
z-index: 1;
}
.splide-wrapper .splide__arrows .splide__arrow {
top: 20px !important;
}
.splide-wrapper .splide__arrows .splide__arrow--prev {
left: 0;
top: 20px;
}
.splide-wrapper .splide__arrows .splide__arrow--next {
right: 0;
top: 20px;
}
}
.slider-product-text-wrapper p {
text-align: center;
}
.wishlist-tile-btn-wrapper {
top: 16px;
right: 16px;
z-index: 2;
line-height: 0;
}
.wishlist-tile-btn {
cursor: pointer;
line-height: 0;
padding: 4px;
}
.wishlist-tile-btn svg {
width: 20px;
height: auto;
display: block;
}
.product .cartButton {
background-color: var(--color-weiss);
}
.product .cartButton:hover {
background-color: var(--color-border);
}
.product .select-groesse {
width: 100%;
font-family: var(--font-sans-serif);
font-weight: 500;
font-size: var(--font-size-links);
line-height: var(--lineheight-links);
text-transform: uppercase;
color: var(--color-font);
text-decoration: none;
letter-spacing: var(--letter-spacing-links);
display: inline-block;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
transition: border-bottom-color 0.4s;
padding-top: 8px;
padding-bottom: 8px;
}
.product .bg-color-ansprechpartner {
background-color: var(--color-bg-ansprechpartner);
}
/* --- Produkt-Detail-Layout (LV-artig) ----------------------------------
Mobile: Galerie sticky oben, Info-Spalte schiebt sich beim Scrollen
darüber (Overlay). Desktop (>=1024px): Bilder links (scrollen mit der
Seite), Info rechts bottom-sticky – steht, bis das letzte Bild erreicht
ist, danach scrollt sie mit und gibt den Bereich darunter frei. */
.product-detail {
--scroll-catch: 0px;
position: relative;
}
.product-detail__media {
position: sticky;
top: 0;
z-index: 0;
}
.product-detail__info {
position: relative;
z-index: 1;
padding: 24px;
background: var(--color-white);
}
@media (min-width: 1024px) {
.product-detail {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 40px;
align-items: end; /* Info ans Ende der Bildspalte – nur so
hat das bottom-sticky "Weg" zum
Hochziehen. */
}
.product-detail__media {
position: static; /* Mobile-Sticky aus */
z-index: auto;
}
.product-detail__info {
position: sticky;
bottom: var(--scroll-catch, 0);
top: auto;
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px 0 40px 20px;
background: transparent;
border-radius: 0;
box-shadow: none;
}
}
/* --- Nur ein Produktbild: die Bildspalte nicht ans Zeilenende hängen ---
Desktop-Grid setzt align-items:end, damit die bottom-sticky Info-Spalte
Weg zum Hochziehen hat. Bei einem einzigen Bild ist die Bildspalte kurz
und landet dadurch unten – hier oben anschlagen. */
@media (min-width: 1024px) {
.product-detail__media:has(.gallery__slide:only-child) {
align-self: start;
}
}
/* --- Technische Daten (Uhren-Einzelansicht) ----------------------------
Key/Value-Tabelle direkt in der Info-Spalte, ersetzt das frühere
"Details"-Accordion. Label-Spalte in Links-Typo (uppercase, gesperrt),
Trennlinie pro Zeile wie in der Markeninfo-Tabelle. */
.product-specs {
margin: 0;
border-top: 1px solid var(--color-border);
}
/* Steht ein befülltes Accordion darüber, schliesst dessen Unterkante den
Block bereits ab – dann keine zweite Linie. */
#productacc:has(.accordion-item) + .product-specs {
border-top: 0;
}
.product-specs__row {
display: grid;
grid-template-columns: minmax(110px, 40%) 1fr;
column-gap: 16px;
align-items: baseline;
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
.product-specs__label {
margin: 0;
font-weight: var(--fw-links);
hyphens: auto;
}
.product-specs__value {
margin: 0;
overflow-wrap: anywhere; /* lange Referenzen o. ä. brechen statt zu überlaufen */
}
@media (min-width: 1024px) {
.product-specs__row {
grid-template-columns: minmax(140px, 38%) 1fr;
column-gap: 24px;
}
}
section.component-ansprechpartner .col {
background-color: var(--color-bg-ansprechpartner);
padding: 32px;
}
@media (min-width: 1200px) {
section.component-ansprechpartner .col-image {
padding: 64px;
padding-top: 20px;
padding-bottom: 20px;
}
section.component-ansprechpartner .col-text {
padding: 64px;
padding-right: 0;
padding-top: 20px;
padding-bottom: 20px;
}
}
section.component-ansprechpartner .text-start:has(.linkButton) {
margin-top: 20px;
margin-bottom: 20px;
}
section.component-ansprechpartner .text-start .h2 {
margin-bottom: 20px;
}
@media (min-width: 1200px) {
section.component-ansprechpartner .text-start:has(.linkButton) {
margin-top: 36px;
}
section.component-ansprechpartner .text-start .h2 {
margin-bottom: 36px;
}
}
section.component-iframe iframe {
aspect-ratio: 16/9;
width: 100%; /* change this to a fixed width, or create a container with a width. */
height: 100%;
}
/* Produkt-Galerie: Slider + Lightbox mit Klick-Zoom.
Mobile: horizontaler Scroll-Snap-Slider. Desktop (>=1024px): Bilder
gestapelt. Lightbox/Zoom auf allen Viewports. Markup: _components/gallery.twig,
Logik: web/js/gallery.js. */
.gallery {
position: relative;
width: 100%;
}
/* --- Slider (Grundzustand, mobile): CSS Scroll Snap, kein JS fürs Scrollen - */
.gallery__scrollpane {
display: flex;
overflow-x: auto;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.gallery__scrollpane::-webkit-scrollbar {
display: none;
}
.gallery__slide {
flex: 0 0 100%;
scroll-snap-align: start;
display: block;
width: 100%;
margin: 0;
padding: 0;
border: none;
background: var(--color-bg-image);
cursor: zoom-in;
}
.gallery__slide .lqip-wrapper {
width: 100%;
}
.gallery__slide img {
display: block;
width: 100%;
}
/* --- Pfeile: gemeinsamer Stil für Slider und Lightbox ------------------- */
.gallery__arrow {
position: absolute;
top: 50%;
translate: 0 -50%;
width: 44px;
height: 44px;
border: 1px solid var(--color-seiler-braun-35);
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
cursor: pointer;
transition: background 0.2s, opacity 0.2s;
z-index: 2;
/* Bootstrap-Akkordeon-Chevron (5.3.x, 1.25rem) als Maske – Farbe folgt
--color-font, Grösse identisch zum Akkordeon-Icon. */
}
.gallery__arrow::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1.25rem;
height: 1.25rem;
background-color: var(--color-font);
transform: translate(-50%, -50%);
-webkit-mask: url("data:image/svg+xml,") center/contain no-repeat;
mask: url("data:image/svg+xml,") center/contain no-repeat;
}
.gallery__arrow:hover {
background: #fff;
}
.gallery__arrow:disabled {
opacity: 0.35;
cursor: default;
}
.gallery__arrow:focus-visible {
outline: 2px solid var(--color-border);
outline-offset: 2px;
}
/* Chevron zeigt per Default nach unten → für prev/next 90° drehen */
.gallery__arrow--prev {
left: 14px;
}
.gallery__arrow--prev::before {
transform: translate(-50%, -50%) rotate(90deg);
}
.gallery__arrow--next {
right: 14px;
}
.gallery__arrow--next::before {
transform: translate(-50%, -50%) rotate(-90deg);
}
/* Slider-Pfeile (direkte Kinder von .gallery) auf dem Slider sichtbar –
auch auf Touch, weil hier links/rechts navigiert wird. Lightbox-Pfeile
liegen tiefer und bleiben davon unberührt (immer sichtbar). */
.gallery > .gallery__arrow {
display: block;
}
/* --- Desktop (>=1024px): Bilder gestapelt statt Slider ----------------- */
@media (min-width: 1024px) {
.gallery__scrollpane {
display: block;
overflow: visible;
scroll-snap-type: none;
}
.gallery__slide {
margin-bottom: 1.5rem;
}
.gallery__slide:last-child {
margin-bottom: 0;
}
.gallery > .gallery__arrow {
display: none !important;
}
}
/* --- Lightbox: natives