/*  ==========================================
    Einstieg in HTML und CSS  
    Stylesheet für die Übungswebsite 

    navi-responsiv.css  
    - wird in style.css per @import eingebunden  
    
    Stylesheet zur Gestaltung der Site-Navigation

    Die Navigation basiert auf dem Prinzip des *Progressive Enhancement*: 
    Ohne JavaScript funktioniert alles, mit ist es besser. 

    1. Vertikale Navigation für schmale Viewports
    2. Menübutton und Navigationsliste 
    3. Horizontale Navigation in Viewports > 600px 

    ======================================= */

 @media screen and (min-width: 800px) {

 .logo-nav-desk  {
     display: flex;
      }
 .logo-nav-mob  {
     display: none;
      }
 }

 @media screen and (max-width: 799px) {

 .logo-nav-desk  {
     display: none;
      }
 .logo-nav-mob  {
     display: flex;
      }
 }



    .mobile-nav-site {
     margin: 1rem;
         }

     .logo-nav-desk {
        position: sticky;
        top: 0;
        background-color: var(--basisfarbe);
        /* display: flex; */
        justify-content: space-between;
        }

     .logo-nav-mob {
        position: sticky;
        top: 0;
        background-color: var(--basisfarbe);
       /* display: flex;  */
        align-items: flex-start;
        justify-content: space-between;
        }

     .menuburger {
         width: 1rem;
         margin-top: 0.3rem;
         margin-right: 1.5rem;
     }



     .logo-top-desk {
        background-color: var(--basisfarbe);
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        margin-top: 0.4rem;
        margin-left: 1rem;
        margin-right: 1rem;

                }

     .logo-top-mob {
        background-color: var(--basisfarbe);
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        margin-top: 0.6rem;
        margin-left: 1rem;
        margin-right: 1rem;

                }
    .mobile-nav-site ul {
        position: static;
        display: flex;
        flex-flow: row;
        list-style: none;
        padding: 0;
        margin-left: 0.5rem;
        margin-right: 0.5rem;
        }


    .mobile-nav-site  .lang-link li:last-child {
        margin-left: auto;
}


    .mobile-nav-site h1 {
        font-size: 1.5rem;
        color: #00000095;
            }

    .mobile-nav-site a {
        font-size: 1.2rem;
        display: block;
        text-decoration: none;
        background: var(--basisfarbe);
        color: var(--linkfarbe-dunkel);
        padding: 0.5rem 0.5rem;
    }

    .site-nav {

    }

    .site-nav ul {
        position: static;
        display: flex;
        flex-flow: row;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .site-nav a {
        display: block;
        text-decoration: none;
        background: var(--basisfarbe);
        color: var(--kontrastfarbe);
        padding: 0.5rem 1rem;
    }

     .site-nav li {
            flex: 1;
            max-width: 7rem;
            text-align: center;

        }

   .h1header {
      font-size: 1.1rem;
      color: #00000095;
      letter-spacing: 2px;
  }

   .ah1header {
      font-size: 1.1rem;
      color: #00000095;
      letter-spacing: 2px;
      text-decoration: none;
  }

  .ah1headerred {
      font-size: 1.1rem;
      color: #96000099;
      letter-spacing: 2px;
      text-decoration: none;
  }

  .h1headerred {
      color: #96000099   ;
      }


  @media (min-width: 600px) and (max-width: 899px) {
  /* Stile für Viewports zwischen 600px und 899px */
     /* H1 im Header */
  .h1header {
      font-size: 1.2rem;
      color: #00000095;
      letter-spacing: 6px;
  }


   .ah1header {
      font-size: 1.2rem;
      color: #00000095;
      letter-spacing: 6px;
      text-decoration: none;
  }

  .ah1headerred {
      font-size: 1.2rem;
      color: #96000099;
      letter-spacing: 6px;
      text-decoration: none;
  }
}

  /* 900, damit im IPad (768px) der Logo-Schriftzug nicht umbricht */
   @media screen and (min-width: 900px) {

      /* H1 im Header */
  .h1header {
      font-size: 1.7rem;
      color: #00000095;
      letter-spacing: 6px;
  }


   .ah1header {
      font-size: 1.7rem;
      color: #00000095;
      letter-spacing: 6px;
      text-decoration: none;
  }

  .ah1headerred {
      font-size: 1.7rem;
      color: #96000099;
      letter-spacing: 6px;
      text-decoration: none;
  }

  }


    /* Ende navi-responsiv.css */