/* 1. Hauptdesign & Allgemeines Hintergrundbild (Weltraum) */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: system-ui, -apple-system, sans-serif;
    background-image: url('hintergrund.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
}

/* Dunkler Schleier für den Haupt-Hintergrund, damit Text lesbar bleibt */
body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 14, 18, 0.75); 
    z-index: -1;
}

header, main, footer {
    position: relative;
    z-index: 1;
}

/* 2. Header mit Keltischen Knoten */
header {
    background-image: url('keltische-knoten_h.png'); /* Euer Knoten-Bild */
    background-size: contain;                     /* Bild skaliert sauber innerhalb der Leiste */
    background-position: center;                  /* Zentriert das Muster */
    background-repeat: repeat-x;                  /* Wiederholt die Knoten nur horizontal von links nach rechts */
    position: relative;
}

/* Dunkler Filter NUR für den Header, damit das Menü lesbar bleibt */
header::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(25, 28, 36, 0.85); /* Dunkler Filter über den Knoten */
    z-index: -1;
}

/* 3. Footer mit Keltischen Knoten */
footer {
    background-image: url('keltische-knoten_f.png'); /* Gleiches Knoten-Bild */
    background-size: contain;
    background-position: center;
    background-repeat: repeat-x;                  /* Wiederholt sich ebenfalls von links nach rechts */
    position: relative;
}

/* Dunkler Filter NUR für den Footer */
footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(25, 28, 36, 0.85);
    z-index: -1;
}

/* Kleines Extra für den Space-Look */
.tracking-wider {
    letter-spacing: 2px;
}