@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-font: #786d68;
  --color-bg-header: #f4f2f0;
  --color-font-header: #8b7e79;
  --color-bg-footer: #ebe8e4;
  --color-border: #786d68;
  --color-bg-product: #f7f7f7;
  --color-bg-image: #f4f2f0;
  --font-serif: "FSSiena";
  --font-sans-serif: "Montserrat";
  --button-border-color: black;
  --max-width-text: 880px;
  --max-width-content: 1440px;
  --height-navigation: 85px;
}
@media (min-width: 1024px) {
  :root {
    --height-navigation: 104px;
  }
}
:root {
  /* seiler */
  --color-seiler-beige: #F4F2F0;
  --color-seiler-braun: #786D68;
  --color-seiler-braun-50: #BBB5B3;
  --color-seiler-braun-35: #CFCBC9;
  /* 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: #b5b5b5;
  /* fonts */
  /* seiler - default */
  --font-size-h1: 27px;
  --lineheight-h1: 31px;
  --font-size-h2: 19px;
  --lineheight-h2: 26px;
  --font-size-h3: 19px;
  --lineheight-h3: 26px;
  --font-size-lead: 16px;
  --lineheight-lead: 23px;
  --font-size-copy: 16px;
  --lineheight-copy: 23px;
  --letter-spacing-copy: 1.05px;
  --font-size-akkordeon: 15px;
  --lineheight-akkordeon: 23px;
  --font-size-footerfilter: 15px;
  --lineheight-footerfilter: 23px;
  --font-size-links: 12px;
  --lineheight-links: 16px;
  --letter-spacing-links: 0.77px;
}
@media (min-width: 1024px) {
  :root {
    --font-size-h1: 44px;
    --lineheight-h1: 50px;
    --font-size-h2: 27px;
    --lineheight-h2: 31px;
    --font-size-h3: 19px;
    --lineheight-h3: 26px;
    --font-size-lead: 20px;
    --lineheight-lead: 29px;
    --font-size-copy: 18px;
    --lineheight-copy: 24px;
    --letter-spacing-copy: 1.26px;
    --font-size-akkordeon: 21px;
    --lineheight-akkordeon: 27px;
    --font-size-footerfilter: 14px;
    --lineheight-footerfilter: 23px;
    --font-size-links: 13px;
    --lineheight-links: 27px;
    --letter-spacing-links: 0.91px;
  }
}

.panerai {
  --color-font: var(--color-panerai-schwarz);
  --font-serif: "Helvetica";
  --font-sans-serif: "Helvetica";
  --font-size-h1: 32px;
  --lineheight-h1: 38px;
  --font-size-h2: 24px;
  --lineheight-h2: 38px;
  --font-size-h3: 20px;
  --lineheight-h3: 28px;
  --font-size-lead: 20px;
  --lineheight-lead: 29px;
  --font-size-copy: 17px;
  --lineheight-copy: 25px;
  --font-size-akkordeon: 21px;
  --lineheight-akkordeon: 27px;
  --font-size-footerfilter: 13px;
  --lineheight-footerfilter: 25px;
  --font-size-links: 14px;
  --lineheight-links: 25px;
}

.oris {
  --color-font: var(--color-oris-schwarz);
  --font-serif: "BrownRegular";
  --font-sans-serif: "BrownRegular";
  --font-size-h1: 34px;
  --lineheight-h1: 38px;
  --font-size-h2: 24px;
  --lineheight-h2: 38px;
  --font-size-h3: 20px;
  --lineheight-h3: 28px;
  --font-size-lead: 20px;
  --lineheight-lead: 29px;
  --font-size-copy: 17px;
  --lineheight-copy: 26px;
  --font-size-akkordeon: 21px;
  --lineheight-akkordeon: 27px;
  --font-size-footerfilter: 13px;
  --lineheight-footerfilter: 25px;
  --font-size-links: 14px;
  --lineheight-links: 25px;
}

@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: "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");
}
@font-face {
  font-family: "BrownRegular";
  src: url(../fonts/Brown-Regular.otf) format("opentype");
}
.FSSienaWebLight {
  font-family: "FSSienaWebLight", sans-serif;
}

.FSSienaWebExtraLight {
  font-family: "FSSienaWebExtraLight", sans-serif;
}

.BrownRegular {
  font-family: "BrownRegular", 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;
}

