<style>
    /* Baum-Styles... (unverändert) */
    .tree {
      --spacing: 1rem;
      --radius: 6px;
    }

    /* ... weiterer Baum- und Tabler-Custom CSS ... */
    tr.table-warning.row-framed,
    tr.table-warning.row-framed>th,
    tr.table-warning.row-framed>td {
      background-color: #f6f7f9 !important;
    }

    tr.row-framed>td,
    tr.row-framed>th {
      border-top: 1px solid #dfe3e7;
      border-bottom: 1px solid #dfe3e7;
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    }

    tr.row-framed>td:first-child,
    tr.row-framed>th:first-child {
      border-left: 1px solid #dfe3e7;
      border-top-left-radius: 8px;
      border-bottom-left-radius: 8px;
    }

    tr.row-framed>td:last-child,
    tr.row-framed>th:last-child {
      border-right: 1px solid #dfe3e7;
      border-top-right-radius: 8px;
      border-bottom-right-radius: 8px;
    }
</style>
 <style>
                /* Professional word cloud styles */
.wordcloud{
  width:100%;
  /* feste, responsive Höhe statt 100% von unbekannt */
  height: clamp(260px, 32vh, 420px) !important; 
  min-height: 320px;
  margin: 0;
  padding: 0;
  page-break-after: always;
  page-break-inside: avoid;
  overflow: hidden;
}

.wordcloud a{
  color: inherit;              /* color comes from weight rules below */
  text-decoration: none;
  display: inline-block;
  padding: .15em .25em;
  border-radius: .5rem;
  font-weight: 700;
  will-change: transform;
  transition: transform .15s ease, text-shadow .15s ease,
              color .15s ease, background-color .15s ease;
}

/* Size + color scale (map to your data-weight values) */
.wordcloud [data-weight="10"] > a{
  font-size: clamp(1.6rem, 1rem + 3.5vw, 3.4rem);
  color: var(--w10);
  font-weight: 800;
}
.wordcloud [data-weight="9"] > a{
  font-size: clamp(1.35rem, .9rem + 2.5vw, 2.6rem);
  color: var(--w6);
}
.wordcloud [data-weight="8"] > a{
  font-size: clamp(1.35rem, .9rem + 2.5vw, 2.6rem);
  color: var(--w6);
}
.wordcloud [data-weight="7"] > a{
  font-size: clamp(1.35rem, .9rem + 2.5vw, 2.6rem);
  color: var(--w6);
}
.wordcloud [data-weight="6"] > a{
  font-size: clamp(1.35rem, .9rem + 2.5vw, 2.6rem);
  color: var(--w6);
}

.wordcloud [data-weight="4"] > a{
  font-size: clamp(1.2rem, .85rem + 1.9vw, 2rem);
  color: var(--w3);
}
.wordcloud [data-weight="5"] > a{
  font-size: clamp(1.2rem, .85rem + 1.9vw, 2rem);
  color: var(--w3);
}
.wordcloud [data-weight="3"] > a{
  font-size: clamp(1.2rem, .85rem + 1.9vw, 2rem);
  color: var(--w3);
}

.wordcloud [data-weight="2"] > a{
  font-size: clamp(1.1rem, .8rem + 1.4vw, 1.6rem);
  color: var(--w2);
}

.wordcloud [data-weight="1"] > a{
  font-size: clamp(1rem, .75rem + 1vw, 1.3rem);
  color: var(--w1);
}

/* Hover/focus polish */
.wordcloud a:hover,
.wordcloud a:focus-visible{
  transform: translateY(-2px) scale(1.06);
  text-shadow: 0 .25rem .75rem rgba(31,101,156,.25);
  outline: none;
  background: rgba(31,101,156,.08);
}

/* Accessible focus ring */
.wordcloud a:focus-visible{
  box-shadow: 0 0 0 3px rgba(31,101,156,.25);
}

/* Motion & dark-mode niceties */
@media (prefers-reduced-motion: reduce){
  .wordcloud a{ transition: none; }
  .wordcloud a:hover,
  .wordcloud a:focus-visible{ transform: none; }
}

@media (prefers-color-scheme: dark){
  .wordcloud{
    --w1:#8EC1E8; --w2:#64AEE1; --w3:#3D8DD3; --w6:#277FC4; --w10:#1F659C;
  }
  .wordcloud a:hover,
  .wordcloud a:focus-visible{
    background: rgba(174,210,239,.18);
  }
}

            </style>
            <style>

  .autocomplete {
    position: absolute;
    z-index: 10000;
    background: #fff;
    border: 1px solid #d0d7de;
    border-radius: .25rem;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
    max-height: 240px;
    overflow: auto;
  }

  .autocomplete.hidden {
    display: none;
  }

  .autocomplete .item {
    padding: .35rem .5rem;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .autocomplete .item.active,
  .autocomplete .item:hover {
    background: #f6f8fa;
  }



@media (min-width: 992px){
  /* Fester rechter Tray */
  #tray_suchverlauf{
    position: fixed;
    right: 12px;                 /* Abstand zur rechten Kante */
    top: 92px;                   /* ggf. an deine Headerhöhe anpassen */
    width: 360px;                /* Breite der rechten Spalte */
    z-index: 1030;               /* über Content, unter Offcanvas/Modals */
  }

  /* Wenn angepinnt: dem Hauptcontainer rechts Platz lassen */
  body.is-pinned #carelit_main{
    padding-right: 384px;        /* Traybreite + Abstand (24px) */
  }

  /* Verhindert horizontales Scrollen durch Schatten/Abstände */
  body.is-pinned{
    overflow-x: hidden;
  }
}

