body {
    font-family: sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

header {
    background-color: #805576; /* Dein Violett */
    color: white;
    padding: 1em 0;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    /* box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Optional: Leichter Schatten für den Header */
    box-shadow: 0 2px 4px rgb(80 55 76 / 90%);
}

/* --- Navigation --- */
.main-nav {
    display: flex; /* Flexbox für Hamburger und Links */
    justify-content: center; /* Zentriert die Nav-Links auf großen Bildschirmen */
    align-items: center;
    max-width: 1200px; /* Optional: Maximale Breite für die Navigation */
    margin: 0 auto; /* Zentriert die Navigation bei max-width */
}

.nav-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Links nebeneinander auf großen Bildschirmen */
}

.nav-links li {
    margin: 0 1em;
}

.nav-links li a {
    color: white;
    text-decoration: none;
    padding: 0.5em 1em;
    border-radius: 5px;
    transition: background-color 0.3s ease; /* Sanfter Übergang beim Hover */
}

.nav-links li a:hover {
    background-color: #603c5b; /* Dein dunkleres Violett für Hover */
}

/* --- Hamburger Menü (Standardmäßig versteckt auf großen Bildschirmen) --- */
.hamburger-menu {
    display: none; /* Auf großen Bildschirmen versteckt */
    cursor: pointer;
    padding: 0.5em 1em; /* Abstand um das Icon für bessere Klickbarkeit */
}

/* --- Hamburger Menü (Standardmäßig versteckt auf großen Bildschirmen) --- */
.hamburger-menu {
    display: none; /* Auf großen Bildschirmen versteckt */
    cursor: pointer;
    padding: 10px; /* Mehr Klickfläche um die Bars */
    /* Optional: Hintergrundfarbe, wenn du den klickbaren Bereich sehen willst */
    /* background-color: rgba(255, 255, 255, 0.1); */
    border-radius: 5px;
    z-index: 10; /* Damit es über anderen Elementen liegt, falls nötig */
}

/* Die einzelnen Striche des Hamburger-Icons */
.hamburger-menu .bar {
    width: 30px; /* Breite des Striches */
    height: 4px; /* Dicke des Striches */
    background-color: white; /* Farbe der Striche (weiß, passend zum Header) */
    margin: 5px 0; /* Abstand zwischen den Strichen */
    transition: 0.4s; /* Sanfte Animation beim Öffnen/Schliessen */
}

.hamburger-icon {
    width: 30px; /* Größe deines Hamburger-Icons */
    height: auto;
    display: block; /* Stellt sicher, dass das Bild richtig angezeigt wird */
}

/* --- Hauptinhalt --- */
main {
    padding-top: 60px; /* Genügend Abstand nach oben für die fixed Navigation */
    min-height: calc(100vh - 120px); /* Stellt sicher, dass der Main-Bereich mindestens die Höhe des Viewports abzüglich Header/Footer einnimmt */
    /* Diese drei Zeilen entfernen, um die vertikale Zentrierung aufzuheben: */
    /* display: flex; */
    /* flex-direction: column; */
    /* justify-content: center; */
    /* align-items: center; */
}

section {
    padding: 20px;
    margin-bottom: 20px;
    max-width: 800px; /* Optional: Maximale Breite für den Inhalt der Seiten */
    width: 100%;
    margin-left: auto; /* Zentriert die Section selbst innerhalb des Main-Bereichs */
    margin-right: auto; /* Zentriert die Section selbst innerhalb des Main-Bereichs */
    text-align: center; /* Zentriert den Text innerhalb der Section */
    box-sizing: border-box;
}

section h1, section h2 {
    color: #805576; /* Dein Violett für Überschriften */
    margin-bottom: 1em;
}

.titelbild-rund {
    display: block; /* Wichtig für die Zentrierung und Layout-Kontrolle */
    width: 180px;   /* Feste Breite des runden Ausschnitts */
    height: 180px;  /* Feste Höhe des runden Ausschnitts (muss gleich sein wie Breite für perfekten Kreis) */
    border-radius: 50%; /* Macht das Element perfekt rund */
    object-fit: cover; /* Stellt sicher, dass das Bild den runden Bereich ausfüllt, ohne verzerrt zu werden */
    object-position: center; /* Zentriert den Bildausschnitt im Kreis */
    margin: 30px auto; /* Zentriert das Bild horizontal und gibt vertikalen Abstand */
    border: 5px solid #805576; /* Optional: Ein Rahmen in deinem Violett */
    box-shadow: 5px 5px 10px rgba(0,0,0,0.4); /* Optional: Ein leichter Schatten */
    /*box-shadow: 0 2px 4px rgb(80 55 76 / 90%);*/
    /*box-shadow: 5px 5px 5px rgb(00 99 00 / 90%);*/
}

