/*Generelle Browser Einstellungen*/
* {
  box-sizing: border-box;
}

html, body {
  margin: 0; /*Aussenabstände zurücksetzen */
  padding: 0; /*Innenabstände zurücksetzen */
  scroll-behavior: smooth;
  
}

a {
  text-decoration: none; /*Link-Styling zurücksetzen */
  color: #000000; /*Linkfarbe festlegen */
}

img, video {
  display: block; /*Link-Styling zurücksetzen*/
  max-width: 100%;
}

header, footer {
  background-color: white;
  
}

input, textarea, button {
  -webkit-appearance: none;
  -moz-appearance: none;
  border: none;
  box-shadow: none;
  font-size: inherit;
  position: revert;
  width: 37%;
  margin-left: -1%;
  margin-bottom: 3rem;
  height: 4rem;
  align-self: center;
  top: 841px;
  margin-top: 1rem;
  background: #4AC9A3;
  border-radius: 50px;
  color: white;
}

/*Typografie*/
html {
  font-size: min(max(16px, 1vw), 22px); /*Generelle Einstellung / Schriftgrösse mind 16px und max 22px Dazwischen 1% */
  font-family: Roboto,-apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, Helvetica, sans-serif;
  font-weight: normal; /*Schriftdicke auf normal zurücksetzen*/
  line-height: 1.5;/* Schriftfarbe generell */
  color: #000000; /* Schriftfarbe generell auf diesem Farbwert*/
}




h1, h3 {
  line-height: 1; /* Grösser Titel benötigen meistens eine geringere Zeilenhöhe als die Zuvor geschriebene Einstellung 1.5 */
  margin: 0; /* Aussenabstände Zurücksetzen */
  color: #2b202a; /*Titelfarbe*/
  
}

h1 {
  font-size: min(max(2.5rem, 4vw),5rem); /*Responsive Schriftgrösse für H1-Titel*/
  font-weight: 500;
  
}


h2 {
  font-size: min(max(1.5rem, 3vw), 3rem);
  font-weight: normal; /*Schriftdicke zurücksetzen */
  margin-top: 0.25em; /* Aussenabstand oben festlegen */
  margin-bottom: 0.25em; /*Aussenabstand unten festlegen*/
  
  
  
}

h3 {
  font-size: min(max(1.25rem, 3vw), 2,5rem); /*Responsive Schriftgrösse für H3-Titel*/
  
}
h4 {
  font-size: min(max(1.25 rem, 3vw), 2,5rem); /*Responsive Schriftgrösse für H4-Titel */
  
  
}

h5 {
  font-size: min(max(1 rem, 3vw), 1.15rem); /*Responsive Schriftgrösse für H5-Titel*/
  margin: 0; /*Aussenabstände Zurücksetzen */
}

p, a, span, blockquote {
  letter-spacing: 0.025rem; /* Zeichenabstand erhöhen */
  
  
}

/* <header> Bereich mit Navigation */

.header {
  text-transform: uppercase; /* Alles im Header gross */
  overflow-x: auto; /*Navigation soll auf kleinen Bildschirmen Horizontal sein */
  -webkit-overflow-scrolling: touch; /* Verhindert ruckliges scrolling auf Handy */
}






/*NAVIGATION*/
/* The Overlay (background) */
.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */  
  font-family: 'Jost'; 
  height: 100%;
  width: 0;
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  background-color: rgb(0,0,0); /* Black fallback color */
  background-color: #ffff; /* Black w/opacity */
  overflow-x: hidden; /* Disable horizontal scroll */
  transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}

/* Position the content inside the overlay */
.overlay-content {
  position: relative;
  top: 25%; /* 25% from the top */
  width: 100%; /* 100% width */
  text-align: center; /* Centered text/links */
  margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
}

/* The navigation links inside the overlay */
.overlay a {
  padding: 8px;
  text-decoration: none;
  font-size: 36px;
  color: #262029;
  display: block; /* Display block instead of inline */
  transition: 0.3s; /* Transition effects on hover (color) */
}



/* When you mouse over the navigation links, change their color */
.overlay a:hover, .overlay a:focus {
  color: #af96bf;
}

