:root {
    /* Hauptfarben */
    --primary-color: #460157;
    --primary-hover: #7f0497;
    
    --secondary-color: #e60bdb;
    --secondary-hover: #750058;
    

    /* Hintergrundfarben */
    --bg-main: #f8f9fa;
    --bg-card: #ffffff;
    --subnav-border: #f0f0f0;
    
    /* Textfarben */
    --text-black: #000;
    --text-dark: #333333;
    --text-muted: #6e6e6e;
}

/* Regular-Gewicht (400) */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 400;
    src: url('manrope/webfonts/complete/manrope-regular.woff2') format('woff2'); /* Pfad anpassen! */
}

/* Bold-Gewicht (700) */
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 700;
    src: url('manrope/webfonts/complete/manrope-light.woff2') format('woff2'); /* Pfad anpassen! */
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 500;
    src: url('manrope/webfonts/complete/manrope-semibold.woff2') format('woff2'); /* Pfad anpassen! */
}
@font-face {
    font-family: 'Manrope';
    font-style: normal;
    font-weight: 200;
    src: url('manrope/webfonts/complete/manrope-thin.woff2') format('woff2'); /* Pfad anpassen! */
}
/* Schriftart anwenden */
body {
    font-family: 'Manrope', sans-serif;
}

html{
    background: var(--bg-main);
    overflow-x: hidden;
}

body{
    font-size: 24px;
    font-weight: 200;
}


#header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0px;
    background-color: var(--bg-card);
    height: 80px;
    z-index:1000;
    
    /* Weicher Übergang, wenn der Schatten ein- und ausgeblendet wird */
    transition: box-shadow 0.3s ease; 
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
/* Diese Klasse wird per JavaScript hinzugefügt, sobald gescrollt wird */
#header.is-scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
}

.logo{
    position: relative;
    left:2%;
    z-index:2;
    width:200px;
}

.logo img{
    width:200px;
}

#navigation{
    float:right;
    margin-top:-90px;
    margin-right:2%;
}

#navigation ul li{
    float:left;
    list-style: none;
    margin-left: 0px;
    font-size:20px;
    color: #000;
}
#navigation ul li a{
    color: #000;
    text-decoration: none;
    padding-right:30px;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:10px;
}
.navitem_nolink{
    color: #000;
    text-decoration: none;
    padding-right:30px;
    padding-left:10px;
    padding-top:10px;
    padding-bottom:10px;
    margin-top:-10px;
}

#navigation ul li:hover, #navigation ul li a:hover{
    color: var(--bg-card);
    text-decoration: none;
    background-color: var(--primary-hover);
    border-radius:8px;
}


/* Submenu */
.sub_navigation{
    border: 1px solid var(--subnav-border);
    border-radius:8px;
    padding-bottom:10px;
    margin-top:-0px;
}
.header_navigation .nav_item {
    position: relative; /* Wichtig, damit sich das Untermenü daran ausrichtet */
    display: inline-block; /* Oder 'float: left', je nach deinem bestehenden Layout */
    cursor: pointer;
}
/* 1. Das übergeordnete LI-Element positionieren */
.header_navigation .nav_item {
    position: relative; /* Wichtig, damit sich das Untermenü daran ausrichtet */
    display: inline-block; /* Oder 'float: left', je nach deinem bestehenden Layout */
    cursor: pointer;
}

/* 2. Das Untermenü standardmäßig verstecken */
.header_navigation .sub_navigation {
    display: none;
    position: absolute;
    top: 100%; /* Positioniert das Menü direkt unter dem Text "Unternehmen" */
    left: 0;
    z-index: 999; /* Sorgt dafür, dass es über anderen Inhalten liegt */
    background-color: var(--bg-card); /* Hintergrundfarbe anpassen */
    min-width: 250px; /* Optionale Mindestbreite */
}


/* FOOTER */
#footer{
    width:102%;
    display:block;
    background-color: var(--text-black);
    margin-left:-1%;
    /* margin-top:2%; */
    margin-bottom: -10px;
}

#innerFooter{
    padding:10px;
    color: var(--bg-card);
}
#innerFooter .container_content{
    padding:0 10 0 10;
}
#innerFooter .container_image{
    min-height: 0px;
    overflow: hidden;
}
#innerFooter ul li{
    list-style: none;
}
#innerFooter ul li a{
    text-decoration: none;
    color: var(--bg-card);
}
#innerFooter ul li a:hover{
    text-decoration: none;
    color: var(--secondary-color);
}

#innerFooter .cImage{
    width:100px;
}


/* 3. BEI MOUSE OVER: Untermenü anzeigen */
/* Sobald die Maus über dem LI (.nav_item) ist, wird das DIV (.sub_navigation) sichtbar */
.header_navigation .nav_item:hover .sub_navigation {
    display: block;
}

/* Optional: Styling für die Liste im Untermenü */
.header_sub_navigation {
    list-style: none;
    margin: 0;
    padding: 10px;
}

.sub_nav_item a {
    display: block;
    padding: 5px 10px;
    text-decoration: none;
    color:var (--text-dark);
    min-width:160px;
}



/* ======================
CONTENT
====================== */
.banner-content-right{
    left: 5%;
    width:60%;
}
.lila-spalte p{
    text-align:center;
}

#content{
    width: 102%;
    margin-top: 100px;
    display: block;
    margin-left: -1%;
    min-height:800px;
}

