/* ======================================================================
   FernUni JW Player Theme - Blue (#004C97)
   Ziel: JW Player 8.38.x

   Fokus:
   - Alle Grün-Anteile -> CI-Blau bzw. helles Blau
   - Zentraler Play-Button nur als Dreieck (weiß/blau)
   - Controlbar-Icons über color -> SVG (kein Kasten)
   - Zeitangaben immer weiß
   - Menüs (CC, Settings, Qualität) mit hellblauer Hervorhebung
   ====================================================================== */

/* ---------------- Grundfarbdefinition ---------------- */
:root {
    --feu-white:                #FFFFFF; /* einfach weiß, ggf. aber zentral änderbar) */
    --feu-grey-100:             #B1B3B3; /* FernUni Grau 100% */
    --feu-grey-100-rgb:         rgb(177, 179, 179); /* FernUni Grau 100% */
    --feu-grey-100-rgb-25:      rgb(177, 179, 179, 0.25); /* FernUni Grau 100% */
    --feu-grey-60:              #D4D5D5; /* FernUni Grau 60% */
    --feu-grey-30:              #E8E9E9; /* FernUni Grau 30% */
    --feu-primary-100:          #004C97; /* FernUni Blau 100% */
    --feu-primary-100-rgb-25:   rgba(0, 76, 151, 0.25); /* FernUni Blau 100% 25% Deckkraft*/
    --feu-primary-100-rgb-90:   rgba(0, 76, 151, 0.90); /* FernUni Blau 100% 90% Deckkraft*/
    --feu-primary-100-rgb:      rgba(0, 76, 151); /* FernUni Blau 100% */
    --feu-primary-60:           #6687BB; /* FernUni Blau 60% für Menüs (Hover/Aktiv) */
    --feu-primary-60-rgb:       rgb(102, 135, 187); /* FernUni Blau 60% für Menüs (Hover/Aktiv) */
    --feu-primary-30_blau:      #B3C4DD; /* FernUni Blau 30% für Menüs (Hover/Aktiv) */
    --feu-primary-30:           #B3C4DD; /* FernUni Blau 30% für Menüs (Hover/Aktiv) */
    --feu-primary-30_2:         #B5C5DE; /* helles Blau für Menüs (Hover/Aktiv) */
    --feu-medial_background:    #7ba4ce; /* helles Blau für Menüs (Hover/Aktiv) */
    --feu-krass:                #AF03AF;

    /* --- ANFANG --- Folgendes sollte als Endprodukt genutzt weren!!! */
    /* --feu-white:                #FFFFFF; /* einfach weiß, ggf. aber zentral änderbar) */
    /* --feu-grey-100:             #B1B3B3; /* FernUni Grau 100% */
    /* --feu-grey-60:              #D4D5D5; /* FernUni Grau 60% */
    /* --feu-grey-30:              #E8E9E9; /* FernUni Grau 30% */
    /* --feu-primary-100:          #004C97; /* FernUni Blau 100% */
    /* --feu-primary-60:           #6687BB; /* FernUni Blau 60% für Menüs (Hover/Aktiv) */
    /* --feu-primary-30:           #B3C4DD; /* FernUni Blau 30% für Menüs (Hover/Aktiv) */
    /* Folgendes sollte als Endprodukt genutzt weren!!! --- ENDE ---*/
    
    
    /* 
        krasser Hintergrund:
        background-color: #af03af !important;
        --feu-primary-30:           #fccff4;

    
        MEDIAL Hintergrundfarben:
        helles blau MEDIAL alt:     7ba4ce      rgb(181, 197, 222)
        helles blau MEDIAL neu:     6687BB      rgb(181, 197, 222)
    
    */
    /*--feu-primary-60: #852803; /* helles Blau für Menüs (Hover/Aktiv) */
    /*--feu-primary-30: 6afdf6; /* helles Blau für Menüs (Hover/Aktiv) */
    /*--feu-primary--30_2: #f8bddb; /* helles Blau für Menüs (Hover/Aktiv) */
    /*--feu-primary-100:              #004C97; /* FernUni Blau) */
    /*--feu-primary-60:  #7DA4D9; /* helles Blau für Menüs (Hover/Aktiv) */
    /*--feu-primary-30:   #7BA4CE; /* helles Blau für Menüs (Hover/Aktiv) */
    /*--feu-primary--30_2:  #B5C5DE; /* helles Blau für Menüs (Hover/Aktiv) */
    
    
}

