.ihp h1 {
  color:rgb(104, 60, 132); 

}
.education h1 {
  color: #0d6e22; 
}
.ihp h3 {
  color:rgb(158, 94, 197); 

}

.education h3 {
  color: #3bc258; 
}
.ihp .sidebar a:hover,
.ihp .sidebar a:focus,
.ihp .sidebar a.active {
    background-color: #683c84 !important; 
}
.education .sidebar a:hover,
.education .sidebar a:focus,
.education .sidebar a.active {
    background-color: #0d6e22!important; 
}

.meetup-carousel {
  position: relative;
  max-width: 900px; 
  margin: 0rem auto;
  aspect-ratio: 15/8;
  overflow: visible;
}

.meetup-carousel .carousel-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.meetup-carousel .carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 1.5rem;
}

.meetup-carousel .carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  padding: 0.8rem 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
}
.meetup-carousel .carousel-arrow:hover {
  background: rgba(255,0,157,0.8);
}

.meetup-carousel .carousel-arrow.left { left: -1.5rem; }
.meetup-carousel .carousel-arrow.right { right: -1.5rem; }


/*============================ Infoboxes ============================= */
.info-box {
  background-color: #11111111;   
  height: 80%;   
  border-radius: 2rem;
  text-align: center;
  padding: 1.5rem;
  margin: 1rem;
  margin-bottom: 2rem;
  transition: transform 0.3s, box-shadow 0.3s;
  box-shadow: 0 0 15px 0 #cacaca69;  
  min-width: 15rem;
  overflow: hidden;
}
.info-box p {
  text-align: center !important;
}


.info-box:hover {
  transform: translateY(1rem);
}
.tab-content {
  overflow: visible;
  z-index: 10;
}

.tabs-wrapper {
  width: 100%;
  border-bottom: 0.1rem solid #fff; 
  padding-bottom: 0.5rem;
  margin-bottom: 2rem; 
  text-align: center;  
}

#educationTabs {
  display: flex;
  justify-content: center; 
  gap: 2rem;
  width: fit-content;      
  margin: 0 auto;       
}
#educationTabs .nav-item { margin: 0; }

#educationTabs .nav-link {
  background-color: #222;
  color: #fff;
  transition: background-color 0.3s;
  padding: 0.5rem 1rem;
  width: 12rem;
  text-align: center;
  display: inline-block;
  border-radius: 4rem;
  box-shadow: 0 0 5px 0 #cacaca69;  
}

#educationTabs .nav-link:hover { 
  background-color: #0a3b15ff; 
  color: #fff; 
  box-shadow: 0 0 10px 0 #cacaca69; 
} 

#educationTabs .nav-link.active { 
  background-color: #0d6e22; 
  color: #e9e9e9; 
  box-shadow: 0 0 10px 0 #cacaca69; 
}
.ihp #educationTabs .nav-link:hover { 
  background-color: #2c173aff !important; 
  color: #fff; 
  box-shadow: 0 0 10px 0 #cacaca69; 
}

.ihp #educationTabs .nav-link.active { 
  background-color: #683c84;  
  color: #e9e9e9; 
  box-shadow: 0 0 10px 0 #cacaca69; 
}
  #educationTabs .nav-item .info-box{ 
    justify-self: auto;
   }


   
#educationTabs.three-tabs {
  justify-content: space-around; 
  margin-left: auto;
  margin-right: auto;
}

.figure-east {
  display: flex;
  flex-direction: column;
  align-items: center; 
}

.figure-east img {
  max-width: 400px;
}

.figure-east figcaption {
  align-self: stretch; 
  text-align: left;
  font-size: 0.9rem;
  color: #fff;
  margin-top: 0.5rem;
}

.highlight {
  background-color: #0d6e22;
  color: #fff;     
  padding: 0.1rem 0.3rem;
  border-radius: 0.2rem; 
}


/* ============================= HUMAN PRACTICES ============================= */
.curved-bg-page { position: relative; padding: 0rem 8rem;}

.hp-scene {
  position: relative;
  width: 100%;
  aspect-ratio: 1600 / 9000;
  /***overflow: hidden;***/

  font-size: clamp(0.68rem, 0.45rem + 0.9vmin, 1.06rem);
  line-height: 1.45;

  container-type: inline-size;
}

