/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */button,hr,input{overflow:visible}progress,sub,sup{vertical-align:baseline}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}html{line-height:1.15;-webkit-text-size-adjust:100%;text-size-adjust:100%}body{margin:0}details,main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}fieldset{padding:.35em .75em .625em}legend{color:inherit;display:table;max-width:100%;white-space:normal}textarea{overflow:auto}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}

/* Die folgenden Schnitte enthalten nur die Buchstaben, die für den Markenauftritt relevant sind */
@font-face {
    font-family: 'Isidora Alt';
    src: url('../fonts/isidoraaltblackit.woff2') format('woff2'),
         url('../fonts/isidoraaltblackit.woff') format('woff');
    font-weight: 900;
    font-style: normal;
}
@font-face {
    font-family: 'Isidora Alt';
    src: url('../fonts/isidoraaltboldit.woff2') format('woff2'),
         url('../fonts/isidoraaltboldit.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Isidora Alt';
    src: url('../fonts/isidoraaltregularit.woff2') format('woff2'),
         url('../fonts/isidoraaltregularit.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
/* Ende der Markenschriftschnitte */

/* Schriften für regulären Text */
@font-face {
    font-family: 'Isidora Soft Alt';
    src: url('../fonts/isidora_soft_alt_bold_it.woff2') format('woff2'),
         url('../fonts/isidora_soft_alt_bold_it.woff') format('woff');
    font-weight: 700;
}
@font-face {
    font-family: 'Isidora Soft Alt';
    src: url('../fonts/isidora_soft_alt_regular_it.woff2') format('woff2'),
         url('../fonts/isidora_soft_alt_regular_it.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Isidora Soft Alt';
    src: url('../fonts/isidora_soft_alt_semibold_it.woff2') format('woff2'),
         url('../fonts/isidora_soft_alt_semibold_it.woff') format('woff');
    font-weight: 600;
    font-style: normal;
}
@font-face {
    font-family: 'Isidora Soft Alt';
    src: url('../fonts/isidora_soft_alt_regular_it.woff2') format('woff2'),
         url('../fonts/isidora_soft_alt_regular_it.woff') format('woff');
    font-weight: normal;
    font-style: italic;
}
@font-face {
  font-family: Lato;
  src: url('../fonts/Lato-Regular.woff2') format('woff2'),
       url('../fonts/Lato-Regular.woff') format('woff');
}
@font-face {
  font-family: Lato;
  src: url('../fonts/Lato-Bold.woff2') format('woff2'),
       url('../fonts/Lato-Bold.woff') format('woff');
  font-weight: bold;
}
@font-face {
  font-family: Lato;
  src: url('../fonts/Lato-Italic.woff2') format('woff2'),
       url('../fonts/Lato-Italic.woff') format('woff');
  font-style: italic;
}
@font-face {
  font-family: Lato;
  src: url('../fonts/Lato-BoldItalic.woff2') format('woff2'),
       url('../fonts/Lato-BoldItalic.woff') format('woff');
  font-style: italic;
  font-weight: bold;
}
@font-face {
  font-family: Icons;
  src: url('../fonts/icons.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

/*
home: "\e900"
bike: "\e901"
shuttle: "\e902"
app: "\e903"
abo: "\e904"
*/

:root {
  /* rgb-Werte */
  --wiesengrün: 210 212 55;
  --rot: 228 0 0;
  --ocker: 215 170 80;
  --lavendel: 158 171 213;
  --türkis: 0 132 148;
  --azur: 102 199 231;
  --schattengrün: 116 129 37;
  --mintgrün: 184 214 196;
  --steingrau: 142 147 143;
}

html, body {
  font-size: 100%;
  scroll-behavior: smooth;
}
html {overflow: hidden;}
html:before {
  content: 'small';
  position: absolute;
  left: -9999em;
}
body {
  color: black;
  background-color: white;
  font: 1em/1.5 Calibri, Lato, Candara, Segoe, "Segoe UI", Optima, Arial, Helvetica, Sans-serif;
  margin: 0;
  padding: 0;
  height: 100vh;
  overflow: hidden auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  display: flex;
  flex-direction: column;
  scroll-padding-top: 3.75em;
}
a {color: inherit;}
a:hover {text-decoration: underline;}
a img {border: none;}
address {font-style: normal;}
b, strong {font-weight: 700;}
button, img, input, select, textarea {
  vertical-align: middle;
  margin: 0;
  box-sizing: border-box;
}
dd {margin: 0;}
dt i, dt em, summary i, summary em {font-weight: normal;}
dt, summary strong em, summary em strong {font-weight: bold;}
/* em, i {font-style: normal;} */
fieldset{
  margin: 0;
  padding: 0;
  border: none;
}
figure {margin: 0;}
h1, h2, h3 {
  font: bold 1.5em/1.25 'Isidora Soft Alt', Arial, Helvetica, Sans-serif;
  margin: 0 0 .811em;
}
h1 b, h2 b {font-weight: 700;}
h3 {
  font-size: 1.25em;
  font-weight: bold;
  margin: 0 0 .76em;
}
h4, h5, h6 {font-size: 1em;}
iframe, object {border: none;}
img {
  max-width: 100%;
  height: auto;
}
input[type=submit], button, .btn {
  padding: .375em 1em;
  border-radius: 2em;
  font-size: 1em;
  line-height: 1.313;
  border: none;
  cursor: pointer;
  border: 1px solid currentcolor;
  color: #6C6C6C;
  display: inline-block;
  text-decoration: none;
  transition: all .125s;
}
figure, p, ol, ul, dl, dd, table {
  margin: 0 0 1.75em;
  margin-bottom: 1lh;
}
ol {padding-left: 1.5em;}
ul {padding-left: 1em;}
li p:last-child {margin-bottom: 0;}
textarea {resize: vertical;}

.staging:before {
  position: fixed;
  z-index: 1000;
  top: 0;
  left: 0;
  right: 0;
  content: '';
  display: block;
  height: .5em;
  background: repeating-linear-gradient(-45deg, black, black 10px, yellow 10px, yellow 20px);
}

.btn {
  position: relative;
  transition-property: color, background-color, border-color;
  transition-duration: .25s;
  -moz-hyphens: manual;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
.btn:hover {
  text-decoration: none;
  background-color: rgb(var(--lavendel) / .1);
}
input[type=submit], button[type=submit], .btn-primary {
  font-family: 'Isidora Soft Alt', Arial, Helvetica, Sans-serif;
  font-weight: bold;
  background-color: rgb(var(--lavendel) / .1);
  border-color: transparent;
  text-transform: lowercase;
  color: currentcolor;
}
input[type=submit]:hover, button[type=submit]:hover, .btn-primary:hover {
  background-color: rgb(var(--lavendel));
  color: white;
  border-color: transparent;
}
.btn-active, .btn-active:hover {
  background-color: #6C6C6C;
  color: white;
  cursor: default;
  border-color: transparent;
}
.btn-primary.btn-active, .btn-primary.btn-active:hover {
  background-color: rgb(var(--rot));
}
.btn-mehr {
  padding-right: 1.5em;
  font-size: 1.125em;
  line-height: 1.333;
  padding-top: .389em;
  padding-bottom: .389em;
  transition-property: padding-right, background-color, color;
  transition-duration: .25s;
}
.btn-mehr.btn-primary {
  background-color: rgb(var(--rot));
  color: white;
  border-color: transparent;
  font-family: inherit;
  font-weight: normal;
  text-transform: none;
}
.btn-mehr:before, .btn-mehr:after {
  content: '';
  font-size: 1.111em; /* 20px */
  width: .5em;
  height: .1em;
  background-color: currentcolor;
  border-radius: 1em;
  position: absolute;
  right: .5em;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  transform-origin: .45em 50%;
}
.btn-mehr:after {transform: translateY(-50%) rotate(-45deg);}
.btn-shuttle, .btn-shuttle:before, .btn-shuttle:after {background-color: rgb(var(--rot));}
.btn-bike, .btn-bike:before, .btn-bike:after {background-color: rgb(var(--wiesengrün));}
.btn-mehr:hover {padding-right: 2em;}
.btn-mehr.btn-primary:hover {
  border-color: transparent;
  background-color: rgb(var(--rot));
}
.btn .movemix * {color: inherit;}

.btn-secondary {
  border: none;
  background-color: rgb(var(--lavendel) / .1);
  font-family: 'Isidora Soft Alt', Arial, Helvetica, Sans-serif;
  font-weight: bold;
  line-height: 1.563em;
  padding: 0 1em;
  color: black;
}
.btn-secondary:hover {background-color: rgb(var(--lavendel) / .5);}
.btn-secondary.btn-active {
  background-color: rgb(var(--rot));
  color: white;
}

.video {
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 1.438em 6em rgb(0 0 0 / .11);
  border-radius: 1.25em;
  max-width: 35em;
}
.video iframe {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}
.video a {
  position: relative;
  display: block;
}
/* Abspielpfeil und Schatten */
.video a:before, .video a:after {
  content: '';
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: absolute;
  z-index: 1;
  transition: transform .3s;
  font-size: .625em;
}
/* Schatten hinter dem Abspielpfeil */
.video a:before {
  border-style: solid;
  border-width: 1.3em 0 1.3em 2.1em;
  border-color: transparent white;
  filter: drop-shadow(0 .4em .7em rgb(0 0 0 / .5));
  margin-left: .1em;
}
/* Abspielpfeil */
.video a:after {
  width: 2.3em;
  height: 2.7em;
  background-color: #fff;
  clip-path: path('M4.37,.42 A2.88, 2.88, 0, 0, 0, 0, 2.88 v21.08 a2.89, 2.89, 0, 0, 0, 4.37, 2.45 l17.25, -10.54 a2.88, 2.88, 0, 0, 0, 0,-4.9 L4.37, .41 Z');
}
.video a:hover:before,
.video a:hover:after
  {transform: translate(-50%, -50%) scale(1.25);}


#menu_toggle {
  position: fixed;
  top: -9999em;
  left: -9999em;
}
#menu_toggle + label {
  position: fixed;
  bottom: 1.625em;
  right: 1.625em;
  background-color: rgb(var(--lavendel));
  color: white;
  border-radius: .5em;
  cursor: pointer;
  z-index: 113;
  width: 3.188em;
  height: 2.688em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#menu_toggle:focus-visible + label {
  outline: 5px auto Highlight;
  outline: 5px auto -webkit-focus-ring-color;
}
#menu_toggle + label:before, #menu_toggle + label:after {
  content: '';
  height: .188em;
  width: 2em;
  background-color: currentcolor;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 1em;
  transition-property: transform, box-shadow, margin;
  transition-duration: .25s, .15s, .25s;
  transition-delay: 0s, .1s, 0s;
}
#menu_toggle + label:before {
  box-shadow: 0 1em 0 currentcolor;
  margin-top: -.5em;
}
#menu_toggle + label:after {transform: translate(-50%, -50%);}
#menu_toggle:checked + label:before {
  box-shadow: 0 1em 0 transparent;
  transform: translate(-50%, -50%) rotate(-45deg);
  margin: 0;
  transition-delay: 0s;
  transition-duration: .25s, .1s, .25s;
}
#menu_toggle:checked + label:after {transform: translate(-50%, -50%) rotate(45deg);}
#menu_toggle + label span {
  position: absolute;
  left: -9999em;
}
body > header {
  padding-top: 1.375em;
  padding-bottom: 1.375em;
  box-shadow: 0 0 4.125em rgba(0, 0, 0, 0.16);
  position: relative;
  z-index: 112;
}
body > header h1 {
  margin: 0 auto;
  font-size: 1em;
  text-align: center;
}
body > header h1 a {display: inline-block;}
body > header img {
  max-width: none;
  width: auto;
  max-height: 4em;
}

body > header nav ul {list-style: none;}
body > header nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
  font-family: 'Isidora Soft Alt', Arial, Helvetica, Sans-serif;
  font-weight: 600;
  padding-top: 6.25em;
  z-index: 112;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transform: translate(-100%, -100%);
  transition: transform 0s;
  transition-delay: .35s;
}
body > header #menu_toggle:checked ~ nav {
  transform: translate(0, 0);
  transition-delay: 0s;
}
/* “background color” transition */
body > header nav:before {
  content: '';
  position: absolute;
  z-index: -1;
  bottom: 1.625em;
  right: 1.625em;
  background-color: rgb(var(--lavendel));
  width: 3.188em;
  height: 2.688em;
  transition: .35s;
  border-radius: .5em;
}
body > header #menu_toggle:checked ~ nav:before {
  width: 100%;
  height: 100%;
  right: 0;
  bottom: 0;
  border-radius: 0;
}
/* open nav logo */
body > header nav:after {
  content: '';
  background: url(../img/logo-movemix-negativ.svg) 50% 0 / contain no-repeat;
  position: absolute;
  right: 0;
  top: 1.25em;
  width: 100%;
  height: 4em;
  opacity: 0;
  transition: opacity .15s;
}
body > header #menu_toggle:checked ~ nav:after {
  opacity: 1;
  transition-delay: .2s;
}
body > header nav > * {
  opacity: .01;
  transition: opacity .15s;
  transition-delay: 0s;
}
body > header #menu_toggle:checked ~ nav > * {
  opacity: 1;
  transition-delay: .2s;
}

