/* style.css – Bereinigte Fassung */

* { box-sizing: border-box; }

body { 
    font-family: 'Inter', Arial, sans-serif; 
    margin: 0; 
    background: #f5f7fa; 
    color: #1a2b3c; 
    line-height: 1.6; 
}

/* HEADER */
header { 
    background: #003087; 
    color: white; 
    padding: 2rem 1rem; 
    text-align: center; 
}

/* Dein Marken-Name (Optisch groß) */
.header-claim { 
    display: block;
    font-size: 2.2rem; /* Sicher für Mobile */
    font-weight: bold;
    line-height: 1.2;
    margin: 0;
}

/* Deine SEO-Überschrift (Optisch klein) */
header h1 { 
    font-size: 1.1rem; 
    font-weight: normal; 
    opacity: 0.9; 
    margin: 0.5rem 0 0 0;
}

/* NAVIGATION */
nav { 
    background: #E30613; 
    padding: 0.8rem; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
}
nav ul { 
    list-style: none; margin: 0; padding: 0; 
    display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; 
}
nav a { color: white; text-decoration: none; font-weight: bold; }
nav a:hover { text-decoration: underline; }

/* INHALT */
main { max-width: 960px; margin: 2rem auto; padding: 0 1rem; }
section { background: white; padding: 2rem; margin-bottom: 2rem; border-radius: 10px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); }

h2 { 
    color: #003087; 
    border-bottom: 3px solid #E30613; 
    padding-bottom: 0.5rem; 
}

/* BUTTONS */
.button { 
    display: inline-block; 
    background: #E30613; 
    color: white !important; 
    padding: 0.9rem 1.8rem; 
    border-radius: 6px; 
    text-decoration: none; 
    font-weight: bold; 
    margin: 0.5rem 0; 
}
.button:hover { background: #c00510; }

/* FOOTER */
footer { 
    background: #1a2b3c; 
    color: white; 
    text-align: center; 
    padding: 2rem; 
    font-size: 0.9rem; 
}
footer a { color: #E30613; }

/* DESKTOP-ANPASSUNGEN */
@media (min-width: 768px) {
    .header-claim { 
        font-size: 3.5rem; /* Größer auf Desktop */
    }
    header h1 { 
        font-size: 1.2rem; 
    }
    nav ul { gap: 3rem; }
}