/* ==========================================================================
   1. BASICS & LAYOUT CONTAINER
   ========================================================================== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

img {
  border: 0;
  display: block;
  max-width: 100%;
  height: auto;
}

.tab_freud {
  position: relative;
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 330px;
}

/* ==========================================================================
   2. PANELS & HOTSPOTS (DESKTOP)
   ========================================================================== */
.comic-panel {
  position: relative;
  width: 330px;
}

.panel-img {
  width: 330px;
  height: auto;
}

.interactive-area {
  position: absolute;
  cursor: help;
  z-index: 10;
  outline: none;
}

/* Exakte Hotspot-Koordinaten auf den Bildern */
.area-s1 { left: 251px; top: 0px;  width: 78px;  height: 27px; }  
.area-s2 { left: 228px; top: 0px;  width: 91px;  height: 35px; }  
.area-s5 { left: 4px;   top: 23px; width: 48px;  height: 31px; }  
.area-s4 { left: 186px; top: 0px;  width: 131px; height: 35px; }  
.area-s6 { left: 13px;  top: 0px;  width: 142px; height: 40px; } 
.area-s3 { left: 105px; top: 41px; width: 69px;  height: 27px; }  

/* ==========================================================================
   3. DESKTOP POSITIONIERUNG & RECHTS-/LINKS-AUSRICHTUNG OUTSIDE
   ========================================================================== */
.speech-bubble {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease-in-out, visibility 0.15s ease-in-out;
  pointer-events: none;
}

/* Rechts außerhalb der Bildkante */
#sbla1, #sbla2, #sbla4 {
  left: 100%;
  margin-left: 15px;
  right: auto;
  margin-right: 0;
}

/* Links außerhalb der Bildkante */
#sbla5 {
  right: 100%;
  margin-right: 15px;
  left: auto;
  margin-left: 0;
}

/* Weit links außerhalb der Bildkante */
#sbla3 {
  right: 100%;
  margin-right: 140px;  
  left: auto;
  margin-left: 0;
}

/* Links neben dem Hauptbildanfang */
#sbla6 {
  right: 100%;
  margin-right: 15px;
  left: auto;
  margin-left: 0;
}

/* Spezifische Dimensionen und vertikale Positionierung */
#sbla1 { top: 0px;    width: 210px; height: 100px; z-index: 101; } 
#sbla2 { top: 10px;   width: 210px; height: 100px; z-index: 102; }
#sbla4 { top: 5px;    width: 210px; height: 80px;  z-index: 104; }
#sbla5 { top: -10px;  width: 180px; height: 100px; z-index: 105; } 
#sbla6 { top: 0px;    width: 210px; height: 100px; z-index: 106; } 
#sbla3 { top: -20px;  width: 210px; height: 80px;  z-index: 103; } 

/* Aktivierung bei Maus-Hover oder Fokus */
.interactive-area:hover .speech-bubble,
.interactive-area:focus-visible .speech-bubble {
  opacity: 1;
  visibility: visible;
}

.back-nav {
  margin-top: 15px;
  padding-left: 2px;
}

.back-link {
  display: inline-block;
  transition: transform 0.1s ease;
}

.back-link:hover {
  transform: scale(1.1);
}

/* ==========================================================================
   4. MEDIA QUERY (MOBILGERÄTE < 710px) - SPRECHBLASEN DEAKTIVIERT
   ========================================================================== */
@media screen and (max-width: 710px) {
  .tab_freud {
    max-width: 100%;
    padding: 0 10px;
    align-items: center;
  }

  .comic-panel {
    max-width: 100%;
  }

  /* KORREKTUR: Komplette Deaktivierung und Ausblendung aller Sprechblasen auf Mobilgeräten */
  .speech-bubble {
    display: none !important;
  }

  /* Hotspots deaktivieren, da mobil funktionslos */
  .interactive-area {
    display: none !important;
  }
}