body {font-family: arial;}
.box { 
    background: white; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    margin-bottom: 20px; 
}
.g-container{
    display:flex;
}

.gantt-titles-column {
    width: 250px; /* Breite der Task-Liste */
    flex-shrink: 0;
    background: #f9f9f9;
    border-right: 1px solid #ddd;
    z-index: 10;
    margin-top: 86px; /* Platz für den Gantt-Header (Datum) */
}

.gantt-title-item {
    height: 29px; /* Exakte Höhe eines Frappe-Balkens*/
    padding: 0 10px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #eee;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#gantt-wrapper {
    flex-grow: 1;
    overflow: auto;
}

.gantt .arrow {
    stroke: rgba(207, 53, 32, 0.4) !important;
    fill: none;
    transform: translateX(10px); 
    stroke-width: 1.5px !important;
}
.gantt .arrow-path {
    stroke-dasharray: 0; /* Durchgehende Linie */
}

/* toggle stages */
.switch {
  position: relative;
    cursor: pointer;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.switch:has(input:checked) {
  background-color: #00ff65;
}

@media (width <= 500px) {
  #gantt-titles{
      display:none;
  }
}