/*---------------------------------------------------------------------------------------------------------------------------------
  Aktuelle Datei: kontakt.css 
  Erstellt von  : Walther Gugeler (c) GuSo
  Erstellt am   : Montag -  03.11.2025
  Version:      : 07.12.2025
  Workspace     : htdocs
  Beschreibung  : CSS-Styles für die Kontakt Seite der Guso-Page
---------------------------------------------------------------------------------------------------------------------------------*/
/*===================================================================================================== Grid-Layout für den <body*/
 /*!!!!!!!!!!!!!!!!!!!!!!!!============================================= Grid-Layout #bodyKontakt in global.css !!!!!!!!!!!!!!!!!*/
/*========================================================================================================== Grid-Layout für main*/
#mainKontakt   {grid-area: poAUSGABE;}
/*=============================================== Grid-Layout für aside und footer===============================================*/
aside  {grid-area: poINFO;}
footer {grid-area: poFOOTER;}    
/*================================================================================================== Grid-Layout für gridFormular*/
#gridFormular
{    
    display: grid;   
    gap: 5px;
    height: 99%;
    margin-right: 1%;
    grid-template-columns:  100%;
    grid-template-rows: 10% 85% 5%;
    grid-template-areas:
        "poTITEL"
        "poKONTAKT"
        "poSTATUS";
    /* font-size: calc(var(--guso_main_fontsize) * 3rem);      */
    font-size: var(--guso_main_fontsize);     
}
/*---------------------------------------------------------------------- poTITEL*/
#titelKontaktformular
{
    grid-area: poTITEL;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
/*---------------------------------------------------------------------- poKONTAKT*/
#kontaktFormular
{
    grid-area: poKONTAKT;
    display: grid;   
    gap: 5px;
    margin-right: .3em;
    grid-template-columns:  10% 90%;
    grid-template-rows: 6% 6% 60% 5%;
    grid-template-areas:
    "poNAME poINNAME"
    "poMAIL poINMAIL"
    "poNACHRICHT poINNACHRICHT"
    "poDUMMY poABSENDEN";
}  
/*------------------------------------------------------------------------- poSTATUS*/        
#meldestatus
{
    grid-area: poSTATUS;
    display: flex; align-items: center;justify-content: center;
    background-color: lightgray; color:black;
    font-weight: bold;
    border: 1px solid darkgrey;border-radius: 10px;
    margin-left: 1rem; margin-bottom: 1rem;
}        
/*=============================================================================================== Grid-Layout für kontaktFormular*/
#labName,#labEmail,#labNachricht { font-size: 1.2em; ; font-weight: bold;  margin-left: 1rem;}
#inpName,#inpEmail,#teaNachricht { font-size: 1.2em; padding-left: 1rem; border: 1px solid darkgrey; border-radius: 10px;}
/*------------------------------------------------------------------------- poINNAME*/
#labName {grid-area: poNAME;}
/*------------------------------------------------------------------------- poINNAME*/
#inpName {grid-area: poINNAME;}
/*------------------------------------------------------------------------- poINMAIL*/
 #labEmail {grid-area: poMAIL;}
/*------------------------------------------------------------------------- poINMAIL*/
#inpEmail {grid-area: poINMAIL;}
/*------------------------------------------------------------------------- poNACHRICHT*/
#labNachricht {grid-area: poNACHRICHT;}
/*------------------------------------------------------------------------- poINNACHRICHT*/
#teaNachricht {grid-area: poINNACHRICHT;resize: none;} 
/*----------------------------------------------------------------------------- poABSENDEN*/
#btnAbsenden{grid-area: poABSENDEN;}