* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

/* Verhindert, dass Überschriften beim Anklicken hinter der Sticky-Navi verdeckt werden */
h3[id], h4[id] {
    scroll-margin-top: 100px;
}

/* ==========================================
   1. HAUPTNAVIGATION & HEADER
   ========================================== */
.header {
    min-height: 100vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)), url(img/Background.png);
    background-position: center;
    background-size: cover;
    position: relative; 
}

.header, header {
    position: relative; /* Wichtig für die Ausrichtung */
}

nav {
    display: flex;
    padding: 15px 6%;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    
    /* Zarter, langsamer Verlauf über die gesamte Leistenhöhe */
    background: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 1.0) 0%,     /* Ganz oben: 100% deckend weiß */
        rgba(255, 255, 255, 0.85) 50%,   /* In der Mitte: leicht weicher */
        rgba(255, 255, 255, 0.5) 70%,    /* In der Mitte: leicht weicher */
        rgba(255, 255, 255, 0.2) 90%,    /* Kurz vor Ende: stark transparent */
        rgba(255, 255, 255, 0.0) 100%    /* Ganz unten: komplett transparent */
    );

    z-index: 10000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.00);
    box-sizing: border-box;
}

nav img {
    width: 250px;
}

/* Hauptnavigations-Links */
.nav-links {
    flex: 1;
    text-align: right;
    z-index: 1000;
}

.nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 8px 12px;
    position: relative;
}

.nav-links ul li a {
    color: #13a6ea;
    text-decoration: none;
    font-size: 13px;
    transition: color 0.3s;
}

.nav-links ul li::after {
    content: '';
    width: 0%;
    height: 2px;
    background: #f44336;
    display: block;
    margin: auto;
    transition: 0.5s;
}

.nav-links ul li:hover::after {
    width: 100%;
}

/* ==========================================
   1b. MULTI-LEVEL DROPDOWN MENÜ
   ========================================== */

/* Verhindert rote Unterstreichung für Dropdown-Submenüs */
.nav-links ul li.dropdown ul li::after {
    display: none;
}

/* Ebene 1 Dropdown Container */
.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #ffffff;
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    padding: 8px 0 !important;
    z-index: 1000;
    text-align: left;
}

/* Anzeigen von Ebene 1 beim Hover */
.dropdown:hover > .dropdown-menu {
    display: block;
}

/* Style der einzelnen Links in den Dropdown-Menüs */
.dropdown-menu li {
    display: block !important;
    padding: 0 !important;
    width: 100%;
}

.dropdown-menu li a {
    color: #333333 !important;
    padding: 10px 18px !important;
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    transition: background 0.2s, color 0.2s;
}

.dropdown-menu li a:hover {
    background-color: #f4f8fb;
    color: #13a6ea !important;
}

/* Ebene 2 Untermenü (Submenu) Positionierung */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .submenu {
    top: 0;
    left: 100%; /* Klappt rechts aus */
    margin-top: -8px;
}

/* Anzeigen von Ebene 2 beim Hover auf den Unterpunkt */
.dropdown-submenu:hover > .submenu {
    display: block;
}

/* Das Eltern-Element muss relativ positioniert sein */
.dropdown-parent {
  position: relative;
}

/* Das 2. Dropdown / Submenü */
.dropdown-menu .sub-menu {
  position: absolute;
  top: 0;
  /* Statt left: 100% nach links öffnen lassen: */
  right: 100%;
  left: auto;
  
  /* Verhindert, dass das Menü zu breit wird */
  max-width: 90vw;
}

/* Falls es am rechten Bildschirmeck hängt (z.B. in der Header-Navi): */
.dropdown-menu-right {
  right: 0;
  left: auto;
}

/* ==========================================
   HERO / TEXTBOX & BUTTONS
   ========================================== */