#home-index {                                                                       /* Farbe allgemeiner Hintergrund */
    background-color: var(--feu-primary-30) !important;
}

#home-index .arrow-line-container > div:first-of-type {                             /* Farbe Hintergrund Kategorieauswahl */
    background-color: var(--feu-primary-30) !important;
}
#home-index .arrow-line-container > div > div {                                     /* Button für Kategorieauswahlleiste */
    background-color: var(--feu-primary-30) !important;
    border: 2px solid !important;
    border-color: var(--feu-primary-100) !important;
}
#home-index .item-scroll svg path {                                                 /* Pfeil rechts für mehr Videos in der Zeile */
    fill: var(--feu-primary-100) !important;
}
#home-index .home-media-item .bottom-bar svg path {                                 /* Bottom-Bar: Symbole */
    fill: var(--feu-white) !important;
}









#home-index .home-media-item .bottom-bar > div:nth-of-type(6):hover svg path {      /* Bottom-Bar: Burger-Menü (Bearbeiten/Löschen) */
    fill: var(--feu-primary-60) !important;
}
#home-index .home-media-item .title-and-desc,                                       /* Media-Item: Titel & Beschreibung */
#home-index .home-media-item .bottom-bar > div {                                    /* Bottom-Bar: Text */
    color: var(--feu-white) !important;
}
#home-index .home-media-item > div:first-of-type,                                   /* titelArea (Bottom-Bar OHNE Hover): Text, Hintergrund */
#home-index .home-media-item .movieImageArea > span:first-of-type svg path {        /* titelArea (Bottom-Bar OHNE Hover): Symbole */
    fill: var(--feu-white) !important;
    background-color: var(--feu-primary-100-rgb-90) !important;
    color: var(--feu-white) !important;
}


/* ======================================================================
   1. Controlbar & allgemeine Optik
   ====================================================================== */

/* Kein schwarzer Balken / Schatten unter der Controlbar */
.jwplayer .jw-controlbar {
    background: none !important;
    box-shadow: none !important;
}

/* Zeitangaben (abgespielt & verbleibend) immer weiß */
.jwplayer .jw-controlbar .jw-text-elapsed,
.jwplayer .jw-controlbar .jw-text-duration {
    color: var(--feu-white) !important;
    opacity: 1 !important;
}

/* Alternative Texte (z. B. "LIVE") ebenfalls weiß */
.jwplayer .jw-controlbar .jw-text-alt {
    color: var(--feu-white) !important;
}

/* ======================================================================
   2. Zentraler Play-Button (Display Icon)
   - nur Dreieck sichtbar, kein Kreis/Kasten
   ====================================================================== */

