.main-section {
  display: flex;
  justify-content: center;
  position: relative;
  margin-left: 72px;
}

/* Das gesamte Whiteboard */

.whiteboard {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  background-color: rgb(255, 255, 255);
  margin-top: 50px;
  width: 690px;
  height: 780px;
  border-radius: 40px;
}
.whiteboard-wrapper {
  position: relative;
  min-height: 850px;
}

.chart-title {
  
  left: 50px;
  font-size: 20px;
  margin-top: 15px;
}




/* Zeit-Filter Container und Buttons */

.time-filter-container {
  display: flex;
  gap: 50px;
  margin-top: 25px;
  
}

.time-filter-button {
  font-family: Arial;
  font-size: 15px;
  z-index: 800;
  width: 70px;
  height: 65px;
  border-radius: 23px;
  background-color: rgb(117, 252, 249);
  border: 5px solid rgba(255, 255, 255, 1);
  transition: background-color 0.1s;  
  cursor: pointer;

  
}
.time-filter-button-active {
  background-color: rgb(117, 252, 249);
  border: 5px solid rgb(1, 1, 246);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.15);
}


.umbruch::after {
  content: '\A';
  white-space: pre;
}

/* 1. Verschieben (Gilt nur für PC-Maus) */
@media (hover: hover) {
  .time-filter-button:hover {
    background-color: rgb(214, 223, 255);
  }
}
/* 2. Umbenennen (Gilt für das kurze Tippen auf dem Handy) */
.time-filter-button:active {
    background-color: rgb(202, 213, 254);
}



/* Chart-Container */

.chart-container {
  margin-top: -20px;
  margin-left: -20px;

}



/* Filter Pair Button und Container */

.item-filter-container {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  align-items: center;
}

.pair-button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}



/* Level anzeige und Anzeigen/Ausblenden */

.level-and-eye-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 10px;
  margin-bottom: 10px;
}

.pair-button-level-text {
  display: none; /* ausgeblendet */
  border: none;
  background-color: white;
  color: rgba(104, 4, 254, 0.167);
  font-size: 14px;
  font-weight: 1000;
  margin: 0;
  margin-bottom: -1px;
  margin-left: 2px;
}

.eye-button {
  border: none;
  background-color: white;
  border-radius: 20px;
  height: 30px;
  width: 40px;
  margin-bottom: -8px;
  cursor: pointer;
  transition: opacity 0.1s;

}
.eye-button:hover {
  opacity: 0.6;
}
.eye-button:active {
  opacity: 0.5;
}

.eye-icon {
  height: 25px;
  margin-top: 1px;
  margin-left: 1px;
}

.eye-open {
  opacity: 0.7;
}

.eye-closed {
  opacity: 0.6;
}







/* Pair-Button für Drop-Down-Menus*/
.pair-button {
  display: flex;
  height: 75px;
  border-radius: 29px;
  border: 0px solid rgba(22, 11, 75, 1);
  /* Übergang für Rahmenfarbe UND Schatten aktivieren */

background-image: linear-gradient(
    to top right,
    rgba(0, 0, 0, 0.35) 0%,        /* Schatten unten links */
    rgba(0, 0, 0, 0.05) 45%,
    rgba(255, 255, 255, 0.15) 55%,
    rgba(255, 255, 255, 0.6) 100%  /* Glanz oben rechts */
  );

}
/* Der kurze Blitz-Zustand */
.pair-button.is-blinking {
  border-color: red !important;
  /* Erzeugt einen 2px Schatten nach innen und außen -> Rahmen wirkt fett */
  box-shadow: 0 0 0 4px red, inset 0 0 0 3px red !important;
  transition: none !important; /* Sofort dick und rot werden */
}

.single-button-left, .single-button-dropdown {
  border: none;
}

/* Filter Button - Linke Seite*/
.single-button-left {
  /* border-right: 1px solid #000000; */
  border-top-left-radius: 28px;
  border-bottom-left-radius: 28px;
  background-color: rgba(179, 22, 222, 0.781); /* inkl. Transparency */
  width: 50px;
  transition: opacity 0.2s;
  transition: background-color 0.2s;
  cursor: pointer;
  
  /*
  background-image: linear-gradient(
      to top right,
      rgba(214, 140, 234, 0.781) 0%,    /
      rgba(179, 22, 222, 0.781) 50%,   
      rgba(192, 102, 217, 0.781)  100%   
    );
  */

}
.active-single-button-left {
  background-color: #76ffa8;

  /*
  background-image: linear-gradient(
      to top right,
      #76ffa8 0%,   
      #2ed76c 50%,  
      #76ffa8  100%   
    );
  */

}
.hidden-single-button-left {
  background-color: rgb(213, 213, 213);
  opacity: 0.6;
  background-image: none; /* Entfernt den Gradienten komplett */
}

