h1, h2 {
    font-family: 'Calibri', serif;
}
h3{
    font-size: 1.3em;
}
input[type='text'], input[type='email'], input[type='url'], input[type='password'], input[type='search'], input[type='number'], input[type='tel'], input[type='range'], input[type='date'], input[type='month'], input[type='week'], input[type='time'], input[type='datetime'], input[type='datetime-local'], select, textarea {
    border: 1px solid #878787;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 12px;
    background-color: #fff;
    border-radius: 4px;
}
button, input, optgroup, select, textarea {
    color: inherit;
    font: inherit;
    margin: 0;
}
.text-box a {
    text-decoration: none;
    color: var(--primary);
}
.text-box a:hover {
    text-decoration: underline;
}
.manufacturerlogo{
    max-width: 512px;
    width: 50%;
    height: auto;
}

:root {
    --primary: #2c2c2c;
    --accent: #d4b483;
    --bg: #f9f9f9;
}
.dropdown .dropdown-content {
        padding-top: 1rem;   
    } 
body {
    font-family: 'Calibri', sans-serif;
    font-size: 1.2em;
    margin: 0;
    color: var(--primary);
    background-color: var(--bg);
    line-height: 1.6;
}
.row a { color: var(--primary); }
/* Navigation */
nav {
    padding: 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid #eee;
}

.logo {
   width: 300px;
   height: auto;
}

nav a {
    text-decoration: none;
    color: var(--primary);
    margin-left: 2rem;
    font-size: 1.1rem;
    text-transform: uppercase;
}

/* Hero Bereich */
header {
    height: calc(100vw/2.285);
    max-width: 100vw;
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('/images/agentur-simmel-startseite.webp?q=80&w=2000') center/cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
}
.treca {
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('/images/treca-paris-banner.webp?q=80&w=2000') center/cover no-repeat;
}    
.porada {
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../images/porada-banner.webp?q=80&w=2000') center/cover no-repeat;
}                 
.miinu {
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../images/miinu-banner.webp?q=80&w=2000') center/cover no-repeat;
}   
.zanotta {
    background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('../images/zanotta-banner.webp?q=80&w=2000') center/cover no-repeat;
}              
header h1 {
    font-family: 'Calibri', serif;
    font-size: 3.5rem;
    max-width: 60%;
}
.text-section {
    padding: 5rem 10%;

}
  .icon {
    display: inline-grid;
    align-items: center;
    justify-items: center;
    width: 30px;
    height: 30px;
    color: #FFFFFF;
    overflow: hidden;
}
.icon svg {
    display: block;
    max-width: 100%;
    max-height: 100%;
}
.icon .fill {
    fill: #FFFFFF;
}
.backlink a {
    color: #FFFFFF;
}
/* Portfolio Sektionen */
.brand-section {
    padding: 5rem 10%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.brand-section:nth-child(even) {
    direction: rtl;
}

.brand-section:nth-child(even) .text-box {
    direction: ltr;
}

.brand-image {
    width: 100%;
    height: 500px;
    background-size: cover;
    background-position: center;
    box-shadow: 20px 20px 0 var(--accent);
}
.logostart{
    width: 50vw;
    max-width: 300px;
    height: auto;
}

.text-box {
 text-align: center;  
 padding-top: 45px;
}

.btn {
    display: inline-block;
    padding: 1rem 2rem;
    border: 1px solid var(--primary);
    text-decoration: none;
    color: var(--primary);
    margin-top: 1.5rem;
    transition: all 0.3s;
}

.btn:hover {
    background: var(--primary);
    color: white;
}

/* Footer */
footer {
    background: #1a1a1a;
    color: #888;
    padding: 4rem 10% 2rem;
    text-align: center;
}

.footer-links {
    margin-bottom: 2rem;
}

footer a {
    color: #fff;
    text-decoration: none;
    margin: 0 1rem;
}

.backlink {
    margin-top: 0.5rem;
    font-size: 0.8rem;
}
/* Checkboxen komplett verstecken */
.nav-checkbox, .dropdown-checkbox {
    display: none;
}

/* --- DESKTOP STYLING --- */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
}
  nav a:hover, .footer-links a:hover {
    text-decoration: underline;
  }  

.nav-links {
    display: flex;
    gap: 30px;
}
  .dropdown-checkbox:checked ~ .dropbtn {
    font-weight: bold;
    font-size: 1.1rem;
    }

