html {
    scroll-behavior: smooth;
    font-family: Arial, sans-serif;
}

body {
    padding-top: 60px;
    margin: 0;
    background-color: #e6e6e6;
}

/*.hauptseiten_body {
    background-image: url('Bilder%20und%20Logos/Fotoshot/Mati.JPG');
    background-size: 1200px;
    background-repeat: no-repeat;
    background-position: center  245px;
}
*/

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; /* Höhe der Navigationsleiste */
    background-color: #0078d7;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    z-index: 10; /* Damit die Navigationsleiste über dem Hintergrundbild liegt */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.4); /* Kleiner Schatten unten */
}
/* Logo */
.logo img {
    position: absolute;
    width: 90px;
    top: 0px;
}

/* Zentrierte Navigation */
.nav-menu {
    flex: 1;
    display: flex;
    justify-content: center; /* Zentriert die Navigations-Items horizontal */
    font-size: 25px;
    
}

/* Desktop-Navigation */
.nav-menu ul {
    display: flex;
    list-style: none;
    gap: 60px;
    margin: 0;
}

.nav-menu ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.nav-menu li :hover{
    color:#ffcc80;
    cursor: pointer;
} 


/* Hamburger-Menü-Button standardmäßig ausblenden */
.menu-toggle {
    display: none;
}

/* Styling for the h1 text */
h1 {
    font-size: 70px; /* Font size of 100px */
    font-weight: bold;
    margin: 0;
    text-align: center; /* Center align, if needed */
}

/* Blue color for "Athletisch" */
.blauer-text {
    color: #0078d7; /* Use a suitable shade of blue */
}

/* Orange color for "Physio" */
.orange-text {
    color: #ffa500; /* Use a suitable shade of orange */
}

.oberstertext {
    font-size: 40px !important;
}

#eingepackt {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 1200px; /* Legt die maximale Breite fest, z.B. 800px */
    margin: 0 auto; /* Zentriert das Element horizontal */
    padding: 20px; /* Optional: Innenabstand für den main-Bereich */
    box-sizing: border-box;
}


#Seitenkopf {
    text-align: center;
    position: relative;
}

#Seitenkopf h1 {
    margin-bottom: 10px; /* Verringert den Abstand unterhalb der Überschrift */
}

#Seitenkopf p{
    font-size:25px;
    color:#000c16;
    margin-top: 5px; /* Verringert den Abstand oberhalb des Absatzes */
    margin-bottom: 10px; /* Verringert den Abstand unterhalb des Absatzes */
}




/* neu Navigation innerhalb der index-Seite----------------------------------------*/
#locations_kontakt_bild {
    position: relative;
    margin-bottom: 50px; /* Abstand zum nächsten Sector */
    width: 100%;
}

.empfangbild {
    position: relative; /* Bestimmt die Höhe der section */
    width: 100%;
}

.empfangbild img {
    width: 100%;
    height: auto; 
    display: block; 
    border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

#locations_und_kontakt_container {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px; /* Sorgt dafür, dass der Container innerhalb der section bleibt */
    z-index: 1;
    background-color: rgba(255, 255, 255, 0.4);
    max-width: calc(100% - 40px); /* Berücksichtigt den linken und rechten Abstand */
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid rgba(204, 204, 204, 0.8);
    border-radius: 10px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

#locations_und_kontakt_container ul {
    display: block;
    width: 100%;
    list-style: none;
}

#locations_und_kontakt_container ul li {
    width: auto;
    text-align: left;
    color: #0078d7;
    font-size: 40px;
}

#locations_und_kontakt_container ul li a:hover {
    color: #ff9900;
    transform: scale(1.1);
    cursor: pointer;
    padding-left: 20px;
}

#locations_und_kontakt_container ul li a {
    color: inherit;
    text-decoration: none;
}
@media (max-width: 768px) {
   
  #locations_kontakt_bild {
    position: relative;
    margin-bottom: 50px; /* Abstand zum nächsten Sector */
    width: 100%;
} 
   
   
    #locations_und_kontakt_container {
        position: static; 
        background-color: transparent; 
        border: none; /* Entfernt den Rand */
        border-radius: 0; /* Entfernt die abgerundeten Ecken */
        box-shadow: none; /* Entfernt den Schatten */
        margin-top: 10px;
        max-width: 100%;
        padding: 0px;
    }

    .empfangbild {
        margin-bottom: 10px; /* Abstand zwischen Bild und Container */
    }

