@import url('https://fonts.googleapis.com/css2?family=Cantarell&display=swap');

#base  {/*Alle Container umfassender Container*/
	position: absolute;
	left: 0;
	right: 0;
	top: 78px;
	background-color: #ccc;;
}

body {
  margin: 0;
}

/* Gestalte die topnav-Leiste groß */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 5px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a:active {
  background-color: #ddd;
  color: #cc0001;
}


/* Gestalte die topnav-Leiste klein */
.topnav1 a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 5px 16px;
  text-decoration: none;
}

/* Change color on hover */
.topnav1 a:hover {
  background-color: #ddd;
  color: black;
}

.topnav1 a:active {
  background-color: #ddd;
  color: #cc0001;
}


/*Linknavigation*/
.linknav a:hover {
  background-color: #ddd;
  color: black;
}

/* ============Tooltip Buch============*/
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  background-color: #f9f9f9;
  padding: 5px 0;
  border-radius: 6px;
  width: 150px;
  bottom: 150%;
  left: 40%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
  font-family: Cantarell;
  text-align: center;
  font-size: 18px;
  color: #5b5b5b;
		
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}
/*Tooltip Pfeil*/
.tooltip .tooltiptext::after {
  content: " ";
  position: absolute;
  top: 100%; /* At the bottom of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: gray transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
#Rahmen {
		height: 30px;
		width: 170px;
}
/* ================Ende Tooltip Buch============*/


#img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
	/*margin-left: auto;
	margin-right: auto;*/
	/* position: relative; */
	/*object-fit: contain; /*fill, cover, contain, none, scale-down */
}

.imgcont {
	width: 100%;
	height: 100%;
	margin-top: none;
	margin: auto;
	/* object-fit: fill; /* fill, cover, contain, none, scale-down */
	background-size: initial; /* auto|length|cover|contain|initial|inherit; /Resize the background image to cover the entire container */
}

.imgcont1 { /*Bildcontainer Doppelbild*/
	width: 100%;
	height: 400px;
	margin-top: none;
	margin: auto;
	object-fit: fill; /* fill, cover, contain, none, scale-down */
	background-size: cover; /* auto|length|cover|contain|initial|inherit; /Resize the background image to cover the entire container */
	margin-top: -4px;
}

/*
#flagge_e {width: 35px;
		height: 30px;	
}

#flagge_d {width: 35px;
		height: 30px;	
}
*/

#img0 {
    background-image: url("bilder/slidera.jpg");
}

#img1 {
	background-image: url("bilder/2tskorb.jpg");
}

#img2 {
	background-image: url("cloudy park.jpg");
}

#img3 {
	background-image: url("1bluefeet.jpg");
}


/*Textgestaltung*/
.mytext1 { /*Blaue Schrift, kursiv, groß*/
		font-family: Arial;
		font-size: 20px;
		color: blue;
}

.mytext3 { /*Schriftart für in house*/
		font-family: arial;
		font-size: 15px;
		color: blue;
}

.mytext4 { /*Schriftart Mittelcontainer, Beckert-Ingenieure*/
		font-family: Arial;
		font-size: 25px;
		color: #b20000;
		text-align: center;
}

.mytext5 { /*überschriften zweite Containerreihe*/
		font-family: Cantarell;
		font-size: 25px;
		color: black;
		/*color: #b20000;*/
		text-align: center;
}

.mytext6 { /*Text generell*/
		font-family: Cantarell;
		font-size: 20px;
		color: #5b5b5b;
		text-align: center;
}

.mytext6a { /*Text Aufzählung Leistungen*/
		font-family: Cantarell;
		font-size: 18px;
		color: #5b5b5b;
		text-align: left;
}

ul {
		list-style-type: disc;
}

.mytext8 {/*Fragen rot*/
		font-family: Cantarell;
		font-size: 18px;
		color: red;
		/*color: #b20000;*/
		text-align: center;
}

.mytext10 { /*Text zweite containerreihe*/
		font-family: Cantarell;
		font-size: 15px;
		color: #5b5b5b;
		text-align: center;
}
.intercont {
    width: 100%;
    box-sizing: border-box;
    margin: 0;F
    padding: 0;
    display: flex;              /* statt inline-flex */
    justify-content: center;    /* horizontal zentrieren */
    /* background-color: red;   <- Debug-Farbe, später entfernen */
}

.cont {/*width: 100%;
  padding: none;*/
  display: inline-flex;
}

/*============================================================
Container für die Navigationsleiste Klein
==============================================================*/
/*
#cont1a { /*Äußerer-Container für Logo und Navigationsleiste Klein
	position: sticky;
	left: 0;
	top: 0;
	background-color: black;
}

#cont1b { /*Container mit dem Logo und der Navigationsleiste Klein
	float:left;
	width:20%
	background-color: black;
}*/

#cont1c { /*Container mit dem Logo Klein*/
	display: flex;
	width:100%;
	height: 90px;
	background-color: black;
	padding-left: 0;
}

#cont1c > img {
    height: 90px;
    width: 227px;
    flex-shrink: 0;
}
.stick {
	position: fixed;
	top: 0;
} 

#box_klein {
	padding: 30px;
}

#box_groß {
	padding:60px;
	padding-left: 30px;
}
/*
#cont1d { /*Container mit der Navigationsleiste Klein
display: inline;
	height: 39px;
	background-color: red;
	padding-left: 300px;
}*/



/*==============================================================
Container für die Navigationsleiste Groß
================================================================*/
/*
#cont1e { /*Groß-Container für Logo und Navigationsleiste Groß
	position: absolute;
	left: 0;
	top: 0;
	background-color: black;
}

#cont1f { /*Container mit dem Logo und der Navigationsleiste Groß
	left: 0;
	top: 0;
	background-color: black;
}*/

#cont1g { /*Container mit dem Logo Groß*/
	display: inline-flex;
	width: 100%;
	height: auto;
	background-color: black;
	padding-left: 0px;
}
/*
#cont1h { /*Container mit der Navigationsleiste Groß
	height: 79px;
	background-color: red;
	padding-left: 400px;
}*/

/*
#cont2 {/*Bildcontainer
	width: 100%;
	height: 400px;
	background-color: red;
	background-size: cover; /* Resize the background image to cover the entire container
}*/

#cont3 {/*Hauptüberschrift*/
	width: 100%;
	height: auto;
	background-color: #bfc8ff;
	padding-top: 30px;
	padding-bottom: 20px;
	display: block;
	text-align: center;
}

#cont4 { /*Bücher*/
	width: 33.33%;
	height: auto;
	text-align: center;
	background-color: #f2f2f2;
	padding: 10px;
	display: block;
	border-bottom-style: solid;
	border-color: blue;
	border-width: 2px;
}

#cont5 { /*Text*/
	width: 33.33%;
	height: auto;
	text-align: justify;
	background-color: #f9f9f9;
	padding: 10px;
	display: block;
	border-bottom-style: solid;
	border-color: blue;
	border-width: 2px;
}

#cont6 { /*Seminare und Workshops*/
	width: 33.33%;
	height: auto;
	text-align: center;
	background-color: #f2f2f2;
	padding: 10px;
	display: block;
	border-bottom-style: solid;
	border-color: blue;
	border-width: 2px;
}

#cont7 {/*Innovationen*/
	width: 33.33%;
	height: auto;
	background-color: #f9f9f9;
	padding: 10px;
	display: block;
	text-align: center;
}


#cont8 {/*Management*/
	width: 33.33%;
	height: auto;
	background-color: #f2f2f2;
	padding: 10px;
	display: block;
	text-align: center;
}

#cont9 {/*Erfolg*/
	width: 33.33%;
	height: auto;
	background-color: #f9f9f9;
	padding: 10px;
	display: block;
	text-align: center;
}

/*==========================================*/
#cont10 { /*Wie ich Ihnen helfen kann ================*/
	width: 50%;
	height: auto;
	background-color: #d6d6d6;
	padding: 10px;
	display: block;
	text-align: center;
}

#box1 {
	margin-left: 50%;
} 


#cont11 { /*Warum gerade ich?=====================*/
	width: 50%;
	height: auto;
	background-color: #d6d6d6;
	padding: 30px;
	display: block;
	text-align: center;
}

	/*=====================================
	Containerblock: Dienstleistungen
	=======================================*/
	