.hero_banner{
    width:100%;
    display: block;
}
.hero_image{
    width:100%;
    height:700px;
    display: block;
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;     
}
.hero_content{
    position:absolute;
    margin-top:200px;
    margin-left:5%;
    /* width:100%; */
    padding:10px;
    border-radius: 10px;
}
.hero_content p{
    line-height:25px;
}
.text-color-white,
.text-color-white h1,
.text-color-white h2,
.text-color-white p {
    color: #ffffff !important; /* Zwingt die Textfarbe auf Weiß */
}
.hero_headline h1 p{
    font-size:40px;
    font-weight:400;
    color: var(--text-black);
    font-weight: normal;
    line-height: 50px;
}
.hero_subheadline h2{
    font-size:40px;
    color: var(--text-black);
}
.hero_text h2{
    font-size:30px;
    color: var(--text-black);
}
.hero_text{
    font-size:22px;
    font-weight:200;
    width:100% !important;
    color: var(--text-black);
}

.hero_text .cImage{
    width:120px;
    float:right;
    margin-left:100px;
    margin-top:-100px;
    position:relative;
}


.flex-container-1 {
  display: flex;
  /* Abstand zwischen den Spalten */
  gap: 0px; 
}
.flex-container-2 {
  display: flex;
  /* Abstand zwischen den Spalten */
  gap: 0px; 
  align-items: stretch;
}
.flex-container-3 {
  display: flex;
  /* Abstand zwischen den Spalten */
  gap: 0px; 
  align-items: stretch;
}

.container_content{
    padding:50px;
    padding-top:75px;
    padding-bottom:75px;
}

.container_content h2 p{
    font-size:32px;
    font-weight: 400;
}
.container_content p{
    font-size:18px;
    font-weight: 200;
}

.spalte {
  /* Beide Spalten teilen sich den Platz zu gleichen Teilen (50%) */
  flex: 1; 
  padding-left: 0px;
  padding-right: 0px;
  border-radius: 0px;
}

.container_image{
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;  
    min-height: 650px;
}

.container_content ol li{
    font-size: 18px;
}
.container_image.inset {
    margin: 45 50 45 50;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.container_image:has(.image-max-height-300){
    max-height: 300px;
}

.hl-align-center{
    text-align:center;
}
.no-bullet{
    list-style:none;
    font-style: italic;
}
.height-20 {
    height: 20px;
}
.height-30 {
    height: 30px;
}
.height-40 {
    height: 40px;
}
.height-50 {
    height: 50px;
}
.height-60 {
    height: 60px;
}
.height-70 {
    height: 70px;
}
.height-80 {
    height: 80px;
}
.height-90 {
    height: 90px;
}
.height-100 {
    height: 100px;
}
.height-110 {
    height: 110px;
}
.height-120 {
    height: 120px;
}
.height-130 {
    height: 130px;
}

/* Container Height */
.spalte:has(.container-height-20) {
    height: 20px;
}
.spalte:has(.container-height-30) {
    height: 30px;
}
.spalte:has(.container-height-40) {
    height: 40px;
}
.spalte:has(.container-height-50) {
    height: 50px;
}
.spalte:has(.container-height-60) {
    height: 60px;
}
.spalte:has(.container-height-70) {
    height: 70px;
}
.spalte:has(.container-height-80) {
    height: 80px;
}
.spalte:has(.container-height-90) {
    height: 90px;
}
.spalte:has(.container-height-100) {
    height: 100px;
}
.spalte:has(.container-height-110) {
    height: 110px;
}
.spalte:has(.container-height-120) {
    height: 120px;
}
.spalte:has(.container-height-130) {
    height: 130px;
}

.spalte:has(.margin-top--100){
    margin-top:-100px
}
.contact-form{
    margin-top:-15px;
    margin-left:-25%;
}

/* Container Height */
.flex-container-1:has(.container-height-20) {
    height: 20px;
}
.flex-container-1:has(.container-height-30) {
    height: 30px;
}
.flex-container-1:has(.container-height-40) {
    height: 40px;
}
.flex-container-1:has(.container-height-50) {
    height: 50px;
}
.flex-container-1:has(.container-height-60) {
    height: 60px;
}
.flex-container-1:has(.container-height-70) {
    height: 70px;
}
.flex-container-1:has(.container-height-80) {
    height: 80px;
}
.flex-container-1:has(.container-height-90) {
    height: 90px;
}
.flex-container-1:has(.container-height-100) {
    height: 100px;
}
.flex-container-1:has(.container-height-110) {
    height: 110px;
}
.flex-container-1:has(.container-height-120) {
    height: 120px;
}
.flex-container-1:has(.container-height-130) {
    height: 130px;
}

.container-height-80 h2{
    margin-top:-90px;
}


.small-divider{
    margin-top: -370;
}

.no-padding{
    padding: 0 0 0 50;
}

/* WARTUUNGSMODUS */
#maintenance{
    width:100%;
    min-height:50px;
    text-align: center;
    padding-top:10%;
}

.inner-flex, .inner-flex-horizontal{
    font-size:75%;
}
.inner-flex-horizontal {
    display: flex;
    flex-wrap: wrap; /* Erlaubt den Umbruch in die nächste Zeile */
}

/* Spricht alle direkten Divs (.one, .two etc.) an */
.inner-flex-horizontal > div {
    flex: 0 0 45%; /* Jedes Div nimmt genau die Hälfte der Breite ein */
    box-sizing: border-box; /* Berücksichtigt Padding und Border in der Breite */
    padding: 15px; /* Optionaler Innenabstand für die Inhalte */
}