/* Fonts von Google runtergeladen */
@font-face {
    font-family: 'Montserrat Variable';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat Variable Italic';
    src: url('../fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
}

/* Allgemeine Formatierungen */
html, body {
    font-family: 'Montserrat Variable', sans-serif;
    font-size: 14pt;
    background-color: #f5ecdd;
    text-align: left;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    font-weight: 400;
}

/* Links formatieren */
a:link,
a:visited {
    color: #e36c0a;
}

/* Überschriften Formatierung */
.item-title,
.item-title {
    text-align: left;
    margin-top: 0;
    margin-bottom: 0;
    color: #e36c0a;
    font-weight: 800;
}

.page-header {
    text-align: center;
    color: #e36c0a;
    font-weight: 800;
}

/* Der Rest */
header, section {
    margin: 0 auto;
    padding: 0;
    border: none;
    width: 100%;
    box-sizing: border-box;
}


/* Header Container */
.header-container {
    width: 100%;
    position: fixed;
    top: 0;
    z-index: 1000;
    background-color: #f5ecdd;
    display: flex;
    justify-content: center;
    height: 300px;
}

/* Header Wrapper */
.header-wrapper {
    width: 70%;
    display: flex;
    flex-direction: column;
    position: relative;
    justify-content: center;
}

/* Bild-Wrapper */
.header-michael-wrapper {
    height: 300px;
    display: flex; /* Falls nötig, um Inhalt im Wrapper zu zentrieren */
    justify-content: center; /* Zentriert den Inhalt horizontal */
}

/* Logo-Wrapper */
.header-logo-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    height: 150px;
}

.header-michael-wrapper img,
.header-logo-wrapper img {
    width: auto;
    height: 100%;
}

/* Platzierung des Menüs */
.menu-container {
    position: absolute;
    bottom: 75px;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    width: 80%;
}

/* Menü-Wrapper */
.menu-wrapper {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: wrap;
}

.menu-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
    display: flex;
    /* flex-wrap: wrap; */
}

.menu-wrapper ul li {
    position: relative; /* Ermöglicht das absolute Positionieren des Submenüs */
    margin-left: 15px;
}

/* Formatierung des Hauptmenüs */
.nav-item a {
    color: #000; /* Textfarbe */
    text-decoration: none; /* Entferne Unterstreichung */
    font-weight: 500;
}

.nav-item > a:hover,
.nav-item > a:focus {
    background-color: #e36c0a; /* Hintergrundfarbe beim Hover */
    color: #fff; /* Textfarbe beim Hover */
}

/* Formatierung des aktiven Hauptmenüpunkts */
.nav-item.current > a,
.nav-item.active > a {
    background-color: #e36c0a; /* Hintergrundfarbe für aktiven Menüpunkt */
    color: #fff; /* Textfarbe für aktiven Menüpunkt */
}

/* Formatierung für Untermenüs */
/* Allgemeine Einstellungen für das Submenü */
.mod-menu__sub {
    /* background-color: #f5ecdd; /* Hintergrundfarbe der Webseite */
    border: none; /* Entferne Rahmen */
    padding: 10px; /* Innenabstand */
    position: absolute; /* Absolut positioniert relativ zum übergeordneten Element */
    top: 100%; /* Unterhalb des Hauptmenüs */
    left: 0;
    display: none; /* Standardmäßig versteckt */
    z-index: 1000; /* Über anderen Inhalten */
    flex-direction: column; /* Stellt sicher, dass die Einträge untereinander stehen */
    margin-top: 0; /* Entferne zusätzlichen Außenabstand */
    min-width: 200px; /* Mindestbreite für das Submenü */
}

/* Zeige das Submenü an, wenn das übergeordnete Element aktiv ist */
.nav-item:hover > .mod-menu__sub,
.nav-item:focus-within > .mod-menu__sub {
    display: flex;
}

/* Stil für die Submenü-Elemente */
.mod-menu__sub li {
    list-style: none; /* Entferne Aufzählungszeichen */
    margin: 0;
    position: relative; /* Ermöglicht das absolute Positionieren der Linien */
    padding-left: 20px; /* Platz für die vertikale Linie */
}

/* Vertikale Linie */
.mod-menu__sub li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    background-color: #e36c0a; /* Farbe für die vertikale Linie */
    height: 100%; /* Höhe der vertikalen Linie */
}

/* Horizontale Linie */
.mod-menu__sub li a::before {
    content: '';
    position: absolute;
    left: 0; /* Positioniere die Linie direkt an der vertikalen Linie */
    top: 50%; /* Zentriere die Linie vertikal */
    width: 22px; /* Länge der horizontalen Linie */
    height: 2px;
    background-color: #e36c0a; /* Farbe für die horizontale Linie */
    transform: translateY(-50%); /* Zentriere die Linie vertikal */
}

/* Vertikale Linie nur im letzten Submenüeintrag verkürzen */
.mod-menu__sub li:last-child::before {
    height: 50%; /* Höhe der vertikalen Linie im letzten Submenüeintrag verkürzen */
}

.mod-menu__sub li a {
    color: #000; /* Textfarbe */
    text-decoration: none; /* Entferne Unterstreichung */
    display: block; /* Block-Level Element */
    padding: 3px 10px;
    font-weight: 500;
}

/* Hover- und Fokus-Effekt für die Submenü-Elemente */
.mod-menu__sub li a:hover,
.mod-menu__sub li a:focus {
    background-color: #e36c0a; /* Hintergrundfarbe beim Hover */
    color: #fff; /* Textfarbe beim Hover */
}

/* Formatierung des aktiven Untermenüpunkts */
.mod-menu__sub li.current > a,
.mod-menu__sub li.active > a {
    background-color: #e36c0a; /* Hintergrundfarbe für aktiven Untermenüpunkt */
    color: #fff; /* Textfarbe für aktiven Untermenüpunkt */
}

/* Der Container für den Inhalt */
.content-wrapper {
    width: 70%;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    padding-top: 300px; /* Platz für den Header */
    padding-left: 0;
    padding-right: 0;
    top: 0;
}

/* Format Einleitungsbild */
/* Flexbox Container für das Einleitungsbild */
.left.item-image {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin: 5px;
    margin-top: 10px;
    width: 100%; /* Nimmt die volle Breite des Elterncontainers ein */
}

/* Bild innerhalb des Flexbox Containers */
.left.item-image img {
    width: 60%; /* Bild nimmt 50% der Breite des Elterncontainers ein */
    height: auto; /* Höhe proportional zur Breite */
}

/* Ab hier die Formatierung für Kontakte */
.com-contact__container {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    height: 20em;
}

.com-contact__thumbnail {
    display: flex;
    justify-content: flex-start;
    height: 250px;
    position: absolute;
    padding-top: 4em;
    max-width: 30%;
}

.com-contact__info {
    display: flex;
    justify-content: flex-start;
    position: absolute;
    padding-top: 3em;
    padding-left: 250px;
}

/* Footer-Formatierung */
.footer-wrapper {
    font-size: 12pt;
    width: 70%;
    margin: 0 auto;
    text-align: center;
}

.footer-wrapper ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.footer-wrapper ul li {
    margin-left: 15px;
}