/*
Merksatz (sehr wichtig für dein System)
player.css

= Objekt / Inhalt / Verhalten

Also z. B.:

Buttongrößen

Icons

Hover

Tracktext-Typografie

Animationen

Progressbar

Overlay im Player

Innenlayout des Players

👉 „Wie sieht der Player selbst aus?“

player-pos-header.css

= Position / Einbettung / Fläche

Also:

Rahmen oben/unten

min-height

Flex-Ausrichtung im Header

Abstand zum Branding

Breitenbegrenzung

Mobile Umbruch

ob Player unter oder neben Logo sitzt

👉 „Wo und wie liegt der Player auf der Seite?“
Merksatz (sehr wichtig für dein System)
player.css

= Objekt / Inhalt / Verhalten

Also z. B.:

Buttongrößen

Icons

Hover

Tracktext-Typografie

Animationen

Progressbar

Overlay im Player

Innenlayout des Players

👉 „Wie sieht der Player selbst aus?“

player-pos-header.css

= Position / Einbettung / Fläche

Also:

Rahmen oben/unten

min-height

Flex-Ausrichtung im Header

Abstand zum Branding

Breitenbegrenzung

Mobile Umbruch

ob Player unter oder neben Logo sitzt

👉 „Wo und wie liegt der Player auf der Seite?“

.player-head
.player-head-inner
.player-head-inner .brand - lock
.player-head-inner .player-bar
min-height
border-top / bottom
flex-direction
padding

*/
/* --------------------------------------------------------*/

/* --------------------------------------------------------*/
.player-bar.active {
/* --------------------------------------------------------*/
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* --------------------------------------------------------*/
.culture-horizonte .player-bar {
/* --------------------------------------------------------*/
  border-top: 2px solid #1e4fbf;
}

/* --------------------------------------------------------*/
.player-head {
    width: 100%;
    box-sizing: border-box;
}
/* --------------------------------------------------------*/
.player-head {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}
/* --------------------------------------------------------*/

.player-head-inner {
    width: 100%;
    max-width: var(--page-frame-width);
    margin: 3px auto 0 auto;
    padding: 0;
    box-sizing: border-box;
    background: var(--bg);
    /*
    border-top: 2px solid var(--border-light);
    border-right:  2px solid var(--border-light);
    border-bottom:  2px solid var(--border-light);
    border-left:  2px solid var(--border-light);
    */
}
/* -------------------------------------------------------- */
/* Änderungen am 16.5.2026 Anpassung für handy              */
/* -------------------------------------------------------- */

.player-head-inner {
    width: 100%;
    max-width: 100vw;
    min-width: 0;
}

.player-bar {
    display: none;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;

    overflow: hidden;
}

.player-bar > .mini-player {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}
@media (max-width: 600px) {

    .player-head-inner.page-frame {
        width: 100%;
        max-width: 100vw;
        min-width: 0;
        box-sizing: border-box;

        padding-left: 8px;
        padding-right: 8px;
    }

    .player-bar {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .player-bar > .mini-player {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }
}