@media (max-width: 767.98px) {
  .hidden-mobile {
    display:none
  }
  .brand-section {
    grid-template-columns: auto;
  }
  header{
    height: 35vh;
  }
  header h1
  {
    font-family: 'Calibri', serif;
    font-size: 2.5rem;
    max-width: 80vw;
  }
  .brand-section {
    gap: 0
  }
  nav{
    padding: 20px 40px;
    padding-left: 20px;
  }
  .logo {
    font-size: 1.5rem;
}
  nav a {
    margin-left: 0;
  }
  .burger { display: block; cursor: pointer; z-index: 1001; }
  .burger span { display: block; width: 25px; height: 2px; background: #333; margin: 5px 0; }

  .nav-links {
    position: fixed;
    right: -100%;
    top: 0;
    height: 100vh;
    width: 85vw;
    background: white;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    transition: 0.5s;
  }
  .dropdown{
    width: 100%;
    text-align: center;
    text-transform: uppercase;
  }
  /* WENN BURGER GECHECKT: Menü einfahren */
  .nav-checkbox:checked ~ .nav-links {
    right: 0;
  }
  .dropdown-content {
    display: none;
    text-align: center;
    background: #f9f9f9;
    padding-left:0;
  }
  .dropdown-content a{
    margin-left: 0;
  }


  /* WENN MARKEN GECHECKT: Dropdown zeigen & Text fett */
  .dropdown-checkbox:checked ~ .dropdown-content {
    display: block;
    width:87vw;
    line-height: 2.7em;
  }
  .dropbtn {
    font-size: 1.1rem;
  }
.text-section {
    padding: 2rem 10%;
}

  /* Kleiner Pfeil-Indikator */
  .dropbtn::after { content: ' +'; }
  .dropdown-checkbox:checked ~ .dropbtn::after { content: ' −'; }
}
@media (min-width:768px) and (max-width:996px) {
  .hidden-tablet{
    display: none;
  }
  nav{
    padding: 20px 40px;
    padding-left: 20px;
  }
  nav a {
    margin-left: 0;
  }
  .burger { display: block; cursor: pointer; z-index: 1001; }
  .burger span { display: block; width: 25px; height: 2px; background: #333; margin: 5px 0; }

  .nav-links {
    position: fixed;
    right: -100%;
    top: 0;
    height: 100vh;
    width: 85vw;
    background: white;
    flex-direction: column;
    align-items: center;
    padding-top: 100px;
    transition: 0.5s;
  }
  .dropdown{
    width: 100%;
    text-align: center;
    text-transform: uppercase;
  }
  /* WENN BURGER GECHECKT: Menü einfahren */
  .nav-checkbox:checked ~ .nav-links {
    right: 0;
  }
  .dropdown-content {
    display: none;
    text-align: center;
    background: #f9f9f9;
    padding-left:0;
  }
  .dropdown-content a{
    margin-left: 0;
  }


  /* WENN MARKEN GECHECKT: Dropdown zeigen & Text fett */
  .dropdown-checkbox:checked ~ .dropdown-content {
    display: block;
    width:87vw;
    line-height: 2.7em;
  }
  .dropbtn {
    font-size: 1.1rem;
  }

  /* Kleiner Pfeil-Indikator */
  .dropbtn::after { content: ' +'; }
  .dropdown-checkbox:checked ~ .dropbtn::after { content: ' −'; }
}

}


@media (min-width: 768px) and (max-width:991.98px) {
    .hidden-tablet {
        display:none
    }
    .brand-section {
      grid-template-columns: auto;
    }    
    .dropdown .dropdown-content {
        display:none;
        z-index:100;
        position:absolute;
        line-height:2rem;
        background: #FFFFFF; 
        min-width: 220px;       
    } 
    .dropdown-content a {
      line-height:3rem;
    }
    .logo {
        font-size: 2rem;
    }
    nav {
            padding: 20px 40px;
            padding-left: 20px;
        }
    .dropdown:hover .dropdown-content {
        display: block;
    }
    .dropbtn{
      text-transform: uppercase;
      font-size: 1.1rem;
      margin-left: 2rem;      
    }  

}

@media (min-width: 992px) {
    .hidden-desktop {
        display:none;
    }
    .dropdown .dropdown-content {
        display:none;
        z-index:100;
        position:absolute;
        line-height:2rem;
        background: #FFFFFF; 
        min-width: 220px;    
        padding-top: 1rem;   
    } 
    .dropdown-content a {
      line-height:3rem;
    }

    .dropdown:hover .dropdown-content {
        display: block;
    }
    .dropbtn{
      text-transform: uppercase;
      font-size: 1.1rem;
      margin-left: 2rem;      
    }



}