body > header nav > ul {
  padding: 0 3.813em;
  margin: 0 0 1.75em;
  overflow: auto;
}
body > header nav > ul:last-child {
  padding-bottom: 10.714vh;
  margin-bottom: 0;
}
body > header nav a {
  text-decoration: none;
  font-size: 1.375em;
}
body > header nav .btn {
  background-color: transparent;
  color: white;
  border: 1px solid currentcolor;
  font-size: 1.375em;
  font-weight: normal;
  line-height: 1;
  padding-top: .364em;
  padding-bottom: .364em;
  margin-bottom: 0;
}
body > header nav .btn:hover {
  box-shadow: none;
  background-color: white;
  color: rgb(var(--lavendel));
  border-color: transparent;
}
body > header nav .sub a {
  font-family: Calibri, Candara, Segoe, "Segoe UI", Optima, Lato, Arial, Helvetica, Sans-serif;
  font-size: 1.125em;
  font-weight: normal;
}
body > header nav ul ul {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  margin: 1.188em -2.5em 1.188em -1.375em;
  gap: .625em;
}

body > footer {
  text-align: center;
  font-size: .875em;
  padding: 1.285em 5% 1.929em;
  margin-top: 5em;
  background-color: #8AC4E4;
}
body > footer a {
  text-decoration: none;
  cursor: pointer;
}
body > footer a:hover {text-decoration: underline;}
body > footer .partner {
  background-color: white;
  border-radius: 1.357em;
  margin-top: 1.286em;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  padding: 2em 1em 1em;
}