.hp-svg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hp-svg svg { width: 100%; height: 100%; display: block; }

.hp-overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; }
.hp-overlay .scene-item { pointer-events: auto; } /* only children interactive */

.scene-item { position: relative; transform: translate(-50%, -50%); }
.scene-item.on-line { will-change: left, top, transform; }

/* ========== COMPONENTS ================================================== */
.curved-text-box {
  position: absolute;
  padding: 1rem 3rem 1rem 1rem;
  background: rgba(20, 20, 30, 1);
  color: #fff;
  border-radius: 2rem;
  border: 2px solid;
  font-size: 1em;           
  z-index: 1;
  overflow-wrap: anywhere;
  hyphens: auto;
}
.curved-text-box h3 { font-size: 1.35em; }

/* Scrollbar für Webkit-Browser */
.curved-text-box::-webkit-scrollbar {
  width: 8px;              /* schmaler */
}

.curved-text-box::-webkit-scrollbar-track {
  background: #001014;
  border-radius: 10px;      /* leicht abgerundet */
  margin: 3rem 0;           /* “zieht” sie optisch nach innen */
}

.curved-text-box::-webkit-scrollbar-thumb {
  background-color: #dfdfdfff;
  border-radius: 10px;
  border: 2px solid #001014; /* sorgt für optischen Abstand */
}

.curved-text-box::-webkit-scrollbar-thumb:hover {
  background-color: #8752a8;
}