/* Position the close button (top right corner) */
.overlay .closebtn {
  position: absolute;
  top: 20px;
  right: 45px;
  font-size: 60px;
}





.burger {
  width: 4rem;
  margin-left: 2rem;
  margin-top: 2rem;
  margin-bottom: -2rem;
  color: grey;
}



/* When the height of the screen is less than 450 pixels, change the font-size of the links and position the close button again, so they don't overlap */
@media screen and (max-height: 450px) {
  .overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}


/*NAVIGATION END*/





/* Main Bereich */

main {
  margin-top: 110px;
}
section {
  padding: 3vh 8vw 0 7vw;
  margin-bottom: 1rem;
  font-family: 'Jost';
}

.section_title {
  text-align: center; /*Alle Section titel mittig Zentriert */
  padding: calc(3vh + 3vw); /* Mit calc() kann man zwei Werte zusammenrechnen. Hier 3%. */
  width: 100%;
  height: 20%;
}

#calltoaction {
  margin-left: 34%;
  margin-bottom: -32px
}

.galerie { 
  margin-top: 10rem;
  
}

.section_subtitle
{ margin-top: 0.25rem; /*Aussenabstand oben festlegen */
  text-transform: uppercase; /*Alle Section Untertitel grossgeschrieben */
  color:#2b202a ;
}

/*About bereich*/
#about {
  padding: 0;
  display: flex;
  margin-top: 5rem;
  margin-bottom: 10rem;
}

#aboutsunds {
  padding: 0;
  display: flex;
  margin-top: 0rem;
  margin-bottom: 10rem;
}


#aboutsundsrating {
  padding: 0;
  display: flex;
  margin-top: 7rem;
  margin-bottom: 10rem;
  background-color: lavenderblush;
}


#aboutsundsweiter {
  padding: 0;
  display: flex;
  margin-top: -2rem;
  margin-bottom: 3rem;
}



#aboutsundsweiter_1 {
  padding: 0;
  display: flex;
  margin-top: 1rem;
  margin-bottom: 10rem;
  
}


#abouttitleimage {
  padding: 0;
  display: flex;
  margin-top: -6rem;
  margin-bottom: 0rem;

}

#sale {
  float: left;
}


.about_image_title {
  margin: 0 auto;
  width: 40%;
  max-width: 70%;
}



.about_content {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 7vw;
  margin-top: 0rem;
  margin-bottom: -9rem;
}


.aboutmore {
  margin-top: -22px;
  font-size: 3vh;
  color: #AF96BF;
}



.about_text {
  font-family: 'Jost', sans-serif;
  font-size: 20px;
  font-weight: 300;
  margin-top: -2rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 62%;
  width: 75%;
  color: #47434e;
}

.about_text1 {
  font-family: 'Jost', sans-serif;
  font-size: 5vh;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 80%;
  width: 75%;
}


.aboutmore1 {
  font-family: 'Jost', sans-serif;
  font-size: 3vh;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 80%;
  padding-bottom: 3rem;
  width: 75%;
  color:#bae2d8;
}


.aboutmore1:hover {
  font-family: 'Jost', sans-serif;
  font-size: 3vh;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 80%;
  padding-bottom: 3rem;
  width: 75%;
  color:#4AC9A3;
}

#table {
  font-size: 20px;
}

.about_text_title{
  font-size:5vh;
  font-weight: 500;
}

.aboutmore2 {
  font-family: 'Jost', sans-serif;
  font-size: 3vh;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 80%;
  padding-bottom: 3rem;
  width: 75%;
  color:#585858;
}

.aboutmore2:hover {
  font-family: 'Jost', sans-serif;
  font-size: 3vh;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 80%;
  padding-bottom: 3rem;
  width: 75%;
  color:#415968;
}

.about_image {
  margin-right: 50%;
  margin-left: 25%;
  width: 50%;
  margin-top: 2rem;
  margin-bottom: -1rem;
}

.aboutimage1 {
  height: 50%;
  width: 50%;
  position: static;
}