#cont11A { /*Überschrift Dienstleistungen=====================*/
	width: 100%;
	box-sizing: border-box;
	height: auto;
	background-color: #bfc8ff;
	padding-top: 10px;
	padding-bottom: 10px;
	padding-left: 0;
	display: block;
	text-align: center;
}

.mytext11 { /*Text Überschrift Dienstleistungen*/
		font-family: Cantarell; 
		font-size: 25px;
		color: #470300;
		font-weight: bold;
}

#cont12 {/*Produktentwicklung*/
	width: 25%;
	height: auto;
	background-color: #f2f2f2;
	padding: 10px;
	display: block;
	text-align: center;
}

#cont13 {/*Projektanagement*/
	width: 25%;
	height: auto;
	background-color: #f9f9f9;
	padding: 10px;
	display: block;
	text-align: center;
}

#cont14 {/*Unternehmensberatung*/
	width: 25%;
	height: auto;
	background-color: #f2f2f2;
	padding: 10px;
	display: block;
	text-align: center;
}

#cont15 {/*Organisationsaufbau*/
	width: 25%;
	height: auto;
	background-color: #f9f9f9;
	padding: 10px;
	display: block;
	text-align: center;
}

/*============================================
						Footer mit Adresse
============================================*/
#cont16 {/*Adresse*/
	/*box-sizing: border-box;*/
	/*border: 5px solid #cc0001;*/
	width: 100%;
	height: auto;
	background-color: #515151;
	padding: 10px;
	display: block; 
}

.box1 {
	width: 300px;
	border: 0px solid green;
	padding: 10px;
	margin-left: 150px;
	text-align: left;
} 


#cont16a {/*Adresse*/
	/*box-sizing: border-box;*/
	/*border: 5px solid #cc0001;*/
	width: 100%;
	height: auto;
	background-color: #515151;
	padding: 10px;
	display: block; 
}

.adresse1 { /*Adressname*/
	font: 25px "Cantarell";
	color: #d3d3d3;
	text-transform: uppercase;
}

.adresse2 {/*Straße, Ort*/
	font: 15px "Cantarell";
	color: #d3d3d3;
	text-transform: uppercase;
}

.adresse3 {/*Mail-Adresse*/
	font: 15px "Cantarell";
	color: white;
}

.adresse4 {/*Impressum*/
	font: 18px "Cantarell";
	color: red;
	text-decoration: none;
}
/*==========================================================================
		Footer mit Copyright
===========================================================================*/
#cont17 {/*Footer*/
	width: 100%;
	height: auto;
	background-color: black;
	padding: 10px;
	display: block;
}


/*=========================================================================================================
								Gestaltung Seite Produktentwicklungen
============================================================================================================*/

.intercont1 { /*definiert die 3 Container in dem die Textcontainer inline angeordnet sind*/
	width: 100%;
	height: auto;
	background-color: red;
	display: inline-flex;
	margin-top: 1px;
}

.cont18 {/*Textcontainer: Erfundene + Entwickelte Produkte*/
	width: 100%;
	height: auto;
	background-color: #bfc8ff;
	padding: 0px;
}

.textblock	{
	margin-left: 210px;
	margin-top: 0px;
	margin-bottom: 0px;
}

.mytext12 { /*Text: Erfundene + Entwickelte Produkte*/
		font-family: Arial; 
		font-size: 25px;
		color: #470300;
		text-align: left;
		margin-bottom: 0;  
}

.mytext2 { /*Schriftart für Links*/
		font-family: Arial;
		color: #e20000;
		font-size: 18px;
		text-align: left;
		text-decoration: none;
		font-weight: normal;  /*geändert*/
}

.mytext13 { /*Textblöcke*/
		font-family: Cantarell;
		font-size: 18px;
		color: #5b5b5b;
		line-height: 1.3;
		text-align: center;
}

/*Bildreihe mit Bildern 1-3*/ 
 #cont19 {/*Bild 1*/
	width: 33.3%;
	height: 220px;
	border: 2px solid #b20000;
	border-radius: 8px;
}

#bildtsk {
	background-image: url("bilder/2tskorb.png");
	display: block;
	background-size: cover;
	width: 100%;
	height: 220px;
}

