/* ==========================================================================
   VOS Motors International - Stylesheet
   Nachbau von vos-motors.com (Design-Werte 1:1 uebernommen)
   ========================================================================== */

/* --------------------------------------------------------------- Tokens - */
:root{
  --c-black:#000;
  --c-white:#fff;
  --c-off-white:#F3F7F7;
  --c-grey-f3:#F3F3F3;
  --c-grey-f5:#F5F5F5;
  --c-grey-f7:#F7F7F7;
  --c-hero-bg:#54595F;
  --c-text-muted:#7A7A7A;
  --c-text-base:#333;
  --c-border-btn:#BDBDBD;
  --c-border-btn-soft:#AFAFAF;
  --c-border-field:#C4C4C4;
  --c-nav:#3D3D3D;
  --c-nav-active:#1A1A1A;
  --c-link:#373737;
  --c-divider-dotted:#9B9B9B;

  --ff-display:"Wix Madefor Display","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ff-text:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --ff-base:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;

  --container:1550px;
  --container-narrow:1140px;
  --gutter:10px;
  --widget-gap:20px;
}

/* ---------------------------------------------------------------- Reset - */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background-color:var(--c-black);
  color:var(--c-text-base);
  font-family:var(--ff-base);
  font-size:1rem;
  font-weight:400;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;font-weight:500;line-height:1.2;margin-block-start:.5rem;margin-block-end:1rem}
h1{font-size:2.5rem}
h2{font-size:2rem}
h3{font-size:1.75rem}
h4{font-size:1.5rem}
h5{font-size:1.25rem}
h6{font-size:1rem}

p{margin-block-start:0;margin-block-end:.9rem}
ul,ol{margin-block-start:0;margin-block-end:.9rem;padding-inline-start:1.5rem}

a{color:var(--c-link);text-decoration:none;background-color:transparent}

img{display:block;max-width:100%;height:auto;border-style:none}

hr{border:0;border-top:1px solid rgba(0,0,0,.15);margin:1rem 0}

button,input,textarea{font:inherit;color:inherit}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:2000;
  padding:12px 20px;background:var(--c-white);color:var(--c-black);
}
.skip-link:focus{left:0}

.visually-hidden{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ------------------------------------------------------------- Container - */
.container{width:100%;max-width:var(--container);margin:0 auto}
.container--narrow{max-width:var(--container-narrow)}
.container--full{max-width:none;padding:0}

/* ---------------------------------------------------------------- Header - */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  display:flex;align-items:center;
  min-height:10vh;
  padding:0 4%;
  background-color:rgba(255,255,255,.75);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
}

.site-header__brand{flex:0 0 20%;max-width:20%;padding:10px}
.site-header__brand img{width:255px;max-width:100%}

.site-header__nav{flex:0 0 80%;max-width:80%;display:flex;justify-content:flex-end}

.main-nav{display:flex}
.main-nav__list{display:flex;flex-wrap:wrap;list-style:none;margin:0;padding:0}
.main-nav__item{display:flex;position:relative}
.main-nav__item:not(:last-child)::after{
  content:"";align-self:center;
  height:35%;
  border-left:2px dotted #080303;
}
.main-nav__item:not(:first-child) > .main-nav__link{margin-inline-start:23.5px}
.main-nav__item:not(:last-child)  > .main-nav__link{margin-inline-end:23.5px}

.main-nav__link{
  position:relative;
  display:flex;align-items:center;
  padding:13px 20px;
  line-height:20px;
  white-space:nowrap;
  font-family:var(--ff-display);
  font-size:15px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:var(--c-nav);
  transition:color .4s;
}
.main-nav__link::after{
  content:"";position:absolute;left:50%;bottom:0;
  width:0;height:1px;background:var(--c-nav-active);
  transform:translateX(-50%);
  transition:width .3s cubic-bezier(.58,.3,.005,1);
}
.main-nav__link:hover,
.main-nav__link:focus,
.main-nav__link.is-active{color:var(--c-nav-active)}
.main-nav__link:hover::after,
.main-nav__link:focus::after,
.main-nav__link.is-active::after{width:100%}

