* {
  box-sizing: border-box;
}
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/poppins-v24-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/poppins-v24-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/poppins-v24-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/poppins-v24-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/poppins-v24-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/poppins-v24-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/poppins-v24-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/poppins-v24-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/poppins-v24-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/poppins-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/poppins-v24-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/poppins-v24-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/poppins-v24-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/poppins-v24-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* poppins-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/poppins-v24-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { overflow-y: scroll; } /* Fix für zentrierte Layouts bei Scrollbar */
body {
    background-color: white;
    margin: 0;
    overflow-x: hidden;
    font-family: 'Poppins', sans-serif; /* Hier wird Poppins aktiviert */
}
body::-webkit-scrollbar {
    display: none;
}
body {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
/* Verhindert horizontales Scrollen auf dem Handy */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}

/* Sorgt dafür, dass Bilder sich an ihre Eltern-Container anpassen */
img, video {
    max-width: 100%;
    height: auto;
}
main {
  flex: 1; /* Das ist der Motor, der den Footer nach unten drückt */
}

/* Navbar - Fixiert & Glas-Effekt */
.navbar { 
    position: fixed; 
    /*top: 10px; 
    left: 20px;*/
    width: 100%;
    padding: 10px 40px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 1000; 
    color: rgb(255, 255, 255);
    background: #FFBF00; 
    transition: 0.3s;
}


.navbar .logo {
  margin-top: 8px;
    position: absolute; /* Nimmt das Logo aus dem normalen Fluss heraus */
    left: 50%;          /* Schiebt es auf die Hälfte der Breite */
    transform: translateX(-50%); /* Zieht es um seine eigene halbe Breite zurück */
    color: white;       /* Falls das Logo Text ist */
    cursor: pointer;
   
    
}
.navbar .logo img {
    height: 45px;       /* Das Bild füllt die Höhe des .logo-Containers aus */
    width: auto;        /* Seitenverhältnis bleibt erhalten */
}

.nav-links {
    display: flex;
    list-style: none;
    gap: 20px;
    z-index: 1;
    
}

.nav-right {
    z-index: 1; /* Stellt sicher, dass der Button klickbar bleibt */
}

.nav-links a { color: rgb(0, 0, 0); text-decoration: none; font-weight: 500; }
.nav-btn { border: 1px solid white; padding: 8px 16px; border-radius: 4px; }
/* 1. Container ohne Hintergrundfarbe */
.nav-right {
    display: flex;
    justify-content: flex-end;
    align-items: center; /* Wichtig für vertikale Zentrierung */
    flex: 1;
}

/* 2. Hier den Klassennamen korrigieren (.nav-right statt .navbar-right) */
.nav-right a {
    text-decoration: none;
    font-size: 20px; /* 30px ist sehr groß für eine Navbar, evtl. anpassen */
    font-weight: 600;
    
    /* Jetzt stylen wir den Button, statt den Container */
    background-color: white;
    color: rgb(0, 0, 0);
    padding: 8px 16px;
    border-radius: 12px;
}
/* Hamburger Icon Style */
.menu-toggle {
    display: none; /* Desktop ausgeblendet */
    font-size: 30px;
    cursor: pointer;
    color: black;
    z-index: 1001; /* Über dem Logo */
}


.hero {
    /* 1. Höhe und Breite anpassen */
    
    /* 100vh = volle Höhe. Wir ziehen ab: 
       80px (Navbar) + 20px (Margin oben) + 20px (Margin unten) = 120px */
    height: calc(80vh - 100px); 
    width: calc(100% - 20px);
    
    /* ... restlicher Code ... */
    overflow: hidden;

    
    /* 2. Zentrierung und Rand */
     
    border: 10px solid white; 
    margin-bottom: 0px;
    margin-top: 90px;

   
    
    /* 3. WICHTIG: Das schneidet das Bild an den Ecken ab */
    overflow: hidden; 
    
    /* 4. Hintergrund */

    background-size: cover; 
    background-position: center;
    
    /* 5. Flexbox */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: rgb(0, 0, 0);
    
    /* 6. Damit Border nicht die Größe sprengt */
    box-sizing: border-box; 
}
/* Hero-Container als Flexbox, um Text und Bild nebeneinander zu legen */
.hero-content {
    display: flex;
    align-items: center; /* Zentriert Elemente vertikal */
    justify-content: space-between; /* Schafft Platz zwischen Text und Bild */
    gap: 40px; /* Abstand zwischen Text und Bild */
    max-width: 1200px; /* Maximale Breite der Sektion */
    margin: 0 auto; /* Zentriert den gesamten Inhalt auf der Seite */
    padding: 50px 20px;
}

/* Flex-Basis sorgt dafür, dass beide Seiten gleich viel Platz haben */
.hero-text {
    flex: 1;
    color:#283F24;
}

.hero-image {
    flex: 1;
    text-align: right; /* Richtet das Bild rechts aus */
    
}

