let apps := (select Termine
        where 'Status (Angefragt - Zugesagt - Jederzeit - Erledigt)' = 2);
let css := "<style>
  .gridFirst {
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(20em, 1fr));
      column-gap:10px;
    row-gap:20px;
  }
  .gridSecond {
    display:grid;
    grid-template-columns:auto auto auto;
grid-template-rows:auto max-content;
  }
  .gridFormHead{font-weight:bold}
  .gridFormAll{
    box-shadow:-2px -2px inset dimgray;
      font-size:12px;
       padding:1em;
      border-radius:1em;
      color:darkslategray;
    background-color:rgb(230,230,230);
  }
  .gridFormAll:hover{

    cursor:pointer;
  }
  dd {text-align:right;margin:1px;}
de{margin:auto auto auto 1px;}
  dt{font-variant:small-caps;
text-align:left;}
  hr {color:darkgray;}
  </style>";
let body := ---
<aside class = 'gridFirst'>{ for Termin in Termine do }
     <aside class='gridFormAll' >
      <aside class='gridFormHead'> <span  onclick=ui.popupRecord('{ Termin}')>  { Termin.Kalendereintrag } <span style="
    border-radius: .5em;
    background-color: grey;
    ">{ Termin.Ort}</span></span>

     </b></span> </aside>
  <hr>
    <dl class='gridSecond'>
     <de>  { app.DatumUhrzeit }</de>

    </dl>
    </aside>{ end }

  </aside>
    ---;
html(css + body)