.about_image_karin {
  margin-right: 50%;
  margin-left: 25%;
  width: 50%;
  margin-top: 2rem;
  margin-bottom: -1rem;
}

.about_rating {
  font-size: 3vh;
  font-family: 'Jost', sans-serif;
  font-weight: 400;

}

#aboutblock {
  background-color: #ffffff;
  margin-top: -1rem;
}

#rating {
  background-color: #415968;
  margin-top: 13rem;
}

.about_text_rating {
  color: white;
}

.about_text_rating2{
  color: rgb(0, 0, 0);
}


.about_social {
  display: flex; /* Alle untergeordnete nebeneinander */
  margin-top: 2rem;
}
.about_social a {
  margin-right: 2rem; /* Aussenabstand oben 2fach zur globalen Schriftgrösse */
}

.about_social img {
  width: 25px; 
  height: 25px;
}

.map-responsive{
  overflow:hidden;
  padding-bottom:56.25%;
  position:relative;
  height:0;
}
.map-responsive iframe{
  left:0;
  top:0;
  height:50%;
  width:100%;
  margin-top: 10%;
  position:absolute;
}


.button {
  position: revert;
  width: 50%;
  height: 4rem;
  align-self: center;
  top: 841px;
  margin-top: 3rem;
  margin-bottom: 3rem;
  margin-left: 20%;
  background: #5CD6B3;
  border-radius: 100px;
  /* margin-bottom: 3rem; */
  color: white;
}

/* Expertise Section */

.expertise_group {
  /*Untergeordnete Elemente nebeneinander*/
  /*Elemente dürfen auf neue Zeile */
  /* Automatische Verteilung der Element Abstände. */
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  margin: auto;
}

.expertise_group_detail {
  /*Untergeordnete Elemente nebeneinander*/
  /*Elemente dürfen auf neue Zeile */
  /* Automatische Verteilung der Element Abstände. */
  display: flex;
  flex-wrap: wrap-reverse;
  justify-content: center;
  margin: auto;
  
}
.expertise_item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: -1% 0;
  
  
}
.expertise_icon {
  display: flex;
  justify-content: center; /*Ausrichtung des SVG innerhalb des Kreises (Horizontal, Mittig */
  align-items: center; /*Ausrichtung Vertikal Mittig im Kreis */
  border-radius: 50%;
  flex-shrink: 0;
  width: 10rem;
  height: 10rem;
  background: #E26C76;
  margin-right: 1rem;
  
}

.expertise_icon.blue {
  background-color:#0B4E94; /*Haar*/
  margin: 3rem;
  align-self: center;
  
}

.expertise_icon.yellow {
  background-color:#0B4E94; /*Fuss und Haar */
  size: 100rem;
  margin: 3rem;
}

.expertise_icon.red {
  background-color:#0B4E94; /*Fuss*/
  margin: 3rem;
}


footer {
  padding: 2em 0;
  text-align: center;
}


.imageflow {
  object-fit: cover;
  object-position: 100% 0;
  
  width: 200px;
  height: 200px;
}
/*Work Section */


.work_group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-top: 35%;
  
}

.work_item {
  position: relative; /*Absolute Child Ausrichtung nach diesem Koordinatensystem */
  flex-basis: 32.5%; /* 1/3 der Breite - 0.8% margin */
  overflow: hidden; /* Alles maskieren ausserhalb Dimension */
  border-radius: 0vw; /*abgerundete Ecken*/
  margin: 1% 0;
  height: 0;
  padding-bottom: 32.5%; /* Höhe auf 32.5% von der Breite setzen. Dadurch erreichen wir Quadrat da Flex-Basis selben wert hat. */
  background: linear-gradient(to bottom right, rgba(231, 142, 146, 1) 0%, rgba(182, 38, 79, 1) 40%, rgba(2, 67, 108, 1) 100%); /* RGBA = Farbspektrum definition */
  
}

.work_item:nth-child(3n+1) { /* Jedes zweite Element soll 2/3 der Breite einnehme */
  flex-basis: 65.5%;
}

.work_item img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