/* Macht das Bild responsiv, damit es nicht über den Rand ragt */
.hero-image img {
   width: 100%;             /* Nutzt die volle Breite des Containers */
    max-width: 400px;        /* Begrenzt die maximale Größe (Wert nach Wunsch anpassen) */
    
    aspect-ratio: 1 / 1;     /* ERZWINGT DAS 1:1 VERHÄLTNIS (QUADRAT) */
    object-fit: cover;
}

/* --- Button Styling --- */
.btn-hero {
    display: inline-block;
    background-color: #467235; /* Deine Wunschfarbe (aktuell ein Medizin-Blau/Grün) */
    color: white;
    text-decoration: none;
    padding: 12px 28px;
    font-size: 1.1rem;
    font-weight: bold;
    border-radius: 5px;
    margin-top: 20px; /* Abstand nach oben zum Text */
    transition: all 0.3s ease; /* Weicher Übergang beim Drüberfahren */
}

/* Hover-Effekt für den Button */
/* Der Grundzustand (dein jetziges Design) */

/* Der Hover-Effekt */
.btn-hero:hover {
  background-color: #355828; /* Etwas dunkleres Grün */
  transform: scale(1.05);    /* Der Button wird beim Drüberfahren 5% größer */
  box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* Ein sanfter Schatten erscheint */
  cursor: pointer;
}
.btn-hero:active {
  transform: scale(0.98); /* Der Button wird beim Klicken ganz kurz etwas kleiner */
}
/* Responsiv: Auf Handys wird das Bild unter den Text geschoben */

.nav-btn{
    transition: all 0.3s ease; /* Weicher Übergang beim Drüberfahren */
}
.nav-btn:hover{
    
    transform: translateY(-3px); /* Der Button hebt sich leicht an */
    box-shadow: 0 6px 20px rgba(52, 152, 219, 0.5);
}
.navbar-btn:active {
    transform: translateY(0);
}



hr {
    width: 90%;        /* Nutzt 90% der verfügbaren Breite */
    max-width: 900px;  /* Geht aber nie über 900px hinaus */
    margin: 20px auto;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.5);
}


    
/* Styling für die Bewertungs-Box ___________--------------------------------------------------------*/
.hero-rating {
    display: flex;
    align-items: center; /* Richtet Logo, Sterne und Text vertikal mittig aus */
    gap: 10px; /* Abstand zwischen den Elementen */
    margin-bottom: 15px; /* Abstand nach unten zur großen Überschrift */
    background-color: rgba(255, 255, 255, 0.8); /* Optional: Ein leichter weißer Hintergrund, falls dein Hero-Hintergrund dunkel ist */
    padding: 6px 12px;
    border-radius: 20px;
    display: inline-flex; /* Sorgt dafür, dass die Box nur so breit wie ihr Inhalt ist */
}

/* Die Sterne */
.hero-rating .stars {
    color: #fbbc05; /* Das originale Google-Gelb für die Sterne */
    font-size: 1.2rem;
    letter-spacing: 2px; /* Leicht erhöhter Abstand zwischen den Sternen */
    margin-bottom: 0px;
}

/* Der Text daneben */
.hero-rating .rating-text {
    font-size: 0.95rem;
    font-weight: 600;
    color: #333;
    margin-bottom: -5px;
}

.uberleitung{
  align-items: center;
  text-align: center;
  margin-top: -10px;
}
/* Der Hauptcontainer */
.image-section {
  display: flex;
  justify-content: space-between; 
  /* gap verringert: Bilder rücken näher zusammen (von 10px auf z.B. 5px oder 0px) */
  gap: 5px; 
  
  /* padding angepasst: Erster Wert ist oben/unten, zweiter ist links/rechts */
  /* Wenn du mehr Platz nach oben/unten willst, erhöhe die 60px */
  padding: 60px 20px; 
  
  max-width: 1000px;
  margin: 0 auto;
}
/* Das sorgt dafür, dass die Bilder in der Liste handlich und quadratisch bleiben */
.image-box img {
  width: 250px;                    /* Nutzt die volle Breite der Spalte */
  aspect-ratio: 1 / 1;            /* Erzwingt das quadratische 1:1 Verhältnis */
  object-fit: cover;              /* WICHTIG: Verhindert, dass das Bild verzerrt oder gestaucht wird */
  border-radius: 50%;             /* Leicht abgerundete Ecken */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 
}

/* Die einzelnen Boxen um die Bilder */
/* Macht deutlich, dass man auf die Boxen klicken kann */
.image-box {
  cursor: pointer;
  transition: transform 0.2s ease;
  text-align: center;
}
.image-box:hover {
  transform: translateY(-2px); /* Kleiner Bewegungseffekt beim Drüberfahren */

}
@media (max-width: 768px) {
  .image-section {
    flex-direction: column; /* Ordnet die Elemente untereinander an */
    align-items: center;    /* Zentriert die Elemente horizontal */
    gap: 40px;              /* Mehr Abstand zwischen den Boxen auf dem Handy */
  }

  .image-box {
    width: 100%;
    max-width: 250px; /* Behält die gewünschte Größe bei */
  }
}