main {
  padding: 4em 5.333%;
  flex: 1 1 0;
}

.movemix {
  font-weight: normal;
  -moz-hyphens: manual;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
  text-transform: lowercase;
  font-family: 'Isidora Alt', Arial, Helvetica, Sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.movemix b {font-weight: 700;}
.movemix .move {font-weight: 900;}
.movemix .movemix, .movemix.standard {color: rgb(var(--lavendel));}
.movemix .bike, .movemix .bikes, .movemix.bike {color: rgb(var(--wiesengrün));}
.movemix .shuttle, .movemix .shuttles, .movemix.shuttle {color: rgb(var(--rot));}
.movemix .roller, .movemix.roller {color: rgb(var(--ocker));}
.movemix .car, .movemix .cars, .movemix.car {color: rgb(var(--türkis));}
.movemix .ticket, .movemix.ticket, .movemix .abo, .movemix.abo {color: rgb(var(--azur));}

#breadcrumb {
  display: flex;
  padding: .875em 5.333%;
  /* margin-bottom: -1em; */
  position: sticky;
  top: 0;
  /* box-shadow: 0 4.125em 4.125em -4.125em rgba(0, 0, 0, 0.16) inset; */
  background: white;
  z-index: 111;
  -moz-hyphens: manual;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
#breadcrumb > * {
  color: #7687BF;
  font-size: .875em;
  line-height: 1;
  text-decoration: none;
  padding: .429em 0;
  border-radius: 1em;
  margin-right: 2em;
  position: relative;
}
#breadcrumb > :before, #breadcrumb > :after {
  content: '';
  font-size: 1.429em; /* 20px, for easier calulations */
  position: absolute;
  width: .4em;
  height: .1em;
  background-color: currentcolor;
  border-radius: 1em;
  left: -1em;
  top: .65em;
  transform: rotate(45deg);
  transform-origin: .35em 50%;
  pointer-events: none;
}
#breadcrumb > :after {transform: rotate(-45deg);}
#breadcrumb > :first-child:before, #breadcrumb > :first-child:after {content: none;}
#breadcrumb .current {
  font-weight: bold;
  background-color: rgb(var(--lavendel) / .16);
  padding-left: 1em;
  padding-right: 1em;
  margin-right: 0;
}


