* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
    --lightblue:#6EB1E5;
    --midblue:#324A68;
    --darkblue: #273A52;
  }
  
  .blue-theme {
    font-family: Arial,Helvetica,sans-serif;
    color: white;
    background: var(--darkblue);
  }
  
  h2 {
    margin-bottom: 1em;
  }

   a { 
    color: var(--lightblue)
   }
   
   main {
    max-width: 900px;
    margin: 30px auto 0px auto; /* zentriert den Block */
    padding: 0 16px;
   }

  .mid-page-text-block {
    text-align: center;
    line-height: 24px
   }
   
   

  .footer {
    background: var(--midblue);
    width: 100%;
    align-content: right;
   }


   /* Menue */
.main-nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--nav-bg);
  color:var(--nav-color);
  padding:10px 20px;
  background: var(--midblue);
}

.nav-left{display:flex;align-items:center;gap:10px;}
.nav-right{width: 200; vertical-align: top; padding-top:20px}
.nav-right{align-items:right;gap:30px;}
.logo img{width:60px;height:60px;object-fit:cover;border-radius:4px;}
.site-title{font-size:1.6rem;font-weight:700;padding:0px 0px 10px 30px;}

.nav-menu{list-style:none;display:flex;gap:20px;margin:0;padding:0px 0px 10px 30px;}
.nav-menu li{margin:0;padding:0;}
.nav-menu a{color:var(--nav-color);text-decoration:none;font-size:1rem;}
.nav-menu a:hover{color:var(--lightblue);}
.nav-menu a.active{font-weight:700;text-decoration:none;border-bottom: 2px solid var(--lightblue);display: inline-block;}

/* Mobile Menue*/
@media (max-width: 1050px){
  .main-nav{
    flex-wrap: wrap;          /* erlaubt, dass Menu unter Logo/Title rutscht */
    padding-bottom: 6px;      /* etwas Luft nach unten */
  }
  .nav-menu{
    display: flex;            /* sicherstellen, dass es wirklich Flex ist */
    flex-direction: column;   /* jetzt untereinander */
    width: 100%;              /* volle Breite */
    gap: 0;                   /* Lücken über padding an <li> steuern */
    margin: 0px 0 0 0;
   padding:0px 0px 10px 30px;            /* keine linke Einrückung */
  }
  
  .nav-right{
      width: 20px;
      vertical-align: top;
      padding-top:200px;
  }
  
  .nav-menu a{
    display: block;           /* klickbare Zeile */
    padding: 6px 2px;
  }
}