/* Das unsichtbare Overlay über dem gesamten Bildschirm */

/* Das eigentliche Pop-up-Fenster */
.modal-content {
  background-color: #fff;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  position: relative;
  box-shadow: 0 5px 15px rgba(0,0,0,0.3);
  animation: fadeIn 0.3s ease; /* Sanftes Einblenden */
}

/* Schließen-Button (X) */

/* Animation fürs Einblenden */
@keyframes fadeIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.image-box img:hover {
  filter: brightness(90%);
}
/* Hauptcontainer splitten */
.split-section {
  display: flex;
  align-items: center;            /* Zentriert Bild und Text vertikal zueinander */
  gap: 50px;                      /* Abstand zwischen linker und rechter Spalte */
  max-width: 1100px;
  margin: 50px auto;
  padding: 0 20px;
}

/* Beide Spalten nehmen standardmäßig 50% Platz ein */
.slider-left, .text-right {
  flex: 1;
  width: 50%;
}

/* --- SLIDER STYLING --- */
.slider-left {
  position: relative;             /* Wichtig für die Positionierung der Pfeile */
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}

.slides-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;            /* Behält die gewünschte 1:1 Quadratform */
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;                     /* Standardmäßig unsichtbar */
  transition: opacity 0.5s ease-in-out; /* Sanfter Überblend-Effekt */
  z-index: 1;
}

/* Nur das Bild mit der Klasse .active wird angezeigt */
.slide.active {
  opacity: 1;
  z-index: 2;
}

/* Pfeil-Buttons */
.prev-btn, .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.7);
  border: none;
  font-size: 18px;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 50%;
  z-index: 10;
  transition: background 0.2s;
}
.prev-btn:hover, .next-btn:hover { background: rgba(255, 255, 255, 0.9); }
.prev-btn { left: 15px; }
.next-btn { right: 15px; }

/* --- RESPONSIVE DESIGN --- */

.pos{
  margin-top: 30px;
  align-items: center;
  text-align: center;

}
/* Hauptcontainer für die Team-Sektion */
/* Hauptcontainer für die Team-Sektion */
.team-section {
  display: flex;
  align-items: center;
  gap: 60px;
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
}

.team-video-container, .team-text-container {
  flex: 1;
  width: 50%;
}

.team-video-container {
  position: relative;
 
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  /* Falls dein Video im klassischen Querformat ist, nutze 16 / 9 */
  aspect-ratio: 16 / 9; 
}

.team-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ... Hier deine restlichen Text-Stylings (subtitle, h2, etc.) von vorhin einfügen ... */


/* --- RESPONSIVE DESIGN (Smartphone & Tablet) --- */


/* --- TEXT STYLING --- */
.subtitle {
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 1.5px;
  color: #467235;                 /* Hier deine Praxis-Akzentfarbe nutzen */
  font-weight: bold;
  display: block;
  margin-bottom: 10px;
}

.team-text-container h2 {
  font-size: 2.2rem;
  line-height: 1.2;
  color: #333;
  margin-top: 0;
  margin-bottom: 20px;
}

.lead-text {
  font-size: 1.15rem;
  color: #555;
  font-weight: 500;
  line-height: 1.5;
}

.team-text-container p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

/* Die Checkliste */
.team-features {
  list-style: none;
  padding: 0;
  margin-top: 25px;
}

.team-features li {
  margin-bottom: 10px;
  font-weight: 500;
  color: #444;
}

/* Container für die gesamte Sektion */
.reviews-section {
  max-width: 1100px;
  margin: 80px auto;
  padding: 0 20px;
  font-family: sans-serif;
}

/* Zentrierte Überschrift über den Bewertungen */
.reviews-header {
  text-align: center;
  margin-bottom: 40px;
}

.reviews-header h2 {
  font-size: 2.2rem;
  color: #333;
  margin: 5px 0;
}

/* Das Grid-Layout für die 3 Karten */
.reviews-grid {
  display: flex; /* Flexbox statt Grid */
  gap: 25px;
  overflow: hidden; /* Versteckt den überstehenden Teil */
  width: 100%;
  position: relative;
  /* Maskierung, damit der Text an den Seiten sanft ausblendet (optional) */
  -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
  mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* Styling für die einzelnen Bewertungs-Karten */
.review-card {
 flex: 0 0 350px; /* Jede Karte hat eine feste Breite */
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  animation: slide 30s linear infinite; /* Animation läuft 30 Sekunden */
}
.reviews-grid:hover .review-card {
  animation-play-state: paused;
}

/* Hover-Effekt: Karte hebt sich leicht ab */
.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Die goldenen Google-Sterne */
.stars {
  color: #ffb400; /* Typisches Google-Gelb/Gold */
  font-size: 1.3rem;
  margin-bottom: 15px;
}

/* Der Text der Bewertung */
.review-text {
  font-style: italic;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
  font-size: 0.95rem;
}

/* Der Name des Patienten */
.reviewer-name {
  font-weight: bold;
  color: #333;
  font-size: 0.9rem;
}
@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-375%); } /* Verschiebung um die Gesamtlänge der Karten */
}
/* --- RESPONSIVE DESIGN --- */




