/* ----------------- generelle Angaben--------------------------------------------------------------- ---------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

* {
	font-weight: 500;
	font-family: "Ubuntu Sans", sans-serif;
}

/* ----------Font Orbitron -----------------------------------------------------------------------------*/
@font-face
	{

	    font-style: normal;
		font-weight: 700;
		font-display: swap;
		font-family: "Orbitron";
		src: local('Orbitron'),
		url("/fonts/orbitron/orbitron600.woff2") format("woff2");
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}


@font-face
	{
		font-family: 'Orbitron';
		font-weight: 400;
		font-display: swap;
		src: local('Orbitron'),
		url("/fonts/orbitron/orbitron400.woff2") format("woff2");
		unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}

.orbF /* Orbitron fett*/
	{
		font-family: "Orbitron",sans-serif;
		font-weight:600;
	}

.orb /* Orbitron normal*/
	{
		font-family: "Orbitron",sans-serif;
		font-weight:400;
	}


.impressumPrivacyButton {
	display: block;
	margin: 10px;
	border: solid 1px rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	padding: 5px;
	text-align:center;
}

#impressum {
	margin-bottom: 100px !important;
}
#impressum .buttonMainPage {
	margin: 5px;
	padding: 5px;
}

/* ---------- mehrfach verwendete Style-Angaben ------------------------------------------------------------------------*/
body
	{
		overflow-horizontal: hidden;
		background-color: white;
		color: black;
		margin: 0px;
		padding: 0px;
		box-sizing: border-box;
		font-weight: 500;
		font-family: "Ubuntu Sans", sans-serif;

	/*
		background: rgb(0,0,0);
		background: linear-gradient(70deg, rgba(0,0,0,1) 0%, rgba(18,24,59,1) 100%);
		background-repeat: no-repeat;
		background-attachment: fixed;
	 */
	}
@media screen and (max-width: 800px) {
    body {
        padding-left: 10px;
        padding-right: 10px;
    }
}

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

.dontDrag /* verhindert, dass am Handy Bilder oder Icons in den Drag&Drop-Modus schalten */
	{
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-o-user-select: none;
		user-select: none;
		-webkit-user-drag: none;
		-khtml-user-drag: none;
		-moz-user-drag: none;
		-o-user-drag: none;
		user-drag: none;
	}

/* Hover Effekte */

