:root {
  --p-margin: 1rem; /* page margin */
  --s-margin: 8rem; /* section margin */
  --g-gap: 1rem;    /* grid gap */
  --c-janu-g1: #409e26;
  --c-janu-g2: #17691e;
  --c-janu-g3: #63bf4a;
  --c-janu-l1: #e8f2e5;
  --c-janu-d1: #353739;
  --c-janu-d2: #808489;
  --c-janu-d3: hsl(0, 0%, 90%);
  --c-janu-d4: hsl(0, 0%, 95%);
}
@media (max-width: 620px) {
  :root {
    --s-margin: 4rem; /* section margin */
  }
}

@keyframes fadein {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slidein-right {
  0% {
    right: -50vw;
  }
  100% {
    right: 0;
  }
}
@keyframes slidein-left {
  0% {
    left: -50vw;
  }
  100% {
    left: 0;
  }
}
@keyframes slidein-top {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0%);
  }
}

body, html {
  background: white;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans', 'Arial', 'Verdana', sans-serif;
  font-size: 16px;
  line-height: 1.75;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  max-width: 64rem;
  margin: auto;
  padding: 0 var(--p-margin);
}

h2 {
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--c-janu-g1);
  text-align: center;
  text-transform: uppercase;
}

hr {
  border: none;
  border-bottom: solid 1px var(--c-janu-g2);
  margin: calc(var(--p-margin)*2) 0;
}

a {
  color: var(--c-janu-g1);
}
a:hover {
  color: var(--c-janu-g2);
}

.fade-stagger {
  opacity: 0;
  transition: opacity 1s ease-out;
  /* animation: 2s ease-out 0s 1 fadein;   */
}

.draggable {
  cursor: grab;
}
.draggable .nodrag {
  cursor: auto;
}






header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* border-bottom: solid 1px gray; */
  padding-top: var(--p-margin);
  padding-bottom: var(--p-margin);
  margin: 0;
  margin-bottom: 2rem;
  box-shadow: 0 20px 25px -30px black;
  position: relative;
}
header::after {
  /* display: block;
  position: relative; */
}
header .logo {
  position: relative;
  animation: 1s cubic-bezier(0, 0, 0.25, 1) 0s 1 slidein-top;
}
header .logo img {
  max-width: 100%;
}

header h1 {
  margin: 0 var(--p-margin) 0 var(--p-margin);
  /* margin: 0 0 0 var(--p-margin); */
}
header a {
  display: inline-block;
}
header nav.main {
  display: flex;
  align-items: center;
}
header nav.main menu {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  position: relative;
  animation: 1s cubic-bezier(0, 0, 0.25, 1) 0s 1 slidein-right;
}
header nav.main menu li {
  list-style-type: none;
  margin: .5rem;
  padding: .5rem;
  text-decoration: none;
  background: transparent;
  transition: background 200ms ease-in-out, color 100ms ease-in-out;
}
header nav.main menu li:hover {
  background: var(--c-janu-g1);
  color: white;
}

header nav.main menu a {
  text-decoration: inherit;
  color: inherit;
}

@media (max-width: 28rem) {
  header{
    justify-content: center;
  }
  header nav.main menu {
    justify-content: center;
  }
}




footer {
  background: linear-gradient(120deg, var(--c-janu-g1), var(--c-janu-g2));
  /* border-top: solid 3px var(--c-janu-g1); */
  margin-top: var(--s-margin);
  text-align: center;
  color: white;
  padding: 1rem;
  min-height: 8rem;
}
footer > * {
  margin: 1rem;
}
footer > *:first-child{
  margin-top: 0;
}
footer > *:last-child{
  margin-bottom: 0;
}
footer b {
  /* color: var(--c-janu-g2); */
}





main {
  margin: 0 auto auto;
}
section {
  margin: var(--s-margin) 0;
}
section h2 {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding-bottom: .5rem;
  border-bottom: solid 3px var(--c-janu-g1);
}










section.intro {
  display: flex;
  flex-wrap: wrap;
}
section.intro h2 {
  text-align: right;
  margin: 2rem 2rem 2rem 0;
  flex: 1 0 20%;
  align-content: center;
  border-bottom: none;
  text-transform: inherit;
}
section.intro h2 span {
  white-space: nowrap;
}
section.intro .text {
  flex: 1 1 70%;
  align-content: center;
}









