::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: white;
}
::-webkit-scrollbar-thumb {
	width: 10px;
	border-radius: 5px;
	background: #213a7e;
}

@font-face {
	font-family: 'Helvetica'; /*a name to be used later*/
	src: url('Helvetica.ttf'); /*URL to font*/
}

html, body {
	position: relative;
	margin: 0px;
	padding: 0px;
	width: 100vw;
	height: 100vh;
	font-family: 'Roboto', sans-serif;
	font-size: 15px;
	background-color: #213a7e;
}

* {
	box-sizing: border-box;
}

a {
	color: inherit;
	text-decoration: inherit;
}

body {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 200px 1fr;
}

body > header {
	grid-area: 1/1/2/-1;
	display: grid;
	grid-template-columns: 5vw 1fr 1fr;
	grid-template-rows: repeat(6, 25px) auto;
	align-content: stretch;
	align-items: end;
	background-color: white;
	background-repeat: repeat-x;
}
body > header > a.logo {
	grid-area: 2/2/6/3;
	justify-self: start;
	align-self: center;
}
body > header > div.right {
	grid-area: 5/4/5/5;
	text-align: center;
	display: grid;
	grid-template-columns: repeat(3, minmax(140px, 180px));
	grid-template-rows: 1fr;
	gap: 0.75rem;
	align-items: center;
	padding: 1rem;
}
body > header > div.right a {
	display: flex;
	min-width: 0;
	height: 82px;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}
body > header > div.right img {
	display: block;
	width: 100%;
	max-height: 72px;
	object-fit: contain;
}
body > header > div.right p {
	margin: 0;
	font-family: Helvetica, serif !important;
}
body > header > nav {
	grid-area: 6/2/7/-1;
	margin-left: -10px;
}
body > header > div.sub {
	grid-area: 7/1/8/5;
	color: white;
	min-height: 25px;
	margin-left: -10px;
	background: rgb(33,58,126);
	background: linear-gradient(90deg, rgba(33,58,126,1) 0%, rgba(193,0,118,1) 25%, rgba(255,147,182,1) 50%, rgba(193,0,118,1) 75%, rgba(33,58,126,1) 100%);
}
body > header > nav a,
/*body > header > div.right a,*/
body > header > div.sub a {
	white-space: nowrap;
	padding: 0 10px;
}

body > header > div.sub > div {
	display: none;
	color: white;
	margin-left: 5vw;
	line-height: 25px;
}
body > header > div.sub > .active {
	display: block;
}
body > header.netz1 {
	background-image: url( ../img/header-hg/netz1.png );
}
body > header.netz2 {
	background-image: url( ../img/header-hg/netz2.png );
}
body > header.netz3 {
	background-image: url( ../img/header-hg/netz3.png );
}
body > header.netz4 {
	background-image: url( ../img/header-hg/netz4.png );
}
body > header.netz5 {
	background-image: url( ../img/header-hg/netz5.png );
}
body > header > .burger {
	display: none;
	grid-area: 4/3/7/4;
	justify-self: center;
	background-color: #213a7e;
	border-radius: 10px;
}
body > header > .burger > div {
	display: inline-block;
	text-align: center;
	font-size: 40px;
	color: white;
	line-height: 40px;
	padding: 0 1rem;
	border: 1px solid black;
	border-radius: 10px;
}
body > footer {
	position: absolute;
    bottom: 0px;
    left: 0px;
    right: 0px;
    height: 6rem;
    line-height: 1.3rem;
    background-color: #00000070;
    display: grid;
	grid-gap: 8vw;
    grid-template-columns: repeat(4, auto);
    place-content: center;
    justify-items: center;
    align-items: center;
}
body > footer, body > footer a {
	color: white;
	text-decoration: none;
}
body > footer > div:nth-child(1){
	justify-self: flex-end;
}
body > footer > div:nth-child(3){
	justify-self: flex-start;
}
main {
	grid-area: 2/1/3/-1;
	position: relative;
	display: block;
	background-color: white;
	overflow: auto;
}
main > .mobile {
	display: none;
	position: absolute;
	z-index: 3;
	top: 0px;
	right: 0px;
	overflow: hidden;
	background-color: white;
	padding: 1rem 2rem;
	border: 1px solid black;
}
main > .mobile.hidden {
	height: 0px;
	top: -3rem;
}
main > .mobile li {
	margin-left: 2vw;
	line-height: 2rem;
}
main > .mobile ul,
main > .mobile > ul > li {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}

main > section {
	height: 100%;
}
main > section:not(#home) {
	/*margin-top: 2rem;*/
	height: 100%
}
main > section:not(:first-child) {
	display: none;
}
section h1 {
	margin: 0px;
	margin-top: 1rem;
	margin-bottom: 10px;
	font-size: 1.4rem;
	font-weight: bold;
	text-transform: uppercase;
	color: #e84393;
}
section h2 {
	margin: 0px;
	margin-bottom: 10px;
	font-size: 1rem;
	font-weight: bold;
	color: #e84393;
}
div.glide li > div {
	width: 50vw;
	margin-top: 50px;
	padding: 2rem 2rem 2rem 100px;
	color: white;
	background-color: rgb(193,0,118);
	opacity: 0.8;
}
div.glide h1 {
	text-shadow: 2px 2px 4px #000000;
	line-height: 1.4rem;
	color: white;
}
div.glide h2 {
	line-height: 1.4rem;
    font-size: 5mm;
	color: white;
}
div.glide p {
	margin: 0px;
	line-height: 1.4rem;
	text-align: justify;
}
.glide,
.glide__track,
.glide__slides {
	height: inherit;
}
.glide ul {
	margin: 0px;
}
.glide ul > li {
	background-repeat: no-repeat;
	background-size: cover;
}

/*.glide__slide--active{
	position: absolute;
	top: 0px;
	right: 0px;
	min-width: 100%;
	min-height: 100%;
	width: auto;
	height: auto;
	z-index: -1000;
	overflow: hidden;
}*/
.glide__slide {
	background-position: center center;
}
.glide__arrow {
	position: absolute;
	display: block;
	top: 50%;
	z-index: 2;
	color: white;
	text-transform: uppercase;
	padding: 9px 12px;
	background-color: #00000050;
	border: 2px solid rgba(255, 255, 255, 0.5);
	border-radius: 4px;
	opacity: 1;
	cursor: pointer;
	transition: opacity 150ms ease, border 300ms ease-in-out;
	transform: translateY(-50%);
	line-height: 1;
}
.glide__arrow:focus {
	outline: none;
}
.glide__arrow:hover {
	border-color: white;
}
.glide__arrow--left {
	left: 2em;
}
.glide__arrow--right {
	right: 2em;
}
.glide__arrow--disabled {
	opacity: 0.33;
}
main > section > div:not(.glide) > div {
	margin-left: 5vw;
	margin-right: 5vw;
}
main > section hr {
	grid-column: 1/-1;
	background-color: #ccc;
	background: linear-gradient(90deg, rgba(33,58,126,1) 0%, rgba(193,0,118,1) 25%, rgba(255,147,182,1) 50%, rgba(193,0,118,1) 75%, rgba(33,58,126,1) 100%);
	border: 0;
	height: 0.2rem;
	width: 70%;
}

main > section > div.single {
	margin-right: 5vw;
	padding-top: 3vh;
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-auto-rows: auto;
	grid-gap: 10px;
	align-content: center;
	align-items: start;
}
main > section > div.single > img {
	width: auto;
	height: auto;
	max-width: 38vw;
	max-height: 30vh;
}
main > section#kontakt > div.single > img{
	max-width:45vw;
}
main > section#geschichte > div.single > img{
	max-width:45vw;
}
.impressum{
	grid-area: 1/1/2/-1;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 2vw;
    padding-bottom: 4vh;
}
.impressum > div {
    box-shadow: 0px 5px 4px -2px #00000021;
    padding: 1vw;
    max-width: 20vw;
}
main > section > article {
	position: relative;
	min-height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
main > section > article:not(:last-child) {
	border-bottom: 5px solid #213a7e;
}
main > section > article > div {
	display: inline-block;
	position: relative;
	width: 50vw;
	margin-top: 50px;
	padding: 2rem 50px 2rem 5vw;
	color: black;
	background-color: #ffffffcc;
}
main > section > article > div > h1 {
	margin: 0px;
	padding: 0px;
	margin-bottom: 1rem;
}
main > section > article > div > h2 {
	color: black;
	margin: 0px;
	padding: 0px;
}
main > section > article > div > p {
	margin: 0px;
	margin-bottom: 1rem;
	padding: 0px;
	font-size: 1rem;
}
main > section > article > div > li {
	font-size: 1rem;
}
main > section > article img.icon {
	position: absolute;
	top: calc(50% - 45px);
	right: -45px;
}
address {
	display: grid;
	grid-template-columns: 4rem 12vw;
	grid-gap: 0.4rem 0.8rem;
}
.table {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-gap: 0.4rem 0.8rem;
}

.partner {
	background-color: #f9e5f1;
	padding: 10px;
	grid-column: 1/3
}
p {
    margin-top: 0;
    margin-bottom: 0.5vh;
}

.formButton{
	box-shadow: 0px 1px 2px 0px #00000029;
    padding: 0.6rem;
    cursor: pointer;
}
.formButton > h1 > i {
	margin-right: 1rem;
}
.formText{
	height: 0;
    padding: 0rem 1rem 0rem 1rem;
    position: unset;
    overflow-x: hidden;
    transition: 0.5s;
	box-shadow: 0px 1px 7px -2px #00000085;
}
video.glide__slide.glide__slide--active {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
}
main > section > article.single {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto;
	grid-auto-rows: auto;
	grid-gap: 10px;
	align-content: flex-start;
}
main > section > article.single > div {
	width: auto;
	margin-left: 5vw;
    margin-right: 5vw;
    padding: 1rem; 
    color: white; 
    background-color: #2b2b2bb3; 
}
main > section > article.single > div > h2 {
	color: #e84393;
}
main > section > article.single > img {
	margin-top: 50px;
    width: auto;
    height: auto;
    max-width: 38vw;
    max-height: 30vh;
	box-shadow: 0px 3px 5px 0px #000000ad;
}
main > section#referenzen {
	background-image: url(../img/header-bilder/flexOwner_blaue_2_13_1600.webp);
    position: fixed;
    overflow-y: auto;
    position: relative;
    min-height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
main > section#referenzen > article{
	margin-bottom: 8vh;
}
main > section > article.single > div.referenz {
	grid-area: 2/1/3/-1;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(9, 1fr);
    /*grid-gap: 2vh 4vw;*/
    justify-self: center;
    align-items: center;
    width: 70%;
    margin-bottom: 2vh;
    background-color: #23232380;
    box-shadow: 0px 3px 4px 1px #15151594;
    border-top: 2mm solid #c10076;
}
main > section > article.single > div.referenz > div {
	height: 100%;
    width: 100%;
    display: grid;
    justify-items: center;
    align-items: center;
    padding: 1vw;
    background-color: #1116;
}
section#referenzen .referenz > div:nth-child(even) {
	background-color: #eee8;
}

section#referenzen .referenz > div > div {
	padding: 5px;
	background-color: white;
}

div.referenz > div img {
    width: 100%;
}

.bg_slide0 {background-image:url(../img/header-bilder/Industrial_Background_6.jpg)}
.bg_slide1 { background-image: url(../img/header-bilder/flexOwner_12_1600.webp) }
.bg_slide2 { background-image: url(../img/header-bilder/flexOwner_16_1600.webp) }
.bg_slide3 { background-image: url(../img/header-bilder/flexOwner_25_1600.webp) }
.bg_anlagenautomatisierung { background-image: url(../img/header-bilder/flexOwner_IndustrieRef_1600.webp) }
.bg_smartfactory { background-image: url(../img/header-bilder/flexOwner_24_1600.webp) }
.bg_bussysteme { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Netzwerk_1600.webp) }
.bg_visualisierung { background-image: url(../img/header-bilder/flexOwner_4_1600.webp) }
.bg_robotik { background-image: url(../img/header-bilder/flexOwner_19_1600.webp) }
.bg_messsysteme { background-image: url(../img/header-bilder/flexOwner_5_1600.webp) }
.bg_datenerfassung { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Interoperabilitaet_1600.webp) }
.bg_prozessoptimierung { background-image: url(../img/header-bilder/flexOwner_26_1600.webp) }
.bg_mechanischekonstruktion { background-image: url(../img/header-bilder/flexOwner_27_1600.webp) }
.bg_automatisierungstechnik { background-image: url(../img/header-bilder/flexOwner_IndustrieRef_1600.webp) }
.bg_anlagenmodernisierung { background-image: url(../img/header-bilder/flexOwner_11_1600.webp) }
.bg_audiovideo { background-image: url(../img/header-bilder/flexOwner_10_1600.webp) }
.bg_sicherheit { background-image: url(../img/header-bilder/flexOwner_20_1600.webp) }
.bg_bueroinstallation { background-image: url(../img/header-bilder/flexOwner_17_1600.webp) }
.bg_industrieinstallation { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Industrieinstallation_1600.webp) }
.bg_montagetatigkeiten {background-image: url(../img/header-bilder/flexOwner_Industrial_Effizienz_1600.webp)}
.bg_inbetriebnahmen {background-image: url(../img/header-bilder/flexOwner_23_1600.webp)}
.bg_anwendungen {background-image: url(../img/header-bilder/flexOwner_Gebaeude_Netzwerk_Server_1600.webp)}
.bg_itsecurity {background-image: url(../img/header-bilder/flexOwner_Gebaeude_Netzwerk_Sicherheit_1600.webp)}
.bg_servicierung {background-image: url(../img/header-bilder/flexOwner_14_1600.webp)}
.bg_projektplanung {background-image: url(../img/header-bilder/flexOwner_Gebaeude_Projektplanung_1600.webp)}
.bg_beleuchtung { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Beleuchtung_1600.webp) }
.bg_beschattung { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Beschattungssysteme_1600.webp) }
.bg_HeizeLuften { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Heizen_Smart_Metering_1600.webp) }
.bg_smartenergy { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Smart_Energy_1600.webp) }
.bg_multimedia { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Multimedia_1600.webp) }
.bg_outdoor { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Outdoor_1600.webp) }
.bg_flexbutler { background-image: url(../img/header-bilder/flexOwner_Gebaeude_flexApp_flexButler_1600.webp) }
.bg_visualisierungen { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Visualisierung_1600.webp) }
.bg_softwareentwicklung { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Programming_Code_1600.webp) }
.bg_alarmier { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Alarm_Sicherheit_1600.webp) }
.bg_video { background-image: url(../img/header-bilder/flexOwner_Allgemein_Videoueberwachung_1600.webp) }
.bg_hausinstallation { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Hausinstallation_1600.webp) }
.bg_buroinstallation { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Bueroinstallation_1600.webp) }
.bg_netzwerktechnik { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Netzwerk_Patchkabeln_1600.webp) }
.bg_mess { background-image: url(../img/header-bilder/flexOwner_Gebaeude_MSR_1600.webp) }


