@charset "UTF-8";
/* CSS Document */
@font-face 					{ font-family: 'Light'; src: url("fonts/Archivo-Light.ttf"); }
@font-face 					{ font-family: 'Bold'; src: url("fonts/Archivo-Black.ttf"); }
body 						{ padding:0; margin:0; width:100%; overflow-x:hidden; overflow-y:auto; color:rgba(146,156,166,1); font-family: 'Bold', 'sans-serif'; line-height:20px; font-size:14px; background-color:rgba(10,20,40,1.00); }
html 						{ scroll-behavior:smooth; }

/*CSS 2025.1*/
/* LINKS ------------------------------------------------------------------------------------------------------------- */
a 							{ text-decoration:none; border:0px; color:rgba(210,220,230,1.00); transition:0.3s; }
a:active					{ text-decoration:none; border:0px; color:rgba(210,220,230,1.00); }
a:hover						{ text-decoration:none; border:0px; color:rgba(230,0,80,1.00); }
a:visited					{ }

/* GRUNDLAGEN ------------------------------------------------------------------------------------------------------------- */
.gesamt						{ margin: auto; max-width: 1000px; width: 98%; }
.flex 					    { display: flex; }	
.ganz						{ width: 98%; margin: 1%; }
.halb						{ float: left; width: 48%; margin: 1%; flex: 1; }
.drittel					{ float: left; width: 31.33%; margin: 1%; flex: 1; }
.zweidrittel				{ float: left; width: 64.66%; margin: 1%; flex: 2; }
hr 							{ height: 1px; border: 0; background-color: rgba(120,130,140,1.00) }
.hundert					{ width: 100%;}
.screenshots				{ float: left; width: 50%; margin: 0%; }



/* NACHOBEN --------------------------------------------------------------------------------------------------------------------*/
#myBtn 						{ display:none; position:fixed; bottom:20px; right:30px; z-index:99; border:none; outline:none; cursor:pointer; background:url("NachOben.svg"); width:50px; height:42px; }
#myBtn:hover 				{ }

/* CLOSE --------------------------------------------------------------------------------------------------------------------*/
.closebutton				{ position:fixed; top:5px; right:5px; z-index:99; width:50px; height:42px; display:block; background:url(Schlieszen.svg); }


.logo						{ margin: auto; text-align: center; }
.hauptkategorierel			{ position: relative; }
.hauptkategorietext			{ position: absolute; left: 3%; top: 10%; transform: translate(-3%, -10%); z-index: 1; color: rgba(30,40,50,1.00) }
.hauptkategoriebild			{ position: static; margin-bottom: 2%; }
.textfeld					{ padding: 15px 20px 15px 20px; }
.zentriert					{ text-align: center; }
.links						{ text-align: left; }
.rechts						{ text-align: right; }
.headline					{ font-family: 'Light', Helvetica, Arial, 'sans-serif';  line-height:22px; font-size:18px; color:rgba(120,130,140,1.00); }
.klein						{ line-height:22px; font-size:10px; }
.montlight					{ font-family: 'Light', Helvetica, Arial, 'sans-serif'; }


/* FARBEN*/
.haupttextfeldfarbe			{ background-color:rgba(50,60,70,1.00); }
.ueberfeldfarbe				{ background-color:rgba(30,130,200,1.00); }
.neuesfeldfarbe				{ background-color:rgba(230,0,80,1.00); }
.ueberschriftfarbe			{ color:rgba(220,230,240,1.00); } 
.blau						{ color:rgba(30,130,200,1.00); }
.rot						{ color:rgba(230,0,80,1.00); }


.zwischen 					{ padding-bottom: 2%; padding-top: 2%; }
.zwischenklein 				{ padding-bottom: 1%; padding-top: 1%; }

.rotateimg180 				{ -webkit-transform:rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg);  transform: rotate(180deg); }

.mehrcontainer				{ position: relative; width: 100%; }
.mehr						{ position: absolute; background:url("mehr.svg"); width:20px; height: auto; /*float: right;*/ }
.bottom						{ width: 100%; height: 13vh; }

.social						{ height: 30px; }















