/*---------------------------------------------------------------------------------------------------------------------------------
  Aktuelle Datei: global.css
  Erstellt von  : Walther Gugeler (c) GuSo
  Erstellt am   : 03.11.2025
  Version       : 24.04.2026
  Workspace     : htdocs
  Beschreibung  : Globale CSS-Styles für die Guso-Page
---------------------------------------------------------------------------------------------------------------------------------*/
:root{
    /*------------------------------------------- Schriftgröße für die gesamte Seite */
    /*--guso_main_fontsize: clamp(1rem, 6vw, 1.25rem);*/
    --guso_main_fontsize: 100%;
    /*--------------------------------------------- Schriftart für die gesamte Seite */
    --guso_main_fontfamiliy:'Helvetica Neue',  'Arial', sans-serif;


    --guso-rot-color: red;
    --guso-blau-color: #1F4E8C;
    --guso-hell-grau-color: #F0F0F0;
    --guso-dunkel-grau-color: #2D3F45;
    /*--------------------------------- Buttons */
    --guso_btnBack: blue;
    --guso_btncolor: white;
    --guso_background_body:#d3d2a9;
    /*--------------------------------  Header */
    --guso_header_background: #57575d;
    --guso_header_color: lightgray;
    --guso_header_borderColor: grey;
    /*---------------------------------- Links */
    --guso_a_link_color: white;
    --guso_a_hover_color: red;
    --guso_a_active_color: green;
    --guso_a_visited_color: white;
    /*----------------------------------- Main */
    --guso_main_color: lightgray;
    /*----------------------------------- Rechts */
    --guso_rechts_background_color: lightgray;
    --guso_rechts_border_color: lightblue;
    --guso_rechts_color: black;
    --guso_header_footer_fontsize: 1.6em;

    --swiper-theme-color: black;
}
/*================================================================================================ Grundlegende Stileinstellungen*/
/*............................................................... Button Einstellungen */
.globalbutton
{
    display: flex; /* Flexbox aktivieren */
    justify-content: center; /* Horizontal zentrieren */
    justify-self: center; /* Vertikal zentrieren */
    height: 3vh; width:auto;
    margin-top: .5vh;
    padding-left: 1vw; padding-right: 1vw;
    font-size: 2.5vh;
    font-weight: bold;/* Fettschrift */
    text-decoration: none; /* Unterstrich bei Link ausschalten */
    border: none;/*20px solid var(--guso_btnBack);;*/
    border-radius: 30px;
    background-color: var(--guso_btnBack); /* Hintergrundfarbe */
    color: var(--guso_btncolor); /* Schriftfarbe */
    cursor: pointer;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
                                                                                                   Layout ab 900px Bildschirmbreite
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
@media (min-width: 900px)
{

    html {
        font-family:  var(--guso_main_fontfamiliy);
        font-size: 100%;
        width: 100vw; height: 100vh; margin: 0;
        background-color: var(--guso_background_body);
        min-width: 1000px;
        min-height: 700px;
    }
    /*............................................................. Body Einstellungen */
    body
    {
        font-size: 1vh;
        /*--------------------------Abstand zwischen den Grid-Elementen */
        gap: .4em;
        /*------------------------------------Innenabstand für den Body */
        padding: 0;
        margin: 0; margin-left: .5rem; margin-right:.5rem;
        height: 100%;
    }
    /*............................................................. Main Einstellungen */
    main
    {
        height: 100%;
        font-size: 2vh;
        background: var(--guso_main_color); border-color: var(--guso_a_link_color);
        overflow-x:auto; overflow-y:auto;
    }
    /*............................................................ Aside Einstellungen */
    aside
    {
        height: 100%;
        margin-right: 0;padding: 0.1rem;
        background-color: orange;border-color: var(--guso_rechts_border_color);
        color: var(--guso_rechts_color);
       font-size: 2vh;
        overflow-x:auto; overflow-y:auto;
    }
    /*============================================================================================================ Startseite.css*/
    /*...................................................................................... body*/
    #bodyStartseite
     {
        display: grid;
        grid-template-columns: 4fr 1fr;
        /*grid-template-rows: 4vh 16vh 73vh 4vh;*/
        grid-template-rows: 3vh 16vh 75vh 3vh;
        gap: .5vh;
        grid-template-areas:
            "poHEADER  poHEADER"
            "poSWIPPER poSWIPPER"
            "poBESCHREIBUNG poINFO"
            "poFOOTER poFOOTER";
        #asideStartseite {display: block; }
        #asideStartseite {grid-area: poINFO;}
    }
    /*============================================================================================================ Disclaimer.css*/
    /*...................................................................................... body*/
    #bodyDisclaimer
    {
        display: grid;
        grid-template-columns: 4fr 1fr;
        grid-template-rows: 4vh 89vh 4vh;
        grid-template-areas:
            "poHEADER  poHEADER"
            "poDISCLAIMER poINFO"
            "poFOOTER poFOOTER";
         #asideDisclaimer {display: block;}
    }
    /*...................................................................................... main*/
    #mainDisclaimer
    {
    grid-area: poDISCLAIMER;
        display: grid;

        grid-template-columns:  100%;
        /*grid-template-rows: 5% 90% 5%;*/
         grid-template-rows: 4vh 80vh 2vh;
        grid-template-areas:
        "poTITEL"
        "poINHALT"
        "poBTNQUELLE";
    }
    /*=============================================================================================================== Kontakt.css*/
    /*...................................................................................... body*/
     #bodyKontakt
    {
        display: grid;
        grid-template-columns: 4fr 1fr;
        grid-template-rows: 4vh 89vh 4vh;
        /*grid-template-rows: 4% 90% 4%;*/
        grid-template-areas: "poHEADER  poHEADER" "poAUSGABE poINFO" "poFOOTER poFOOTER";
        #asideKontakt {display: block;}
    }
    /*========================================================================================================== PageHtmlDemo.css*/
    /*..................................................................................... body */
    #bodyHtmlDemo
    {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /*grid-template-rows: 4% 92% 4%;*/
        grid-template-rows: 4vh 90vh 4vh;
        grid-template-areas:
            "poHEADER  poHEADER"
            "poHTML poHTML"
            "poFOOTER poFOOTER";
	}
    /*.............................................Html-Eingabe plus Hilfe einschalten */
    .HtmlHilfeEin
    {
        display : grid;
        background-color: yellow;
        grid-template-rows: 38vh 4vh 45vh;
        grid-template-columns: 0.7fr 0.6fr 1.7fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
                "WHI WHI HIT HIT HIT HIT HIT HIT"
                "ILA ILA IBT IBT OLE OBT OBT OBT"
                "ITH ITH ITH ITH OTE OTE OTE OTE";
        #htmlHilfeEinAusUnten{display: block;}
        #htmlEingabeText{display:block;}  /*ingabe Bereich HTML AUS*/
        #cssEingabeText{display:none;}  /*ingabe Bereich CSS AUS*/
        #jsEingabeText{display:none; }  /* Eingabe Bereich JS AUS*/
        #phpEingabeText{display:none; } /* Eingabe Bereich PHP AUS*/
        #htmlHilfWahl{display: block;}  /* Auswahl einblenden */

    }
     /*..............................................JS-Eingabe plus Hilfe einschalten */
    .JsHilfeEin
    {
        display : grid;
        background-color: yellow;
        /*grid-template-rows: 40% 6% 40% 10%;*/
        grid-template-rows: 38vh 4vh 30vh 15vh;
        grid-template-columns: 0.7fr 0.6fr 1.7fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
                "WHI WHI HIT HIT HIT HIT HIT HIT"
                "ILA ILA IBT IBT OLE OBT OBT OBT"
                "ITJ ITJ ITJ ITJ OTE OTE OTE OTE"
                "ITH ITH ITH ITH OTE OTE OTE OTE";
        #htmlHilfeEinAusUnten{display: block;}
        #htmlEingabeText{display:block;}  /*ingabe Bereich HTML AUS*/
        #cssEingabeText{display:none;}  /*ingabe Bereich CSS AUS*/
        #jsEingabeText{display:block; }  /* Eingabe Bereich JS AUS*/
        #phpEingabeText{display:none; } /* Eingabe Bereich PHP AUS*/
        #htmlHilfWahl{display: block;}  /* Auswahl einblenden */
    }
         /*.........................................PHP-Eingabe plus Hilfe einschalten */
    .PhpHilfeEin
    {
        display : grid;
        background-color: yellow;
        /*grid-template-rows: 40% 6% 40% 10%;*/
        grid-template-rows: 38vh 4vh 30vh 15vh;
        grid-template-columns: 0.7fr 0.6fr 1.7fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
                "WHI WHI HIT HIT HIT HIT HIT HIT"
                "ILA ILA IBT IBT OLE OBT OBT OBT"
                "ITP ITP ITP ITP OTE OTE OTE OTE"
                "ITH ITH ITH ITH OTE OTE OTE OTE";
        #htmlHilfeEinAusUnten{display: block;}
        #htmlEingabeText{display:block;}  /*ingabe Bereich HTML AUS*/
        #cssEingabeText{display:none;}  /*ingabe Bereich CSS AUS*/
        #jsEingabeText{display:none; }  /* Eingabe Bereich JS AUS*/
        #phpEingabeText{display:block; }  /* Eingabe Bereich PHP AUS*/
        #htmlHilfWahl{display: block;}  /* Auswahl einblenden */
    }

         /*.........................................CSS-Eingabe plus Hilfe einschalten */
    .CsHilfeEin
    {
        display : grid;
        background-color: yellow;
        grid-template-rows: 38vh 4vh 30vh 15vh;
        grid-template-columns: 0.7fr 0.6fr 1.7fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas:
                "WHI WHI HIT HIT HIT HIT HIT HIT"
                "ILA ILA IBT IBT OLE OBT OBT OBT"
                "ITC ITC ITC ITC OTE OTE OTE OTE"
                "ITH ITH ITH ITH OTE OTE OTE OTE";
        #htmlHilfeEinAusUnten{display: block;}
        #htmlEingabeText{display:block;}  /*ingabe Bereich HTML AUS*/
        #cssEingabeText{display:block;}  /*ingabe Bereich CSS AUS*/
        #jsEingabeText{display:none; }  /* Eingabe Bereich JS AUS*/
        #phpEingabeText{display:none; }  /* Eingabe Bereich PHP AUS*/
        #htmlHilfWahl{display: block;}  /* Auswahl einblenden */
    }
    /*.................................Html-Eingabe plus CSS und JS Eingabe ohne Hilfe */
    .HtmlCssJsEingabe
    {
        grid-template-rows: 4vh 21vh 21vh 21vh 21vh;;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
                "ILA IBT OLE OBT"
                "ITH ITH OTE OTE"
                "ITC ITC OTE OTE"
                "ITJ ITJ OTE OTE"
                "ITP ITP OTE OTE";
        #htmlEingabeText{display:block;}  /*ingabe Bereich HTML AUS*/
        #cssEingabeText{display:block;}  /*ingabe Bereich CSS EIN*/
        #jsEingabeText{display:block; }   /*#Eingabe Bereich JS EIN*/
        #phpEingabeText{display:block; }  /*#Eingabe Bereich PHP EIN*/
        #htmlHilfWahl{display: none;}  /*Auswahl ausblenden */
    }
    /*..................................................Html-Eingabe im Vollbildmodus  */
    .HtmlCssJsEingabeHtml
    {
        grid-template-rows: 4vh 21vh 21vh 21vh 21vh;;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
                "ILA IBT OLE OBT"
                "ITH ITH OTE OTE"
                "ITH ITH OTE OTE"
                "ITH ITH OTE OTE"
                "ITH ITH OTE OTE";
        #htmlEingabeText{display:block;}  /*ingabe Bereich HTML EIN*/
        #cssEingabeText{display:none;}  /*ingabe Bereich CSS AUS*/
        #jsEingabeText{display:none; }   /*#Eingabe Bereich JS AUS*/
        #phpEingabeText{display:none; }  /*#Eingabe Bereich PHP AUS*/
        #htmlHilfWahl{display: none;}  /*Auswahl ausblenden */
    }
    /*...................................................CSS-Eingabe im Vollbildmodus  */
    .HtmlCssJsEingabeCss
    {
        grid-template-rows: 4vh 21vh 21vh 21vh 21vh;;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
                "ILA IBT OLE OBT"
                "ITC ITC OTE OTE"
                "ITC ITC OTE OTE"
                "ITC ITC OTE OTE"
                "ITC ITC OTE OTE";
        #htmlEingabeText{display:none;}  /*ingabe Bereich HTML AUS*/
        #cssEingabeText{display:block;}  /*ingabe Bereich CSS EIN*/
        #jsEingabeText{display:none; }   /*#Eingabe Bereich JS AUS*/
        #phpEingabeText{display:none; }  /*#Eingabe Bereich PHP AUS*/
        #htmlHilfWahl{display: none;}  /*Auswahl ausblenden */
    }
     /*...................................................JS-Eingabe im Vollbildmodus  */
    .HtmlCssJsEingabeJs
    {
        grid-template-rows: 4vh 21vh 21vh 21vh 21vh;;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
                "ILA IBT OLE OBT"
                "ITJ ITJ OTE OTE"
                "ITJ ITJ OTE OTE"
                "ITJ ITJ OTE OTE"
                "ITJ ITJ OTE OTE";
        #htmlEingabeText{display:none;}  /*ingabe Bereich HTML AUS*/
        #cssEingabeText{display:none;}  /*ingabe Bereich CSS AUS*/
        #jsEingabeText{display:block; }   /*#Eingabe Bereich JS EIN*/
        #phpEingabeText{display:none; }  /*#Eingabe Bereich PHP AUS*/
        #htmlHilfWahl{display: none;}  /*Auswahl ausblenden */
    }
    /*...................................................PHP-Eingabe im Vollbildmodus  */
    .HtmlCssJsEingabePhp
    {
        grid-template-rows: 4vh 21vh 21vh 21vh 21vh;;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-template-areas:
                "ILA IBT OLE OBT"
                "ITP ITP OTE OTE"
                "ITP ITP OTE OTE"
                "ITP ITP OTE OTE"
                "ITP ITP OTE OTE";
        #htmlEingabeText{display:none;}  /*ingabe Bereich HTML AUS*/
        #cssEingabeText{display:none;}  /*ingabe Bereich CSS AUS*/
        #jsEingabeText{display:none; }   /*#Eingabe Bereich JS AUS*/
        #phpEingabeText{display:block; }  /*#Eingabe Bereich PHP EIN*/
        #htmlHilfWahl{display: none;}  /*Auswahl ausblenden */
    }
}
/*============================================================================================================================== */
/* Desktop */
@media (min-width: 1060px) {}
/* Smartphones im Hochformat (bis 480px) */
@media (max-width: 480px){}
/* Smartphones quer / kleine Tablets (481px – 767px) */
@media (min-width: 481px) and (max-width: 767px) {}

/* Tablets Hochformat (768px – 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {}

/* Tablets Querformat / kleine Laptops (1024px – 1279px) */
@media (min-width: 1024px) and (max-width: 1279px) {}

/* Standard-Desktop (1280px – 1439px) */
@media (min-width: 1280px) and (max-width: 1439px) {}

/* Große Desktops (1440px – 1919px) */
@media (min-width: 1440px) and (max-width: 1919px) {}

/* Full HD (1920px – 2559px) */
@media (min-width: 1920px) and (max-width: 2559px) {}

/* 2K / WQHD (2560px – 3839px) */
@media (min-width: 2560px) and (max-width: 3839px) {}

/* 4K UHD (3840px und größer) */
@media (min-width: 3840px) {}

@media (orientation: portrait) { /* Hochformat */ }
@media (orientation: landscape) { /* Querformat */ }
/*Retina-Displays*/
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {}