/* 



ACHTUNG :  bei veränderung IMMER version anpassen:

<link rel="stylesheet" href="/tooltip.css?v=1">














Desktop Tooltip - Post-it style */
.tooltip-box {
  position: absolute;
  padding: 8px 12px;
  background: #fff9c4; /* Light yellow background like a Post-it */
  color: #333; /* Dark text for better readability */
  border-radius: 2px; /* Slightly rounded corners */
  font-size: 14px;
  white-space: normal; /* Allow text to wrap */
  pointer-events: none; /* Makes tooltip click-through by default */
  z-index: 1000;
  transform: translate(-50%, 0); /* Center horizontally */
  display: none;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2), 2px 2px 2px rgba(0,0,0,0.1); /* Subtle shadow */
  max-width: 300px; /* Wider to fit more text */
  text-align: left; /* Left align for better readability */
  width: max-content; /* Allows the box to grow up to max-width based on content */
  /* Removed max-height and overflow properties to ensure all content is shown */
  border: 1px solid #e6d798; /* Subtle border */
  opacity: 0.95; /* Slightly transparent to see the input underneath */
}

/* Add arrow indicators for tooltip positioning */
.tooltip-box.tooltip-above:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  margin-left: -8px;
  border-width: 8px 8px 0;
  border-style: solid;
  border-color: #fff9c4 transparent transparent;
  pointer-events: none; /* Ensure arrow is also click-through */
}

.tooltip-box.tooltip-below:after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  margin-left: -8px;
  border-width: 0 8px 8px;
  border-style: solid;
  border-color: transparent transparent #fff9c4;
  pointer-events: none; /* Ensure arrow is also click-through */
}

/* Specialized style for tooltips on input fields */
.tooltip-box.tooltip-input-active {
  opacity: 0.9; /* Further reduce opacity when over inputs */
  box-shadow: 0 1px 3px rgba(0,0,0,0.1); /* Lighter shadow */
  font-size: 12px; /* Slightly smaller font */
  padding: 6px 10px; /* Slightly smaller padding */
  background-color: #fffde0; /* Lighter yellow background */
  border-color: #e6d798; /* Same border color */
  z-index: 999; /* Slightly lower z-index */
  transform: translate(-50%, 0) scale(0.95); /* Slightly smaller scale */
  transition: opacity 0.2s ease, transform 0.2s ease; /* Smooth transition */
}

/* [Info]-Trigger (Link/Button) */
.tooltip-info-trigger {
  display: inline-block;
  cursor: pointer;
  color: #0077cc;
  font-size: 13px;
  margin-left: 10px;
  text-decoration: none !important;
  position: relative; /* This helps with positioning the info box */
  transition: color 0.2s ease;

}

.tooltip-info-trigger:hover {
  color: #005599 !important;
}

/* Icon-Farbe beim Hover ändern */
.tooltip-info-trigger:hover .info-icon {
  background-color: orange; /* Dunkleres Blau beim Hover */
}

/* Neue Klasse für das Icon */
.info-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #0077cc;
  color: white;
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  margin-left: 5px;
  text-decoration: none;
}

/* Sicherstellen, dass die Unterstreichung nicht durch das Icon geht */
.tooltip-info-trigger .info-icon {
  text-decoration: none;
}




/* Große Infobox - Post-it style */
.tooltip-info-box {
  display: none;
  background: #fff9c4; /* Light yellow background like a Post-it */
  padding: 12px 15px;
  border: 1px solid #e6d798; /* Subtle border */
  border-radius: 2px; /* Slight rounded corners */
  font-size: 14px;
  color: #333; /* Dark text */
  max-width: 320px;
  min-width: 320px; 
  line-height: 1.5;
  position: absolute; /* Changed from relative to absolute */
  z-index: 1001; /* Higher than regular tooltips */
  box-shadow: 1px 1px 3px rgba(0,0,0,0.1), 2px 2px 3px rgba(0,0,0,0.05); /* Subtle shadow effect */
  width: 100%; /* Take full width of parent container */
  transform: rotate(0.3deg); /* Slight rotation for Post-it feel */
  cursor: pointer; /* Added cursor pointer to indicate clickability */
  top: 100%; /* Position below the trigger element */
  left: 0; /* Align with left edge of container */
  margin-top: 8px; /* Small gap between trigger and tooltip */
}


/* Content container for info box */
.tooltip-info-content {
  width: 100%;
}

/* Style for links in tooltips and info boxes */
.tooltip-box a,
.tooltip-info-content a {
  color: #0066cc; /* Darker blue for better contrast on yellow */
  text-decoration: underline;
  cursor: pointer; /* Ensure links have pointer cursor */
  position: relative; /* Ensure links have clickable area */
  z-index: 2; /* Make links appear above the box for click handling */
}

.tooltip-box a:hover,
.tooltip-info-content a:hover {
  color: #004499;
}

/* Basic styling for content inside tooltips */
.tooltip-box p,
.tooltip-info-content p {
  margin: 0 0 8px 0;
}

.tooltip-box p:last-child,
.tooltip-info-content p:last-child {
  margin-bottom: 0;
}

.tooltip-box ul,
.tooltip-info-content ul {
  padding-left: 18px;
  margin: 5px 0;
}

.tooltip-box code,
.tooltip-info-content code {
  background: rgba(0,0,0,0.05);
  padding: 2px 4px;
  border-radius: 3px;
  font-family: monospace;
  color: #333;
}

/* Schließen-Button in der Infobox - styled for Post-it */
.tooltip-info-close {
  position: absolute;
  top: 6px;
  right: 8px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  color: #555;
  background: #ffe066; /* Slightly darker yellow */
  width: 16px;
  height: 16px;
  text-align: center;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e6d798; /* Matching border */
  z-index: 3; /* Ensure this is on top of everything else */
}

.tooltip-info-close:hover {
  background: #ffd42a; /* Even darker yellow on hover */
  color: #333;
}