﻿     body {
      font-family: Verdana, sans-serif;
      background-color: #fff;
      margin: 0;
      padding: 20px;
    }

    .container {
      max-width: 720px;
      margin: auto;
      background: #fff;
      padding: 20px;
      border-radius: 6px;
      box-shadow: 0 0 10px rgba(0,0,0,0.08);
    }

    h1 {
      text-align: center;
      color: #007BFF;
      font-size: 28px;
    }

    video {
      display: block;
      width: 100%;
      max-width: 700px;
      margin: 20px auto;
      border-radius: 12px;
      box-shadow: 0 0 8px rgba(0,0,0,0.1);
    }

    #volumeControl {
      text-align: center;
      margin-top: 10px;
    }

    #volumeSlider {
      width: 200px;
      vertical-align: middle;
    }

    #muteButton {
      margin-left: 10px;
      padding: 6px 12px;
      font-size: 14px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      background-color: #007BFF;
      color: white;
    }

    #muteButton:hover {
      background-color: #0056b3;
    }

    label {
      display: block;
      font-size: 16px;
      text-align: center;
      margin: 20px 0 6px 0;
      font-weight: bold;
    }

    .scrollmenu {
      max-height: 120px;
      overflow-y: auto;
      border: 1px solid #ccc;
      border-radius: 6px;
      padding: 10px;
      background: #fff;
      margin: 0 auto 20px auto;
      width: 39%;
    }

    .scrollmenu button {
      display: block;
      width: 100%;
      margin-bottom: 6px;
      padding: 8px;
      font-size: 16px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #f0f0f0;
      color: #333;
      cursor: pointer;
      text-align: left;
    }

    .scrollmenu button:hover {
      background-color: #e0e0e0;
    }

    .knoppen-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
      margin-top: 10px;
    }

    .knoppen-container button {
      width: 90%;
      max-width: 300px;
      padding: 12px;
      font-size: 16px;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      color: white;
      background-color: #007BFF;
      text-align: center;
      white-space: normal;
    }

    .knoppen-container button:hover {
      background-color: #0056b3;
    }

    #status {
      margin-top: 4px;
      font-style: italic;
      color: #666;
      text-align: center;
    }

    #description {
      margin-top: 20px;
      background: #f9f9f9;
      padding: 12px;
      white-space: pre-wrap;
      border-radius: 6px;
      box-shadow: 0 0 6px rgba(0,0,0,0.05);
      text-align: justify;
      hyphens: auto;
    }

    @media (max-width: 768px) {
      #copyUrlButton {
        display: none !important;
      }

      .scrollmenu {
        width: 90%;
      }
    }