.navhg						{  max-width:100%; height:inherit; overflow:hidden; width:5000px; background-color: rgba(255,255,255,1);  position: fixed; font-size:calc(11px + .4vw);  display: block;  border-bottom: solid 0px #CCCCCC; left:0px; right:0px; top:0px; z-index:100; }

/* INDEX --------------------------------------------------------------------------------------------------------------------*/
.gesamtbreite 				{ margin: 0px; padding: 0px; width: 100%; display: flex; justify-content: center; }
.tbpadd 					{ padding-bottom: 3%; padding-top: 3%; }
.tbpadd50					{ padding-bottom: 3%; padding-top: 3%; }
.tbpadd25 					{ padding-bottom: 1.5%; padding-top: 1.5%; }

/* ZWEISPALTIGER INHALT ------------------------------------------------------------------------------------------------------------*/
.container1020 				{ max-width: 1020px; /*width: 90%;*/ padding: /*2%*/0%; }
.image-container 			{ overflow: hidden; /* Fix für Floating */ margin-bottom: 2%; /* Abstand zwischen Bildpaaren */ }
.image-container img 		{ width: 49%; height: auto; }
.left						{ float: left; margin-right: 2%; /* 1% Abstand zum rechten Bild */ }
.right						{ float: right; }

/* Text +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.maintext 					{ text-align:left; max-width:1020px; width:90%; margin:auto; /*position: sticky;*/ }
.headlineblau				{ font-family: 'Roboto', 'Minion', 'Cambria', 'Palatino', 'Times', serif; color:rgba(0,64,112,1.00); font-weight: 700; }
.headlinehg					{ background-color: rgba(255,255,255,1.00); padding: 10px; } /* 0,64,112,1.00 */


/* LIGHTBOX +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.lightbox 					{ /* Default is  hidden */ display:none; /* Position and style */ position:fixed; z-index:999; width:100%; height:100%; text-align:center; text-decoration:none; top:0; left:0; margin:auto; background: rgba(10,20,40,0.95); overflow:auto; }
.lightbox img 				{ /* Pad the lightbox image */ width:100%; /*margin-top: 10px;*/ }
.ltext						{ /* Pad the lightbox image */ max-width:1000px; width:95%; margin:auto; text-align:left !important; } /* Breite des Bildes in der Lightbox */
.lightbox:target 			{ /* Remove default browser outline */ outline:none; /** Unhide lightbox **/ display:block; }
.description				{ color:rgba(0,0,0,1.0); font-weight:bolder; line-height:calc(24px + .3vw) !important; font-size:calc(18px + .3vw) !important; }   
.centered					{ position:absolute; top:45%; left:50%; transform:translate(-50%, -45%); -ms-transform: translate(-50%, -45%); width:90%; max-width: 900px; /* BILDBREITE IN DER LIGHTBOX!!!!!*/ }
.lightboxtop				{ position:absolute; top:20px; left:50%; transform:translate(-50%, 0%); -ms-transform: translate(-50%, 0%); width:90%; max-width: 900px; /* BILDBREITE IN DER LIGHTBOX!!!!!*/ }
.textleft					{ text-align:left; color:rgba(255,255,255,1.0); }
.imagecompact 				{ line-height:0 !important; }




.indexbutton			{ width: 33.33%; float: left; transition:0.25s; }
.indexbutton:hover		{ opacity: 0.5; filter: alpha(opacity=50); /* Ältere Browser */ }




/* aufräumen, oder auch nicht ;) */



.dunkelblau					{ background-color: rgba(0,64,112,0.50) }



.menu {
            position: sticky;
           /* top: 0;
            width: 100%;
            text-align: center;
            padding: 10px 0;
            background: white;*/
        }

        .menu a {
            text-decoration: none;
            color: black;
            font-size: 20px;
            margin: 0px 15px;
        }

.videoheader { display: flex; justify-content: center; align-items:center; position: relative; overflow: hidden; }

#background-video { position: absolute; }

.topspacer {height: 0px;}




/* Index +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.indexsmall					{ display:none; }
.indexbig					{ display:block; }
.index33					{ width:33.3333%; float:left; }

.indexText					{ width:70%; max-width:400px; margin: auto; }



/* NAVI --------------------------------------------------------------------------------------------------------------------*/
.navicons 					{ float:left; height:70px; margin-top:15px; }

