@charset "UTF-8";
/**
 *   Farbengrundtöne
 */
/*
  * Farben verwendung
  */
/**
  *   Schriften
  */
/**
  *  Schriftgrößen
  */
/**
  * grid
  */
.personen {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  height: 100%;
  margin-bottom: 0rem; }
  @media (max-width: 60rem) {
    .personen {
      flex-wrap: wrap; } }
  .personen .personeneintrag {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    transition: all .5s ease;
    position: relative;
    position: relative;
    overflow: hidden;
    width: 120%; }
    @media (max-width: 60rem) {
      .personen .personeneintrag {
        background-color: rgba(var(--cifarbe1rgbawert), 1);
        display: flex;
        flex-direction: column;
        width: 49%; } }
    .personen .personeneintrag picture {
      text-align: center;
      position: relative;
      overflow: hidden; }
    .personen .personeneintrag .txtperson {
      background-color: rgba(var(--cifarbe1rgbawert), 0.75);
      padding: 1.5rem 1.5rem;
      color: #fff;
      text-align: center;
      transition: all 500ms; }
      @media (min-width: 550px) {
        .personen .personeneintrag .txtperson {
          bottom: -3.5rem;
          min-height: 6rem;
          position: absolute;
          margin-left: -2.5rem;
          width: 110%;
          padding: 1.5rem 1.5rem 4rem;
          transform: rotate(-15deg); } }
      .personen .personeneintrag .txtperson .personname {
        font-size: 24px;
        /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
        font-size: 1.44rem;
        line-height: 140%;
        transition: all 300ms ease; }
        @media (min-width: 550px) {
          .personen .personeneintrag .txtperson .personname {
            margin: 0 auto 15px;
            width: 60%;
            font-size: 20px;
            /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
            font-size: 1.2rem; } }
      .personen .personeneintrag .txtperson .lauftext {
        font-size: 15px;
        /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
        font-size: 0.9rem;
        color: #fff;
        transition: all 300ms ease; }
        @media (min-width: 550px) {
          .personen .personeneintrag .txtperson .lauftext {
            margin: 0 2.0rem 0.5rem; } }
        @media (max-width: 47.95rem) {
          .personen .personeneintrag .txtperson .lauftext {
            font-size: 17px;
            /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
            font-size: 1.02rem;
            margin-bottom: 1rem; } }
    .personen .personeneintrag img {
      transition: all 400ms ease-in-out; }
    .personen .personeneintrag:hover {
      flex-grow: 2; }
      .personen .personeneintrag:hover img {
        transform: scale(1.15);
        transform-origin: center center; }
      .personen .personeneintrag:hover .txtperson {
        background-color: rgba(var(--cifarbe1rgbawert), 0.95);
        transform: rotate(0deg); }
      .personen .personeneintrag:hover .personname {
        font-size: 24px;
        /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
        font-size: 1.44rem;
        width: 90%; }
      .personen .personeneintrag:hover .lauftext {
        font-size: 20px;
        /*für die standard ersatzschrift sollte die umrechnung immer etwas kleiner sein daher nciht 0.063rem*/
        font-size: 1.2rem; }

/*# sourceMappingURL=personen.css.map */