/* necessary so children can fill the full height of a cell */
.projekt {
  margin: 0;
  padding: .25rem 1rem;
  display: grid;
  grid-template-areas:
  "an projekt auftraggeber"
  "controlling controlling controlling";
}
.projekt.row-even {
  background-color: #f1f1f1;
}

.projekt-gruppe-an {
  width: 10vw;
  min-width: 20ch;
  height: 100%;
  white-space: normal;
  grid-area: an;
  display: grid;
  align-content: start;
  grid-template-areas:
  "an"
  "status";
}
.projekt-an {
    grid-area: an;
    font-size: 2em;
    line-height: 1.2em;
    vertical-align: top;
}
.projekt-status {
    grid-area: status;
    font-size: 0.9em;
    display: flex;
    align-items: flex-end;
}
.projekt-status i {margin: .25em 0;}
.projekt-buttons {
    margin-top: 0.5em;
}


.projekt-gruppe-projekt {
    width: 20vw;
    min-width: 40ch;
    height: 100%;
    white-space: normal;
    grid-area: projekt;
    display: grid;
    align-content: start;
    grid-template-areas:
        "projekt"
        "projektleiter"
        "beschreibung";
}
.projekt-projektname {
    grid-area: projekt;
    font-size: 1.3em;
}
.projekt-projektleiter {
    grid-area: projektleiter;
    font-size: 0.9em;
    color: darkgrey;
}
.projekt-satz {
    grid-area: beschreibung;
    font-size: 0.9em;
    overflow: hidden;
}


.projekt-gruppe-auftraggeber {
    width: 20vw;
    min-width: 30ch;
    height: 100%;
    white-space: normal;
    grid-area: auftraggeber;
    display: grid;
    grid-template-columns: 100%;
    align-content: start;
    grid-template-areas:
        "name"
        "ansprechpartner";
}
.projekt-auftraggeber {
    grid-area: name;
    font-size: 1.2em;
}
.projekt-cust-number {
    font-size: 0.8em;
    display: inline-block;
    margin-left: 1em;
}
.projekt-cust-ansprechpartner {
    grid-area: ansprechpartner;
}

.projekt-gruppe-controlling {
    min-width: 45ch;
    padding: 0 1em;
    grid-area: controlling;
    display: grid;
    grid-template-areas: "beginn progress ende";
    grid-template-columns: 10ch 1fr 10ch;
}

.projekt-progress {
    grid-area: progress;
    height: .5em;
    background-color: lightgrey;
    border-radius: 0.25rem;
    align-self: center;
}
.projekt-progress-bar {
    height: 100%;
    max-width: 100%;
    border-radius: 0.25rem;
}

.projekt-beginn {grid-area: beginn;}

.projekt-ende {grid-area: ende;text-align: end;}

.projekt-zeitauswertung {grid-area: zeitauswertung;}

.projekt-sumnet {grid-area: budget;}



.projekt-tooltip .projekt-tooltiptext {
    font-size: 0.8em;
    visibility: hidden;
    position: absolute;
    background-color: darkslategrey;
    color: #f1f1f1;
    padding: 10px;
    border-radius: .25rem;
}

.projekt-tooltip:hover .projekt-tooltiptext {
    visibility: visible;
}

.projekt-tooltip .projekt-tooltiptext::after {
    content: " ";
    position: absolute;
    top: -10px;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-color: transparent transparent darkslategrey transparent;
    border-style: solid;
}