#bildtsk:hover {opacity: 0.85
}

#cont20 {/*Bild 2*/
	width: 33.3%;
	height: 220px;
	border: 2px solid #b20000;
	border-radius: 8px;
}

#bildzaun {
	background-image: url("bilder/2zaun_1.jpg");
	display: block;
	background-size: cover;
	width: 100%;
	height: 220px;
}
#bildzaun:hover {opacity: 0.85
}

#cont21 {/*Bild 3*/
	width: 33.3%;
	height: 220px;
	border: 2px solid #b20000;
	border-radius: 8px;
}

#bildhaus {
	background-image: url("bilder/2augsburg.png");
	display: block;
	background-size: cover;
	width: 100%;
	height: 220px;
}

#bildhaus:hover {opacity: 0.85
}

/*==============================================================*/
/*Reihe mit Textfeldern 1-3*/
#cont22 {/*Textfeld 1*/
	width: 33.3%;
	height: 250px;
	background-color: #f2f2f2; /*grau dunkel*/
	padding: 10px;
}
#cont23 {/*Textfeld2*/
	width: 33.3%;
	height: 250px;
	background-color: #f9f9f9; /*grau hell*/
	padding: 10px;
}

#cont24 {/*Textfeld3*/
	width: 33.3%;
	height: 250px;
	background-color: #f2f2f2; /*grau dunkel*/
	padding: 10px;
}

/*====================================================================*/
/*Bildreihe mit Bildern 4-6*/
#cont25 {/*Bild 4*/
	width: 33.3%;
	height: 220px;
	border: 2px solid #b20000;
	border-radius: 8px;
}

#bildlsw {
	background-image: url("bilder/2lsw.png");
	display: block;
	background-size: cover;
	width: 100%;
	height: 220px;
}

#bildlsw:hover {opacity: 0.85
}

#cont26 {/*Bild 5*/
	width: 33.3%;
	height: 220px;
	border: 2px solid #b20000;
	border-radius: 8px;
}
#bildgwk {
	background-image: url("bilder/2gwk.jpg");
	display: block;
	background-size: cover;
	width: 100%;
	height: 220px;
}

#bildgwk:hover {opacity: 0.85
}

#cont27 {/*Bild 6*/
	width: 33.3%;
	height: 220px;
	border: 2px solid #b20000;
	border-radius: 8px;
	background-image: url("bilder/2gwk.jpg");
	background-size: cover; /* Resize the background image to cover the entire container */
	background-color: green;
}
#bildexsk {
	background-image: url("bilder/2exsk.jpg");
	display: block;
	background-size: cover;
	width: 100%;
	height: 220px;
}

#bildexsk:hover {opacity: 0.85
}


/*=============================================================*/
/*Reihe mit Textfeldern 4-6*/
#cont28 {/*Textfeld 4*/
	width: 33.3%;
	height: 250px;
	background-color: #f9f9f9; /*grau hell*/
	padding: 10px;
}
#cont29 {/*Textfeld 5*/
	width: 33.3%;
	height: 250px;
	background-color: #f2f2f2; /*grau dunkel*/
	padding: 10px;
}

#cont30 {/*Textfeld 6*/
	width: 33.3%;
	height: 250px;
	background-color: #f9f9f9; /*grau hell*/
	padding: 10px;
}

/*=================================================================================================
Gestaltung Webseite Bilderlink Galerie
===================================================================================================*/

.intercont2 { /*definiert den Container in dem die Bilderlinks inline angeordnet sind*/
	width: 100%;
	height: auto;
	background-color: #ccc;
	display: inline-flex;
	margin-top: 1px;
}

.galerie { /*definiert den Container des Einzelbilds mit grauem Padding*/
  margin-top: 3px;
  margin-bottom: 0px;
  border: 3px solid #ccc;
  float: left;
  width: 200px;
  height:133px;
  background-color: #ccc;
}

.galerie:hover { /*roter Rahmen bei Hoover*/
  border: 3px solid #b20000;
}
.galerie img { /*Bildgröße des Thumnailbilds im roten Rahmen*/
  width: 100%;
  height: auto;
}

