.video {
    /* 1. Responsivität: Nimmt die Breite des Parent an */
    width: 100%;
    /* 2. Platzhalter für die Höhe (z.B. 16:9-Format) */
    /*aspect-ratio: 16 / 9;*/
    /*aspect-ratio: var(--video-ratio, 16/9);*/

    position: relative;
    overflow: hidden; /* Sicherstellen, dass nichts übersteht */
    background-color: #000;
    font-size: 0;
    line-height: 0;
    margin: 0;
    padding: 0;

    /*background-image: url('PFAD_ZU_IHREM_POSTERBILD.jpg');*//* Muss dynamisch gesetzt werden */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000;

    /* Fix für Safari < 15 */
    padding-bottom: 56.25%;
    height: 0;
}
/* Wenn der Browser aspect-ratio versteht */
@supports (aspect-ratio: 16/9) {
  .video {
    aspect-ratio: var(--video-ratio, 16/9);
    padding-bottom: 0;
    height: auto;
  }
}
.video__element {
    /* Nimmt den gesamten Platz des Parent ein */
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover; /* Stellt sicher, dass das Video den Container füllt */

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #000; /* Falls das Bild noch lädt */
}
.video__play-button-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Der Button ist anfangs sichtbar */
  opacity: 1;
  transition: opacity 0.3s;
  /*background: rgba(0, 0, 0, 0.4);*/ /* Dunkle Tönung */
  pointer-events: auto; /* Klicks auf Overlay zulassen */
  cursor: pointer;

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/* Zustand nach dem Start des Videos */
.video.is-ending .video__play-button-overlay,
.video.is-playing .video__play-button-overlay {
    opacity: 0;
}
.video.is-fullscreen .video__play-button-overlay,
.video.has-started .video__play-button-overlay  {
    opacity: 0;
    cursor: default;
}
.video.is-playing .video__play-button-overlay {
    pointer-events: none; /* Klicks durchlassen */
}

.video__play-icon {
    width: 60px;
    height: 60px;
    border: 2px solid white;
    border-radius: 50%;
    padding-left: 5px; /* Korrektur für die optische Mitte des Dreiecks */
    box-shadow: 0 0 20px rgba(255, 255, 255, 0.5);
}
/* ... Ihr bestehendes CSS ... */

/* Die Controls Leiste selbst */
.video__controls {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 10; /* Stellen Sie sicher, dass es über dem Video liegt */
}
.video__controls,
.video__controls * {
    box-sizing: border-box;
}

/* Styles für die Buttons */
.video__control {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    padding: 0 5px;
}

/* Fortschritts-Container und Anzeige */
.video__progress-container {
    flex-grow: 1; /* Nimmt den meisten Platz ein */
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
}

.video__progress-slider,
.video__volume-slider {
    /* Standard-Slider-Look zurücksetzen und anpassen */
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: #555;
    cursor: pointer;
    border-radius: 3px;
    /* Slider-Daumen (Thumb) anpassen ist komplex und browserabhängig, hier eine Vereinfachung */
    padding: 10px 0;
}

.video__progress-slider {
  flex-grow: 1;
  height: 4px; /* Die Track-Höhe bleibt klein */
}
/* Und vergrößern Sie den sichtbaren Daumen (einfacher als Skalierung) */
.video__progress-slider::-webkit-slider-thumb {
    width: 14px; /* Vergrößert den sichtbaren Kreis leicht */
    height: 14px;
    margin-top: -5px; /* Muss korrigiert werden, um in die Mitte des Tracks zu kommen */
}

.video__time-current,
.video__time-duration {
    font-family: monospace;
    font-size: 14px;
}

/* Lautstärke-Container */
.video__volume-container {
    display: flex;
    align-items: center;
    min-width: 120px; /* Feste Breite für Lautstärke-Slider */
}
/* Hide and show controls */
.video__controls {
    /* ... (Bestehende Stile) ... */
    /* Standardmäßig verstecken */
    opacity: 0;
    pointer-events: none; /* Wichtig, damit Klicks auf das Video durchgehen */
    transition: opacity 0.3s ease; /* Sanfter Fade-Effekt */
}

/* Zeigt Controls beim Hover auf dem gesamten Player */
/*.video:hover .video__controls,*/
/* Zeigt Controls, wenn JavaScript die Klasse für Tap/Fokus setzt */
.video__controls.is-controls-visible {
    opacity: 1;
    pointer-events: auto; /* Klicks auf Controls zulassen, wenn sichtbar */
}