/* Hauptcontainer für Kontakt & Karte */
.contact-section {
  display: flex;
  gap: 50px;
  max-width: 1100px;
  margin: 80px auto;
  padding: 0 20px;
  font-family: sans-serif;
}
.contact-details a:hover{
  text-decoration: underline;
}
.contact-details a{
  color:#467235;
  text-decoration: none;
}

/* Linke Spalte: Text */
.contact-info {
  flex: 1;
  width: 50%;
}

.contact-info h2 {
  font-size: 2.2rem;
  color: #333;
  margin-top: 5px;
  margin-bottom: 30px;
}

/* Einzelne Info-Blöcke (Adresse, Zeiten, etc.) */
.info-block {
  margin-bottom: 25px;
}

.info-block h3 {
  font-size: 1.1rem;
  color: #FFBF00; /* Praxis-Akzentfarbe */
  margin-bottom: 8px;
}

.info-block p {
  color: #555;
  line-height: 1.6;
  margin: 0 0 5px 0;
}

/* Telefonnummer-Link stylen */
.info-block a {
  color: #467235;
  text-decoration: none;
  font-weight: bold;
}
.info-block a:hover {
  text-decoration: underline;
}



/* Rechte Spalte: Die Karte */
.contact-map {
  flex: 1;
  width: 50%;
  min-height: 450px; /* Gibt der Karte auf Desktop eine schöne Mindesthöhe */
 aspect-ratio: 1/1;
  overflow: hidden;

}

/* --- RESPONSIVE DESIGN (Für mobile Endgeräte) --- */

/* Der Footer-Hauptbereich */
.site-footer {
  background-color: #283F24;       /* Edles, dunkles Anthrazit (kannst du an deine Farben anpassen) */
  color: #ffffff;                 /* Weiße Schrift */
  padding: 60px 20px 20px 20px;
  font-family: sans-serif;
  font-size: 0.9rem;
  
}

/* Container für die 3 Spalten */
.footer-container {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Jede einzelne Spalte */
.footer-column {
  flex:1;
}

.footer-column h3 {
  color: #FFBF00;                 /* Deine Praxis-Akzentfarbe für die Überschriften */
  font-size: 1.1rem;
  margin-top: 0;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.mn p {
  line-height: 1.6;
  color: #cccccc;                 /* Leicht abgeschwächtes Weiß für Fließtext */
}

.footer-station {
  color: #ffffff !important;
  font-weight: 500;
  margin-top: 15px;
}

/* Die Link-Listen */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #cccccc;
  text-decoration: none;
  transition: color 0.2s ease;
}

/* Hover-Effekt für die Links */
.footer-links a:hover {
  color: #FFBF00;                 /* Link wird beim Hovern in Akzentfarbe gefärbt */
}

/* Die ganz untere Copyright-Zeile */
.footer-bottom {
  max-width: 1100px;
  margin: 40px auto 0 auto;
  padding-top: 20px;
  border-top: 1px solid #333333;  /* Feine Trennlinie */
  text-align: center;
}

.footer-bottom p {
  color: #777777;
  font-size: 0.8rem;
  margin: 0;
}

/* --- RESPONSIVE DESIGN (Für Handys) --- */

.cta-section {
  background-color: #467235; /* Dein Praxis-Akzentton */
  padding: 80px 20px;
  text-align: center;
  color: #ffffff;
}

.cta-content {
  max-width: 700px;
  margin: 0 auto;
}

.cta-content h2 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}

.cta-content p {
  font-size: 1.2rem;
  margin-bottom: 40px;
  opacity: 0.9;
}

