.eingeklapptSingleLinef4f5f5 {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.eingeklapptSingleLinef4f5f5:after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-image: -webkit-linear-gradient(right, rgba(244,245,245,1) 0%,rgba(244,245,245,0) 100%);
  background-image: -moz-linear-gradient(right, rgba(244,245,245,1) 0%, rgba(244,245,245,0) 100%);
  background-image: -ms-linear-gradient(right, rgba(244,245,245,1) 0%, rgba(244,245,245,0) 100%);
  background-image: -o-linear-gradient(right, rgba(244,245,245,1) 0%, rgba(244,245,245,0) 100%);
  background-image: linear-gradient(right, rgba(244,245,245,1) 0%, rgba(244,245,245,0) 100%);
}

/* Anleitung für ausklappen-Button
---- css -----

// Es ist ein Style erforderlich, der die Größe im eingeklappten Zustand definiert:
.myXYZEingeklappt {
  height: 1.3em;
  width: 150px;
  // optional
}

---- cshtml -----

// Den Inhalt wird mit einer ID versehen, myXYZEingeklappt ist optional (nur wenn initales Einklappen gewünscht)
<span id="VertrittPartnerlisteId" class="myXYZEingeklappt ..." >
... Langer Content ...
</span >

// Ein-/Ausklappen-Button
// Wird gefunden über 'ausklappenButtonSingleLine', der 'default' gibt dem Button sein Aussehen
// 'ausklappenZiel' bekommt die ID von oben, 'eingeklapptStyle' den Style, der hinzugefügt oder entfernt werden soll.
<div class="ausklappenButtonSingleLine default" ausklappenZiel="#VertrittPartnerlisteId" eingeklapptStyle="myXYZEingeklappt" >
</div >*/
.ausklappenButtonSingleLine.default {
  border: 1px solid grey;
  margin: 2px;
  border-radius: 7px;
  display: inline-block;
  padding: 3px;
  background-color: transparent;
  color: grey;
  transition: background-color 1s ease-in-out, color 1s ease-in-out;
  cursor: pointer;
  font-size: 9px;
}

  .ausklappenButtonSingleLine.default:hover {
    color: black;
    background-color: lightgray;
    border-color: lightgray;
  }

.ausklappenButtonSingleLine.default:after {
  content: 'einklappen';
}

.ausklappenButtonSingleLine.default.eingeklappt:after {
  content: 'ausklappen';
}

.eingeklapptMultipleLinef4f5f5
{
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
}

  .eingeklapptMultipleLinef4f5f5:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: -webkit-linear-gradient(bottom, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background-image: -ms-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background-image: -o-linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background-image: linear-gradient(bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  }

  .eingeklapptMultipleLinef4f5f5.ausklappenGrauerHintergrund:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background-image: -webkit-linear-gradient(bottom, rgba(244,245,245,1) 0%,rgba(244,245,245,0) 100%);
    background-image: -moz-linear-gradient(bottom, rgba(244,245,245,1) 0%, rgba(244,245,245,0) 100%);
    background-image: -ms-linear-gradient(bottom, rgba(244,245,245,1) 0%, rgba(244,245,245,0) 100%);
    background-image: -o-linear-gradient(bottom, rgba(244,245,245,1) 0%, rgba(244,245,245,0) 100%);
    background-image: linear-gradient(bottom, rgba(244,245,245,1) 0%, rgba(244,245,245,0) 100%);
  }


.ausklappenButtonMultipleLine.default
{
  border: 1px solid grey;
  border-radius: 7px;
  margin: 2px;

  display: inline-block;
  padding: 3px;
  background-color: transparent;
  color: grey;
  transition: background-color 1s ease-in-out, color 1s ease-in-out;
  cursor: pointer;
  font-size: 9px;
  width: 55px;
}

  .ausklappenButtonMultipleLine.default:hover
  {
    color: black;
    background-color: lightgray;
    border-color: lightgray;
  }

  .ausklappenButtonMultipleLine.default:after
  {
    content: 'einklappen';
  }

  .ausklappenButtonMultipleLine.default.eingeklappt:after
  {
    content: 'ausklappen';
  }