.text-box {
    width: 90%;
    color: #13a6ea;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}

.text-box h1 {
    font-size: 62px;
}

.text-box h2 {
    font-size: 24px;
    font-weight: 300;
    color: #ffffff;
    margin-top: 10px;
    margin-bottom: 25px;
}

.text-box p {
    margin: 10px 0 40px;
    font-size: 14px;
    color: #fff;
}

.hero-btn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background-color: #13a6ea;
    border: 1px solid #13a6ea;
    padding: 12px 34px;
    font-size: 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

.hero-btn:hover {
    background-color: #0e83b8;
    border-color: #0e83b8;
}

.hero-btn2 {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #fff;
    padding: 12px 34px;
    font-size: 13px;
    background: transparent;
    margin-top: 50%;
    cursor: pointer;
}

nav .fa {
    display: none;
}

/* Responsive Navigation für Mobilgeräte */
@media(max-width: 700px) {
    .text-box h1 {
        font-size: 20px;
    }
    .text-box h2 {
        font-size: 15px;
    }
    .nav-links ul li {
        display: block;
    }
    .nav-links {
        position: fixed;
        background: #1e293b; /* Dunkles, kühles Anthrazit */
        height: 100vh;
        width: 200px;
        top: 0;
        right: -200px;
        text-align: left;
        z-index: 10000;
        transition: 1s;
    }
    nav .fa {
        display: block;
        color: #13a6ea;
        margin: 10px;
        font-size: 22px;
        cursor: pointer;
    }
    .nav-links ul {
        padding: 30px;
    }
    
    /* Mobile Anpassungen für Dropdown */
    .dropdown-menu, .dropdown-submenu .submenu {
        position: static;
        box-shadow: none;
        background-color: rgba(255, 255, 255, 0.1);
        width: 100%;
    }
    .dropdown-menu li a {
        color: #ffffff !important;
    }
}

/* ==========================================
   2. LEISTUNGEN (COURSE)
   ========================================== */
.Course {
    width: 80%;
    margin: auto;
    text-align: center;
}

h1 {
    font-size: 36px;
    font-weight: 600;
    padding-top: 50px;
}

p {
    color: #777;
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px 0;
}

/* Zeilen-Layout mit unterer Trennlinie */
.row {
    padding: 40px 0;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border-bottom: 1px solid #e0e0e0;
}

.row:last-child {
    border-bottom: none;
}

.course-col {
    flex-basis: 48%;
    box-sizing: border-box;
    text-align: left;
}

.course-col img {
    width: 100%;
    height: 250px;
    object-fit: contain;
    border-radius: 8px;  
    display: block;
}

h3 {
    text-align: left;
    font-weight: 500;
    margin: 10px 0;
}

@media(max-width: 700px) {
    .row {
        flex-direction: column;
        padding: 30px 0;
    }
    .course-col {
        flex-basis: 100%;
        width: 100%;
        margin-bottom: 15px;
    }
    .course-col img {
        height: 200px;
    }
}

/* ==========================================
   3. PRAXIS & INTERDISZIPLINÄRE PARTNER
   ========================================== */
.praxis {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
}

.praxis-col {
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}

.praxis-col img {
    width: 100%;
    display: block;
}

.layer {
    background: transparent;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.layer h3 {
    width: 100%;
    font-weight: 500;
    color: #13a6ea;
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
}

.layer:hover h3 {
    bottom: 49%;
    opacity: 1;
}

/* ==========================================
   4. FOOTER
   ========================================== */
.footer {
    width: 100%;
    text-align: center;
    padding: 30px 0;
    background-image: linear-gradient(#13a6ea,#064663);
}

.footer h4 {
    margin-bottom: 25px;
    margin-top: 20px;
    font-weight: 600;
    color: #fff;
}

.footer p {
    color: #ffffff;
}

.footer a {
    color: #ffffff;
    text-decoration: underline;
}

.footer a:hover {
    color: #bfeae5;
}

/* ==========================================
   5. UNTERSEITEN HEADER (SUB-HEADER)
   ========================================== */
.sub-header1 {
    min-height: 30vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(img/BackgroundSub1.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
    text-align: center;
    color: #fff;
}

.sub-header1 h1 {
    margin-top: 50px;
}

.sub-header-Contact {
    min-height: 30vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(img/BackgroundContact.jpg);
    background-position: center;
    background-size: cover;
    position: relative;
    text-align: center;
    color: #fff;
}

.sub-header-Contact h2 {
    margin-top: 50px;
}

.sub-header-Team {
    min-height: 30vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(img/BackgroundTeam.jpg);
    background-position: center 75%;
    background-size: cover;
    position: relative;
    text-align: center;
    color: #fff;
}

.sub-header-Contact-Team h2 {
    margin-top: 50px;
}

.about-us {
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}

.about-col {
    flex-basis: 48%;
    padding: 30px 2px;
}

.about-col img {
    width: 100%;
}

.about-col h1 {
    padding-top: 0;
}

.about-col p {
    padding: 15px 0 25px;
}

.red-btn {
    border: 1px solid #f44336;
    background-color: transparent;
    color: #f44336;
}

.red-btn:hover {
    color: #fff;
}

/* ==========================================
   6. ANGEBOTE & SERVICES
   ========================================== */
.service-us {
    width: 80%;
    margin: auto;
    padding-top: 80px;
    padding-bottom: 50px;
}

.service-col {
    width: 80%;
    margin: auto;
    flex-basis: 80%;
    padding: 30px 2px;
}

.service-col img {
    width: 100%;
}

.service-col h1 {
    padding-top: 0;
}

.service-col p {
    padding: 15px 0 25px;
}

/* ==========================================
   7. GALERIE & SLIDESHOW
   ========================================== */
.sub-header2 {
    min-height: 25vh;
    width: 100%;
    background-image: linear-gradient(rgba(4,9,30,0.7),rgba(4,9,30,0.7)),url(img/Background3.png);
    background-position: center;
    background-size: cover;
    position: relative;
    text-align: center;
    color: #fff;
}

.show-container {
    width: 100%;
    height: 100vh;
    background: #222;
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper {
    width: 80%;
    height: fit-content;
}

.swiper-slide img {
    width: 100%;
}

.swiper .swiper-button-prev, .swiper .swiper-button-next {
    color: #fff;
}

.swiper .swiper-pagination-bullet-active {
    background: #fff;
}

/* ==========================================
   8. BLOG CONTENT
   ========================================== */
.blog-content {
    width: 80%;
    margin: auto;
    padding: 60px 0;
}

.blog-left {
    flex-basis: 65%;
}

.blog-left img {
    width: 100%;
}

.blog-left h2 {
    color: #222;
    font-weight: 600;
    margin: 30px 0;
}

/* ==========================================
   9. KONTAKT SEITE
   ========================================== */
.location {
    width: 80%;
    margin: auto;
    padding: 80px 0;
}

.location iframe {
    width: 100%;
}

.contact-us {
    width: 80%;
    margin: auto;
}

.contact-col {
    flex-basis: 48%;
    margin-bottom: 30px;
}

.contact-col div {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

.contact-col div .fa {
    font-size: 28px;
    color: #bfeae5;
    margin: 10px;
    margin-right: 30px;
}

.contact-col div p {
    padding: 0;
}

.contact-col div h5 {
    font-size: 20px;
    margin-bottom: 5px;
    color: #555;
    font-weight: 400;
}

.contact-col input, .contact-col textarea {
    width: 100%;
    padding: 15px;
    margin-bottom: 17px;
    outline: none;
    border: 1px solid #ccc;
    box-sizing: border-box;
}

.link-container {
    color: inherit;
    text-decoration: none;
}

/* Social Media Links in Kontakt */
.contact-col .social-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-col .social-link:hover {
    color: #f44336;
}

.contact-col div i {
    font-size: 28px !important;
    color: #f44336 !important;
    width: 35px;
    text-align: center;
    margin-right: 25px;
    display: inline-block;
}

.contact-col div a.social-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    align-items: center;
}

.contact-col div h5 a.social-link:hover {
    color: #f44336;
    transition: color 0.3s ease;
}

/* ==========================================
   10. POPUP & MODAL OVERLAY
   ========================================== */
.popup {
    position: fixed;
    bottom: -10px;
    left: -120px;
    width: 500px;
    z-index: 1000;
    display: none;
}

.popup img {
    width: 100%;
    height: auto;
    cursor: pointer;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);

    z-index: 99999;
    justify-content: center;
    align-items: flex-start;
    padding-top: 10vh;
    box-sizing: border-box;
}

.modal-content {
    background: #fff;
    padding: 35px 25px;
    border-radius: 12px;
    max-width: 420px;
    width: 85%;
    text-align: center;
    position: relative;
    animation: modalFadeIn 0.3s ease-out;
    margin: 0 auto;
}

.modal-icon {
    font-size: 42px;
    color: #f44336;
    margin-bottom: 12px;
}

.modal-content h2 {
    margin-bottom: 10px;
    color: #38b70e;
    font-size: 24px;
}

.modal-content p {
    color: #38b70e;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 25px;
    padding: 0;
}

.modal-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.modal-buttons .hero-btn {
    display: inline-block;
    text-decoration: none;
    color: #fff;
    border: 1px solid #f44336;
    padding: 10px 22px;
    font-size: 14px;
    background: #f44336;
    cursor: pointer;
    border-radius: 5px;
    transition: 0.3s ease;
}

.modal-buttons .outline-btn {
    background: transparent;
    color: #f44336;
}

.modal-buttons .outline-btn:hover {
    background: #f44336;
    color: #fff;
}

@keyframes modalFadeIn {
    from { 
        transform: scale(0.8); 
        opacity: 0; 
    }
    to { 
        transform: scale(1); 
        opacity: 1; 
    }
}

/* ==========================================
   11. GOOGLE BEWERTUNGEN SLIDER
   ========================================== */
.reviews-section {
    width: 100%;
    padding: 40px 0;
    background-color: #fafafa;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    overflow: hidden;
}

.reviews-title {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #d4af37;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 25px;
}

.marquee-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-content {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: scrollLeft 35s linear infinite;
}

.marquee-container:hover .marquee-content {
    animation-play-state: paused;
}

.review-card {
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 12px;
    padding: 20px 25px;
    width: 320px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.stars {
    color: #f39c12;
    font-size: 16px;
    margin-bottom: 8px;
}

.review-text {
    font-size: 13px;
    color: #555;
    line-height: 1.5;
    margin: 0 0 12px 0;
    font-style: italic;
}

.reviewer-name {
    font-size: 12px;
    font-weight: 600;
    color: #333;
    text-align: right;
}

@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ==========================================
   12. ÄRZTE & TEAM
   ========================================== */
.aerzte {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
}

.arzt-col {
    flex-basis: 22%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.arzt-col img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
}

.arzt-col h3 {
    margin-top: 15px;
    font-size: 1.1rem;
}

.arzt-col p {
    font-size: 0.9rem;
    color: #666;
}

.team-btn-container {
    margin-top: 20px;
    margin-bottom: 50px;
}

/* Team-Seite */
.team-seite {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 50px;
    padding-bottom: 50px;
}

.sub-heading {
    margin-top: 40px;
    margin-bottom: 20px;
    font-size: 1.8rem;
    color: #333;
}

.team-col {
    flex-basis: 22%;
    border-radius: 10px;
    margin-bottom: 30px;
    text-align: center;
    display: flex;
    flex-direction: column;
}

.team-col img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    flex-shrink: 0;
}

.team-col h3 {
    margin-top: 15px;
    font-size: 1.1rem;
}

.team-col .position {
    font-size: 0.9rem;
    font-weight: bold;
    color: #13a6ea;
    margin-top: 5px;
}

.team-col .beschreibung {
    font-size: 0.85rem;
    color: #666;
    margin-top: 8px;
    line-height: 1.4;
}

.trennlinie-container {
    margin: 40px 0;
}

.trennlinie {
    border: 0;
    height: 1px;
    background-color: #e0e0e0;
    width: 100%;
}

.phone-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.phone-link:hover {
    color: #13a6ea;
}

/* ==========================================
   13. NEWS SLIDER
   ========================================== */
.news-slider-section {
    width: 80%;
    margin: 40px auto;
    text-align: center;
}

.news-slider-section h2 {
    margin-bottom: 20px;
    color: #333;
}

.news-scroll-container {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 15px 5px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}

.news-scroll-container::-webkit-scrollbar {
    height: 6px;
}

.news-scroll-container::-webkit-scrollbar-thumb {
    background: #13a6ea;
    border-radius: 10px;
}

.news-card {
    flex: 0 0 300px;
    scroll-snap-align: start;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-top: 4px solid #13a6ea;
    border-radius: 8px;
    padding: 20px;
    text-align: left;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.news-date {
    font-size: 0.8rem;
    color: #888;
    display: block;
    margin-bottom: 8px;
}

.news-card h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
    color: #222;
}

.news-card p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.4;
}

/* ==========================================
   14. UNTER-NAVIGATION (DIABETES ETC.)
   ========================================== */
.diabetes-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    
    background: linear-gradient(
        180deg, 
        rgba(255, 255, 255, 0.95) 0%, 
        rgba(255, 255, 255, 0.6) 60%, 
        rgba(255, 255, 255, 0.1) 100%
    );

    
    padding: 10px 15px;
    border-radius: 8px;
    border: 1px solid rgba(224, 224, 224, 0.5);
    margin: 20px auto 30px auto;
    max-width: 1100px;
    width: 100%;
    box-sizing: border-box;
    
    position: sticky;
    top: 160px;
    z-index: 9999;
}

.diabetes-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 8px 12px;
    border-radius: 5px;
    transition: all 0.3s ease;
    display: inline-block;
    white-space: normal;
    word-break: break-word;
    text-align: center;
}

.diabetes-nav a:hover {
    background-color: #13a6ea;
    color: #ffffff;
}

/* Offset für Sprungmarken anpassen */
h3[id], h4[id] {
    scroll-margin-top: 220px;
}

/* ==========================================
   15. PDF ANSICHTEN & DOKUMENTE
   ========================================== */
.pdf-stack-container {
    display: flex;
    flex-direction: column;
    gap: 35px;
    margin-top: 25px;
    width: 100%;
}

.pdf-stack-card {
    width: 100%;
    box-sizing: border-box;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.pdf-stack-card h4 {
    margin: 0 0 15px 0;
    color: #333;
    font-size: 1.2rem;
}

.pdf-iframe {
    width: 100%;
    height: 600px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background-color: #ffffff;
}

.pdf-actions {
    margin-top: 15px;
    text-align: right;
}

.pdf-btn {
    display: inline-block;
    background-color: #13a6ea;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

.pdf-btn:hover {
    background-color: #0d82b9;
}

/* ==========================================
   16. STYLING FÜR INFO-SEITEN
   ========================================== */
.info-article {
    text-align: left;
}

.article-lead {
    font-size: 1.1rem;
    font-weight: 500;
    color: #064663;
    line-height: 1.6;
    margin-bottom: 25px;
    padding: 15px 20px;
    background-color: #f4f8fb;
    border-left: 4px solid #13a6ea;
    border-radius: 4px;
}

.info-card {
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.info-card h3 i {
    color: #13a6ea;
    margin-right: 8px;
}

.info-list {
    list-style: none;
    padding: 0;
    margin: 15px 0;
}

.info-list li {
    padding: 8px 0;
    border-bottom: 1px dashed #eee;
    font-size: 0.95rem;
    color: #555;
}

.info-list li:last-child {
    border-bottom: none;
}

/* Zitat-Box */
.quote-box {
    background-color: #f4f8fb;
    border-radius: 8px;
    padding: 25px;
    margin: 30px 0;
    text-align: center;
    position: relative;
    border: 1px solid #e0e0e0;
}

.quote-icon {
    font-size: 24px;
    color: #13a6ea;
    margin-bottom: 10px;
}

.quote-box p {
    font-size: 1.3rem;
    font-weight: 600;
    color: #222;
    font-style: italic;
    padding: 0;
    margin: 0;
}

/* Reha-Center Box */
.reha-box {
    background: #ffffff;
    border: 2px solid #13a6ea;
    border-radius: 8px;
    padding: 25px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.reha-details {
    background: #f8fafc;
    padding: 15px;
    border-radius: 6px;
    margin: 15px 0;
}

.reha-details h4 {
    color: #064663;
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.reha-details p {
    padding: 3px 0;
    color: #444;
}

.reha-details i {
    color: #f44336;
    width: 20px;
}

.contact-btn {
    text-align: center;
    margin-top: 10px;
    width: 100%;
    box-sizing: border-box;
}

/* ==========================================
   17. STYLING FÜR WEITERE LEISTUNGEN
   ========================================== */
.leistung-list {
    list-style: none;
    padding: 0;
    margin: 15px 0 0 0;
}

.leistung-list li {
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.95rem;
    color: #444;
    display: flex;
    align-items: center;
}

.leistung-list li:last-child {
    border-bottom: none;
}

.leistung-list li i {
    color: #13a6ea;
    margin-right: 12px;
    font-size: 0.9rem;
}

.full-width-card {
    flex-basis: 100%;
    margin-top: 20px;
}

.leistung-grid {
    display: flex;
    gap: 20px;
}

.leistung-grid .leistung-list {
    flex: 1;
}

/* ==========================================
   18. MEDIA QUERIES (TABLETS & SMARTPHONES)
   ========================================== */
@media (max-width: 900px) {
    .diabetes-nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px;
        padding: 8px;
        top: 10px;
        width: 100%;
    }

    .diabetes-nav a {
        flex: 1 1 calc(33.33% - 8px);
        min-width: 100px;
        white-space: normal;
        word-break: break-word;
        text-align: center;
        padding: 8px 4px;
        font-size: 0.75rem;
        line-height: 1.2;
    }
}

@media (max-width: 700px) {
    /* 1. Hauptnavigation auf mobiler Höhe festlegen */
    nav {
        padding: 10px 5%;
        min-height: 60px;
    }

    /* 2. Diabetes-Navi für Smartphones anpassen */
    .diabetes-nav {
        position: sticky;
        top: 160px;
        padding: 8px 10px;
        margin: 10px auto 20px auto;
        gap: 5px;
        z-index: 998;
    }

    /* 3. Buttons auf dem Handy kompakter gestalten */
    .diabetes-nav a {
        font-size: 0.75rem;
        padding: 6px 10px;
        flex: 1 1 auto;
    }

    /* 4. Sprungmarken-Abstand für Mobilgeräte */
    h3[id], h4[id] {
        scroll-margin-top: 130px;
    }

    .leistung-grid {
        flex-direction: column;
        gap: 0;
    }

    .info-card {
        margin-bottom: 20px;
    }

    .article-lead {
        font-size: 0.95rem;
    }

    .quote-box p {
        font-size: 1.1rem;
    }
}

@media (max-width: 500px) {
    .diabetes-nav a {
        flex: 1 1 calc(50% - 6px);
    }

    .pdf-iframe {
        height: 350px;
    }

    .pdf-actions {
        text-align: center;
    }

    .pdf-btn {
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 768px) {
  /* Auf Mobilgeräten das Submenü relativ im Fluss anzeigen */
  .dropdown-menu .sub-menu {
    position: static; /* Hebt absolute Positionierung auf */
    width: 100%;
    box-shadow: none;
    padding-left: 1rem; /* Bessere Hierarchie durch Einrücken */
  }

  /* Verhindert horizontales Scrollen auf dem iPhone */
  body, html {
    overflow-x: hidden;
  }
}

.mobile-nav {
  /* Nutzt den tatsächlich verfügbaren Bereich ohne Safari-Leisten-Cutoff */
  max-height: 80dvh; 
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* Weiches Scrollen auf iOS */
}

/* ==========================================
   DROPDOWN (SINGLE CONTAINER LAYOUT)
   ========================================== */

/* Relativer Anker für die Ausrichtung */
.nav-links ul li.dropdown {
    position: relative;
}

/* Das Haupt-Dropdown unter "Angebote" */
.mega-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0; /* Bündig nach links aufklappen, damit nichts aus dem Rand ragt */
    background-color: #ffffff;
    min-width: 220px;
    padding: 15px 20px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    text-align: left;
    z-index: 10000;
}

/* Einblenden beim Hover auf "Angebote" */
.nav-links ul li.dropdown:hover .mega-dropdown {
    display: block;
}

/* Gruppen-Überschrift (z.B. Sonographie) */
.dropdown-group .group-title {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #13a6ea;
    margin-bottom: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f0f0f0;
}

/* Links unter der Überschrift (z.B. Abdomen, Schilddrüse) */
.dropdown-group a {
    display: block !important;
    color: #444444 !important;
    font-size: 13px !important;
    padding: 6px 0 6px 10px !important; /* Einrückung nach rechts */
    text-decoration: none;
    transition: all 0.2s ease;
}

.dropdown-group a:hover {
    color: #f44336 !important; /* Hover-Farbe */
    transform: translateX(3px); /* Subtiler Effekt beim Drüberfahren */
}

/* Abstand zwischen mehreren Kategorien */
.dropdown-group {
    margin-bottom: 12px;
}

.dropdown-group:last-child {
    margin-bottom: 0;
}


/* ==========================================
   IPHONE & MOBIL ANPASSUNG
   ========================================== */
@media (max-width: 700px) {
    .mega-dropdown {
        position: static; /* Fügt das Menü direkt in den normalen Fluss ein */
        box-shadow: none;
        background: rgba(255, 255, 255, 0.05);
        padding: 10px 15px;
        width: 100%;
    }

    .dropdown-group .group-title {
        color: #ffffff; /* Bessere Lesbarkeit auf mobilem rotem/dunklem Hintergrund */
        border-bottom-color: rgba(255, 255, 255, 0.2);
    }

    .dropdown-group a {
        color: #eeeeee !important;
    }
}

/* ==========================================
   PERMANENT GEÖFFNETES MENU MIT NEBENEINANDER-LINKS
   ========================================== */

/* Ausrichtung des Hauptpunkts */
.nav-links ul li.dropdown-always-open {
    position: relative;
    vertical-align: top;
}

/* Die dauerhaft sichtbare Box unter "Angebote" */
.nav-sub-box {
    display: block; /* Dauerhaft sichtbar, kein Hover erforderlich */
    position: absolute;
    top: 100%;
    right: 0; /* Bündig rechts ausgerichtet, damit nichts über den Rand ragt */
    background-color: #ffffff;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12);
    text-align: center;
    white-space: nowrap; /* Verhindert ungewollten Zeilenumbruch */
    z-index: 10000;
}

/* Überschrift "Sonographie" */
.sub-category-title {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #13a6ea;
    margin-bottom: 6px;
    padding-bottom: 3px;
    border-bottom: 1px solid #f0f0f0;
}

/* Container für die Links nebeneinander */
.pdf-links-row {
    display: flex;
    gap: 12px; /* Abstand zwischen den beiden PDF-Links */
    justify-content: center;
    align-items: center;
}

/* Einzelne PDF-Links */
.pdf-links-row a {
    font-size: 12px !important;
    color: #444444 !important;
    text-decoration: none;
    padding: 4px 8px !important;
    background-color: #f4f8fb;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.pdf-links-row a:hover {
    background-color: #13a6ea;
    color: #ffffff !important;
}

/* ==========================================
   IPHONE & MOBIL ANPASSUNG (responsive)
   ========================================== */
@media (max-width: 700px) {
    .nav-sub-box {
        position: static; /* Setzt die Box auf Handys sauber in den Fluss */
        background: rgba(255, 255, 255, 0.1);
        box-shadow: none;
        margin-top: 8px;
        padding: 8px;
    }

    .sub-category-title {
        color: #ffffff;
        border-bottom-color: rgba(255, 255, 255, 0.2);
    }

    .pdf-links-row {
        flex-wrap: wrap; /* Falls der Platz auf sehr kleinen Handys nicht reicht */
        gap: 6px;
    }

    .pdf-links-row a {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.2);
    }
}
/* ==========================================
   DIRECT INLINE NAV SUB-CONTENT (Ohne Box, direkt darunter)
   ========================================== */

/* Haupt-Element relativ halten, aber Klickbereich frei lassen */
.nav-links ul li.nav-item-inline {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    vertical-align: top;
}

/* Container direkt unter "Angebote" - Transparant & ohne Box/Schatten */
.sub-inline-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 4px;
    background: transparent; /* Keine weiße Box */
    box-shadow: none;        /* Kein Schatten */
    padding: 0;
    pointer-events: auto;    /* Stellt Klickbarkeit sicher */
}

/* Der Titel (z. B. Sonographie:) */
.sub-inline-title {
    font-size: 11px;
    font-weight: 700;
    color: #13a6ea;
    white-space: nowrap;
}

/* Die beiden PDF-Links nebeneinander */
.sub-inline-container a {
    font-size: 11px !important;
    color: #555555 !important;
    text-decoration: none;
    padding: 2px 6px !important;
    white-space: nowrap;
    transition: color 0.2s ease;
}

/* Entfernt den roten Hover-Unterstrich der Hauptnavi für diese Sub-Links */
.sub-inline-container a::after {
    display: none !important;
}

.sub-inline-container a:hover {
    color: #f44336 !important;
    text-decoration: underline;
}

/* ==========================================
   MOBILANPASSUNG (iPhone & Co)
   ========================================== */
@media (max-width: 700px) {
    .nav-links ul li.nav-item-inline {
        align-items: flex-start;
        width: 100%;
        margin-bottom: 10px;
    }

    .sub-inline-container {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
        margin-top: 6px;
        padding-left: 10px;
    }

    .sub-inline-title {
        color: #ffffff;
    }

    .sub-inline-container a {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 4px;
    }
}

/* ==========================================
   STABLE NAV BAR (Verhindert das Verschieben anderer Reiter)
   ========================================== */

/* Elternpunkt "Angebote": Behält seine exakte Position in der Navigationsleiste */
.nav-links ul li.nav-item-inline {
    position: relative; /* Dient als Ankerpunkt für das Submenü */
}

/* Unter-Container: Schwebt frei direkt UNTER "Angebote", ohne die Zeile zu verbreitern/vergrößern */
.sub-inline-container {
    position: absolute;
    top: 100%;            /* Direkt unterhalb des Wortes "Angebote" */
    left: 50%;            /* Zentriert unter "Angebote" */
    transform: translateX(-50%); /* Exakte Ausrichtung zur Mitte von "Angebote" */
    
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 6px;
    
    background: transparent; /* Keine Box */
    box-shadow: none;        /* Kein Schatten */
    padding: 0;
    white-space: nowrap;     /* Verhindert Umbrüche */
    z-index: 999;
}

/* Der Titel (Sonographie:) */
.sub-inline-title {
    font-size: 11px;
    font-weight: 700;
    color: #13a6ea;
}

/* Die beiden PDF-Links */
.sub-inline-container a {
    font-size: 11px !important;
    color: #555555 !important;
    text-decoration: none;
    padding: 2px 4px !important;
    transition: color 0.2s ease;
}

.sub-inline-container a:hover {
    color: #f44336 !important;
    text-decoration: underline;
}

/* Verhindert rote Unterstreichung der Hauptnavi bei den Sub-Links */
.sub-inline-container a::after {
    display: none !important;
}


/* ==========================================
   IPHONE & MOBIL ANPASSUNG
   ========================================== */
@media (max-width: 700px) {
    .sub-inline-container {
        position: static; /* Auf Handys im aufklappbaren Burger-Menü untereinander auflisten */
        transform: none;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
        margin-top: 6px;
        padding-left: 10px;
    }

    .sub-inline-title {
        color: #ffffff;
    }

    .sub-inline-container a {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.15);
        border-radius: 4px;
        padding: 4px 8px !important;
    }
}

/* Ebene 2 Untermenü (Submenu) Positionierung */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu .submenu {
    top: 0;
    /* ÄNDERUNG: Statt left: 100% klappt das Menü jetzt nach links auf */
    right: 100%; 
    left: auto;
    margin-top: -8px;
}

/* Anzeigen von Ebene 2 beim Hover auf den Unterpunkt */
.dropdown-submenu:hover > .submenu {
    display: block;
}

@media(max-width: 700px) {
    /* Mobiles Menü (Seitenleiste) */
    .nav-links {
        position: fixed;

    }

    /* Textfarbe der Menüpunkte im mobilen Menü erzwingen */
    .nav-links ul li a {
        color: #13a6ea !important; /* Dunkelgrauer Text statt Weiß */
        display: block;
        padding: 10px 15px;
    }

    /* Hover/Focus-Farbe für mobile Links */
    .nav-links ul li a:hover {
        color: #13a6ea !important; /* Blau beim Antippen/Hovern */
    }

    /* Das Schließen-X oben rechts ebenfalls dunkel machen */
    .nav-links .fa-times {
        color: #13a6ea  !important;
        font-size: 22px;
        cursor: pointer;
    }
}

/* Layout für Kontaktbereich */
.contact-us {
    width: 80%;
    margin: 30px auto;
}

.contact-us .row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
}

.contact-col {
    flex-basis: 48%;
    margin-bottom: 30px;
}

.contact-col > div {
    display: flex;
    align-items: flex-start;
    margin-bottom: 25px;
}

.contact-col div .fa-solid {
    font-size: 24px;
    color: #3b7b9e;
    margin-right: 20px;
    margin-top: 5px;
}

.contact-col div p {
    margin: 0;
    padding: 0;
    color: #555;
}

/* Hervorgehobene Infobox rechts */
.contact-info-box {
    background-color: #f8f9fa;
    border-left: 5px solid #3b7b9e;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: block !important;
}

.contact-info-box h3 {
    color: #2a5a75;
    font-size: 1.25rem;
    margin-bottom: 15px;
    font-weight: 600;
}

.warning-icon {
    font-size: 28px !important;
    color: #e67e22 !important;
    margin-bottom: 10px;
}

.info-highlight {
    background-color: #eef6fa;
    border: 1px solid #cce3f0;
    padding: 15px;
    border-radius: 6px;
    margin-top: 15px;
}

.info-highlight p {
    color: #2a5a75 !important;
}

/* Responsive Anpassung für Mobilgeräte */
@media (max-width: 768px) {
    .contact-col {
        flex-basis: 100%;
    }
}