body {
  color: var(--color-font);
  font-family: var(--font-serif);
  font-size: var(--font-size-copy);
  line-height: var(--lineheight-copy);
}

h1, .h1, h2, .h2, h3, .h3, p, ul li, a {
  color: var(--color-font);
  font-family: var(--font-serif);
}

h1, .h1 {
  font-size: var(--font-size-h1);
}

h2, .h2 {
  font-size: var(--font-size-h2);
}

h3, .h3 {
  font-size: var(--font-size-h3);
}

.copytext, p {
  font-size: var(--font-size-copy);
  line-height: var(--lineheight-copy);
}

.leadtext {
  font-size: var(--font-size-lead);
  line-height: var(--lineheight-lead);
}

.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl, .container-fluid {
  max-width: var(--max-width-content);
}

.container-xxl .row {
  --bs-gutter-x: 16px !important;
}
.container-xxl {
  padding-right: 24px;
  padding-left: 24px;
}
@media (min-width: 1200px) {
  .container-xxl {
    padding-right: 48px;
    padding-left: 48px;
  }
}

section {
  margin-top: 48px;
  margin-bottom: 96px;
}

.portrait {
  aspect-ratio: 3/4;
  object-fit: cover;
}

.landscape {
  aspect-ratio: 3/2;
  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;
}

.bg-special {
  background-color: var(--color-bg-image);
}

.mb-36px {
  margin-bottom: 36px;
}

.cursor-pointer:hover {
  cursor: pointer;
}

.bg-color-image {
  background-color: var(--color-bg-image);
}

img {
  max-width: 100%;
}

/*
nav, footer {padding: 24px;margin-bottom:48px;}
nav, footer {border:1px solid #eee;position:relative}
*/
.bg-transparent {
  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");
  font-size: 11px;
  font-family: var(--font-sans-serif);
  text-transform: uppercase;
  color: var(--color-font);
  line-height: 1.45;
  letter-spacing: 0.77px;
}
nav .breadcrumb a {
  text-decoration: none;
  color: var(--color-seiler-braun-50);
}

header img {
  max-height: 80vh;
  object-fit: cover;
}
@media (min-width: 1200px) {
  header .header-text {
    position: absolute;
    left: 48px;
    bottom: 48px;
    background-color: var(--color-bg-header);
  }
}
header a {
  border-bottom: 1px solid var(--color-border);
}

/*
body:has(#navswitch:checked) {
  background-color: red !important;

  .col-navswitch .navswitch,
  .col-search-close .button-search {
    display: none;
  }
}
*/
body.navi-active header {
  margin-top: var(--height-navigation);
}

@media (min-width: 768px) {
  body:has(.offcanvas-backdrop.fade.show) #navswitch + nav {
    position: absolute;
    width: 100vw;
    z-index: 1050;
    top: 0;
  }
  body:has(.offcanvas-backdrop.fade.show) #navswitch + nav .navswitch .line1 {
    top: 8px;
    transform: rotate(45deg);
  }
  body:has(.offcanvas-backdrop.fade.show) #navswitch + nav .navswitch .line2 {
    display: none;
  }
  body:has(.offcanvas-backdrop.fade.show) #navswitch + nav .navswitch .line3 {
    top: 8px;
    transform: rotate(135deg);
  }
}
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;
  }
}

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;
  }
}

#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,
#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;
    background: yellow;
    width: 400px;
    height: 100vh;
    top: 0;
    background-color: var(--color-bg-header);
    border-left: 1px solid var(--color-seiler-braun-35);
    border-top: 1px solid var(--color-seiler-braun-35);
  }
}
section.component-ansprechpartner .col {
  background-color: var(--color-bg-header);
  padding: 32px;
}
@media (min-width: 1200px) {
  section.component-ansprechpartner .col-image {
    padding: 64px;
  }
  section.component-ansprechpartner .col-text {
    padding: 64px;
    padding-right: 0;
  }
}

section.component-headline-text .col div + div {
  margin-top: 36px;
}
section.component-headline-text div p:last-child {
  margin-bottom: 0;
}
section.component-headline-text ul {
  display: inline-block;
  text-align: left;
}
section.component-headline-text .text-center h2 {
  max-width: var(--max-width-text);
  margin: auto;
}
section.component-headline-text .text-center p {
  max-width: var(--max-width-text);
  margin: auto;
}