#locations_kontakt_bild {

  text-align: left;
  justify-content: space-between;
  background-color: rgba(255, 255, 255, 0.8);
  max-width: 90%;
  width: 90%;
  box-sizing: border-box;
  padding: 20px;
  margin: 50px auto;
  border: 1px solid rgba(204, 204, 204, 0.8);
  border-radius: 10px;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  position: relative;
  line-height: 35px;  
  }
  #locations_und_kontakt_container ul li {
    
    color: #0078d7;
    font-size: 32px;
    line-height: 40px !important;
}
}

/* Ende Navigation innerhalb der index-Seite_________________*/


#kontaktfuerhandy {
    display: none;
}

#fuertexthandy {
    font-size: 20px !important;
}


#telefonvereinbarungstext {
    font-size: 38px !important; /* Kleinere Schriftgröße für den Text */
}

#telefonnummer {
    font-size: 60px !important;
    padding-top: 30px;
    text-align: center;
}

.reaumlichkeiten {
    display: flex; /* Aktiviert Flexbox */
    align-items: center; /* Zentriert Elemente vertikal */
    gap: 20px; /* Abstand zwischen Bild und Telefonnummer */
    margin-top: 40px;
}

.banner {
    max-width: 650px; /* Setze eine feste Breite (falls nötig) */
    height: auto; /* Behalte das Seitenverhältnis */
}

.banner-link {
    color: blue; /* Standard Blau */
    text-decoration: none; /* Falls du die Unterstreichung entfernen willst */
    width: 70%;
}

.banner-link:visited {
    color: blue; /* Behält die blaue Farbe nach dem Klicken */
}

.banner-link:hover {
    color: darkblue; /* Dunkleres Blau beim Überfahren mit der Maus */
}

.banner-link:active {
    color: blue; /* Behält Blau auch beim Klicken */
}

.telefon-container {
    display: block;
    align-items: right; /* Vertikale Zentrierung der Telefonnummer */
    min-width: 350px;
}
/* Räumlichkeiten auf index; untereinander */
@media (max-width: 800px) {
    .reaumlichkeiten {
        flex-direction: column;
        justify-content: flex-start;
        align-items: start;
        
    }
   
}






.Seitenabschnitte {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
}

/* Links ausgerichtet ul */
.Seitenabschnitte ul {
    list-style: none; /* Entfernt die Standard-Punkte */
    padding: 0;
    text-align: left;
    width: 50%; /* Listenteil auf 50% der Box-Breite begrenzen */
    align-self: flex-start; /* Stellt sicher, dass die Liste ebenfalls oben ausgerichtet ist */
}

.sektionen{
    display: flex;
    justify-content: space-between; /* Abstand zwischen Liste und Kontaktinfo */
    background-color: rgba(255, 255, 255, 0.4); /* Weiß mit 80% Deckkraft */
    max-width: 100%; /* Maximal die Breite des Containers einnehmen */
    width: 100%; /* Passt sich dynamisch an den Container an */
    box-sizing: border-box; /* Sorgt dafür, dass Padding in die Breite eingerechnet wird */
    padding: 50px; /* Abstand von 50px um die Listenelemente */
    margin: 50px auto; /* Zentriert die Box und gibt außen einen Abstand */
    border: 1px solid rgba(204, 204, 204, 0.8); /* Leicht transparente Umrandung */
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}

.sektionen ul li a,
.sektionen ul li a:visited {
    color: inherit; /* Beibehaltung der Textfarbe */
    text-decoration: none; /* Entfernt die Unterstreichung */
}

#listeundkontakt {
    height: auto;
}

.sektionen li{
    color:#0078d7;
    font-size: 40px;
}

.sektionen ul {
    display: block; /* Sicherstellen, dass die Liste nicht plötzlich flex ist */
    width: 100%;
}

.sektionen ul li {
    width: auto; /* Passt sich der Länge des Textes an */
    text-align: left; /* Falls der Text linksbündig sein soll */
}

.sektionen li:hover{
    color: #ff9900;
    transform: scale(1.1);
    cursor: pointer;
}

.location-div {
    gap: 20px;
    display: flex;
    position: absolute;
    top: 165px;
}
.locations {
    z-index: 2;
}

.locations {
    transition: transform 0.3s ease-in-out;
    
}
/* Wenn über den Standort Hamburg gehovert wird, erscheint der entsprechende Pinselstrich */
#Hamburg:hover ~ #pinselBlau1 {
    opacity: 1;
    transform: translateX(0);
}
#Hamburg:hover {
    transform: scale(1.1); /* Vergrößert den Text beim Hover */
}

#Bergedorf:hover ~ #pinselOrange5 {
    opacity: 1;
    transform: translateX(0);
}
#Bergedorf:hover {
    transform: scale(1.1); /* Vergrößert den Text beim Hover */
}

