  <style>
    body {
      margin: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      font-family: sans-serif;
      background: #f8f8f8;
    }

    .wrapper {
      width: 80%;
    }

    header {
      background: darkblue;
      color: white;
      padding: 20px;
      font-size: 40px;
      text-align: center;
      border-radius: 10px;
      margin: 20px 0 10px 0;
    }

    /* Menüzeile */
    nav {
      background: lightgrey;
      border-radius: 8px;
      margin-bottom: 20px;
    }

    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
    }

    nav li {
      margin: 0;
    }

    nav a {
      display: block;
      padding: 12px 18px;
      text-decoration: none;
      color: darkblue;
      font-weight: bold;
    }

    nav a:hover {
      background: #4a90e2;
      border-radius: 6px;
    }

    /* Banner */
    .banner {
      position: relative;
      width: 100%;
      height: 400px;
      margin-bottom: 20px;
      overflow: hidden;
      border-radius: 12px;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    .banner img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 1s ease-in-out;
    }

    .banner img.active {
      opacity: 1;
    }

    .container {
      display: grid;
      grid-template-columns: 20% 58% 20%;
      gap: 1%;
    }

    .container_cc {
      display: grid;
      grid-template-columns: 20% 79%;
      gap: 1%;
    }

    .spalte {
      background: #e0e0e0;
      padding: 20px;
      border-radius: 10px;
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      background: white;
    }

    th, td {
      border: 1px solid #999;
      padding: 6px;
      text-align: center;
      font-size: 24px;
    }

    th {
      background: #ddd;
    }

    .feld-header {
      background: darkblue;
      border: 1px solid #ccc;
      border-radius: 8px;
      color: white;
      padding: 10px;
      margin-bottom: 12px;
      text-align: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }

    .feld {
      background: white;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 10px;
      margin-bottom: 12px;
      text-align: left;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      font-family: sans-serif;
      font-size: 24px; /* 1,5 * 16 = 24px */
    }

    footer {
      background: darkblue;
      color: white;
      padding: 15px;
      text-align: center;
      border-radius: 10px;
      margin: 20px 0;
      width: 100%;
    }


    .button {
      background-color: lightgrey;
      color: darkblue;
      padding: 10px 20px;
      text-decoration: none;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    @media (max-width: 900px) {
      .container {
        grid-template-columns: 1fr 1fr;
      }
    }

    .mitte-counter{
        display:flex;
        justify-content: center;
        align-items: center;
        font-size: 30pt;
        padding: 10pt;
        border-radius: 10px;
        font-weight: bolder;
        background-color: grey;
        color: whitesmoke;
    }

    @media (max-width: 600px) {
      .container {
        grid-template-columns: 1fr;
      }
    }

     @media (max-width: 600px) {
      .container_cc {
        grid-template-columns: 1fr;
      }
    }
}
</style>