/* Grundlegende Zurücksetzung und Einstellungen */
* {
    margin: 0;
    padding: 0;
    /* box-sizing: border-box;  */
    /* ausgeschnitten für test */
    /* background-image: url(/placeholder/pics/nebelmond\ blau.jpg);
    background-position: center; /* Zentriert das Bild horizontal und vertikal */
    /* background-repeat: no-repeat; /* Verhindert Wiederholung des Bildes */
    background-size: cover; /* Passt das Bild an, um den gesamten Container zu füllen */
    /* Alternativ: background-size: contain; */
    background-attachment: fixed; /* Wichtig: Fixiert das Bild beim Scrollen */
    /* min-height: 100vh; /* Stellt sicher, dass der Body mindestens die Höhe des Viewports hat */
    /* filter wie blur oder transparenz */
    /*  filter: blur(4px); */ 
}

/* körper = sichtbare Webseite */ 

body {
    /* Grundlegende Einstellungen */
    font-family: Arial, sans-serif;
    line-height: 1.6;
    max-width: 100%;
    margin: 0 auto;
    /*  border: 1px solid #000; */
    
    /* Position relativ für den Pseudo-Element-Overlay */
    position: relative;
    
    /* Hintergrundbild (Nebelmond) */
    background: url(/pics/nebelmond\ blau.jpg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* Wichtig: Fixiert das Bild beim Scrollen */
    
    /* Stellt sicher, dass der Body die volle Höhe hat */
    min-height: 100vh;
}

/* Vordergrund-Bild-Overlay mit mix-blend-mode  = das Bild das vor dem eigentlichen Background Bild liegt */
body::before {
    content: "";
    position: fixed; /* Statt 'absolute' */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(/pics/paint-7503334_1920.png);
    background-size: cover;
    background-position: center;
 
    /* filter: invert(100%); /* Invertiert die Farben komplett */
    /* filter: invert(100%) hue-rotate(180deg); /* Invertiert und passt den Farbton an */
    
    /* Der wichtige Teil - Mischmodus für den Vordergrund */
    mix-blend-mode: screen;
    
    /* Stellt sicher, dass das Overlay hinter dem Inhalt liegt */
    z-index: -1;
}

/* Dark Mode Anpassungen */
@media (prefers-color-scheme: dark) {
    body::before {
        /* Invertiert die Farben des Hintergrundbildes */
        filter: invert(100%);
        /* Alternativ können Sie auch einen anderen Mischmodus verwenden */
        mix-blend-mode: multiply; /* statt 'screen' für Dunkelmodus */
    }
}
/* Dark Mode Anpassungen */
/* Vordergrund-Bild-Overlay mit mix-blend-mode  = das Bild das vor dem eigentlichen Background Bild liegt */

.block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh; /* Optionale Höhe für den gesamten Bereich */
    width: 100%;
  }
/* bouncin letters test */ 
.bounce span{
    text-align: center;
    font-size: 65px;
    display: inline-block;
    color: aqua;
    /* schatten einfügen */ 
    /*  filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.8));  /* option 1 f. Schatten */ 
    font-weight: bold;
    animation: bounce 1.0s ease infinite alternate;
    /* glow 2s ease-in-out infinite alternate; */       /* option 2 f. Schatten */ 
}
@keyframes bounce{      /* bounce animation des Textes */ 
    0% {
        transform: translateY(0);
    }  
    100% {
        transform: translateY( -35px);
    }    
}
/* bounce animation des Textes */ 


.bounce span:nth-child(1){
    animation-delay: 0.1s;
}
.bounce span:nth-child(2){
    animation-delay: 0.2s;
}
.bounce span:nth-child(3){
    animation-delay: 0.3s;
}
.bounce span:nth-child(4){
    animation-delay: 0.4s;
}
.bounce span:nth-child(5){
    animation-delay: 0.5s;
}
.bounce span:nth-child(6){
    animation-delay: 0.6s;
}
.bounce span:nth-child(7){
    animation-delay: 0.7s;
}
.bounce span:nth-child(8){
    animation-delay: 0.8s;
}
.bounce span:nth-child(9){
    animation-delay: 0.9s;
}
.bounce span:nth-child(10){
    animation-delay: 1.0s;
}
.bounce span:nth-child(11){
    animation-delay: 1.1s;
}
.bounce span:nth-child(12){
    animation-delay: 1.2s;
}
.bounce span:nth-child(13){
    animation-delay: 1.3s;
}
.bounce span:nth-child(14){
    animation-delay: 1.4s;
}
.bounce span:nth-child(15){
    animation-delay: 1.5s;
}
.bounce span:nth-child(16){
    animation-delay: 1.6s;
}
.bounce span:nth-child(17){
    animation-delay: 1.7s;
}
.bounce span:nth-child(18){
    animation-delay: 1.8s;
}
.bounce span:nth-child(19){
    animation-delay: 1.9s;
}
.bounce span:nth-child(1){
    animation-delay: 0.1s;
}

/* bouncin letters test */ 


/* Umrandung Alarm 'under Construktion' auf Placeholder */
.border{
    /* HTML: <div class="border"></div> */
    margin: 45px;
    width: 85%;        /* vorher : ' width: calc(680px / cos(45deg)) ' */ 
    height: 6vh;  /* höhe der Balken */ 
    --c: #0fb3dc 0 15px,#0000 0 20px;
    background: 
      repeating-linear-gradient(135deg,var(--c)) left top,
      repeating-linear-gradient( 45deg,var(--c)) left bottom;
    background-size:  200% 50%;
    background-repeat: no-repeat;
    animation: l4 8s infinite linear;
}
@keyframes l4 {
    100% {background-position:top right,bottom right}
}
/* Umrandung Alarm 'under Construktion' auf Placeholder */


/* Stellt sicher, dass der Inhalt über dem Hintergrund liegt */
header, section, footer, .block, .box, nav {
    position: relative;
    z-index: 1;
}

/* Footer */
footer {
    padding: 20px;
    text-align: center;
    color: aqua;
}