@media screen and (max-width: 1200px) {
	.bg_slide1 { background-image: url(../img/header-bilder/flexOwner_12_1200.webp) }
	.bg_slide2 { background-image: url(../img/header-bilder/flexOwner_16_1200.webp) }
	.bg_slide3 { background-image: url(../img/header-bilder/flexOwner_25_1200.webp) }
	.bg_anlagenautomatisierung { background-image: url(../img/header-bilder/flexOwner_IndustrieRef_1200.webp) }
	.bg_smartfactory { background-image: url(../img/header-bilder/flexOwner_24_1200.webp) }
	.bg_bussysteme { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Netzwerk_1200.webp) }
	.bg_visualisierung { background-image: url(../img/header-bilder/flexOwner_4_1200.webp) }
	.bg_robotik { background-image: url(../img/header-bilder/flexOwner_19_1200.webp) }
	.bg_messsysteme { background-image: url(../img/header-bilder/flexOwner_5_1200.webp) }
	.bg_datenerfassung { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Interoperabilitaet_1200.webp) }
	.bg_prozessoptimierung { background-image: url(../img/header-bilder/flexOwner_26_1200.webp) }
	.bg_mechanischekonstruktion { background-image: url(../img/header-bilder/flexOwner_27_1200.webp) }
	.bg_automatisierungstechnik { background-image: url(../img/header-bilder/flexOwner_IndustrieRef_1200.webp) }
	.bg_anlagenmodernisierung { background-image: url(../img/header-bilder/flexOwner_11_1200.webp) }
	.bg_audiovideo { background-image: url(../img/header-bilder/flexOwner_10_1200.webp) }
	.bg_sicherheit { background-image: url(../img/header-bilder/flexOwner_20_1200.webp) }
	.bg_bueroinstallation { background-image: url(../img/header-bilder/flexOwner_17_1200.webp) }
	.bg_industrieinstallation { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Industrieinstallation_1200.webp) }
	.bg_montagetatigkeiten {background-image: url(../img/header-bilder/flexOwner_Industrial_Effizienz_1200.webp)}
	.bg_inbetriebnahmen {background-image: url(../img/header-bilder/flexOwner_23_1200.webp)}
	.bg_anwendungen {background-image: url(../img/header-bilder/flexOwner_Gebaeude_Netzwerk_Server_1200.webp)}
	.bg_itsecurity {background-image: url(../img/header-bilder/flexOwner_Gebaeude_Netzwerk_Sicherheit_1200.webp)}
	.bg_servicierung {background-image: url(../img/header-bilder/flexOwner_14_1200.webp)}
	.bg_projektplanung {background-image: url(../img/header-bilder/flexOwner_Gebaeude_Projektplanung_1200.webp)}
	.bg_beleuchtung { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Beleuchtung_1200.webp) }
	.bg_beschattung { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Beschattungssysteme_1200.webp) }
	.bg_HeizeLuften { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Heizen_Smart_Metering_1200.webp) }
	.bg_smartenergy { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Smart_Energy_1200.webp) }
	.bg_multimedia { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Multimedia_1200.webp) }
	.bg_outdoor { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Outdoor_1200.webp) }
	.bg_flexbutler { background-image: url(../img/header-bilder/flexOwner_Gebaeude_flexApp_flexButler_1200.webp) }
	.bg_visualisierungen { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Visualisierung_1200.webp) }
	.bg_softwareentwicklung { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Programming_Code_1200.webp) }
	.bg_alarmier { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Alarm_Sicherheit_1200.webp) }
	.bg_video { background-image: url(../img/header-bilder/flexOwner_Allgemein_Videoueberwachung_1200.webp) }
	.bg_hausinstallation { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Hausinstallation_1200.webp) }
	.bg_buroinstallation { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Bueroinstallation_1200.webp) }
	.bg_netzwerktechnik { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Netzwerk_Patchkabeln_1200.webp) }
	.bg_mess { background-image: url(../img/header-bilder/flexOwner_Gebaeude_MSR_1200.webp) }
}