/* Container komplett neutralisieren: kein Rahmen, kein Hintergrund */
.jwplayer .jw-display-icon-container {
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

/* Dreieck standardmäßig weiß */
.jwplayer .jw-display-icon-container .jw-icon,
.jwplayer .jw-display-icon-container .jw-svg-icon {
    color: var(--feu-white) !important;
    fill: currentColor !important;
}

/* Hover: Dreieck in CI-Blau */
.jwplayer .jw-display-icon-container:hover .jw-icon,
.jwplayer .jw-display-icon-container:hover .jw-svg-icon {
    color: var(--feu-primary-100) !important;
}

/* ======================================================================
   3. Buffer-Spinner (Ladesymbol)
   ====================================================================== */

.jwplayer .jw-icon-buffer {
    color: var(--feu-primary-100) !important; /* Grundfarbe */
}

.jwplayer .jw-icon-buffer .jw-svg-icon {
    fill: currentColor !important;       /* Kreis blau */
    stroke: var(--feu-white) !important;          /* Rand weiß */
    stroke-width: 2px !important;
}

/* ======================================================================
   4. Controlbar-Icons (Play, Pause, Lautstärke, CC, Settings, Fullscreen)
   - Farbe über "color" + SVG currentColor
   - keine Kästen
   ====================================================================== */

/* Icons selbst ohne Kästen / Hintergründe, Grundzustand weiß */
.jwplayer .jw-controlbar .jw-button-color,
.jwplayer .jw-controlbar .jw-icon-inline {
    color: var(--feu-white) !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* SVG-Icons folgen immer der Textfarbe (color) */
.jwplayer .jw-controlbar .jw-icon-inline .jw-svg-icon {
    fill: currentColor !important;
    stroke: currentColor !important;
    stroke-width: 1.5px !important;
}

/* Hover: Icon blau (Füllung + Umriss) */
.jwplayer .jw-controlbar .jw-button-color:hover,
.jwplayer .jw-controlbar .jw-icon-inline:hover {
    color: var(--feu-primary-100) !important;
}


/* Hover & Active: Time  --> Elapsed, Countdown, Duration (Füllung + Umriss) */
.jwplayer .jw-controlbar .jw-text-elapsed:hover,
.jwplayer .jw-controlbar .jw-text-countdown:hover,
.jwplayer .jw-controlbar .jw-text-duration:hover,
.jwplayer .jw-controlbar .jw-text-elapsed:active,
.jwplayer .jw-controlbar .jw-text-countdown:active,
.jwplayer .jw-controlbar .jw-text-duration:active {
    color: var(--feu-white) !important;
}

/* 4.1 TOGGLES (CC, HD, Untertitel, Audio):
   - AN  → blau
   - AUS → weiß
*/

/* AUS = weiß */
.jwplayer .jw-controlbar .jw-button-color.jw-toggle.jw-off,
.jwplayer .jw-controlbar .jw-icon-inline.jw-toggle.jw-off {
    color: var(--feu-white) !important;
}

/* AN = blau */
.jwplayer .jw-controlbar .jw-button-color.jw-toggle:not(.jw-off),
.jwplayer .jw-controlbar .jw-icon-inline.jw-toggle:not(.jw-off) {
    color: var(--feu-primary-100) !important;
}

/* Settings-Icon: blau, solange das Menü offen ist */
.jwplayer .jw-controlbar .jw-icon-settings.jw-open,
.jwplayer .jw-controlbar .jw-icon-settings[aria-expanded="true"] {
    color: var(--feu-primary-100) !important;
}

/* ======================================================================
   5. Lautstärke-Hover (Volume-Tip)
   ====================================================================== */

/* Rail im Volume-Tip (kleiner Balken unter/über Icon) */
.jwplayer .jw-volume-tip .jw-rail {
    /* background-color: color-mix(in srgb, var(--feu-grey-100) 25%, transparent); */
    background-color: color-mix(in srgb, var(--feu-primary-100) 25%, transparent);
}

/* Buffer im Volume-Tip */
.jwplayer .jw-volume-tip .jw-buffer {
    background-color: var(--feu-primary-100) !important;
}

/* Progress im Volume-Tip (aktueller Lautstärkepegel) */
.jwplayer .jw-volume-tip .jw-progress {
    background-color: var(--feu-primary-100) !important;
}

/* ======================================================================
   6. Slider: Progress- & Volume-Leiste
   ====================================================================== */

/* Hintergrundschiene (Rail) – dezent hell */
.jwplayer .jw-slider-time .jw-rail,
.jwplayer .jw-slider-volume .jw-rail {
    /* background-color: color-mix(in srgb, var(--feu-grey-100) 25%, transparent); */
    background-color: color-mix(in srgb, var(--feu-primary-100) 25%, transparent);
}

/* Buffer-Anteil – helles CI-Blau, leicht transparent */
.jwplayer .jw-slider-time .jw-buffer,
.jwplayer .jw-slider-volume .jw-buffer {
    background-color: var(--feu-primary-100) !important;
}

/* Gespielter Anteil – volles CI-Blau */
.jwplayer .jw-slider-time .jw-progress,
.jwplayer .jw-slider-volume .jw-progress {
    background-color: var(--feu-primary-100) !important;
}

/* Slider-Knopf (Knob) – weiß mit blauem Rand */
.jwplayer .jw-slider-time .jw-knob,
.jwplayer .jw-slider-volume .jw-knob {
    background-color: var(--feu-white) !important;
    border: 2px solid var(--feu-primary-100) !important;
    box-shadow: none !important;
}

/* ======================================================================
   7. Menüs: Captions, Einstellungen, Qualität etc.
   - Hintergrund dunkel, Hervorhebung hellblau
   ====================================================================== */

/* Alles rund um die Settings (Topbar, Submenu, Submenu-Settings etc.)  -->  Default */
.jwplayer .jw-settings-topbar,
.jwplayer .jw-settings-submenu,
.jwplayer .jw-submenu,
.jwplayer .jw-submenu-topbar,
.jwplayer .jw-settings-topbar .jw-button-color,                                         /* Topbar Symbole inkl. Strich darunter */
.jwplayer .jw-settings-submenu .jw-settings-content-item                                /* Auswahloptionen bei den Settings */
{
    font-weight: bold;
    background-color: var(--feu-primary-100) !important;
    color: var(--feu-white) !important;
}

.jwplayer .jw-settings-topbar .jw-settings-topbar-text                                  /* Überschrift in Untermenü bei Settings */
{
    color: var(--feu-primary-60) !important;
}
/* Alles rund um die Settings (Topbar, Submenu, Submenu-Settings etc.)  -->  Hover */
.jwplayer .jw-settings-topbar .jw-button-color:hover,                                   /* Topbar Symbole inkl. Strich darunter */
.jwplayer .jw-settings-submenu .jw-settings-content-item:hover                          /* Auswahloptionen bei den Settings */
{
    color: var(--feu-primary-60) !important;
}

.jwplayer .jw-settings-submenu .jw-submenu-topbar .jw-settings-content-item,            /* Link "Untertitel-Einstellungen" in Settings-Flyout */
.jwplayer .jw-settings-menu .jw-settings-reset                                          /* Link "Zurücksetzen" in Settings-Flyout */
{
    font-weight: bold;
    text-decoration: none;
    background-color: var(--feu-primary-100) !important;
    color: var(--feu-white) !important;
}

.jwplayer .jw-settings-submenu .jw-submenu-topbar .jw-settings-content-item:hover,      /* Link "Untertitel-Einstellungen" in Settings-Flyout */
.jwplayer .jw-settings-menu .jw-settings-reset:hover                                    /* Link "Zurücksetzen" in Settings-Flyout */
{
    color: var(--feu-primary-60) !important;
}

/* AKTIVE Option (z. B. aktuell gewählte Qualität / Untertitel) */
.jwplayer .jw-settings-submenu .jw-settings-content-item.jw-settings-item-active,       /* Auswahloptionen bei den Settings */
.jwplayer .jw-settings-submenu .jw-settings-content-item[aria-checked="true"] {
    color: var(--feu-primary-60) !important;
}

/* Topbar AKTIVER Reiter (z. B. Captions oder Qualität gewählt) */
.jwplayer .jw-settings-topbar .jw-button-color[aria-expanded="true"],                    /* Topbar Symbole inkl. Strich darunter */
.jwplayer .jw-settings-topbar .jw-button-color[aria-expanded="true"] {
    color: var(--feu-primary-60) !important;
}

/* ======================================================================
   8. Accessibility & Zeit-Anzeige-Absicherung
   ====================================================================== */

.jwplayer .jw-controlbar .jw-button-color:focus-visible,
.jwplayer .jw-controlbar .jw-icon-inline:focus-visible,
.jwplayer .jw-display-icon-container:focus-visible,
.jwplayer .jw-menu .jw-option:focus-visible,
.jwplayer .jw-settings-menu .jw-option:focus-visible {
    outline: 2px solid !important;
    outline-color: var(--feu-primary-100) !important;
    outline-offset: 2px;
}

/* Sicherheitshalber ganz am Ende: Zeitangaben immer weiß */
.jwplayer .jw-controlbar .jw-text-elapsed,
.jwplayer .jw-controlbar .jw-text-duration {
    color: var(--feu-white) !important;
}

/* ======================================================================
   9. TopPanel - Titelleiste oberhalb des Players
   ====================================================================== */
/* Freigabe Symbole immer weiß */
#play-details #share-icon-area path {
    fill: var(--feu-white) !important;
    stroke: var(--feu-white) !important;
}
#play-details #share-icon-area > span,
#play-details #share-icon-area span[style*="position: absolute"] {
    font-weight: bold;
    background: var(--feu-white) !important;
    color: var(--feu-primary-100) !important;
    border: solid 0.25px;
    border-color: var(--feu-primary-100) !important;
}