/* Burger (nur Mobile sichtbar) */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  margin-left:auto;padding:.25em;
  border:0;border-radius:3px;
  background-color:var(--c-white);
  color:var(--c-black);
  font-size:25px;line-height:1;
  cursor:pointer;
}
.nav-toggle svg{width:1em;height:1em;fill:currentColor;display:block}
.nav-toggle__close{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__open{display:none}
.nav-toggle[aria-expanded="true"] .nav-toggle__close{display:block}

.mobile-nav{
  display:none;
  position:absolute;left:0;right:0;top:100%;
  z-index:9997;
  margin-top:22px;
  max-height:100vh;overflow-y:auto;
  background-color:var(--c-white);
  transform-origin:top;
}
.mobile-nav.is-open{display:block;animation:nav-drop .3s ease}
@keyframes nav-drop{
  from{transform:scaleY(0);opacity:0}
  to{transform:scaleY(1);opacity:1}
}
.mobile-nav__list{list-style:none;margin:0;padding:0}
.mobile-nav__link{
  display:flex;align-items:center;justify-content:center;
  padding:10px 20px;
  border-inline-start:8px solid transparent;
  font-family:var(--ff-display);
  font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase;
  color:#33373d;
}
.mobile-nav__link.is-active{color:var(--c-nav-active)}

/* ------------------------------------------------------------------ Hero - */
.hero{
  position:relative;
  overflow:hidden;
  background-color:var(--c-hero-bg);
  background-position:center center;
  background-size:cover;
  padding:300px 0 400px;
}
.hero--home{padding:260px 0 350px}
.hero--legal{padding:150px 0 300px}

.hero__slides{position:absolute;inset:0;overflow:hidden}
.hero__slide{
  position:absolute;inset:0;
  transform:translateY(100%);
  will-change:transform;
}
.hero__slide.is-active{transform:translateY(0)}
.hero__slide.is-leaving{transform:translateY(-100%)}
.hero__slide-img{
  position:absolute;inset:0;
  background-position:center center;
  background-size:cover;
  transform:scale(1.15);
}
.hero__slide.is-active .hero__slide-img{transform:scale(1)}

.hero__overlay{
  position:absolute;inset:0;
  background-image:linear-gradient(180deg,rgba(0,0,0,.4) 0%,rgba(0,0,0,1) 100%);
}
.hero--inner .hero__overlay{
  background-image:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
}

.hero__inner{position:relative;z-index:2;padding:var(--gutter)}

.hero__title{
  margin:0 0 var(--widget-gap);
  text-align:center;
  font-family:var(--ff-display);
  font-size:65px;font-weight:700;letter-spacing:10px;
  line-height:1;
  color:var(--c-off-white);
}
.hero__title--blend{mix-blend-mode:difference}

.hero__bar{
  margin:0 350px;
  padding:10px 0;
  background-color:var(--c-black);
  text-align:center;
}
.hero--legal .hero__bar{margin:0 300px}
.hero__bar-title{
  margin:0;
  font-family:var(--ff-display);
  font-size:14px;font-weight:700;letter-spacing:10px;
  line-height:1;
  color:var(--c-off-white);
}

/* --------------------------------------------------------------- Sections - */
.section{position:relative}
.section--pull{margin-top:-250px;z-index:3}
.section--mb50{margin-bottom:50px}
.section--mt50{margin-top:50px}

/* Spalten-Innenflaechen (entsprechen den Elementor-Column-Paddings) */
.bg-white{background-color:var(--c-white)}
.bg-f5{background-color:var(--c-grey-f5)}
.bg-f7{background-color:var(--c-grey-f7)}
.radius-6{border-radius:6px}
.radius-6-top{border-radius:6px 6px 0 0}

/* Elementor-Spaltenraster ------------------------------------------------- */
.row{display:flex;flex-wrap:wrap;width:100%}
.row--reverse-tablet{flex-direction:row}
.col{display:flex;width:100%;min-width:0}
.col__body{
  display:flex;flex-wrap:wrap;
  align-content:flex-start;align-items:flex-start;
  width:100%;
  padding:var(--gutter);
}
.col__body > *{width:100%}
.col__body > *:not(:last-child){margin-bottom:var(--widget-gap)}
/* Widgets mit eigener Breite haben in Elementor keinen Grundabstand */
.col__body > .w-35,.col__body > .w-65,.col__body > .w-auto{margin-bottom:0}
.col__body > img{margin-inline:auto}
.col--middle > .col__body{align-content:center;align-items:center}

/* Innenabstaende der Spalten (Elementor-Werte) */
.col__body.p-card{padding:55px 100px 100px}
.col__body.p-card-open{padding:0 100px 100px}
.col__body.p-card-foot{padding:55px 100px}
.col__body.p-panel-soft{padding:50px}
.col__body.p-text-block{padding:30px 15px 30px 30px}
.col__body.p-panel-grey{padding:30px 50px}
.col__body.p-inset{padding:20px}
.col__body.p-loose{padding:10px}
.col__body.p-flush{padding:0}

.row--pt100{padding-top:100px}

.col--38{width:38%}
.col--62{width:62%}
.col--70{width:70.835%}
.col--29{width:29.055%}
.col--50{width:50%}
.col--33{width:33.333%}
.col--29-3{width:29.335%}
.col--70-7{width:70.665%}
.col--26-8{width:26.769%}
.col--73-2{width:73.231%}
.col--9{width:8.88%}
.col--91{width:91.039%}

.w-35{width:35%}
.w-65{width:65%}
.w-auto{width:auto}

/* Widget-Bausteine -------------------------------------------------------- */
.section-title{
  margin:0;
  text-align:center;
  font-family:var(--ff-display);
  font-size:24px;font-weight:700;text-transform:uppercase;
  line-height:35px;letter-spacing:1px;
  color:var(--c-black);
}
.section-title--start{text-align:start}
.section-title--sm{font-size:20px}

.divider{padding:50px 0;text-align:center}
.divider__line{display:block;width:12%;margin:0 auto;border-top:1px solid var(--c-black)}

.text{font-family:var(--ff-text);font-weight:400;color:var(--c-text-muted)}
.text h3{font-size:1.75rem;font-weight:500}
.text--display{font-family:var(--ff-display);font-size:17px;font-weight:400;color:var(--c-black)}
.text--display-base{font-family:var(--ff-display);font-weight:400;color:var(--c-black)}
.text--roboto{font-family:var(--ff-text);font-size:17px;font-weight:400;color:var(--c-black)}
.text--lead{font-family:var(--ff-display);font-size:20px;font-weight:400;color:var(--c-black);text-align:center;padding:0 250px}
.text > *:last-child{margin-bottom:0}

.pad-text-right{padding:30px 30px 0 0}
.pad-text-top{padding:10px 0 0}

.box-f3{background-color:var(--c-grey-f3)}
.section-panel{padding:30px 30px 0}
.section-panel--flush{padding:0 30px}
.section-panel--contact{margin:20px 0;padding:0 30px}
.section-panel--legal{border-radius:6px;padding:0 10px}

/* ---------------------------------------------------------------- Buttons - */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  padding:12px 24px;
  border:1px solid var(--c-border-btn);
  border-radius:0;
  background-color:rgba(255,255,255,.49);
  font-family:var(--ff-display);
  font-size:14px;font-weight:700;line-height:1;
  letter-spacing:1px;text-transform:uppercase;
  color:var(--c-black);fill:var(--c-black);
  text-align:center;
  transition:all .3s;
  cursor:pointer;
}
.btn:hover,.btn:focus{background-color:rgba(0,0,0,.58);color:var(--c-white);fill:var(--c-white)}
.btn--soft-border{border-color:var(--c-border-btn-soft)}
.btn svg{width:1em;height:1em;fill:currentColor;flex:none}

