:root {
  --bg-main: #ccffcc20;
  --bg-stamm: #33669920;
  --h1-stamm: #ff8080;
  --text-color: #566699;
  --text-hell: hsl(34, 78%, 91%);
  --text-carola: #df2e2e;
  --h1-size: 5em;
  --parament: url("textur_neuron_rosa2.png");
  --puzzlerot: #f57070;
  --puzzlegruen: #27f7cd;
  --puzzlelila: #bd94ff;
  --puzzleoliv: #63c863;
  --puzzlegelb: #ffe63c;
  /* --logo: url("carola_dunkel.svg"); */
}
* {
    margin: 0px;
    padding: 0px;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    color: var(--text-color);
    box-sizing: border-box;
    

}
@font-face {
  font-family: 'Carola';
  src: url('carola.ttf') format ('truetype'),
       url('carola.woff') format ('woff');
}


.container { /*body */
  display: grid;
  height: 100vh;
  width: 100vw;
  grid-template-columns: 96px 1fr 1fr 1fr 1fr 40px;
  /* grid-template-rows: 25% 100px auto; */
  /* grid-template-rows: 1fr 1fr 1fr 25% auto; */
  grid-template-rows: 24px 76px 1fr 1fr auto ;
  /* gap: .5rem .8rem; */
  /* grid-template-rows: 25% auto; */
  align-content: stretch;
  justify-items: stretch;
  /* background-color: var(--bg-stamm); */
  background-image: var(--parament);
  .logo {
      /* height: 100vh;
      border: solid 3px red; */
      border:none ;
      grid-column-start: 1;
      grid-column-end: span 1;
      grid-row-start: 1;
      grid-row-end: span 2;
      padding-top: 2.5em;
    align-self: center;
    text-align: center;
    vertical-align: middle;
    img {
        /*border: solid 2px  rgb(189, 223, 189);*/
        border: none;
        padding: 8px;
        width: 110px;
    }
  }
  /* .nav { 
    grid-column-start: 2;
    grid-column-end: span 5;
    grid-row-start: 1;
    grid-row-end: span 1;
    border: solid 3px yellow;
    background-color: var(--bg-stamm);
    color: var(--text-hell);
    nav {
      height: 0;
      background-color: var(--bg-main);
      ul {
        display: flex;
        flex-direction: row;
        li {
          list-style: none;
          a {    
            margin: 0.5em;
    
            font-size: 1em;  
            text-decoration: none;
            color: var(--text-color);
          }
        }
      }
    } 
  } /*.nav */
  .header {
    grid-column-start: 1;
    grid-column-end: span 6;
    grid-row-start: 1;
    grid-row-end: span 2;
    /*border: solid 3px #8b0000;*/
    border: none;
    background-color: var(--bg-main);
    /* background-color: var(--bg-stamm); */
    /* color: var(--text-carola); */
    color: var(--text-color);
    
   
    #carola {
      @font-face {
        font-family: 'Carola';
        src: url('carola.ttf') format ('truetype'),
             url('carola.woff') format ('woff');
     }
      font-family: 'Carola', 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
   ;
      align-items: center;
      font-size: 4em;
      /*color: rgb(164, 0, 0);*/
      color: rgba(189, 80, 80, 0.7);
      padding-top: 0.4em;
      text-align: center;
      text-shadow: 2px 2px 5px rgba(189, 0, 0, 0.7);
      
  
    }
  }
  .left {
    grid-column-start: 1;
    grid-column-end: span 1;
    grid-row-start: 3;
    grid-row-end: span 4;
    border: solid 3px lightblue;
    background-color: var(--bg-stamm);
    color: var(--text-hell);
  }
  .main {
    align-content: center;
    text-align: center;
    grid-column-start: 1;
    grid-column-end: span 6;
    grid-row-start: 3;
    grid-row-end: span 3;
    /*border: solid 3px darkorange;*/
    border: none;
    background-color: var(--bg-main);
    color: var(--text-hell);
    .tt {
      font-family: "Lucida Console", monospace;
    }
    
  }
  .alert {
      margin: 2em;
      background-color: var(--bg-stamm);
      border: solid 3px #f57070;;
      border-radius: 1em;
  }
  .aerzte {
    grid-column-start: 1;
    grid-column-end: span 6;
    grid-row-start: 4;
    grid-row-end: span 1;
    /*border: solid 3px purple;*/
    background-color: var(--bg-main);
    color: var(--text-hell);
    /*h3 { 
      margin-top: 12px;
      margin-bottom: 8px;
      font-size: 1.5em;
      color: var(--text-carola);
    }*/
    ul {
      list-style: none;
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 12px;
      margin-bottom: 12px;
      li {
        font-size: 1.2em;
        /* color: var(--text-color); */
        /* cursor: pointer; */
        &:hover {
          background-color: var(--bg-stamm);
          color: var(--text-carola);
        }
        button {
          font-size: 1em;
          color: var(--text-color);
          cursor: pointer;
          border: none;
          &:hover {
            background-color: var(--bg-stamm);
            color: var(--text-carola);
          }
          
        }
        
      }
    }

  }
 
  .footer {
    grid-column-start: 2;
    grid-column-end: span 5;
    grid-row-start: 5;
    grid-row-end: span 1;
    align-items: right;
    /*border: solid 3px lime;*/
    border: none;
    background-color: var(--bg-main);
    ul {
      list-style: none;
      display: flex;
      flex-direction: row-reverse;
      gap: 12px;
      margin-bottom: 16px;
      margin-right: 12px;
      /* align-items: self-end; */
      li {
        align-content: end;
        p {
          font-size: 1em;
          color: var(--text-color);
          cursor: pointer;
          &:hover {
            background-color: var(--bg-stamm);
            color: var(--text-carola);
          }
          
        }
         button {
          font-size: 1em;
          color: var(--text-color);
          cursor: pointer;
          border: none;
          &:hover {
            background-color: var(--bg-stamm);
            color: var(--text-carola);
          }
          
        }/* button */
      } /*li*/
    } /*ul*/
  } /*.footer*/
  
    .pop {
      
      background: #fffbf0;
      border: thin solid #e7c157;
      border-radius: 1em;
      max-width: 20em;
      /*margin-top: 500px;*/
      /*position: absolute;*/
  
      margin: 8rem auto;
      padding: 1rem;
    }
  
} /*body*/