@charset "utf-8";
/* CSS Document */
/* Custom für Home-Page-Title – nur wenn Klasse page-title-home da ist */
#page-title.page-title-home {
    min-height: 80vh; /* Mindesthöhe für Video-Full-View, Polo hat ähnlich für Parallax */
    display: flex; /* Flex für Centering – konsistent in Edge/Firefox */
    align-items: center; /* Vertikal mittig */
    justify-content: center; /* Horizontal mittig */
    padding: 120px 0; /* Basis-Padding wie Polo, aber mehr Top für transparenten Header */
    overflow: hidden; /* Video nicht überlaufen lassen */
}
#page-title.page-title-home .container {
    z-index: 1; /* Content über Video */
}
#page-title.page-title-home .page-title {
    padding-top: 450px; /* Höherer Abstand für Text – macht Video "größer" im View */
    margin: 0 auto;
}
/* Responsiv wie Polo (Media-Query für Mobile) */
@media (max-width: 991px) {
    #page-title.page-title-home {
        min-height: 50vh;
        padding: 80px 0;
    }
    #page-title.page-title-home .page-title {
        padding-top: 150px; /* Weniger auf Handy */
    }
}
/* Fixed Audio – sticky links oben */
.fixed-audio {
    position: fixed; /* Sticky beim Scrollen */
    top: 100px; /* Auf Menü-Höhe – passe an (z.B. 80px wenn Header kleiner) */
    left: 20px; /* Links in der Ecke, mit Abstand */
    z-index: 1000; /* Hoch, über Content/Video, unter Header (Polo-Header z-index ca. 999) */
    background: none; /* Transparent – Video sichtbar */
    padding: 10px; /* Etwas Raum um Audio */
    text-align: left; /* Links align */
    color: #fff; /* Weiß für dark Video-BG */
    max-width: 300px; /* Breiter machen – fixxt Gestauchtes in Edge */
    min-width: 250px; /* Mindestbreite für nutzbare Controls */
}
/* Audio-Player style – für besseres Layout in Edge */
.fixed-audio audio {
    width: 100%; /* Full in div */
    min-height: 40px; /* Höher für Controls – Edge braucht das manchmal */
    background: rgba(255, 255, 255, 0.2); /* Leicht transparent, falls gewollt – oder none */
}
/* Schrift für "Musik gefällig?" – passe an Polo's Poppins */
.fixed-audio p {
    font-family: 'Poppins', sans-serif; /* Wie Titles in Polo (aus head.html) */
    font-weight: 400; /* Normal, wie span in Polo */
    font-size: 14px; /* Passe an Polo's Span-Size (aus styles.css) */
    color: #fff; /* Weiß */
    margin-bottom: 5px; /* Kleiner Abstand zu Audio */
}
/* Mobile: Passe an (Polo responsiv) */
@media (max-width: 991px) {
    .fixed-audio {
        display: none; /* Voll ausblenden – kein Kollision mehr */
    }
}

/* Seiten-spezifische Anpassung für Rehasport – nur diese Seite betroffen */
.rehasport-page .page-title-left {
    margin-top: 40px;  /* Passe diesen Wert an, z. B. 200px für mehr Abstand */
}

/* Seiten-spezifische Anpassung für Rehasport – Fullscreen-Höhe für den Bild-Container */
.rehasport-page #page-title {
    height: 100vh;  /* Macht den Container vollbild-hoch (passt sich der Bildschirmhöhe an). Das Bild füllt es aus, Text bleibt oben. */
    min-height: 600px;  /* Optionale Mindesthöhe für kleine Bildschirme, um Inhalte nicht zu quetschen – passe bei Bedarf an. */
}

/* Falls du den Text etwas anpassen möchtest (optional, nicht nötig): */
.rehasport-page .page-title-left {
    margin-top: 50px;  /* Feinjustierung der Text-Position, falls er zu weit oben/oben ist – teste und passe an (z. B. 0px für ganz oben). */
	
}

/* Anpassungen für das Modal */
#modalSubscriptionForm .modal-content {
    display: flex;
    flex-direction: column;  /* Stapelt Elemente vertikal: Bild > Inhalt > Button */
    justify-content: flex-start;  /* Alles von oben starten */
}

#modalSubscriptionForm img {
    width: 100%;  /* Bild full-width */
    height: auto;  /* Proportionen beibehalten */
    margin-bottom: 10px;  /* 10px Abstand unter dem Bild (passe zu mehr mm, z.B. 20px) */
}

#modalSubscriptionForm .text-center {
    margin-top: 0px;  /* Zusätzlicher Abstand über dem Button */
}