.btn-row{display:flex}
.btn-row--end{justify-content:flex-end}
.btn-row--center{justify-content:center}
.btn-row--start{justify-content:flex-start}
.btn-row--pull{margin-top:-40px}
.btn-row--pad-right{padding-right:20px}

/* --------------------------------------------------------------- Bildpaare - */
.media{padding:20px 0 0 20px;text-align:center}
.media--right{padding:20px 20px 0 0}
.media img{margin-inline:auto}
.media--capped img{max-width:85%}
.media--fill img{width:100%}

/* -------------------------------------------------------------- Karussell - */
.carousel{position:relative;width:100%;overflow:hidden}
.carousel__track{display:flex;width:max-content;will-change:transform}
.carousel__slide{flex:0 0 auto;width:calc(100vw / 5)}
.carousel__slide img{width:100%;height:100%;object-fit:cover;display:block}

/* Endlos-Lauf: der Slidesatz wird per JS dupliziert, daher -50 % pro Zyklus */
.carousel--running .carousel__track{
  animation:carousel-marquee var(--carousel-duration,81s) linear infinite;
}
.carousel--running:hover .carousel__track{animation-play-state:paused}
@keyframes carousel-marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .carousel--running .carousel__track{animation:none}
  .hero__slide,.hero__slide-img{transition:none !important}
}

