@charset "utf-8";
/* CSS Document */

body {
    background-color: white; /* allgemeine Hintergrundfarbe */
    margin: 0;
    padding: 0;
}

.home .background-image {
	background-image: url('../img/home4.png');
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: 330px; /* Bildhöhe über gesamte Bildschirmhöhe */
    background-repeat: no-repeat;
    background-position: top center;
    z-index: -1; /* Lässt den Bild-Hintergrund hinter dem Inhalt */
}


.sub .background-image {
    background-image: url('../img/home4.png');
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
	height: 270px; /* Bildhöhe über gesamte Bildschirmhöhe */
    background-repeat: no-repeat;
    background-position: top center;
    z-index: -1; /* Lässt den Bild-Hintergrund hinter dem Inhalt */
}


#navbgsbalken {
    position: absolute;      /* Damit der Streifen oben festklebt */
    top: 1;
    left: 0;
    width: 100%;             /* Gesamte Breite */
    height: 7em;           /* Höhe in em */
    background-color: rgba(255, 255, 255, 0); /* Weiß mit 100% Transparenz */
	border: 0px solid grey;
    z-index: 0;  
}

#headerimg	{
	background-image: url('../img/home.png'); /* Bilddatei hier angeben */
    background-size: cover; /* Skaliert das Bild so, dass es den gesamten Bildschirm abdeckt */
    background-repeat: no-repeat; /* Verhindert das Wiederholen des Bildes */
    background-attachment: fixed; /* Fixiert das Bild beim Scrollen */
    background-position: center; /* Zentriert das Bild */
	
	background: #FFFFFF;
	margin-bottom: -2.1%;
}

#pagewrapper {
	font-family: 'PT Sans', sans-serif;
	background: none;
	width: 90%;
	height: 100%;
	font-size: 0.9em;
	text-align: justify;
	max-width: 900px;
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;	
	margin-bottom: 0;
	border: 0px solid red;
	overflow: auto;
}

header {
	width: 100%;
	border: 0px solid blue;
	display: flex;              /* Flexbox für horizontale Anordnung */
    align-items: flex-start;       /* Verschiebt Inhalte nach oben im Header */
    justify-content: space-between; /* Abstand zwischen Logo und Links */
}


#logofeld {
	min-width: 350px;
	height: 110px;
    background-color: rgba(255, 255, 255, 1);
    border: 0px solid pink;
	/* Reihenfolge: Oben-Links | Oben-Rechts | Unten-Rechts | Unten-Links */
	border-radius: 0px 0px 30px 30px;
    z-index: 2;
	display: grid;             /* Aktiviert Grid */
    place-items: center;       /* Zentriert sowohl vertikal als auch horizontal */
}

#logo {
	width: 300px;
	height: auto;
}

nav {
	width: 50%;
	height: 6.5em;
	padding-top: 2.5em;
	background: none;
	border: 0px solid black;
}

/* Flexbox für Navigation */
nav ul {
	border: 0px solid green;
	display: flex;
    justify-content: space-between;  /*Flexibler Abstand zwischen den Navigationspunkten */
    align-items: center;
   	margin: 0;
    list-style: none;
}

nav ul li {
    position: relative;
	height: 2.5em;
  	padding: 0.6em; 
  	text-align: center;
  	display: inline-block; /* Sorgt dafür, dass das Padding korrekt wirkt */
  	color: black;
}

nav ul li a {
    color: black;
    text-decoration: none;
    display: block;
}

nav ul a:visited,
nav ul a:hover,
nav ul a:active {
    color: black;
    text-decoration: none;
}

/* Hover-Effekte */
nav ul li:hover > a,
nav ul li.active > a { /*der Hover-Effekt wird auf den Hauptmenüpunkt angewendet, solange das übergeordnete Listenelement (li) oder ein beliebiges Kindelement (.submenu) im Hover-Zustand ist.*/
	color: black;
	font-weight: bold;
}


/* Stile für Subnavigation */
.submenu {
    list-style-type: none;
    display: none; /* Standardmäßig ausgeblendet */
    position: absolute; /* Positionierung unter dem übergeordneten Element */
    top: 100%; /* Unter dem übergeordneten Element */
    left: 0;
    background-color: #cddbed;
    flex-direction: column;
    margin: 0;
    padding: 0;
	z-index: 6;
	width: 190px;  /*Beispielbreite für das Submenü */
}

