
/* nur auf dieser Seite: Page breiter 
.page{ max-width: 1600px; }*/

/* NUR Hydrologie-Seite breiter */
body.hydrologie-page .page{
  max-width: 1600px;
}


.hydro-img{
  max-width: 100%;
  height: auto;
  display: block;
}


/**
.cloud-tip__text{
  white-space: pre-line;
}**/

.cloud-tip__inner{
  position: relative;
  padding: 12px 14px;

  /* statt fester 320px: dynamisch */
  display: inline-block;
  /**width: fit-content;                 /* passt sich dem Text an */
	width: max-content;
  /**max-width: min(70vw, 520px);        /* aber nie zu breit */
	max-width: calc(100vw - 1px);
  min-width: 160px;                   /* optional: nicht zu klein */

  white-space: pre-line;              /* deine Zeilenumbrüche */
  color: rgba(255,215,0,0.98);
  font-size: 13px;
  line-height: 1.35;

  background: rgba(11, 15, 22, 0.96);
  border: 1px solid rgba(255,215,0,0.65);
  border-radius: 28px;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.35));
}


/* Container für Bild + Hotspots */
.hydro-stage{
  position: relative;
  width: 100%;
  max-width: 1600px;     /* optional, passt zur Bildgröße */
  margin: 14px auto 0;
}

/* Bild passt sich an Breite an */
.hydro-img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;   /* optional */
}

/* Hotspots */
.hydro-spot{
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);

  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,215,0,0.65);
  background: rgba(11,15,22,0.70);
  color: rgba(255,215,0,0.98);

  font-size: 13px;
  cursor: help;
  user-select: none;
  white-space: nowrap;
}

/* Hotspots */
.hydro-spot2{
  position: absolute;
  left: var(--x);
  top: var(--y);
  transform: translate(-50%, -50%);

  padding: 6px 10px;
  border-radius: 999px;
  border: 0px solid rgba(255,215,0,0.65);
  background: rgba(11,15,22,0.70);
  color: rgba(255,215,0,0.98);

  font-size: 11px;
  cursor: help;
  user-select: none;
  white-space: nowrap;
}

.hydro-spot:hover,
.hydro-spot:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,215,0,0.22);
}