/* ------------------------------------------------------------------- Form - */
.form{width:100%}
.form__fields{display:flex;flex-wrap:wrap;margin:0 -5px -10px}
.form__group{width:100%;padding:0 5px;margin-bottom:10px}
.form__group--half{width:50%}

.form__field{
  width:100%;max-width:100%;
  min-height:40px;
  padding:5px 14px;
  border:0;border-bottom:1px solid var(--c-border-field);
  border-radius:0;
  background-color:var(--c-white);
  font-family:var(--ff-display);
  font-size:15px;font-weight:400;line-height:1.4;
  color:var(--c-black);
}
.form__field::placeholder{color:inherit;opacity:.6;font-family:inherit}
.form__field:focus{outline:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.1)}
textarea.form__field{resize:vertical}

.form__option{display:flex;align-items:center;gap:8px;flex-basis:100%}
.form__option input{width:auto;min-height:0;margin:0}
.form__option label{font-family:var(--ff-display);font-weight:400;color:var(--c-black)}

.form__actions{display:flex;justify-content:flex-end;width:100%;padding:0 5px}

.btn--submit{
  min-height:47px;
  padding:15px 30px;
  border:none;border-radius:4px;
  background-color:var(--c-black);
  color:var(--c-white);fill:var(--c-white);
  font-family:var(--ff-text);
  font-size:16px;font-weight:500;letter-spacing:normal;text-transform:none;
}
.btn--submit:hover,.btn--submit:focus{background-color:#2C2C2C;color:var(--c-white);fill:var(--c-white)}

.form__status{
  width:100%;padding:0 5px;margin:14px 0 0;
  font-family:var(--ff-display);font-size:14px;color:var(--c-black);
}
.form__status:empty{display:none;margin:0}

/* -------------------------------------------------------------- Icon-Liste - */
.icon-list{list-style:none;margin:0;padding:0}
.icon-list__item{display:flex;align-items:center}
.icon-list__item:not(:last-child){padding-block-end:3px}
.icon-list__item:not(:first-child){margin-block-start:3px}
.icon-list__icon{display:flex;align-items:center;padding-inline-end:6px}
.icon-list__icon svg{width:16px;height:16px;fill:var(--c-black)}
.icon-list__text{
  font-family:var(--ff-display);font-size:15px;font-weight:700;
  color:var(--c-black);
}

/* ---------------------------------------------------------------- Footer - */
/* Wie im Original: dunkles Foto unter einer fast deckenden weissen Flaeche.
   Sichtbar bleibt davon ein heller Grauton (~#F0F0F0). Die Grundfarbe ist
   bewusst dunkel, damit der Ton auch ohne Foto stimmt. */
.site-footer{
  position:relative;
  padding:30px 0 0;
  background-color:#000;
  background-image:url("/assets/img/hero/footer.jpg");
  background-position:bottom center;
  background-repeat:no-repeat;
  background-size:cover;
}
.site-footer::before{
  content:"";position:absolute;inset:0;
  background-color:rgba(255,255,255,.941);
  background-image:url("/assets/img/v-favicon.png");
  background-position:49% 30%;
  background-repeat:no-repeat;
  background-size:10% auto;
}
.site-footer__inner{position:relative;z-index:2;max-width:1600px;margin:0 auto;padding:var(--gutter)}

.site-footer__top{
  display:flex;flex-wrap:wrap;align-items:stretch;
  padding-bottom:30px;margin-bottom:30px;
  border-bottom:1px dotted var(--c-divider-dotted);
}
.site-footer__legal{flex:0 0 50%;max-width:50%;padding:var(--gutter);display:flex;align-items:flex-end}
.site-footer__legal-inner{width:100%;padding-top:25px}
.site-footer__legal ul{display:flex;flex-wrap:wrap;list-style:none;margin:0 -9.5px;padding:0}
.site-footer__legal li{margin-inline:9.5px}
.site-footer__legal a{font-family:var(--ff-display);font-size:13px;font-weight:600;color:var(--c-black);transition:color .3s}
.site-footer__legal a:hover{color:var(--c-text-muted)}

.site-footer__address{flex:0 0 50%;max-width:50%;padding:var(--gutter);text-align:end}
.site-footer__address p{
  margin:0 0 .9rem;
  font-family:var(--ff-display);font-size:14px;font-weight:600;color:var(--c-black);
}
.site-footer__contact{
  margin:20px 0 0;
  font-family:var(--ff-display);font-size:13px;font-weight:600;
  line-height:30px;letter-spacing:1px;color:var(--c-black);
}

.site-footer__bottom{text-align:center;padding:var(--gutter)}
.site-footer__bottom h6{
  margin:0;
  font-family:var(--ff-text);font-size:13px;font-weight:300;color:#54595F;
}
.site-footer__bottom a{color:inherit}

/* -------------------------------------------------- Sprachumschalter (UI) - */
.lang-switch{position:fixed;right:20px;bottom:20px;z-index:1200;font-family:var(--ff-base)}
.lang-switch__panel{
  display:none;
  background:var(--c-white);
  border-radius:10px 10px 0 0;
  box-shadow:0 4px 20px rgba(0,0,0,.18);
  overflow:hidden;
}
.lang-switch.is-open .lang-switch__panel{display:block}
.lang-switch__option{
  display:flex;align-items:center;gap:10px;
  padding:10px 16px;
  font-size:15px;color:#222;text-decoration:none;
  cursor:pointer;background:none;border:0;width:100%;text-align:left;
}
.lang-switch__option:hover{background:var(--c-grey-f3)}
.lang-switch__current{
  display:flex;align-items:center;gap:8px;
  padding:10px 16px;
  border:0;border-radius:10px;
  background:var(--c-white);
  box-shadow:0 4px 20px rgba(0,0,0,.18);
  font-size:15px;font-weight:700;color:#222;
  cursor:pointer;
}
.lang-switch.is-open .lang-switch__current{border-radius:0 0 10px 10px}
.lang-switch__flag{width:26px;height:18px;border-radius:2px;flex:none;display:block}
.lang-switch__caret{width:12px;height:12px;fill:#555;transition:transform .2s}
.lang-switch.is-open .lang-switch__caret{transform:rotate(180deg)}

/* -------------------------------------------------------- Rechtstext-Box - */
.legal-box__content h2{margin-block-start:.5rem}
.legal-box__content h5{margin-block-start:1.5rem}
.legal-box__content a{color:inherit;text-decoration:underline}
.legal-box__content li > p{margin-bottom:0}

/* ========================================================== Breakpoints == */
@media (max-width:1024px){
  .site-header__brand{flex:0 0 25%;max-width:25%;padding:0 2px 0 0}
  .site-header__brand img{width:100%}
  .site-header__nav{flex:0 0 75%;max-width:75%}
  .main-nav__link{font-size:8px;padding:13px 10px}
  .main-nav__item:not(:first-child) > .main-nav__link{margin-inline-start:0}
  .main-nav__item:not(:last-child)  > .main-nav__link{margin-inline-end:0}

  .hero__title{font-size:50px}
  .hero__bar,.hero--legal .hero__bar{margin:0}

  .col__body.p-card{padding:30px}
  .col__body.p-card-open{padding:39px}
  .col__body.p-card-foot{padding:30px}
  .col__body.p-inset{padding:0}

  .col--38,.col--62,.col--70,.col--29,.col--50,.col--33,.col--9,.col--91,
  .col--29-3,.col--70-7,.col--26-8,.col--73-2{width:100%}
  .col--tab-38{width:38%}
  .col--tab-62{width:62%}
  .col--tab-30{width:30%}
  .col--tab-70{width:70%}
  .col--tab-50{width:50%}

  .row--reverse-tablet{flex-direction:column-reverse}


  .text--lead{padding:0}

  .pad-text-right{padding:0}
  .section-panel--flush{padding:0 30px 30px}
  .section-panel--contact{margin-top:30px;margin-bottom:0;padding:30px}
  .section-panel--legal{margin-top:30px;margin-bottom:0;padding:30px}
  .row--pt100.row--pt-tablet-0{padding-top:0}

  .carousel__slide{width:calc(100vw / 4)}
}

@media (max-width:767px){
  .site-header{min-height:11vh}
  .site-header__brand{flex:0 0 50%;max-width:50%;padding:0}
  .site-header__nav{flex:0 0 50%;max-width:50%}
  .main-nav{display:none}
  .nav-toggle{display:flex}

  .hero{padding:275px 0 365px}
  .hero--home{padding:400px 0 240px}
  .hero__title{font-size:36px;line-height:1.5em}
  .hero__bar-title{font-size:12px}
  .hero--legal .hero__title{font-size:36px}
  .hero--privacy .hero__title{font-size:23px}

  .col--tab-38,.col--tab-62,.col--tab-30,.col--tab-70,.col--tab-50{width:100%}

  .col__body.p-card-open{padding:20px}
  .col__body.p-panel-soft{padding:30px}
  .col__body.p-text-block,.col__body.p-panel-grey,.col__body.p-loose{padding:20px}
  .section-panel,.section-panel--flush,.section-panel--contact{padding:20px}
  .section-panel--legal{margin:0;padding:20px}

  .w-35,.w-65{width:100%}
  .media,.media--right{padding:0}
  .media + .media{padding-top:15px}
  .media--capped img{max-width:100%}

  .btn-row--pull{margin-top:0;padding-top:30px}
  .btn-row--pad-right{padding-right:0}

  .carousel__slide{width:calc(100vw / 2)}

  .site-footer{padding:25px 20px}
  .site-footer::before{background-size:0 auto}
  .site-footer__legal,.site-footer__address{flex:0 0 100%;max-width:100%;text-align:start}
  .site-footer__legal{padding-left:0;padding-right:0}
  .site-footer__address{padding-left:0;padding-right:0}
  .site-footer__contact{letter-spacing:0}
  .site-footer__bottom h6{font-size:10px;line-height:19px}
}