/* Stylesheet für die Übungswebseite aus "Einstieg in HTML + CSS */
/* Hintergrundfarbe für das Stammelement */ 

/* Modul mit den grundlegenden Einstellungen */
@import url("basis.css"); 

/* Modul für Kontaktformular und andere Interaktionen */
@import url("forms.css"); 


html { background-color: whitesmoke; }

body
{
 /* background-color: floralwhite;*/
  color: black
  margin: auto;
  padding: 1rem; 
}

header
{
  background-color: steelblue;
  color: white; 
  padding: 1rem;
} 

/* Fine-Tuning: Außenabstände um Logo und Slogan anpassen */
/*
header h2
{
  margin-bottom: 0;	
}
*/

/** 
  * 2. Kopfbereich (inklusive Inhalte)  
  */ 

/*
header li
{
  color: white;
} 
*/

/* Innen- und Außenabstände */
.site-header { 
  padding: 1rem 1rem 1 1rem; 
  margin-bottom: 0rem; 
} 

/* Fine-Tuning: Die Abstände um Logo und Slogan anpassen */ 
.site-header h4 { margin-bottom: 1; }
.site-header p { margin-top: 0; }


/*
header p
{
  margin-top: 0;
}
*/
.site-header ul
 { 
    color: white;
    text-decoration: none;
	
    text-align: center;
    padding: 0; 
    margin: 0; 
  }

.site-header li
{
  display: inline;
  padding: 0.5rem;
  margin: 1rem 0;
} 

/*
header li
{
  display: inline;
  margin-right: 0.5rem;
} 

*/
nav
{
  background-color: black;
  color: white;
  padding: 0.5rem;
  margin: 1rem 0;
}


.site-nav { 
    background-color: #333;
    color: white; 
    box-shadow: 0 2px 6px rgb(51,51,51,0.3); 
    margin-bottom: 2rem; 
} 

.site-nav .inside {
    padding: 0;
}

.site-nav ul {
    display: flex; 
    flex-flow: column; 
	
	text-align: center;
    list-style: none; 
    padding: 0; 
    margin: 0; 
}

.site-nav a {
    display: block; 
    text-decoration: none; 
    background: #333; 
    color: white;
    padding: 0.5rem 1rem;
}

.site-nav a:hover, 
.site-nav a:focus { 
    background: #07b; 
    color: white; 
}

/*
.content-intro figure:
{
    text-align: center;
}
*/
/**
  * Horizontale Navigation für breitere Viewports  
  */
@media screen and (min-width: 600px) {
    .menubutton { 
        display: none !important; 
    } 
    .site-nav { 
        position: sticky; 
        top: 0; 
    } 
    .site-nav .inside {
        padding: 0 1rem; 
    }
    .site-nav ul { 
        max-height: none !important; 
		
        flex-flow: row; 
        padding: 0; 
    }
    .site-nav li {
		display: inline;
        flex: 1; 
        max-width: 10rem; 
        text-align: center; 
        border-left: 1px solid #eee; 
    }
    .site-nav li:last-child { 
        border-right: 1px solid #eee; 
    }

} /* Ende @media */

/* Navigationslinks ohne Unterstreichung */

.site-nav a {
    color: white; 
    text-decoration: none; 
}

/*
nav ul
{
  padding: 0;
  margin: 0;
}
*/
    figure {
		color: black;
        margin-left: 0; 
        margin-right: 0; 
      }
      
    video {
        max-width: 100%; 
        height: auto; 
      }


     form {
        max-width: 400px;
        background-color: whitesmoke; 
        padding: 2rem; 
      }

      div {
        margin-bottom: 1rem; 
      }
	 
	  label { 
        cursor: pointer; 
      }      

      label[for] { 
        display: block; 
      }      

      button {
        font-size: inherit; 
        background-color: gray;
        color: white; 
        padding: 0.5rem; 
        border: none;   
      }      

.current a
 {
    text-decoration: underline; 	
 }

main
{
  color: black;
  padding: 1rem; 
}

.site-content
{
 padding: 0 1rem;
}

.site-content li
{
  color: black;
  list-style: none; 
}

 .site-content a
{
  color: black;
  list-style: none; 
  text-decoration: none; 
}

  .bild li {
		display: inline;
        margin-right: 0.5rem;
      }  		

.site-footer a
{
  display: block;
 
  color: white;
  text-decoration: none;
}


.site-footer {
    font-size: smaller; 
    background-color: #333;
    color: white; 
    text-align: right; 
    padding: 0.5rem 1rem;
  }

/*
footer.site-footer
{
  background-color: black;
  color: white;
  padding: 0.5rem;
  text-align: right;
}
*/

.footer-nav ul
{
  display: flex;
  padding: 0;
  list-style: none;
  margin: 0;	
}

.footer-nav li
{
 /* display: inline; */
  margin-right: 0.5rem;	
}

.footer-nav li:first-child
{
	padding-right: 0.5rem;
	border-right: 1px solid #eee;
}

.footer-nav li:last-child
{
	margin-right: 0;
	margin-left: auto;
}

/* sanftes Scrollen aktivieren */

html
{
  scroll-behavior: smooth;
}

/* Grundlegende Gestaltung für den Abschnitt mit den Infoboxen */

.infoboxen
{
   background-color: whitesmoike;
   padding: 1rem;
   margin-bottom: 1rem;   
}

.infobox
{
   text-align: center;
   background-color: floralwhite; 
   border: 4px solid #07b;   
   border-radius: 1rem;
   padding: 1rem;
   margin: 1rem;
}

/* Bilder und Videos flexibel einbinden */

img
{
  max.width:100%;
  heigth:auto;  
}

video
{
  max.width:100%;
  heigth:auto;  
}