/*---------------------------------------------------------------------------------------------------------------------------------
  Aktuelle Datei: htmldemo.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
---------------------------------------------------------------------------------------------------------------------------------*/
/**/
/*=================================================================================================================================
Grid Bereich für die HTML-Eingabe und Ausgabe
=================================================================================================================================*/
#htmlEingabeHtmlAusgabe {
    grid-area: poHTML;
    display: grid;  
    font-size: var(--guso_main_fontsize); 
    gap: 0.2em;
    background-color:var(--guso_rechts_background_color);     
    border: 1px solid var(--guso_header_borderColor); /* Rahmen um den Textbereich */
    border-radius: 0.5em; /* Abgerundete Ecken */ 
    margin-right: 0.2em;   
}
/*=================================================================================================================================
Bereich für die HTML-Hilfe
=================================================================================================================================*/
/*------------------------------------------------------------------------------------------------ Label */
 #htmlHilfLab{ background-color: white; text-align: center; height: 95%;padding: .5vh;} 
/*------------------------------------------------------------------------------------------ Auswahlfeld */
#htmlHilfWahl{grid-area: WHI;font-weight: bolder; font-size: 0.8em; margin-top: .2vh;margin-right: .3em; height: 100%;  overflow-y: scroll;}
#htmlHilfeEinAus{ grid-area: HLA; height: 85%; width: 100%; margin-top: 2%;} 
#htmlHilfeEinAusUnten{grid-area: poFOOTER; margin-top: .5%; width: 10%; }


/*----------------------------------------------------------------------------- Scrollbare Ausgabe der HTML-Hilfe im div-Bereich */
#htmlHilfText{
    pointer-events: auto; /* Verhindert Interaktionen im Iframe */
    z-index: 1; /* Stellt sicher, dass der div-Bereich über anderen Elementen liegt */
    grid-area: HIT; /* Grid-Bereich für die HTML-Hilfe im div-Bereich */
    display: block; /* Damit der div-Container als Block-Element dargestellt wird */
    box-sizing: border-box; /* Box-Sizing auf border-box setzen */
     height:100%;                      /* 32 Höhe des div auf 99% des übergeordneten Elements setzen damit Scrollleiste da */
    width: 100%;                      /* Breite des div auf 100% des übergeordneten Elements setzen */
    padding: .1em;                     /* Innenabstand hinzufügen */
    background-color:rgb(217, 217, 135) ; color: black;        
    overflow-x:auto;                   /* Vertikalen Scrollbalken ausblenden */
    overflow-y: auto;                   /* Horizontalen Scrollbalken ausblenden */
    margin: .1em;
    border: 2px solid gray; border-radius: 0.5em;       
    /* Schriftformatierung für den Hilfe-Text im div-Bereich aus hilfe: index.html*/
    /* font-size: .5em; */
    text-align:justify;
}
/*=================================================================================================================================
                                     HTML EINGABE UND AUSGABE BEREICH
=================================================================================================================================*/

/*--------------------------------------------------------------------------------------------------- Bereich für die HTML-Eingabe
---------------------------------------------------------------------------------------------------------------------------------*/
#htmlNeuLab {grid-area: ILA;margin-top: 0.1em; }
#htmlNeuBtn{grid-area: IBT;}
 #htmlClsBtn{grid-area: OBT;}
/*------------------------------------------------------------------------------------------------------- HTML-Eingabe Bereiche */
#htmlEingabeGrid{grid-area: ITH; box-sizing: border-box;}
/*---------------------------------------------------------------------------------------------------------- CSS-Eingabe Bereich*/
#CssEingabeGrid{grid-area: ITC; box-sizing: border-box;}
/*---------------------------------------------------------------------------------------------------------- JS-Eingabe Bereich*/
#JsEingabeGrid{grid-area: ITJ; box-sizing: border-box;}
/*-------------------------------------------------------------------------------------------------------- HTML-Ausgabe Bereich*/
#htmlFrameLab{grid-area: OLE;box-sizing: border-box;height: 95%;}
#htmlAusgabeGrid{grid-area: OTE; box-sizing: border-box;}
/*-------------------------------------------------------------------------- Gemeinsame Styles für die Eingabe/Ausgabe Bereiche*/
#htmlEingabeText,#cssEingabeText,#jsEingabeText,#htmlAusgabeFrame {
    display: block;box-sizing: border-box;
    font-size: 1em;padding: 0.1em;background-color: white;
    border: 1px solid var(--guso_header_borderColor); border-radius: 0.5em; 
    resize: none;
    /* margin-right: 0.1em; */
    margin-left: .2em;
    width: 99.3%; height: 100%; /* Breite und Höhe auf 100% des übergeordneten Elements setzen */
}
/*---------------------------------------------------------------------------------------------Gemeinsame Styles für die Labels */
#htmlFrameLab,#htmlNeuLab,#htmlHilfLab {
    font-weight: bolder; font-size: 1em; margin-top: 0em; margin-left: 1.1em;  font-size: 1.1em;
}