/*
@media (min-width: 1024px) {
*/
/* Verhindern, dass breite Elemente die Seite nach rechts aufblähen */


.main-main {
  height: 100%;
  width: 100%;
}

.main-section {
  display: flex;
  background-color: blue;
  height: 100%;
  width: 100%;
}

/* Das gesamte Whiteboard */
.whiteboard-container {
  display: flex;
  width: clamp(360px, 100%, 1000px); /* clamp(Smartphone, PC, Obergrenze */
  margin: 0 auto; /* Container zentrieren */
  background-color: red;
  height: clamp(800px, 100%, 1200px);
}

/* Tablet */
@media (max-width: 1024px) {
    .whiteboard-container {
        width: 1024px;
        height: 768px;
    }
}

/* Smartphone */
@media (max-width: 600px) {
    .whiteboard-container {
        /*width: clamp(350px, 100%, 412px);*/
        height: clamp(750px, 100%, 960px);
        width: 100%;
    }
}


.whiteboard {
  display: flex;
  position: relative;
  flex-direction: column;
  background-color: rgb(255, 255, 255);
  width: 80%; /* Am PC und am Tablet rechts Legende u. Whiteboard nimmt nur 80% vom Whiteboard-Container ein */
  height: 100%;
  border-radius: 40px;
  margin-bottom: 45px;
}

@media (max-width: 600px) {
  .whiteboard{
  border-radius: 0;
  width: 100%; /* Am Smartphone entfällt Legende u. Whiteboard nimmt 100% vom Whiteboard-Container ein */
  }
}


.chart-title {
  
  margin-left: clamp(1rem, 25%, 250px);
  font-size: 22px;
  margin-top: 15px;
  margin-bottom: 10px;
}




/* Zeit-Filter Container und Buttons */

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

.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 */

/* Festen Höhenabstand von Legende und Chart und feste Höhe von Chart einstellen. Wahrscheinlich mit Media Query für PC und Smartphone (und Tablet). Sonst wird es nix mit der Legende in dieser Form. */

.chart-container {
  position: relative;
  margin-top: -20px;
  width: 100%;
  height: 50%; 
  background-color: yellow;
  box-sizing: border-box;
}



/* Filter Pair Button und Container */

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

.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: 50px;
  display: flex;

}

.sources-text {
  margin-top: 10px;
  max-width: 630px;
  width: 100%;
  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;
  min-width: max-content;  

  /* Innenabstand erzeugt die "Dicke" flexibel und sauber */
  padding: 44px 16px 130px 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);

  
  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;
  margin-top: 80px;
  margin-bottom: 20px;

}

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


.datenschutz-wrapper {
  display: flex;
  flex-direction: column;
  background-color: rgb(253, 253, 253);
  margin-top: 100px;
  
  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;
}

.haftungsausschluss {

  width: 100%;             /* Nutzt auf kleinen Bildschirmen die verfügbare Breite */
  display: flex;
  flex-direction: column;
  justify-content: center;

  background-color: rgb(253, 253, 253);
  margin-top: 100px;
  
  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;
}

.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;
}
/*
}
*/

/*
  @media (max-width: 1023px) {
  .main-section {
    justify-content: unset; 
    margin-left: 30px;
  }


  .header-and-navbar-wrapper {
  padding-left: 360px; 
  padding-right: 420px;
  }

  .webpage-footer {
  padding-left: 380px; 
  padding-right: 605px;
  }

}
*/