@charset "UTF-8";

/*
position: relative: Der Container ist der Bezugspunkt für alles,
 was darin absolut positioniert wird.position: absolute: Erlaubt es dir, 
 das Overlay pixelgenau oder prozentual über dem Bild zu platzieren 
 (mit top, bottom, left, right).Dynamische Änderung: Da das Overlay 
 ein eigenständiges div ist, kannst du den Text oder den Inhalt 
 (z.B. mit JavaScript über document.querySelector('.overlay-
 box').innerHTML = "Neuer Text";) jederzeit problemlos ändern, 
 ohne dass das Bild darunter beeinflusst wird.
 
 Die goldene Regel für Überlagerungen lautet:
  Der Container muss relative sein, 
  aber das Overlay selbst muss absolute sein.
**/


.image-container {
    position: relative;
    display: inline-block; /* Passt die Größe an das Bild an */
    width: 100%;
    max-width: 600px;
}

.image-container img {
    width: 100%;
    height: auto;
    display: block;
}

.overlay-box {
    position: absolute;
    /* Hier bestimmst du die Position auf dem Bild */
    top: 14%;  /* 20% von oben */
    left: 4%; /* 10% von links */
    width: 55%;  /* Breite des Overlays */
    height: 50%; /* Höhe des Overlays */
    
    /* Styling für das Overlay (optional)  #feecba  ist Farbe  */
    background-color: rgba(254, 235, 186, 0.8);
    border: 2px solid #000;
    border-radius: 4px;
    padding: 10px;
}