.partner img {
  width: auto;
  max-width: none;
  vertical-align: top;
  margin-left: 1em;
  margin-bottom: 2em;
}
.partner img:first-child {margin-left: 0;}
.partner .havag {height: 1.357em;}
.partner .nextbike {height: 1.357em;}
.partner .slplus {height: 2.571em;}
.partner .lsa {height: 4.786em;}
.partner .bmdv {height: 6.286em;}

main .swiper {
  margin-left: -5.97%;
  margin-right: -5.97%;
}
.swiper-wrapper {cursor: grab;}
.swiper-slide {
  margin-left: .438em;
  margin-right: .438em;
}
.swiper-filter .swiper-pagination {
  position: relative;
  z-index: 1;
  bottom: 0;
  margin-bottom: 2.25em;
}
.swiper-filter .btn {
  margin-left: .75em;
  margin-bottom: .5em;
  background-color: rgb(255 255 255 / .8);
  backdrop-filter: blur(.5em);
}
.swiper-filter .btn:hover {
  background-color: #E8EFFA;
}
.swiper-filter .btn-active, .swiper-filter .btn-active:hover {
  background-color: #6C6C6C;
}
.swiper-filter .btn:first-child {margin-left: 0;}
main .swiper .swiper {
  margin-left: 0;
  margin-right: 0;
}
#videos {
  text-align: center;
  margin-bottom: 6em;
}
#videos h3 {font-size: 1.75em;}
#videos .swiper {
  margin-top: -4.563em;
  margin-bottom: -4em;
  padding: 4.563em 0 7em; /* needed for box shadows on videos */
}
#videos .video_wrapper {
  width: 72.533%;
  max-width: 19.25em;
  margin-bottom: 0;
}
#videos .video_wrapper:only-child {
  margin: 0 auto;
}
#videos .video_wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 16 / 9;
}
#videos footer {
  position: relative;
  z-index: 1;
}

.produkt main header h2 {
  font-size: 2em;
  line-height: 1.219em;
  font-weight: normal;
  -moz-hyphens: manual;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
  position: relative;
}
header .icons {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 2.75em;
}
header .icons img {
  height: 2.75em;
  width: auto;
  margin-right: .75em;
}

/* .farbe-rot {background-color: rgb(var(--rot));}
.farbe-azur {background-color: rgb(var(--azur));}
.farbe-türkis {background-color: rgb(var(--türkis));}
.farbe-hellgrün {background-color: rgb(var(--wiesengrün));}
.farbe-dunkelgrün {background-color: rgb(var(--schattengrün));}
.farbe-mint {background-color: rgb(var(--mintgrün));}
.farbe-lavendel {background-color: rgb(var(--lavendel));}
.farbe-grau {background-color: rgb(var(--steingrau));}
.farbe-ocker {background-color: rgb(var(--ocker));}
*/

.hauptbild {margin-bottom: 4em;}

.cta {
  margin-bottom: 3.125em;
  font-family: 'Isidora Soft Alt', Arial, Helvetica, Sans-serif;
}
.cta img {
  height: 2em;
  width: auto;
}
.cta a {
  text-decoration: none;
  margin-left: .5em;
}
.cta a:first-of-type {margin-left: 0;}

.produktdetails--detail {
  max-width: 24.625em;
  box-shadow: 0 .188em 1em rgb(0 0 0 / .13);
  border-radius: 1.375em;
  padding: 2em 1.25em;
  box-sizing: border-box;
  margin: 0 auto 1.625em;
  background-color: white;
  position: relative;
}
.swiper .produktdetails--detail {
  max-width: 17.5em;
}
.produktdetails--detail.swiper-slide {
  margin-left: .438em;
  margin-right: .438em;
}
.produktdetails--detail > * {
  max-width: 18.875em;
  margin-left: auto;
  margin-right: auto;
}
.produktdetails header {
  text-align: center;
  margin-bottom: 2em;
  min-height: 4.375em;
}
.produktdetails header h3 {
  position: absolute;
  left: -999em;
}
.produktdetails h4, .produktdetails p {
  text-align: center;
}
.produktdetails h4 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.125em;
}
.produktdetails p {margin-bottom: 1em;}
.produktdetails hr {
  background-color: currentcolor;
  border: none;
  display: block;
  height: .063em;
  width: 37.5%;
  margin: 1em auto;
}
.produktdetails figure {text-align: center;}
.produktdetails .fußnote > * {
  font-size: .75em;
  color: #6C6C6C;
}
.produktdetails.swiper-initialized .swiper-wrapper {padding-top: 1em;}

.hero {
  max-width: 100%;
  overflow: hidden;
  flex: 1 0 auto;
}
.hero--img img {
  width: auto;
  max-width: none;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  height: 27.5em;
}
.hero + main {padding-top: 2em;}
article h2 {font-size: 2em;}
article h3 {font-size: 1.125em;}

