/*---------------------------------------------------------------------------------------------------------------------------------
  Aktuelle Datei: headerfooter.css
  Erstellt von  : Walther Gugeler (c) GuSo
  Erstellt am   : 03.11.2025
  Version       : 14.12.2025
  Workspace     : htdocs
  Beschreibung  : Globale Header- und Footer-CSS-Styles für die Guso-Page
---------------------------------------------------------------------------------------------------------------------------------*/
header 
{
    /*----------------------------------------------------------------- Header über alle Spalten */
    grid-area: poHEADER;
    /*---------------------------------------------------------------Höhe des Headers auf 2.5rem */
    height: 2.5rem;
    /*------------------------------------------------------------  Hintergrund und Border Color */
    background:var(--guso_header_background); border-color: var(--guso-header_borderColor);
    /*-------------------------------------------------------- Formatierung Img von Guso mit Hut */    
    a {display: inline-block; height: 100%; }
    a > img 
    {
        /* height: auto;width: calc(var(--guso_main_fontsize)*1.2);  */
        height: 2em; width: auto;
        margin: 0;margin-left: .5rem;           
    } 
    /*---------- Formatierung unsortierte Liste mit den Navigationspunkten rechts oben im Header */
    ul {padding: 0px;float: right; margin-right: .5rem; margin-top: 0; }
    /*---------------------- Formatierung der Listenelemente in der unsortierten Liste im Header */
	  ul > li {display: inline-block; }
    /*------------------------ Formatierung der Anker(Links) in der unsortierten Liste im Header */
    ul > li > a {margin : 0; font-size:  1.2rem; padding-left: .2rem; padding-right: .2rem;}
    /*------------------------------------------------ Link ohne Unterstreichung und weiße Farbe */
    ul > li > a:link {color:var(--guso_a_link_color);text-decoration: none;}
    /*--------------------------------------------- Link mit rotem Hintergrund beim drüberfahren */
    ul > li > a:hover {background-color:var(--guso_a_hover_color);text-decoration: none;}
    /*------------------------------------------------- Link mit hellgrauer Farbe beim anklicken */
    ul > li > a:active {color:var(--guso_a_active_color);text-decoration: none;}
    /*-------------------------------------------------- Link mit weißer Farbe nach dem besuchen */
    ul > li > a:visited {color:var(--guso_a_visited_color);text-decoration: none;}
}
/*=================================================================================================================CSS für footer*/
/*------------------------------------------background und border color für footer grid ganze Zeile*/
footer 
{
     grid-area: poFOOTER;
    /*---------------------------------------------------------------Höhe des Headers auf 2.5rem */
    height: 2.5rem;
    
    /*------------------------- Alle Elemente im Footer nach rechts ausrichten und Abstand rechts*/
    * {float: right;clear: left;padding-right: 0.4rem;}
    /*------------------------------------------------------------  Hintergrund und Border Color */
    background:var(--guso_header_background); border-color: var(--guso-header_borderColor);
    /*----------------------------------------------------------------- Abstand rechts im Footer */
    margin-right: 0.2em;
    /*----------------------------- Link (Kontakt) ohne Unterstreichung und weiße Farbe font 1.2 */
    a,span{color:var(--guso_a_link_color); text-decoration: none;font-size:  1.2rem; } 
    a:hover{background-color:var(--guso_a_hover_color); }
}
/*======================================================================= CCS Border und Padding für alle Hauptbereiche der Seite*/
header,nav,main,article,section,aside,footer 
{
	border-radius: 0.5rem; border: 2px solid;  
  /*------------------------------------------------------------  Hintergrund und Border Color */
  border-color: var(--guso_header_borderColor);
}
/*========================================================================================== GENERELLE STYLES ==================*/
.clearfix::after{
  /* Clearfix damit die Höhe sich nach dem Inhalt richtet 
     clearfix: https://css-tricks.com/snippets/css/clear-fix/
  */
  content: "";
  display: block;
  clear: both;
}
/*===================================================================================================================== Buttons */