.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--g-gap);
}
.grid3 > * {
  grid-column: span 1;
}
.grid3 > h1,
.grid3 > h2,
.grid3 > h3 {
  width: 100%;
  grid-column: span 3;
}
.grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  gap: var(--g-gap);
}
.grid2 > * {
  grid-column: span 1;
}
.grid2 > h1,
.grid2 > h2,
.grid2 > h3 {
  width: 100%;
  grid-column: span 2;
}

@media (max-width: 620px) {
  .mobile--hide {
    display: none !important;
    visibility: hidden !important;
  }
}
@media (min-width: 621px) {
  .desktop--hide {
    display: none !important;
    visibility: hidden !important;
  }
}



.no-drag {
  user-select: text;
  -webkit-user-select: text;
  /* used for slider */
}


.brand-list ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.brand-list .brand {
  background-size: cover;
  background-position: center center;
}

.brand-list .brand > * {
  position: relative;
  display: flex;
  justify-content: center;
}
.brand-list .brand > *::after {
  content: '';
  position: absolute;
  background: linear-gradient(120deg, var(--c-janu-g1), var(--c-janu-g2));
  display: block;
  height: 100%;
  width: 100%;
  z-index: 100;
  top: 0;
  left: 0;
  opacity: .8;
  transition: opacity .5s;
}
.brand-list .brand >a::before {
  position: absolute;
  z-index: 200;
  content: '';
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  top: .5rem;
  right: .5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23fff' d='M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z'/%3E%3C/svg%3E");
  opacity: .5;
  transition: transform .25s ease-in-out, opacity .25s ease-in-out;
  transform-origin: top right;
}
.brand-list .list-desktop .brand >a::before {
  opacity: 0;  
}
.brand-list .brand >a:hover::before {
  transform: scale(0.75);
  opacity: 1.0;
}
.brand-list .brand > *:hover::after {
  opacity: .2;
}
.brand-list .brand img {
  display: block;
  position: relative;
  z-index: 200;
  transition: transform .25s ease-in-out;
}
.brand-list .brand img:hover {
  transform: scale(1.05);
}



/* splide overwrites */ 
.splide__arrow {
  touch-action: manipulation;
}
.grid3-list .controls {
  margin-top: 1rem;
  position: relative;
/*   border: solid 1px red; */
}
.grid3-list .controls .splide__arrows {
  position: relative;
  display: flex;
  justify-content: space-between;
}
.grid3-list .controls .splide__arrow {
  position: relative;
  top: 0;
  bottom: 0;
  transform: none;
  opacity: .85;
  border-radius: .2rem;
  background: var(--c-janu-g2);
  width: 3em;
}
.grid3-list .controls .splide__arrow svg {
  fill: white;
}
.grid3-list .controls .splide__arrow--prev {
  left: 0;
}
.grid3-list .controls .splide__arrow--next {
  right: 0;
}

.grid3-list .controls .splide__pagination {
  position: absolute;
  margin: 0 3rem; /* same as arrow width */
}
.grid3-list .controls .splide__pagination__page {
  background: var(--c-janu-g1);
}
.grid3-list .controls .splide__pagination__page.is-active {
  background: var(--c-janu-g2);
}



.location-list {
  
}

.location {
  line-height: 1.25;
}

.location .image  {
  position: relative;
  display: block;
}
.location .image img {
  display: block;
}
.location a.image::before {
  position: absolute;
  z-index: 200;
  content: '';
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  top: .5rem;
  right: .5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23fff' d='M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z'/%3E%3C/svg%3E");
  opacity: .5;
  transition: transform .25s ease-in-out, opacity .25s ease-in-out;
  transform-origin: top right;
}
.location a.image:hover::before {
  transform: scale(0.75);
  opacity: 1.0;
}
.location .image h3 {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  margin: 0;
  padding: 1rem;
  color: white;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-around;
  text-align: center;
  font-size: 1.5rem;
  z-index: 20;
}
.location .image h3 span {
  transition: transform .25s ease-in-out;  
}
.location .image h3:hover span {
  transform: scale(1.05);
}
.location .image h3::before{
  content: '';
  display: block;
  position: absolute;
  left: 0; right: 0; top: 0; bottom :0;
  background: linear-gradient(120deg, var(--c-janu-g1), var(--c-janu-g2));
  opacity: .8;
  transition: opacity .5s;
  z-index: -1;
}