section.component-image-teaser .row-layout121 img {
  object-fit: cover;
  aspect-ratio: 3/2;
}
@media (min-width: 1200px) {
  section.component-image-teaser .row-layout121 img {
    aspect-ratio: 434/610;
  }
}
@media (min-width: 1200px) {
  section.component-image-teaser .row-layout121 img.image-2, section.component-image-teaser .row-layout121 img.image-3 {
    aspect-ratio: 434/277;
  }
}

section.component-image-text img {
  aspect-ratio: 165/134;
  object-fit: cover;
}
section.component-image-text div.content-text h2 {
  margin-bottom: 0;
}
section.component-image-text div.content-text div + div, section.component-image-text div.content-text h2 + p {
  margin-top: 36px;
}
section.component-image-text div p:last-child {
  margin-bottom: 0;
}

section.component-overview-jobs .col-jobs a {
  border-top: 1px solid var(--color-seiler-braun-50);
  font-size: 21px;
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: 1.47px;
  font-family: var(--font-sans-serif);
}
section.component-overview-jobs .col-jobs a:last-child {
  border-bottom: 1px solid var(--color-seiler-braun-50);
}

section.component-overview-team .team-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
section.component-overview-team .team-filter .btn {
  border: 1px solid var(--color-seiler-braun-50);
  border-radius: 0;
  background: none;
  color: var(--color-seiler-braun-50);
  font-family: var(--font-sans-serif);
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 24px;
  transition: border-color 0.2s, color 0.2s;
}
section.component-overview-team .team-filter .btn:hover, section.component-overview-team .team-filter .btn.active {
  border-color: var(--color-border);
  color: var(--color-font);
  background: none;
}

section.component-logos-marken .logo-wrapper {
  aspect-ratio: 26/15;
}
section.component-logos-marken svg, section.component-logos-marken img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  padding: 24px;
}
section.component-logos-marken svg {
  fill: currentColor;
}
section.component-logos-marken img {
  object-fit: contain;
  aspect-ratio: 26/15;
}
section.component-logos-marken a {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  color: var(--color-seiler-braun);
}
section.component-logos-marken a:hover {
  background-color: var(--color-seiler-braun);
  color: #fff;
}
section.component-logos-marken a:hover svg, section.component-logos-marken a:hover svg * {
  fill: #fff;
}

.accordion button {
  font-size: var(--font-size-akkordeon);
  line-height: var(--lineheight-akkordeon);
  font-family: var(--font-sans-serif);
  text-transform: uppercase;
  color: var(--color-seiler-braun);
}
.accordion .accordion-button:not(.collapsed) {
  color: var(--color-seiler-braun);
  background-color: transparent;
  box-shadow: none;
}
.accordion .accordion-button:focus {
  box-shadow: none;
}
.accordion .accordion-item:first-child {
  border-top: var(--bs-accordion-border-width) solid var(--color-border);
}
.accordion .accordion-item, .accordion .accordion-item:last-child {
  border-bottom: var(--bs-accordion-border-width) solid var(--color-border);
}

section.component-services-werte {
  background-color: var(--color-seiler-beige);
  padding-top: 90px;
  padding-bottom: 45px;
}
section.component-services-werte .col-service {
  padding-bottom: 90px;
}
section.component-services-werte .col-service svg {
  max-height: 80px;
  margin-bottom: 32px;
}
section.component-services-werte .col-service h4 {
  text-transform: uppercase;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.44;
  letter-spacing: 0.72px;
}
section.component-services-werte .col-service p {
  font-size: 18px;
  font-weight: 300;
  line-height: 1.33;
}

.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;
  }
}

section.component-table-markeninfo .col-border {
  border-top: 1px solid var(--color-border);
}
section.component-table-markeninfo .row-border {
  border-bottom: 1px solid var(--color-border);
}
section.component-table-markeninfo .table-title {
  font-family: var(--font-sans-serif);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: 0.77px;
  text-transform: uppercase;
}
@media (min-width: 1200px) {
  section.component-table-markeninfo .table-title {
    font-size: 13px;
    line-height: 1.46;
    letter-spacing: 0.91px;
  }
}
section.component-table-markeninfo .table-text {
  font-size: 16px;
  font-weight: 300;
  line-height: 1.44;
}
@media (min-width: 1200px) {
  section.component-table-markeninfo .table-text {
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: normal;
  }
}

section.component-video .video-native-wrapper .video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s;
}

.video-native-wrapper .video-play-btn:hover {
  opacity: 0.8;
}