@media (min-width: 992px){
  /* fester Tray rechts */
  #tray_suchverlauf{
    position: fixed;
    right: 12px;
    top: 92px;            /* ggf. an deinen Header anpassen */
    bottom: 12px;         /* Höhe = 100vh - top - bottom */
    width: 360px;
    z-index: 1030;
    display: flex;
    flex-direction: column;
    overflow: hidden;     /* Scroll nur im Body der Card */
  }

  /* Card füllt den Tray komplett */
  #tray_suchverlauf .card{
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;        /* wichtig für korrektes Flex-Scrolling */
  }

  /* hier passiert der eigene Scroll */
  #tray_suchverlauf .card-body{
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
  }

  /* Platz für den Tray im Content schaffen */
  body.is-pinned #carelit_main{
    padding-right: calc(360px + 24px);
    overflow-x: hidden;
  }
}

.border-dashed { border-style: dashed !important; }

</style>

<style>
  /* Grid & Abstände etwas kompakter */
.search-side .chip-grid{
  display:flex; flex-wrap:wrap; gap:6px;
}

/* Basis: klein + glassy + blau */
.search-side .chip{
  --blue-r:59; --blue-g:130; --blue-b:246; /* Blau 500 */
  padding:.26rem .56rem;
  font-size:.78rem;
  line-height:1;
  border-radius:999px;
  border:1px solid rgba(var(--blue-r),var(--blue-g),var(--blue-b),.35);
  background: linear-gradient(135deg,
              rgba(var(--blue-r),var(--blue-g),var(--blue-b),.12) 0%,
              rgba(var(--blue-r),var(--blue-g),var(--blue-b),.06) 100%);
  color:#0b3b8a; /* dezentes Dunkelblau für Text */
  backdrop-filter:saturate(140%) blur(8px);
  -webkit-backdrop-filter:saturate(140%) blur(8px);
  box-shadow:
     inset 0 1px 0 rgba(255,255,255,.35),
     0 6px 16px rgba(var(--blue-r),var(--blue-g),var(--blue-b),.18);
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease,
             background-color .15s ease, border-color .15s ease;
}
.search-side .chip .bi{ opacity:.9; }

/* leichtes Hover/Active-Feedback */
.search-side .chip:hover{
  transform:translateY(-1px);
  border-color:rgba(var(--blue-r),var(--blue-g),var(--blue-b),.5);
  background: linear-gradient(135deg,
              rgba(var(--blue-r),var(--blue-g),var(--blue-b),.18),
              rgba(var(--blue-r),var(--blue-g),var(--blue-b),.10));
  box-shadow:
     inset 0 1px 0 rgba(255,255,255,.45),
     0 8px 22px rgba(var(--blue-r),var(--blue-g),var(--blue-b),.22);
}
.search-side .chip:active{
  transform:translateY(0);
  box-shadow:0 3px 10px rgba(var(--blue-r),var(--blue-g),var(--blue-b),.18);
}

/* Fokus-Ring für Tastatur-Nutzer */
.search-side .chip:focus{
  outline:2px solid rgba(var(--blue-r),var(--blue-g),var(--blue-b),.55);
  outline-offset:2px;
}

/* Optional noch kleiner */
.search-side .chip--xs{ font-size:.74rem; padding:.22rem .48rem; }

/* Dark Mode tuning (optional) */
@media (prefers-color-scheme: dark){
  .search-side .chip{
    color:#dbeafe;
    border-color:rgba(var(--blue-r),var(--blue-g),var(--blue-b),.45);
    background: linear-gradient(135deg,
                rgba(var(--blue-r),var(--blue-g),var(--blue-b),.18),
                rgba(var(--blue-r),var(--blue-g),var(--blue-b),.10));
    box-shadow:
       inset 0 1px 0 rgba(255,255,255,.08),
       0 6px 16px rgba(2,6,23,.6);
  }
  .search-side .chip:hover{
    background: linear-gradient(135deg,
                rgba(var(--blue-r),var(--blue-g),var(--blue-b),.24),
                rgba(var(--blue-r),var(--blue-g),var(--blue-b),.14));
  }
}

/* Motion-Respekt */
@media (prefers-reduced-motion: reduce){
  .search-side .chip{ transition:none; }
}

</style>