/* ======================================================================
   10. PlayBottomPanel - Infobereich unterhalb des Players
   ====================================================================== */
/* 10.1 PlayInfo Symbole immer weiß */
#play-details #play-info path {
    fill: var(--feu-white) !important;
    stroke: var(--feu-white) !important;
}
#play-details #play-info > span,
#play-details #play-info span[style*="position: absolute"] {
    background: var(--feu-white) !important;
    color: var(--feu-primary-100) !important;
    font-weight: bold !important;
    text-align: center !important;                          /* ← Text in der Box zentriert */
    border: solid 1.5px var(--feu-primary-100) !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
    z-index: 1000 !important;                               /* optional – Tooltip immer sichtbar */
}
#play-details a.green-link {
    color: var(--feu-primary-60) !important;
}
#play-details a.green-link:hover {
    color: var(--feu-white) !important;
}
#play-details #more-container path {
    fill: var(--feu-white) !important;
    stroke: var(--feu-white) !important;
}
#play-details #more-container:hover path {
    fill: var(--feu-primary-60) !important;
    stroke: var(--feu-primary-60) !important;
}
#play-details #play-bottom path {
    fill: var(--feu-primary-60) !important;
    stroke: var(--feu-primary-60) !important;
}
#play-bottom-panel #tab:nth-of-type(3) svg path {
    fill: var(--feu-primary-60) !important;
    stroke: var(--feu-primary-60) !important;
}