/* Neon borders/shadows */
.neon-pink   { border-color: #ff7ab6; box-shadow: 0 0 16px 4px #ff7ab6; }
.neon-orange { border-color: #ffa500; box-shadow: 0 0 16px 4px #ffa500; }
.neon-green  { border-color: #00d084; box-shadow: 0 0 16px 4px #00d084; }
.neon-blue   { border-color: #1e90ff; box-shadow: 0 0 16px 4px #1e90ff; }
.neon-purple { border-color: #b76eff; box-shadow: 0 0 16px 4px #b76eff; }

.bubble-container { position: relative; display: flex; align-items: flex-end; }

.hp-scene .speech-bubble {
    position: relative;
    background: rgba(30, 30, 40, 0.95);
    color: #fff;
    border: 2px solid var(--ring, #ff7ab6);
    border-radius: 1.2em;
    padding: 1em 1.5em;
    max-width: none;
    font-size: 1em;
    min-height: 60px;
    display: flex;
    align-items: center;
    z-index: 2;
    min-inline-size: var(--bubble-min, 260px);
    max-inline-size: var(--bubble-max, min(92cqw, 780px));
}
.speech-bubble::after {
  content: "";
  position: absolute;
  left: -12.8px;
  bottom: 24px;
  width: 22px;
  height: 22px;
  background: rgba(30, 30, 40, 0.95);
  border-left: 2px solid #ff7ab6;
  border-bottom: 2px solid #ff7ab6;
  border-bottom-left-radius: 0.5em;
  transform: rotate(45deg);
  z-index: 3;
}

.speech-bubble.no-tail::after{
  content: none;        /* erzeugt gar kein Pseudo-Element */
}

/* Portrait image (base look) */
.round-img {
  width:  clamp(96px,  calc(var(--r, 150) / 1600 * 100%), 180px);
  height: clamp(96px,  calc(var(--r, 150) / 1600 * 100%), 180px);
  border-radius: 50%;
  border: 4px solid var(--ring, #ff7ab6);
  object-fit: cover;
  overflow: hidden;
  background: #222;
  z-index: 4;
}

/* ========== SCENE-SPECIFIC OVERRIDES =================================== */
/* Inside the scene: container-relative widths, readable line length, height cap + scrolling */
.hp-scene .curved-text-box {
  width: auto; /* neutralize any global width rules */
  inline-size: min(clamp(160px, 60vw, 680px), 60ch);
  font-size: 1em;                /* inherit from scene */
  padding: 0.8em 0.9em;          /* slightly tighter padding */
  max-height: 30vh;              /* fallback, smaller */
  max-height: 30dvh;             /* modern browsers */
  max-height: 30svh;             /* Safari small-viewport */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}

/* Responsive: shrink harder on narrow scenes */
@container (max-width: 900px) {
  .hp-scene .curved-text-box {
    inline-size: min(clamp(180px, 94cqw, 600px), 48ch);
    font-size: 0.92em;
    padding: 0.7em 0.8em;
    max-height: 26vh;
  }
  .hp-scene .curved-text-box h3 { font-size: 1.1em; }
}

@container (max-width: 600px) {
  .hp-scene .curved-text-box {
    inline-size: min(clamp(120px, 98cqw, 420px), 38ch);
    font-size: 0.85em;
    padding: 0.6em 0.6em;
    max-height: 22vh;
  }
  .hp-scene .curved-text-box h3 { font-size: 1em; }
}

/* Portraits scale with the scene width */
.hp-scene .round-img {
  inline-size: clamp(88px, 9cqw, 150px);
  block-size:  clamp(88px, 9cqw, 150px);
  position: absolute;
  z-index: 4;
  pointer-events: auto;
  display: block;
  margin: 0 auto;
}
.hp-scene .bubble-img {
    max-inline-size: clamp(110px, 24cqw, 380px);
    inline-size: auto;
    block-size: auto;
    height: auto;
    width: auto;
    flex: 0 0 auto;
    display: block;
}
/* ========== BUBBLE + IMAGE LAYOUT FIXES (integrated) ==================== */


.hp-scene .face-hotspot{
  position: absolute;
  top: 0;
  left: 50%;      
  width: var(--size, 50px);       
  height: var(--size, 50px);
  transform: translateX(-50%);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: none;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-scene .face-hotspot:hover{
  box-shadow: 0 0 0 2px #ffffff00 inset;
}

/* Popup-Label */
.hp-scene .face-hotspot .name-popup{
  position: absolute;
  top: -2em;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,.8);
  color: #fff;
  padding: .45em .7em;
  border-radius: .5em;
  font-size: .92em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 45;                    
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.4));
  line-height: 1.7;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hp-scene .face-hotspot:hover .name-popup{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ========== CONTAINER QUERIES (shrink harder on narrow scenes) ========= */
@container (max-width: 900px) {
  .hp-scene .curved-text-box {
    inline-size: min(clamp(300px, 94cqw, 720px), 72ch);
    font-size: 0.94em;
    padding: 0.85em 1em;
  }
  .hp-scene .curved-text-box h3 { font-size: 1.18em; }
}

@container (max-width: 600px) {
  .hp-scene .curved-text-box {
    inline-size: min(clamp(240px, 118cqw, 680px), 68ch);
    font-size: 0.88em;
    padding: 0.8em 0.95em;
  }
  .hp-scene .curved-text-box h3 { font-size: 1.12em; }
}

@container (max-width: 600px){
  .hp-scene .speech-bubble{
    min-inline-size: 240px;
    max-inline-size: min(96cqw, 720px);
  }
  .hp-scene .speech-bubble{
    min-inline-size: 200px;
    max-inline-size: min(84cqw, 520px);
    padding: 0.8em 1em;
  }
}


/* ========== FALLBACK (if cqw unsupported) ============================== */
@supports not (width: 50cqw) {
  .hp-scene .curved-text-box {
    inline-size: min(clamp(320px, 100vw, 860px), 68ch);
  }
  .hp-scene .round-img {
    inline-size: clamp(88px, 12vw, 150px);
    block-size:  clamp(88px, 12vw, 150px);
  }
}
/* ====== SIMPLE, ROBUSTER TEXTBOX (ohne Pfeil) ====== */
/* Greift überall, auch wenn das Element nicht in .hp-scene steht */
.hp-textbox {
  display: block;
  position: relative;
  box-sizing: border-box;
  background-color: rgba(30,30,40,.95);
  color: #fff;
  border: 2px solid var(--ring, #ff7ab6);
  border-radius: 1rem;
  padding: .9em 1.1em;
  font-size: 0.85em;
  line-height: 1.45;
  overflow-wrap: anywhere;
  hyphens: auto;
  width: min(100%, var(--tb-max, 480px));
  min-width: var(--tb-min, 220px);
  max-width: var(--tb-max, 480px);

  max-height: 18vh; /* reduced height */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  z-index: 4;

}
/* Webkit Scrollbar */
.hp-textbox::-webkit-scrollbar {
  width: 8px;
}

.hp-textbox::-webkit-scrollbar-track {
  background: #001014;
  border-radius: 10px;
  margin: 6px 0; /* kürzerer Scrollbalken */
}

.hp-textbox::-webkit-scrollbar-thumb {
  background-color: #683c84;
  border-radius: 10px;
  border: 2px solid #001014;
}

.hp-textbox::-webkit-scrollbar-thumb:hover {
  background-color: #8752a8;
}

/* Wenn die Box innerhalb der Szene steht, nutze container-relative Units */
.hp-scene .hp-textbox {
  /* broader width */
inline-size: min(
    clamp(320px, 74cqw, var(--tb-max, 680px)),
    72ch
  );
min-inline-size: var(--tb-min, 220px);
max-inline-size: var(--tb-max, min(98cqw, 680px));

  /* smaller height, scrollable */
  max-block-size: var(--tb-maxh, 11svh);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Sicherstellen, dass runde Bilder darüber liegen */
.hp-scene .round-img{ position: relative; z-index: 5; }

/* 1) Globale Ebenensteuerung pro Szene-Item */
.scene-item{
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: var(--z, 1);   /* Standard-Ebene = 10, per --z überschreibbar */
}

/* 2) Wenn Bild + Textbox im selben Container sind: Bild über Box */
.bubble-container {
  display: flex;
  align-items: center;   /* vertical alignment */
  gap: 0;            /* space between image and textbox */
  position: absolute;    /* for scene-item positioning */
}

.attached-below {
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 0px; /* adjust spacing as needed */
}
.attached-above {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 0px; /* adjust spacing as needed */
}
.attached-left {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0px; /* adjust spacing as needed */
}

/* Utility: Attach textbox to the right of the image, vertically centered */
.attached-right {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0px; /* adjust spacing as needed */
}
.bubble-container .round-img,
.bubble-container .bubble-img{
  position: relative; 
  z-index: 2;               /* Bild über */
}
.bubble-container .hp-textbox{
  position: relative; 
  z-index: 1;               /* Box darunter */
}

/* 3) Kinder z-index nicht mehr erzwingen – Eltern steuern die Ebene */
.hp-textbox{ z-index: auto; }
.speech-bubble{ z-index: auto; }

/* Green glow on hover */
.round-img {
  transition: box-shadow 0.2s, border-color 0.2s;
}
.round-img:hover,
.round-img.active-glow {
  border-color: #683c84 !important;
  box-shadow: 0 0 24px 6px #683c84 !important;
  cursor: pointer;
}

.big-textbox-modal {
  position: fixed;
  left: 0; right: 0; bottom: 0; top: 0;
  background: rgba(0,0,0,0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
}

.big-textbox-content {
  background: #23233a;
  color: #fff;
  border-radius: 2rem;
  max-width: 1100px;      
  width: 50rem;            
  box-sizing: border-box;
  margin-bottom: 2rem;
  padding: 2em 2.5em 2em 2.5em;
  position: relative;
  box-shadow: 0 0 32px 8px #683c84, 0 0 32px 8px #000a;
  min-height: 180px;
  max-height: 80vh;
  overflow-y: auto;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 3px solid #683c84;
  animation: glow-green 1.2s infinite alternate;
}
.big-textbox-content::-webkit-scrollbar {
  width: 8px;              
}

.big-textbox-content::-webkit-scrollbar-track {
  background: #001014;
  border-radius: 10px;      
  margin: 3rem 0;          
}

.big-textbox-content::-webkit-scrollbar-thumb {
  background-color: #dfdfdfff;
  border-radius: 10px;
  border: 2px solid #001014;
}

.big-textbox-content::-webkit-scrollbar-thumb:hover {
  background-color: #8752a8;
}

@keyframes glow-pruple {
  from { box-shadow: 0 0 32px 8px #683c84, 0 0 32px 8px #000a; }
  to   { box-shadow: 0 0 48px 16px #683c84, 0 0 32px 8px #000a; }
}

.big-textbox-title {
  font-size: 1.3em;
  font-weight: bold;
  margin-bottom: 1em;
  color: #d1a6ecff;
  text-align: center;
  text-shadow: 0 0 8px #683c84;
}

.big-textbox-close {
  position: absolute;
  top: 0.7em;
  right: 0.7em;
  background: none;
  border: none;
  color: #fff;
  font-size: 2.2em;
  cursor: pointer;
  z-index: 3;
  padding: 0;
  line-height: 1;
}

.big-textbox-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
  color: white;
  border: none;
  padding: 0.8rem 1.2rem;
  border-radius: 50%;
  cursor: pointer;
  z-index: 5;
}

.big-textbox-arrow:hover {
  background: rgba(255,0,157,0.8);
}

.big-textbox-arrow.left { left: 20rem; }
.big-textbox-arrow.right { right: 20rem;}

#big-textbox-body { margin-top: 1.5em; font-size: 1.15em; }

.scene-item:hover .round-img:hover,
.scene-item:hover .face-hotspot:hover ~ .round-img,
.scene-item .face-hotspot:focus ~ .round-img {
  border-color: #cb8bf3ff!important;
  box-shadow: 0 0 30px 6px #683c84 !important;
  cursor: pointer;
}

.experts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2rem;
  text-align: center;
}
.expert-name {
  font-weight: bold;
  margin-bottom: 0.5rem;
}
.expert-img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 0.5rem;
}
.expert-desc {
  margin-top: 0.5em;
  font-size: 0.97em;
  font-style: italic;
  line-height: 1.4;
}
.expert-role {
  font-weight: bold;
  color: #ffffffff;
   margin-bottom: 5rem;
}

.expert-affil {
  color: #b3b3b3ff;
  font-style: normal;
  margin-bottom: 0.5rem;

}
.expert-special {
  color: #ffffffff;
  font-size: 0.95em;
  display: block;
  margin-top: 0.3em;
     margin-bottom: 0.5rem;

}
.experts-list-section {
  margin-top: 2rem;
}
.experts-list-section ul {
  padding-left: 1.2em;
}
.fullscreen-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(20, 20, 30, 0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.fullscreen-modal[hidden] { display: none; }
.fullscreen-close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 2.5rem;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
}
.fullscreen-content {
  max-width: 800px;
  width: 90vw;
  max-height: 80vh;
  overflow-y: auto;
  background: #23233a;
  padding: 2rem;
  border-radius: 1rem;
  box-shadow: 0 0 40px #000a;
}
/* Scrollbar für Webkit-Browser */
.fullscreen-content::-webkit-scrollbar {
  width: 8px;              /* schmaler */
}

.fullscreen-content::-webkit-scrollbar-track {
  background: #001014;
  border-radius: 10px;      /* leicht abgerundet */
  margin: 3rem 0;           /* “zieht” sie optisch nach innen */
}

.fullscreen-content::-webkit-scrollbar-thumb {
  background-color: #dfdfdfff;
  border-radius: 10px;
  border: 2px solid #001014; /* sorgt für optischen Abstand */
}

.fullscreen-content::-webkit-scrollbar-thumb:hover {
  background-color: #8752a8;
}

.big-textbox-modal h2,
.big-textbox-modal h3,
.big-textbox-modal h4,
.fullscreen-modal h2,
.fullscreen-modal h3,
.fullscreen-modal h4 {
  text-align: center;
  margin-top: 1.2em;
  margin-bottom: 0.6em;
}


.big-textbox-modal h2,
.fullscreen-modal h2 {
  color: rgb(141, 0, 106); 
  border-bottom: none !important; 
}

.big-textbox-modal h3,
.fullscreen-modal h3 {
  color: #c20071ff; 
}

.big-textbox-modal h4,
.fullscreen-modal h4 {
  color: #ff008cff; 
}
.fullscreen-modal p,
.big-textbox-modal p {
  text-align: justify;
  hyphens: auto;
}
.not-round {
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  max-width: 100%;
  max-height: 300px; /* adjust as needed */
  object-fit: unset !important;
}

.hp-scene .bubble-container:hover .face-hotspot .name-popup,
.hp-scene .round-img:hover + .face-hotspot .name-popup {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.hp-scene .bubble-container:hover .face-hotspot .name-popup {
  opacity: 1;
  transform: translate(-50%, -110%);
}



.ihp-connie-wrapper {
  position: relative; /* So speech bubble can be positioned relative to Connie */
  display: inline-block;
}  


.ihp-connie-img {
  width: 20rem;       /* size of Connie image */
  z-index: 5;
}
/* -------------------------
   IHP speech bubble (final)
   ------------------------- */
.ihp-speech-bubble {
  position: absolute;
  top: 5rem;
  left: 40rem;
  transform: translateX(-50%);
  --ihp-pointer-size: 2.4rem;    /* größe des äußeren pfeils (anpassen) */
  --ihp-border-width: 0.5rem;    /* gleicher wert wie dein Rahmen */
  --ihp-left-offset: 1.2rem;     /* verschiebung vom linken rand der bubble */
  --ihp-border-color: #683c84;
  --ihp-bubble-color: #ffffff;

  background-color: var(--ihp-bubble-color);
  color: #000000;
  padding: 1rem;
  border-radius: 2rem;
  border: var(--ihp-border-width) solid var(--ihp-border-color);
  width: 50rem;
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.3;
  z-index: 0;
}

/* zentrierter text */
.ihp-speech-bubble p {
  margin: 0;
  text-align: center;
  color: #000;
    z-index: 0;

}


/* Speech bubble arrow pointing top-left */
.ihp-speech-bubble::after {
content: "";
position: absolute;
top: 4rem; 
left: 0;
transform: translateX(-80%) translateY(-100%); 
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid #ffffff;
border-bottom: 15px solid transparent; 
border-top: 15px solid transparent;
  z-index: 0;

}


.see-more-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.8rem 1.5rem;
  border-radius: 1.5rem;
  background-color: #0d1013;  /* dunkler Hintergrund */
  color: #a0eaff;             /* hellblau Text */
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.4s ease, transform 0.2s ease, box-shadow 0.3s ease;
  cursor: pointer;
  border: none;
  outline: none;
  z-index: 4;
}

.see-more-btn:hover,
.see-more-btn:focus,
.see-more-btn:active {
  background-color: #00c8ff;  /* hellblauer Hover-Hintergrund */
  color: #ffffff;             /* optional: Text weiß beim Hover */
  transform: scale(1.05);
  box-shadow: 0 0 15px #00c8ff;
}



/* ========================== MOBILE OVERRIDES ========================== */
@media (max-width: 600px) {

  /* ================== Scene ================== */
  .hp-scene {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    min-height: auto !important;  /* allow page to extend naturally */
    padding-bottom: 2rem !important;
  }
  /* ================== Speech bubbles ================== */
  .ihp-speech-bubble,
  .ihp-speech-bubble::after,
   .ihp-connie-img, .responsive-img-small, .responsive-img-medium{
    display: none !important;
  }

  /* ================== Portraits ================== */
  .round-img,
  .bubble-img {
    display: block !important;
    margin: 1rem auto !important;
    width: 50vw !important;
    max-width: 120px !important;
    height: auto !important;
    position: relative !important;
    z-index: 1 !important; /* behind text boxes */
  }
  /* ================== Text boxes ================== */
  .curved-text-box {
    position: relative !important;
    z-index: 999 !important;   /* always above portraits */
     top: auto !important;
    left: auto !important;
        transform: none !important;
    margin: 1rem auto !important;
    width: 90vw !important;
    max-width: 95vw !important;
    text-align: center !important;
    font-size: 1rem !important;
    padding: 1rem !important;
    max-height: 40vh !important;
  }

  /* Remove pseudo-elements that could overlap */
  .curved-text-box::after {
    display: none !important;
  }


  /* Center all textboxes */
  .hp-textbox {
     display: none !important;
  }
    .curved-text-box::after,
  .hp-textbox::after,
  .speech-bubble::after {
    display: none !important;
  }
  /* ================== Buttons ================== */
  .see-more-btn {
    display: none !important;

  }

  /* ================== Big modal ================== */
  .big-textbox-modal,
  .fullscreen-modal {
    display: none !important;
  }
  
  .big-textbox-content,
  .fullscreen-content {
    display: none !important;
  }
  
  .big-textbox-arrow.left,
  .big-textbox-arrow.right {
    display: none !important;
  }
  

  /* ================== Expert grid ================== */
   .experts-grid {
    display: none !important;
  }
  


  .expert-img {
    display: none !important;
  }
      .bubble-container.scene-item {
        display: none !important;
    }

    .big-textbox-arrow {
    display: none !important;
  }


}

.mobile-warning {
  display: none;                /* hidden by default */
  color: #fff;                  /* white text */
  text-align: center;
  padding: 1rem;
  font-size: 1rem;
}

@media (max-width: 480px) {
  .mobile-warning {
    display: block;             /* show on small screens */
    position: fixed;            /* keep it visible */
    background-color: #000;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
  }
}
/* Small responsive image */
.responsive-img-small {
  border: none !important;
  border-radius: 0 !important;
  max-width: min(100%, 100px);
  height: auto;
  object-fit: contain;
  display: block;
  margin: 1rem auto;
}

/* Medium responsive image */
.responsive-img-medium {
  border: none !important;
  border-radius: 0 !important;
  max-width: min(100%, 200px);
  height: auto;
  object-fit: contain;
  display: block;
  margin: 1rem auto;
}

.hp-scene .responsive-img-small,
.hp-scene .responsive-img-medium {
  margin: 0;
  max-width: min(90cqw, var(--img-max, 400px)) !important;
  min-width: var(--img-min, 100px) !important;
  transform: translateX(-50%);
}

/* Flying Connie container */
.flying-connie-container {
  position: relative;
  display: flex;
  align-items: center;
  /* Start hidden and positioned off-screen RIGHT */
  transform: translateX(150vw) translateY(20px);
  opacity: 0;
  /* Animation will be triggered by scroll */
  animation: flyInFromRight 2s ease-out forwards;
  animation-play-state: paused;
}

/* When visible, play animation */
.flying-connie-container.animate {
  animation-play-state: running;
}

/* Flying animation from RIGHT */
@keyframes flyInFromRight {
  0% {
    transform: translateX(150vw) translateY(20px);
    opacity: 0;
  }
  70% {
    transform: translateX(-10px) translateY(-5px);
    opacity: 1;
  }
  100% {
    transform: translateX(0) translateY(0);
    opacity: 1;
  }
}

/* Connie image */
.flying-connie {
  width: clamp(80px, 12vw, 150px);
  height: auto;
  z-index: 5;
  border: none !important;
  border-radius: 0 !important;
}

/* Speech bubble */
.connie-speech-bubble {
  position: relative;
  background: #ffffff;
  color: #000000;
  padding: clamp(0.8rem, 1.2rem, 1.5rem);
  border-radius: 1.5rem;
  border: 3px solid #683c84;
  margin-left: 1rem;
  font-size: clamp(0.9rem, 1.1rem, 1.3rem);
  font-weight: 600;
  line-height: 1.4;
  min-width: clamp(250px, 35vw, 450px);
  max-width: clamp(300px, 45vw, 550px);
  box-shadow: 0 4px 20px rgba(104, 60, 132, 0.4);
  z-index: 10;
}

/* Speech bubble arrow */
.connie-speech-bubble::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-right: 10px solid #ffffff;
  border-bottom: 10px solid transparent;
  z-index: 2;
}

.connie-speech-bubble::after {
  content: "";
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-right: 12px solid #683c84;
  border-bottom: 12px solid transparent;
  z-index: 1;
}

/* Text styling - ensure maximum visibility */
.connie-speech-bubble p {
  margin: 0;
  text-align: center;
  line-height: 1.4;
  color: #000000 !important;
  font-weight: 600 !important;
  text-shadow: none !important;
  opacity: 1 !important;
  background: transparent !important;
}