:root {

    --blau:#00284d;
    --blau-hell:#005a9c;
    --text:#222;
    --weiss:rgba(255,255,255,0.94);

    --breite:1200px;

}



* {
    box-sizing:border-box;
}



body {

    margin:0;

    font-family:
    "Times New Roman",
    Times,
    serif;

    color:var(--text);

    background-image:url("../bilder/hintergrund.jpg");

    background-size:cover;

    background-position:center top;

    background-attachment:fixed;

}

body::before {

    content:"";

    position:fixed;

    inset:0;

    background:rgba(0,20,40,0.25);

    z-index:-1;

}


/* Kopfbereich */

.header {

    background:var(--blau);

    color:white;

    padding:25px;

}



.site-title {

    max-width:var(--breite);

    margin:0;

}



.site-title h1 {

    margin:0;

    font-size:2.2rem;

}



.site-title p {

    margin:5px 0 0;

    font-size:1.2rem;

}



/* Navigation */

.navigation {

    max-width:var(--breite);

    margin:15px 0 0;
  
}



.navigation ul {

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}



.navigation a {

    color:white;

    text-decoration:none;

    padding:10px 15px 10px 0;

    display:block;

}



.navigation a:hover,
.navigation .active {

    background:var(--blau-hell);

}



/* Mobilmenü */

.menu-button {

    display:none;

    background:none;

    color:white;

    border:0;

    font-size:2rem;

}



/* Inhalt */

.container {

    max-width:var(--breite);

    margin:60px auto;

    padding:0 20px;

}



.content {

    background:rgba(255,255,255,0.82);

    padding:40px;
    
    border-radius:4px;

    box-shadow:0 8px 25px rgba(0,0,0,0.18);

    backdrop-filter:blur(3px);

}



h2 {

    color:var(--blau);

}



/* Bildplatzhalter */

.image-placeholder {

    height:300px;

    background:#ddd;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:30px 0;

}



/* Footer */

.footer {

    width:100%;

    margin-top:40px;

    padding:25px;

    background:var(--blau);

}


.footer-inner {

    max-width:1200px;

    width:100%;

    margin:auto;

    display:flex;

    justify-content:center;

    gap:40px;

}


.footer a {

    color:white;

    text-decoration:none;

}


.footer a:hover {

    text-decoration:underline;

}



/* Smartphone */

@media(max-width:700px) {


.navigation ul {

    display:none;

    flex-direction:column;

}


.navigation ul.open {

    display:flex;

}


.menu-button {

    display:block;

}


.content {

    padding:20px;

}


.footer {

    flex-direction:column;

    text-align:center;

}


}
/* Unsichtbares Feld für Spam-Bots */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}