#faq {
  width: 100%;
  max-width: 36.625em;
  margin-left: auto;
  margin-right: auto;
}
#faq > :not(ul) {
  text-align: center;
  max-width: 23.438em;
  margin-left: auto;
  margin-right: auto;
}
#faq > ul {
  margin: 0 0 2em;
  padding: .5em 1em;
  list-style: none;
  box-shadow: 0 .188em 1em rgb(0 0 0 / .13);
  border-radius: 1.375em;
}
#faq > ul > li {border-top: 1px solid #707070;}
#faq > ul > li:first-child {border-top: none;}
#faq summary {
  list-style: none;
  padding: .5em 1em .5em 0;
  position: relative;
  font-weight: bold;
  /* font-size: .875em; */
  cursor: pointer;
}
#faq summary:before, #faq summary:after {
  content: '';
  height: .143em;
  width: .786em;
  background-color: currentcolor;
  border-radius: 1em;
  position: absolute;
  right: 0;
  top: 1.286em;
  transform: translateY(-50%);
}
#faq summary:after {transform: translateY(-50%) rotate(90deg);}
#faq details > div {
  /* font-size: .75em; */
  margin-bottom: 2em;
}
#faq details[open] summary:after {display: none;}
#faq details ul > li {list-style: disc;}
#faq details ul > li > ul > li {list-style: circle;}
#faq details li p {margin-bottom: 0;}

.highlight {
  border-radius: 1.5em;
  padding: 1em;
  margin: 3em 0;
  font-family: 'Isidora Soft Alt', Arial, Helvetica, Sans-serif;
}
.highlight.farbe-lavendel {background-color: rgb(var(--lavendel) / .22);}
.highlight.farbe-rot {background-color: rgb(var(--rot) / .22);}
.highlight.farbe-azur {background-color: rgb(var(--azur) / .22);}
.highlight.farbe-türkis {background-color: rgb(var(--türkis) / .22);}
.highlight.farbe-hellgrün {background-color: rgb(var(--wiesengrün) / .22);}
.highlight.farbe-dunkelgrün {background-color: rgb(var(--schattengrün) / .22);}
.highlight.farbe-mint {background-color: rgb(var(--mintgrün) / .22);}
.highlight.farbe-grau {background-color: rgb(var(--steingrau) / .22);}
.highlight.farbe-ocker {background-color: rgb(var(--ocker) / .22);}


.highlight :last-child {margin-bottom: 0;}
.highlight h3 {font-size: 1.563em;}
.highlight--text {font-size: .875em;}
.highlight--link {
  border-color: transparent;
  margin-top: 1em;
  color: white;
}
.farbe-lavendel .highlight--link {background-color: rgb(var(--lavendel));}
.farbe-rot .highlight--link {background-color: rgb(var(--rot));}
.farbe-azur .highlight--link {background-color: rgb(var(--azur));}
.farbe-türkis .highlight--link {background-color: rgb(var(--türkis));}
.farbe-hellgrün .highlight--link {
  background-color: rgb(var(--wiesengrün));
  color: currentcolor;
}
.farbe-dunkelgrün .highlight--link {background-color: rgb(var(--schattengrün));}
.farbe-mint .highlight--link {background-color: rgb(var(--mintgrün));}
.farbe-grau .highlight--link {background-color: rgb(var(--steingrau));}
.farbe-ocker .highlight--link {background-color: rgb(var(--ocker));}

.aktionen--header {margin-top: -3em;}
.aktionen--header h2 {
  font-size: 2.375em;
  line-height: 1.053;
  font-weight: normal;
}
.aktionen--header img {display: none;}
.aktionen--kategorie {
  font-size: 1.5em;
  line-height: 1.333;
  margin-bottom: .583em;
}
.aktionen.swiper {padding: 1em 5.333%;}
.swiper .aktion {
  width: 14.375em;
  box-shadow: 0 0 1em rgb(0 0 0 / .16);
  border-radius: 1.188em;
  padding: 1.25em;
  box-sizing: border-box;
}
.aktion.swiper-slide {
  margin-left: .313em;
  margin-right: .375em;
}
.aktion .icons {
  margin-bottom: 1em;
}
.aktion .icons img {
  height: 2em;
  margin-right: .625em;
}
.aktion h4 {
  font: bold 1.563em/1.2 'Isidora Soft Alt', Arial, Helvetica, Sans-serif;
  margin: 0 0 .36em;
}
.aktion--intro {
  font-size: .875em;
  line-height: 1.286;
}
.aktion .btn-mehr:hover {padding-right: 1.5em;}

.start main > * {text-align: center;}
.start main h2 {font-size: 1.75em;}
.start .hero_wrapper {
  width: 100%;
  flex: 1 0 auto;
}
.start .hero {
  position: relative;
  min-height: 33.5em;
  overflow: hidden;
}
.start .hero:after {
  content: '';
  position: absolute;
  left: -3.5em;
  bottom: 0;
  right: -3.5em;
  box-shadow: inset 0 -4.813em 3.5em rgb(var(--lavendel) / .175);
  z-index: 1;
  height: 100%;
}
.start .hero h2 {
  font-size: 2.375em;
  line-height: 1;
  font-weight: normal;
  /* text-transform: lowercase; */
  position: absolute;
  z-index: 1;
  top: .421em;
  left: 50%;
  transform: translateX(-50%);
  -moz-hyphens: manual;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
  width: 8.289em;
  max-width: 100%;
}
.start .hero--img img {height: 33.5em;}
.start .hero--content {
  position: absolute;
  left: 50%;
  bottom: .75em;
  width: 22em;
  transform: translateX(-50%);
  background-color: rgb(255 255 255 / .85);
  backdrop-filter: blur(1em);
  border-radius: .875em;
  box-sizing: border-box;
  padding: 1.75em 2em 1.125em;
  z-index: 2;
}
.start .hero--text {
  font-family: 'Isidora Soft Alt', Arial, Helvetica, Sans-serif;
  margin-bottom: 1.5em;
  margin-bottom: 1lh;
}
.start .hero--text :last-child {margin-bottom: 0;}
.start .hero--content .cta {margin-bottom: 1em;}
.start .hero .download a {text-decoration: none;}
.start .hero .download img {
  height: 2em;
  width: auto;
}
.hero.swiper-slide {
  margin-left: 0;
  margin-right: 0;
}
.hero_nav {
  display: flex;
  justify-content: center;
  gap: .5em;
}
.hero_nav .btn {
  padding: 0;
  height: 2em;
  border: none;
  flex: 0 1 3em;
  display: flex;
  align-items: center;
  background-color: transparent;
}
.hero_nav .btn:before {
  content: '';
  flex: 1 0 auto;
  background-color: rgb(var(--lavendel) / .3);
  height: .438em;
  border-radius: 1em;
  transition: background-color .3s;
}
.hero_nav .btn-aktiv:before {
  background-color: rgb(var(--lavendel) / 1);
}