@media screen and (max-width: 800px) {
	.bg_slide1 { background-image: url(../img/header-bilder/flexOwner_12_800.webp) }
	.bg_slide2 { background-image: url(../img/header-bilder/flexOwner_16_800.webp) }
	.bg_slide3 { background-image: url(../img/header-bilder/flexOwner_25_800.webp) }
	.bg_anlagenautomatisierung { background-image: url(../img/header-bilder/flexOwner_IndustrieRef_800.webp) }
	.bg_smartfactory { background-image: url(../img/header-bilder/flexOwner_24_800.webp) }
	.bg_bussysteme { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Netzwerk_800.webp) }
	.bg_visualisierung { background-image: url(../img/header-bilder/flexOwner_4_800.webp) }
	.bg_robotik { background-image: url(../img/header-bilder/flexOwner_19_800.webp) }
	.bg_messsysteme { background-image: url(../img/header-bilder/flexOwner_5_800.webp) }
	.bg_datenerfassung { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Interoperabilitaet_800.webp) }
	.bg_prozessoptimierung { background-image: url(../img/header-bilder/flexOwner_26_800.webp) }
	.bg_mechanischekonstruktion { background-image: url(../img/header-bilder/flexOwner_27_800.webp) }
	.bg_automatisierungstechnik { background-image: url(../img/header-bilder/flexOwner_IndustrieRef_800.webp) }
	.bg_anlagenmodernisierung { background-image: url(../img/header-bilder/flexOwner_11_800.webp) }
	.bg_audiovideo { background-image: url(../img/header-bilder/flexOwner_10_800.webp) }
	.bg_sicherheit { background-image: url(../img/header-bilder/flexOwner_20_800.webp) }
	.bg_bueroinstallation { background-image: url(../img/header-bilder/flexOwner_17_800.webp) }
	.bg_industrieinstallation { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Industrieinstallation_800.webp) }
	.bg_montagetatigkeiten {background-image: url(../img/header-bilder/flexOwner_Industrial_Effizienz_800.webp)}
	.bg_inbetriebnahmen {background-image: url(../img/header-bilder/flexOwner_23_800.webp)}
	.bg_anwendungen {background-image: url(../img/header-bilder/flexOwner_Gebaeude_Netzwerk_Server_800.webp)}
	.bg_itsecurity {background-image: url(../img/header-bilder/flexOwner_Gebaeude_Netzwerk_Sicherheit_800.webp)}
	.bg_servicierung {background-image: url(../img/header-bilder/flexOwner_14_800.webp)}
	.bg_projektplanung {background-image: url(../img/header-bilder/flexOwner_Gebaeude_Projektplanung_800.webp)}
	.bg_beleuchtung { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Beleuchtung_800.webp) }
	.bg_beschattung { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Beschattungssysteme_800.webp) }
	.bg_HeizeLuften { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Heizen_Smart_Metering_800.webp) }
	.bg_smartenergy { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Smart_Energy_800.webp) }
	.bg_multimedia { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Multimedia_800.webp) }
	.bg_outdoor { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Outdoor_800.webp) }
	.bg_flexbutler { background-image: url(../img/header-bilder/flexOwner_Gebaeude_flexApp_flexButler_800.webp) }
	.bg_visualisierungen { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Visualisierung_800.webp) }
	.bg_softwareentwicklung { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Programming_Code_800.webp) }
	.bg_alarmier { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Alarm_Sicherheit_800.webp) }
	.bg_video { background-image: url(../img/header-bilder/flexOwner_Allgemein_Videoueberwachung_800.webp) }
	.bg_hausinstallation { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Hausinstallation_800.webp) }
	.bg_buroinstallation { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Bueroinstallation_800.webp) }
	.bg_netzwerktechnik { background-image: url(../img/header-bilder/flexOwner_Gebaeude_Netzwerk_Patchkabeln_800.webp) }
	.bg_mess { background-image: url(../img/header-bilder/flexOwner_Gebaeude_MSR_800.webp) }
	body > header > nav, 
	body > header > .sub > div {
		display: none !important;
	}
	body > header > .burger,
	body > main > .mobile {
		display: block;
	}

	body > header > div.right {
		display: none;
	}
}

