/*---------------------------------------------------------------------------------------------------------------------------------
Aktuelle Datei: global.css
Erstellt von : Walther Gugeler (c) GuSo
Erstellt am : 03.11.2025
Version : 07.12.2025
Workspace : htdocs
Beschreibung : Globale CSS-Styles für die Guso-Page
---------------------------------------------------------------------------------------------------------------------------------*/
/*--------------------------------------------------- Google-Fonst Raleway importieren --------------------------------------------*/
/* raleway-regular - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Raleway';
font-style: normal;
font-weight: 400;
src: url('../fonts/raleway-v37-latin-regular.eot'); /* IE9 Compat Modes */
src: url('../fonts/raleway-v37-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/raleway-v37-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/raleway-v37-latin-regular.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('../fonts/raleway-v37-latin-regular.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('../fonts/raleway-v37-latin-regular.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Raleway';
font-style: italic;
font-weight: 400;
src: url('../fonts/raleway-v37-latin-italic.eot'); /* IE9 Compat Modes */
src: url('../fonts/raleway-v37-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/raleway-v37-latin-italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/raleway-v37-latin-italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('../fonts/raleway-v37-latin-italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('../fonts/raleway-v37-latin-italic.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-700 - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Raleway';
font-style: normal;
font-weight: 700;
src: url('../fonts/raleway-v37-latin-700.eot'); /* IE9 Compat Modes */
src: url('../fonts/raleway-v37-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/raleway-v37-latin-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/raleway-v37-latin-700.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('../fonts/raleway-v37-latin-700.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('../fonts/raleway-v37-latin-700.svg#Raleway') format('svg'); /* Legacy iOS */
}
/* raleway-700italic - latin */
@font-face {
font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
font-family: 'Raleway';
font-style: italic;
font-weight: 700;
src: url('../fonts/raleway-v37-latin-700italic.eot'); /* IE9 Compat Modes */
src: url('../fonts/raleway-v37-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/raleway-v37-latin-700italic.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
url('../fonts/raleway-v37-latin-700italic.woff') format('woff'), /* Chrome 5+, Firefox 3.6+, IE 9+, Safari 5.1+, iOS 5+ */
url('../fonts/raleway-v37-latin-700italic.ttf') format('truetype'), /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
url('../fonts/raleway-v37-latin-700italic.svg#Raleway') format('svg'); /* Legacy iOS */
}
/*------------------------------------------------------------ CSS Variablen für Farben ----------------------------------------------
In Javascript können diese Variablen so verwendet werden:
document.documentElement targets :root variables.
// Get the computed styles of the root element
const rootStyles = getComputedStyle(document.documentElement);
// Read the value of a CSS variable
const primaryColor = rootStyles.getPropertyValue('--primary-color').trim();
// Change the value of a CSS variable
document.documentElement.style.setProperty('--primary-color', '#e74c3c');
--------------------------------------------------------------------------------------------------------------------------------------*/
:root{
/*------------------------------------------- Schriftgröße für die gesamte Seite */
--guso_main_fontsize: clamp(10px, 10vw, 32px);
/*--------------------------------------------- Schriftart für die gesamte Seite */
--guso_main_fontfamiliy: 'Raleway', '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*/
/*........................................................................... HTML Einstellungen */
html
{
font-family: var(--guso_main_fontfamiliy); font-size: var(--guso_main_fontsize);
width: 100vw; height: 98vh; margin: 0;
min-width: 500px; min-height: 400px;
* {box-sizing: border-box; }
}
/*........................................................................... Body Einstellungen */
body
{
font-size: var(--guso_main_fontsize);
/*--------------------------Abstand zwischen den Grid-Elementen */
gap: .2em;
/*------------------------------------Innenabstand für den Body */
padding: 0em;
height: 98vh;
background-color: var(--guso_background_body);
margin-left: 0.5%;
}
/*........................................................................... Main Einstellungen */
main
{
height: 100%;
background: var(--guso_main_color); border-color: var(--guso_a_link_color);
overflow-x:auto; overflow-y:auto;
}
/*.......................................................................... Aside Einstellungen */
aside
{
margin-right: 0.1em;padding: 0.2em;
background: orange;border-color: var(--guso_rechts_border_color);
color: var(--guso_rechts_color);
p{color: var(--guso_rechts_color); font-size: 1rem};
overflow-x:auto; overflow-y:auto;
}
/*......................................................................... Button Einstellungen */
.globalbutton
{
height: 80%; width: 90%;
font-weight: bold;/* Fettschrift */
border: 2px solid darkgrey;
border-radius: 10px; background-color: var(--guso_btnBack); /* Hintergrundfarbe */
color: var(--guso_btncolor); /* Schriftfarbe */
font-size: 1.5vh; /* Schriftgröße */
cursor: pointer;
justify-self: center;
margin-top: .5%;
}
/*################################################################################ Bereiche für verschiedene Bildschirmgrößen ###*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Mobile Layout bis 900px Bildschirmbreite
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
@media (max-width: 899px)
{
/* :root {--guso_main_fontsize: clamp(10px, .6vw, 24px);} html {font-size: var(--guso_main_fontsize);} */
:root {--guso_main_fontsize: clamp(8px, 2vh, 24px); } html {font-size: var(--guso_main_fontsize);}
/*==================================================================================================== Startseite.css*/
/*.......................................................................................... body*/
#bodyStartseite
{
display: grid;
grid-template-columns: 100%;
grid-template-rows: 4% 20% 70% 4%;
grid-template-areas:
"poHEADER"
"poSWIPPER"
"poBESCHREIBUNG"
"poFOOTER";
font-size: var(--guso_main_fontsize);
#asideStartseite {display: none; }
}
/*====================================================================================================== HtmlDemo.css*/
/*......................................................................................... body */
#bodyHtmlDemo
{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 4% 90% 4%;
grid-template-areas:
"poHEADER"
"poHTML"
"poFOOTER";
}
/*...........................................................Html-Eingabe plus Hilfe einschalten */
.HtmlHilfeEin
{
grid-template-rows: 4% 28% 4% 28% 4% 28%;
grid-template-columns: .5fr 1fr;
grid-template-areas:
"HLA WHI"
"HIT HIT"
"ILA IBT"
"ITH ITH"
"OLE OBT"
"OTE OTE";
#htmlHilfeEinAus{display: block;}
#htmlHilfeEinAusUnten{display:none; background-color: red;}
#cssEingabeText{display:none;} /*ingabe Bereich CSS AUS*/
#jsEingabeText{display:none; } /* Eingabe Bereich JS AUS*/
#htmlHilfWahl{display: block;} /* Auswahl einblenden */
}
/*.......................................................................Html-Eingabe ohne Hilfe */
.HtmlEingabe
{
grid-template-rows: 6% 4% 41% 4% 41%;
grid-template-columns: .5fr 1fr;
grid-template-areas:
"HLA WHI"
"ILA IBT"
"ITH ITH"
"OLE OBT"
"OTE OTE";
#cssEingabeText{display:none;} /*ingabe Bereich CSS AUS*/
#jsEingabeText{display:none; } /* Eingabe Bereich JS AUS*/
/*#htmlHilfWahl{display: none;} Auswahl ausblenden */
}
/*......................................................Html-Eingabe plus CSS Eingabe ohne Hilfe */
.HtmlCssEingabe
{
grid-template-rows:6% 4% 28% 27% 4% 27%;
grid-template-columns: .5fr 1fr;
grid-template-areas:
"HLA WHI"
"ILA IBT"
"ITH ITH"
"ITC ITC"
"OLE OBT"
"OTE OTE";
#cssEingabeText{display:block;} /*ingabe Bereich CSS EIN*/
#jsEingabeText{display:none; } /* Eingabe Bereich JS AUS*/
/*#htmlHilfWahl{display: none;} Auswahl ausblenden */
}
/*...............................................Html-Eingabe plus CSS und JS Eingabe ohne Hilfe */
.HtmlCssJsEingabe
{
box-sizing: border-box;
grid-template-rows: 6% 4% 21% 21% 20% 4% 20%;
grid-template-columns: .5fr 1fr;
grid-template-areas:
"HLA WHI"
"ILA IBT"
"ITH ITH"
"ITC ITC"
"ITJ ITJ"
"OLE OBT"
"OTE OTE";
#cssEingabeText{display:block;} /*ingabe Bereich CSS EIN*/
#jsEingabeText{display:block; } /* Eingabe Bereich JS EIN*/
/*#htmlHilfWahl{display: none;} Auswahl ausblenden */
}
}
/*==================================================================================================== Disclaimer.css*/
/*.......................................................................................... body*/
#bodyDisclaimer
{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 4% 90% 4%;
grid-template-areas: "poHEADER" "poDISCLAIMER" "poFOOTER";
#asideDisclaimer {display: none; }
}
/*.......................................................................................... main*/
#mainDisclaimer
{
grid-area: poDISCLAIMER;
display: grid;
font-size: var(--guso_main_fontsize);
grid-template-columns: 100%;
grid-template-rows: 5% 90% 5%;
grid-template-areas:
"poTITEL"
"poINHALT"
"poBTNQUELLE";
}
/*======================================================================================================= Kontakt.css*/
/*......................................................................................... body*/
#bodyKontakt
{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 4% 90% 4%;
grid-template-areas: "poHEADER" "poAUSGABE" "poFOOTER";
#asideKontakt {display: none; }
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Layout ab 900px Bildschirmbreite
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
@media (min-width: 900px)
{
:root {--guso_main_fontsize: clamp(8px, 2vh, 24px); }
html {font-size: var(--guso_main_fontsize);}
/*================================================================================================ Startseite.css*/
/*...................................................................................... body*/
#bodyStartseite
{
display: grid;
font-size: var(--guso_main_fontsize);
grid-template-columns: 4fr 1fr;
grid-template-rows: 4% 20% 70% 4%;
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: 4% 90% 4%;
grid-template-areas:
"poHEADER poHEADER"
"poDISCLAIMER poINFO"
"poFOOTER poFOOTER";
#asideDisclaimer {display: block;}
}
/*...................................................................................... main*/
#mainDisclaimer
{
grid-area: poDISCLAIMER;
display: grid;
font-size: var(--guso_main_fontsize);
grid-template-columns: 100%;
grid-template-rows: 5% 90% 5%;
grid-template-areas:
"poTITEL"
"poINHALT"
"poBTNQUELLE";
}
/*=================================================================================================== Kontakt.css*/
/*...................................................................................... body*/
#bodyKontakt
{
display: grid;
grid-template-columns: 4fr 1fr;
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% 90% 4%;
grid-template-areas:
"poHEADER poHEADER"
"poHTML poHTML"
"poFOOTER poFOOTER";
}
/*.......................................................Html-Eingabe plus Hilfe einschalten */
.HtmlHilfeEin
{
display : grid;
background-color: yellow;
/*########################################################################
Alte Version mit 4 Spalten und Auswahl oben mit PopUp
##########################################################################
grid-template-rows: 6% 56% 6% 30%;
grid-template-columns: .5fr 1fr 1.5fr 1fr;
grid-template-areas:
"HLA WHI WHI WHI"
"HIT HIT HIT HIT"
"ILA IBT OLE OBT"
"ITH ITH OTE OTE";
*/
/*########################################################################
Neue Version mit 8 Spalten und Auswahl links
#########################################################################*/
grid-template-rows: 56% 6% 36%;
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";
#htmlHilfeEinAus{display: none;} /*Hilfe Ein/aus ausblenden wegen Auswahl links */
#htmlHilfeEinAusUnten{display: block;}
#cssEingabeText{display:none;} /*ingabe Bereich CSS AUS*/
#jsEingabeText{display:none; } /* Eingabe Bereich JS AUS*/
#htmlHilfWahl{display: block;} /* Auswahl einblenden */
}
/*...................................................................Html-Eingabe ohne Hilfe */
.HtmlEingabe
{
/* grid-template-rows: 6% 6% 84%;
grid-template-rows: 6% 90%;
grid-template-columns: .5fr 1fr 1fr 1fr;
grid-template-areas:
"HLA WHI WHI WHI"
"ILA IBT OLE OBT"
"ITH ITH OTE OTE"; */
grid-template-rows: 6% 90%;
grid-template-columns: 0.7fr 0.6fr 1.7fr 1fr 1fr 1fr 1fr 1fr;
grid-template-areas:
"ILA ILA IBT IBT OLE OBT OBT OBT"
"ITH ITH ITH ITH OTE OTE OTE OTE";
#cssEingabeText{display:none;} /*ingabe Bereich CSS AUS*/
#jsEingabeText{display:none; } /* Eingabe Bereich JS AUS*/
#htmlHilfeEinAus{display: none;} /*Hilfe Ein/aus ausblenden wegen Auswahl links */
#htmlHilfWahl{display: none;} /*Auswahl ausblenden */
}
/*..................................................Html-Eingabe plus CSS Eingabe ohne Hilfe */
.HtmlCssEingabe
{
grid-template-rows: 6% 4% 42% 44%;
grid-template-columns: .5fr 1fr 1fr 1fr;
grid-template-areas:
"HLA WHI WHI WHI"
"ILA IBT OLE OBT"
"ITH ITH OTE OTE"
"ITC ITC OTE OTE";
#cssEingabeText{display:block;} /*ingabe Bereich CSS EIN*/
#jsEingabeText{display:none; } /* Eingabe Bereich JS AUS*/
/*#htmlHilfWahl{display: none;} Auswahl ausblenden */
}
/*...........................................Html-Eingabe plus CSS und JS Eingabe ohne Hilfe */
.HtmlCssJsEingabe
{
grid-template-rows: 6% 4% 29% 28% 28%;
grid-template-columns: .5fr 1fr 1fr 1fr;
grid-template-areas:
"HLA WHI WHI WHI"
"ILA IBT OLE OBT"
"ITH ITH OTE OTE"
"ITC ITC OTE OTE"
"ITJ ITJ OTE OTE";
#cssEingabeText{display:block;} /*ingabe Bereich CSS EIN*/
#jsEingabeText{display:block; } /* Eingabe Bereich JS EIN*/
/*#htmlHilfWahl{display: none;} Auswahl ausblenden */
}
}
@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) {}