@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.
  
  Wenn sich die Höhe des Bildes von 370px auf 280px verringert, 
  das Overlay aber von 173px auf 178px wächst, statt kleiner zu werden, 
  gibt es mathematisch und CSS-technisch nur eine einzige logische Ursache:D
  as Overlay berechnet seine Höhe nicht relativ zum Bild, sondern das Elternelement 
  (.image-container) zieht sich in der Höhe massiv in die Länge und wird beim 
  Verkleinern des Fensters höher statt flacher. 
  
  Da das Bild auf height: auto steht, behält es seine Proportionen, aber der
  
   Container umgibt es nicht mehr passgenau.Das passiert fast immer, wenn das 
   übergeordnete Element ein Flexbox-Container ist. Flexbox zwingt Kinder 
   standardmäßig dazu, sich auf die volle Höhe des Containers zu 
   strecken (align-items: stretch). Wenn nun ein anderes Element in derselben 
   Flex-Zeile (z. B. eine Textbox oder ein anderes Bild daneben) durch den 
   Umbruch mehr Platz nach unten benötigt, wird Ihr .image-container mitgezogen. 
   Das Bild bleibt klein, der Container wird riesig – und das Overlay wandert 
   mit den Prozentwerten nach unten.
  
  
  
  
  
**/

.image-container {
    position: relative;
    display: block; 
    width: 100%;
    max-width: 600px;
    
    /* NEU: Verhindert, dass Flexbox den Container in die Höhe zieht */
    align-self: flex-start; 
    height: fit-content;
}

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

.overlay-box {
    position: absolute;
    top: 15%;
    left: 6.6%;
    width: 52.4%;
    height: 44%;
    
    /* Weiterhin wichtig, damit Padding die Box nicht vergrößert */
    box-sizing: border-box; 
    
    background-color: rgba(254, 235, 186, 0.8);
    border: 2px solid #000;
    border-radius: 4px;
    padding: 10px;
}