/* --> Prüfen!!! Wird das gebraucht?
#play-bottom-panel #chapter #item-scroll #chapter-item > span,
#play-bottom-panel #chapter #item-scroll #chapter-item span[style*="position: absolute"] {
    font-weight: bold;
    background: #b311aa !important;
    color: var(--feu-primary-100) !important;
    border: solid 0.25px;
    border-color: var(--feu-primary-100) !important;
}
*/

/* ======================================================================
   11. Chapter - Kapitel Panel unterhalb des Players
   ====================================================================== */
#chapter-add-panel {
    margin-top: 2px !important;
    background-color: var(--feu-primary-60) !important;
    color: var(--feu-primary-100) !important;
    display: flex !important;
    align-items: center !important;      /* vertikal ausrichten */
    justify-content: flex-start !important;
    height: 60px !important;
}

/* alle Kinder: keine Standard-Margins von <p>, <div> usw. */
#chapter-add-panel > * {
    margin: 0 !important;
    padding: 0 !important;
    height: 60px !important;
}

#chapter-add-panel > div:first-of-type {
    margin-top: 0 !important;
    color: #adffbf !important;
    padding: 10px !important;
}
#chapter-add-panel > div:nth-of-type(2) {
    margin-top: 0 !important;
    margin-left: 0 !important;
    color: #e9b1e6 !important;
    padding-left: 10px !important;
    /* color: #ffff00 !important; */        /* #ffff00 ist die Originalfarbe --> Testen! */
}
#chapter-add-panel > div:nth-of-type(3) {
    margin-top: 0 !important;
    color: #ff5e5e !important;
    padding-left: 10px !important;
    background-color: var(--feu-primary-100) !important;
}
#chapter-add-panel > div:nth-of-type(4) {
    margin-top: 0 !important;
    color: #004C97 !important;
    padding-left: 10px !important;
    background-color: #ff0000 !important;
}