.navlink					{ font-size:calc(10px + .3vw) !important; }
.navlogo					{ text-align: right; }
.navlogoposition			{ height:70px; width:auto; margin-bottom:15px; margin-top:15px; transition:0.25s; }
.navlogoposition:hover		{ height:70px; width:auto; margin-bottom:15px; margin-top:15px; opacity: 0.5; filter: alpha(opacity=50); /* Ältere Browser */ }
.navposition				{ position: fixed; width:80%; margin:auto; }
.topnav 					{ overflow: hidden; position: static;  }
.topnav #myLinks			{ display: none; color:#888888; text-align: right; }
.topnav a 					{ color:#888888; text-decoration:none; font-size:calc(11px + .4vw); display: block; transition:0.3s; }
.topnav a.icon 				{ background: rgba(0,80,140,1);  display: block;  position: absolute;  left: 0;  top: 0; }
.topnav a:hover 			{ color:rgba(230,230,230,1); cursor: pointer; }
.active 					{ color:rgba(25,25,25,1); }
.navhg						{ /* Hintergrundfarbe */ max-width:100%; height:inherit; overflow:hidden; width:10000px; background-color:rgba(255,255,255,0.90); position:fixed; font-size:calc(11px + .4vw); display:block; left:0px; right:0px; top:0px; z-index:100; }
.small						{ display:none; z-index:100;  }
.big						{ display:block; z-index:100; }
.topspacer					{ width:100%; height:60px; background-color:rgba(5,5,5,1); }
/*.indexrollover				{ transition:0.3s; opacity:1; filter:alpha(opacity=100); }
.indexrollover:hover		{ opacity:0.33; filter:alpha(opacity=33); }
*/





.blue						{ color:rgba(0,70,120,1); }
.white						{ color:rgba(255,255,255,1); }
.bgdeepblack				{ background-color:rgba(70,75,80,1); }
.bgblack					{ background-color:rgba(250,250,250,0.1); }
.clearall 					{ clear: both; }
.acht						{ color:rgba(200,200,200,1.0); font-weight: normal !important; }
.nobr						{ white-space: nowrap; }
.centertextonly 			{ text-align: center; }
.bgblue						{ background-color:rgba(0,70,120,1); }



/* Mainbackground +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.mainback					{ background-color: rgba(145,155,165,1); background: url('bg01.png') repeat fixed; border-color: rgba(30,70,100,1); border-top-width: 10px; border-bottom-width: 1px; border-style: solid none solid none;}



/* LINKS +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.underliner					{ text-decoration:none !important; background-color: rgba(205,30,65,1.0); padding-left: 8px; padding-right: 8px; }
.underliner:hover			{ text-decoration:none !important; background-color: rgba(205,30,65,0.0); padding-left: 8px; padding-right: 8px; }
.rcorners 					{ border-radius: 50px; background: rgba(215,195,130,1); padding: 16px 32px; }
.centertext 				{ text-align: center; max-width:1000px; width:40%; margin:auto; }




/* Bild mit Roll Over +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.container 					{ float:left; position:relative; width: calc(33.33% - 0px); background-color: rgba(255,255,255,1); /* ANGABE DES RANDES BEI CONTEINER!!!!!!*/ /*border: solid rgba(255,255,255,0.0) 1px;*/ clip-path: polygon(0.5% 1%,  0.5% 99%, 99.5% 99%, 99.5% 1%); }
.image 						{ opacity:1; display:block; width:100%; height:auto; transition:0.25s ease; backface-visibility:hidden; }
.middle 					{ transition:0.5s ease; opacity:0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); text-align:center; }
.info						{ transition:0.5s ease; opacity:0.5; position:absolute; bottom:0px; right:10px; transform:translate(-10px, 0px); -ms-transform: translate(-10px, 0px); text-align:right; }
.container:hover .image	 	{ opacity:0.2; }
.container:hover .middle 	{ opacity:1; }
.container:hover .info 		{ opacity:1; right:5px; transform:translate(-5px, 0px); -ms-transform:translate(-5px, 0px); }
.text 						{ color:rgba(50,50,50,1); font-size:16px; font-weight: 800; }
.maximal					{ max-width:1800px; width: 80%; margin: auto; }
.tn							{ width: calc(11.11% - 2px); float: left; opacity: 1.0; transition:0.25s ease; filter: grayscale(100%); clip-path: polygon(1% 1%, 1% 99%, 50% 99%, 99% 50%, 99% 1%); }
.tn:hover					{ opacity: 1.0; filter: grayscale(0%); clip-path: polygon(3% 3%, 3% 97%,  97% 97%,  97% 97%, 97% 3%); }



/* corporate art +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
.caradius 					{ float:left; position:relative; width:calc(33.33% - 0px); }
.einhundert 				{ width:100%; /* clip-path: polygon(0.5% 1%,  0.5% 99%, 99.5% 99%, 99.5% 1%);*/}
.funfzig					{ width:calc(50% - 0px); }






/* MEDIASIZE +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

@media only screen and (max-width: 768px) {
	
body 						{ line-height:calc(20px + .3vw); font-size:calc(14px + .3vw); }
	
	
	
.halb						{ float: none; width: 98%; margin: 1%; }
.drittel					{ float: none; width: 75%; margin: 1% 15%; }
.zweidrittel				{ float: none; width: 75%; margin: 1% 15%; }
.flex 					    { display: block; }	

	
	
	
	
	
.tbpadd 					{ padding-bottom:30px; padding-top:30px; }
.tbpadd50					{ padding-bottom:25px; padding-top:25px; }
.tbpadd25					{ padding-bottom:12px; padding-top:12px; }
.navlogoposition			{ height:38px; margin-bottom:7px; margin-top:7px; }
.navlogoposition:hover		{ height:38px; margin-bottom:7px; margin-top:7px; }
.small						{ display:block; }
.big						{ display:none; }
.indexsmall					{ display:block; }
.indexbig					{ display:none; }
.container 					{ width: calc(50% - 0px); }
.image						{ width:100%; margin:auto; }
/*.maintext					{ width:80%; }*/
.tn							{ width: calc(16.66% - 0px); }
.topspacer					{ height: 75px;}
.navicons 					{ height:38px; margin-top:7px; margin-bottom:7px; }

	
	
	.container2 {
            flex-direction: column;
        }
        .left-column, .right-column {
            width: 100%;
        }


}