.work_item.is-darken:before {
  content: '';
  position: absolute;
  background: linear-gradient(to top,rgba(0, 0, 0, 0,5), rgba(0, 0, 0, 0));
  height: 100%;
  width: 100%;
  z-index: 1;
}
.work_text {
  position: absolute;
  bottom: 0;
  margin: 2vw;
  z-index: 2;
}

.work_label {
  text-transform: uppercase;
  color: white;
}

.work_item h4 {
  letter-spacing: 0.025em;
  color: white;
}


/*Contact Formular */
#contact {
  padding: 7vh 0 0;
}

.block_with_background {
  padding-bottom: calc(3vh + 3vw); /*Innenabstand Zusammenrechnen */
  background: rgba(2,54,94,0.1); /*Grauen Hintergrund zur Abhebung*/
  margin-top: 40%;
}

.block_with_background2 {
  padding-bottom: calc(3vh + 3vw); /*Innenabstand Zusammenrechnen */
  background: rgba(2,54,94,0.1); /*Grauen Hintergrund zur Abhebung*/
  margin-top: 116%;
  
}
.form {
  display: flex;
  flex-direction: column;
  max-width: 50rem;
  margin: 0 auto;
  padding: 0 7vw;
  
}
.form label {
  font-size: 0.85rem;
  
}

.form_input {
  padding: 1rem;
  margin: 0.5rem 0 1rem 0;
  border-radius: 0.5rem;
  resize:none; /*Vergrösserung, Verkleinerung Verbieten */
  
}

.form_input::placeholder {
  columns: #899ac7;
  
}

.form_submit {
  align-self: center;
  padding: 1.25rem 3.5rem;
  margin: 1rem 0;
  border-radius: 10rem;
  text-transform: uppercase;
  background: #02365E;
  color:white;
  letter-spacing: 0.025rem;
  cursor: pointer;
}

footer {
  padding: 2em 0;
  text-align: center;
}

/*Details*/
hr {
  width: 50%;
  margin-top: 20%;
  margin-bottom: -22px;

}





/*Flashcard*/

.work{
  padding-left: 10rem;
  align-content: center;
}

.card {
  position: relative;
  margin-bottom: 10%;
  margin-right: 2.5%;
  margin-left: 2.5%;
  display: -ms-flexbox;
  display: inline-flex;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
}


.card-body-a {
  flex: 1 1 auto;
  padding: 1.25rem;
  max-height: 28rem;
  height: 30rem;
  font-family: 'Jost';
  text-align: left;
}

.card-body-s {
  flex: 1 1 auto;
  padding: 1.25rem;
  max-height: 18rem;
  height: 15rem;
  text-align: left;
  font-family: 'Jost';
}

.card-img-top {
  width: 100%;
  height: 100%;
  fill: rgb(134, 142, 150);
}

.card-text {
  margin-bottom: 0;
  padding: 0.25rem;
  margin-top: -18px;
}

.card_group {
  text-align: center;
}

.mainsections {
  align-self: center;
}

.maincard {
  box-shadow: 0 4px 8px 0 #f5f5f5;
    transition: 0.3s;
    height: 20%;
    float: right;
    width: 24%;
    margin-right: 5%;
    margin-left: 2.75%;
    /* margin: 0 auto; */
    margin-bottom: 7%;
    padding: 20px;
    padding-bottom: 5%;
    box-sizing: border-box;
    border-radius: 20%;
}

.maincard:hover {
  box-shadow: 0 11px 8px 0 rgba(0,0,0,0.2);
}
/*Button*/


.galerie_group {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: -1% 0;
  
}

.galerie_item {
  position: relative; /*Absolute Child Ausrichtung nach diesem Koordinatensystem */
  flex-basis: 32.5%; /* 1/3 der Breite - 0.8% margin */
  overflow: hidden; /* Alles maskieren ausserhalb Dimension */
  border-radius: 0.5vw; /*abgerundete Ecken*/
  margin: 1% 0;
  height: 0;
  padding-bottom: 32.5%; /* Höhe auf 32.5% von der Breite setzen. Dadurch erreichen wir Quadrat da Flex-Basis selben wert hat. */
  background: linear-gradient(to bottom right, rgba(231, 142, 146, 1) 0%, rgba(182, 38, 79, 1) 40%, rgba(2, 67, 108, 1) 100%); 
}