@media screen and (max-width: 500px) , (max-height: 500px)  {
	html, body {
    	height: 100vh;
    	width: 100vw;
    	font-size: 3mm;
	}
	body > footer{
		justify-self: normal;
    	width: auto;
    	grid-gap: 1rem;
	} 
	main > section > div.single{
    	justify-items: center;
    	grid-template-columns: 1fr;
    	margin: 0vh 0vw 10vh 0vw;
	}
	main > section > article.single{
		justify-items: center;
    	grid-template-columns: 1fr;
    	padding: 5vh 0vw 10vh 0vw;
	}
	/*main > section > article {
    	min-height: auto;
	}*/
	main > section > article > div{
		margin-top: 3vh;
		padding: 0;
	}
	main > section > article.single > div{
		width: 90vw;
		padding: 0;
	}
	main > section#kontakt > div.single > img{
		max-width: 90vw;
    	max-height: 90vh;
	}
	main > section#geschichte > div.single > img{
		max-width: 90vw;
    	max-height: 90vh;
	}
	main > section > div.single > img, main > section > article.single > img {
    	max-width: 90vw;
    	max-height: 90vh;
	}
	main > section > article img.icon {
    	display: none;
	}
	main > section#kontakt > article {
 	   background-position: 20%;
	}
	main > section > article.single > div.referenz{
		width: 100%;
		margin-bottom: 0; 
	}
	div.glide li > div , main > section > article:not(.single) > div {
    	margin-top: 5vh;
    	padding: 1vh 1vw 1vw 2vh;
    	margin-bottom: 10vh;
    	width: auto;
	}
	div.glide h2{
		font-size: 4mm;
	}
	address {
   		grid-template-columns: 4rem 10rem;
	}
	header > a > svg,
	header .right > a > img {
		width: 40vw;
	}
	.impressum {
		grid-template-columns: 1fr;
	}
	.impressum > div{
		max-width: 100vw;
	}
	.partner {
		background-color: #f9e5f1;
		padding: 10px;
		grid-column: 1/2;
	}
	/*::-webkit-scrollbar{
		width: 0;
	}*/
}
@media screen and (max-height: 540px)  {
	body {
		grid-template-rows: 200px 100vh;
	}
	body > footer{
		bottom: -200px;
	}
	ul > li > video {
		min-width: 110vw;
	}
	main > .mobile{
    	height: auto;
	}
	
}

/*
	Breadcrumbs redesign - sj 24.02.2026
*/

main > section > div.breadcrumbs {
	position: absolute;
	top: 0;
	line-height: 2rem;
	z-index: 2;
	color: white;
	padding: 0.4rem 1rem;
	margin-left: 5vw;
	border-radius: 0.5rem;
	background: #031c25cc;
}

.breadcrumbs > a {
	padding: 0.3rem;
	text-decoration: underline;
}

.breadcrumbs > a:hover{
	color: #e84393;
}


main > section#schulungen {
	overflow-y: auto;
	background-color: #10243b;
	background-image: url(../img/header-bilder/flexOwner_blaue_2_13_1600.webp);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

body.training-page-active {
	grid-template-rows: 200px minmax(0, 1fr) auto;
}

body.training-page-active > main {
	grid-area: 2 / 1 / 3 / -1;
}

body.training-page-active > footer {
	position: static;
	grid-area: 3 / 1 / 4 / -1;
	width: 100%;
	background: #10243b;
}

main > section#schulungen > article.schulungen-page {
	min-height: 100%;
	padding: 4.5rem 5vw 9rem;
	background: linear-gradient(90deg, #031c254d, #213a7e38);
}

main > section#schulungen > article.schulungen-page > .schulungen-content {
	display: block;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0;
	color: #10243b;
	background: transparent;
}

#schulungen-app h1,
#schulungen-app h2,
#schulungen-app p {
	text-transform: none;
}

