.ri/ght-container, .left-container {
    border: 1px solid blue
}

.le/ft-right {
    width: 101%;
}

/* 
 * https://codepen.io/nathan-sr/pen/GRwYaQM  
 * https://codepen.io/dmitrij-rog/pen/JjOLygR/1000
 * 
 */


:root {
  --hex-size: 250px; /* Durchmesser des Hexagons */
}

/* Container für subtilen Schatten */
.hex-container {
  display: inline-block;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
  margin: 30px auto;
  
}

/* Hexagon selbst */
.hexagon {
  
  position: relative;
  display: flex; 
  justify-content: flex-start;
  width: var(--hex-size);
  height: calc(var(--hex-size) * 0.866); /* Höhe = Breite * sqrt(3)/2 ≈ 0.866 */
  background: linear-gradient(160deg, rgba(179, 229, 255, 0.8) 0%, rgba(110, 198, 255, 0.6) 40%, rgba(0, 154, 223, 0.2) 100%);
  clip-path: polygon(
    25% 0%,
    75% 0%,
    100% 50%,
    75% 100%,
    25% 100%,
    0% 50%
  );
  transition: all 0.25s ease;
  align-items: center;
  padding: 0 15%; 
}

.hex-content {
  width: 80%;
  max-height: 100%;
  text-overflow: ellipsis;
  overflow: hidden;
  margin: 0 auto;
}

.hex-content p {
    display: -webkit-box;
    -webkit-line-clamp: 9;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    overflow : hidden;
    max-width: 15em;
    line-height: 1.5;
    font-size: 0.9rem;
    padding-top: 10px;
}


/* obere und untere Dreiecke */
.hexagon::before,
.hexagon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 0;
  border-left: calc(var(--hex-size) / 2) solid transparent;
  border-right: calc(var(--hex-size) / 2) solid transparent;
}








/*
.content {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 100%;
  place-items: center;
  background: rgba(53, 54, 72, 0.2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: inherit;
  box-shadow: 0 0.5px 0 1px rgba(255, 255, 255, 0.2) inset,
    0 1px 0 0 rgba(255, 255, 255, 0.6) inset, 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 10;
  color: var(--light-clr);
  overflow-y: auto;
  padding: 30px 30px 10px;
}

.content::-webkit-scrollbar {
  width: 7px;
}

.content::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.3rem var(--scrollbar-track);
  border-radius: 40px;
  margin: 18px 0;
}

.content::-webkit-scrollbar-thumb {
  box-shadow: inset 0 0 0.5rem var(--scrollbar-thumb);
  background-color: var(--primary-clr);
  outline: none;
  border-radius: 40px;
}