.hero-section {
    display: flex; /* Aktiviert Flexbox */
    align-items: center; /* Zentriert Bild und Text vertikal auf gleicher Höhe */
    justify-content: center; /* Zentriert den gesamten Block horizontal */
    gap: 30px; /* Abstand zwischen Bild und Titel */
    margin-top: 50px; /* Abstand nach oben vom Header */
    margin-bottom: 30px; /* Abstand nach unten zum nächsten Element */
    flex-wrap: wrap; /* Erlaubt das Umbrechen von Bild und Titel auf kleineren Screens */
    text-align: center; /* Zentriert den Text, falls er umbricht */
}

.hero-section .titelbild-rund {
    /* Die Basisstile für das runde Bild bleiben gleich, aber wir passen die Margins an */
    margin: 0; /* Entfernt den globalen margin: auto; damit es im Flex-Container funktioniert */
    flex-shrink: 0; /* Verhindert, dass das Bild zu stark schrumpft */
}

.hero-section .hero-title {
    font-size: 2.5em; /* Deutlich grössere Schrift für den Haupttitel auf Desktop */
    color: #805576; /* Dein Violett */
    margin: 0; /* Standard-Margin von h1 entfernen */
    line-height: 1.2; /* Zeilenhöhe für bessere Lesbarkeit bei grosser Schrift */
}

.team-bilder {
    display: flex;
    flex-wrap: wrap; /* Standard: Bilder brechen um, wenn kein Platz ist (für Mobilgeräte) */
    justify-content: center;
    gap: 20px; /* Abstand zwischen den Bildern */
    margin-top: 30px;
    margin-bottom: 30px;
    max-width: 1000px; /* Max. Breite für den gesamten Bilderblock, damit er zentriert bleibt */
    margin-left: auto;
    margin-right: auto;
}

.team-mitglied, .arzt-mitglied {
    flex: 1 1 100%; /* Basisbreite von ca. 1/3 abzüglich des Gaps */
    /* Ermöglicht drei Spalten auf größeren Bildschirmen und Umbruch auf kleineren.
       Hier versuchen wir, sie kleiner zu machen (ca. 33% pro Element). */
    text-align: center;
    background-color: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box; /* Wichtig für die korrekte Breitenberechnung mit Padding */
    transition: transform 0.2s ease-in-out; /* Sanfte Animation für den Hover-Effekt */
}

.team-mitglied:hover, .arzt-mitglied:hover {
    transform: translateY(-4px) scale(1.04); /* Hebt die Box beim Hover leicht an */
}

.team-mitglied img, .arzt-mitglied img {
    max-width: 100%;
    height: auto;
    /* width: 150px; /* Feste Breite entfernt, damit Bild sich anpassen kann */
    /* height: 150px; /* Feste Höhe entfernt */
    /* object-fit: cover; /* Entfernt, da wir keine festen Dimensionen mehr erzwingen */
    margin-bottom: 15px;
    /*border: 3px solid #805576;*/
    display: block; /* Stellt sicher, dass das Bild korrekt skaliert wird */
    box-shadow: 0 2px 4px rgb(80 55 76 / 90%);
}

.team-mitglied h3, .arzt-mitglied h3 {
    color: #805576;
    margin-bottom: 5px;
}

.team-mitglied p, .arzt-mitglied p {
    font-size: 0.95em;
    color: #555;
}

.leistungen-grid {
    display: grid; /* Verwendet CSS Grid für ein flexibles Layout */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* 3 Spalten auf größeren Bildschirmen, flexibel */
    gap: 25px; /* Abstand zwischen den Boxen */
    margin-top: 30px;
    margin-bottom: 30px;
    max-width: 1200px; /* Max. Breite für den gesamten Leistungsblock */
    margin-left: auto;
    margin-right: auto;
    padding: 0 20px; /* Innenabstand für kleine Bildschirme */
}

.leistungs-box {
    background-color: white;
    padding: 25px;
    border-radius: 10px; /* Leicht abgerundete Ecken */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Sanfter Schatten */
    text-align: left; /* Text linksbündig innerhalb der Box */
    display: flex; /* Flexbox, um H4 und UL auszurichten */
    flex-direction: column; /* H4 und UL untereinander */
    justify-content: flex-start; /* Inhalt oben in der Box starten */
    align-items: flex-start; /* Inhalt linksbündig ausrichten */
    transition: transform 0.2s ease-in-out; /* Sanfte Hover-Animation */
}

.leistungs-box-fullwidth {
    grid-column: 1 / -1;
}

.leistungs-box:hover {
    transform: translateY(-5px); /* Hebt die Box beim Hover leicht an */
}