.submenu li {
    text-align: left; /* Text linksbündig ausrichten */
    padding-left: 0; /* Abstand links hinzufügen */
	padding-right: 0; /* Abstand links hinzufügen */
	width: 100%; /* Volle Breite für das Listenelement */
	border-top: 1px solid white;
}

.submenu li a {
    color: black;
    padding-left: 20px;
    text-decoration: none;
    display: block;
	width: 100%; /* Volle Breite für das Listenelement */
}

.submenu li a:hover {
    background-color: #80acd2;
	color: white;
}

/* Zeige Subnavigation bei Hover */
.has-submenu:hover .submenu,
.has-submenu.active .submenu {
    display: flex; 
}


/* Individuelle Breiten und Positionierungen für Submenüs */
.submenu-verwahrstelle {
    width: 207px; /* Individuelle Breite für das About-Submenü */
    left: -50px; /* Individuelle Positionierung für das About-Submenü */
}

.submenu-rechtsberatung {
    width: 180px; /* Individuelle Breite für das Services-Submenü */
    left: -30px; /* Individuelle Positionierung für das Services-Submenü */
}

.submenu-team {
    width: 170px; /* Individuelle Breite für das Contact-Submenü */
    left: -130px; /* Individuelle Positionierung für das Contact-Submenü */
}

/* Box-Sizing für alle Elemente */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/*******************/
/* Navigation für kleine Bildschirmgrößen */
#menu-button { display: none; }
#close-button {
    display: block;
    background-color: #287492;
    height: 2.5em;
    padding-top: 0.5em;
    width: 100%;
}

#nav-menu {
    display: none;
    position: fixed;
    overflow: auto;
    background-color: #cccccb;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 11;
    font-family: 'PT Sans', sans-serif;
    font-style: normal;
    font-size: 0.9em;
    line-height: 1.5em;
}

#nav-menu ul {
    background-color: white;
    margin: 0;
    padding: 0;
}

#nav-menu ul li {
    list-style: none;
    text-decoration: none;
    line-height: 3.5em;
    zoom: 1; /* wegen IE7 */
    height: auto; /* Höhe automatisch anpassen */
    margin-left: 0;
    border-bottom: 1px solid #287492;
    text-indent: 3em;
}

#nav-menu ul a:link { display: block; color: black; text-decoration: none; }
#nav-menu ul a:visited { color: black; }
#nav-menu ul a:hover { color: white; text-decoration: none; background: #cccccb; font-weight: bold; }
#nav-menu ul a.active { color: white; text-decoration: none; }
.nav-menu_active { color: white; text-decoration: none; background: #80acbc; font-weight: bold; }

/* Untermenü-Stile */
.nav-submenu {
    list-style-type: none;
    display: none; /* Standardmäßig ausgeblendet */
    background-color: #2e8cba;
    margin: 0;
    padding: 0;
    width: 100%;
}

.nav-submenu li {
    text-align: left; /* Text linksbündig ausrichten */
}

.nav-submenu li a {
    color: white;
	background-color: #cddbed;
    text-decoration: none;
	font-weight:normal;
    display: block;
    padding-left: 15px; /* Nur den Text einrücken */
}

.nav-submenu li a:hover {
    background-color: #0c3684;
}

/* Aktiver Zustand für übergeordnete Menüpunkte */
.has-submenu.active > a {
    color: white; /* Textfarbe, wenn aktiv */
    font-weight: bold;
    background: #2f8dba; /* Hintergrundfarbe, wenn aktiv */
}


/*******************/


#nav-address {
	padding-top: 2em;
	padding-left: 3em;
	background-color: #dde9ee;
	border-top: 2px solid #287492;
	margin: 0;
	height: 100%
}

#nav-address a:link {color: #287492; text-decoration: none;}


/*******************/
	
main {
	margin-top: 0px;
	width: 100%;
	background: none;
	float: right;
	height: inherit;
	border: 0px solid red;
	padding-top: 0;
	padding-bottom: 10%;
}