#chapter-add-panel > a {
    margin-top: 0 !important;
    margin-left: auto !important;        /* schiebt dieses Element an den rechten Rand */
    height: 60px !important;
    background-color: var(--feu-white) !important;
    color: #ff0000 !important;
    border: 0.5px solid #004C97 !important;
    /* optional, damit es auch optisch wie ein Button aussieht */
    padding: 20px 15px 20px 15px !important;      /* Innenabstand */
    border-radius: 3px !important;     /* Abrundung der Rahmen-Ecken */
    text-decoration: none !important;  /* nicht unterstrichen etc. */
    display: inline-block !important;  /* damit Padding sauber wirkt */
}

#chapter-add-panel > a:hover {
    margin-top: 0 !important;
    background-color: #004C97 !important;
    color:  var(--feu-white) !important;
}

/* Grund-Style für alle drei Kapitel-Buttons */
#chapter-add-panel #start-chapter,
#chapter-add-panel #end-chapter,
#chapter-add-panel #stop-start-chapter {
    margin-right: 0px !important;
    margin-right: 0px !important;
    margin-top: 0px !important;
    margin-bottom: 0px !important;
    background-color: var(--feu-white) !important;
    color: #004C97 !important;
    border: 0.5px solid #004C97 !important;
    /* optional, damit es auch optisch wie ein Button aussieht */
    padding: 5px 10px !important;      /* Innenabstand */
    border-radius: 3px !important;     /* Abrundung der Rahmen-Ecken */
    text-decoration: none !important;  /* nicht unterstrichen etc. */
    display: inline-block !important;  /* damit Padding sauber wirkt */
}
 
#chapter-add-panel #start-chapter {
    width: 150px !important;
}
 
#chapter-add-panel #end-chapter {
    width: 150px !important;
}

#chapter-add-panel #stop-start-chapter {
    width: 200px !important;
}

/* Optional: Hover-Effekt für "Kapitel beginnen", "Kapitel beedenden" & "Kapitel beenden & neues Kapitel beginnen"*/
#chapter-add-panel #start-chapter:hover,
#chapter-add-panel #end-chapter:hover,
#chapter-add-panel #stop-start-chapter:hover {
    background-color: #004C97 !important;
    color:  var(--feu-white) !important;
    border: 0.5px solid #004C97 !important;
}

/* Tooltips für Kapitelaktionen */
/* Overflow anzeigen damit die Box nicht abgeschnittel wird! */
#chapter .item-scroll-view-port {
    overflow: visible !important;
}

/* Container für das Delete-Icon als Bezugspunkt */
#chapter .delete-link {
    position: relative !important;
}

/* Tooltip-Box */
#chapter .delete-link span[style*="position: absolute"] {
    background: var(--feu-white) !important;
    color: var(--feu-primary-100) !important;
    font-weight: bold !important;
    text-align: center !important;                          /* ← Text in der Box zentriert */
    border: solid 2.5px var(--feu-primary-100) !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    z-index: 1000 !important;                               /* optional – Tooltip immer sichtbar */

    left: 50% !important;
    transform: translateX(-50%) !important;
}

/* Tooltip-Pfeil */
/* Äußerer (blauer) Rahmen-Pfeil */
#chapter .delete-link span[style*="position: absolute"]::before {
    content: "";
    position: absolute;
    bottom: -10px;                                           /* größerer Pfeil → weiter runter */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;

    border-left:    11px solid transparent;
    border-right:   11px solid transparent;
    border-top:     11px solid transparent;
}

/* Innerer (weißer) Pfeilkörper */
#chapter .delete-link span[style*="position: absolute"]::after {
    content: "";
    position: absolute;
    bottom: -8px;                                           /* 2px über dem äußeren, wirkt wie dicker Rand */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;

    border-left:    9px solid transparent;
    border-right:   9px solid transparent;
    border-top:     9px solid var(--feu-white);                 /* gleiche Farbe wie Box-Hintergrund */
}


/* Tooltips für Home-Media-Items */
/* Overflow anzeigen damit die Box nicht abgeschnittel wird! */
#home-index .item-scroll {
    overflow: visible !important;
}

/* Container für das Bottom-Bar-Icon als Bezugspunkt */
#home-index .bottom-bar {
    position: relative !important;
}