.leistungs-box h4 {
    color: #805576; /* Dein Violett für die Box-Überschriften */
    margin-top: 0;
    margin-bottom: 15px; /* Abstand zur Liste */
    font-size: 1.25em; /* Etwas größere Schrift für die Überschrift */
    border-bottom: 2px solid #805576; /* Unterstreichung im Violett */
    padding-bottom: 5px; /* Abstand zwischen Text und Unterstreichung */
    width: 100%; /* Unterstreichung über die ganze Breite */
}

.leistungs-box ul {
    list-style: none; /* Entfernt die Standard-Listenpunkte */
    padding: 0;
    margin: 0;
    width: 100%; /* Stellt sicher, dass die Liste die volle Breite einnimmt */
}

.leistungs-box ul li {
    margin-bottom: 10px; /* Abstand zwischen den Listenpunkten */
    position: relative; /* Für den custom Bullet Point */
    padding-left: 25px; /* Platz für den custom Bullet Point */
    line-height: 1.4; /* Bessere Lesbarkeit der Zeilen */
}

.leistungs-box ul li:last-child {
    margin-bottom: 0; /* Kein Abstand nach dem letzten Punkt */
}

/* Custom Bullet Point mit deinem Violett */
.leistungs-box ul li::before {
    content: '•'; /* Ein runder Punkt als Bullet */
    color: #805576; /* Dein Violett */
    font-size: 1.2em; /* Größe des Bullet Points */
    position: absolute;
    left: 0;
    top: 0; /* Zentriert mit dem Text */
}

.leistungs-box ul li strong {
    color: #555; /* Etwas dunkler als der normale Text, aber nicht das Violett */
    font-weight: bold;
}

.leistungs-box p {
    padding: 2px;
    margin: 0;
}

/* --- Footer --- */
footer {
    display: flex; /* Aktiviert Flexbox für den Footer-Inhalt */
    justify-content: center; /* Zentriert die Links horizontal im Footer */
    align-items: center; /* Zentriert die Inhalte vertikal */
    padding: 1em 20px; /* Padding: 1em oben/unten, 20px links/rechts */
    background-color: #333;
    color: white;
    position: sticky;
    bottom: 0;
    width: 100%;
    box-sizing: border-box; /* Wichtig, damit Padding nicht die Breite sprengt */
}

.footer-links {
    display: flex; /* Flexbox für die Links selbst, um ihren Abstand zu steuern */
    gap: 20px; /* Abstand zwischen Impressum und Datenschutz Link */
    margin: 0; /* Stellt sicher, dass keine ungewollten Margins da sind */
}

.footer-links a {
    color: white; /* Links im Footer sollen weiß sein */
    text-decoration: none; /* Unterstreichung entfernen */
    /* margin-left: 20px; <--- DIESEN HIER ENTFERNEN, wir nutzen jetzt 'gap' im .footer-links */
    transition: color 0.3s ease; /* Sanfter Übergang beim Hover */
}

.footer-links a:hover {
    color: #805576; /* Dein Violett beim Hover */
}



@media (max-width: 1024px) { /* Anpassungen für grössere Tablets und kleinere Laptops */
    .hero-section {
        gap: 20px;
        margin-top: 40px;
    }
}