/*Produkte*/
#products {
  align-content: center;
  align-self: center;
  margin-top: 4rem;
  font-family: 'Jost';
}
#producttextbig {
  font-size: 10rem;
  opacity: 62%;
  color: black;
  margin-bottom: 2rem;
  width: 5rem;}
  
  #producttextsmall {
    width: 80%;
    font-size: 140%;
    margin-bottom: 1rem;
  }
  
  
  
  /* Footer */
  
  .site-footer {
    font-family: 'Jost';
    background-color: rgb(245 241 250 / 0.5);
    padding: 45px 0 20px;
    margin-top: 4rem;
    font-size: 10px;
    line-height: 24px;
    color: #737373;
  }
  .site-footer hr
  {
    border-top-color:#bbb;
    opacity:0.5
  }
  .site-footer hr.small
  {
    margin:20px 0
  }
  .site-footer h6
  {
    color:#02365e;
    font-size:16px;
    text-transform:uppercase;
    margin-top:5px;
    margin-bottom: 1px;
    letter-spacing:2px
  }
  .site-footer a
  {
    color:#737373;
  }
  .site-footer a:hover
  {
    color:#3366cc;
    text-decoration:none;
  }
  .footer-links
  {
    padding-left:0;
    list-style:none
  }
  .footer-links li
  {
    display:block
  }
  .footer-links a
  {
    color:#000000
  }
  .footer-links a:active,.footer-links a:focus,.footer-links a:hover
  {
    color:#3366cc;
    text-decoration:none;
  }
  .footer-links.inline li
  {
    display:inline-block
  }
  .site-footer .social-icons
  {
    text-align:right
  }
  .site-footer .social-icons a
  {
    width:40px;
    height:40px;
    line-height:40px;
    margin-left:6px;
    margin-right:0;
    border-radius:100%;
    background-color:#33353d
  }
  .copyright-text
  {
    margin:0
  }
  @media (max-width:991px)
  {
    .site-footer [class^=col-]
    {
      margin-bottom:30px
    }
  }
  @media (max-width:767px)
  {
    .site-footer
    {
      padding-bottom:0
    }
    .site-footer .copyright-text,.site-footer .social-icons
    {
      text-align:center
    }
  }
  .social-icons
  {
    padding-left:0;
    margin-bottom:0;
    list-style:none
  }
  .social-icons li
  {
    display:inline-block;
    margin-bottom:4px
  }
  .social-icons li.title
  {
    margin-right:15px;
    text-transform:uppercase;
    color:#96a2b2;
    font-weight:700;
    font-size:13px
  }
  .social-icons a{
    background-color:#eceeef;
    color:#818a91;
    font-size:16px;
    display:inline-block;
    line-height:44px;
    width:44px;
    height:44px;
    text-align:center;
    margin-right:8px;
    border-radius:100%;
    -webkit-transition:all .2s linear;
    -o-transition:all .2s linear;
    transition:all .2s linear
  }
  .social-icons a:active,.social-icons a:focus,.social-icons a:hover
  {
    color:#fff;
    background-color:#29aafe
  }
  .social-icons.size-sm a
  {
    line-height:34px;
    height:34px;
    width:34px;
    font-size:14px
  }
  .social-icons a.facebook:hover
  {
    background-color:#3b5998
  }
  .social-icons a.twitter:hover
  {
    background-color:#00aced
  }
  .social-icons a.linkedin:hover
  {
    background-color:#007bb6
  }
  .social-icons a.dribbble:hover
  {
    background-color:#ea4c89
  }
  @media (max-width:767px)
  {
    .social-icons li.title
    {
      display:block;
      margin-right:0;
      font-weight:600
    }
  }
  
  
  /* Responsive */
  
  /*Informationen Site*/

#aboutsundsweiter3 {
  padding: 0;
  display: flex;
  margin-top: -5rem;
  margin-bottom: 3rem;

}
  
.phonecall {
  font-size: 2rem;
  margin-bottom: -5rem;
}