/* Schritt 1: Header */

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Schritt 2: fonts, nav styling */

:root {
    --blue: rgba(13, 40, 128, 1);
    --blue_low_opacity: rgba(13, 40, 128, 0.2);
    --menu_height: 32px;
}

* {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 500;
    text-decoration: none;
}


/* Nav */

.menu {
    list-style: none;
    display: flex;
    justify-content: space-around;
    padding: 0px;
    margin: 0px;
    flex-wrap: wrap;
    gap:30px;
}

nav ul li a {
    box-sizing: border-box;
    padding: 0px;
    color: var(--blue);
    font-size: 27px;
}

nav ul li a:hover,
.active_menu_link {
    color: var(--blue);
    border-bottom: 3px solid var(--blue);
}


/* Schritt 3: Main Content in index.html */
/* Article */

.grosse_nachricht_vertikal,
.kleine_nachricht,
.grosse_nachricht {
    position: relative;
    height: auto;
}

.grosse_nachricht_vertikal img,
.kleine_nachricht img,
.grosse_nachricht img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}




/* Schritt 4: 2 èberschriften stylen */

.zwei_ueberschriften {
    position: absolute;
    bottom: 10px;
    left: 40px;
}

.marker,
.mini_marker {
    color: white;
    padding: 8px 15px;
    /* line-height: 50%; */
}

.marker {
    font-size: 27px;
    background-color: var(--blue);
}

.mini_marker {
    font-size: 19px;
    background-color: var(--blue_low_opacity);
}


/* Schritt 5: Responsiveness für main-Abschnitt in index.html 
  1-/2-/3-spaltiges Layout */

.alle_klassen_uebersicht {
    max-width: 1250px;
    justify-content: center;
}

@media(min-width:768px) {
    .alle_klassen_uebersicht {
        margin: 0 auto;   /* horizontal zentrieren ohne Flexbox */
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-auto-rows: 33vw;
        grid-gap: 10px;
        justify-content: center;
    }
}

@media(min-width:1000px) {
    .alle_klassen_uebersicht {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media(min-width:1250px) {
    .alle_klassen_uebersicht {
        grid-auto-rows: 400px;   /* damit Nachrichtenkacheln nicht snkrecht werden */  
    }
}





/* Schritt 5: Mehr Platz für grosse Nachrichten auf breiten screens */

@media(min-width:768px) {
    .grosse_nachricht {
        grid-column: 1/3;
        height: auto;
    }

    .kleine_nachricht {
        grid-row: auto;
        /* grid item will automatically be placed in the next available row*/
    }
}

@media(min-width:1000px) {
    .grosse_nachricht_vertikal {
        height: auto;
        grid-row: 2/4;
    }
}


/* Schritt 6: Footer stylen */

footer{
    background-color: var(--blue);
    color: white;
    padding: 25px;
    text-align: center;
}

footer a{
    color:white;
}

html, body{
    height:100%;
}

body{
    margin:0px;
    display:flex;
    flex-direction: column;

}

main{
    flex:1;
}

/* Schritt 6: Login */

.login_form{
    margin-top: 40px;
}

.login_form input[type=text], input[type=password] {
    box-sizing: border-box;
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
  
    border-width:0px 0px 1px 0px;
    border-style:solid;
    border-color:var(--blue);
  }
  
  .login_form input:focus{
    outline: none;/*Damit kein orangener Rahmen angezeigt wird beim Anklicken*/
  }
  
  .login_form input[type=submit]{
    background-color: var(--blue);
    color:white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    width:100%;
    margin:40px 0;
    padding: 20px 0px;
  }
  
  .login_form input[type=submit]:hover{
    opacity: 0.8;
  }
  
  @media(min-width:768px){
    main { 
      margin:auto;
      display: flex;  
      justify-content: center;
    }
  }


/* Schritt 7: single.html - einzelne Nachricht */

/* Schritt 8: Banners einfügen */

/* Schritt 9: Sticky Banner */