/* Tooltip-Box */
#home-index .bottom-bar span span {
    background: var(--feu-white) !important;
    color: var(--feu-primary-100) !important;
    font-weight: bold !important;
    font-size: 80% !important; 
    line-height: 100% !important;
    text-align: center !important;                          /* ← Text in der Box zentriert */
    border: solid 2.5px var(--feu-primary-100) !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    z-index: 1000 !important;                               /* optional – Tooltip immer sichtbar */

    left: 50% !important;
    transform: translateX(-50%) !important; 
    bottom: 100% !important;    /* ← HÖHER! 100% = Standard, 150–180% = schöner Abstand */   
}

/* Tooltip-Pfeil */
/* Äußerer (blauer) Rahmen-Pfeil */
#home-index .bottom-bar span span::before {
    content: "";
    position: absolute;
    bottom: 0px;                                           /* größerer Pfeil → weiter runter */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;

    border-left:    11px solid transparent;
    border-right:   11px solid transparent;
    border-top:     11px solid transparent;
}

/* Innerer (weißer) Pfeilkörper */
#home-index .bottom-bar span span::after {
    content: "";
    position: absolute;
    bottom: 2px;                                           /* 2px über dem äußeren, wirkt wie dicker Rand */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;

    border-left:    9px solid transparent;
    border-right:   9px solid transparent;
    border-top:     9px solid var(--feu-white);                 /* gleiche Farbe wie Box-Hintergrund */
}

/* ======================================================================
   JW Tooltips – FernUni-CI (weiße Box, blauer Rahmen + Pfeil)
   ====================================================================== */
/* Overflow anzeigen damit die Box nicht abgeschnittel wird! */
.jwplayer .jw-controls {
    overflow: visible !important;
}
/* Äußere Tooltip-Box (behält JW-Positionierung & Pfeil) */
.jwplayer .jw-controlbar .jw-tooltip,
.jwplayer .jw-display-controls .jw-tooltip,
.jwplayer .jw-settings-menu .jw-tooltip,
.jwplayer .jw-time-tip {
    background: var(--feu-white) !important;
    color: var(--feu-primary-100) !important;
    font-weight: bold !important;
    font-size: 80% !important; 
    line-height: 100% !important;
    text-align: center !important;                          /* ← Text in der Box zentriert */
    border: solid 2.5px var(--feu-primary-100) !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    z-index: 1000 !important;                               /* optional – Tooltip immer sichtbar */

    left: 50% !important;
    transform: translateX(-50%) !important;
    bottom: 110% !important;    /* ← HÖHER! 100% = Standard, 150–180% = schöner Abstand */
}

/* Innerer Text: Rahmen + blaue Schrift */
.jwplayer .jw-controlbar .jw-tooltip .jw-text,
.jwplayer .jw-display-controls .jw-tooltip .jw-text,
.jwplayer .jw-settings-menu .jw-tooltip .jw-text,
.jwplayer .jw-time-tip .jw-text {
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    font-weight: inherit !important;
    font-size: inherit !important;
    line-height: 100% !important;
}

/* Tooltip-Pfeil */
/* Äußerer (blauer) Rahmen-Pfeil */
.jwplayer .jw-controlbar .jw-tooltip::before,
.jwplayer .jw-display-controls .jw-tooltip::before,
.jwplayer .jw-settings-menu .jw-tooltip::before,
.jwplayer .jw-time-tip::before {
    content: "";
    position: absolute;
    bottom: 0px;                                           /* größerer Pfeil → weiter runter */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;

    border-left:    11px solid transparent;
    border-right:   11px solid transparent;
    border-top:     11px solid transparent;
}

/* Innerer (weißer) Pfeilkörper */
.jwplayer .jw-controlbar .jw-tooltip::after,
.jwplayer .jw-display-controls .jw-tooltip::after,
.jwplayer .jw-settings-menu .jw-tooltip::after,
.jwplayer .jw-time-tip::after {
    content: "";
    position: absolute;
    bottom: 2px;                                               /* 2px über dem äußeren, wirkt wie dicker Rand */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;

    border-left:    9px solid transparent;
    border-right:   9px solid transparent;
    border-top:     9px solid var(--feu-white);                 /* gleiche Farbe wie Box-Hintergrund */
}