/* Reset und Grundstile */
    body {
        font-family: 'Lato', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
        line-height: 1.7;
        margin: 0;
        padding: 0;
        background-color: #f8f9fa; /* Sehr helles Grau als Hintergrund */
        color: #333; /* Dunkelgrau für Text */
        font-size: 16px;
    }

    /* Container für den Hauptinhalt */
    .container {
        max-width: 850px; /* Etwas breiter */
        margin: 30px auto; /* Mehr Abstand oben/unten */
        padding: 30px 40px; /* Mehr Innenabstand */
        background-color: #ffffff; /* Weißer Hintergrund für Inhalt */
        box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Leichter Schatten */
        border-radius: 5px; /* Abgerundete Ecken */
    }

    /* Header */
    header {
        background-color: #e0e8f0; /* Sanftes Hellblau */
        padding: 25px 40px;
        text-align: center;
        border-bottom: 1px solid #c8d4e0; /* Dezente Trennlinie */
        margin: -30px -40px 20px -40px; /* Negative Marge, um an Containerkante zu gehen*/
        border-radius: 5px 5px 0 0; /* Obere Ecken abrunden */
    }

    header h1 {
        margin: 0;
        font-size: 2em; /* Größere Überschrift */
        color: #2c3e50; /* Dunkleres Blau/Grau */
        font-weight: 600;
    }

    /* Navigation */
    nav {
        text-align: center;
        margin-bottom: 30px; /* Mehr Abstand nach unten */
        padding-bottom: 15px;
        border-bottom: 1px solid #eee; /* Leichte Trennlinie */
    }

    nav a {
        margin: 0 15px; /* Gleichmäßiger Abstand */
        text-decoration: none;
        color: #3498db; /* Blau für Links */
        font-weight: 500;
        transition: color 0.2s ease;
    }

    nav a:hover,
    nav a:focus {
        color: #2980b9; /* Dunkleres Blau bei Hover */
        text-decoration: underline;
    }

    /* Hauptinhalt */
    main {
        /* Container übernimmt Padding */
    }

    main h2, main h3 {
        color: #16a085; /* Beruhigendes Grün für Überschriften */
        margin-top: 1.5em;
        margin-bottom: 0.8em;
        font-weight: 600;
    }
    main h2 { font-size: 1.6em; }
    main h3 { font-size: 1.3em; }


    main p {
        margin-bottom: 1.2em;
    }

    main ul {
        margin-left: 20px;
        margin-bottom: 1.2em;
    }

    main li {
        margin-bottom: 0.5em;
    }

    main a {
        color: #3498db; /* Gleiches Link-Blau wie Navi */
    }
    main a:hover,
    main a:focus {
        color: #2980b9;
    }

    /* Footer */
    footer {
        background-color: #e0e8f0; /* Gleiches Hellblau wie Header */
        padding: 20px 40px;
        text-align: center;
        font-size: 0.9em;
        color: #555; /* Etwas helleres Grau */
        border-top: 1px solid #c8d4e0; /* Dezente Trennlinie */
        margin: 30px -40px -30px -40px; /* Negative Marge */
        border-radius: 0 0 5px 5px; /* Untere Ecken abrunden */
    }

    footer p {
        margin: 0;
    }

    footer a {
        color: #3498db; /* Blau */
    }

    footer a:hover,
    footer a:focus {
        color: #2980b9; /* Dunkleres Blau */
    }

    /* Kleine Anpassungen für schmalere Bildschirme */
    @media (max-width: 600px) {
        .container {
            margin: 15px;
            padding: 20px;
            box-shadow: none; /* Schatten auf Mobile evtl. weglassen */
        }
        header, footer {
             margin-left: -20px;
             margin-right: -20px;
             padding-left: 20px;
             padding-right: 20px;
             border-radius: 0; /* Keine abgerundeten Ecken auf Mobile */
        }
         header h1 {
             font-size: 1.6em;
         }
        nav a {
            display: block; /* Links untereinander */
            margin: 10px 0;
        }
    }