.scrollToTop {
  width: 200px;
  padding: 5px;
  font-size: 14px;
  text-align: center;
  background: whitesmoke;
  font-weight: 300;
  color: #333;
  text-decoration: none;
  position: fixed;
  background-color: #eee;
  border: 1px solid #ddd;
  margin: 0px 0 0 -100px;
  left: 50%;
  bottom: 0;
  display: none;
  z-index: 100;
  border-radius: 2px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.input-clear {
    border: unset;
    background: none;
    display: none;
    position: absolute;
    right: 7.2rem;
    top: 17px;
    transform: translateY(-52%);
    cursor: pointer;
    font-weight: bold;
    font-size: 26px;
    color: #8b8b8b;
    z-index: 100;
}


/* Hochformat (Portrait) */
@media (max-width: 768px) and (orientation: portrait) {
.input-clear {
    right: 4.5rem;
	top: 18px;
}
}



.ref{
  color: #000080 !important;
}

.modern-badge {
  margin-right: 5px;
  padding: 3px 5px;             /* luftiges Padding */
  color: #333;                   /* dunkler Text */
  border: 1px solid #ccc;        /* dezenter Rahmen */
  border-radius: 10px;           /* pillenförmig */
  background-color: #fbffbe;     /* helles, neutrales Hintergrund */
  transition: all 0.2s ease-in-out;
}

.modern-badge:hover {
  border-color: #888;            /* subtiler Rahmenwechsel */
  background-color: #fff;        /* minimaler Hover-Effekt */
  cursor: default;
}


.abk-tooltip {
    position: relative;
    cursor: help;
}

.abk-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    left: 0;
    bottom: 100%;
    background: #333;
    color: #fff;
    padding: 5px 8px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.1s; /* sehr schneller Fade-in */
}

.abk-tooltip:hover::after {
    opacity: 1; /* erscheint sofort beim Hover */
}