@media screen and (min-width: 950px) {
  .familie {
    grid-template-areas: 'obenLinks obenMitte obenRechts' 'links mitte rechts' 'kinder kinder kinder';
    grid-template-columns: 32% 32% 32%;
  }

  .kinder {
    grid-template-columns: 32% 32% 32%;
  }
}

@media screen and (min-width: 650px) and (max-width: 950px) {
  .familie {
    grid-template-areas: 'obenMitte obenMitte' 'obenLinks obenRechts' 'mitte mitte' 'links rechts' 'kinder kinder';
    grid-template-columns: 49% 49%;
  }

  .kinder {
    grid-template-columns: 49% 49%;
  }
}

@media screen and (max-width: 650px) {
  .familie {
    grid-template-areas: 'obenMitte' 'obenLinks' 'obenRechts' 'mitte' 'links' 'rechts' 'kinder';
    grid-template-columns: 99%;
  }

  .kinder {
    grid-template-columns: 99%;
  }
}

.familie {
  display: grid;
  margin: 20px 0;
  padding: 5px;
  row-gap: 10px;
  column-gap: 10px;
  border: 3px solid black;
  scroll-margin-top: 5rem;
  background-color: #eee;
}

.familie.hellgruen {
  background-color: lightgreen;
}

.familieLayout {
  padding: 0 5px;
}

.eintrag>div {
  width: 100%;
}

.zeile.bearbeiten {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 40px;
  width: 95%;
  padding: 10px;
  border: 1px solid lightgray;
  border-radius: 5px;
}

.zeile.bearbeiten input,
.zeile.bearbeiten select {
  /* float: right; */
  align-self: flex-end;
  height: 25px;
  width: 230px;
  margin: 5px;
  border-radius: 5px;
}

.zeile.lesen {
  /* padding-top: 5px; */
  padding: 5px;
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: lightgray 1px solid;
}

/* 
.zeile.lesen:nth-child(even) {
  background-color: #fff;
}

.zeile.lesen:nth-child(odd) {
  background-color: #bbb;
} */

.zeile.lesen .label {
  display: inline-flex;
  align-items: center;
  flex-basis: 48%;
}

.zeile.lesen .wert {
  display: inline-flex;
  justify-content: end;
  flex-basis: 50%;
  /* max-width: 48%; */
  align-items: center;
  text-align: right;
  font-weight: bold;
}

.icon {
  padding-right: 5px;
}

.kinder {
  border-top: 3px solid gray;
  display: grid;
  gap: 10px;
}

.kind {
  padding: 0 5px;
}

.kind>.meldung {
  padding: 10px;
}