.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Button-Styling */
.btn-primary {
  background-color: #ffffff;
  color: black;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-secondary {
  background-color: transparent;
  color: #ffffff;
  border: 2px solid #ffffff;
  padding: 15px 30px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1rem;
  transition: background 0.3s;
}

.btn-primary:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-secondary:hover {
  background-color: rgba(255,255,255,0.1);
}

/* Responsive für Handy */


.hero{
  margin-top: 10px;
}
.hero-text h1 {
  font-size: 40px; /* Deutlich größer für eine Hauptüberschrift */
  font-weight: 700;
  color: black;
}

.hero-text h2 {
  font-size: 30px;
  font-weight: 600;
}

.hero-text h3 {
  font-size: 22px;
  font-weight: 500;
}

.hero-text span {
  font-size: 35px; /* Eher für Fließtext oder Hervorhebungen im Text */
  font-weight: 400;
}-- Mobiles Feintuning --- */

/* Layout für das Team */
/* Sektion zentrieren und Rand zu den Seiten lassen */
.team-overview {
  max-width: 1000px; /* Begrenzt die Gesamtbreite */
  margin: 80px auto; /* Zentriert die Sektion auf der Seite */
  padding: 0 20px;   /* Sorgt für Rand links/rechts auf Handys */
  
}

.team-grid {
  display: grid;
  width: 900px;
  /* WICHTIG für die Zentrierung des gesamten Blocks */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 45px;
  
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  
  /* Zentriert die Karten innerhalb des Grids, falls Platz übrig ist */
  justify-content: center;
  align-items: center; 
}

.team-card {
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease;
  /* Quadratisches Design beibehalten */
  aspect-ratio: 1 / 1; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
/* --- Überschriften --- */
.team-header {
  text-align: center;
  margin-bottom: 50px;
}



.team-header h2 {
  font-size: 2.2rem;
  color: #333;
  margin: 0;
}

/* --- Das Grid (Zentrierung der Karten) --- */
.team-grid {
  display: grid;
  /* Ändere 300px auf z.B. 250px oder 200px, wenn die Karten schmaler sein sollen, 
     oder erhöhe es, um die Karten "aufzuzwingen", untereinander zu stehen */
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  justify-content: center;
}

/* --- Karten-Design --- */
.team-card {
  background: #ffffff;
  padding: 30px;
  
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  text-align: center;
  transition: transform 0.3s ease;
  width: 100%; /* Karte füllt die Grid-Zelle aus */
  max-width: 400px; /* Verhindert, dass Karten auf riesigen Bildschirmen zu breit werden */
}
.team-group-section {
  max-width: 1100px;
  margin: 80px auto;
  padding: 40px 20px;
  box-sizing: border-box;
}

.team-group-content {
  display: flex;
  align-items: center;
  gap: 60px;
  flex-wrap: wrap; /* Damit es auf Handys untereinander rutscht */
}

.team-group-text {
  flex: 1;
  min-width: 300px;
}

.team-group-text h2 {
  font-size: 2.2rem;
  margin: 10px 0 20px 0;
  color: #333;
}

.team-group-image {
  flex: 1;
  min-width: 300px;
}

.team-group-image img {
  width: 100%;
  height: auto;
  
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); /* Tiefer Schatten */
  transition: transform 0.4s ease;
}

.team-group-image img:hover {
  transform: scale(1.02); /* Leichter Zoom-Effekt beim Drüberfahren */
}

/* Responsives Verhalten */
@media (max-width: 768px) {
  .team-group-content {
    flex-direction: column;
    text-align: center;
  }
}

.team-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* --- Foto in der Karte --- */
.team-card img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  border: 3px solid #f9f9f9;
}

/* --- Texte in der Karte --- */
.team-card h3 {
  margin: 10px 0 5px 0;
  color: #333;
  font-size: 1.25rem;
}

.team-card .role {
  color: #467235;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 15px;
}


.biography-section {
  max-width: 1100px;
  margin: 80px auto;
  padding: 0 20px;
  margin-top: 150px;
}

.bio-container {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.bio-image {
  flex: 1;
  max-width: 450px;
}

.bio-image img {
 
  width: 100%;            /* Nutzt die volle Breite des Containers */
  aspect-ratio: 1 / 1;    /* Erzwingt das 1:1 Format (Quadrat) */
  object-fit: cover;      /* Schneidet das Bild passend zu, ohne es zu verzerren */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: block;         /* Entfernt kleine Abstände unter dem Bild */
}
.bio-text {
  flex: 1;
}

.timeline {
  margin-top: 30px;
  border-left: 2px solid #467235; /* Deine Akzentfarbe */
  padding-left: 20px;
}

.timeline-item {
  margin-bottom: 20px; /* Etwas kompakter bei der vielen Einträgen */
  position: relative;
}

.timeline-item::before {
  content: '';
  position: absolute;
  left: -27px;
  top: 5px;
  width: 12px;
  height: 12px;
  background: #467235;
  border-radius: 50%;
}

.year {
  display: block;
  font-weight: bold;
  color: #467235;
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.event {
  color: #333;
  margin: 0;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
}

#toggle-btn {
  background: none;
  border: none;
  color: #467235; /* Deine Akzentfarbe */
  font-weight: bold;
  cursor: pointer;
  margin-top: 15px;
  padding: 0;
  display: flex;
  align-items: center;
  font-size: 0.95rem;
}

#toggle-btn:hover {
  text-decoration: underline;
}
.untertitel{
  color:#FFBF00;
}
.content-section {
  max-width: 800px; /* Impressum ist schmaler oft besser lesbar */
  margin: 80px auto;
  padding: 0 20px;
}

.content-container h1 {
  text-align: center;
  margin-bottom: 40px;
  color: #333;
  margin-top: 150px;
}

.info-card {
  background: #ffffff;
  padding: 40px;
  border-radius: 12px;
  border: 1px solid #f0f0f0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 30px;
}

/* Das ist der gleiche Style wie beim Impressum, 
   daher musst du im CSS nichts Neues hinzufügen, 
   solange du die Klassennamen beibehältst! */

.info-card h3 {
  color: #467235;
  margin-top: 0;
  margin-bottom: 20px;
  border-bottom: 2px solid #f9f9f9; /* Dezente Linie unter der Überschrift */
  padding-bottom: 10px;
}

