@font-face {
  	font-family: 'Quicksand';
  	src: url('/fonts/Quicksand-Light.woff2') format('woff2'),
       url('/fonts/Quicksand-Light.woff') format('woff');
  	font-weight: 300;
  	font-style: normal;
  	font-display: swap; 
}

@font-face {
  	font-family: 'Quicksand';
  	src: url('/fonts/Quicksand-Regular.woff2') format('woff2'),
       url('/fonts/Quicksand-Regular.woff') format('woff');
  	font-weight: 400;
  	font-style: normal;
  	font-display: swap;
}

@font-face {
  	font-family: 'Quicksand';
  	src: url('/fonts/Quicksand-Medium.woff2') format('woff2'),
       url('/fonts/Quicksand-Medium.woff') format('woff');
  	font-weight: 500;
  	font-style: normal;
  	font-display: swap;
}

@font-face {
  	font-family: 'Quicksand';
  	src: url('/fonts/Quicksand-SemiBold.woff2') format('woff2'),
       url('/fonts/Quicksand-SemiBold.woff') format('woff');
  	font-weight: 600;
  	font-style: normal;
  	font-display: swap;
}

@font-face {
  	font-family: 'Quicksand', sans-serif;
  	src: url('/fonts/Quicksand-Bold.woff2') format('woff2'),
       url('/fonts/Quicksand-Bold.woff') format('woff');
  	font-weight: 700;
  	font-style: normal;
  	font-display: swap;
}

body {
  	font-family: 'Quicksand', sans-serif;
	margin: 0;
	padding: 0;

}

p{
	font-weight: 400;
}

h1{
    font-weight: 800;
}

a{font-weight: 800;}

.hero {
  height: 100vh;
  background: url('../pic/hero.jpg');
  background-position: center;
  background-size: cover;
  position: relative;
}

.overlay {
  position: absolute;
  inset: 0;
}

/* Z-Index-Hierarchie: Button (20) > Nav (10) > Text (1) */
.menu-btn { z-index: 20; }
.nav      { z-index: 10; }
.hero-text{ z-index: 1;  }

/* Hero-Text leicht über Mitte */
.hero-text h1{
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  color: #827370;
  text-align: center;
}

/* Hamburger: Desktop verstecken */
.menu-btn {
  position: absolute;
  top: 12px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: none;
}

/* Hamburger-Linien */
.menu-btn .line {
  display: block;
  width: 26px;
  height: 2px;
  background: #867774;
  margin: 6px auto;
  transition: transform 150ms ease, opacity 150ms ease;
}

@media (min-width: 375px){
    .menu-btn { display: block; }
    
    .nav {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        display: none;                 /* zu */
        flex-direction: column;
        background: rgba(0,0,0,.9);
        padding: 64px 20px 16px;       /* Platz für Button */
        gap: 0;
  }
  
    .nav a {
        color: #fff;
        padding: 14px 6px;
        border-top: 1px solid rgba(255,255,255,.15);
        text-decoration: none;
  }
        .nav.open { display: flex; }     /* auf */

         /* Burger -> X */
        .menu-btn.active .line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .menu-btn.active .line:nth-child(2) { opacity: 0; }
        .menu-btn.active .line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


    .hero-text h1{
         position: absolute;
         left: 50%;
         top: 35%;
         transform: translate(-50%, -50%);
         text-align: center;
         font-size: 1.5rem;
    }
    
    .col-col{
        display: flex;
        flex-direction: column;
        padding: 48px;
        justify-content: center;
        align-items: center;
    }
    
    .section-img img{
        width: 100%;
        max-width: 300px;
    }
}


@media (min-width: 900px) {
    .menu-btn { display: block; }

    .nav {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        display: none;                 /* zu */
        flex-direction: column;
        background: rgba(0,0,0,.9);
        padding: 64px 20px 16px;       /* Platz für Button */
        gap: 0;
  }
    .nav a {
        color: #fff;
        padding: 14px 6px;
        border-top: 1px solid rgba(255,255,255,.15);
        text-decoration: none;
  }
        .nav.open { display: flex; }     /* auf */

    /* Burger -> X */
        .menu-btn.active .line:nth-child(1) { transform: translateY(8px) rotate(45deg); }
        .menu-btn.active .line:nth-child(2) { opacity: 0; }
        .menu-btn.active .line:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  
    .hero-text h1{
         position: absolute;
         left: 50%;
         top: 35%;
         transform: translate(-50%, -50%);
         text-align: center;
         font-size: 2.5em;
}
}

@media (min-width: 1440px){
    .menu-btn { display: none; }
    
    /* Desktop-Navi (sichtbar) */
    .nav {
         position: absolute;
         top: 0;
         right:0;
         padding: 0;
         display: flex;
         gap: 24px;
         flex-direction: row;
         background-color: unset;
         justify-content: flex-end;
         margin-right: 16px;
         color: white;
    }
    
    .nav a{
        color: #867774;
    }
   
   .hero-text h1{
         position: absolute;
         left: 50%;
         top: 35%;
         transform: translate(-50%, -50%);
         text-align: center;
         font-size: 3em;
   }
         
    .col-col{
        display: flex;
        flex-direction: row;
        padding: 96px;
    }
    
    .section-img {
        flex: 1;
        display: flex;
        justify-content: center;
        
    }
    
    .section-img img{
        width 100%; 
        max-width: 600px;   /* niemals breiter als die Box */
        height: auto;            /* Verhältnis beibehalten */
        display: block; 
        object-fit: contain; 
    }
    
    .section-text{
        flex: 1;
        display: flex;
        align-items: center;
    }

}
}