@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Parisienne&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');


/*Farbpalette: #3D5A80 (mittelblau), #98C1D9 (hellblau), #E0FBFC (weiß/blau), #EE6C4D (orange), #293241 (bläuliches dunkelgrau) */
/* #000000 (Schwarz), #FFFFFF (weiß), #C00000 (rot), #014421 (tannengrün) oder #191970 (mitternachtsblau) */

@media screen and (max-width:590px) {
  h1 {
    font-size: 3rem
  }
  .inhalt {
    width: 95%;
    padding: 1rem
  }
  .symbol {
    width: 100px;
    height: 100px;
  }
}

body {
  margin: 0;
  font-family: 'Inter', sans-serif;
  background-color: #014421 ;
  color: #000000; /*Schriftfarbe*/
}

.inhalt {
  background-color: #fbfbf9; 
  max-width: 85%;         /* Breite des Inhaltsbereichs */
  margin: 1rem auto;         /* Abstand oben/unten + zentriert */
  padding: 2rem;
  border-radius: 8px;        /* Optional: abgerundete Ecken */
}

  .swiper {
    width: 100%;
    max-width: 800px;
    height: 300px;
    margin: 0 auto;
    padding: 0;
    z-index: 1000;
  }

  .swiper-wrapper {
    display: flex;
  }

  .swiper-slide { 
      display: flex;
      justify-content: center;
      align-items: center;
      margin: 0;
      padding: 0;
      z-index: 1000;
  }

  .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1000;
  }

  .swiper-button-next, 
  .swiper-button-prev {
    color:#C00000 ;
  }
 
  .menu {
    z-index: 5000;
    position: fixed; 
    top: 45px;
    right: 20px;
    width: 250px; 
    border-radius: 12px;
    background: #7D7D7D;
    display: none; 
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    }

  .menu.show {
      display: flex; 
    }
  
  .menu-btn {
      z-index: 5000;
      position:fixed;
      top: 15px;
      right: 15px;
      border: none; 
      font-size: 25px; 
      border-radius: 7px;
      background:#7D7D7D;
      cursor: pointer;
    }
  
    .menu-btn.active {
      color:#C00000
  }
  
  .menu-btn:hover {
      transform: scale(1.1);
      color: #C00000
  }
  
  .menu:hover {
      transform: scale(1.001);
  }
  
  .menu a{
      padding: 10px 20px;
      color: black;
      font-weight: 400;
      text-decoration: none;
      border-radius: 12px;
      text-align: center;
      width: 100%;
      box-sizing: border-box;
      z-index: 2000;
  }
  
  .menu a:hover{
      background:  #C00000;
  }
  

  .filmstreifen {
    width: 100%;
    max-width: 800px;
    height: auto;
    display: block;
    margin: 0 auto;
  }


  header {
    text-align: center;
    padding: 3rem 0 2rem;
  }
  
  h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 4.5rem;
    margin: 0;
    letter-spacing: 2px;
    text-align: center;
    letter-spacing: 4px;
    color: #014421;
  }
  
  h2 {
    font-family: 'Parisienne';
    font-size: 2rem;
    margin: 0.5rem 0;
    text-align: center;
  }
  
  .haupttext {
    padding: 20px;
    max-width: 600px;
    margin: auto;
    max-width: 800px;
    text-align: center !important;
    }

  .subtitle {
    max-width: 590px;
    margin: 1rem auto;
    font-size: 1rem;
    color: #444;
    font-family: 'Parisienne';
    text-align: center;
    line-height: 1.6;
  }
  
  .btn {
    background: #000;
    color: #fff;
    padding: 0.5rem 1.2rem;
    border-radius: 2rem;
    font-weight: bold;
    text-decoration: none;
  }

  .grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .grid img {
    width: 300px;
    border-radius: 8px;
    object-fit: cover;
  }
  
  .tagline {
    margin-top: 1rem;
    font-size: 0.9rem;
    color: #666;
  }
  
  .popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /*halbtransparent -> Hintergrundbild noch einfügen*/
    z-index: 9999;
  }

  .popup-inhalt { 
    background: #fff; 
    margin: 15% auto; 
    padding: 20px;
    border-radius: 6px;
    min-height: 200px;
    width: 500px;
    max-width: 90%;
    text-align: center;
    font-family: "Courier New", monospace;
    color: #014421;
    z-index: 10000;
  }

  .close {
    float: right;
    font-size: 24px;
    cursor: pointer;
    color: #C00000;
  }

  .symbol-container {
  display: flex;               
  justify-content: center;     
  align-items: center;        
  gap: 2rem;                   
  flex-wrap: wrap;             
  margin: 2rem 0;
  }

  .symbol {
    width: 150px;
    height: 150px;
    object-fit: contain;
    cursor: pointer;
    transition: transform 0.5s;
  }

  .symbol:hover {
    transform: scale(1.1);
  }

  footer a {
    text-align: center;
    padding: 2rem 0;
    color: #7D7D7D;
    font-size: 0.8rem;
    text-decoration: none;
  }
  
  footer {
    text-align: center;
    padding: 2rem 0;
    color: #7D7D7D;
    font-size: 0.8rem;
  }