#Lohbrügge:hover ~ #pinselOrange2 {
    opacity: 1;
    transform: translateX(0);
}
#Lohbrügge:hover {
    transform: scale(1.1); /* Vergrößert den Text beim Hover */
}

#Wentorf:hover ~ #pinselOrange4 {
    opacity: 1;
    transform: translateX(0);
}
#Wentorf:hover {
    transform: scale(1.1); /* Vergrößert den Text beim Hover */
}

#Reinbek:hover ~ #pinselOrange6 {
    opacity: 1;
    transform: translateX(0);
}
#Reinbek:hover {
    transform: scale(1.1); /* Vergrößert den Text beim Hover */
}

.kontaktinfo {
    width: 40%; /* Kontaktinfo-Teil auf 40% der Box-Breite begrenzen */
    text-align: rigth;
    align-self: center;
    margin-top: 60px;
}

.telefonkontakt {
    display: flex;
    align-items: center; /* Zentriert Text und Bild vertikal */
    gap: 20px; /* Abstand zwischen Text und Bild */
}

.telefonkontakt p {
    margin: 0; /* Entfernt Standardabstände */
}

#telefon-icon {
    width: 80px;
    display: inline-block;
    transition: transform 0.3s ease; /* Sanfter Übergang beim Hover */
}

#telefon-icon:hover{
    transform: scale(1.1);
}

/*SEKTIONEN*/

#Kontak-mehr {
    /*margin-top: 700px;*/
}

.sektionenAnwendungen {
    display: flex;
    flex-direction: column; /* Stapelt Überschrift und Beschreibung vertikal */
    align-items: center; /* Zentriert den Inhalt horizontal */
    text-align: left; /* Der Text bleibt linksbündig */
    justify-content: space-between; /* Abstand zwischen Liste und Kontaktinfo */
    background-color: rgba(255, 255, 255, 0.8); /* Weiß mit 80% Deckkraft */
    max-width: 100%; /* Maximal die Breite des Containers einnehmen */
    width: 100%; /* Passt sich dynamisch an den Container an */
    box-sizing: border-box; /* Sorgt dafür, dass Padding in die Breite eingerechnet wird */
    padding: 50px; /* Abstand von 50px um die Listenelemente */
    margin: 50px auto; /* Zentriert die Box und gibt außen einen Abstand */
    border: 1px solid rgba(204, 204, 204, 0.8); /* Leicht transparente Umrandung */
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
    position:relative;
    line-height: 35px;
}

.sektionUeberschrift {
    position: absolute; /* Absolute Positionierung, um die Überschrift über die Sektion zu platzieren */
    top: -18px;
    left: 60px;
    margin: 0; /* Kein unnötiger Abstand */
    padding-bottom: 10px; /* Abstand zur Beschreibung */
    width: 100%; /* Überschrift nimmt die gesamte Breite ein */
    text-align: left; /* Überschrift bleibt linksbündig */
    font-size: 35px; /* Größe der Überschrift */
    color: #0078d7;
}

.sektionBeschreibung {
    color:#000c16 !important;
        font-family: Arial, sans-serif; /* Einheitliche Schriftart */
        line-height: 1.8; /* Angenehmer Zeilenabstand */
        font-size: 18px;
}

/* Hervorhebung mit strong */
.sektionBeschreibung strong {
    color: #0078d7; /* Blaue Farbe für Hervorhebungen */
}

.bilder_anwendungen {
    width: 100%; /* Bild nimmt immer die gesamte Breite des Containers ein */
    max-width: 1100px; /* Maximale Breite bleibt erhalten */
    height: auto; /* Verhältnis beibehalten */
    object-fit: cover; /* Stellt sicher, dass das Bild korrekt skaliert wird */
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
}
.image_container {
margin: 0;
}

#kontaktfuerbrowser {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    font-size: 40px;
}

#telefonnummer {
    padding-right: 100px;
}
/* Media Query für die navigation */
@media (max-width: 1210px) {
    /* Hamburger-Menü anzeigen und Desktop-Navigation verstecken */
    .menu-toggle {
        display: block;
        font-size: 24px;
        background: none;
        border: none;
        color: white;
        cursor: pointer;
    }


    
    .nav-menu ul {
        display: none; /* Standardmäßig ausgeblendet in der mobilen Ansicht */
        flex-direction: column;
        background-color: #007cc6;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        padding: 10px 0;
        text-align: center;
    }

    /* Navigation sichtbar, wenn aktiviert */
    .nav-menu.show-menu ul {
        display: flex;
    }

        /* Logo */
    .logo img {
        width: 90px;
    }
     }