/* ------------------ NEU: Kleiner Play/Pause Button in der Leiste ------------------ */
/* Das Icon im Button sollte immer sichtbar sein, wenn die Leiste sichtbar ist */
.video__control--playpause {
    /* Optional: Einheitliche Größe für die Symbole */
    min-width: 1.5em;
    text-align: center;
}
/* ------------------- RESPONSIVE ÄNDERUNGEN (Mobile/Schmal) ------------------- */
@media (max-width: 600px) {
    .video__volume-container {
        /* Setze Position auf dem Button, um Popover zu ermöglichen */
        position: relative;
        /* Standardmäßig nur das Lautsprechersymbol zeigen */
        width: auto;
        min-width: auto;
        flex-shrink: 0; /* Verhindert das Schrumpfen des Symbols */

        /* Setzt den Slider-Input (nicht den Container) auf absolute Position */
    }

    /* Der Slider ist standardmäßig versteckt und vertikal positioniert */
    .video__volume-container .video__volume-slider {
        position: absolute;
        bottom: 35px; /* Positioniert den Slider über dem Mute-Button */
        left: 50%;

        /* Dreht den Slider vertikal */
        transform-origin: bottom center;
        transform: translateX(-50%) rotate(-90deg);

        /* Größe des vertikalen Sliders */
        width: 100px;
        height: 15px; /* Vergrößere die Klickzone */

        /* Verstecke ihn standardmäßig */
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s;
    }

    /* Beim Klick/Tap: Aktiviere und zeige den Slider */
    .video__volume-container.is-volume-active .video__volume-slider {
        opacity: 1;
        pointer-events: auto;
    }

    /* Verstecke den Mute-Button nicht, aber zeige nur ihn im container */
    .video__volume-container .video__control--mute {
        display: block;
    }

    /* Damit der Mute-Button den Slider nicht verdeckt, muss der Slider-Input im DOM */
    /* nach dem Button liegen, oder wir müssen sicherstellen, dass nur der Slider selbst
       die vertikale Transformation erhält. */
}
/* Fullscreen
-------------------------------------------------------------------------------------- */
body.is-fullscreen-locking {
  position: fixed;
  width: 100%;
  overflow: hidden;
}

.video.is-fullscreen {
    /* Stellt sicher, dass der Player den gesamten Bildschirm einnimmt */
    width: 100vw;
    height: 100vh;
    background-color: black; /* Füllt die Ränder, wenn das Seitenverhältnis nicht passt */
    display: flex; /* Wichtig für die Zentrierung und Contain-Logik */
    justify-content: center;
    /*align-items: center;*/
    /* Deaktiviert unnötige Ränder/Padding des Players im Fullscreen */
    padding: 0;
    margin: 0;
}
/* Das eigentliche HTML5 <video>-Element */
.video.is-fullscreen .video__element {
    /* Das Video wird so skaliert, dass es in den Vollbild-Container passt,
       ohne abgeschnitten zu werden (Contain). */
    object-fit: contain;

    /* Nimmt maximal die Breite/Höhe des Players (100vw/100vh) ein */
    /*max-width: 100%;
    max-height: 100%;*/

    /* Der Aspekt-Ratio-Hack (padding-bottom) muss hier wahrscheinlich überschrieben werden */
    /* padding-bottom: 0 !important; */

    /* Setzt das Video auf automatische Höhe und Breite */
    /*width: auto;
    height: auto;*/
}
/* Pseudo Fullscreen Feature */
.is-pseudo-fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    /*height: 100vh !important;*/ /* Fallback für ältere Browser */
    height: 100dvh !important; /* Die magische Einheit für iOS */
    z-index: 9999999 !important;
    background-color: #000 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    justify-content: center;
    /*padding: 0 !important;*/
    /* WICHTIG: Padding in die 100dvh einrechnen */
    box-sizing: border-box !important;
    /* NEU: Verhindert, dass Scroll-Gesten die System-UI triggern */
    overscroll-behavior: none;
    touch-action: none;

    /* Safe Area Insets */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left) !important;
}

/* Wichtig: Blenden Sie den Aspect-Ratio-Platzhalter (falls vorhanden) im Fullscreen aus */
.video.is-fullscreen .video__wrapper {
    padding-bottom: 0 !important;
}
/* Fixes */
/* Erlaubt Zeilenumbrüche im Untertitel-Container von Safari */
.video-player video::-webkit-media-text-track-container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
}

.video-player video::-webkit-media-text-track-display {
    white-space: pre-line !important; /* Erzwingt den Umbruch bei Zeilenumbrüchen */
    overflow-wrap: break-word;     /* Bricht lange Wörter */
    max-width: 90%;               /* Verhindert das Rauslaufen am Rand */
    margin: 0 auto;
}
/* Versteckt die nativen Cues in fast allen Webkit-Browsern */
.video-player video::-webkit-media-text-track-container {
    display: none !important;
    visibility: hidden !important;
}

.video-player video::cue {
    background: transparent !important;
    color: transparent !important;
    opacity: 0 !important;
}