body { margin: 0;
    padding: 0;
    /* Ein schönes Dunkelrot als Fallback, falls das Bild nicht lädt */
    background-color: #4a0404;
    background-attachment: fixed; /* Bild bleibt stehen, Inhalt scrollt */
    background-position: center; 
}

#kalender-container { 
    display: grid; 
    height: 100vh;
    grid-template-columns: repeat(4, 100px); 
    gap: 10px; 
    justify-content: center; 
    padding: 20px; 
      background-size: cover;
    background-image: url('./weihnachtsmarkt.jpg');
  
}
#uhno-popup {
    display: grid;
    /* Erste Spalte genau 600px, zweite Spalte nimmt den Rest (1fr) */
    grid-template-columns: 600px 1fr; 
    
    width: 1000px; 
    height: 600px; /* Gleiche Höhe wie das Bild */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: none !important;
    background-color: rgb(27, 14, 100); /* Oder eine weihnachtliche Farbe */
    border: 3px solid #333;
    border-radius: 15px;
    overflow: hidden; /* Damit das Bild an den Ecken nicht übersteht */
    z-index: 9;
}

/* Linke Spalte (Das Bild) */
.popup-bild-bereich {
    background-image: url('./Uhno.png');
    background-size: cover;
    background-position: center;
    width: 600px;
    height: 600px;
}
.popup-text-bereich {
    padding: 40px 30px; /* Oben/unten etwas mehr Platz für die Pik-Zeichen */
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #d80e0e; 
    position: relative; /* Wichtig, damit wir die Pik-Zeichen platzieren können */
    overflow: hidden; /* Verhindert, dass die Zeichen über den Rand hinausschauen */
    border-top: 8px solid #f1c40f;
    border-bottom: 8px solid #f1c40f;
}

/* Das Pik-Muster für oben und unten */
.popup-text-bereich::before,
.popup-text-bereich::after {
    content: "♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠"; /* Viele Pik-Zeichen aneinandergereiht */
    color: #f1c40f; /* Dein Gold-Gelb */
    font-size: 40px; /* Größe der Zeichen */
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    white-space: nowrap; /* Verhindert Zeilenumbrüche */
    letter-spacing: 5px; /* Abstand zwischen den Zeichen */

}

/* Positioniert das obere Muster */
.popup-text-bereich::before {
    top: 15px;
}

/* Positioniert das untere Muster */
.popup-text-bereich::after {
    bottom: 15px;
}

#bestaetigen-btn {
    width: 80%;
    margin-top: 30px;
    padding: 15px 30px;
    background-color: #f1c40f;
    color: #333;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: block;
}

#bestaetigen-btn:active {
    background-color: #d4a500;
}
#user-eingabe {
   
    width: 70%;
    height: 100px; /* Schön groß zum Schreiben */
    margin-top: 15px;
    padding: 15px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 16px;
    resize: none; /* User soll die Box nicht verziehen können */
}
/* Der Rahmen des Türchens */
.tuer-wrapper {
    width: 100px;
    height: 100px;
    perspective: 1000px; /* Ermöglicht den 3D-Effekt */
    position: relative;
}



.tuer {
    width: 100%;
    height: 100%;
    z-index: 10;
    background: 
        linear-gradient(90deg, transparent 45%, #f1c40f 45%, #f1c40f 55%, transparent 55%),
        linear-gradient(0deg, transparent 45%, #f1c40f 45%, #f1c40f 55%, transparent 55%),
        #c0392b;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    box-shadow: inset 0 0 0 2px rgba(241, 196, 15, 0.3);
    
    /* Animationseigenschaften */
    transition: transform 0.8s ease-in-out;
    transform-origin: left center; /* Das Scharnier ist links, vertikal zentriert */
    
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    transform-style: preserve-3d;
}

/* Schleife/Bow auf der Tür */
.tuer::after {
    content: '';
    position: absolute;
    width: 30px;
    height: 30px;
    background: #f1c40f;
    border-radius: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index:   -1;
    box-shadow: 
        -20px 0 0 -5px #f1c40f,
        20px 0 0 -5px #f1c40f;
    
}


/* Diese Klasse wird per JS hinzugefügt */
.tuer.offen {
    transform: translateY(-50%) rotateY(-110deg) translateZ(1px); /* Tür schwingt nach links auf */
}

.tuer.geschlossen{
    transform: translateY(-50%) rotateY(0deg) translateZ(1px);
}
/* Das Geschenk/Bild hinter der Tür */
.inhalt {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: #ecf0f1;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1; /* Liegt hinter der Tür */
}

#tuerchen2-popup {
    display: grid; /* Kein Grid! Elemente fließen normal oder werden absolut gesetzt */
    width: 2000px;
    height: 2000px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.9); /* Leicht transparentes Weiß */
    border: 5px solid #c0392b; /* Festliches Rot */
    border-radius: 20px;
    box-shadow: 0 0 50px rgba(0,0,0,0.5);
    z-index: 1000;
    overflow: hidden; /* Nichts schaut über den Rand */
}

.foto-karte {
  position: absolute;
  display: block;  
  width: 50%;         /* Vorher war hier vielleicht 35%. Teste mal 20% oder 25% */
  max-width: 320px; 
  aspect-ratio: 3 / 4;  /* Sorgt dafür, dass sie auf großen Bildschirmen nicht riesig werden (vorher z.B. 150px) */
  background-color: #fff; 
  padding: 6px; 
  border-radius: 4px;
  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.2);
  transition: transform 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease, z-index 0s;
  cursor: pointer;
}

.foto-karte.photo-1 {
  top: 10%;           /* Abstand von oben ändern */
  left: 15%;          /* Abstand von links ändern */
  background-image: url('./Emmy_2.jpeg');
    background-size: cover;
  z-index: 1;         /* Wer liegt oben? (Höhere Zahl liegt oben) */
}

.foto-karte.photo-2 {
  top: 30%;           /* Abstand von oben ändern */
  left: 50%;          /* Abstand von links ändern */
  background-image: url('./Uhno_2.jpeg');
    background-size: cover;
  z-index: 2;         /* Wer liegt oben? (Höhere Zahl liegt oben) */
}

.foto-karte.photo-3 {
  top: 50%;           /* Abstand von oben ändern */
  left: 30%;          /* Abstand von links ändern */
  background-image: url('./Sunny 2.jpeg');
    background-size: cover;
  z-index: 0;         /* Wer liegt oben? (Höhere Zahl liegt oben) */
}