/* Globale Variablen für einfaches Design-Management */

:root {

    --text-color: #495057;

    --bg-color: #ffffff;

    --accent-color: #0077b6;

    --nav-bg: #ffffff;

    --box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);

}

/* Grundlegendes Layout und Schriftarten */

body {

    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

    background-color: var(--bg-color);

    color: var(--text-color);

    margin: 0;

    line-height: 1.6;

    display: flex;

    flex-direction: column;

    min-height: 100vh;

}

.container {

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}

/* Header und Navigation */

.main-header {

    background-color: var(--nav-bg);

    padding: 20px 0;

    box-shadow: var(--box-shadow);

}

.main-header .container {

    display: flex;

    justify-content: space-between;

    align-items: center;

}

.logo {

    color: var(--accent-color);

    text-decoration: none;

    font-size: 1.8em;

    font-weight: 700;

}

.main-nav {

    position: relative;

}

.nav-links {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    gap: 25px;

}

.nav-links a {

    color: var(--text-color);

    text-decoration: none;

    font-size: 1.1em;

    font-weight: 500;

    padding: 5px 10px;

    position: relative;

    transition: color 0.3s;

}

.nav-links a::after {

    content: '';

    position: absolute;

    width: 0;

    height: 2px;

    background-color: var(--accent-color);

    bottom: -5px;

    left: 0;

    transition: width 0.3s ease-out;

}

.nav-links a:hover::after {

    width: 100%;

}

/* Burger-Menü für die mobile Ansicht */

.burger-menu {

    display: none;

    cursor: pointer;

}

.burger-menu .line {

    width: 28px;

    height: 3px;

    background-color: var(--text-color);

    margin: 6px 0;

    transition: all 0.3s ease-in-out;

}

/* Hauptinhaltsbereich */

.content-wrapper {

    flex: 1;

    padding: 50px 0;

}

h1 {

    color: var(--accent-color);

    font-size: 3em;

    margin-bottom: 0.5em;

    font-weight: 700;

}

p {

    max-width: 800px;

    margin-bottom: 1.5em;

    font-size: 1.1em;

}

/* Footer */

.main-footer {

    background-color: var(--nav-bg);

    padding: 20px 0;

    text-align: center;

    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);

}

/* Responsives Design für mobile Ansichten */

@media screen and (max-width: 768px) {

    .nav-links {

        display: none;

        flex-direction: column;

        width: 100%;

        position: absolute;

        top: 65px;

        left: 0;

        background-color: var(--nav-bg);

        border-top: 1px solid rgba(0, 0, 0, 0.1);

        padding: 10px 0;

        box-shadow: var(--box-shadow);

        transition: transform 0.3s ease-out, opacity 0.3s ease-out;

        transform: translateY(-20px);

        opacity: 0;

    }

    

    .nav-links.active {

        display: flex;

        transform: translateY(0);

        opacity: 1;

    }

    .nav-links li {

        text-align: center;

        padding: 15px 0;

    }

    .burger-menu {

        display: block;

    }

}