/* Allgemeine Stileinstellungen */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Mobile Navigation */
@media (max-width: 991px) {
    .empfang-image-container {
        display: flex;
        justify-content: center; /* Zentriert das Bild horizontal */
        align-items: center; /* Zentriert das Bild vertikal, falls der Container höher als das Bild ist */
        padding: 2%; /* Innenabstand des Containers */
        background-color: #ffffff; /* Hintergrundfarbe für den Container (optional) */
        border-radius: 10px; /* Abgerundete Ecken für den Container (optional) */
    }
    .empfang-image {
        max-width: 100%; /* Bild passt sich der Breite des Containers an */
        height: auto; /* Höhe des Bildes wird proportional zur Breite angepasst */
        border-radius: 10px; /* Abgerundete Ecken für das Bild (optional) */
    }


    /* Carousel Container */
    .carousel-container {
        width: 92%;
        margin: 20px auto; /* Zentriert das Carousel */
        border-radius: 10px; /* Abgerundete Ecken für den Container (optional) */
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: #006673; /* Hintergrundfarbe der Pfeiltasten */
        border-radius: 20%; /* Runde Form der Pfeiltasten */
        width: 50px; /* Größe des Pfeilsymbols */
        height: 50px; /* Größe des Pfeilsymbols */
        background-size: 50%; /* Größe des Pfeilsymbols */
    }
    /* Stil für die Pfeilsymbole */
    .carousel-control-prev-icon::before,
    .carousel-control-next-icon::before {
        font-size: 24px; /* Größe des Pfeilsymbols */
        color: white; /* Farbe der Pfeile */
    }
    /* Carousel Anpassungen */
    .carousel-inner img {
        width: 100%;
        height: auto; /* Erhält das Seitenverhältnis der Bilder */
        border-radius: 10px; /* Abgerundete Ecken für den Container (optional) */
    }
    .carousel-indicators li {
        background-color: #006673; /* Farbe der Indikatoren */
        height: 8px;
        width: 25px;
    }
    .carousel-indicators .active {
        background-color: #97c5dc; /* Farbe des aktiven Indikators */
    }


    .dual-card-container {
        display: flex;
        flex-wrap: wrap; /* Erlaubt das Umfließen der Karten */
        gap: 30px; /* Abstand zwischen den Karten */
        justify-content: center; /* Zentriert die Karten */
        margin-right: 10px;
        margin-left: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .single-card-container {
        display: flex;
        flex-wrap: wrap; /* Erlaubt das Umfließen der Karten */
        gap: 30px; /* Abstand zwischen den Karten */
        justify-content: center; /* Zentriert die Karten */
        margin-right: 10px;
        margin-left: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .card {
        border-radius: 10px; /* Abgerundete Ecken für den Container (optional) */
        min-width: 85%;
        width: 90%;
    }
    .card-img-top {
        border-radius: 10px 10px 0 0;
    }
    .card-header {
        background-color: #FFFFFF; /* Hintergrundfarbe des Headers */
        color: #006673; /* Textfarbe */
        text-align: center; /* Zentriert den Text */
        margin-top: 10px;
        padding: 10px; /* Innenabstand */
        font-size: 12px; /* Schriftgröße */
        font-weight: bold; /* Fettdruck */
        border-bottom: 2px solid #006673; /* Untere Randlinie */
    }
    .card-body {
        color: #333; /* Textfarbe */
        padding: 10px; /* Innenabstand */
        margin-top: -15px;
        margin-bottom: 0px;
        font-size: 19px; /* Schriftgröße */
        text-align: center; /* Zentriert den Text */
        height: 65px;
        font-family: "Comic Sans MS";
        font-style: normal !important;
    }
    .card-body p, .card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6 {
        font-style: normal; /* Verhindert kursiven Text in den Text-Elementen */
    }

    .anfahrt-image-container {
        margin-top: 20px; /* Abstand nach oben */
        margin-bottom: 20px; /* Abstand nach unten */
        display: flex;
        flex-direction: column; /* Elemente untereinander anordnen */
        align-items: center; /* Elemente zentrieren */
        text-align: center; /* Text im Container zentrieren */
    }
    .anfahrt-image-container h5 {
        color: #006673; /* Textfarbe an das Design anpassen */
        margin-bottom: 15px; /* Abstand zum Bild darunter */
        font-size: 25px; /* Einheitliche Schriftgröße */
        margin-top: 0px;
        font-style: normal; /* Kein Kursivtext */
    }
    .anfahrt-image-container img {
        width: 95%; /* Bild auf 80% der Containerbreite setzen */
        height: auto; /* Höhe automatisch an die Breite anpassen */
        border-radius: 5px; /* Leicht abgerundete Ecken für ein modernes Design */
    }
    
}

/* Desktop Navigation (ab 992px) */
@media (min-width: 992px) {
    .empfang-image-container {
        display: flex;
        justify-content: center; /* Zentriert das Bild horizontal */
        align-items: center; /* Zentriert das Bild vertikal, falls der Container höher als das Bild ist */
        padding: 20px; /* Innenabstand des Containers */
        background-color: #ffffff; /* Hintergrundfarbe für den Container (optional) */
        border-radius: 10px; /* Abgerundete Ecken für den Container (optional) */
        flex: 1; /* Füllt den verfügbaren Platz aus */
    }
    .empfang-image {
        max-width: 100%; /* Bild passt sich der Breite des Containers an */
        height: auto; /* Höhe des Bildes wird proportional zur Breite angepasst */
        border-radius: 8px; /* Abgerundete Ecken für das Bild (optional) */
    }

    /* Carousel Container */
    .carousel-container {
        width: 75%;
        margin: 20px auto; /* Zentriert das Carousel */
        border-radius: 10px; /* Abgerundete Ecken für den Container (optional) */
    }
    .carousel-control-prev-icon,
    .carousel-control-next-icon {
        background-color: #006673; /* Hintergrundfarbe der Pfeiltasten */
        border-radius: 20%; /* Runde Form der Pfeiltasten */
        width: 50px; /* Größe des Pfeilsymbols */
        height: 50px; /* Größe des Pfeilsymbols */
        background-size: 50%; /* Größe des Pfeilsymbols */
    }
    /* Stil für die Pfeilsymbole */
    .carousel-control-prev-icon::before,
    .carousel-control-next-icon::before {
        font-size: 24px; /* Größe des Pfeilsymbols */
        color: white; /* Farbe der Pfeile */
    }
    /* Carousel Anpassungen */
    .carousel-inner img {
        width: 100%;
        height: auto; /* Erhält das Seitenverhältnis der Bilder */
        border-radius: 10px; /* Abgerundete Ecken für den Container (optional) */
    }
    .carousel-indicators li {
        background-color: #006673; /* Farbe der Indikatoren */
        height: 6.5px;
        width: 30px;
    }
    .carousel-indicators .active {
        background-color: #97c5dc; /* Farbe des aktiven Indikators */
    }

    .dual-card-container {
        display: flex;
        flex-wrap: wrap; /* Erlaubt das Umfließen der Karten */
        gap: 40px; /* Abstand zwischen den Karten */
        justify-content: center; /* Zentriert die Karten */
        margin-right: 100px;
        margin-left: 100px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .single-card-container {
        display: flex;
        flex-wrap: wrap; /* Erlaubt das Umfließen der Karten */
        gap: 30px; /* Abstand zwischen den Karten */
        justify-content: center; /* Zentriert die Karten */
        margin-right: 10px;
        margin-left: 10px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .card {
        border-radius: 8px; /* Abgerundete Ecken für den Container (optional) */
        width: 271px;
    }
    .card-img-top {
        border-radius: 7px 7px 0 0;
    }
    .card-header {
        background-color: #FFFFFF; /* Hintergrundfarbe des Headers */
        color: #006673; /* Textfarbe */
        font-family: "Comic Sans MS";
        text-align: center; /* Zentriert den Text */
        margin-top: 10px;
        padding: 10px; /* Innenabstand */
        font-size: 12px; /* Schriftgröße */
        font-weight: bold; /* Fettdruck */
        border-bottom: 2px solid #006673; /* Untere Randlinie */
    }
    /* Stil für Card-Body */
    .card-body {
        color: #333; /* Textfarbe */
        padding: 10px; /* Innenabstand */
        margin-top: -15px;
        margin-bottom: 0px;
        font-size: 19px; /* Schriftgröße */
        text-align: center; /* Zentriert den Text */
        height: 65px;
        font-family: "Comic Sans MS";
        font-style: normal !important;
    }
    .card-body p, .card-body h1, .card-body h2, .card-body h3, .card-body h4, .card-body h5, .card-body h6 {
        font-style: normal; /* Verhindert kursiven Text in den Text-Elementen */
    }

    .anfahrt-image-container {
        margin-top: 20px; /* Abstand nach oben */
        margin-bottom: 20px; /* Abstand nach unten */
        display: flex;
        flex-direction: column; /* Elemente untereinander anordnen */
        align-items: center; /* Elemente zentrieren */
        text-align: center; /* Text im Container zentrieren */
    }
    .anfahrt-image-container h5 {
        color: #006673; /* Textfarbe an das Design anpassen */
        margin-bottom: 15px; /* Abstand zum Bild darunter */
        font-size: 25px; /* Einheitliche Schriftgröße */
        margin-top: 0px;
        font-style: normal; /* Kein Kursivtext */
    }
    .anfahrt-image-container img {
        width: 50%; /* Bild auf 80% der Containerbreite setzen */
        height: auto; /* Höhe automatisch an die Breite anpassen */
        border-radius: 5px; /* Leicht abgerundete Ecken für ein modernes Design */
    }
}

/* Stil für die Tabelle der Sprechzeiten */
.table-table-borderless {
    width: auto; /* Automatische Breite, um unnötigen Platz zu vermeiden */
    margin: 0 auto; /* Zentriert die Tabelle */
    border-collapse: collapse; /* Entfernt die Abstände zwischen den Tabellenzellen */
}

.table-table-borderless th,
.table-table-borderless td {
    padding: 5px 10px; /* Reduzierter Innenabstand für eine kompaktere Darstellung */
    text-align: left; /* Text linksbündig */
    font-size: 20px; /* Schriftgröße der Inhalte */
}

.table-table-borderless th {
    font-weight: bold; /* Fettdruck für die Wochentage */
    color: #006673; /* Primäre Farbe für den Text */
    font-family: "Comic Sans MS";
    font-style: normal !important;
}

.table-table-borderless td {
    color: #333; /* Textfarbe für die Zeiten */
    font-weight: normal; /* Normale Schriftstärke für die Zeiten */
    font-family: "Comic Sans MS";
    font-style: normal !important;
}

.table-table-borderless td:nth-child(2),
.table-table-borderless td:nth-child(4) {
    width: 40px; /* Verkleinert die Breite der Spalten mit den Uhrzeiten */
    text-align: center; /* Zentriert den Text in diesen Spalten */
    font-family: "Comic Sans MS";
    font-style: normal !important;
}

.table-table-borderless td:nth-child(3) {
    width: 10px; /* Verkleinert die Breite der Spalte mit dem Bindestrich */
    text-align: center; /* Zentriert den Bindestrich */
    font-family: "Comic Sans MS";
    font-style: normal !important;
}

/* Stil für den Header "Sprechzeiten" */
h5 {
    color: #006673; /* Farbe des Headers */
    margin-bottom: 15px; /* Abstand zum unteren Rand */
    text-align: center; /* Zentriert den Header */
    margin-top: 20px;
    font-size: 25px;
}

/* Stil für den Text unter der Tabelle */
p {
    margin-top: 15px; /* Abstand nach oben */
    text-align: center; /* Zentriert den Text */
    font-family: "Comic Sans MS";
    font-style: normal !important;
}

/* Allgemeiner Stil für den Kontaktbereich, schlicht und einfach */
.contact-info {
    font-size: 20px; /* Einheitliche Schriftgröße */
    color: #333; /* Einheitliche Textfarbe */
    margin-top: 20px; /* Abstand nach oben */
    margin-bottom: 20px;
    font-style: normal; /* Stellt sicher, dass der Text nicht kursiv ist */
}

/* Stil für den Header */
.contact-info h5 {
    color: #006673; /* Farblich zum Layout passend */
    margin-top: 0px;
    margin-bottom: 15px; /* Kleiner Abstand zum Text darunter */
    font-size: 25px; /* Etwas größere Schriftgröße für den Header */
    font-style: normal; /* Stellt sicher, dass der Header-Text nicht kursiv ist */
}

/* Absatzstil */
.contact-info p {
    margin: 5px 0; /* Einheitlicher Abstand zwischen den Absätzen */
    font-style: normal; /* Stellt sicher, dass die Absätze nicht kursiv sind */
    font-family: "Comic Sans MS";
    font-style: normal !important;
}

.impressum-container {
    margin-top: 20px; /* Abstand nach oben */
    margin-bottom: 20px; /* Abstand nach unten */
    font-style: normal; /* Kein Kursivtext */
    margin-left: 20px;
}

.impressum-container h5 {
    color: #006673; /* Farbe passend zum Design */
    margin-bottom: 15px; /* Abstand zum Bild darunter */
    font-size: 25px; /* Einheitliche Schriftgröße */
    margin-top: 0px;
    font-style: normal; /* Kein Kursivtext */
}

#impressum-text {
    font-size: 18px; /* Einheitliche Schriftgröße für den Text */
    line-height: 1.6; /* Zeilenabstand für bessere Lesbarkeit */
    color: #02557f; /* Angenehme Textfarbe */
    font-family: "Comic Sans MS";  
}

.web_info_bild {
    display: block;
    margin-top: 10px;
    max-width: 100%; /* Bildbreite an Container anpassen */
    height: auto; /* Bildhöhe proportional anpassen */
}

#disclaimer h6 {
    font-size: 18px; /* Etwas kleinere Schriftgröße für den Disclaimer-Titel */
    font-weight: bold; /* Fettschrift */
    color: #006673; /* Passende Farbe für den Disclaimer-Titel */
    margin-top: 20px; /* Abstand nach oben */
}

#disclaimer {
    font-size: small;
    margin-top: 20px; /* Abstand zum vorherigen Text */
    font-size: 14px; /* Kleinere Schriftgröße für den Disclaimer-Text */
    line-height: 1.6; /* Zeilenabstand für bessere Lesbarkeit */
    color: #555; /* Leicht abgedunkelte Textfarbe für den Disclaimer */
}

#web_info_bild {  
    width: 185pt;
    margin-top: 2px;
}

#web_roman {  
    height: 20pt;
    margin-top: -2px;
    margin-bottom: 0px;
}