#schulungen-app h1 {
	color: inherit;
	font-size: clamp(2.2rem, 5vw, 5rem);
	line-height: 1.02;
	letter-spacing: -0.04em;
}

#schulungen-app h2 {
	color: inherit;
}

.schulungen-loading,
.schulungen-error {
	padding: 3rem;
	background: white;
	box-shadow: 0 20px 50px #10243b1a;
}

.training-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.8fr);
	gap: 1rem 5vw;
	align-items: end;
	margin-bottom: 3rem;
	padding: clamp(1.5rem, 4vw, 3rem);
	color: white;
	background: #031c25d9;
	box-shadow: 0 18px 45px #03121c66;
}

.training-intro .training-kicker,
.training-intro h1 {
	grid-column: 1;
}

.training-intro > p {
	grid-column: 2;
	grid-row: 1 / span 2;
	min-width: 0;
	width: 100%;
	font-size: 1.15rem;
	line-height: 1.7;
	color: #e4edf2;
	overflow-wrap: break-word;
}

.training-kicker {
	display: block;
	margin-bottom: 0.8rem;
	color: #c10076;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.training-facts {
	grid-column: 1 / -1;
	display: flex;
	gap: 0.7rem;
	margin-top: 1.4rem;
	flex-wrap: wrap;
}

.training-facts span {
	padding: 0.55rem 1rem;
	border: 1px solid #ffffff66;
	border-radius: 2rem;
	color: white;
	background: #ffffff18;
	font-size: 0.85rem;
	font-weight: 600;
}

.training-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.training-card {
	display: grid;
	grid-template-columns: minmax(12rem, 0.85fr) minmax(0, 1.15fr);
	min-height: 23rem;
	overflow: hidden;
	color: white;
	background: #031c25e8;
	box-shadow: 0 18px 45px #03121c66;
	transition: transform 180ms ease, box-shadow 180ms ease;
}

.training-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 24px 60px #17334d2b;
}

.training-card-image {
	display: block;
	min-height: 100%;
	background: #10243b;
}

.training-card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.training-card-body {
	display: flex;
	flex-direction: column;
	padding: 2rem;
	background: #031c25e8;
}

.training-card-meta,
.workshop-meta {
	color: #c10076;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.training-card h2 {
	margin: 0.7rem 0 1rem;
	font-size: clamp(1.25rem, 2vw, 1.8rem);
	line-height: 1.15;
}

.training-card h2 a:hover,
.training-card h2 a:focus-visible {
	color: #c10076;
}

.training-card p {
	line-height: 1.55;
	color: #d8e5ec;
}

.training-card .training-card-subtitle {
	margin-bottom: 0.8rem;
	color: white;
	font-weight: 700;
}

.training-card-footer {
	display: flex;
	justify-content: space-between;
	align-items: end;
	gap: 1rem;
	margin-top: auto;
	padding-top: 1.5rem;
}

.training-card-footer span {
	display: grid;
	gap: 0.3rem;
	font-size: 0.85rem;
	color: #e5edf2;
}

.training-card-netzwerkplanung .training-card-image img,
.course-netzwerkplanung > img {
	object-position: right center;
}

.training-card-ot-crosstech .training-card-image img,
.course-header.course-ot-crosstech > img {
	object-fit: contain;
	background: #123c64;
}

.training-arrow {
	display: grid;
	place-items: center;
	width: 2.8rem;
	height: 2.8rem;
	border-radius: 50%;
	color: white;
	background: #1a467b;
	font-size: 1.5rem;
	transition: background 150ms ease, transform 150ms ease;
}

.training-arrow:hover,
.training-arrow:focus-visible {
	background: #c10076;
	transform: translateX(3px);
}

.training-back {
	display: inline-block;
	margin-bottom: 1.5rem;
	color: white;
	font-weight: 700;
	text-shadow: 0 1px 2px #000;
}

.course-header {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(22rem, 0.85fr);
	min-height: 30rem;
	min-width: 0;
	overflow: hidden;
	color: white;
	background: #10243b;
	box-shadow: 0 24px 65px #10243b33;
}

.course-header > div {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2rem, 5vw, 5rem);
}

.course-header h1 {
	margin-bottom: 1.5rem;
	overflow-wrap: anywhere;
}

.course-header p {
	max-width: 50rem;
	font-size: 1.1rem;
	line-height: 1.7;
	color: #dce8f0;
}

.course-header .course-subtitle {
	margin-bottom: 0.8rem;
	color: white;
	font-size: 1.15rem;
	font-weight: 700;
}