.start .section--text {
  max-width: 36em;
  margin: auto;
}
.produkte--container {
  margin-left: -5.97%;
  margin-right: -5.97%;
}
.produkte--artikel {
  display: flex;
  flex-direction: column;
  margin-bottom: 5em;
  align-items: center;
  overflow: hidden;
  background-color: #fff;
  margin-left: 0;
  margin-right: 0;
}
.produkte--artikel h3 {
  order: 2;
  padding: 0 1.143em;
  font-size: 1.563em;
}
.produkte--artikel .produktbild {
  order: 1;
  align-self: stretch;
  position: relative;
  z-index: 1;
}
/* .produkte--artikel .produktbild:before {
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 3.125em;
  width: 100%;
  right: 0;
  background: url('../img/bg_produkt.svg') 40vw 100% / auto 100% no-repeat;
  transform: scaleX(-1);
} */
.produkte--artikel .produktbild .hg {
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 3.125em;
  width: 100%;
  right: 0;
/*   background: url('../img/bg_produkt.svg') 40vw 100% / auto 100% no-repeat; */
  background-position: right 40vw top 100%;
  background-size: auto 100%;
  background-repeat: no-repeat;
/*   transform: scaleX(-1); */
}
.produkte--artikel .produktbild img {
  height: 21.25em;
  width: auto;
  max-width: none;
}
.produkte--artikel .produkttext {
  order: 3;
  padding: 0 2em;
  max-width: 19.375em;
}
/* .produkte--artikel .produkttext > * {font-size: .875em;} */
.produkte--artikel .btn-mehr {order: 4;}

.produkte--container.swiper-wrapper {margin: 0;}

.produktnav {
  margin-bottom: 1em;
  padding-left: 5.97%;
  padding-right: 5.97%;
  position: relative;
}
.produktnav:before, .produktnav:after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 5.333%;
  background: linear-gradient(to right, white, transparent);
  z-index: 10;
}
.produktnav:after {
  left: auto;
  right: 0;
  transform: rotate(180deg);
}
.produktnav .swiper-wrapper {
  bottom: 0;
}
.produktnav .swiper-slide {
  width: auto;
  margin: 0 0 0 .625em;
}
.produktnav .swiper-slide:first-child {margin-left: 0;}

.cards {
  margin: 2.5em 0;
  padding: 0;
  list-style: none;
}
.cards > * {
  /* max-width: 12.5em; */
  max-width: 18em;
  margin: 0 auto 2em;
  list-style: none;
  background-color: #fff;
  border-radius: 1.5em;
  /* flex: 0 1 30.524%; */
  text-align: center;
  box-shadow: 0 0 4.75em rgb(0 0 0 / .16);
  padding: 2em 1.25em 2.875em;
  box-sizing: border-box;
  font-size: inherit;
}
.card img {
  height: 5em;
  width: auto;
  margin-bottom: .5em;
}
.card .name {
  font: normal 1.125em/1.333 'Isidora Soft Alt', Arial, Helvetica, Sans-serif;
  margin-bottom: .889em;
}
.card .text {font-size: .875em;}
.card.swiper-slide {
  width: 12.5em;
  margin: 0 .5em;
  height: auto;
}
.card.swiper-slide-active {z-index: 1;}
#kontakt {margin-top: 5.5em;}
#kontakt .cards {
  display: flex;
  justify-content: center;
  margin: 5em auto 0;
}
#kontakt .cards > * {
  margin-left: 5.245%;
  margin-right: 0;
  flex: 0 1 7.25em;
  /* margin-left: 3.125em; */
  padding: 0;
  box-shadow: 0 1.438em 4.125em rgb(0 0 0 / .11);
  transition: transform .3s;
}
#kontakt .cards > :first-child {margin-left: 0;}
#kontakt .cards a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: auto;
  padding-bottom: 100%;
  position: relative;
  /* height: 11.25em; */
}
#kontakt .cards > :hover {transform: scale(1.125);}
#kontakt .cards img {margin: 0;}
#kontakt .cards a img {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 2.75em;
}

