body    {max-width: 1080px; margin-right: auto; margin-left: auto; margin-top:0px; margin-bottom:0px; background-color:#161B24;}
header  {margin-top:0px; margin-bottom:0px; min-height: 200px; padding-left: 5%;  padding-right: 5%; padding-top: 20px; background-color: #014D65;}
nav     {margin-top:0px; margin-bottom:0px; padding-left: 5%;  padding-right: 5%;}
article {margin-top:0px; margin-bottom:0px; padding-left: 5%;  padding-right: 5%; padding-top: 20px; padding-bottom: 20px;}
footer  {margin-top:0px; margin-bottom:0px; padding-left: 5%;  padding-right: 5%; padding-bottom: 48px; padding-top: 48px; background-color: #014D65;}

a:link, a:visited {text-decoration:none;}

.menu1 {filter: brightness(100%);}
.menu1:hover { filter: brightness(130%);}    /* Kacheln und Magenta-Button*/

.menu2 {filter: brightness(100%);}
.menu2:hover {background-color: #404E68;}   /* Links in Navigationsleiste*/

menu3 {filter: brightness(100%);}
.menu3:hover {background-color: #E9FAFF;}    /* Nur-Text-Links */

menu4 {filter: brightness(100%);}
.menu4:hover {background-color: #1266B8;}     /* Links auf blauem Hintergrund */

menu5 {filter: brightness(100%);}
.menu5:hover {background-color: #0281A8;}     /* Links im Footer*/


/* ---- Artikel-Klassen: -----*/
.bghomepage {background-image: url("layout/homepage_bg.jpg"); background-repeat: no-repeat; min-height: 720px; background-color:#014D65; margin-bottom: 20px;} /* Begrüßung Startseite*/

.lvlblue1 {min-height: 400px; background-color: #0A3968; margin-bottom: 20px; margin-top: 20px;} /* blaue Ebene Startseite*/

.lvlblue2 {min-height: 400px; background-color: #0A3968;}                      /* blaue Ebene ohne Rand (Blog-Feld Startseite, alle übrigen Ebenen) */

.lvlsky1 {margin-top: 5%; margin-bottom: 2%; padding-left: 5%; padding-right: 5%; padding-top: 2%; padding-bottom: 2%; background-color: #CAF0FE;}   /* nur Blog-Section Start-Seite */

.lvlsky2 {margin-top: 2%; margin-bottom: 2%; padding-left: 5%; padding-right: 5%; padding-top: 2%; padding-bottom: 2%; background-color: #CAF0FE;}   /* reguläre Blog-Sections */
/* ---------------------------*/


/* ---- Container-Klassen ---- */
.cont1 {display: flex;} /* Container für mehrere Elemente nebeneinander */
.cont2 {display: flex; justify-content: center; align-items: center; gap: 5%; } /* Container für mehrere Elemente nebeneinander, mittig zentriert */
.cont3 {display: flex; justify-content: center; align-items: center; gap: 5%; margin-top:5%; margin-bottom:5%;} /* Container für Kacheln Startseite*/

/* ---------------------------*/

/* ---- Objekt-Klassen ---- */
.navbar1 {font: normal 1.2em calibri; background-color: #161B24;}
@media only screen and (orientation: portrait){.navbar1 {font: normal 2.4em calibri; background-color: #161B24;}}


.tilesize {width: 200px; height: 200px;} /* Größe Kacheln */
@media only screen and (orientation: portrait){
.tilesize {width: 240px; height: 240px;}}

.void {margin-right:auto;}

.symbsize1 {width: 20px; height: 16px;}  /* Maße für Home- und PageUp-Button */
@media only screen and (orientation: portrait){
.symbsize1 {width: 40px; height: 32px;}}

.symbsize2 {width: 8px; height: 16px; margin-left: 5px; margin-right: 1px;}  /* Maße für Pfeil-Button */
@media only screen and (orientation: portrait){
.symbsize2 {width: 16px; height: 32px; margin-left: 10px; margin-right: 5px;}}

.symbsize3 {width: 12px; height: 24px;}  /* großer "zum Blog"-Pfeil */
@media only screen and (orientation: portrait){
.symbsize3 {width: 24px; height: 48px;}}

.logosize1 {width: 188px; height: 116px;}  /* LXD Logo-Größe Startseite */
@media only screen and (orientation: portrait){
.logosize1 {width: 260px; height: 160px;}}

.logosize2 {margin-left: 5%; width: 464px; height: 116px;}  /* Slogan-Größe Startseite */
@media only screen and (orientation: portrait){
.logosize2 {width: 640px; height: 160px;}}

.logosize3 {width: 70px; height: 40px;}  /* LXD, Insta und YouTube Logo-Größe Footer */
@media only screen and (orientation: portrait){
.logosize3 {width: 140px; height: 80px;}}

 /* ---------------------------*/

/* ---- Text-Klassen ----*/
.welcometxt {margin-top: 80px; width: 60%; font: normal 1.3em trebuchet MS; color: white;}
@media only screen and (orientation: portrait){
.welcometxt {margin-top: 680px; width: 100%; font: normal 3.0em trebuchet MS; color: white;}}   /* Willkommenstext Homepage */

.tw1 {font: normal 1.2em calibri; color: white;}
@media only screen and (orientation: portrait){
.tw1 {font: normal 2.4em calibri; color: white}}  /* normaler Text weiß */

.tb1 {font: normal 1.2em calibri; color: #0A3968;}
@media only screen and (orientation: portrait){
.tb1 {font: normal 2.4em calibri; color: #0A3968}}  /* normaler Text blau */

.tmark1 {font: normal 1.0em calibri; color: #FFFFFF; white-space: nowrap; background-color: #4080FF;
padding-left: 5px; padding-right: 5px; padding-top: 1px; padding-bottom: 1px; margin-bottom: 0px;}
@media only screen and (orientation: portrait){
.tmark1 {font: normal 2.0em calibri; color: #FFFFFF; white-space: nowrap; background-color: #4080FF;
padding-left: 10px; padding-right: 10px; padding-top: 1px; padding-bottom: 1px; margin-bottom: 0px;}}    /* blau markierter kleiner Text Blog */


.tmark2 {font: normal 1.2em calibri; color: #FFFFFF; white-space: nowrap; background-color: #B92D5C;
padding-left: 10px; padding-right: 5px; padding-top: 2px; padding-bottom: 2px;}
@media only screen and (orientation: portrait){
.tmark2 {font: normal 2.4em calibri; color: #FFFFFF; white-space: nowrap; background-color: #B92D5C;     /* magenta markierter Text für Buttons */
padding-left: 10px; padding-right: 0px; padding-top: 2px; padding-bottom: 2px;}}


.tmark3 {font: normal 1.2em calibri; color: #FFFFFF; white-space: nowrap; background-color: #161B24;
padding-left: 10px; padding-right: 5px; padding-top: 4px; padding-bottom: 4px;}
@media only screen and (orientation: portrait){
.tmark3 {font: normal 2.4em calibri; color: #FFFFFF; white-space: nowrap; background-color: #161B24;;     /* dunkelblau Text für Nav-Leiste */
padding-left: 10px; padding-right: 0px; padding-top: 2px; padding-bottom: 2px;}}


.tdate {font: normal 1.0em calibri; color: #4F6F8F; white-space: nowrap;
padding-left: 5px; padding-right: 5px; padding-top: 1px; padding-bottom: 1px; white-space: nowrap; margin-bottom: 0px;}
@media only screen and (orientation: portrait){
.tdate {font: normal 2.0em calibri; color: #4F6F8F; white-space: nowrap;
padding-left: 10px; padding-right: 10px; padding-top: 1px; padding-bottom: 1px; white-space: nowrap;margin-bottom: 0px;}}  /* Datum */



h1 {font: normal 2.0em trebuchet MS; color: white;}
@media only screen and (orientation: portrait){
h1 {font: normal 4.0em trebuchet MS; color: white;}}

h2 {font: bold 1.6em calibri; color: #0A3968;}
@media only screen and (orientation: portrait){
h2 {font: bold 3.2em calibri; color: #0A3968;}}

 /* ---------------------------*/

.galpic1 {display: block; margin: auto; margin-top: 2em; margin-bottom: 2em; max-width: 100%; height: auto; border: white 1px solid;}  /* Galeribilder, heller Rand*/
.galpic2 {display: block; margin: auto; margin-top: 2em; margin-bottom: 2em; max-width: 100%; height: auto; border: #0A3968 1px solid;}/* Galeribilder, dunkler Rand*/
.galpic3 {display: block; margin: auto; margin-top: 2em; margin-bottom: 2em; max-width: 100%; height: auto;}                           /* Galeribilder, ohne Rand*/

.picsize1 {width: 300px; height: 200px; border: white 1px solid;}  /* kleine Vorschau-Bilder, heller Rand*/
.picsize2 {width: 300px; height: 200px; border: #0A3968 1px solid;}  /* kleine Vorschau-Bilder, dunkler Rand*/
.picsize3 {width: 600px; height: 400px; border: #0A3968 1px solid;}  /* große Vorschau-Bilder, dunkler Rand*/
.void {margin-right:auto;}

.spacing1 {margin-left: 0px; margin-right: 1%;}
.spacing2 {margin-left: 10px; margin-right: 10px; font: normal 1.2em calibri; color:#DDDDDD;}  /* Sub-Footer */
@media only screen and (orientation: portrait){.spacing2 {font: normal 2.4em calibri;}}


.flagsize {margin-bottom:10px; width: 44px; height: 28px; padding-left: 20px;}
@media only screen and (orientation: portrait){.flagsize {width: 88px; height: 56px; padding-left: 40px;}}





.navbar2 {font: normal 1.2em calibri;}
@media only screen and (orientation: portrait){.navbar2 {font: normal 2.4em calibri;}}

.footer1 {font: normal 1.2em calibri; padding-top: 10px;}
@media only screen and (orientation: portrait){.footer1 {font: normal 2.4em calibri;}}



.blogcontent1 {margin-top: 20px; margin-bottom: 20px; padding-left: 5%;  padding-right: 5%; padding-top: 10px; padding-bottom: 40px; background-color: #CAF0FE;}
@media only screen and (orientation: portrait){.blogcontent1 {margin-top: 20px; margin-bottom: 20px; padding-left: 5%;  padding-right: 5%; padding-top: 10px; padding-bottom: 80px; background-color: #caf0fe;}}

.blogcontent2 {padding-left: 5%; padding-bottom: 160px; font: normal 1.2em calibri; color:#0A3968;}
@media only screen and (orientation: portrait){.blogcontent2 {padding-left: 5%; padding-bottom: 120px; font: normal 3.0em calibri; color:#0A3968;}}







h3  {font: normal 1.2em calibri;}
@media only screen and (orientation: portrait){h3 {font: normal 3.0em calibri;}}