.course-header > img {
	width: 100%;
	height: 100%;
	min-width: 0;
	object-fit: cover;
}

.training-actions {
	display: flex;
	gap: 0.8rem;
	margin-top: 1.5rem;
	flex-wrap: wrap;
}

.training-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.9rem;
	padding: 0.75rem 1.2rem;
	border: 1px solid #c10076;
	border-radius: 0.2rem;
	color: white;
	background: #c10076;
	font-weight: 700;
	text-align: center;
	transition: background 150ms ease, border-color 150ms ease;
}

.training-button:hover,
.training-button:focus-visible {
	border-color: #e84393;
	background: #e84393;
}

.training-button.secondary {
	border-color: #ffffff66;
	background: transparent;
}

.training-button.secondary:hover,
.training-button.secondary:focus-visible {
	border-color: white;
	background: #ffffff18;
}

.course-terms {
	padding: 4rem 0 1rem;
}

#schulungen-app .terms-heading h2 {
	margin-bottom: 1.5rem;
	font-size: clamp(1.7rem, 3vw, 2.8rem);
	color: white;
	text-shadow: 0 1px 2px #000;
}

.term-grid {
	display: grid;
	gap: 0.75rem;
}

.term-card {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr) minmax(9rem, auto) auto;
	gap: 1.5rem;
	align-items: center;
	padding: 1.2rem;
	color: white;
	background: #031c25e8;
	box-shadow: 0 8px 28px #03121c52;
}

.term-number {
	color: #c10076;
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
}

.term-date,
.term-price {
	display: grid;
	gap: 0.35rem;
}

.term-date > span,
.term-price > b {
	font-size: 1.1rem;
	font-weight: 700;
}

.term-date small,
.term-price small {
	color: #bfd0db;
}

.workshop-option {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 2rem;
	align-items: center;
	margin-top: 3rem;
	padding: clamp(1.5rem, 4vw, 3.5rem);
	color: white;
	background: linear-gradient(120deg, #1a467b, #243d71);
}

.workshop-option h2 {
	margin-bottom: 0.7rem;
	font-size: clamp(1.5rem, 3vw, 2.5rem);
}

.workshop-option p {
	max-width: 55rem;
	line-height: 1.6;
	color: #e3edf4;
}

.workshop-option .training-actions {
	justify-content: flex-end;
}

@media screen and (max-width: 1100px) {
	.training-grid {
		grid-template-columns: 1fr;
	}

	.training-card {
		grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.2fr);
	}
}

@media screen and (max-width: 800px) {
	body.training-page-active {
		grid-template-rows: 200px minmax(0, 1fr) auto;
	}

	main > section#schulungen > article.schulungen-page {
		padding: 4rem 1rem 8rem;
	}

	.training-intro,
	.course-header,
	.workshop-option {
		width: 100%;
		max-width: 100%;
		grid-template-columns: minmax(0, 1fr);
	}

	.training-intro .training-kicker,
	.training-intro h1,
	.training-intro > p,
	.training-facts {
		grid-column: 1;
		grid-row: auto;
	}

	.training-intro > p {
		width: calc(100vw - 5rem);
		max-width: calc(100vw - 5rem);
		overflow-wrap: anywhere;
	}

	.course-header > img {
		max-height: 22rem;
	}

	.course-header > div {
		width: calc(100vw - 2rem);
		max-width: calc(100vw - 2rem);
		min-width: 0;
		overflow: hidden;
	}

	.course-header h1,
	.course-header p {
		width: calc(100vw - 5rem);
		max-width: calc(100vw - 5rem);
		overflow-wrap: anywhere;
	}

	.course-header > img {
		width: calc(100vw - 2rem);
	}

	.term-card {
		grid-template-columns: 3rem 1fr auto;
	}

	.term-card .training-button {
		grid-column: 2 / -1;
	}

	.workshop-option .training-actions {
		justify-content: flex-start;
	}
}

@media screen and (max-width: 560px) {
	body.training-page-active > footer {
		display: none;
	}

	body.training-page-active {
		grid-template-rows: 200px minmax(0, 1fr);
	}

	.training-card {
		grid-template-columns: 1fr;
	}

	.training-card-image {
		min-height: 12rem;
	}

	.training-card-body,
	.course-header > div {
		padding: 1.5rem;
	}

	.term-card {
		grid-template-columns: 2.5rem 1fr;
		gap: 1rem;
	}

	.term-price {
		grid-column: 2;
	}

	.term-card .training-button {
		grid-column: 1 / -1;
	}

	.training-actions .training-button {
		width: 100%;
	}
}