/*---------------------------------------------------------------------------------------------------------------------------------
  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: 3.8vh; /*3rem;*/
    /*------------------------------------------------------------  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: 3.8vh; width: auto;/*2.3rem; */
        margin: 0;margin-left: .2rem;
    }
    /*---------- Formatierung unsortierte Liste mit den Navigationspunkten rechts oben im Header */
    ul {padding-right: 20px;float: right; margin-right: .2rem; 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:  2.4vh; padding-right: 1vw;}
    /*------------------------------------------------ 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: 3.8vh; /*4.2rem;*/

    /*------------------------- Alle Elemente im Footer nach rechts ausrichten und Abstand rechts*/
    * {float: right;clear: left;padding-right: 1.5rem;}
    /*------------------------------------------------------------  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:  2.4vh; }/*1.7rem */
    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 */