/*  ==========================================
    Webtechniken lernen 3: CSS-Layouts  
    Stylesheet für die Übungswebsite 

    basis.css  
    wird in style.css per @import eingebunden  

    Stylesheet zur grundlegenden Gestaltung:  
    1. Globale Einstellungen für die gesamte Website
    2. Grundlegende Gestaltung für Schrift und Text 
    3. Nützliche, allgemeine Klassen 

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


/**  
  * 1. Globale Einstellungen für die gesamte Website 
  */ 
html{
  --color-primary: rgb(88, 184, 120);
  --color-accent: #FFD700;
  --color-accent-active: #FFA500;
  --color-base-light: white;
}
/* border-box aktivieren */ 
*, *::before, *::after { box-sizing: border-box; }

/* Sanftes Scrollen aktivieren */ 
html { scroll-behavior: smooth; }

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

/* Bilder und Videos mit flexibler Breite einbinden */ 
img, video { max-width: 100%; height: auto; }

/* figure ohne horizontale Außenabstände */
figure { margin-left: 0; margin-right: 0; } 


/**  
  * 2. Grundlegende Gestaltung für Schrift und Text  
  */ 

body {
 /* Systemschriftart auf dem Gerät des Benutzers; »Best Practice« kann sich ändern */
 font-family: system-ui, -apple-system, "Segoe UI", Roboto, 
             "Helvetica Neue", Arial, sans-serif; 

 /* Definition der Standardschriftgröße (optional) */
 font-size: 1rem;
 min-width: 320px; 
 max-width: 1600px;
  
  /* Horizontal zentrieren */ 
  margin: 0 auto;  

  /* Sticky Footer, Schritt 1/2 */
  display: flex;
  flex-flow: column; 
  min-height: 100vh
}  

/* Überschriften - Schriftgröße und Strichstärke */ 
h1 { font-size: 2.5rem; font-weight: 500; } 
h2 { font-size: 2rem; font-weight: 500; } 
h3 { font-size: 1.75rem; font-weight: 500; } 
h4 { font-size: 1.5rem; font-weight: 500; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; } 
p{font-size: 1.2rem;}
/* Unterstreichung für Hyperlinks dünn und etwas weiter weg vom Text */ 
a { text-decoration-thickness: 1px; text-underline-offset: 0.1875em; }

/* Kontaktaddressen nicht kursiv */
address { font-style: normal; }



/** 
  * Ende allgemeiner Teil
  */ 

  .site-header{
    background-color: var(--color-primary);
    color: #fff;
    /*padding: 0.5rem;*/ 
    text-align: center;
    margin-bottom: 0;

  }

  .site-content { 
    background-color: rgb(221, 241, 228);
    width: 100%;
    height:auto;
    line-height: 1.5;
   
    /* Sticky Footer, Schritt 2/2 */
    flex: 1; 
  }

  
  .content-intro h1{
    font-size: 3rem;
    color: black;
    margin-left: 10%;
    margin-top: 2rem;
  }

  
  .erklaerung{
    margin-left: 10%
  }

  .erklaerung h2, h3, h4, h5 {
    margin-bottom: 0rem;
  }


  .site-footer {
    font-size: smaller; 
    background-color: var(--color-primary);
    color: var(--color-base-light, white); 
    text-align: right; 
    padding: 1rem;
  }

  /* Die Navigation im Fußbereich */   
.footer-nav ul {
  display: flex;
  list-style: none; 

  padding: 0; 
  margin: 0; 
}

.footer-nav li {
  margin-right: 0.5rem;
}

.footer-nav li:first-child {
  padding-right: 0.5rem; 
  border-right: 1px solid var(--grey-light); 
}

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

.site-footer a {
  color: var(--color-base-light, white); 
  text-decoration: none; 
}

.site-footer a:hover, 
.site-footer a:focus {
  text-decoration: underline; 
}

.site-footer a:active {
  color: var(--color-accent-active); 
}

/** 
  * 1. Gestaltung für die mobile Navigation  
  */     
    
/* Navigationsbereich gestalten */
.site-nav { 
  background-color: var(--color-primary);
  color: white; 

  box-shadow: 0 2px 6px var(--color-shadow);
  /*margin-bottom: 2rem;*/ 
}

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

/* Navigationsliste als Flex-Container */
.site-nav ul { 
  display: flex;
  flex-flow: column; 
  list-style: none;  
  
  padding: 0; 
  margin: 0; 
}

/* Die Listenelemente li benötigen in der mobilen Navigation kein CSS ;-) */

/* Navigationslinks gestalten */
.site-nav a {
  display: block;
  background: var(--color-primary);
  color: white; 
  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); 
}

/* Aktuellen Menüpunkt hervorheben */
.current a { 
  background: var(--color-primary); 
  color: white; 
  text-decoration: underline; 
}



/** 
  * 2. Menübutton per CSS gestalten 
  */     

/* Kein JavaScript? Menübutton ausblenden */
.no-js .menubutton { display: none; }

/* Menübutton gestalten */
.js .menubutton {
  display: flex;
  align-items: center;

  cursor: pointer;
  background: inherit;
  color: var(--color-base-light); 
  font: inherit; 
  text-align: center; 
  padding: 0.5rem 1rem; 
  border: 0; 
  margin: 0; 
}

.js .menubutton::before {
  content: url("../bilder/menuburger.svg"); 
  width: 1rem; 
  height: 1rem; 
  margin: 0.25rem; 
}


/**
  * 3. Menübutton per CSS ausblenden 
  */

.js .site-nav ul {
  max-height: 0; 
  overflow: hidden; 
}


/**
  * 4. Navigationsliste mit dem Menübutton einblenden 
  */

/* Navigationsliste mit leichter Animation einblenden  */
.js .showmenu + ul {
  max-height: 100rem; 
  overflow: auto; 
  transition: max-height 0.5s ease;
}

/* Tausche Hamburger gegen X */
.js .menubutton.showmenu::before {
  content: url("../bilder/menuclose.svg");
}

/** 
  * 2. Menübutton per CSS gestalten 
  */     

/* Kein JavaScript? Menübutton ausblenden */
.no-js .menubutton { display: none; }

/* Menübutton gestalten */
.js .menubutton {
  display: flex;
  align-items: center;

  cursor: pointer;
  background: inherit;
  color: var(--color-base-light); 
  font: inherit; 
  text-align: center; 
  padding: 0.5rem 1rem; 
  border: 0; 
  margin: 0; 
}

.js .menubutton::before {
  content: url("../bilder/menuburger.svg"); 
  width: 1rem; 
  height: 1rem; 
  margin: 0.25rem; 
}


/**
  * 3. Menübutton per CSS ausblenden 
  */

.js .site-nav ul {
  max-height: 0; 
  overflow: hidden; 
}


/**
  * 4. Navigationsliste mit dem Menübutton einblenden 
  */

/* Navigationsliste mit leichter Animation einblenden  */
.js .showmenu + ul {
  max-height: 100rem; 
  overflow: auto; 
  transition: max-height 0.5s ease;
}

/* Tausche Hamburger gegen X */
.js .menubutton.showmenu::before {
  content: url("../bilder/menuclose.svg");
}

/**
  * 5. Eine 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 {
    flex: 1; 
    max-width: 10rem; 
    text-align: center;
    border-left: 1px solid var(---color-base-light); 
  }
  /*.site-nav li:last-child {
    border-right: 1px solid var(--color-base-light);
  }*/
}