body    {max-width: 1080px; margin-right: auto; margin-left: auto; margin-top:0px; margin-bottom:0px; background-color:#000E24;}
header  {margin-top:0px; margin-bottom:0px; padding-left: 5%;  padding-right: 5%; padding-top: 5%; padding-bottom: 5%; background-color: #014D65;}
nav     {margin-top:0px; margin-bottom:0px; padding-left: 5%;  padding-right: 5%;}
@media only screen and (orientation: portrait){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 Buttons*/

.menu2 {filter: brightness(100%);}
.menu2:hover {background-color: #2D4D77;}   /* Navigationsleiste */

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

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

.menu5 {filter: brightness(100%);}
.menu5:hover {background-color: #1263B2;}     /* Links blauer Hintergrund (Datenschutz)*/

/* ---- 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: 32px; margin-top: 32px;} /* blaue Ebene Startseite*/
@media only screen and (orientation: portrait){.lvlblue1 {min-height: 400px; background-color: #0A3968; margin-bottom: 56px; margin-top: 56px;}}
.lvlblue2 {min-height: 400px; background-color: #0A3968;}                      /* blaue Ebene ohne Rand (Blog-Teaser auf Startseite, alle übrigen Ebenen) */

.lvlsky1 {margin-top: 5%; margin-bottom: 10%; 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*/
@media only screen and (orientation: portrait){.cont3 {display: flex; justify-content: center; align-items: center; gap: 6%; margin-top: 5%; margin-bottom: 5%;}}
/* ---------------------------*/

/* ---- Objekt-Klassen ---- */

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

.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;}

.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;}}


.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;}}

.buttn1 {font: normal 1.2em calibri; display: inline-block; width:10em; color: #FFFFFF; background-color: #4080FF; text-align: center; white-space: nowrap;                   /* blauer Button */
padding-left: 0.5em; padding-top: 2px; padding-bottom: 2px; margin-right: 2.0em; margin-bottom: 1em;}
@media only screen and (orientation: portrait){
.buttn1 {font: normal 2.4em calibri; display: inline-block; width:10em; color: #FFFFFF; background-color: #4080FF; text-align: center; white-space: nowrap;
padding-left: 0.5em; padding-top: 2px; padding-bottom: 2px; margin-right: 2.0em; margin-bottom: 1em;}}

.buttn2 {font: normal 1.2em calibri; display: inline-block; width:10em; color: #FFFFFF; background-color: #4080FF; text-align: center; white-space: nowrap;                   /* blauer Button einzeln zentriert */
padding-left: 0.5em; padding-top: 2px; padding-bottom: 2px; margin-bottom: 1em;}
@media only screen and (orientation: portrait){
.buttn2 {font: normal 2.4em calibri; display: inline-block; width:10em; color: #FFFFFF; background-color: #4080FF; text-align: center; white-space: nowrap;
padding-left: 0.5em; padding-top: 2px; padding-bottom: 2px; margin-bottom: 1em;}}


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

/* ---- Text-Klassen ----*/

h1 {font: normal 2.0em trebuchet MS; color: white;}    /*große Überschrift weiß*/
@media only screen and (orientation: portrait){
h1 {font: normal 4.0em trebuchet MS; color: white;}}

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

h3 {font: bold 1.6em calibri; color: white;}         /*Überschrift 2 weiß*/
@media only screen and (orientation: portrait){
h3 {font: bold 3.2em calibri; color: white;}}

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

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

.tw2 {font: normal 1.6em calibri; color: white;}   /* Modell-Bezeichnungen */
@media only screen and (orientation: portrait){
.tw2 {font: normal 3.2em calibri; color: white}}


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


.tmark1 {font: normal 1.0em calibri; color: #FFFFFF; white-space: nowrap; background-color: #4F6F8F;     /* grau markierter kleiner Text Blog*/
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: #4F6F8F;
padding-left: 10px; padding-right: 10px; padding-top: 1px; padding-bottom: 1px; margin-bottom: 0px;}}

.tmark2 {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;}     /* grau Blog#, Datum */
@media only screen and (orientation: portrait){
.tmark2 {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;}}

.hgw {white-space: nowrap; font-style: italic; border: 2px solid; background-color: #0090E0;}

.rgw {white-space: nowrap; font-style: italic; border: 2px solid; background-color: #00BC7A;}

.mgw {white-space: nowrap; font-style: italic; border: 2px solid; background-color: #FF7F00;}

.sdw {white-space: nowrap; font-style: italic; border: 2px solid; background-color: #E1355D;}

.mgsdw {white-space: nowrap; font-style: italic; border: 2px solid; background-color: #D256FE;}

.hgb {white-space: nowrap; font-style: italic; border: 2px solid; background-color: #00AFFF;}

.rgb {white-space: nowrap; font-style: italic; border: 2px solid; background-color: #00E090;}

.mgb {white-space: nowrap; font-style: italic; border: 2px solid; background-color: #FF9F00;}

.sdb {white-space: nowrap; font-style: italic; border: 2px solid; background-color: #E54F72;}

.mgsdb {white-space: nowrap; font-style: italic; border: 2px solid; background-color:#DA74FE;}



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



.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;}}