.info-card p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 15px;
}

.info-card a {
  color: #467235;
  text-decoration: none;
}

.info-card a:hover {
  text-decoration: underline;
}
/* Das Modal-Hintergrund (Overlay) */
/* Das Modal-Overlay (der dunkle Hintergrund) */
.modal {
  display: none; /* Standardmäßig versteckt */
  position: fixed;
  z-index: 1000; /* Ganz oben auf der Seite */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Abgedunkelter Hintergrund */
  justify-content: center;
  align-items: center;
}


/* Das Modal-Inhalt (die Karte) */
.modal-content {
  background-color: #ffffff;
  margin: 10% auto;
  padding: 40px;
  width: 90%;
  max-width: 500px;
  position: relative;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Weicher Schatten für Tiefeneffekt */
  border: 1px solid #eee;
}

/* Typografie für das Modal */
.modal-content h2 {
  color: #467235; /* Deine Akzentfarbe */
  margin-bottom: 20px;
}

.modal-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}
.close-btn {
  position: absolute; /* Löst den Button aus dem Textfluss */
  top: 15px;          /* Abstand von oben */
  right: 20px;        /* Abstand von rechts */
  font-size: 28px;    /* Größe des X */
  font-weight: bold;
  color: #333;
  cursor: pointer;
  line-height: 1;
  transition: color 0.2s;
}

.close-btn:hover {
  color: #467235; /* Dein Praxis-Grün beim Drüberfahren */
}

/* Der Schließen-Button - Design-Anpassung */
/* --- Sektionen für Leistungen (Hero-Banner Style) --- */
/* --- Sektionen für Leistungen (Hero-Banner Style) --- */

.leistung-banner{
    padding: 80px 20px;
    background-color: #ffffff;
    width: 100%;
    
}
#erster{
  margin-top: 80px;
  
}

/* Spezieller Abstand oben, falls das Element direkt nach der Nav kommt */


.banner-container {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 80px;
}

/* Spiegel-Funktion */
.leistung-banner.reverse .banner-container {
    flex-direction: row-reverse;
}

/* Layout der Inhalte (angepasst an dein Theme) */
.banner-text {
    flex: 1;
}

/* Übernahme deiner Hero/H2 Typografie */
.banner-text h2 {
    font-size: 2.2rem;
    color: #333;
    margin-bottom: 20px;
    line-height: 1.2;
}

.banner-text p {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 25px;
}

/* Bilder-Styling passend zu deinen anderen Sektionen */
.banner-image {
    flex: 1;
}

.banner-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    transition: transform 0.3s ease;
}

.banner-image img:hover {
    transform: scale(1.02);
}

/* Wiederverwendung der Team-Feature-Liste für Konsistenz */
.team-features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
}

.team-features li {
    margin-bottom: 12px;
    font-weight: 500;
    color: #444;
    display: flex;
    align-items: center;
}
/* Automatische Spiegelung für alle geraden Sektionen innerhalb eines Eltern-Containers */
/* Wir nehmen an, deine Sektionen liegen alle untereinander in einem div oder direkt im body */

/* Automatische Spiegelung für alle geraden Sektionen innerhalb eines Eltern-Containers */
/* Wir nehmen an, deine Sektionen liegen alle untereinander in einem div oder direkt im body */

.leistung-banner:nth-child(even) .banner-container {
    flex-direction: row-reverse;
}

/* Optional: Auf dem Handy immer alles gleich (nicht spiegeln) */


/* --- Responsive Design für Handy & Tablet --- */

/* Stellt sicher, dass der Link den Style der Box übernimmt und keine Standard-Link-Formatierung hat */
.image-box-link {
  text-decoration: none;
  color: inherit;
  display: block; /* Damit die ganze Box klickbar ist */
  transition: transform 0.3s ease;
}

.image-box-link:hover {
  transform: translateY(-5px); /* Optional: Falls du einen Hover-Effekt wie bei den anderen Karten willst */
}
/* --- GLOBALER MOBILE-SKALIERUNGS-FIX --- */
@media (max-width: 768px) {
    /* 1. Verhindert horizontales Scrollen durch zu breite Elemente */
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }

    /* 2. Vereinheitlichung der Abstände */
    section, .team-section, .contact-section, .leistung-banner {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. Überschriften-Skalierung für Handys */
    h1 { font-size: 2rem !important; }
    h2 { font-size: 1.6rem !important; }
    h3 { font-size: 1.3rem !important; }

    /* 4. Bilder-Fix: Verhindert, dass Bilder den Container sprengen */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 5. Flex-Container-Fix: Erzwingt Umbruch auf Handys */
    .banner-container, 
    .team-section, 
    .contact-section, 
    .bio-container, 
    .footer-container {
        flex-direction: column !important;
        width: 100% !important;
        gap: 20px !important;
    }

    /* 6. Grid-Anpassung für Reviews */
    .reviews-grid {
        grid-template-columns: 1fr !important;
    }
}
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column-reverse; /* Bild wandert nach oben, Text nach unten */
        text-align: center;
        gap: 20px;
        margin-top: 30px;
    }

    .hero-text h1 {
        font-size: 15px; /* Schrift verkleinern */
    }

    .hero-text h2 {
        font-size: 15px;
    }
  .hero-text h3{
    font-size: 13px;
  }

    .hero-rating {
        justify-content: center; /* Sterne mittig auf Handy */
    }

    .btn-hero {
        display: inline-block;
        margin-top: 15px;
    }
}