.location .image h3:hover::before {
  opacity: .2;
}
.location address {
  font-style: normal;
}
.location a {
  color: var(--c-janu-d1);
  text-decoration: none;
}
.location a:hover {
  text-decoration: underline;
}
.location .text {
  padding: 1rem;
  background: var(--c-janu-l1);
}
.location .text p:first-child {
  margin-top: 0;
}
@media (min-width: 621px) {
  .location a.image::before {
    opacity: 0;
  }
  .location a.image:hover::before {
    opacity: 1.0;
  }
}


/* !Über Uns - Kontakte Liste (Accordion) */
.accordion-container {
  padding-left: 0;
}
.accordion-container li {
  min-height: auto !important;
  background: transparent;
  color: white;
  border: solid 0px transparent !important;
  border-radius: 2px !important;
  list-style-type: none;
}
.accordion-container li .head {
  padding: .5em !important;
  background: var(--c-janu-g1);
  color: white;
  transition: background 200ms ease-in-out;
}
.accordion-container li.show .head {
  background: var(--c-janu-g2);
}
.accordion-container li .head .marker  {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform 200ms ease-in-out;
  margin-right: 1rem;
}
.accordion-container li .head .marker svg {
  display: block;
}
.accordion-container li.show .head .marker  {
  transform: rotate(180deg);  
}
.accordion-container li.show {
  background: white !important;
}
.accordion-container li .body {
  color: initial;
}
.accordion-container li .body .wrapper {
  padding: var(--g-gap) 0 !important;
}
.accordion-container li h3 {
  margin: 0;
  /* text-align: left; */
}
.accordion-container .accordion-item .body .wrapper a {
  display: initial;
  background: inherit;
  padding: initial;
  border-radius: initial;
  text-align: inherit;
}
.contact-list .wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: var(--g-gap);
}
.contact-list .person {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: 14rem;
  color: var(--c-janu-d1);
  /* background: var(--c-janu-d4); */
  background: var(--c-janu-l1);
  position: relative;
  text-align: center;
}
.contact-list .person a {
  text-decoration: none;
}
.contact-list .person > img {
  display: block;
}
.contact-list .person h4.title {
  color: white;
  margin: 0;
  background: var(--c-janu-g3);
  padding: .5rem 1rem;
  font-weight: bold;
}
.contact-list .person p {
  margin: .5rem;
}
.contact-list .person a {
  text-decoration: none;
}
.contact-list .person a:hover {
  text-decoration: underline;
}
.contact-list .person .name {
  font-weight: 500;
  margin: 0;
  padding: 1rem;
  background: var(--c-janu-d3);
}
.contact-list .person .mail a {
  white-space: nowrap;
  color: var(--c-janu-d1);
}
.contact-list .person .phone a {
  color: var(--c-janu-d1);
}
@media (max-width: 620px) {
  .contact-list .person {
    flex-grow: 1;
  }  
}

/* !Über Uns - Kontakte Struktur */
.accordion-graph li .body .wrapper {
  background: var(--c-janu-l1);
  padding: 0px !important;
}

