html {height:100%; scroll-behavior: smooth;}
*, ::before, ::after {box-sizing: border-box;}
* {padding:0; margin:0; box-sizing: border-box;}
img {display: block; max-width: 100%; width:100%; height:auto;}
.img-fluid {max-width: 100%; width: 100%; height:auto;border-radius: 20px;margin:0 auto;}
body {font-family: "SFPRODISPLAYMEDIUM",sans-serif; font-weight: 100; line-height: 150%; font-size:1rem; width: 100%;overflow-x: hidden;}


:root {--color1:#000000;} /* alter Wert:  #82a3b2; */
:root {--color2: #454545;}
:root {--color3: #3a3f4b;}
:root {--callout: #000000;}
:root {--seitenbreite: 1901px;}
:root {--padding-bottom: min(100px, 6%);}
:root {--padding-top: min(100px, 6%);}
:root {--bg-esd: #3c4043;}
:root {--kontaktbutton:#6e9fb5;}

@font-face {
  font-family: 'SFPRODISPLAYMEDIUM'; 
  font-style: normal; 
  src: local('SFPRODISPLAYMEDIUM'),
  url(font/SFPRODISPLAYMEDIUM.ttf) format('truetype');
}



h1 {font-size: 56px;line-height: 1.07143;  font-family: 'SFPRODISPLAYMEDIUM'; font-weight:400;}
@media screen and (width > 1755px) {
  h1 {font-size:75px;}    
}

h2 {font-size: 40px;line-height: normal;font-family: 'SFPRODISPLAYMEDIUM';}
@media (width < 550px) {
  h2 {font-size:28px;}
}

@media (width < 350px) {
  h2 {font-size:24px;}
}
h3 {font-size: 24px;font-weight: 400;margin-bottom: 10px;line-height: normal;}
h4 {font-size: 18px;font-weight: 400;margin-bottom: 10px;}
p {font-weight: 100;margin-bottom: 10px; letter-spacing: 0px;}
.subhead {font-size: 18px;line-height: 1.3;font-weight: 400; font-family: "SF Pro Display","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif; margin: 10px auto;max-width: 800px;}
.cfs {display:flex; justify-content: center; flex-wrap: wrap; margin:0 auto; padding:0 20px; width:100%; max-width: var(--seitenbreite); margin:0 auto;}
.cfs2 {max-width: 1235px;display: flex; justify-content: center; flex-wrap: wrap; align-items: center; margin: 30px auto;}
.nowrap {flex-wrap: nowrap;}

.itemfull {flex: 1 1 100%;text-align: center; margin-bottom: 50px;}
.item {padding:0 20px;}
.flexfull {flex:1 1 100%; text-align: center;padding-top:min(90px, 9%); padding-bottom: min(90px, 9%);}
.flexfull2 {flex:1 1 100%; text-align: center;padding-top:min(50px, 9%); padding-bottom: min(30px, 9%);}
.flexfull3 {flex:1 1 100%; text-align: center;padding-top:min(50px, 9%); padding-bottom: min(20px, 4%);}
.nopaddingtop {padding-top:0;}
.nopaddingbottom {padding-bottom:0;}
a {transition: all .3s ease;}
a:hover { transition: all .3s ease;}
.mb100 {margin-bottom: min(100px, 10%);}
.mb15 {margin-bottom: min(15px, 2%);}
.mb50 {margin-bottom: min(50px, 5%);}

.videoWrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 */
  height: 0;
  border-radius: 15px;
  overflow: hidden;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

a {color:#000;}

.action {padding: 10px 40px; margin-bottom: 10px; background:var(--color1); color:#fff;font-weight:400; border-radius: 100px; display:inline-block;text-decoration: none; transition: all .3s ease;}
.action:hover {scale:1.1;transition: all .3s ease;}
.action2 {padding: 8px 30px; margin-left: 10px; font-weight:400; color:#000000; border-radius: 100px; border:2px solid var(--color1); display:inline-block;text-decoration: none;}
.action2:hover {scale:1.1; transition: all .3s ease;}


li {margin:0 0 0 20px; list-style: auto; line-height: 140%;}

.vermarktung {padding: 15px 0; text-align: center; background: #111; color: rgba(255,255,255,.35); font-size: 13px; display: flex; justify-content: center;
& a {color:rgba(255,255,255,.5);}
& a:hover {color:rgba(255,255,255,.8);}
}



.logo img {width: 100%; height:auto;}
.logo a {text-decoration: none;}

.link {letter-spacing: .3px; text-decoration: none; font-weight: 100; position:relative; transition: all .3s ease;}
.link:hover {transition: all .3s ease;}
.link::after {content:''; left:0; bottom:0; position:absolute; background: #000000; height:1px; width:0px; transition: all .3s ease;}
.link:hover::after {width:100%; transition: all .3s ease;}

.flex200 {flex: 1 1 200px;}
.flex300 {flex: 1 1 300px; margin:0 10px 20px;}
.flex350 {flex: 1 1 350px; margin:0 15px 30px;}
.flex500 {flex:1 1 500px; padding:0 2%; font-family: sans-serif;}
.flex800 {flex: 1 1 800px;}
.fazit {font-family: SFPRODISPLAYMEDIUM;}

#footer {padding-top:min(100px, 10%);padding-bottom:min(35px, 10%); color:rgba(0,0,0,.75); letter-spacing: .4px; font-size:14px; background: #efefef;font-weight: 100; font-size: 13px;max-width: var(--seitenbreite);margin:0 auto;
  font-family: sans-serif;
& .cfs {max-width: 1524px; justify-content: space-between;}
& h4 {color:rgba(0,0,0,.9); font-size: 12px; font-weight: 400; margin-bottom: 10px;}
& .item {flex: 1 1 225px;margin:0 5px 40px; max-width: 360px; padding:0;}
& .links {padding-left: 20px;}
& .logos_footer {height: 34px;width: auto; margin: 5px 0 10px;}
& .link {font-weight:100;color:rgba(0,0,0,.75);}
& .tel {color: #3f9abf;}
& a:hover {color:rgba(0,0,0,.8);}
& .logo_footer {opacity: .7;transition: all .3s ease; max-width: 133px; margin: 0 auto;}
& .logo_footer:hover {opacity:.7; scale: 1.3; transition: all .3s ease;filter:drop-shadow(0px 17px 15px rgba(0,0,0,.4));}
& .map {width:70%;margin: 32px;}
& .flexfull {border-top: 1px solid rgba(0,0,0,.15); padding-top: 90px;}
@media (width < 1230px) {  
    .karte {display: none;} 
}
@media (width < 1000px) {
    font-size:16px;
    & h4 {font-size: 15px;}
    & .cfs {justify-content: center;}
    & .item {flex: 1 1 288px;}
    & .links {padding-left: 0;}
}
@media (width < 450px) {
  & .cfs {justify-content: center;}
  & .item {flex: 1 1 288px;}
  & .links {padding-left: 0;}
}
}

#header {
& .cfs {padding:0;}
& .logo {max-width: 100px;}
& .menu {display: flex; justify-content: center;}
& .left {justify-content: left;}
& .right {justify-content: right;}
& .header {justify-content: space-between; align-items: center; padding-top: min(30px, 6%); padding-bottom: min(30px, 6%);}
& .link {margin:0 12px; color: var(--color3);}
}



  @media screen and (width < 543px) {
    #footer, #copyright {
      & .cfs {justify-content: center; padding:0}
      & .item {flex: 1 1 100%; text-align: center;}
      & .link {margin: 0;}
      & .tel {justify-content: center;}
    }
  }


.icon {max-width: 40px; height:auto;opacity: .3;}

  #copyright {padding:10px;
    font-family: sans-serif; font-size:12px;color: rgba(0,0,0,.75);

  }


  @media screen and (width < 1040px) {
    & .flex500:nth-child(1) {order:1;}
    & .flex500:nth-child(2) {order:2;}
    & .flex500:nth-child(3) {order:4;}
    & .flex500:nth-child(4) {order:3;}
    & .flex500:nth-child(5) {order:5;}
    & .flex500:nth-child(6) {order:6;}
    & .flex500:nth-child(7) {order:8;}
    & .flex500:nth-child(8) {order:7;}
    & .flex500 h3 {font-size: 17px;}
    & .img-fluid {border-radius: 8px;}
    #polsterpack_gal, #polsterpack_gal2 {
      & .cfs {flex-wrap: wrap;}
      & .flex200 {flex:1 1 100px;}
    }
  }
  .ausbildungssymbol {max-width: 139px; height: auto; margin-top: 30px;}