/* fonds */
@font-face {
    font-family: 'Figtree-ExtraBold';
    src: url(/assets/fonts/Figtree-ExtraBold.ttf);
  }
  @font-face {
    font-family: 'Roboto-Medium';
    src: url(/assets/fonts/Roboto-Medium.ttf);
  }
  @font-face {
    font-family: 'Roboto-Regular';
    src: url(/assets/fonts/Roboto-Regular.ttf);
  }
  /* ------------- */

 /*  Änderungen bei Bildschirmgrößen unter 1200 Pixeln */
@media (max-width: 1199px) {

  .background-image, .kontakt, .black-background, .anfahrt{
    padding-left: 2rem;
    padding-right: 2rem;
    padding-top: 9rem;
    padding-bottom: 10vh;
}
.buro_zeiten{
  margin-top: 10vh;
}
    .navbar-custom .navbar-brand img {
      height: 60px;
      margin-left: 50px;
    }    
  
    .com-items {
      margin-right: 50px;
    }
  
    .navbar-custom {
      height: 60px;
    }
  
    .background-image {
      height: 100vh;
      justify-content: center;
      align-items: center;
    }
  
    /* .content img {
      width: 300px;
    }
    .content{
      justify-content: center;
      align-items: center;
    } */

    .yellow-line {
        /* position: absolute;   */
        left: 0;
        /* width: 35%; */
        height: 6px; 
        background-color: yellow;
        /* margin-left: 18%; */
        margin-top: 1.4vw;
    }
  
    .black-background {
      padding: 20px 0;
    }
  
    .mietobjekte, .freie_objekte, .yellow_underline {
      /* font-size: 18px; */
    }
  
    .buro_zeiten, .anfahrt {
      margin-left: 0;
      margin-top: 50px;
      font-size: medium;
    }
    
    .kontakt, .kontakt_bild, .buro_zeiten {
        flex-direction: column;
        align-items: center;
    }
    .kontakt_bild img {
      width: cover;
      max-height: 40vh;
    }
    .buro_zeiten {
      margin-top: 20px;
      margin-left: 0;
      margin-bottom: 5vw;
    }
   
  }
  
  /* Änderungen bei Bildschirmgrößen unter 850 Pixeln */
  @media (max-width: 849px) {
  
    .navbar-custom .navbar-brand img {
      height: 50px;
      margin-left: 20px;
    }
  
    .com-items {
      margin-right: 20px;
    }
  
    .navbar-custom {
      height: 50px;
    }
  
    .background-image br{
      display:none;
    }
    .background-image img{
      width:70vw;
    }
    .background-image p, .background-image h1{
      text-align: center;
    }
  
    /* .content img {
      width: 200px;
    } */
    .yellow-line {
        /* position: absolute;   */
        left: 0;
        width: 25rem;
        height: 6px; 
        background-color: yellow;
        /* margin-left: 10%; */
        margin-top: 0.9vw;
      }
  
    .black-background {
      padding: 10px 0;
    }
  
    /* .mietobjekte, .freie_objekte, .yellow_underline {
      font-size: 16px;
    } */
  
    .buro_zeiten, .anfahrt {
      margin-left: 0;      
      font-size: small;
      margin-top: 10vh;
    }
    
  
    /* .building .bi-building-check {
      height: 4%;
      width: 4%;
    }
    .building .bi-building-dash{
      height: 5.5%;
      width: 5.5%;
    } */
    .black-background img {
      max-width: 40%;
    }
     .kontakt, .kontakt_bild, .buro_zeiten {
      flex-direction: column;
      align-items: center;
    }
    .kontakt_bild img {
      width: 100%;      
    }
    /* .buro_zeiten {
      margin-top: 20px;
      margin-left: 0;
      font-size: small;
    }     */
       
    .content {
      font-size: 80%;
    }
    .anfahrt iframe{
    max-width: 450px;
    max-height: 300px;
    }
  }
  
  @media (max-width: 500px) {   
    .anfahrt iframe{
      max-width: 270px;
      max-height: 200px;
    }
    body > div.background-image > div > h1{
        font-size: small;
      }
      body > div.background-image > div > p{
          font-size: small;
      }
  }
  
  @media (max-width: 270px) {
    /* body > div.background-image > div > h1{
      font-size: small;
    }
    body > div.background-image > div > p{
        font-size: small;
    } */
    .anfahrt iframe{
      max-width: 150px;
      max-height: 100px;
    }
  }


@media (max-width: 992px) {
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
    }
    /* Logo-Optimierung: */
    .navbar-custom .navbar-brand img {
        height: 60px;  
        margin-left: 20px; 
    }
    
    /* Navbar-Optimierung: */
    .navbar-custom {
        height: auto; 
        padding: 10px 20px;  
    }
    
    /* Navigationslink-Optimierung: */
    .navbar-custom .nav-item {
        margin-left: 10px;  
    }
    
    /* Icons-Optimierung: */
    .com-items {
        margin-right: 20px; 
        gap: 10px;  
    }    
}

@media (max-width: 768px) {
    .navbar-custom .nav-item {
        margin-left: 10px;  
        font-size: 90%; 
    }

    .com-items {
        margin-right: 15px; 
        gap: 8px;  
    }
    
    .com-items .fas {
        font-size: 80%; 
    }
}


@media (max-width: 576px) {
    .navbar-custom .nav-item {
        margin-left: 5px;  
        font-size: 80%; 
    }

    .com-items {
        margin-right: 10px; 
        gap: 5px;  
    }
    
    .com-items .fas {
        font-size: 70%; 
    }
}
@media (max-width: 331px) {
    .navbar-custom .nav-item {
        margin-left: 3px;  
        font-size: 55%; 
    }

    .com-items {
        margin-right: 0px; 
        margin-left: 2px;
        gap: 0px 
    }
    
    .com-items .fas {
        font-size: 55%; 
    }
    .background-image h1, .background-image p{
      font-size: medium;
    }
    .kontakt h2, .anfahrt h3{
      font-size: 1.5rem;
    }
    .background-image{
      height: 80vh;
    }
}