/* Fonts */

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter_18pt-Regular.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter_18pt-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter_18pt-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Inter";
    src: url("../fonts/Inter_18pt-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Merriweather";
    src: url("../fonts/Merriweather_48pt-Bold.ttf") format("truetype");
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: "Merriweather";
    src: url("../fonts/Merriweather_48pt-Black.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
}

/* Grundfarben und Schrift für die gesamte Webseite */
:root {
    --farbe-hintergrund: #F2E7CB;
    --farbe-text: #222222;
    --farbe-navigation: #141414;
    --farbe-weiss: #ffffff;
    --farbe-bronze: #B04F42;
    --farbe-blau: #1f4f6b;
}
/* Entfernt Standardabstände und sorgt für berechenbare Größen */
* {
    box-sizing: border-box;
}

/* Grundlayout der gesamten Seite */
body {
    margin: 0;
    min-height: 100vh;
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    font-family: 'Inter', Arial, sans-serif;
    display: flex;
    flex-direction: column;
}

/* Dunkle Navigation oben */
.seitenkopf {
    background: var(--farbe-navigation);
    box-shadow: 0 3px 0 rgba(176, 79, 66, 0.55), 0 14px 32px rgba(0, 0, 0, 0.75);
    position: relative;
    z-index: 10;
}

/* Innenbereich der Navigation */
.hauptnavigation {
    max-width: 1500px;
    margin: 0 auto;
    padding: 18px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Logo-Text links */
.logo-bereich {
    color: var(--farbe-weiss);
    text-decoration: none;
    font-weight: 700;
    font-size: 1.2rem;
}

/* Logo in der Navigation */
.logo-bild {
    height: 72px;
    width: auto;
    display: block;
}

/* Links rechts in der Navigation */
.navigationslinks {
    display: flex;
    align-items: center;
    gap: 22px;
}

/* Einzelne Navigationslinks */
.navigationslinks a {
    color: var(--farbe-weiss);
    text-decoration: none;
    font-size: 0.95rem;
}

/* Hover-Effekt für Navigation */
.navigationslinks a:hover {
    color: var(--farbe-bronze);
}

/* Allgemeine Navigationslinks */
.nav-link {
    position: relative;
    padding-bottom: 8px;
}

/* Aktiver Navigationslink mit hochwertiger Bronze-Linie */
.nav-aktiv::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 3px;
    background: linear-gradient( 90deg, transparent, var(--farbe-bronze), #d9a06f, var(--farbe-bronze), transparent );
    border-radius: 999px;
    box-shadow: 0 0 10px rgba(176, 79, 66, 0.75);
}

/* Kontakt-Link als kleiner Button */
.kontakt-link {
    padding: 10px 16px;
    border: 1px solid var(--farbe-bronze);
    border-radius: 6px;
}

/* Hauptbereich nimmt den freien Platz zwischen Navigation und Footer ein */
.seiteninhalt {
    flex: 1;
}


/* Abstände im Footer */
.seitenfuss p {
    margin: 6px 0;
}

h1, h2, h3, .logo-bereich {
    font-family: 'Merriweather', Georgia, serif;
}

/* Footer */
.seitenfuss {
    background: var(--farbe-navigation);
    color: var(--farbe-weiss);
    text-align: center;
    padding: 24px;
    font-size: 0.9rem;
    box-shadow: 0 -3px 0 rgba(176, 79, 66, 0.45), 0 -14px 32px rgba(0, 0, 0, 0.70);
    position: relative;
    z-index: 10;
}