/* --- Responsives Design für kleinere Bildschirme (max-width: 768px) --- */
@media (max-width: 768px) {
    .main-nav {
        justify-content: space-between; /* Hamburger links, später Navigation rechts */
        padding: 0 1em; /* Etwas Abstand an den Seiten */
    }

    .hamburger-menu {
        display: block; /* Hamburger-Icon auf kleinen Bildschirmen anzeigen */
        padding: 0.4em 0;
    }

    .nav-links {
        display: none; /* Navigation auf kleinen Bildschirmen standardmäßig verstecken */
        flex-direction: column; /* Links untereinander */
        width: 100%;
        position: absolute; /* Positioniert die Navigation unter dem Header */
        top: 60px; /* Höhe des Headers (adjust if your header changes height) */
        left: 0;
        background-color: #805576; /* Hintergrundfarbe für das ausklappbare Menü */
        box-shadow: 0 2px 5px rgba(0,0,0,0.2);
        animation: slideDown 0.3s ease-out; /* Animation für das Aufklappen */
    }

    .nav-links.active { /* Diese Klasse wird per JavaScript hinzugefügt */
        display: flex; /* Zeigt die Navigation an, wenn sie aktiv ist */
    }

    .nav-links li {
        margin: 0;
        text-align: center;
        width: 100%;
        padding: 0.5em 0; /* Abstand für jeden Navigationspunkt */
    }

    .nav-links li a {
        display: block; /* Macht den Link klickbar über die gesamte Breite des Listenelements */
        padding: 1em 0; /* Mehr Padding für bessere Klickbarkeit */
    }

    header {
        padding: 0.1em 0; /* Weniger Padding für den Header auf kleinen Bildschirmen */
    }

    footer {
        flex-direction: row; /* Bleibt nebeneinander oder geht nur eine Zeile */
        padding: 0.5em 15px; /* Weniger Padding für den Footer auf kleinen Bildschirmen */
    }

    .footer-links {
        margin-top: 0; /* Kein zusätzlicher Abstand mehr nötig */
        gap: 15px; /* Etwas weniger Abstand zwischen den Links auf Mobilgeräten */
    }

    /* Damit der Inhalt unter der ausgefahrenen Navigation nicht versteckt wird */
    main {
        padding-top: 30px; /* Mehr Abstand oben, um die potenzielle ausgefahrene Nav zu berücksichtigen */
    }

    /* Animation für das Ausklappen */
    @keyframes slideDown {
        from { transform: translateY(-100%); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }

    .hero-section {
        flex-direction: column; /* Bild und Titel untereinander auf kleineren Bildschirmen */
        gap: 15px;
        margin-top: 30px;
    }
    .hero-section .hero-title {
        font-size: 1.5em; /* Angepasste Grösse für Mobilgeräte */
    }
    .hero-section .titelbild-rund {
        width: 180px; /* Bildgrösse auf Mobilgeräten */
        height: 180px;
    }

    .arzt-mitglied {
        /* Auf Bildschirmen zwischen 481px und 768px: Zwei Bilder pro Zeile.
           'calc(50% - 15px)' berücksichtigt 20px gap zwischen zwei Elementen,
           also 10px links und 10px rechts von jedem Element.
           Oder einfacher: `calc(50% - 10px)` wenn das gap 20px ist und es 2 Elemente sind.
           Let's use 10px for the gap between two.
           */
        flex: 1 1 calc(50% - 10px); /* Jedes Element nimmt ca. die Hälfte der Breite ein, minus etwas für den Abstand. */
        max-width: 160px;
    }    
 

    .leistungen-grid {
        grid-template-columns: 1fr; /* Eine Spalte auf kleinen Bildschirmen */
        padding: 0 20px; /* Zum Beispiel 20px links und rechts für Mobilgeräte */
    }

    .leistungs-box {
        margin-bottom: 15px; /* Abstand zwischen den Boxen in der Single-Column-Ansicht */
    }
}

@media (max-width: 769px) {
    .team-mitglied {
        flex: 1 1 calc(25% - 8px);
        max-width: 120px;
    }   
}

@media (max-width: 579px) {
    .team-mitglied {
        flex: 1 1 calc(50% - 10px);
        max-width: 180px;
    }   
}

@media (max-width: 480px) {

    .hero-section .hero-title {
        font-size: 1.3em; /* Noch kleiner für sehr kleine Bildschirme */
    }
    .hero-section .titelbild-rund {
        width: 130px; /* Sehr kleine Bildgrösse */
        height: 130px;
        border-width: 3px; /* Dünnerer Rahmen */
    }

    .leistungen-grid {
        grid-template-columns: 1fr; /* Eine Spalte auf sehr kleinen Bildschirmen */
        gap: 15px; /* Etwas kleinerer Abstand zwischen den Boxen auf sehr kleinen Bildschirmen */
        padding: 0 15px; /* Angepasstes seitliches Padding für sehr kleine Bildschirme */
    }

    .leistungs-box {
        padding: 20px; /* Etwas weniger Padding innerhalb der Boxen für sehr kleine Bildschirme */
        margin-bottom: 0; /* Das Gap reicht aus, keine zusätzliche margin-bottom */
    }

    .leistungs-box h4 {
        font-size: 1.1em; /* Überschrift eventuell etwas kleiner machen */
        margin-bottom: 10px;
    }

    .leistungs-box ul li {
        font-size: 0.9em; /* Textgröße der Listenpunkte anpassen */
        padding-left: 20px; /* Etwas weniger Einzug für den Bullet Point */
    }
    .leistungs-box ul li::before {
        font-size: 1.1em; /* Bullet Point Größe anpassen */
    }
}

/* --- Media Query für größere Bildschirme (ab 769px) --- */
@media (min-width: 769px) {
    .arzt-mitglied {
        flex: 1 1 calc(33.333% - 14px); /* ca. ein Drittel minus 2/3 des gaps (20px) = 13.33px */
        max-width: 180px;
    }

    .team-mitglied {
        flex: 1 1 calc(33.333% - 14px);
        max-width: 160px;
    }   
}