/* css/base.css - Grundlegende Resets, Body-Styles, globale Typografie, globale Container */
html {
    scroll-behavior: smooth; /* WICHTIG: Für sanftes Scrollen zu Ankern */
    /* NEU: Offset für fixierten Header beim Scrollen zu Ankern */
    scroll-padding-top: var(--main-header-height-desktop); /* Verwendet Header-Höhen-Variable */
}

body {
    margin: 0;
    font-family: var(--font-body); /* Montserrat für Überschriften, Open Sans für Text */
    line-height: 1.7; /* Etwas grösserer Zeilenabstand für bessere Lesbarkeit */
    color: var(--text-color-dark);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--primary-color); /* Hintergrundfarbe wurde auf das angegebene Dunkelgrau geändert */
    padding-top: var(--main-header-height-desktop); /* Platz für den fixierten Header (Höhe des Headers) */
}

main {
    margin-top: 0px; /* Bleibt bei 0, da padding-top auf den Sektionen ist */
}

.container {
    max-width: 1280px; /* Etwas breiterer Container */
    margin: 0 auto;
    padding: 0 25px; /* Etwas mehr Padding */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading); /* Verwendung der Montserrat Variable */
    margin-top: 0;
    margin-bottom: 0.8em; /* Einheitlicherer Abstand */
    font-weight: 700; /* Standardmässig etwas fetter */
    color: var(--primary-color);
    line-height: 1.2; /* Straffere Zeilenhöhe für Überschriften */
}

p {
    margin-bottom: 1.2em; /* Etwas mehr Abstand zwischen Absätzen */
}

.lead-text {
    font-size: 1.3em; /* Grösser und prominenter */
    line-height: 1.6;
    color: #555;
    font-weight: 400; /* Nicht zu fett */
}

.content-section {
    padding: 60px 0; /* Standard-Padding für Sektionen reduziert */
}

/* NEU: Allgemeine Styles für Section-Headings (Frontend) */
.content-section h2 {
    font-size: 2.8em; /* Einheitliche Grösse für Sektionsüberschriften */
    text-align: center;
    margin-bottom: 50px; /* Mehr Abstand */
    color: var(--primary-color);
    position: relative; /* Für den Unterstrich-Effekt */
}

.content-section h2::after { /* Moderner Unterstrich */
    content: '';
    display: block;
    width: 80px; /* Kurzer Unterstrich */
    height: 4px; /* Dicke */
    background-color: var(--accent-color);
    margin: 15px auto 0 auto; /* Zentriert unter der Überschrift */
    border-radius: 2px;
}