/* Media Query für die mobile Ansicht */
@media (max-width: 768px) {
   

    .Seitenabschnitte {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: left;
        width:auto;
    }

    .sektionenAnwendungen {
        padding: 20px;
        margin: 15px auto;
        align-items: flex-start; /* Links ausrichten */
        text-align: left; /* Der Text bleibt linksbündig */
    }

    .sektionUeberschrift {
        position: static; /* Absolute Positionierung aufheben */
        font-size: 32px !important;
        margin-top: 10px;
    }

    .pinselstriche {
        display: none; /* Blende Pinselstriche auf Mobilgeräten aus */
    }

    .kontaktinfo {
        display: none;
    }

    #kontaktfuerhandy {
        display: flex !important; /* Priorität sicherstellen */
        visibility: visible; /* Sicherstellen, dass es sichtbar ist */
        opacity: 1; /* Volle Deckkraft */
        margin: 10px;
        padding: 10px;
    }

    .sektionBeschreibung{
        font-size: 18px !important;
    }

    /* damit auf dem handy nichts verrutscht*/

    .locations{
        display: none;
    }

    #listeundkontakt {
        flex-direction: column; /* Staple Liste und Kontaktinfo */
        align-items: center;
        padding: 10px;
        postion: relative;
    }

   

    body {
    background-image: none;
    }

    .hauptseiten_body {
    background-image: none;
    }

    .bilder_anwendungen {
        width: 100%; /* Passt sich an die Bildschirmbreite an */
        max-width: 500px; /* Maximal 500px breit */
        height: auto !important; /* Seitenverhältnis bleibt gleich */
        object-fit: cover; /* Schneidet gleichmäßig, falls nötig */
        display: block !important;
        visibility: visible !important;
    }

    #Kontak-mehr {
        margin-top: 0px;
        display:none;
    }

    #kontaktfuerbrowser {
        display:none;
    }

    .oberstertext {
        display: none;
    }

    .sektionen{
        max-width: 90%; /* Maximal die Breite des Containers einnehmen */
        width: 90%; /* Passt sich dynamisch an den Container an */
    }

    .sektionenAnwendungen {
        max-width: 90%; /* Maximal die Breite des Containers einnehmen */
        width: 90%; /* Passt sich dynamisch an den Container an */
    }

    .bilder_anwendungen {
        min-width: 200px; /* Maximale Breite bleibt erhalten */
    }

    .telefon-container {
        display: block;
        align-items: right; /* Vertikale Zentrierung der Telefonnummer */
        min-width: 150px;
    }

    .telefon-container p {
        font-size: 16px !important;
        line-height: 1.2 !important;
    }

    
}

/* Karte Kontakt*/


  .responsive-container {
      position: relative;
      width: 100%;
      max-width: 1058px;
      margin: 0 auto 2rem auto;
      height: 500px;
      background: #f9f9f9;
      overflow: hidden;
      border-radius: 10px;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }
    /* Platzhalter-Stil */
    .placeholder {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: #eaeaea;
      background-image: url('Bilder und Logos/map_background.jpg');
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      text-align: center;
      padding: 1rem;
      box-sizing: border-box;
    }
    .placeholder button {
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
      cursor: pointer;
      margin-top: 1rem;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 5px;
      transition: background-color 0.3s;
    }
    .placeholder button:hover {
      background-color: #0056b3;
    }
    /* iFrame nimmt den kompletten Platz ein */
    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: 10px;
    }
    /* Formular-Stil */
 .route-form {
    margin-top: 20px;
    display: flex;
    justify-content: center;
    align-items: stretch; /* Ändere 'center' zu 'stretch' */
    gap: 10px;
}

.route-form input[type="text"],
.route-form input[type="submit"] {
    height: 40px; /* Setze eine feste Höhe für beide Input-Felder */
    padding: 0.5rem;
    font-size: 1rem;
    border-radius: 5px;
    transition: border-color 0.3s;
}

.route-form input[type="text"] {
    width: 350px;
    border: 1px solid #ccc;
}

.route-form input[type="text"]:focus {
    border-color: #007bff;
    outline: none;
}

.route-form input[type="submit"] {
    width: auto; /* Automatische Breite für den Submit-Button */
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.route-form input[type="submit"]:hover {
    background-color: #0056b3;
}

/* Media Query für Bildschirmbreiten von 600px oder weniger */
@media (max-width: 600px) {
    .route-form {
        flex-direction: column; /* Ändere die Richtung der Flexbox zu Spalte */
        align-items: center; /* Zentriere die Elemente */
    }

    .route-form input[type="text"],
    .route-form input[type="submit"] {
        width: 100%; /* Setze die Breite auf 100% für volle Breite */
        max-width: 300px; /* Optional: Setze eine maximale Breite */
    }
}