body
    {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 18px;
      display: grid;
      gap: 0.4em;
    }
    
    /* --- zweispaltiges Layout --- */
    @media (min-width: 30em)
    { 
      body
      {
        grid-template-columns: 1fr 4fr;    
        grid-template-rows: auto 1fr min-content;
      }
    }
    
    header,footer
    {
      grid-column: 1 / -1;
    }
    
    header
    {
      background: #f2d7d7;
      border-color: #d5d5d5;
      display:grid;
      grid-template-columns: min-content 1fr;
      font-size: 22px;
      color: #968779;
    }
    
    main
    {
      background: #b4a49f;
      border-color: #df6c20;
    }
    
    aside
    {
      background: #c4b4af;
      border-color: #8db243;
    }
    
    div.externtop, div.externbottom
    {
      display: table;
      width:100%;
      border:0;
      padding:0;
    }
    div.externtop
    {
      height:92%;
    }
    div.externbottom
    {
      height:8%;
    }
    div.oben, div.unten
    {
      display: table-cell;
      width: 100%;
      font-size: 20px;
    }
    div.oben
    {
      vertical-align: top;
    }
    div.unten
    {
      vertical-align: bottom;
    }
    
    footer
    {
      background: #f2d7d7;
      border-color: #6b7e99;
    }
    
    footer *
    {
      float: right;
      clear: right;
      margin: 0 0 1em;
    }
    
    body
    {
      margin: 0 auto;  
      max-width: 60em;
      font-family: Helvetica, Arial, sans-serif;
      font-size: 18px;
    }
    
    header, nav, main, article, aside, footer
    {
       border-radius: 0px 0.5em 0.5em;
       border: 1px solid;
       padding: 10px;
    }
    
    a
    {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 18px;
      font-weight: bold;
    }
    
    a:hover,
    a:focus
    {
      text-decoration: underline double darkblue;
      background-color: yellow;
      color: black;
    }
    a:visited
    {
      text-decoration: underline darkblue;
      color: gray;
    }
    
    /* ====================== Inhalt MAIN ======================= */
    .alphabet
    {
      display: grid;
      grid-template-columns: 3em auto; /* Schmale linke Spalte für Buchstaben */
      gap: 0.8em;
      align-items: start;
    }

    .buchstabe
    {
      font-size: 32px;
      font-weight: bold;
      color: #0304fd;
      text-align: center;
      background: #e5ecf1;
      padding: 3px;
      border-radius: 7px;
    }

    .wort
    {
      background: #b4a49f;
      padding: 10px;
      border-radius: 5px;
      border: 1px solid #df6c20;
    }

    .wort ul
    {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .wort ul li::before
    {
      content: "\1F340";
      color: black;
      font-size: 1.2em;
      margin-right: 0.3em;
    }

    /*
    .wort li
    {
      margin-bottom: 10px;
      font-size: 18px;
    }

    .wort li b
    {
      color: #333;
    }
    */

    /*
    table
    {
      border: none;
    }
    
    th
    {
      font-family: Helvetica, Arial, sans-serif;
      font-size: 22px;
      font-weight: bold;
    }
    
    .letter
    {
      color: #0304fd;
      font-weight: bold;
      font-family: Helvetica, Arial, sans-serif;
      vertical-align: top;
    }
    
    td
    {
      padding: 1px;
      color: #030401;
      font-size: 16px;
      font-family: Helvetica, Arial, sans-serif;
    }
    */