.accordion-graph .show .head {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.accordion-graph .show .wrapper {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}
.contact-graph {
  list-style-type: none;
  display: flex;
  margin: 0;
  padding: 1rem;
  gap: 1.5rem;
}
.contact-graph li {
  text-align: center;
}
.contact-graph li:last-child{
      border-right:  solid 1.5rem transparent !important;
      /* workaround for missing/non-functioning right margin/padding in scrollable area */
}
.contact-graph li h3 {
  padding: 1rem;
  color: white;
  background: var(--c-janu-g1);
  margin: .5rem 0;
  position: relative;
}
.contact-graph li h3 span {
  white-space: nowrap;
}
.contact-graph li:not(:first-child) h3::before {
  content: '';
  display: block;
  position: absolute;
  background: var(--c-janu-d1);
  width: 1.5rem;
  height: 6px;
  top: 50%;
  left: -1.5rem;
  //transform: translateX(-50%);  
}
.contact-graph .person {
  margin: 1rem 0;
  color: var(--c-janu-d1);
  background: white;
  position: relative;
}
.contact-graph .person::before {
  content: '';
  display: block;
  position: absolute;
  background: var(--c-janu-d1);
  width: 4px;
  height: 1rem;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
}
.contact-graph .person h4 {
  color: white;
  margin: 0;
  background: var(--c-janu-g3);
  padding: .5rem 1rem;
  font-weight: normal;
}
.contact-graph .person p {
  margin: 0;
}
.contact-graph .person .name {
  font-weight: 500;
  padding: .5rem;
}
.accordion-graph .body {
  position: relative;
}
.accordion-graph .wrapper { 
  position: initial !important;
  overflow: auto !important;
}

.accordion-graph .wrapper::before,
.accordion-graph .wrapper::after {
  content: '';
  display: block;
  opacity: 0.75;
  transition: opacity 200ms linear;
  position: absolute;
  top:0;
  left: 0;
  right: auto;
  width: 1rem;
  bottom: 0;
  z-index: 200;
  background: linear-gradient(90deg, var(--c-janu-l1),rgba(0,0,0,0));
}
.accordion-graph .wrapper::after {
  left: auto;
  right: 0;
  background: linear-gradient(-90deg, var(--c-janu-l1),rgba(0,0,0,0));
}

/* ! Historie */
.historie {
}
.historie dl {
  display: block;
  /* display: table; */
}
.historie dl div {
  /* display: table-row;*/
  border-top: solid .5em transparent;
  margin-bottom: 1rem;

}
.historie dt {
  display: flex;
  justify-content: center;
  margin: auto;
  padding: .5em;
  position: relative;
}

.historie dt b {
  background: var(--c-janu-g1);
  color: white;
  width: auto;
  display: flex;
  align-items: center;
  padding: .5em;
  aspect-ratio: 1 / 1;
  border-radius: 100%;
  align-self: center;
}
.historie dl div:nth-child(odd) dt b {
  /* background: var(--c-janu-g2); */
}
.historie dd {
    display: block;
    text-align: center;
    margin: auto;
}

@media (max-width: 620px) {
  .historie dl {
  }
  .historie dl div {

  }
  .historie dt {

  }
  .historie dd {

  }
  /* .historie dl,
  .historie dt,
  .historie dd {
    display: block;
    text-align: center;
  } */
  
  /*
  .historie dt b {
    display: block;
    width: auto;
  }
   */
}



/* ! Karriere */
.karriere h3 {
  color: var(--c-janu-g1);
}
.karriere h4 {
  color: var(--c-janu-g2);
}



/* ! Can-Am Produkte */

.canam-products .link-list img {
  display: block;
}

.canam-products .link-list a {
  position: relative;
}
.canam-products .link-list a::before {
  position: absolute;
  z-index: 200;
  content: '';
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  top: .5rem;
  right: .5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath fill='%23fff' d='M384 64C366.3 64 352 78.3 352 96C352 113.7 366.3 128 384 128L466.7 128L265.3 329.4C252.8 341.9 252.8 362.2 265.3 374.7C277.8 387.2 298.1 387.2 310.6 374.7L512 173.3L512 256C512 273.7 526.3 288 544 288C561.7 288 576 273.7 576 256L576 96C576 78.3 561.7 64 544 64L384 64zM144 160C99.8 160 64 195.8 64 240L64 496C64 540.2 99.8 576 144 576L400 576C444.2 576 480 540.2 480 496L480 416C480 398.3 465.7 384 448 384C430.3 384 416 398.3 416 416L416 496C416 504.8 408.8 512 400 512L144 512C135.2 512 128 504.8 128 496L128 240C128 231.2 135.2 224 144 224L224 224C241.7 224 256 209.7 256 192C256 174.3 241.7 160 224 160L144 160z'/%3E%3C/svg%3E");
  opacity: .1;
  transition: transform .25s ease-in-out, opacity .25s ease-in-out;
  transform-origin: top right;
}

.canam-products .link-list a:hover::before {
  transform: scale(0.75);
  opacity: 1.0;
}