@media (max-width: 768px) {
    /* 1. Die Navbar zwingen, den Platz zu verteilen */
    .navbar {
        display: flex;
        justify-content: space-between; /* Verteilt Platz zwischen die Elemente */
        align-items: center;
        padding: 5px 20px;
    }

    /* 2. Hamburger Icon */
    .menu-toggle {
        display: block;
        color: white;
        cursor: pointer;
        order: 1; /* Steht ganz links */
    }

    /* 3. Logo zentriert in der Mitte */
    .navbar .logo {
        position: static;
        transform: none;
        order: 2; /* Steht in der Mitte */
    }

    .navbar .logo img {
        height: 25px;
        transition: height 0.3s ease;
        margin-left: 35px;
    }

    /* 4. Kontakt-Button rechts */
    .nav-right {
        order: 3; 
        
    }

    .nav-right a {
        font-size: 16px;
        padding: 6px 12px;
    }

    /* 5. Dropdown-Menü */
    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: #FFBF00;
        flex-direction: column;
        padding: 20px 0;
        text-align: center;
    }

    .nav-links.active {
        display: flex;
    }
}
@media (max-width: 768px) {
    .hero-content {
        flex-direction: column;
        text-align: center;
    }
    .hero-image {
        text-align: center;
    }
}
@media (max-width: 768px) {
    .modal-content {
        width: 90%; /* Auf Handy fast volle Breite nutzen */
        margin: 10% auto;
        padding: 20px;
    }
    
    .modal-text h2 {
        font-size: 22px;
    }
}

@media (max-width: 768px) {
    .team-section {
        flex-direction: column; /* Video und Text untereinander */
        padding: 30px 20px;
        gap: 30px;
    }

    .team-text-container {
        text-align: center; /* Text zentrieren auf Handy */
    }

    /* Checkliste auf dem Handy linksbündig für bessere Lesbarkeit */
    .team-features {
        text-align: left;
        display: inline-block;
    }

    .team-video {
        max-height: 300px; /* Video auf dem Handy begrenzen, damit es nicht zu groß wirkt */
        object-fit: cover;
    }
}
@media (max-width: 768px) {
    .split-section {
        flex-direction: column; /* Alles untereinander */
        padding: 30px 20px;
        gap: 30px;
    }

    .slider-left {
        width: 100%; /* Slider nutzt die volle Breite */
    }

    .slides-container img {
        height: 250px; /* Slider auf dem Handy etwas flacher */
    }

    .text-right {
        text-align: center; /* Text auf dem Handy zentrieren */
    }

    /* Damit die Checkliste auf dem Handy linksbündig bleibt (besser lesbar) */
    .team-features {
        text-align: left;
        display: inline-block;
    }
}
@media (max-width: 768px) {
    .image-section {
        grid-template-columns: 1fr; /* Alles untereinander auf kleinen Geräten */
        gap: 30px;
    }

    .image-box img {
        height: 200px; /* Etwas kompakter auf dem Handy */
    }
}

/* Wenn die Website auf dem Handy zentriert wird (aus dem vorherigen Schritt), 
   sollte auch die Bewertungsbox zentriert sein */