main a:link {color: #287492; text-decoration:none;}
main a:visited {color: #287492; text-decoration:none;}
main a:hover {color: #287492; text-decoration:none;}
main a:active {color: #287492; text-decoration:none;}



#leftcont {
	display: inline-block;
	hyphens: auto;
	width: 100%;
	padding: 60px 20px 0px 40px;
	border: 0px solid blue;
	font-size: 1em;
	line-height: 1.4em;
}

#rightcont {
	display: inline-block;
	padding-left: 5%;
	width: 30%;
	height: 100%;
	vertical-align: top;
	margin-top: 2.5%;
	margin-left: 6%;
	border-left: 0px solid #818181;
}


address {
	visibility:visible;
	font-style:normal;
	font-size:0.9em;
	line-height: 1.6em;
	text-align: left;
}



/**Kontaktformular ************************************/
form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

label {
	font-weight: bold;
}

input[type="text"],
input[type="email"],
textarea {
	width: 100%;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	box-sizing: border-box;
	font-family: "PT Sans", sans-serif;
}

input[type="submit"] {
	background-color: #0097d8;
	color: white;
	padding: 10px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-weight: bold;
}

input[type="submit"]:hover {background-color: #236b94;}


.consent-container {
    display: flex;
    align-items: flex-start;
    margin-bottom: 10px;
}

.consent-container input[type="checkbox"] {
     margin-right: 10px;
	 margin-top: 3px;
}


body.home h1 {font-family: "PT Sans", sans-serif; color: #287492; font-weight: bold; font-size: 5em; hyphens: auto;}
body.home h2 {font-family: "PT Sans", sans-serif; font-weight: bold; font-size: 1.4em; margin-top: 1.5em; margin-bottom: 2em; color: #125671; hyphens: auto;}
body.home h3 {font-family: "PT Sans", sans-serif; font-weight: normal;; font-size: 1.2em; color: #2e8cba; hyphens: auto;}

body.sub h1 {font-family: "PT Sans", sans-serif; color: #287492; font-weight: bold; margin-bottom: 2em; font-size: 3em; hyphens: auto; text-align:left;}
body.sub h2 {font-family: "PT Sans", sans-serif; font-weight: bold; font-size: 1.4em;  margin-top: 1.5em; margin-bottom: 0.5em; color: #666; hyphens: auto; text-align:left;}
body.sub h3 {font-family: "PT Sans", sans-serif; font-weight: normal;; font-size: 1.2em; color: #2e8cba; hyphens: auto;}

h1 {font-family: "PT Sans", sans-serif; font-weight: normal;; font-size: 1.3em; color: #2e8cba; line-height: 1.2em; hyphens: auto;}
h2 {font-weight: bold; font-size: 1.1em; line-height: 1.5em; color: #2e8cba; margin-bottom: 0.3em; margin-top: 2em; hyphens: auto;}
h3 {font-family: "PT Sanse", sans-serif; font-weight: normal;; font-size: 1.3em; color: #2e8cba; hyphens: auto;}
h4 {font-weight: bold; font-size: 1.1em; line-height: 1.5em; color: #2e8cba; margin-bottom: 0.3em; margin-top: 2em; hyphens: auto;}


.aktuelle_seite {color: black; font-weight:bold; padding-top: 0.6em;};
.zeilenabstand_gross {padding-bottom: 0.5em;}
.fett {font-weight: bold;}
.rechtsbuendig {float:right; padding-right: 1.5em;}
.linksbuendig {text-align: left;}
.grosserabsatz {padding-top: 1em;}
.rechtsbuendig {text-align: right;}
.laufweite_weit {letter-spacing: 0.05em;}
.liste_linksbuendig {margin-left: -1.6em;} 
.liste_großerabstand {margin-top: 2em;}
.blau {color: #2e8cba;}
.adressueberschrift {color: #818181;}
.weiss {color: white;}

/*Formatierung für nummerierte Listen, damit zweizeilige Überschriften eingerückt dargestellt werden*/
.u-nummeriert {display: flex; align-items: flex-start;}
.nummer {margin-left: -25px; margin-right: 10px; flex-shrink: 0;}
.nummer2 {margin-left: -30px; margin-right: 7px; flex-shrink: 0;}
.titel {/* Der Text nimmt den restlichen Platz ein und rückt bei Umbruch automatisch ein */}


/********************************************************************/

@media only screen and (max-width: 920px){
	
.home .background-image {
	height: 315px; /* Bildhöhe über gesamte Bildschirmhöhe */
}

.sub .background-image {
	height: 200px; /* Bildhöhe über gesamte Bildschirmhöhe */
}


body.home h1 {font-size: 2.65em; line-height: 1.1em;}
body.home h2 {font-size: 1.4em; margin-bottom: 4em;}

body.sub h1 {font-size: 2em; line-height: 1.2em;}
body.sub h2 {font-size: 1.2em; line-height: 1.2em;}

	
#pagewrapper {
	margin-top: 0;
}
	
	
#menu-button {
	display: block;
	max-width: 37px;
	max-height: 20px;
	position: absolute;
	right: 2em;
	top: 2.5em; 
	z-index: 8;
}

#navbgsbalken {			/*Da der Navbalken über die gesamte Fensterbreite verläuft, übernimmt er nun die Funktion des Logofeldes; das Logofeld hingegen wird auf transparent gesetzt und dient nur noch als Contenbox*/
    height: 100px;
    background-color: rgba(255, 255, 255, 0); /* Weiß 0% Transparenz */
}

#logofeld {
	min-width: 300px;
	height: 85px;
    background-color: rgba(255, 255, 255, 1);
    border: 0px solid pink;
	/* Reihenfolge: Oben-Links | Oben-Rechts | Unten-Rechts | Unten-Links */
	border-radius: 0px 0px 30px 30px;

}

#logo {
	width: 240px;
	position: absolute;
	/*left: 0em;*/
	top: 1em; 
}

nav {display: none;}
#rightcont {display: none;}	
#footerlink {display: none;}	

#leftcont {
	display: inline-block;
	hyphens: auto;
	width: 100%;
	border: 0px solid blue;
	font-size: 1em;
	line-height: 1.4em;
	padding: 2.5em 1em 1em 2em;
	
}

@media only screen and (max-width: 474px){
	
.home .background-image {
	height: 280px; /* Bildhöhe über gesamte Bildschirmhöhe */
}

.sub .background-image {
	height: 200px; /* Bildhöhe über gesamte Bildschirmhöhe */
}


body.home h1 {font-size: 2.2em; line-height: 1.1em;}
body.home h2 {font-size: 1.2em; margin-bottom: 4em; }


body.sub h1 {font-size: 2em; line-height: 1.1em;}
body.sub h2 {font-size: 1em; line-height: 1.2em; }
}


}

@media only screen and (max-width: 410px){
	
.home .background-image {
	height: 280px; /* Bildhöhe über gesamte Bildschirmhöhe */
}

.sub .background-image {
	height: 195px; /* Bildhöhe über gesamte Bildschirmhöhe */
}


body.home h1 {font-size: 2.2em; line-height: 1.1em;}
body.home h2 {font-size: 1.2em; margin-bottom: 4em; }


body.sub h1 {font-size: 2em; line-height: 1.1em;}
body.sub h2 {font-size: 1em; line-height: 1.2em; }


	
#menu-button {
	max-width: 30px;
	max-height: 20px;
	position: absolute;
	right: 0em;
	top: 2.5em; 
	z-index: 8;
}

#pagewrapper {
	min-width: 340px;
	font-size: 1em;
}

#logofeld {
	min-width: 250px;
	}

#logo {
	width: 200px;
	position: absolute;
	top: 1em; 
}

#leftcont {
	font-size: 0.9em;
	line-height: 1.3em;
	padding: 2em 1em 1em 2em;
}

}


@media only screen and (max-width: 401px){
	
.home .background-image {
	height: 320px; /* Bildhöhe über gesamte Bildschirmhöhe */
}

.sub .background-image {
	height: 195px; /* Bildhöhe über gesamte Bildschirmhöhe */
}


body.home h1 {font-size: 2.2em; line-height: 1.3em;}
body.home h2 {font-size: 1.2em; margin-bottom: 3.2em; }


body.sub h1 {font-size: 2em; line-height: 1.1em;}
body.sub h2 {font-size: 1em; line-height: 1.2em; }


}