/*  ==========================================
  
    Stylesheet zur Gestaltung
      0. Variabeln definieren für Farbkonzept
      0.1 Globale Einstellung
      1. Grundlagen Body
      1.1 Grundlagen Header
      2. Navigation gestalten


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

/**
  * 0. Variabeln definieren für Farbkonzept
  */

html {
  --color-base-dark: black; 
  --color-base-light: white; 

  --color-primary: #07b; 
  --color-primary-light: #3ad; 
    
  --color-accent: #f63; 
  --color-accent-active: #ec3; 
  
  --color-shadow: rgb(51, 51, 51, 0.3); 
  
  --grey-very-light: whitesmoke; 
  --grey-light: #eee; 
  --grey-dark: #666; 
  --grey-very-dark: #333; 

}  

  
/**  
  * 0.1. Globale Einstellungen für die gesamte Website 
  */ 

/* border-box aktivieren */ 
*, *::before, *::after { box-sizing: border-box; }

/* Collapsing Margins vermeiden */ 
h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote { margin-top: 0; }


/**
  * 1. Grundlagen Body
  */

html {
  background-color: black;
}

body {
  background-color: var(black);
  color: white;
  text-align: center;
  margin:auto;
  max-width: 80%;
}

/**
  * 1.1 Grundlagen Header
  */

.site-header {
  background-color: var(black);
  color: var(black);
  display: flex;
  flex-flow: row;
  align-items: center;
}

.site-header img {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0rem;
}
.site-header h1 {
  margin-top: 0;
  margin-bottom: 0;
  padding: 0rem;
  text-align: right;
  flex:auto;
}

/**
  * 1.1 Grundlagen Main
  */

.site-content {
  padding: 1rem;
}

/**
  * 2. Navigation gestalten
  */

.site-nav {
  background-color: var(--grey-very-dark);
  color: var(--color-base-light);
}

/* Navigatuion ul als Flexcontainer */
.site-nav ul{
  display: flex;
  flex-flow: row;    
  justify-content: space-around;
  padding: 0;
  margin-bottom: 0;
  list-style: none;  
}

/* Navigatuion li als Flexitem */
.site-nav li{
  flex-grow: 1;

}
.site-nav li:nth-of-type(1){
  flex-grow: 5;
}


.site-nav a {
  display: block;
  background-color: var(--grey-very-dark);
  color: var(--color-base-light);
  text-decoration: none;
  padding: 0.5rem 1rem;
}

/* Hover und Focus gestalten */
.site-nav a:hover, .site-nav a:focus {
  background: var(--color-primary); 
  color: var(--color-base-light); 
}

/* Im Moment der Aktivierung */
.site-nav a:active {
  background: var(--color-accent); 
  color: var(--color-base-light); 
}

.nav-banner img{
  width: 100%;
}



/**
  * 3. Fehleranzeige: 
  */

.fehler {
  background-color: coral !important;
  color: red !important;
  font-size: 20pt !important;
  font-weight: 900 !important;
  border: solid 3pt black !important;
  padding: 1rem !important;
}