@media (max-width: 768px) {
    .hero-text {
        display: flex;
        flex-direction: column;
        align-items: center; /* Zentriert den Button und die Bewertung auf Handys */
    }
}
@media (max-width: 768px) {
  .split-section {
    flex-direction: column;       /* Auf Handys untereinander stapeln */
    gap: 30px;
  }
  .slider-left, .text-right {
    width: 100%;                  /* Volle Breite auf Smartphones */
  }
}
@media (max-width: 768px) {
  .team-section {
    /* 'column-reverse' sorgt dafür, dass das Video auf dem Handy 
       trotzdem über dem Text angezeigt wird */
    flex-direction: column-reverse;       
    gap: 30px;
  }
  
  .team-video-container, .team-text-container {
    width: 100%;
  }
}
@media (max-width: 900px) {
  .reviews-grid {
    grid-template-columns: repeat(2, 1fr); /* Auf Tablets nur noch 2 nebeneinander */
  }
}@media (max-width: 600px) {
  .reviews-grid {
    grid-template-columns: 1fr;            /* Auf Handys alle untereinander */
  }
}
@media (max-width: 768px) {
    .banner-container {
        flex-direction: column; /* Stapeln statt nebeneinander */
        text-align: center;
        gap: 30px;
    }

    /* Damit die Checklisten auf dem Handy sauber linksbündig bleiben */
    .team-features {
        text-align: left;
        display: inline-block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Korrektur für die gespiegelten Sektionen */
    .leistung-banner.reverse .banner-container {
        flex-direction: column-reverse; /* Bild nach unten, Text nach oben oder umgekehrt */
    }
}
@media (max-width: 768px) {
    /* Biografie: Untereinander stapeln */
    .bio-container {
        flex-direction: column;
        text-align: center;
    }
    
    .timeline-item {
        flex-direction: column; /* Jahr und Text untereinander */
        gap: 5px;
        margin-bottom: 25px;
    }

    /* Team: Grid bleibt aktiv, Karten werden auf Handy durch auto-fit zentriert */
    .team-grid {
        grid-template-columns: 1fr; /* Alles untereinander */
    }
}
@media (max-width: 600px) {
    .content-section {
        padding: 40px 15px;
    }

    .info-card {
        padding: 20px;
    }

    /* Damit E-Mail und Webseiten-Links auf dem Handy nicht aus der Box laufen */
    .info-card p {
        word-wrap: break-word;
    }
}
@media (max-width: 768px) {
  .contact-section {
    flex-direction: column; /* Stapelt Text und Karte untereinander */
    gap: 40px;
  }

  .contact-info, .contact-map {
    width: 100%; /* Volle Breite auf dem Smartphone */
  }

  .contact-map {
    min-height: 300px; /* Auf dem Handy reicht eine etwas flachere Karte */
  }
}
@media (max-width: 768px) {
  .footer-container {
    flex-direction: column;       /* Spalten stapeln sich auf dem Smartphone untereinander */
    gap: 30px;
  }
  
  .mn {
    text-align: center;           /* Text auf dem Handy zentrieren für besseren Look */
  }
}
@media (max-width: 600px) {
  .cta-buttons { flex-direction: column; }
}
@media (max-width: 768px) {
    /* Navbar Logo zentrieren und Header-Abstände korrigieren */
    .navbar {
        padding: 10px 20px;

    }
    
    .navbar .logo {
        display: none;
    }

    /* Hero Sektion anpassen */
    .hero {
        height: auto; /* Auf Handy Höhe dynamisch lassen */
        padding: 40px 10px;
        border: 5px solid white; /* Rahmen dünner machen */
    }

    .hero-text span {
        font-size: 28px; /* Headline verkleinern */
    }

    .hero-text h1, .hero-text h2 {
        font-size: 18px;
    }

    /* Bild im Hero auf Handy ggf. verstecken oder verkleinern */
    .hero-image img {
        max-width: 250px;
    }

    /* Container Abstände für den Content */
    .split-section, .team-section, .contact-section {
        margin: 30px auto;
        padding: 0 15px;
    }

    /* Überschriften überall vereinheitlichen */
    h2 {
        font-size: 1.8rem !important;
    }
}

@media (max-width: 768px) {
  .bio-container {
    flex-direction: column;
  }
}
@media (max-width: 768px) {
    .leistung-banner:nth-child(even) .banner-container {
        flex-direction: column;
    }
}
@media (max-width: 768px) {
    .banner-container {
        flex-direction: column !important;
        gap: 40px;
        text-align: center;
    }
    
    .banner-text h2 {
        font-size: 1.8rem !important; /* Passt zu deinem Mobile-Feintuning */
    }

    .team-features {
        text-align: left; /* Bleibt lesbar, auch wenn die H2 zentriert ist */
        display: inline-block;
    }
}
/* Container, der das Laufband begrenzt */
.marquee-container {
  width: 100%;
  overflow: hidden; /* Wichtig: versteckt die Karten außerhalb */
  padding: 20px 0;
}

/* Innerer Bereich, der animiert wird */
.marquee-inner {
  display: flex;
  gap: 25px; /* Abstand zwischen den Karten */
  animation: slide 30s linear infinite;
  width: max-content;
}

/* Pause bei Mauszeiger-Kontakt */
.marquee-container:hover .marquee-inner {
  animation-play-state: paused;
}

@keyframes slide {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* Läuft um die Hälfte (die 3 Originale) weiter */
}

/* Anpassung der Karte für das Laufband */
.review-card {
  width: 350px; /* Feste Breite, damit es nicht springt */
  flex-shrink: 0;
  /* Dein restliches Design bleibt bestehen */
  background: #ffffff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border: 1px solid #f0f0f0;
  display: flex;
  flex-direction: column;
}
/* Standard: Wenn der Bildschirm kleiner wird (z.B. Tablet/Smartphone) */
@media (max-width: 992px) {
  .split-section {
    flex-direction: column; /* Stapeln statt nebeneinander */
  }

  .slider-left {
    width: 100%;      /* Nimmt volle Breite */
    height: 400px;    /* Feste Höhe definieren */
    position: relative;
    overflow: hidden;
  }

  .slide {
    width: 100%;
    height: 100%;
    /* WICHTIG: Das Bild wird nicht verzerrt, sondern 
       füllt den Container aus und wird zentriert zugeschnitten */
    object-fit: cover; 
    object-position: center;
  }
}