/* 1. Verschieben (Gilt nur für PC-Maus) */
@media (hover: hover) {
  .single-button-left:hover {
    /* background-color: rgb(179, 104, 237);*/
    opacity: 0.8;

    
  }
}
/* 2. Umbenennen (Gilt für das kurze Tippen auf dem Handy) */
.single-button-left:active {
    background-color: rgb(165, 88, 224);
}


.bar-icon-container {
  display: flex;
  flex-direction: column;
  padding-left: 10px;
}

.bar-icon-on, .bar-icon-off {
  margin-top: -4px;
  margin-bottom: -4px;
  font-size: 16px;
}

.bar-icon-off {
  font-size: 16px;
}

/* Filter Dropdown Menu - Rechte Seite*/
.dropdown-button-filter {
  position: relative;
  display: inline-block;
}

.single-button-dropdown {
  background-color: rgb(91, 76, 253);
  border-top-right-radius: 28px;
  border-bottom-right-radius: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 75px;
  color: white;
  transition: background-color 0.2s;
  transition: opacity 0.2s;
  cursor: pointer;

  /*
  background-image: linear-gradient(
    to top right,
    rgb(73, 57, 247) 0%,    
    rgb(87, 73, 235) 50%,   
    rgb(137, 129, 225) 100%   
  );
  */

}


/* 1. Verschieben (Gilt nur für PC-Maus) */
@media (hover: hover) {
  .single-button-dropdown:hover {
    /* background-color: rgb(181, 99, 236); */
    opacity: 0.8;
  }
}
/* 2. Umbenennen (Gilt für das kurze Tippen auf dem Handy) */
.single-button-dropdown:active {
    background-color: rgb(165, 88, 224);
}



/* Dropdown-Menü */
.dropdown-menu-filter {
  position: absolute;
  top: 100%;
  right: -40px;
  min-width: 280px;
  display: none; 
  z-index: 900;
  flex-direction: column;
  border: 1px groove rgb(0, 0, 0);
  border-radius: 2px;

  max-height: 540px; /* Höhe des Menüs */
  overflow-y: auto; /* Scroll bar hinzufügen */

  direction: rtl;

}

/* 2. Der Inhalt IM Dropdown */
/* Das "> *" bedeutet: Alle direkten Elemente im Dropdown (deine Container) */
.dropdown-menu-filter > * {
  /* NEU: Dreht den Text und die Checkboxen wieder auf normal (linksbündig) */
  direction: ltr; 
}


.open-dropdown-menu-filter { 
  display: flex;
  flex-direction: column;
}

/* DER TRICK: Wenn zu wenig Platz unten ist, klappt es nach oben */
.dropdown-menu-filter.open-upwards {
  top: auto;      /* Hebt die Standard-Positionierung auf */
  bottom: 100%;   /* Setzt das Menü exakt ÜBER die Oberkante des Buttons */
}

.item-bullet-container {
  display: flex;
  align-items: stretch;
  min-height: 45px;
  width: 100%;
  border-bottom: 1px solid #000;
}
/* Bei der allerletzten Zeile im Menü entfernen wir die Linie, damit sie bündig abschließt */
.item-bullet-container:last-child {
  border-bottom: none;
}

.bullet-item {
  flex-grow: 1;
  text-align: left;
  background: transparent;
  border: none;
  outline: none;
  background-color: rgb(244, 244, 244);
  font-size: 14px;
  /* transition: background-color 0.1s; */
  cursor: pointer;
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.3;
  padding-left: 10px;


}

/* graph-id im Bullet Item */
.graph-id {
  font-weight: 700;
  font-size: 14px;
  color: rgb(114, 186, 201);
  padding-left: 4px;
}
.lvl2-id {
  width: 14px;
}
.lvl3-id {
  width: 28px;
}
.lvl4-id {
  width: 32px;
}
.lvl5-id {
  width: 40px;
}

/* Main Text of bullet item */
.main-text{
  padding-right: 65px;
  font-size: 14px;
  width: 210px;
}

.percent-number {
  font-weight: 600;
  /* text-shadow: -0.1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; */
  position: absolute;
  right: 50px;
  padding-right: 2px;
  font-size: 14px;
}

/* HOVER bewirkt hier nichts: */
/* 1. Verschieben (Gilt nur für PC-Maus) */
@media (hover: hover) {
  .bullet-item:hover {
  background-color: rgb(48, 51, 40);
  color: white;
  }
}
/* 2. Umbenennen (Gilt für das kurze Tippen auf dem Handy) */
.bullet-item:active {
  background-color: rgb(93, 97, 83);
  color: white;
}


.outer-bullet-checkbox-container {
  display: flex;
  align-items: center;
  justify-content: center; 
  background-color: white;
  border-left: 1px solid #000;
}