@media screen and (min-width: 46em) {
  html:before {content: 'large';}
  body {
    /* position: relative; */
    line-height: 1.75;
    scroll-padding-top: 7.5em;
  }
  h1, h2 {
    font-size: 2.188em;
    line-height: 1.2;
    margin-bottom: .667em;
  }
  body > header {
    display: flex;
    justify-content: space-between;
    padding-top: 1.25em;
    padding-bottom: 1.25em;
    position: sticky;
    top: 0;
    z-index: 101;
    background-color: #fff;
  }
  body > header h1 img {max-height: 4.875em;}

  #menu_toggle + label {
    top: 2em;
    bottom: auto;
    right: 1.25em;
  }

  body > header nav {
    display: block;
    padding-top: 10.938em;
  }
  /* “background color” transition */
  body > header nav:before {
    top: 2em;
    right: 1.25em;
    bottom: auto;
  }
  body > header #menu_toggle:checked ~ nav:before {
    right: 0;
    top: 0;
  }
  /* negative logo */
  body > header nav:after {
    height: 4.813em;
    transition-duration: .25s;
    transition-delay: .025s;
  }
  body > header #menu_toggle:checked ~ nav:after {transition-delay: .05s;}

  body > header nav > ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 2em;
    margin-bottom: 2em;
  }
  body > header nav > ul > li.start {margin-bottom: 2em;}
  body > header nav .start {flex: 1 0 100%;}
  body > header nav .start > a {
    position: absolute;
    left: -9999em;
    top: -9999em;
  }
  body > header nav .btn {
    font-size: 1.375em;
  }
  body > header nav > ul ul {
    margin: 0;
    justify-content: center;
    gap: .625em 1.688em;
  }

  #breadcrumb {
    position: static;
    width: 100%;
    box-sizing: border-box;
    max-width: 48.5em;
    margin: 0 auto;
    padding-left: 2em;
    padding-right: 2em;
    background: none;
    box-shadow: none;
    z-index: auto;
  }
  main {padding: 5.625em 0 4em;}
  main > article {
    padding-bottom: 5.75em;
    max-width: 56.25em;
    padding-left: 5.333%;
    padding-right: 5.333%;
    margin: auto;
  }
  main > .video {
    margin-left: 14.479%;
    margin-bottom: 20.438em;
  }
  main > .video iframe {
    width: 100vw;
    max-width: 68em;
  }
  .disabled .swiper-wrapper {cursor: default;}
  main .swiper {
    margin-left: 0;
    margin-right: 0;
  }

  body.produkt {line-height: 1.5;}
  .produkt .produktdetails {
    position: relative;
    display: flex;
    padding: 0 2em;
    justify-content: center;
    gap: 1%;
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .produkt .produktdetails.links {
    justify-content: flex-start;
    padding: 0 calc(50vw - 28.125em) 0 calc(50vw - 24.25em);
  }
/*   .produkt .produktdetails:before {
    content: '';
    position: absolute;
    background: url(../img/bg_produkt.svg) 0 0 / contain no-repeat;
    width: 42.813em;
    height: 28.75em;
    top: 0;
    left: calc(50% + 29em);
    transform: translateX(-50%) scaleX(1);
  } */
  .produkt .produktdetails .hg {
    position: absolute;
    background-position: 0 0;
    background-size: contain;
    background-repeat: no-repeat;
    width: 42.813em;
    height: 28.75em;
    top: 0;
    left: calc(50% + 29em);
    transform: translateX(-50%);
  }
  .produktdetails--detail {
    margin-left: 0;
    margin-right: 0;
    min-width: 13.688em;
  }
  #videos .swiper-slide, .swiper .produktdetails--detail {width: calc(33.333% - 1.25em);}
  /* .produkt .produktdetails.swiper {display: initial;} */
/*   .produkt .produktdetails.links:before {
    right:  calc(50% + 31em);
    left: auto;
    transform: translateX(50%) scaleX(-1);
  } */
  .produkt .produktdetails .hg.links {
    right:  calc(50% + 31em);
    left: auto;
    transform: translateX(50%);
  }

  .produkt main header h2 {
    font-size: 2.813em;
    min-width: 106.702%;
  }
  header .icons {margin-bottom: 1.75em;}
  header .icons img, .aktion .icons img {height: 3.125em;}
  .produkt main {
    display: grid;
    /* grid-template-columns: minmax(2em, calc(50% - 388px)) fit-content(24.25em) minmax(1em,28.125em) minmax(2em, calc(50% - 450px)); */
    grid-template-columns: minmax(2em, calc(50% - 388px)) minmax(1em, 24.25em) minmax(1em,28.125em) minmax(2em, calc(50% - 450px));
    justify-content: center;
  }
  .produkt main > * {
    grid-column: span 4;
  }
  .produkt main > header {
    grid-area: 1 / 2;
  }
  .produkt main > header h2 {text-transform: lowercase;}
  .produkt .beschreibung {
    grid-area: 2 / 2;
    margin-bottom: 3.125em;
  }
  .produkt .beschreibung > * {font-size: 1.125em;}
  .produkt .beschreibung > :last-child {margin-bottom: 0;}
  .produkt .cta {
    grid-area: 3 / 2;
  }
  .produkt .hauptbild {
    grid-column: 3;
    grid-row: 1 / span 4;
    max-width: 43.188em;
  }
  .produkt .highlight {
    grid-area: 4 / 2;
    margin-top: 0;
    min-width: 32.333%;
    max-width: 21em;
  }
  .produkt .produktdetails {
    grid-row: 5;
    margin-bottom: 10.25em;
  }
  .produkt .swiper-slide {
    height: auto;
    align-self: start;
  }
  .produkt #videos {grid-row: 6;}
  .produkt #faq {grid-row: 7;}

  .produkt .hauptbild .bike {
    width: 25em;
    margin: -2em 0 0;
  }
  .hero img {
    /* max-height: 36em; */
    width: auto;
  }
  article .abschnitt {
    display: flex;
    justify-content: space-between;
  }
  article .abschnitt > * {flex: 0 1 47%;}
  article figure {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
  article h2 {font-size: 2.188em;}
  article h3 {font-size: 1.25em;}
  article .media {
    /* width: 100%; */
    display: block;
  }
  .media .video {
    margin-left: auto;
    margin-right: auto;
  }

  .aktionen--header, .aktionen--kategorie, .aktionen.swiper {
    max-width: 56.25em;
    margin-left: auto;
    margin-right: auto;
  }
  .aktionen--header {
    padding-left: 5.333%;
    padding-right: 5.333%;
    display: grid;
    grid-template: auto 1fr / 22.875em auto;
    margin-top: -5.625em;
  }
  .aktionen--header h2 {
    font-size: 2.813em;
    margin-top: 1em;
  }
  .aktionen--intro {
    font-size: 1.125em;
    grid-area: 2 / 1;
  }
  .aktionen--header img {
    display: block;
    font-size: 1em;
    grid-area: 1 / 2 / span 2;
    max-width: none;
  }
  .aktionen--kategorie {
    padding: 0 5.333%;
    max-width: 37.5em;
    line-height: 1;
    margin-bottom: 0;
  }

  .start .hero {
    min-height: 36em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2em 0;
    box-sizing: border-box;
  }
  .start .hero--img img {
    position: absolute;
    top: 0;
    height: 100%;
  }
  .start .hero h2, .start .hero--content {
    position: relative;
    transform: translateX(-23.125rem);
    margin: 0;
    top: 0;
    width: 19.75rem;
    -moz-hyphens: manual;
    -webkit-hyphens: manual;
    -ms-hyphens: manual;
    hyphens: manual;
  }
  .start .hero h2 {
    font-size: 3.125em;
    line-height: 1.04;
    margin-bottom: 1em;
  }
  .start .hero--content {
    padding-left: 1.25em;
    padding-right: 1.25em;
  }
  .start .hero--text {font-size: 1.125em;}
  .start .hero .download {
    display: flex;
    flex-wrap: wrap;
    gap: .875em;
  }
  .start .hero .download img {height: 2.5em;}
  .start main h2 {margin-bottom: 1.643em;}
  main .produktnav {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
  main .produktnav .btn {padding: .313em 1.5em;}
  .produkte--artikel {
    display: grid;
    grid-template-columns: 59.357% 15.25em 23.214%;
    grid-template-rows: auto auto 1fr;
    align-items: start;
    text-align: left;
    position: relative;
  }
/*   .produkte--artikel:before {
    right: 51%;
    top: 0;
    bottom: 7.5em;
    width: 49%;
    background-position: 0 100%;
  } */
  .produkte--artikel > * {
    grid-column: 2;
    justify-self: start;
  }
  .produkte--artikel .produktbild {
    grid-column: 1;
    grid-row: 1 / span 3;
    justify-self: stretch;
    display: flex;
    justify-content: flex-end;
  }
/*   .produkte--artikel .produktbild:before {
    background-position: 0 0;
    bottom: 7.5em;
    right: 20%;
    width: 80%;
  } */
  .produkte--artikel .produktbild .hg {
    background-position: 100% 0;
    bottom: 7.5em;
    right: 20%;
    width: 80%;
  }
  .produkte--artikel .produktbild img {
    height: 31.25em;
    object-fit: contain;
    max-width: none;
  }
  .produkte--artikel h3 {
    padding: 0;
    margin-top: 3em;
  }
  .produkte--artikel .produkttext {
    padding: 0;}

  .cards {
    margin-top: 4.813em;
    display: flex;
    gap: 1.429em;
    justify-content: center;
    padding: 0 5.333%;
  }
  .cards > * {
    flex: 1 1 100%;
    margin-left: 0;
    margin-right: 0;
  }
  .cards img {
    margin-bottom: 1.75em;
    height: 4.375em;
  }
  .cards .name {font-size: 1.375em;}
  .cards .text {font-size: inherit;}
  .cards.swiper-wrapper {
    gap: 0;
    justify-content: normal;
    padding: 0;
  }



/* 	.start h1, .start h2, .start h3,
  .detail header h1, .detail header h2, .detail header h3
    {text-transform: lowercase;}
  .start > header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100;
  }
  .start main {padding-top: 0;}
  .start main > * {text-align: center;}
  .start main > .feature {text-align: left;}
  .start > footer {margin-top: 0;} */

/* 	article > * {
    font-size: 1.75em;
    line-height: 1.321;
    margin-bottom: 1.321em;
  }
  article > * dd, article > * dt {font-size: 1em;}
  article h2 {
    font-size: 4.625em;
    margin-bottom: .5em;
    line-height: 1.125;
  }
  article h3 {
    font-size: 3em;
    margin-bottom: 1em;
    line-height: 1.125;
  }
  article h4 {
    font-size: 2.5em;
    margin-bottom: .5em;
  }
  article h5 {
    font-size: 2em;
    margin-bottom: 0;
  }
  article h6 {
    font-size: 1.75em;
    margin-bottom: 0;
  }
  article ul {
    margin-left: 0;
    padding-left: 1em;
  }
  article > :not(.hauptinhalt) li {font-size: inherit;} */

  .faq main article {
    display: block;
    padding-right: 9em;
  }
  .faq h2 {
    font-weight: bold;
    text-transform: none;
  }
  .faq main ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }
  .faq main ol {
    padding-left: 1em;
    margin-left: 0;
  }
  .faq main ol ol {
    list-style-type: lower-alpha;
  }
  .faq main ol ol ol {list-style-type: lower-roman;}
  .faq main li {
    padding-left: 1ch;
  }
  .faq main li p {margin-bottom: 0;}
  .faq main ul li:before {
    content: '_';
    float: left;
    margin-left: -1ch;
  }


  article .abschnitt {font-size: inherit;}
  .abschnitt--inhalt figcaption {font-size: 1.75em;}
  article .fußnote {
    font-size: .75em;
    margin: 10em 0;
    color: #6C6C6C;
  }
  article .fußnote > :last-child {margin-bottom: 0;}
}
@media screen and (min-width: 58.75em) {
  #menu_toggle + label {right: calc(50% - 28.125em);}
  body > header nav:before {right: calc(50% - 28.125em);}
}
@media screen and (max-width: 40em) {
  picture {
    display: block;
    overflow: hidden;
  }
  .cta picture {display: inline;}
  article h2 {
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
  }
}