/*
.leerfeld { /*definiert den Container mit grauem Padding bei fehlemdem Einzelbild*/ /*
  margin-top: 3px;
  margin-bottom: 0px;
  border: 3px solid #ccc;
  float: left;
  width: 200px;
  height:133px;
  background-color: #515151;
}

.leerfeld img { /*Bildgröße des Thumnailbilds im roten Rahmen*/ /*
  width: 100%;
  height: auto;
}*/

/*=========================================================================================================
								Gestaltung Seite Erfahrungen
============================================================================================================*/

/* Textblock Innovationen*/
.textblock1{
	margin-left: 170px;
	margin-top: 0px;
	padding-bottom: 20px;
}
.mytext14 { /*Text: sind die Brücke*/
		font-family: Arial Narrow;
		font-size: 15px;
		font-style: italic;
		font-weight: bold;
		color: #53721c;
		text-align: center;
		margin-bottom: 100px;
}
.mytext15 { /*Text: Innovationen*/
		font-family: Arial; 
		font-size: 25px;
		color: #0008a8;
		text-align: left;
		margin-bottom: 0;  
}

.intercont3 { /*definiert den Container #1 Erfahrungen*/
	width: 100%;
	height: auto;
	background-color: gray;
	display: inline-flex;
	margin-top: -14px;
}

.cont31 {/*Containern mit der Nr.*/
	width: 10%;
	height: auto;
	background-color: #f9f9f9; /*grau hell*/
	padding-left: 30px;
	padding-top: 20px;
	}
.cont32 {/*Textfeld 6*/
	width: 90%;
	height: auto;
	background-color: #f9f9f9; /*grau hell*/
	padding-left: 8px;
}

.numberbox {
	width: 60px;
	height: 60px;
	background-color: #e8e8e8;
	border-top: 5px solid #b20000;  
	padding-top: 5px;
	font-family: Arial;
	font-size: 20px;
	color: #b20000;
	text-align: center;	
}

/*
#test { 
    background-color:lightblue;
	margin-top: none; 
}
*/

.textblock2{
	margin-left:8px;
	margin-top: 0px;
	margin-bottom: 0px;
}
	
/*==========================================================================
				Datenschutzerklärung
============================================================================*/

.intercont4 { /*definiert den großen Container*/
	width: 100%;
	height: auto;
	background-color: gray;
	display: inline-flex;
	margin-top: 0px;
}
#cont33 {/*definiert den linken container*/
	width: 65%;
	height: auto;
	background-color: white; /*grau hell*/
	padding-top:50px;
	padding-left: 40px;
	padding-right: 20px;
}
#cont34 {/*Definiert den rechten Container*/
	width: 35%;
	height: auto;
	background-color: white; /*grau hell*/
	padding-top: 50px;
	padding-left: 40px;
	padding-right: 20px;
}
.mytext9 { /*überschriften zweite Containerreihe*/
		font-family: Arial narrow;
		font-size: 25px;
		color: #b20000;
		text-align: left;
}
.adresse5 {/*Straße, Ort*/
	font: 15px "Cantarell";
	color: #303030;
	text-transform: uppercase;
	font-weight: bold;
}
.adresse6 {/*Straße, Ort*/
	font: 18px "Cantarell";
	color: #303030;
	text-transform: uppercase;
}

/*==========================================================================
				Kontakt
============================================================================*/
#cont35 {/*Definiert den Karten - Container*/
	width: 100%;
	height: auto;
	background-color: white; /*grau hell*/
	padding-top: 40px;
	padding-left: 200px;
	padding-bottom: 40px;
}

#cont36 {/*definiert den Container Kontakt*/
	width: 100%;
	height: auto;
	background-color: white; /*grau hell*/ 
	padding: 50px 20px 40px 430px;
	border-top: 5px solid #b20000;
}

/*================================================================================
				button go_to_top
===================================================================================*/
#btn_to_top {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #b84740;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 8px;
}

#btn_to_top:hover {
  background-color: #7f88ff;
}

/*======================================================================================
Icons auf Home
=======================================================================================*/
.drei_icons {
	margin-top:30px;
	border-radius: 20px;
}

.center-block {
    width: 100%;
    box-sizing: border-box;
    text-align: center;
}