.bullet-checkbox-container {
  display: flex;
  align-items: center;
  justify-content: center; 
  width: 45px;
  height: 45px;
  flex-shrink: 0;
}

.dropdown-arrow {
  font-size: 24px;
  display: inline-block; /* nötig, damit scaleY im span-Element funktioniert */
  transform: scaleY(0.6); /* drück Pfeil flacher */
  padding-bottom: 10px;
  padding-right: 3px;
}

.pair-button-footnote-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0px;
}

.active-graphs-number {
  margin-left: 10px;
  color: rgba(0, 0, 0, 0.578);
  font-size: 18px;
}
.act-graph-is-not-zero {
  color: rgba(1, 200, 51, 0.61);
}

.shown-graphs-number {
  color: rgba(0, 195, 255, 0.807);
  font-weight: 600;
}

.trash-button {
  border: none;
  background-color: white;
  height: 35px;
  width: 35px;
  margin-top: 4px;
  border-radius: 20px;
  opacity: 0.8;
  transition: opacity 0.1s;
  cursor: pointer;
}
.trash-button:hover {
  opacity: 0.5;
}
.trash-button:active {
  opacity: 0.4;
}


.trash-icon {
  height: 18px;
  padding-top: 2px
}


/* Quellenangabe */
.sources-container {
  margin-top: 6px;
  display: flex;

}

.sources-text {
  margin-top: 10px;
  width: 630px;
  margin-left: 40px;
}


.go-back-button {
  background-color: rgb(206, 206, 206);
  /* border-right: 1px solid rgb(200, 189, 200); */
  border: none;
  height: 50px;
  width: 38px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-top-right-radius: 6px;
  border-bottom-right-radius: 6px;
  /* Nur 2 einfache Zeilen hinzugefügt: */
  border-bottom: 3px solid rgb(160, 160, 160); /* Gibt dem Knopf etwas Dicke/Kante unten */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);    /* Subtiler Schatten für etwas Tiefe */
  cursor: pointer;
  opacity: 0.9;
  margin-bottom: 5px;
}
.go-back-button-inactive {
  opacity: 0.3;
}


.go-forth-button {
  background-color: rgb(206, 206, 206);
  border: none;
  height: 50px;
  width: 38px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-top-left-radius: 6px;
  border-bottom-left-radius: 6px;

  /* Nur 2 einfache Zeilen hinzugefügt: */
  border-bottom: 3px solid rgb(160, 160, 160); /* Gibt dem Knopf etwas Dicke/Kante unten */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);    /* Subtiler Schatten für etwas Tiefe */
  cursor: pointer;
  opacity: 0.9;
  margin-bottom: 5px;
}
.go-forth-button-inactive {
  opacity: 0.3;
}


.backandforth-arrow-icon {
  width: 20px;
  opacity: 0.55;
  margin-top: 1px;
}

.webpage-footer {
  background-color: rgb(44, 62, 80);
  color: #ffffff;
  
  /* Innenabstand erzeugt die "Dicke" flexibel und sauber */
  padding: 24px 16px;
  text-align: center;
}

/* Links im Footer einheitlich gestalten */
.webpage-footer a {
  color: #ffffff;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.2s ease;
}

/* Visuelles Feedback beim Drüberfahren */
.webpage-footer a:hover {
  opacity: 1;
  text-decoration: underline;
}




.tooltip {
  position: absolute;
  color: white;
  background-color: gray;
  font-size: 14px;
  bottom: -50px;
  border-radius: 2px;
  padding: 8px 6px;
  opacity: 0;
  transition: opacity 0.15s;
  white-space: nowrap;
  pointer-events: none;
}

.bullet-item:hover .tooltip {
  opacity: 0.95;
}







.impressum-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: rgb(253, 253, 253);
  margin-top: 50px;
  
  width: auto;          /* Nutzt auf kleinen Bildschirmen die verfügbare Breite */
  max-width: 850px;        /* Stoppt auf großen Bildschirmen exakt bei 850px */
  height: auto;
  padding: 40px;
  padding-top: 25px;
  border-radius: 40px;
  box-sizing: border-box;
}

.third-party-licenses {
  margin-top: 40px;
  width: 450px;
}


.datenschutz-wrapper {
  display: flex;
  flex-direction: column;
  background-color: rgb(253, 253, 253);
  margin-top: 50px;
  
  width: 100%;             /* Nutzt auf kleinen Bildschirmen die verfügbare Breite */
  max-width: 850px;        /* Stoppt auf großen Bildschirmen exakt bei 850px */
  height: auto;
  padding: 40px;
  border-radius: 40px;
  box-sizing: border-box;
}

.how-it-works-wrapper {
  margin-top: 100px;
  height: 380px;
  background-color: rgb(253, 253, 253);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 40px;
  border-radius: 40px;
  box-sizing: border-box;
}