.emphasize
	{
		padding: 0vw;
		box-shadow: 0px 0px 0px #00000000;
		background-image: linear-gradient(#000000 75%, #000000 100%);
		transition: box-shadow 0.7s, background-image 0.5s;
	}

.emphasize:hover
	{
		box-shadow: 0px .1vmax .2vmax #00000066;
		background-image: linear-gradient(#fafcff 75%, #f2f4ff 100%);
	}


/* vordefinierte Grids */

.fineGrid
	{
		display: grid;
		width:100%;
		margin-top: 1vw;
		column-gap: 1vw;
		row-gap: 0.2vw;
		grid-template-columns:100%;
	}

.fiveCellGrid
	{
		display: grid;
		width:100%;
		margin-top: 1vw;
		column-gap: 1vw;
		row-gap: 0.2vw;
		grid-template-columns:100%;
	}


.collapsible {
	background-color: black;
	color: white;
	margin: auto;
	cursor: pointer;
	padding: 10px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 120%;
	max-width: 768px;
	display: block;
}

div {
	/*max-width: 900px;*/
	text-align: left;
	margin: auto;
}

.collapsible::before {  content: "+ "; }

.active {  background-color: blue; outline: solid white 1px;  }

.collapsible.active::before { content: "- "; }

.content {
    margin-left: auto;
    margin-right: auto;
    max-width: 900px;
    display: block;
    margin-top: 12px;
    margin-bottom: 12px;
    padding: 0 18px;
    background-color: black;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

#servicesMainPage {
	/*border: 1px rgb(86, 106, 238) solid;*/
	background-color: rgb(20, 25, 54);
	border-radius: 10px;
	margin: 30px auto;

	background: rgb(0,0,0);
	background: linear-gradient(0deg, #000000 0%, rgb(21, 29, 73) 100%);
}

#mainWrap {
	max-width: 900px;
}

.buttonMainPage {
	display: block;
	border-radius: 10px;
	margin-top: 15px;
	margin-bottom: 15px;
	padding: 10px;
	text-align: center;
	font-weight: bold;
	font-size: 18px;

	border: 2px rgb(237, 96, 63) solid;
	cursor: pointer;
	align-content: center;
	transition: background-color 1s;
}
.buttonMainPage:hover {
	border: 2px rgb(237, 96, 63) solid;
	background-color: rgb(237, 96, 63);
	transition: background-color 0.2s;
}

/* ----------------- Einstellungen für mobile Geräte (mobile first), Grundeinstellung für alle Geräte ---------------------------------------------------------------*/
/* ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

/* ----------------- Logo-Zeile und Buttons ------------------------------------------------*/
.companyLogo
	{
		max-height: 100px;
		margin: 50px auto;
	}

.iconBox
	{
		height: 100%;
		display: flex;
		flex-direction: column;
		gap: 0.3vmax;
		align-items: center;
		justify-content: space-between;
	}

.longIcon
	{
		height: 4vw;
		min-height: 2em;
		width: auto;
		display: flex;
		justify-content: center;
		align-items: center;
		filter: drop-shadow(0px 0px 0px #00000000);
		transition: filter 0.3s;
	}

.longIcon:hover
	{
		filter: drop-shadow(0px .1em .3em #00000088);
	}

.show_hide
	{
		display: flex; /* => show */
	}

.button
	{
		opacity:0.5;
		transition: opacity 0.3s;
	}
.button:hover
	{
		opacity:1.0;
	}

.ico
	{
		width: 2.2vmin;
		min-width: 2em;
	}


/* ------------ Main menu ----------------------------------------------------------------------*/
#headerMenu {
	display: flex;
	justify-content: center;
	padding: 15px;
	margin-bottom: 30px;
	gap: 10px;

	background-color: white;
	border-radius: 10px;
}
.menuItem {
	width: 180px;
	text-align: center;

	font-family: "Orbitron", Helvetica, sans-serif;
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 1px;
	border: 2px rgb(237, 96, 63) solid;
	border-radius: 10px;
	padding-top: 5px;
	padding-bottom: 5px;

	transition: background-color 1s, transform 0.3s, box-shadow 0.3s;
}
.menuItem:hover {
	transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s;
	transform: translateY(-3px);
	box-shadow: 0 5px 10px 0 rgb(184, 184, 184);
}
.selectedMenuItem {
	background-color: rgb(237, 96, 63);
	transform: translateY(-3px);
	box-shadow: 0 5px 10px 0 rgb(184, 184, 184);
}

@media screen and (max-width: 800px) {
	#headerMenu {
		flex-direction: column;
		align-items: center;
        padding: 8px;
		border: none;
	}

	.menuItem:not(:last-child) {
        margin-bottom: 5px;
    }
}

#apis_in_image {
	backdrop-filter: blur(7px);
	border-radius: 10px;
}

/* ------------Hero-Pic und Viewer ----------------------------------------------------------------------*/

.heroPicture
	{
		grid-column: 1 / 2;
		grid-row:    1 / 2;
		margin-top: 0.2em ;
		width:100%;
	}
.viewer
	{
		grid-column: 1 / 2;
		grid-row:    1 / 2;
		margin-top: 0.2em ;
		width:100%;
		height: 30vmax;
		border: 0;
	}

.heroPic
	{
		width: 100%;
		border-radius: 10px;
	}

/* ------------ TextSection -------------------------------------------------------------------------*/
.articleHeader
	{
	    text-align: center;
		padding: 0.5vw;
		font-size: 25px;
	}

.articleText
	{
		text-align: justify;
		font-size: 19px;
		margin-bottom: 2vmin;
	}

/* -------------Footer -----------------------------------------------------------------------------------*/
.footerM
	{
		grid-column: 1 / 2;
		grid-row:    2 / 3;
	}


/** neues contactform von Thomas */
#contactus {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 900px;
}
.contactForm {
    display: flex;
	flex-wrap: wrap;
    align-items: center;

    background-color: white;
    border: 2px rgb(237, 96, 63) solid;
	border-bottom: none;
    border-radius: 10px 10px 0 0;
}
.contactFormHeader {
    display: inline;
    font-family: "Orbitron", sans-serif;
    font-weight: 600;
    font-size: 25px;
    text-align: center;
}
.contactForm a {
    display: inline-block;
    font-size: 15px;
	font-weight: bold;
    padding: 5px;
    text-decoration: none;
    text-align: center;
    margin: 10px;
    min-width: 100px;
}
.contactFormButtonContainer {
    display: inline-flex;
    justify-content: center;
    flex-wrap: wrap;
}
.contactForm .buttonMainPage {
	max-width: 150px;
	flex-grow: 1;
}

@media screen and (max-width: 800px) {
	.contactForm {
		justify-content: center;
	}
	.contactFormHeader {
		display: none;
	}
	.contactForm {
		border-radius: 0;
		border-left: none;
		border-right: none;
	}
	.contactForm a {
		font-size: 15px;
		font-weight: bold;
	}
}