@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+ */
}
html, body {
    -webkit-text-size-adjust: 100%; /* Verhindert, dass iOS Safari die Schriftgröße eigenmächtig anpasst */
    text-size-adjust: 100%;         /* Verhindert das gleiche auf Android-Browsern */
}

.footer-bubbles {
    width: 100%;
    height: 200px; /* Mehr Platz für mehr Kreise */
    background: 
        /* Reihe 1: Große Akzente */
        radial-gradient(circle at 10% 80%, #699ca3 40px, transparent 41px),
        radial-gradient(circle at 25% 60%, #8fbdbf 50px, transparent 51px),
        radial-gradient(circle at 45% 90%, #699ca3 60px, transparent 61px),
        radial-gradient(circle at 75% 70%, #8fbdbf 45px, transparent 46px),
        radial-gradient(circle at 90% 85%, #699ca3 55px, transparent 56px),
          radial-gradient(circle at 10% 80%, #699ca3 40px, transparent 41px),
        radial-gradient(circle at 25% 60%, #8fbdbf 50px, transparent 51px),
        radial-gradient(circle at 45% 90%, #699ca3 60px, transparent 61px),
        radial-gradient(circle at 75% 70%, #8fbdbf 45px, transparent 46px),
        radial-gradient(circle at 90% 85%, #699ca3 55px, transparent 56px),
        
        /* Reihe 2: Kleinere Füll-Elemente */
        radial-gradient(circle at 15% 40%, #8fbdbf 20px, transparent 21px),
        radial-gradient(circle at 35% 30%, #699ca3 15px, transparent 16px),
        radial-gradient(circle at 55% 50%, #8fbdbf 25px, transparent 26px),
        radial-gradient(circle at 80% 40%, #699ca3 20px, transparent 21px),
        radial-gradient(circle at 60% 80%, #8fbdbf 10px, transparent 11px);
    
    margin-top: 50px;
    pointer-events: none; /* Klickbar durch das Bild hindurch */
    opacity: 0.8; /* Leicht transparent für einen edlen Look */

    
}


.footer-bubbles {
    /* Deine bestehenden Eigenschaften bleiben erhalten */
    animation: float 6s ease-in-out infinite; /* 6 Sekunden Dauer, unendlich wiederholen */
}
/* Der Button: Rund und fixiert */



* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html, body {
    max-width: 100%;
    overflow-x: hidden; /* Verhindert das horizontale Scrollen */
    margin: 0;
    padding: 0;
}

img, iframe, video {
    max-width: 100%; /* Verhindert, dass Bilder über den Rand hinausragen */
    height: auto;
}
p, li, h1, h2, h3, h4, span {
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto; /* Erlaubt dem Handy, extrem lange Wörter (wie "Augenhintergrundspiegelung") bei Platzmangel mit Trennstrich zu trennen */
}

/* 2. Body als Flex-Container definieren */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Verhindert seitliches Scrollen */
}
/* Start-Zustand: Unsichtbar und nach unten verschoben */
.reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: opacity, transform; /* Optimiert die Performance beim Scrollen */
}

/* Zielzustand: Elegant eingeblendet am exakten Platz */
.reveal.active {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Optionaler Bonus: Wenn du möchtest, dass Karten im Grid leicht zeitversetzt kommen */
.staerke-item.reveal:nth-child(2),
.mfa-card.reveal:nth-child(2) {
    transition-delay: 0.1s;
}

.staerke-item.reveal:nth-child(3),
.mfa-card.reveal:nth-child(3) {
    transition-delay: 0.2s;
}
.text-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

/* Deine Sektionen (Hero, Leistungen, etc.) sollen immer die volle Breite nutzen */
section {
    width: 100%;
}
/* 3. Der Hauptinhalt nimmt den verfügbaren Platz ein */


/* 4. Footer bleibt unten */

h1 {
    font-size: 2.5rem; /* Entspricht standardmäßig ca. 40px */
    margin-bottom: 20px;
}

h2 {
    font-size: 2rem;   /* Entspricht standardmäßig ca. 32px */
    margin-bottom: 15px;

}

h3 {
    font-size: 1.5rem; /* Entspricht standardmäßig ca. 24px */
    margin-bottom: 10px;

}
h1, h2, h3 {
    font-family: 'Poppins', sans-serif;
}
p {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;       /* Einheitliche Standardgröße (ca. 16px) */
    color: #555555;        /* Angenehmes, edles Dunkelgrau statt hartem Schwarz */
    line-height: 1.6;      /* Entspannter Zeilenabstand für beste Lesbarkeit */
    margin-bottom: 20px;   /* Einheitlicher Abstand nach unten */
}
/* Das Urlaubs-Banner als Block unter dem Hero */
/* Das Urlaubs-Banner als voller Streifen direkt unter dem Hero */
.holiday-banner {
    display: none; /* Wird vom JavaScript auf 'block' geschaltet */
    width: 100%; /* Zwingt das Banner über die gesamte Bildschirmbreite */
    background: linear-gradient(135deg, #fdf8ef 0%, #faeed9 100%); /* Warmes Creme/Gold statt Alarm-Rot */
    border-top: 1px solid #f0dcb3;
    border-bottom: 1px solid #f0dcb3;
    padding: 22px 0;
    margin: 0; /* Absolut KEIN Abstand – dockt direkt nahtlos an den Hero an */
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}
hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.12), transparent);
    margin: 60px auto;
    position: relative;
    overflow: visible;
    width: 85%;
    max-width: 1300px;
}

/* Der kleine grüne Punkt in der Mitte */
hr::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background-color: #B3CA9F; /* Dein Hellgrün */
    border-radius: 50%;
    box-shadow: 0 0 0 4px #ffffff; /* Weißer Abstandsring um den Punkt */
}

/* Der Inhalts-Container zentriert den Text im breiten Streifen */
.holiday-banner-content {
    display: flex;
    align-items: center;
    justify-content: center; /* Zentriert Inhalt horizontal auf großen Bildschirmen */
    gap: 15px;
    max-width: 1200px; /* Hält den Text auf der gleichen Breite wie dein Screening-Grid */
    margin: 0 auto; /* Zentriert den Textblock im Breitbild-Banner */
    padding: 0 20px; /* Sicherheitsabstand zu den Rändern */
    box-sizing: border-box;
}

/* Das Info-Icon als schwebendes Badge, nicht mehr Signal-Rot */
.holiday-banner-content i {
    flex-shrink: 0; /* Verhindert das Quetschen des Icons */
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    color: #c9922f;
    border-radius: 50%;
    font-size: 1.4rem;
    box-shadow: 0 3px 10px rgba(201, 146, 47, 0.25);
}

/* Der Text im Banner */
.holiday-banner-content span {
    color: #5c4525;
    font-size: 1rem;
    line-height: 1.55;
    text-align: left;
}

/* "Praxishinweis:" als kleines Eyebrow-Label über dem eigentlichen Text */
.holiday-banner-content span strong {
    display: block;
    color: #b07d1f;
    text-transform: uppercase;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: 3px;
}

/* --- Mobile Anpassung für Smartphones --- */
@media screen and (max-width: 768px) {
    .holiday-banner {
        padding: 15px 0;
    }

    .holiday-banner-content {
        flex-direction: column; /* Icon und Text auf Handys untereinander */
        text-align: center;
        gap: 8px;
    }

    .holiday-banner-content span {
        font-size: 0.95rem;
        text-align: center; /* Text auf dem Handy zentriert */
    }

    .holiday-banner-content span strong {
        text-align: center;
    }
}
.navbar {
  position: fixed;
  top: 0;
  left: 0;           /* Zwingt die Navbar ganz an den linken Rand */
  width: 100%;       /* Zwingt die Navbar, die volle Breite einzunehmen */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 40px;
  background-color: #ffffff;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;

}


.logo-img {
  height: 50px;
  width: auto;
  display: block;
}
.logo-link {
    display: flex; /* Ordnet Kind-Elemente nebeneinander an */
    align-items: center; /* Zentriert Bild und Text vertikal auf einer Linie */
    gap: 15px; /* Abstand zwischen Logo und Text */
    text-decoration: none; /* Entfernt den blauen Unterstrich des Links */
}

.logo-img {
    height: 50px; /* Passe die Höhe an, wie du es brauchst */
    width: auto;
}

.logo-text {
    display: flex;
    flex-direction: column; /* Stapelt H1 und SPAN untereinander */
    line-height: 1.1; /* Macht den Zeilenabstand enger */
}

.logo-text h1 {
    font-size: 1.5rem;
    margin: 0;
    color: #333333;
    font-family: 'Poppins', sans-serif;
}

.logo-text span {
    font-size: 0.9rem;
    color: #A8C69F; /* Dein schönes Logo-Grün von vorhin */
    letter-spacing: 1px;
}
/* Nav-Links Liste */
.nav-links {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    
    /* Hier passiert die Magie: */
    gap: 30px; /* Erhöht den Abstand zwischen den <li> Elementen */
}
.nav-links li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.3s;
}

.nav-links li a:hover {
    color: #699ca3; /* Dein Teal-Blau beim Drüberfahren */
}

/* Mobile Darstellung (wenn das Menü aktiv ist) */


.nav-links a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #699ca3;
}

/* Sprachumschalter (DE/EN) in der Navbar */
.lang-switch {
    border: 1px solid #699ca3 !important;
    border-radius: 20px !important;
    padding: 4px 16px !important;
    font-size: 0.85rem !important;
    color: #699ca3 !important;
    transition: background-color 0.3s, color 0.3s !important;
}

.lang-switch:hover {
    background-color: #699ca3 !important;
    color: #ffffff !important;
}
/* ==========================================================================
   NAVBAR TERMIN BUTTON (Gleicher Style, aber kompakt)
   ========================================================================== */

.navbar .btn-termin {
    display: inline-block !important;
    padding: 10px 20px !important;            /* Schlankeres Padding für die Navbar */
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.88rem !important;             /* Etwas kleinere Schriftgröße */
    font-weight: 600 !important;
    text-decoration: none !important;
    text-align: center !important;
    white-space: nowrap !important;            /* Verhindert ungewollten Zeilenumbruch */
    
    /* Farben & Rahmen (passend zum Praxis-Blau) */
    background-color: #699ca3 !important;
    color: #ffffff !important;
    border: 2px solid #699ca3 !important;
              /* Symmetrische Rechteckform */
    
    transition: all 0.3s ease !important;
    box-sizing: border-box !important;
}

/* Hover-Effekt (Invertiert analog zu den Hero-Buttons) */
.navbar .btn-termin:hover {
    background-color: transparent !important;
    color: #699ca3 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(105, 156, 163, 0.35) !important;
}

/* Termin-Button */
/* Deine Basis-Klasse bleibt wie sie ist */


/* Hamburger Menü Icon */
.menu-toggle {
    display: none;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  margin: 5px auto;
  background-color: #699ca3; /* Deine Farbe */
  transition: all 0.3s ease-in-out; /* Weiche Animation */
}

/* Animation: Mittlerer Balken verschwindet */
.menu-toggle.open .bar:nth-child(2) {
  opacity: 0;
}

/* Animation: Oberer Balken dreht sich */
.menu-toggle.open .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

/* Animation: Unterer Balken dreht sich */
.menu-toggle.open .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}


/* ==========================================================================
   HERO HEAD SEKTION (REIN WITHOUT OVERLAY)
   ========================================================================== */
/* ==========================================================================
   GLOW-AKZENTE (BLURRED KREISE LINKS & RECHTS)
   ========================================================================== */

/* 1. Voraussetzungen auf den Hauptcontainer anwenden */
.hero-clean-section,
.hero.head {
    position: relative !important;
    overflow: hidden !important; /* Verhindert Scrollbalken durch die Kreise */
}

/* 2. Linker grüner Kreis (Oben Links) */
.hero-clean-section::before,
.hero.head::before {
    content: '' !important;
    position: absolute !important;
    top: -80px !important;
    left: -80px !important;
    width: 500px !important;
    height: 500px !important;
    background: rgba(179, 202, 159, 0.45) !important; /* Dein Akzent-Grün (#B3CA9F) mit Transparenz */
    border-radius: 50% !important;
    filter: blur(80px) !important; /* Erzeugt den weichen Verlaufseffekt */
    z-index: 1 !important;
    pointer-events: none !important; /* Verhindert, dass der Kreis Klicks auf Buttons blockiert */
    opacity: 0 !important; /* Erst sichtbar nach dem Scrollen, siehe .glow-active weiter unten */
    transition: opacity 0.8s ease !important;
}

/* 3. Rechter blauer/teal Kreis (Unten Rechts) */
.hero-clean-section::after,
.hero.head::after {
    content: '' !important;
    position: absolute !important;
    bottom: -80px !important;
    right: -80px !important;
    width: 550px !important;
    height: 550px !important;
    background: rgba(105, 156, 163, 0.35) !important; /* Dein Praxis-Teal/Blau (#699ca3) mit Transparenz */
    border-radius: 50% !important;
    filter: blur(90px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
    opacity: 0 !important; /* Erst sichtbar nach dem Scrollen, siehe .glow-active weiter unten */
    transition: opacity 0.8s ease !important;
}

/* Glow-Kreise erst einblenden, sobald der Nutzer runterscrollt */
body.glow-active .hero-clean-section::before,
body.glow-active .hero.head::before,
body.glow-active .hero-clean-section::after,
body.glow-active .hero.head::after {
    opacity: 1 !important;
}

/* SOS-, Doctolib- und Telefon-Button ebenfalls erst nach dem Scrollen einblenden */
body.glow-active .sos-container,
body.glow-active .mobile-doctolib-trigger,
body.glow-active .mobile-phone-trigger {
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 4. WICHTIG: Inhalt über die Farbkreise heben */
.hero-clean-content,
.hero-content {
    position: relative !important;
    z-index: 2 !important; /* Stellt sicher, dass Text & Buttons über den Kreisen liegen */
}
.hero.head {
    position: relative !important;
    width: 100% !important;
    min-height: 50vh !important;
    margin-top: 70px !important;
    overflow: hidden !important;
    
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 40px 0 !important;
    background: #f8fcfd !important; /* Neutraler Hintergrund statt Vollbild-Backdrop */
}

/* 2-Spalten Layout: Links Text, Rechts Bild */
.hero.head .hero-content {
    position: relative !important;
    z-index: 3 !important;
    max-width: 1200px !important;
    width: 90% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    
    display: grid !important;
    grid-template-columns: 0.9fr 1.1fr !important; /* Bild-Spalte etwas breiter für größeres Foto */
    gap: 40px !important;
    align-items: center !important;
    text-align: left !important; /* Text linksbündig */
}

/* Linker Text-Bereich */
.hero-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.hero.head .hero-content h1 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 3.2rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
    color: #1e293b !important; /* Dunkler Text für helle Hintergründe */
    margin-top: 0 !important;
    margin-bottom: 20px !important;
}

/* Grüner Akzentstrich linksbündig */
.hero.head .hero-content h1::after {
    content: "" !important;
    display: block !important;
    width: 65px !important;
    height: 4px !important;
    background: #B3CA9F !important;
    margin: 18px 0 0 0 !important; /* Linksbündig ausgerichtet */
    border-radius: 2px !important;
}

.hero.head .hero-content p {
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #475569 !important;
    margin: 0 0 25px 0 !important;
}

.hero-buttons {
    display: flex !important;
    justify-content: flex-start !important; /* Buttons links ausrichten */
    align-items: center !important;
    gap: 15px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
}
.hero-image-wrapper {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;

}


.hero-img {
    width: 100% !important;
    max-width: auto !important;
    height: 90% !important;
   

    
    /* ANIMATION BEIM SEITENAUFRUF */
    animation: slideInRight 1.2s cubic-bezier(0.25, 1, 0.5, 1) forwards !important;
}
@keyframes slideInRight {
    0% {
        opacity: 0;
        transform: translateX(100px); /* Startet 100px weiter rechts */
    }
    100% {
        opacity: 1;
        transform: translateX(0); /* Gleitet an die originale Position */
    }
}


/* Basis-Stil für beide Buttons */
.btn-hero {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 20px 40px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    border: 2px solid #699ca3 !important;
    width: 250px !important; /* Feste Breite für exakte Symmetrie */
    text-align: center !important;
    box-sizing: border-box !important;
    border-radius: 0 !important; /* Exakte Rechteckform */
}

/* Telefon / Anrufen-Button (Ausgefüllt) */
.btn-hero-termin {
    background-color: #699ca3 !important;
    color: #ffffff !important;
    border-color: #699ca3 !important;
        border-radius: 99px !important;
    
}

.btn-hero-termin:hover {
    background-color: transparent !important;
    color: #699ca3 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(105, 156, 163, 0.4) !important;
}

/* Anfahrt & Lage-Button (gleicher Stil wie alle anderen Haupt-Buttons) */
.btn-anfahrt {
    background-color: #699ca3 !important;
    color: #ffffff !important;
    border: 2px solid #699ca3 !important;
    border-radius: 99px !important;
}

.btn-anfahrt:hover {
    background-color: transparent !important;
    color: #699ca3 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 20px rgba(105, 156, 163, 0.4) !important;
}

.btn-hero i {
    font-size: 1.15rem !important;

}
/* Container für die überlappenden Bilder */
/* Container für die Kreisbewegung */
/* Container für die statische Überlappung */
/* Container für die statische Überlappung */
.hero-image-wrapper.dual-doctors {
    position: relative !important;
    width: 100% !important;
    min-height: 500px !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding-bottom: 40px !important; /* Platz für die Inhaber-Schrift unter den Bildern */
}



/* Basis-Styling der Bild-Karten */
.doctor-card {
    position: absolute !important;
    width: 55% !important;
    max-width: 600px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* BILDER HORIZONTAL SPIEGELN */
.doctor-card img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transform: scaleX(-1) !important; /* Spiegelt die Porträts */
    filter: drop-shadow(0 15px 25px rgba(0, 0, 0, 0.12)) !important;
}

/* Styling der Namens-Badges (immer im Vordergrund) */
.doctor-badge {
    position: relative !important;
    z-index: 20 !important;
    margin-top: -15px !important;
    background: #ffffff !important;
    color: #1e293b !important;
    padding: 6px 16px !important;
    border-radius: 20px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border: 1px solid rgba(105, 156, 163, 0.25) !important;
    white-space: nowrap !important;
}

/* LINKS: Dr. Balc (steht jetzt links und im Vordergrund) */
.card-right {
    left: 8% !important;
    right: auto !important;
    z-index: 2 !important;
    transform: scale(1) !important;
    opacity: 1 !important;
    filter: brightness(100%) !important;
}

/* RECHTS: Dr. Veltrup (steht jetzt rechts und dahinter) */
.card-left {
    right: -9% !important;
    left: auto !important;
    z-index: 1 !important;
    transform: scale(1) !important;
    opacity: 1 !important;
    filter: brightness(100%) !important;
}
/* Strikte Flex-Badge Erzwingung */
/* Styling für den Text direkt über der Überschrift */
.hero-text .hero-kicker {
    display: block !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #699ca3 !important; /* Praxis-Akzentfarbe für hohe Aufmerksamkeat */
    text-transform: uppercase !important; /* Grossbuchstaben für professionellen Kicker-Look */
    letter-spacing: 0.8px !important; /* Bessere Lesbarkeit */
    margin-bottom: 8px !important; /* Säuberlicher Abstand zur h1 */
}
/* ==========================================================================
   TELEFON STATUS INDIKATOR
   ========================================================================== */

.telefon-status-container {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 18px !important;
    background: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 30px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.status-dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    background-color: #10b981 !important;
    box-shadow: 0 0 10px #10b981 !important;
    position: relative !important;
}

/* --- BASE STATUS DOT --- */
.status-dot {
    width: 9px !important;
    height: 9px !important;
    border-radius: 50% !important;
    position: relative !important;
    transition: background-color 0.3s ease !important;
}

/* WENN GEÖFFNET (GRÜN) */
.status-dot.open {
    background-color: #10b981 !important; /* Grün */
    box-shadow: 0 0 10px #10b981 !important;
}

/* WENN GESCHLOSSEN (ROT) */
.status-dot.closed {
    background-color: #ef4444 !important; /* Rot */
    box-shadow: 0 0 10px #ef4444 !important;
}

/* PULSIERENDER EFFEKT (Gilt für die aktuelle Farbe) */
.status-dot::after {
    content: '' !important;
    position: absolute !important;
    top: -3px !important;
    left: -3px !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 50% !important;
    background-color: inherit !important; /* Übernimmt Rot oder Grün */
    opacity: 0.4 !important;
    animation: statusPulse 2s infinite ease-in-out !important;
}

@keyframes statusPulse {
    0% { transform: scale(0.8); opacity: 0.6; }
    50% { transform: scale(1.6); opacity: 0; }
    100% { transform: scale(0.8); opacity: 0; }
}
.status-text {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.88rem !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    letter-spacing: 0.2px !important;
}

/* ==========================================================================
   MOBILE ANPASSUNG (Handys bis 768px)
   ========================================================================== */

/* ==========================================================================
   RESPONSIVE HERO SECTION (MEDIA QUERIES)
   ========================================================================== */

/* TABLETS (Unter 992px) */
@media screen and (max-width: 992px) {
    .hero.head {
        min-height: auto !important;
        padding: 40px 20px !important;
    }

    .hero.head .hero-content {
        grid-template-columns: 1fr !important; /* Text oben, Bilder unten */
        height: auto !important;
        gap: 30px !important;
        text-align: left !important;
    }

    .hero-text {
        align-items: flex-start !important;
        text-align: left !important;
    }

    /* BILDER-WRAPPER: Behält die Desktop-Überlappung auf Tablets bei */
    .hero-image-wrapper.dual-doctors {
        position: relative !important;
        width: 100% !important;
        min-height: 420px !important; /* Leicht verringert für Tablet-Proportionen */
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
    }

    .hero-image-wrapper.dual-doctors .doctor-card {
        position: absolute !important;
        width: 50% !important; /* Auf Tablet leicht kompakter */
        max-width: 480px !important;
    }

    /* Frau Balc links */
    .hero-image-wrapper.dual-doctors .card-right {
        left: 5% !important;
        right: auto !important;
        z-index: 2 !important;
    }

    /* Frau Veltrup rechts */
    .hero-image-wrapper.dual-doctors .card-left {
        right: -5% !important;
        left: auto !important;
        z-index: 1 !important;
    }

    .hero-img {
        width: 100% !important;
        max-width: 460px !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Glow-Kreise */
    .hero-clean-section::before,
    .hero.head::before {
        width: 300px !important;
        height: 300px !important;
        top: -60px !important;
        left: -60px !important;
        filter: blur(55px) !important;
    }

    .hero-clean-section::after,
    .hero.head::after {
        width: 320px !important;
        height: 320px !important;
        bottom: -60px !important;
        right: -60px !important;
        filter: blur(60px) !important;
    }
}


/* SMARTPHONES (Unter 768px): Hero passt komplett auf eine Bildschirmhöhe (100vh), ohne Scrollen */
/* SMARTPHONES (Unter 768px): Natürlicher Fluss mit sauberen Ebenen & Abständen */
@media screen and (max-width: 768px) {
    /* HERO SEKTION PASST SICH DYNAMISCH AN DIE BILDHÖHE AN */
    .hero.head,
    section.hero {
        margin-top: 80px !important;
        padding: 15px 15px 15px 15px !important;
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        box-sizing: border-box !important;
        overflow: visible !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .hero.head .hero-content {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        gap: 15px !important;
    }

    /* TEXT & BUTTONS KOMPAKT */
    .hero-text {
        position: relative !important;
        width: 100% !important;
    }

    .hero.head .hero-content h1 {
        font-size: 1.45rem !important;
        line-height: 1.2 !important;
        margin: 0 0 4px 0 !important;
    }

    .hero.head .hero-content h1::after {
        margin: 10px 0 0 0 !important;
        width: 35px !important;
    }

    .hero.head .hero-content p {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        margin-bottom: 8px !important;
    }

    .hero-buttons {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        margin-bottom: 4px !important;
    }

    .btn-hero {
        padding: 8px 14px !important;
        font-size: 0.8rem !important;
    }

    .telefon-status-container {
        padding: 4px 10px !important;
        display: inline-flex !important;
    }

    /* BILDER-CONTAINER UNTEREINANDER */
    .hero-image-wrapper.dual-doctors {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        margin: 15px 0 0 0 !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 20px !important;
    }

    /* KARTEN-STYLING: Dr. Balc oben, Dr. Veltrup unten */
    .hero-image-wrapper.dual-doctors .doctor-card {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        width: 85% !important; /* Maximale Größe auf Mobilgeräten */
        max-width: 320px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        z-index: 1 !important;
    }

    /* Dr. Balc (card-right) kommt zuerst */
    .hero-image-wrapper.dual-doctors .card-right {
        order: 1 !important;
    }

    /* Dr. Veltrup (card-left) kommt als zweites */
    .hero-image-wrapper.dual-doctors .card-left {
        order: 2 !important;
    }

    .hero-image-wrapper.dual-doctors .doctor-card img {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        transform: none !important;
    }

    /* BADGES BÜNDIG DAHINTER/DRUNTER */
    .hero-image-wrapper.dual-doctors .doctor-badge {
        position: relative !important;
        z-index: 10 !important;
        font-size: 0.75rem !important;
        padding: 4px 12px !important;
        margin-top: -12px !important;
        margin-bottom: 0 !important;
        background: #ffffff !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
        white-space: nowrap !important;
    }

    /* SCHRIFT GANZ UNTEN */

    /* Auf dem Smartphone sauber unter die zweite Ärztin setzen */
    .hero-image-wrapper.dual-doctors .hero-caption-badge {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 15px !important;
        font-size: 0.72rem !important;
        padding: 5px 12px !important;
        order: 3 !important;
    }
}

/* 2. Video als flacher Hintergrund */
/* ==========================================================================
   HERO SLIDESHOW & CONTENT (POPPINS TYPOGRAFIE)
   ========================================================================== */

/* ==========================================================================
   HERO SECTION (WEISSER/HELLE BACKGROUND & LINKSBÜNDIG)
   ========================================================================== */

.hero-clean-section {
 background: #f8fcfd !important; /* Neutraler Hintergrund statt Vollbild-Backdrop */
  padding: 80px 20px;
  border-bottom: 1px solid #e2e8f0;
  text-align: left !important;
}

.hero-clean-content {
  max-width: 900px;
  margin: 0 auto;
  text-align: left !important;
  margin-top: 70px;
}

/* Sub-Label exakt linksbündig */
.hero-sub-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #699ca3;
  display: block;
  margin: 0 0 15px 0 !important; /* Margin-Left erzwungen auf 0 */
  padding-left: 0 !important;
  text-align: left !important;
}

/* H1 Überschrift exakt linksbündig */
.hero-clean-content h1 {
  font-size: 2.5rem !important;
  margin: 0 0 20px 0 !important; /* Margin-Left & Right auf 0 gesetzt */
  padding-left: 0 !important;
  color: #1e293b;
  text-align: left !important;
  line-height: 1.25;
  width: 100%;
}

/* Übernimmt deine Basis-Typografie (1rem & 20px Margin) */
.hero-clean-content .intro-text {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #555555 !important;
  margin-bottom: 30px !important;
  text-align: left !important;
  max-width: 700px;
}
.hero-clean-content p,
.hero-clean-content .intro-text {
  text-align: left !important; /* Zwingt den Text nach links */
  margin: 0 0 30px 0 !important;
  padding: 0 !important;
  max-width: 100% !important; /* Damit der Text die volle Breite nutzen kann */
}
/* Button Container (Linksbündig) */


/* Primary Button (Doctolib / Termin) */
.btn-termin {
  font-family: 'Poppins', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background-color: #699ca3;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 99px !important; /* Rund, wie ein Pillen-Button */
  border: 2px solid #699ca3;
  transition: all 0.3s ease;
}

.btn-termin:hover {
  background-color: #55838a;
  border-color: #55838a;
  transform: translateY(-2px);
}

/* Secondary Button (Leistungen entdecken) - Jetzt fertig gestylt */
.btn-secondary {
  font-family: 'Poppins', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background-color: transparent;
  color: #699ca3;
  font-weight: 600;
  text-decoration: none;
  border-radius: 99px !important;
  border: 2px solid #699ca3;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background-color: #f8fcfd;
  color: #55838a;
  border-color: #55838a;
  transform: translateY(-2px);
}


/* ==========================================================================
   MEDIA QUERY FÜR MOBILE DEVICES
   ========================================================================== */

@media screen and (max-width: 768px) {
  .hero-clean-section {
    padding: 50px 20px;
  }

  .hero-clean-content h1 {
    font-size: 1.8rem !important;
  }

  .hero-buttons {
    flex-direction: column;
    width: 100%;
    align-items: stretch;
  }

  .btn-termin,
  .btn-secondary {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
  }
}
/* ==========================================
   VIDEO-SEKTION (Matcht mit Über-Uns-Style)
   ========================================== */
.video-section-container {
    max-width: 1200px;
    margin: 50px auto 30px auto;
    padding: 0 20px;
}

/* Titel-Style exakt passend zu .ueber-uns-text h3 */
.video-title {
    font-family: 'Poppins', sans-serif;
    text-align: center;
    font-size: 1.8rem;
    color: #699ca3; /* Dein Teal-Blau */
    margin-bottom: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Play-Icon passend zum Teal-Farbschema */
.video-title i {
    color: #699ca3;
    font-size: 2.2rem;
}

/* Video-Frame mit abgerundeten Ecken & passendem Schatten */
.video-frame {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Seitenverhältnis */
    height: 0;
    overflow: hidden;
   
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    background-color: #f0f7f7; /* Helles Teal als Loader-Hintergrund */
    border: 1px solid rgba(105, 156, 163, 0.2);
}

.video-frame video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: none;
}

/* Responsive Anpassung für Mobilgeräte */
@media (max-width: 768px) {
    .video-section-container {
        margin: 35px auto 20px auto;
        padding: 0 15px;
    }
    .video-frame {
        padding-bottom: 56.25%; 
        width: 100%; /* Beibehaltung des 16:9 Seitenverhältnisses */
    }

    .video-title {
        font-size: 1.4rem;
        gap: 8px;
    }

    .video-title i {
        font-size: 1.8rem;
    }
}
/* Mobile Anpassung */

/* --- Sektion: Über uns --- */
.ueber-uns-sektion { 
  padding: 80px 20px; 
  background-color: #ffffff; /* Weiß, passend zur Kontakt-Sektion */
}
/* Spezifisches Styling für die Über-uns Überschrift */
.ueber-uns-sektion h2 {
    text-align: center;
    color: #699ca3;          
    font-size: 2.2rem;       
    margin-bottom: 10px;     
    font-weight: 600;   
    margin-top: -2.2rem;     /* Negatives Margin in rem umgewandelt */
}

.ueber-uns-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 40px; /* Etwas Abstand nach oben, damit es nicht zu gedrängt wirkt */
}

/* Bild-Style wie die Karten-Schatten */
.ueber-uns-image img {
  width: 100%;
  display: block;
}

/* Text-Style passend zu den anderen Überschriften */
.ueber-uns-text h3 {
    font-size: 1.8rem;
    color: #699ca3; /* Dein Teal-Blau */
    margin-bottom: 20px;
    font-weight: 600;
}

.ueber-uns-text p {
    margin-bottom: 20px;
    line-height: 1.7;
}

/* Die Check-Liste für mehr Harmonie */
.circle-link-grid {
  display: flex;
  justify-content: center; /* Zentriert die Kreise nebeneinander */
  gap: 40px;               /* Abstand zwischen den Kreisen */
  list-style: none;
  padding: 0;
  margin-top: 40px;
}

.circle-link-grid li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #699ca3;
  transition: 0.3s;
}

/* Der Kreis-Container */
.circle-icon {
  width: 100px;         /* Größe des Kreises */
  height: 100px;
  background-color: #f0f7f7; /* Sehr helles Teal für den Hintergrund */
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
  transition: all 0.3s ease;
}

.circle-icon i {
  font-size: 2.5rem;
  color: var(--primary-color);
}

/* Hover-Effekt: Kreis füllt sich aus */
.circle-link-grid li a:hover .circle-icon {
  background-color: var(--primary-color);
  transform: scale(1.1);
}

.circle-link-grid li a:hover .circle-icon i {
  color: #333;
}

.circle-link-grid span {
  font-weight: 600;
  font-size: 1rem;
}

/* --- Mobile Anpassung für Über-uns-Sektion --- */

/* Button im Hero */

/* Sektion Container */
.staerken-sektion {
  padding: 80px 20px;
  background-color: #f8fcfd;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  margin-top: 10px;
}


.staerken-sektion h2 {
    text-align: center;
    margin-bottom: 50px;
    color: #699ca3;
    font-weight: 600;
}

/* Das Grid: 2 Spalten, die sich den Platz teilen */
.staerken-list {
  display: grid;
  /* Erstellt automatisch 2 Spalten, die immer gleich breit sind */
  grid-template-columns: repeat(2, 1fr); 
  gap: 30px; /* Abstand zwischen den Boxen */
  max-width: 1200px;
  margin: 40px auto 0 auto;
  align-items: stretch; /* Zwingt alle Boxen auf die gleiche Höhe */
}

/* Design für JEDE einzelne Box */
.staerke-item {
  background-color: #ffffff;
  padding: 30px;
 
  
  text-align: left;
  display: flex; /* Wichtig, damit Inhalt intern besser steuerbar ist */
  flex-direction: column;
}

/* Damit die Überschrift immer oben bleibt */
.staerke-item h3 {
    color: #699ca3;
    font-size: 1.6rem;
    margin: 0 0 1rem 0; /* In rem umgewandelt für flexiblen Abstand */
}

/* Damit der Text den Raum ausfüllt */
.staerke-item p {
    margin: 0;
    line-height: 1.7;
}

/* Mobile Ansicht */

/* --- Mobile Anpassung für Stärken-Sektion --- */


/* Container für die Kette */
/* Container für das Band */
.marquee-fullwidth {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
  background-color: #ffffff; /* Sehr helles Teal-Grau als Hintergrund für die Sektion */
  padding: 40px 0;
  margin-top: 50px;
}
.marquee-track:hover {
  animation-play-state: paused;
}

/* Die Karten selbst */

/* Sterne-Style */
.stars {
  color: #f39c12; /* Goldene Sterne */
  font-size: 1.1rem;
}

/* Text-Style */



.marquee-track {
  display: flex;
  gap: 40px;
  animation: scroll 40s linear infinite; /* Dauer anpassen für Geschwindigkeit */
  width: max-content;
  will-change: transform; /* Hilft bei der Performance */
}
@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); 
  }
}
/* --- Mobile Anpassung für das Marquee --- */


/* Der Container sorgt für die Breite und Zentrierung */
/* 1. Sektion & Container (Alles untereinander) */
.praxis-sektion {
  padding: 80px 20px;
  background-color: #ffffff;
  margin-top: -80px; /* Optional: Kann helfen, die Sektion optisch näher an die vorherige zu bringen */
  
}

.praxis-container {
  display: flex;
  flex-direction: column; 
  align-items: center;    /* Zentriert alle Kind-Elemente (Text, Slider, Buttons) */
  gap: 30px;
  width: 100%;
}





/* 2. Text-Bereich */
.praxis-text {
  max-width: 800px;
  text-align: center;
  margin-bottom: 0; /* Entferne ggf. unnötige Abstände */
  margin-top: -20px;
}
.praxis-text h2 {
    margin-bottom: 25px;
    color: #699ca3;
}

.praxis-text p {
    font-size: 1rem; /* Auf Standard vereinheitlicht */
    line-height: 1.6;
    margin-bottom: 20px;
}
/* 3. Slider-Box (Feste Größe) */
.slider-box {
  position: relative;
  width: 100%;
  max-width: 800px; /* Neue Breite */
  aspect-ratio: 4 / 3; /* Entspricht dem Seitenverhältnis der Praxisfotos - Rahmen passt sich dem Bild an */
  overflow: hidden;
  margin: 0 auto;
  background: #f8fcfd;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}
.slider-gallery-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #ffffff;
    border: 1px solid #edf4f5;
    color: #699ca3; /* Dein Haupt-Teal */
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Kreisrund wie beim Bewertungs-Slider */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); /* Etwas stärkerer Schatten, da über Bildern */
    transition: background-color 0.2s, color 0.2s, transform 0.2s, border-color 0.2s;
    z-index: 10;
    font-size: 1.6rem; /* Größe für das Icon */
}

/* Positionierung links und rechts mit etwas Abstand zum Rand */
.slider-gallery-btn.prev {
    left: 15px;
}

.slider-gallery-btn.next {
    right: 15px;
}

/* Hover-Effekt: Invertiert sich zu Teal mit weißem Icon */
.slider-gallery-btn:hover {
    background-color: #699ca3;
    border-color: #699ca3;
    color: #ffffff;
    transform: translateY(-50%) scale(1.05); /* Skaliert leicht hoch, behält aber die vertikale Zentrierung */
}
/* ==========================================================================
   CSS TOUCH-SWIPE & SCROLL-SNAP FÜR GALERIE-SLIDER
   ========================================================================== */

/* 1. Hauptcontainer für den Slider */


.slides-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
  height: 100%;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
}

.slides-wrapper:active {
  cursor: grabbing;
}

.slides-wrapper img {
  flex: 0 0 100%; /* Jedes Bild nimmt exakt die Breite von .slider-box ein */
  width: 100%;
  height: 100%;
  object-fit: contain; /* Zeigt das ganze Bild, kein Zuschneiden mehr */
}

/* 4. Buttons: Einheitliches Styling */
.button-group {
  display: flex;
  justify-content: center;
  gap: 15px;
  margin-top: 25px;
}
/* ==========================================
   SWIPE-HINWEIS & SLIDER TOUCH-OPTIMIERUNG
   ========================================== */

/* Verhindert ungewolltes Markieren/Verschieben von Bildern beim Wischen */
.slider-box img {
    user-select: none;
    -webkit-user-drag: none;
}

/* Hinweis Standardmäßig ausblenden (auf Desktop) */
.swipe-hint {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.swipe-hint i {
    font-size: 1.3rem;
    color: #699ca3; /* Deine Akzentfarbe */
    animation: swipeAnim 1.8s infinite ease-in-out;
}

/* Subtile Wisch-Animation für das Hand-Icon */
@keyframes swipeAnim {
    0%, 100% { transform: translateX(0); }
    50% { transform: translateX(-10px); }
}

/* Auf mobilen Geräten den Hinweis einblenden */
@media screen and (max-width: 768px) {
    .swipe-hint {
        display: flex;
    }
}
/* Basis-Stil für beide Buttons (Symmetrie) */
.btn-primary, .btn-team {
  display: inline-block;
  padding: 20px 40px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  border: 2px solid #699ca3;
  width: 350px;           /* Feste Breite für Symmetrie */
  text-align: center;
  box-sizing: border-box;
  border-radius: 99px;     /* Rund, wie ein Pillen-Button */
}

/* Anreise-Button (Outline) */
.btn-primary {
  background-color: transparent;
  color: #699ca3;
}

.btn-primary:hover {
  background-color: #699ca3;
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(105, 156, 163, 0.4);
}

/* Team-Button (Ausgefüllt) */
.btn-team {
  background-color: #699ca3;
  color: #ffffff;
}

.btn-team:hover {
  background-color: transparent;
  color: #699ca3;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(105, 156, 163, 0.4);
}

/* 5. Slider-Pfeile */
.prev, .next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.7);
  border: none;
  cursor: pointer;
  padding: 10px;
  font-size: 20px;
  border-radius: 50%; /* Macht die Buttons schön rund */
  z-index: 10;
}
.prev { left: 10px; }
.next { right: 10px; }

/* 6. Mobile Anpassung */
/* --- Mobile Anpassung für die Praxis-Sektion --- */

/* --- Kontakt-Sektion --- */


.text-only-layout { max-width: 800px; } /* Schmaler für bessere Lesbarkeit */

.kontakt-sektion {
  padding: 80px 20px;
  background-color: #ffffff;
  
}

.kontakt-content {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

/* Überschrift-Styling passend zu den anderen Sektionen */
.kontakt-sektion h2 {
    font-size: 2rem;
    color: #699ca3;
    margin-bottom: 30px;
}

/* Infos: Schöne Abstände und Icons */
.info-row {
  display: flex;
  align-items: flex-start; /* ÄNDERUNG: Icons immer oben ausrichten */
  gap: 20px;
  margin-bottom: 25px;
}

.info-row i {
  font-size: 1.6rem;
  color: #699ca3;
  background: #f0f7f8;
  padding: 12px;
  border-radius: 50%;
  
  /* WICHTIG: Feste Breite für das Icon */
  min-width: 50px;       /* Sorgt dafür, dass alle Icons in einer Linie stehen */
  text-align: center;    /* Zentriert das Icon innerhalb seines Kreises */
  box-sizing: border-box; /* Damit das Padding die Breite nicht sprengt */
}

.info-row p {
    margin: 0;
    line-height: 1.5;
    padding-top: 8px; /* Zentriert den Text leicht zum Kreis */
}

/* Karte: Moderner Look mit leichtem Schatten */
.kontakt-map-wrapper {
    width: 100%;
    overflow: hidden;
    
    max-width: 500px;
}
.map-image {
    width: 100%;
     /* Oder eine feste Höhe, die dir gefällt */
    object-fit: cover; /* Schneidet das Bild passend zu, ohne es zu verzerren */
    display: block;
    transition: transform 0.3s ease; /* Ein kleiner Effekt beim Drüberfahren */
}

/* Optional: Bild wird beim Drüberfahren etwas größer */
.map-image:hover {
    transform: scale(1.02);
}
.map-hint {
    text-align: center;
    font-size: 0.85rem;      /* Kleiner als der restliche Text */
    color: #888;            /* Dezentes Grau */
    margin-top: 10px;       /* Abstand zum Bild */
    font-style: italic;     /* Kursiv wirkt bei Hinweisen oft sehr elegant */
    transition: color 0.3s ease;
}

/* Optional: Der Hinweis wird deutlicher, wenn man über das Bild fährt */
.kontakt-map-wrapper:hover .map-hint {
    color: #699ca3; /* Dein Teal-Blau beim Hover */
}
.info-box {
    background-color: #f0f7fb;
    border-left: 5px solid #0077b6;
    padding: 20px;
    margin: 20px 0;
    
}
/* Der Style für alle Kontakt-Links */
.contact-link {
    color: #699ca3; /* Dein CI-Blau */
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border-bottom: 1px solid transparent; /* Vorbereitung für Hover-Effekt */
}

.contact-link:hover {
    color: #4a7a80; /* Etwas dunkler beim Hover */
    border-bottom: 1px solid #699ca3; /* Unterstreichung erscheint bei Hover */
}
.info-box h3 {
    margin-top: 0;
    color: #005f8d;
}

/* Mobile Optimierung */

.footer {
  background-color: #333; /* Dunkler Hintergrund für den Footer */
  color: #ccc;
  padding: 40px 20px;
  text-align: center;
  font-size: 0.9rem;
  margin-bottom: 0px;
  flex-shrink: 0;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
}

.footer-links {
  list-style: none;
  padding: 0;
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 15px;
}

.footer-links a {
  color: #ccc;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-links a:hover {
  color: #ffffff; /* Weiß beim Hover */
}
.footer p {
    color: #ffffff !important;
    font-size: 1rem; /* In rem umgewandelt, damit es mit der Lupe skaliert */
}
.footer-note {
    color: #999 !important;
    font-size: 0.8rem !important;
    margin-top: 8px;
}
/* ==========================================================================
   DEVELOPER CREDIT LINK (FOOTER)
   ========================================================================== */

.developer-credit {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;
    color: #94a3b8; /* Dezentes Grau */
    margin-top: 10px;
    letter-spacing: 0.3px;
}

.developer-credit a {
    color: #B3CA9F; /* Dein Praxis-Akzent-Grün (oder #699ca3 für Blau) */
    text-decoration: none;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease;
}

/* Subtiler Hover-Effekt mit Unterstreichung */
.developer-credit a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 1.5px;
    bottom: -2px;
    left: 0;
    background-color: #B3CA9F;
    transition: width 0.3s ease;
}

.developer-credit a:hover {
    color: #ffffff;
}

.developer-credit a:hover::after {
    width: 100%;
    background-color: #ffffff;
}

/* Mobile Anpassung */

/* Container für die Text-Seite */
.content-page {
    max-width: 1200px; /* Begrenzte Breite für bessere Lesbarkeit */
    margin: 40px auto;
    padding: 0 20px;
    line-height: 1.6;
    color: #333;
    flex: 1; /* Das ist der entscheidende Punkt! */
   
}



.content-page h1 {
    color: #0077b6;
    margin-bottom: 20px;
}

.content-page h2 {
   
    padding-bottom: 10px;
    margin-top: 40px;
    color: #699ca3;
    text-align: center;
}

/* Info-Boxen (für Vor- und Nachsorge) */


/* Stil für Aufzählungen */
.content-page ul {
    margin: 15px 0;
    padding-left: 20px;
}

.content-page li {
    margin-bottom: 10px;
}

/* Call-to-Action Button innerhalb des Textes */

/* Container-Abstand */
/* ==========================================================================
   LEISTUNGEN: ACCORDION (NUR FÜR DIE REINE STRUKTUR)
   ========================================================================== */

/* Container-Abstand */
/* ==========================================================================
   LEISTUNGEN: ACCORDION (EXAKTER FAQ-STYLE MIT PFEIL)
   ========================================================================== */

/* Container-Abstand */
.accordion {
    max-width: 1200px;
    margin: 40px auto;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Identischer Abstand zwischen den Boxen */
}

/* Die Karten-Optik */
.accordion-item {
    background-color: #ffffff;
    border: 1px solid #eef5f6; /* Hellerer, cleanerer Rahmen wie FAQ */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); /* Identischer feiner Schatten */
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Der klickbare Header */
.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 30px; /* Identische Innenabstände */
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333333; /* Dunkle Schriftfarbe wie FAQ */
    font-family: 'Poppins', sans-serif;
    transition: color 0.3s ease;
    margin-top: 20px;
}

.accordion-header:hover {
    color: #699ca3;
}

/* Der kleine Pfeil rechts (Ersetzt das Plus) */
.accordion-icon {
    font-size: 1.5rem;
    color: #699ca3;
    transition: transform 0.3s ease;
}

/* Der ausklappbare Textbereich */
/* 1. Geschlossener Zustand: Alles flach auf 0 setzen */
.accordion-content {
    max-height: 0;
    height: 100%;
    overflow: hidden;
    font-size: 0 !important;
  padding-top: 20px !important;
    padding-bottom: 0 !important;
    opacity: 0;
    background-color: #ffffff;
    /* transition um "opacity" und "font-size" erweitert für einen weichen Übergang */
    transition: max-height 0.3s ease-out, padding 0.3s ease, opacity 0.2s ease, font-size 0.3s ease;
}

/* 2. Geöffneter Zustand: Textgröße, Sichtbarkeit und Padding aktivieren */
.accordion-item.active .accordion-content {
    opacity: 1;
    font-size: inherit !important; /* Holt sich die vergrößerte Schriftart vom Resizer */
    padding: 20px 30px; /* Hier das Padding für oben/unten (z.B. 20px) aktivieren, wenn es offen ist */
}

/* Text-Styling innerhalb des Contents */
.accordion-content p {
    padding-bottom: 10px;
    padding-top: 15px;
    line-height: 1.7;
    color: #555;
}

/* Deine optimierte 2-Spalten-Liste bleibt komplett erhalten */
.accordion-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    padding-bottom: 22px; /* Schließt bündig nach unten ab */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 20px; 
}

/* Die einzelnen Punkte kompakter */
.accordion-content ul li {
    padding: 3px 0;
    padding-left: 20px;
    position: relative;
    font-size: 0.95rem;
    line-height: 1.5;
}

.accordion-content ul li::before {
    content: "•";
    color: #699ca3;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Aktiver Zustand (wird per JavaScript gesteuert) */
.accordion-item.active {
    border-color: #699ca3; /* Aktiv-Rahmen wie FAQ */
}

/* Pfeil-Rotation bei Aktivierung um 180 Grad nach oben */
.accordion-item.active .accordion-icon {
    transform: rotate(180deg);
}
.lebenslauf-liste li,
.mitgliedschaft-liste li,
.schwerpunkt-liste li {
    font-size: 1rem !important;
}
/* MEDIA QUERIES (Exakt aus der FAQ-Sektion übernommen) */
@media (max-width: 768px) {
    .accordion-header {
        padding: 18px 20px;
        font-size: 1rem;
    }

    .accordion-content {
        padding: 0 20px;
    }
    
    .accordion-content ul {
        grid-template-columns: 1fr; /* Schaltet mobil sauber auf einspaltig um */
    }
}

@media (max-width: 480px) {
    
    
    .accordion-icon {
        font-size: 1.3rem;
    }
}
/* Erzwingt die relative Skalierung auch auf Smartphones und Tablets */
@media (max-width: 400px) {
    .lebenslauf-liste li,
    .mitgliedschaft-liste li,
    .schwerpunkt-liste li {
        font-size: 1rem !important;
    }
}
.leistungen-teaser {
  padding: 60px 20px;
  background-color: #ffffff; /* Weiß für die Abgrenzung zum Diabetes-Screening */
}

.leistungen-teaser .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* Drei Spalten */
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

@media screen and (max-width: 992px) and (min-width: 769px) {
  .leistungen-teaser .container {
    grid-template-columns: 1fr 1fr;
  }
}

.teaser-box {
  padding: 40px;
  background-color: #f8fcfd; /* Gleiches Teal-Grau wie beim Diabetes-Screening */
  
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.teaser-box h2 {
  color: #699ca3;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.teaser-box p {
    margin-bottom: 30px;
    line-height: 1.6;
}
/* ==========================================================================
   NETZHAUT-SCREENING SEKTION (WEISSER HINTERGRUND & LINKSBÜNDIG)
   ========================================================================== */

/* ==========================================================================
   NETZHAUT-SCREENING SEKTION (WEISSER HINTERGRUND & LINKSBÜNDIG)
   ========================================================================== */

.netzhaut-section {
  background-color: #ffffff !important; /* Komplett weißer Hintergrund */
  padding: 60px 20px;
}

.netzhaut-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  align-items: center;
  text-align: left !important;
}

/* Linke Spalte */
.netzhaut-text-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start !important;
  text-align: left !important;
}

.netzhaut-text-col .sub-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #699ca3;
  margin-bottom: 12px;
  text-align: left;
}

/* Übernimmt deine h2 Styling-Vorgabe (2rem & 15px Abstieg) */
.netzhaut-text-col h2 {
  font-size: 2rem !important;
  margin-bottom: 15px !important;
  color: #1e293b;
  text-align: left !important;
}

/* Übernimmt deine p Styling-Vorgabe (1rem & 20px Abstieg) */
.netzhaut-text-col p {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: #555555 !important;
  margin-bottom: 20px !important;
  text-align: left !important;
}

/* Runder Kosten-Badge */
.price-badge {
  width: 140px;
  height: 140px;
  background-color: #B3CA9F;
  color: #1e293b;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 15px;
  margin-top: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.price-badge .price-label {
  font-family: 'Poppins', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1px;
}

.price-badge .price-amount {
  font-family: 'Poppins', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  margin: 2px 0;
}

.price-badge .price-sub {
  font-family: 'Poppins', sans-serif;
  font-size: 0.65rem;
  line-height: 1.1;
  opacity: 0.9;
}

/* Rechte Spalte (Ablauf-Karte) */
.ablauf-card {
  background-color: #f8fcfd; /* Deines bisheriges leichtes Teal-Grau */
  padding: 40px;

  
  text-align: left !important;
}

/* Übernimmt deine h3 Styling-Vorgabe (1.5rem & 10px Abstieg) */
.ablauf-card h3 {
  font-size: 1.5rem !important;
  margin-bottom: 10px !important;
  color: #1e293b;
  text-align: left !important;
}

/* Nummerierte Liste */
.steps-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  text-align: left;
}

.steps-list li {
  font-family: 'Poppins', sans-serif;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 0;
  border-bottom: 1px solid #e2e8f0;
  font-weight: 600;
  font-size: 0.95rem;
  color: #1e293b;
  text-align: left;
}

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

.step-num {
  width: 28px;
  height: 28px;
  background-color: #e2e8f0;
  color: #475569;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
}

.card-info {
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
  color: #555555 !important;
  margin-bottom: 20px !important;
  text-align: left !important;
}

/* Accordion innerhalb der Karte */
.card-accordion {
  margin-bottom: 25px;
}

.card-accordion .accordion-content ul {
  padding-left: 20px;
  margin: 10px 0;
  color: #555555;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* Button in der Karte */
.btn-screening-termin {
  font-family: 'Poppins', sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 16px 20px;
  background-color: #699ca3;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 99px;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

/* Abstand zum Preis-Badge davor und zum unteren Rand der Akkordeon-Box */
.accordion-content .btn-screening-termin {
  margin-top: 15px;
  margin-bottom: 20px;
}

/* Themen-Icons in den Akkordeon-Headern (sitweit, alle Akkordeons) */
.accordion-header span {
  display: flex;
  align-items: center;
  gap: 14px;
}

.accordion-topic-icon {
  display: inline-flex !important; /* Boxicons setzt .bx sonst auf display:inline-block und verschiebt das Icon */
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  border-radius: 50%;
  background-color: #eef5f6;
  color: #699ca3;
  font-size: 1.15rem;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.accordion-item.active .accordion-topic-icon {
  background-color: #699ca3;
  color: #ffffff;
}

/* Einleitungsbereich der Augenvorsorge-Sektion */
.vorsorge-section .vorsorge-lead {
  font-family: 'Poppins', sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  color: #555555;
  text-align: center;
  margin: 0 0 30px 0;
}

.vorsorge-intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin: 0 0 40px 0;
}

.vorsorge-intro-item {
  background-color: #ffffff;
  border: 1px solid #eef5f6;
  border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
  padding: 25px;
}

.vorsorge-intro-icon {
  display: inline-flex !important; /* Boxicons setzt .bx sonst auf display:inline-block und verschiebt das Icon */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #eef5f6;
  color: #699ca3;
  font-size: 1.4rem;
  margin-bottom: 15px;
}

.vorsorge-intro-item p {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555555;
  margin: 0;
}

@media screen and (max-width: 900px) {
  .vorsorge-intro-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

.btn-screening-termin:hover {
  background-color: #55838a;
  transform: translateY(-2px);
}

/* Mobile Responsive */
@media screen and (max-width: 992px) {
  .netzhaut-container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  
  .ablauf-card {
    padding: 25px;
  }

  .teaser-box {
    padding: 25px;
  }
}

.btn-cta {
    display: inline-block;
    background-color: #0077b6;
    color: white;
    padding: 12px 25px;
    text-decoration: none;
    
    margin-top: 20px;
    font-weight: bold;
}

.btn-cta:hover {
    background-color: #005f8d;
}
.cta-diabetes-sektion {
  padding: 80px 20px;
  background-color: #ffffff; /* Helles Teal-Grau für Kontrast */
  text-align: center;
}

.cta-diabetes-sektion h2 {
    color: #699ca3;
    margin-bottom: 20px;
}

.cta-diabetes-sektion p,
.diabetes-sektion p {
    max-width: 700px;
    margin: 0 auto 30px auto;
    line-height: 1.6;
}
/* Grundlegende Container-Gestaltung */
/* Globale Sektions-Basis */
.diabetes-sektion {
  padding: 80px 20px;
  background-color: #ffffff;
  text-align: center;
}

.diabetes-sektion h2 {
  color: #699ca3;
  margin-bottom: 25px;
  font-size: 2rem;
}

.diabetes-sektion .subtitle {
  font-size: 1.25rem;
  color: #333;
  margin-bottom: 20px;
  font-weight: 500;
}



/* Vorteile-Grid (schlicht & elegant) */
.vorteile-grid {
    display: grid;
    /* Dies zwingt alle 3 Boxen, genau den gleichen Platz einzunehmen */
    grid-template-columns: repeat(3, 1fr); 
    gap: 30px; /* Der einheitliche Abstand zwischen den Boxen */
    margin-bottom: 50px;
}


.vorteil-item {
  padding: 20px;
  background: #fcfcfc; /* Sehr dezentes Grau */
  
  border: 1px solid #edf4f5;
}

.vorteil-item h3 {
    color: #699ca3;
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/* Ablauf-Prozess (Dezente Linie) */
.ablauf-box {
  margin: 50px 0;
  padding: 40px;
  background: #ffffff;
  
}

.prozess-schritte {
    display: flex;
    justify-content: center; /* Zentriert die Gruppe */
    gap: 80px; /* Hier kannst du den Abstand fest vorgeben! */
    margin: 30px 0;
    font-weight: bold;
    color: #699ca3;
}

.schritt {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100px; /* Gibt den Elementen eine feste Breite */
}

.schritt span {
  display: block;
  background: #699ca3;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 40px;
  margin: 0 auto 10px auto;
}

/* Footer-Info mit Button */
.info-footer {
  padding: 40px;
  border-top: 1px solid #edf4f5;
  margin-top: 40px;
}

.cta-button {
  display: inline-block;
  padding: 15px 40px;
  background-color: #699ca3;
  color: white;
  text-decoration: none;
  border-radius: 50px;
  font-weight: 600;
  transition: background 0.3s ease;
}

.cta-button:hover {
  background-color: #5a8a91;
}
/* --- CTA Sektion --- */
.cta-sektion {
  padding: 80px 20px;
  background-color: #699ca3; /* Dein Teal-Blau */
  color: #ffffff;
  text-align: center;

}

.cta-box h2 {
  color: #ffffff !important;/* Weiß für guten Kontrast auf Teal */
  margin-bottom: 20px;
  font-size: 2.2rem;
}

.cta-box p {
    font-size: 1.2rem; /* Leicht angehoben für die große Box */
    color: #ffffff !important;
    margin-bottom: 40px;
    opacity: 0.95;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

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

/* Button-Stile (Einheitliche Größe & Form) */
.btn-primary-white, .btn-outline {
  display: inline-block;
  padding: 15px 35px;
  border-radius: 99px; /* Passend zu deinen anderen Buttons */
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  width: 220px; /* Gleiche Breite wie in deiner Praxis-Sektion */
  text-align: center;
}

/* Weißer Button (Fokus) */
.btn-primary-white {
  background: #ffffff;
  color: #699ca3;
}

.btn-primary-white:hover {
  background: #f0f0f0;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

/* Outline Button (Support) */
.btn-outline {
  border: 2px solid #ffffff;
  color: #ffffff;
}

.btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-3px);
}


/* Mobile Anpassung */

/* Einleitungstext für die Hauptüberschrift */
.intro-text {
    max-width: 800px;
    margin: 20px auto 60px auto;
    text-align: center;
    color: #555;
    font-size: 1.1rem;
    line-height: 1.6;
}
.container h1 {
    text-align: center;
    color: #699ca3;
}

/* Abstand zwischen den Sektionen */
.katarakt-sektion {
    margin-bottom: 60px;
    padding: 20px 0;
    margin-top: -50px;
    
}

/* Sektions-Überschrift etwas dezenter zum Rest */
.katarakt-sektion h2 {
    text-align: center;
    margin-bottom: 40px;
    color: #699ca3;
}

.katarakt-intro {
  max-width: 100%;
  margin: 0 auto 40px auto;
  line-height: 1.7;
  color: #555;
  text-align: center;
}

.katarakt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 100%;
  margin: 0 auto 40px auto;
}

.katarakt-card {
  padding: 30px;
  background: #f8fcfd; /* Sehr helles Teal-Grau */

}

.katarakt-card h3 {
    color: #699ca3;
    margin-top: 0;
}

.katarakt-ablauf {
  max-width: 80%;
  margin: 0 auto;
  background: #ffffff;
  border-left: 4px solid #699ca3;
  padding-left: 30px;
}

.steps-list {
  list-style: none;
  padding: 0;
}

.steps-list li {
  margin-bottom: 15px;
  position: relative;
  padding-left: 30px;
}

.steps-list li::before {
  content: "✓";
  color: #699ca3;
  position: absolute;
  left: 0;
  font-weight: bold;
}

/* Mobile-Anpassung */

.header-sektion { padding: 80px 20px; text-align: center; background-color: #ffffff; }
.header-sektion h2 { color: #699ca3; margin-bottom: 15px; }
.divider { width: 60px; height: 3px; background-color: #699ca3; margin: 0 auto 30px auto; }
.intro-text { max-width: 700px; margin: 0 auto 40px auto; color: #555; line-height: 1.6; }
.sprechzeiten-tabelle {
    width: 100%;
    max-width: 1200px;
    margin: 40px auto;
    border-collapse: collapse;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.sprechzeiten-tabelle th, 
.sprechzeiten-tabelle td {
    padding: 20px;
    text-align: left;
    border-bottom: 1px solid #edf4f5;
}

.sprechzeiten-tabelle th {
    background-color: #699ca3;
    color: white;
}

.sprechzeiten-tabelle tr:hover {
    background-color: #f8fcfd;
}
.container h2{
    text-align: center;
    color: #699ca3;
    margin-bottom: 20px;
}


/* Mobile Optimierung */

/* --- Team-Sektion & Profil-Design --- */
.team-sektion { 
  
    background-color: #ffffff; 
}

/* ==========================================================================
   PROFIL GRID FIX (Abstand & Bildgröße)
   ========================================================================== */

.profil-grid {
    display: grid;
    /* Nutzt auto für das Bild (passgenau) und 1fr für den Text */
    grid-template-columns: minmax(280px, 350px) 1fr;
    gap: 35px; /* Abstand von 60px auf 35px verringert */
    max-width: 1100px;
    margin: 40px auto 30px auto;
    align-items: start; /* Richtet Bild und Text oben bündig aus */
}

.profil-bild {
    width: 100%;
}

.profil-bild img {
    width: 100%; /* Füllt die Spalte sauber aus ohne Lücken */
    max-width: 350px;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    
    display: block;
}

/* Responsive Fix für Mobile & Tablets */
@media screen and (max-width: 850px) {
    .profil-grid {
        grid-template-columns: 1fr; /* Stapelt Bild & Text untereinander auf Handys */
        gap: 25px;
    }

    .profil-bild img {
        margin: 0 auto; /* Zentriert das Bild auf dem Smartphone */
    }
}

.titel-sub { 
    color: #699ca3; 
    font-weight: 600; 
    margin-bottom: 20px; 
    font-size: 1.2rem; 
}

/* --- Einheitliches Akkordeon-Design (Werdegang, Mitgliedschaft, Schwerpunkte) --- */
.info-accordion {
    max-width: 800px;
    margin: 15px auto;
    background: #ffffff;
   
    border: 1px solid #edf4f5;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    overflow: hidden;
}

summary {
    padding: 20px 25px;
    cursor: pointer;
    font-weight: 600;
    color: #699ca3;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fcfdfe;
}

/* Der "Plus"-Button, der zum "X" wird */
summary::after {
    content: '+';
    font-size: 1.5rem;
    transition: transform 0.3s;
}

details[open] summary::after { transform: rotate(45deg); }

.content {
    padding: 20px 25px;
    color: #555;
    border-top: 1px solid #edf4f5;
    line-height: 1.7;
}

/* --- Listen-Design (wie bei Sprechzeiten) --- */
.lebenslauf-liste, .mitgliedschaft-liste {
    list-style: none;
    padding: 0;
}

.lebenslauf-liste li, .mitgliedschaft-liste li {
    margin-bottom: 12px;
    padding-left: 20px;
    position: relative;
}

.lebenslauf-liste li::before {
    content: "•";
    color: #699ca3;
    position: absolute;
    left: 0;
    font-weight: bold;
}

/* Responsive Anpassung */

.mfa-sektion { padding: 20px 20px; background-color: #ffffff; } /* Etwas hellerer Hintergrund zur Abgrenzung */

.team-intro { text-align: center; max-width: 600px; margin: 0 auto 40px auto; color: #555; }

.mfa-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
}

.mfa-card {
    background: #ffffff;
    padding: 25px;
    
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
}

.mfa-card:hover { transform: translateY(-10px); }

.mfa-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%; /* Runde Bilder für das Team */
    object-fit: cover;
    margin-bottom: 20px;
    border: 3px solid #699ca3;
}

.mfa-card h3 { 
    font-size: 1.2rem; 
    margin-bottom: 5px; 
    color: #333333; 
}
.mfa-card p { 
    color: #699ca3; /* Dein Praxis-Teal */
    font-weight: 500; 
    font-size: 0.95rem; 
}

/* Mobile Optimierung: 1 Spalte auf kleinen Handys */

/* Das Info-Modul unten rechts */
.modal-overlay {
    display: none; /* Erstmal weg */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(8px);
    z-index: 9998;
}

/* Lightbox: Bilder-Galerie vergrößert anzeigen (nutzt .modal-overlay als Hintergrund) */
.modal-overlay.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
    box-sizing: border-box;
    background: rgba(20, 30, 35, 0.88) !important;
    cursor: zoom-out;
    animation: lightboxFadeIn 0.25s ease;
}

@keyframes lightboxFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.modal-overlay .lightbox-img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    cursor: default;
    object-fit: contain;
}

.modal-overlay .lightbox-close {
    position: fixed;
    top: 20px;
    right: 25px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 50%;
    color: #ffffff;
    font-size: 1.6rem;
    cursor: pointer;
    z-index: 10000;
    transition: background-color 0.2s ease;
}

.modal-overlay .lightbox-close:hover {
    background: rgba(255, 255, 255, 0.25);
}

.slides-wrapper img {
    cursor: zoom-in;
}

/* Das Modul jetzt zentriert */


/* Schließen-Button */


.close-modal:hover { color: #699ca3; }

/* Button im Modul */
.info-modal .btn-primary {
    display: block !important;    /* Erzwingt Block-Layout */
    width: 100% !important;       /* Erzwingt volle Breite */
    padding: 12px !important;     /* Erzwingt Innenabstand */
    background: #699ca3 !important; /* Erzwingt deine Farbe */
    color: #fff !important;       /* Erzwingt Schriftfarbe */
    text-align: center !important; /* Erzwingt Zentrierung */
    box-sizing: border-box !important; /* Verhindert das Rausragen */
    margin-top: 15px !important;  /* Erzwingt Abstand nach oben */
    border: none !important;      /* Falls irgendwo ein Border stört */
}
/* Layout für die Impressum-Seite */
/* Layout für die Impressum-Seite */
/* --- OPTIMIERUNG FÜR RECHTS- UND INHALTSSEITEN (IMPRESSUM & DATENSCHUTZ) --- */
.impressum-section {
    margin-bottom: 30px;
    text-align: left; /* Sorgt für saubere, linksbündige Lesbarkeit */
}

.impressum-section h3 {
    color: #1a4a5e; /* Verwendet dein Praxis-Dunkelblau für die Zwischenüberschriften */
    margin-bottom: 10px;
    transition: font-size 0.2s ease; /* Macht das Vergrößern über die Lupe geschmeidig */
}

.impressum-section p {
    line-height: 1.6;
    color: #333;
    transition: font-size 0.2s ease;
}

/* Mobile Ansicht (Handy) */


/* --- Handys (unter 768px) --- */
/* --- ZENTRALER MEDIA-QUERY BLOCK (Handy & Tablets) --- */

/* Für alle Geräte bis 1024px (Tablets) */
/* ==========================================================
   MOBILE FIXES: NAVBAR, SLIDER & ELEMENT-SKALIERUNG
   ========================================================== */
@media screen and (max-width: 768px) {
  .staerken-list {
    grid-template-columns: 1fr; /* Alles untereinander */
  }
}
/* --- ZENTRALER MEDIA-QUERY BLOCK (Alle Geräte bis 1024px) --- */
@media (max-width: 600px) {
    .footer-bubbles {
        height: 120px; /* Die Höhe etwas reduzieren, damit es kompakter wirkt */
        background-size: 150% auto; /* Die Kreise etwas "rauszoomen" */
        background-position: bottom center;
        
        /* Optional: Falls die Kreise zu groß wirken, hier verkleinern */
        background: 
            radial-gradient(circle at 10% 80%, #699ca3 25px, transparent 26px),
            radial-gradient(circle at 30% 60%, #8fbdbf 30px, transparent 31px),
            
          
         

             radial-gradient(circle at 15% 40%, #8fbdbf 20px, transparent 21px),
        radial-gradient(circle at 35% 30%, #699ca3 15px, transparent 16px),
      
    
        radial-gradient(circle at 60% 80%, #8fbdbf 10px, transparent 11px);
    }
}
@media (max-width: 850px) {
    .nav-links {
        position: absolute;
        top: 100%; /* Dockt exakt an der Unterkante der Navbar an */
        left: 0;
        width: 100%;
         background: rgba(255, 255, 255, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: center;
        padding: 30px 0;
        margin: 0;
        
        /* Die Animation: Dauer auf 0.6s erhöht für mehr "Länge" */
        transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
        
        /* Start-Zustand */
        transform: translateY(-20px); 
        opacity: 0;
        visibility: hidden;
        box-shadow: 0 10px 15px rgba(0,0,0,0.05); /* Schatten zur Abgrenzung */
        z-index: 999;
    }

    .nav-links.active {
        transform: translateY(0);
        opacity: 1;
        visibility: visible;
    }
}
@media (max-width: 600px) {
    .footer-bubbles {
        height: 100px; /* Auf dem Handy kleiner */
        background-size: 80% auto; /* Die Kreise etwas stauchen */
    }
}
@media screen and (max-width: 1024px) {
  /* Tablet-Optimierungen */
  .vorteile-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .mfa-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .ueber-uns-grid, .katarakt-grid, .kontakt-content { grid-template-columns: 1fr !important; }
  .kontakt-sektion{ margin-top: 20px; }
}


@media screen and (max-width: 768px) {

    .btn-hero {
        width: 80% !important;
        text-align: center !important; /* Text IM Button bleibt zentriert */
        box-sizing: border-box !important;
        margin-top: 15px !important; /* Abstand nach oben */
    }

    /* 5. Telefon-Status ganz unten linksbündig */
    .telefon-status-container {
        color: #334155 !important;
        font-size: 0.9rem !important;
        text-align: left !important;
        align-self: flex-start !important;
    }

    /* 4. Telefon-Status Textfarbe anpassen */
    .telefon-status-container {
        color: #334155 !important;
        font-size: 0.9rem !important;
    }

    
    .praxis-sektion { 
        margin-top: -20px; 
    }

    /* Überschriften-Korrekturen auf Tablets */

    .containers h2 {
        font-size: 2rem;
        font-weight: 600;
        margin-top: 40px;
        text-align: left;
        margin-bottom: -10px;
    }

    .praxis-text h2 { 
        font-size: 2rem; 
        margin-top: 60px; 
        text-align: left; 
    }

    /* Footer-Text */
    .footer p {
        font-size: 0.75rem; /* 12px in rem-Äquivalent für sauberes Mitziehen */
    }
  .praxis-sektion { margin-top: -20px; }
  .praxis-text h2 { font-size: 2rem !important; margin-top: 60px; text-align: left; }
  .praxis-text p { text-align: left; }
  /* 3. Grids (Alles untereinander für maximale Übersicht) */
  .ueber-uns-grid, .kontakt-content, .vorteile-grid, 
  .katarakt-grid, .profil-grid, .mfa-grid, 
  .leistungen-teaser .container {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
 
  
  .ueber-uns-sektion{
    margin-top: 50px;
  }
  .ueber-uns-grid{
    margin-top: -20px;
  }

  /* 4. Praxis & Slider (Rahmen passt sich dem Bild an, mit "Peek" auf das nächste Bild) */
  .slider-box {
    width: 100% !important;
    max-width: none !important;
    overflow: hidden;
  }
  .slides-wrapper {
    gap: 14px;
  }
  .slides-wrapper img {
    flex: 0 0 88% !important;
    width: 88% !important;
    height: 100% !important;
    object-fit: contain !important;
  }
  .button-group { flex-direction: column; align-items: center; }
  .btn-primary, .btn-team { width: 400px !important; }

  /* 5. Typografie & Abstände */

  section { padding: 28px 20px !important; }
  hr { margin: 30px auto !important; }
  .accordion { margin: 28px auto !important; }
  .content-page h2 { margin-top: 20px !important; }

  /* Verhindert doppeltes Padding: .content-page liefert die Seiten-Ränder
     bereits (20px); verschachtelte <section>/.container-Elemente sollen
     nicht nochmal eigene Seiten-Ränder addieren. */
  .content-page section,
  .content-page .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .katarakt-card,
  .staerke-item {
    padding: 25px;
  }

  .staerken-list { gap: 30px; text-align: left; }


  /* 6. Marquee (Mobile Optimierung) */
  .marquee-fullwidth { padding: 20px 0; }


  /* 7. Ablauf & Prozess */
  .prozess-schritte { gap: 20px; flex-direction: column; }
  .schritt { width: 100%; }

  /* 8. Modals & UI */
  .info-modal { width: 90% !important; padding: 20px; }
  .sprechzeiten-tabelle { font-size: 0.85rem; }
  .sprechzeiten-tabelle th, .sprechzeiten-tabelle td { padding: 10px; }

}

/* --- ZUSÄTZLICHER SCHUTZ --- */
@media screen and (max-width: 480px) {
  .logo-text h1 { font-size: 1rem !important; }
  .cta-buttons { flex-direction: column; }
  .btn-primary-white, .btn-outline { width: 100% !important; }
}
@media screen and (max-width: 850px) {
  .navbar {
    padding: 15px 20px;
    position: fixed; /* Wichtig, damit das absolute Menü sich hier orientiert */
  }

  /* Termin-Button ausblenden, wie von dir gewünscht */


  .menu-toggle {
    display: block !important;
  }



 
  
}


@media screen and (max-width: 768px) {
    

   
    
    .content-page {
        margin-top: 70px;
    }
}
@media screen and (max-width: 450px) {
    .sos-menu {
        width: calc(100vw - 40px); /* Nimmt fast die gesamte Bildschirmbreite ein */
        right: -10px;             /* Zentriert sich besser durch leichten Versatz */
        padding: 10px;
    }
    
    .sos-button {
        width: 55px;  /* Etwas kleiner auf dem Handy */
        height: 55px;
    }
}

/* Anpassung für das Handy, um die Kreise kleiner und passend zu machen */
@media screen and (max-width: 480px) {
    .circle-link-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); 
        gap: 10px !important;                 /* Etwas mehr Luft zwischen den Kreisen */
        padding: 0 5px;                       /* Ein ganz kleiner Rand außen */
    }

    .circle-icon {
        width: 60px !important;              /* Wieder größer: Das wirkt hochwertiger */
        height: 60px !important;
        font-size: 24px !important;          /* Icons schön groß und sichtbar */
        margin: 0 auto;
    }

    .circle-link-grid span {
        font-size: 13px !important;          /* Gut lesbar, nicht zu klein */
        margin-top: 10px;
    }
}
@media screen and (max-width: 450px) {
    .button-group {
        display: flex;
        flex-direction: column; /* Buttons untereinander auf kleinen Screens */
        align-items: center;
        width: 100%;
        gap: 15px; /* Abstand zwischen den beiden Buttons */
    }

    .btn-primary, 
    .btn-team {
        width: 90% !important; /* Nimmt 90% der Bildschirmbreite ein, passt perfekt */
        max-width: 300px;     /* Verhindert, dass sie auf größeren Handys zu breit werden */
        padding: 12px 20px;   /* Etwas kompaktere Höhe für den Daumen */
        font-size: 14px;      /* Schriftgröße leicht angepasst */
        text-align: center;
    }
}
@media screen and (max-width: 480px) {
    /* Setzt die Basis-Schriftgröße für das Handy runter, ohne die Lupe zu blockieren */
    html {
        font-size: 90%; 
    }

    /* Überschriften harmonisch anpassen */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    /* Logo und Hero-Schriften auf kleinen Displays anpassen */
    .logo-text h1 { 
        font-size: 1.15rem; 
    }

    
}
/* Zentrierung für Tablet / iPad Ansicht */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    /* 1. Den Wrapper zwingen, den ganzen Platz einzunehmen */
    .kontakt-map-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Zentriert alles innerhalb */
        width: 100% !important;
        margin: 0 auto !important;
    }

    /* 2. Den Link (der das Bild enthält) zwingen, zentriert zu sein */
    .kontakt-map-wrapper a {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }

    /* 3. Das Bild selbst zentrieren */
    .map-image {
        display: block !important;
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 80% !important; /* Etwas Platz lassen, damit es nicht klebt */
        height: auto !important;
    }
}

/* --- iPad / Tablet Anpassung für Team-Bilder --- */
@media screen and (min-width: 601px) and (max-width: 1024px) {
    .profil-bild {
        width: 100% !important;
        max-width: 400px !important; /* Maximale Breite für das Bild auf Tablets */
        margin: 0 auto !important;   /* Zentrierung */
    }

    .profil-bild img {
        width: 100% !important;      /* Bild füllt den Container aus */
        height: auto !important;     /* Proportionen bleiben erhalten */
        display: block !important;
             /* Optional für ein schönes Design */
    }
}
/* --- Akkordeon Mobile Optimierung --- */
@media screen and (max-width: 480px) {
    /* 1. Spalten-Grid auf dem Handy auflösen */
    .accordion-content ul {
        display: block !important; /* Kein Grid mehr, alles untereinander */
        grid-template-columns: none !important;
    }

    /* 2. Liste anpassen */
    .accordion-content ul li {
        width: 100% !important;
        
        padding-left: 15px !important;
    }

    /* 3. Padding des Inhalts-Containers reduzieren, um Rand zu gewinnen */
    .accordion-content {
        padding: 10px 15px !important;
    }
}
/* Blendet den Termin-Button in der Navbar auf iPads und Handys aus */
@media screen and (max-width: 991px) {
    .navbar .btn-termin {
        display: none !important;
    }
}

/* ==========================================================================
   BARRIEREFREIHEIT: SCHRIFTGRÖSSEN-LUPE WIDGET
   ========================================================================== */
.font-resizer-container {
    position: fixed;
    bottom: 50%; /* Sitzt jetzt sauber und mit Abstand über dem SOS-Button */
    right: 25px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    z-index: 9999;
    background: #ffffff;
    padding: 6px;
    border-radius: 30px;
    border: 1px solid #edf4f5;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.resizer-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: #f4f9fa;
    color: #699ca3;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.resizer-btn:hover {
    background: #699ca3;
    color: #ffffff;
}

/* Der Reset-Button (A) unterscheidet sich leicht */
.resizer-btn.reset-btn {
    background: #ffffff;
    border: 1px solid #edf4f5;
}

.resizer-btn.reset-btn:hover {
    background: #4a7a80;
    color: #ffffff;
    border-color: #4a7a80;
}

/* Optimierung für Mobilgeräte: Buttons nebeneinander statt untereinander */
@media screen and (max-width: 768px) {
    .font-resizer-container {
        bottom: auto;
        top: 100px; /* Auf Handys oben platzieren, damit es nicht mit dem SOS-Button kollidiert */
        right: 10px;
        flex-direction: row;
    }
    .resizer-btn {
        width: 35px;
        height: 35px;
        font-size: 0.8rem;
    }
}
/* ==========================================================================
   STYLING FÜR DIE DIABETES-SCREENING SEITE (.screening-sektion)
   ========================================================================== */
/* ==========================================
   DIABETES-SCREENING SEKTION (Eckig & Modern)
   ========================================== */
.screening-sektion {
    padding: 60px 0 80px 0;
    background: #ffffff;
    font-family: 'Poppins', sans-serif;
}

.screening-sektion .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 30px;
}

.screening-sektion h2 {
    text-align: center;
    color: #699ca3;
    font-size: 2.2rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.screening-sektion .titel-sub {
    text-align: center;
    color: #699ca3;
    font-size: 1.2rem;
    font-weight: 500;
    margin-bottom: 25px;
}

.screening-intro {
    max-width: 850px;
    margin: 0 auto 50px auto;
    text-align: center;
    line-height: 1.7;
    color: #555555;
    font-size: 1.1rem;
}

/* 3-Spalten Grid */
.screening-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}

.screening-card {
    background: #fcfdfe;
    padding: 35px 30px;
    border: 1px solid #edf4f5;
    border-radius: 0 !important; /* Eckig */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.screening-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(105, 156, 163, 0.12);
    border-color: rgba(105, 156, 163, 0.3);
}

.screening-card h4 {
    color: #699ca3;
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}

.screening-card p {
    color: #555555;
    line-height: 1.6;
    font-size: 1rem;
    margin: 0;
}

/* 2-Spalten Layout für Kosten & Wichtigkeit */
.screening-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-top: 50px;
}

.screening-card.info-highlight {
    background: #f4f9fa;
    border-left: 5px solid #699ca3;
}

/* ABLAUF-PROZESS SEKTION (Kreise komplett entfernt) */
/* ABLAUF-PROZESS SEKTION (Klar lesbar ohne Kreise) */
/* ==========================================
   ABLAUF-SEKTION (Volle Breite & Sichere Farben)
   ========================================== */
/* ==========================================
   ABLAUF-SEKTION FIX (Breit & Lesbar)
   ========================================== */
/* ==========================================
   ABLAUF-SEKTION (Responsive für Desktop & Mobile)
   ========================================== */
.screening-ablauf {
    background: #fcfdfe;
    border: 1px solid #edf4f5;
    border-radius: 0 !important;
    padding: 40px 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    margin: 60px 0;
    width: 100%;
    box-sizing: border-box;
}

.screening-ablauf h4 {
    color: #699ca3 !important;
    margin-bottom: 30px;
    font-size: 1.4rem;
    font-weight: 600;
}

/* DESKTOP: 3 Karten nebeneinander */
.prozess-schritte {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 20px !important;
    width: 100% !important;
    margin-bottom: 35px !important;
    box-sizing: border-box !important;
}

.screening-ablauf .schritt {
    flex: 1 1 0px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    background: #ffffff00 !important;
    
    padding: 20px 25px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 15px !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;
}

.screening-ablauf .schritt-num {
    color: #699ca3 !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.screening-ablauf .schritt-text {
    color: #1e293b !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

.prozess-info {
    color: #64748b !important;
    font-size: 0.98rem;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto;
}

/* ==========================================
   HANDY / SMARTPHONE OPTIMIERUNG (< 768px)
   ========================================== */
@media screen and (max-width: 768px) {
    .screening-ablauf {
        padding: 25px 15px !important;
        margin: 40px 0 !important;
    }

    /* Bricht die 3 Boxen untereinander um */
    .prozess-schritte {
        flex-direction: column !important;
        gap: 12px !important;
    }

    .screening-ablauf .schritt {
        width: 100% !important;
        padding: 15px 18px !important;
    }

    .screening-ablauf .schritt-text {
        font-size: 0.95rem !important;
    }
}


/* BUTTON STYLING (Eckig & Abgestimmt) */




.screening-action {
    text-align: center;
    margin-top: 50px;
}

/* RESPONSIVE HANDLING (Tablets & Smartphones) */
@media screen and (max-width: 992px) {
    .screening-grid,
    .screening-grid-2 {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .prozess-schritte {
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .screening-sektion h2 {
        font-size: 1.8rem;
    }

    .screening-ablauf {
        padding: 35px 20px;
    }
}

@media screen and (max-width: 576px) {
    .screening-sektion {
        padding: 40px 0 60px 0;
    }

    .screening-sektion .container {
        padding: 0 15px;
    }

    .screening-card {
        padding: 25px 20px;
    }

    .screening-action .btn-termin {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}
/* Standardmäßig ist das mobile Telefon-Icon auf dem Desktop unsichtbar */
.mobile-phone-trigger {
    display: none;
}

/* ==========================================================================
   MOBILE ANPASSUNG (Handys & Tablets)
   ========================================================================== */
@media screen and (max-width: 991px) {
    /* 1. Blendet den normalen Text-Button auf iPads und Handys aus */
    .phone-desktop {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    /* 2. Aktiviert das runde Telefon-Icon NUR auf Smartphones */
.mobile-phone-trigger {
        display: flex;
        position: fixed;
        bottom: 30px;
        right: 20px;
        width: 50px;
        height: 50px;
        background-color: #699ca3;
        color: #ffffff;
        border-radius: 50%;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        z-index: 100000;
        transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.6s ease;

        /* KORREKTUR: Entfernt den Unterstrich des Links */
        text-decoration: none !important;

        /* Erst sichtbar nach dem Scrollen, siehe .glow-active */
        opacity: 0;
        pointer-events: none;
    }

    .mobile-phone-trigger:hover {
        background-color: #4a7a80;
        transform: scale(1.05);
    }
}
/* Runder Doctolib-Button auf allen Bildschirmgrößen sichtbar (Handy, Tablet, Desktop) */
.mobile-doctolib-trigger {
    display: flex;
    position: fixed;
    bottom: 30px;
    right: 20px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    z-index: 100000;
    transition: transform 0.2s ease, opacity 0.6s ease;

    /* Erst sichtbar nach dem Scrollen, siehe .glow-active */
    opacity: 0;
    pointer-events: none;
}

.mobile-doctolib-trigger img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mobile-doctolib-trigger:hover {
    transform: scale(1.05);
}

@media screen and (max-width: 768px) {
    /* Hier höher setzen, damit der Doctolib-Button nicht mit dem Telefon-Button überlappt */
    .mobile-doctolib-trigger {
        bottom: 90px;
    }
}
/* ==========================================================================
   SOS STYLES (Optimiert & Bereinigt)
   ========================================================================== */
/* Fixierter "Inhabergeführt"-Button oben links, auf jeder Seite sichtbar */
.inhaber-badge {
    position: fixed;
    top: 96px;
    left: 20px;
    z-index: 9997;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: none;
    white-space: nowrap;
    background-color: #ffffff;
    border: 1.5px solid #699ca3;
    color: #699ca3;
    padding: 9px 16px;
    border-radius: 99px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.inhaber-badge i {
    font-size: 1.05rem;
    flex-shrink: 0;
}

.inhaber-badge:hover {
    background-color: #699ca3;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(105, 156, 163, 0.3);
}

.inhaber-badge .badge-text-short {
    display: none;
}

@media screen and (max-width: 768px) {
    .inhaber-badge {
        top: 92px;
        left: 12px;
        right: 12px;
        margin-left: auto;
        margin-right: auto;
        max-width: calc(100% - 24px);
        width: fit-content;
        padding: 8px 14px;
        font-size: 0.7rem;

        /* Erst sichtbar nach dem Scrollen, damit die Hero-Überschrift auf dem Handy nicht verdeckt wird */
        opacity: 0;
        pointer-events: none;
        /* "top" wird bei geöffnetem mobilem Menü per JS gesetzt, damit das Badge darunter rutscht */
        transition: opacity 0.6s ease, top 0.3s ease, background-color 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    }

    .inhaber-badge i {
        font-size: 0.95rem;
    }

    body.glow-active .inhaber-badge {
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

.sos-container {
    position: fixed;
    bottom: 30px;
    left: 20px;
    z-index: 10000;
    transition: opacity 0.6s ease;

    /* Erst sichtbar nach dem Scrollen, siehe .glow-active */
    opacity: 0;
    pointer-events: none;
}

.sos-button {
    width: 50px; 
    height: 50px;
    background-color: #d9534f; 
    color: white;
    border: none;
    border-radius: 50%; 
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    transition: transform 0.3s ease;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sos-button:hover { 
    transform: scale(1.1); 
}

/* Das aufpoppende Menü */
.sos-menu {
    background: rgba(255, 255, 255, 0.85); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    width: 360px; 
    padding: 10px 0; 
    border: 1px solid rgba(255, 255, 255, 0.4); 
    border-radius: 8px; /* Sieht etwas moderner aus */
    
    /* Positionierung: Links verankern! */
    position: absolute;
    bottom: 65px;
    left: 0;   /* <--- KORREKTUR: Öffnet sich jetzt nach rechts ins Bild hinein */
    right: auto;

    /* Sichtbarkeit & Animation */
    visibility: hidden; 
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    pointer-events: none; 
}

/* KORREKTUR: Aktiviert die Animation flüssig */
.sos-menu.show {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto; 
}

.sos-menu a {
    display: block;
    padding: 14px 20px; /* Größere Touch-Fläche für Notfälle */
    text-decoration: none;
    color: #333;
    border-bottom: 1px solid #edf4f5;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    transition: background 0.2s ease, color 0.2s ease;
}

.sos-menu a:last-child { 
    border-bottom: none; 
}

.sos-menu a:hover {
    color: #699ca3;
    background: rgba(105, 156, 163, 0.05);
}

.sos-menu .sos-hinweis {
    display: block;
    padding: 10px 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 0.8rem;
    color: #666;
    line-height: 1.3;
}

/* ==========================================================================
   MEDIA QUERY FÜR HANDYS (Smartphones)
   ========================================================================== */
@media screen and (max-width: 480px) {
    .sos-container {
        bottom: 30px;
        right: 20px; /* Minimal näher am Rand für kleine Displays */
    }

    .sos-menu {
        width: calc(100vw - 30px); /* Nutzt die volle Breite des Bildschirms minus Seitenabstand */
        max-width: 340px;          /* Verhindert, dass es auf größeren Handys zu wuchtig wird */
        bottom: 65px;
        right: 0;                  /* Richtet sich bündig am Button aus */
    }

    .sos-menu a {
        padding: 16px 20px;        /* Noch größere Klickflächen für zittrige Finger im Notfall */
        font-size: 1rem;           /* Leicht größere Schrift zur besseren Erkennung */
    }
}
/* Zwingt ausnahmslos jeden Text auf der Seite dazu, auf den Zoom-Faktor des Skripts zu reagieren */
/* Erlaubt dem Body, die Prozentwerte des Skripts nahtlos an alle Kindelemente weiterzugeben */
body {
    transition: font-size 0.2s ease;
}

/* Stellt sicher, dass Überschriften und Texte auf Handys relative Einheiten nutzen, um zoombar zu bleiben */
@media screen and (max-width: 991px) {
    .screening-card h4, 
    .screening-ablauf h4,
    .schritt {
        font-size: 1.15em !important; 
    }
    
    .screening-card p,
    .prozess-info {
        font-size: 1em !important; /* Bleibt flexibel zoombar */
    }
}
.telefon-status-container {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: rgba(244, 249, 250, 0.35); /* Leicht transparent, damit es im Hero edel aussieht */
    padding: 10px 20px;
    border-radius: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 1rem; /* Nutzt jetzt die relative Standardgröße, damit JS greifen kann */
    font-weight: 500;
    margin-top: 20px; /* Abstand nach oben zu den Buttons */
    max-width: 90%; /* Verhindert das Herausrutschen auf kleinen Bildschirmen */
    width: fit-content;
}

#status-text {
    color: #ffffff; /* Weißer Text, damit man ihn auf dem Hero-Hintergrund perfekt lesen kann! */
    line-height: 1.4;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.3s ease;
}

/* Wenn erreichbar (Grün mit leichtem Pulsieren) */
.status-dot.open {
    background-color: #2ecc71;
    box-shadow: 0 0 8px rgba(46, 204, 113, 0.6);
}

/* Wenn geschlossen (Rot) */
.status-dot.closed {
    background-color: #e74c3c;
    box-shadow: 0 0 8px rgba(231, 76, 60, 0.6);
}
/* Perfekte Anpassung für Handys und Tablets */
@media screen and (max-width: 768px) {
    .telefon-status-container {
        display: flex;             /* Ändert inline-flex zu flex für automatische Breite */
        justify-content: center;   /* Zentriert Punkt und Text auf dem Handy */
        width: 100%;               /* Nutzt den verfügbben Platz im Hero optimal aus */
        max-width: 200px;
        box-sizing: border-box;
        padding: 12px 16px;        /* Etwas mehr Touch-Abstand */
        margin: 20px auto 0 auto;  /* Zentriert den gesamten Container im Hero */
    }

    #status-text {
        font-size: 0.95rem;        /* Leicht kompaktere Basisgröße auf Handys, damit bei 150% Zoom nichts bricht */
        text-align: center;
    }
}

/* Der Button selbst in der Navbar */


/* ==========================================================================
   DER KONTRAST-MODUS (Greift, wenn body die Klasse .high-contrast hat)
   ========================================================================== */
/* ==========================================================================
   DER FIX FÜR DEN KONTRAST-MODUS (Strengere Überschreibung)
   ========================================================================== */
/* ==========================================================================
   DER ZENTRALE KONTRAST-MODUS (Radikales Gelb-Schwarz-Weiß Prinzip)
   ========================================================================== */
/* ==========================================================================
   DER KORRIGIERTE KONTRAST-MODUS (Präzise Kasten-Trennung)
   ========================================================================== */
/* ==========================================================================
   BARRIEREFREIHEIT: HOCH-KONTRAST-MODUS RULES (NUR DIESER BEREICH)
   ========================================================================== */
/* ==========================================================================
   BARRIEREFREIHEIT: KONTRAST-MODUS
   ========================================================================== */
/* ==========================================================================
   BARRIEREFREIHEIT: HOCH-KONTRAST-MODUS
   ========================================================================== */
/* ==========================================================================
   BARRIEREFREIHEIT: HOCH-KONTRAST-MODUS
   ========================================================================== */
/* ==========================================================================
   BARRIEREFREIHEIT: HOCH-KONTRAST-MODUS
   ========================================================================== */
/* --- Sektion: FAQ Akkordeon --- */
.faq-sektion {
    padding: 80px 20px;
    background-color: #ffffff;
}

.faq-text {
    max-width: 1200px;
    text-align: center;
    margin: 0 auto 40px auto;
}

.faq-text h2 {
    font-size: 2.2rem;
    color: #699ca3; /* Dein Teal-Blau */
    margin-bottom: 15px;
    font-weight: 600;
}

.faq-text p {
    color: #555;
    line-height: 1.6;
}

.faq-accordion {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background-color: #ffffff;
    border: 1px solid #eef5f6;
   
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Der klickbare Header */
.faq-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 30px;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333333;
    font-family: 'Poppins', sans-serif;
    transition: color 0.3s ease;
}
.faq-item.active .faq-content {
    /* Die Höhe wird jetzt dynamisch durch das JavaScript gesteuert */
    overflow: visible; /* WICHTIG: Erlaubt dem Text, bei Schriftvergrößerung nach unten auszuweichen */
}
.faq-header:hover {
    color: #699ca3;
}

/* Der kleine Pfeil rechts */
.faq-icon {
    font-size: 1.5rem;
    color: #699ca3;
    transition: transform 0.3s ease;
}

/* Der ausklappbare Textbereich */
.faq-content {
    max-height: 100%;
    overflow: hidden;
    transition: max-height 0.3s ease-out, padding 0.3s ease;
    padding: 0 30px;
    background-color: #ffffff;
    height: 100%;
}

/* Themen-Icons im Header, gleicher Stil wie die Akkordeons */
.faq-header span {
    display: flex;
    align-items: center;
    gap: 14px;
}

.faq-item.active .accordion-topic-icon {
    background-color: #699ca3;
    color: #ffffff;
}

.faq-content p {
    padding-bottom: 5px;
    padding-top: 5px;
    line-height: 1.7;
    color: #555;
}

/* Aktiver Zustand (wird per JavaScript gesteuert) */
.faq-item.active {
    border-color: #699ca3;
}

.faq-item.active .faq-icon {
    transform: rotate(180deg);
}
@media (max-width: 768px) {
    .faq-text h2 {
        font-size: 1.8rem; /* Etwas kleinere Überschrift auf Tablets/Handys */
    }

    .faq-header {
        padding: 18px 20px; /* Weniger Abstand im Klickbereich */
        font-size: 1rem;     /* Kompaktere Schriftgröße */
    }

    .faq-content {
        padding: 0 20px;
        height:100%;
        max-height: 100%; /* Passt das innere Padding an den Header an */
    }
}
@media (max-width: 480px) {
    .faq-header {
        gap: 15px; /* Sorgt dafür, dass der Text nicht direkt am Pfeil klebt, wenn er umbricht */
    }
    
    .faq-icon {
        font-size: 1.3rem; /* Pfeil minimal kleiner machen */
    }
}
/* Gilt für alle Akkordeon-Arten (Team, Leistungen, FAQ) */
.accordion-content, 
.leistungen-content, 
.leistung-content, 
.faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

/* Erlaubt dem Text das freie Skalieren, wenn das Element aktiv ist */
.accordion-item.active .accordion-content,
.leistungen-item.active .leistungen-content,
.leistung-item.active .leistung-content,
.faq-item.active .faq-content {
    overflow: visible; /* WICHTIG: Das bricht das "Abschneiden" auf */
}
.legal-text-container {
    max-width: 1200px; /* Hier einfach den Wert erhöhen (z. B. von 800px auf 1100px) */
    margin: 0 auto;
    line-height: 1.6;
    text-align: left;
    padding: 20px;
}

.legal-text-container h3 {
    margin-top: 30px;
    color: #1a4a5e; /* Dein primäres Dunkelblau/Grün */
}

.legal-text-container h4 {
    margin-top: 20px;
    color: #2c7a9c;
}

.placeholder-box {
    background-color: #f0f7f8;
    border-left: 4px solid #2c7a9c;
    padding: 15px;
    margin: 20px 0;
}

.last-updated {
    font-style: italic;
    color: #777;
    margin-bottom: 30px;
}
/* --- RESPONSIVE ANPASSUNGEN FÜR RECHTSTEXTE (DATENSCHUTZ/IMPRESSUM) --- */

/* Für Tablets (unter 768px Breite) */
@media (max-width: 768px) {
    .legal-text-container {
        padding: 15px; /* Etwas kompakterer Abstand auf Tablets */
    }
}

/* Für Smartphones (unter 480px Breite) */
@media (max-width: 480px) {
    .legal-text-container {
        padding: 10px; /* Verhindert, dass der Text am Displayrand klebt */
    }
    
    .legal-text-container h2 {
        font-size: 1.8rem; /* Verhindert unschöne Zeilenumbrüche bei der Hauptüberschrift */
        margin-bottom: 15px;
    }

    .legal-text-container h3 {
        font-size: 1.3rem; /* Macht Zwischenüberschriften auf dem Handy lesbarer */
        margin-top: 20px;
    }

    .placeholder-box {
        padding: 12px; /* Spart wertvollen Platz auf kleinen Bildschirmen */
        margin: 15px 0;
    }
}
/* ==========================================================================
   DOWNLOAD SECTION (SPRECHZEITEN SEITE)
   ========================================================================== */

/* ==========================================================================
   DOWNLOAD SECTION (HOMEPAGE TEAL-BLUE STYLE)
   ========================================================================== */

/* ==========================================================================
   DOWNLOAD SECTION (INDEX & SPRECHZEITEN SEITE) - ORIGINAL BRAND STYLE
   ========================================================================== */

.download-section {
    padding: 60px 0;
    background-color: #f8fcfd; /* Passt sich nahtlos an deine weißen Bereiche an */
}

.download-header {
    text-align: center;
    margin-bottom: 40px;
}

.download-header h2 {
    color: #699ca3; /* Dein exakter Brand-Farbton */
    font-size: 2rem;
    margin-bottom: 12px;
}

.download-header p {
    color: #555;
    max-width: 100%;
    margin: 0 auto;
    line-height: 1.6;
}

/* Grid-Layout (Symmetrisch zu deiner Katarakt- und Team-Struktur) */
.download-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    max-width: 1400px; /* Passt exakt zu deinem .katarakt-grid */
    margin: 0 auto;
}

/* Die interaktive Download-Karte im Look deiner Akkordeons/Katarakt-Cards */
.download-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background-color: #ffffff;
    border: 1px solid #edf4f5; /* Dein feiner Rahmen-Farbton */

    padding: 25px;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); /* Dein originaler Schatten */
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
}

/* Hover-Effekt: Nimmt deinen sanften Hintergrundton an */
.download-card:hover {
    transform: translateY(-3px);
    background-color: #f8fcfd; /* Dein sehr helles Teal-Grau */
    border-color: #699ca3; /* Rahmen wird beim Hovern vollfarbig */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Icon-Kästchen in deinem sanften Hintergrundton */
.download-icon-box {
    background-color: #f8fcfd00; /* Sehr helles Teal-Grau */
    color: #699ca3; /* Dein Brand-Farbton */
    font-size: 2.4rem;
    padding: 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background-color 0.2s, color 0.2s;
}

/* Icon invertiert sich beim Hovern für einen edlen Effekt */
.download-card:hover .download-icon-box {
    background-color: #699ca300;
    color: #ce1d1dfb;
}

.download-card-content h3 {
    color: #699ca3;
    font-size: 1.2rem;
    margin: 0 0 8px 0;
    font-weight: 600;
}

.download-card-content p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 15px 0;
}

/* Download-Badge unten rechts auf der Karte */
.download-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #f8fcfd;
    color: #699ca3;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 12px;
    border: 1px solid #edf4f5;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.download-card:hover .download-badge {
    background-color: #699ca3;
    color: #ffffff;
    border-color: #699ca3;
}

/* Mobile Anpassung */
@media (max-width: 480px) {
    .download-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 15px;
    }
}
/* ==========================================================================
   REVIEWS SLIDER (TEAL-BLUE STYLE)
   ========================================================================== */

.reviews-section {
    padding: 80px 0;
    background-color: #f8fcfd; /* Dein sehr helles Teal-Grau als ruhiger Hintergrund */
    overflow: hidden;
}

.reviews-header {
    text-align: center;
    margin-bottom: 40px;
}

.reviews-header h2 {
    color: #699ca3; /* Dein Haupt-Teal */
    font-size: 2.2rem;
    margin-bottom: 10px;
}

/* Slider Struktur */
.reviews-slider-container {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    gap: 20px;
}

.reviews-wrapper {
    overflow: hidden;
    width: 100%;

}

.reviews-track {
    display: flex;
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.reviews-track:active {
    cursor: grabbing;
}

/* Die einzelne Bewertungs-Karte */
.review-card {
    min-width: 100%;
    box-sizing: border-box;
    background: #ffffff;
    padding: 40px 50px;
    border: 1px solid #edf4f5;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    text-align: center;
  
}

/* Sterne-Bewertung */
.review-card .stars {
    color: #ffb703; /* Edles Goldgelb für die 5 Sterne */
    font-size: 1.4rem;
    margin-bottom: 20px;
}

.review-text {
    font-size: 1.15rem;
    line-height: 1.7;
    color: #555;
    font-style: italic;
    margin-bottom: 25px;
}

.review-author {
    color: #699ca3;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 5px;
}

.review-platform {
    font-size: 0.85rem;
    color: #888;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

/* Navigations-Pfeile */
.slider-btn {
    background: #ffffff;
    border: 1px solid #edf4f5;
    color: #699ca3;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
    z-index: 10;

    /* --- DIESE DREI ZEILEN LÖSEN DAS PROBLEM: --- */
    padding: 0;          /* Entfernt standardmäßige Browser-Abstände */
    box-sizing: border-box; /* Garantiert, dass Border & Padding in die 45px eingerechnet werden */
    flex-shrink: 0;      /* Verhindert, dass Flexbox den Button oval quetscht */
}

.slider-btn:hover {
    background-color: #699ca3;
    color: #ffffff;
    
}

/* Slider Dots unten */
.slider-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

.dot {
    width: 10px;
    height: 10px;
    background-color: #ccdce0;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.3s;
}

.dot.active {
    background-color: #699ca3;
    transform: scale(1.2);
}
/* ==========================================================================
   GOOGLE BEWERTUNGS-BUTTON
   ========================================================================== */

.write-review-container {
    text-align: center;
    margin-top: 35px;
    display: flex;
    justify-content: center;
}

.btn-write-review {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #ffffff;
    color: #699ca3; /* Das offizielle Google-Blau */
    border: 2px dashed #699ca3; /* Schicker, einladender Rahmen */
    padding: 12px 24px;
    font-size: 1rem;
    font-weight: 600;

    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(66, 133, 244, 0.08);
}

.btn-write-review i {
    font-size: 1.3rem;
}

/* Hover-Effekt: Der Button füllt sich vollflächig mit dem Google-Blau */
.btn-write-review:hover {
    background-color: #699ca3;
    color: #ffffff;
    border-style: solid; /* Wechselt beim Hovern zu einer durchgezogenen Linie */
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(66, 133, 244, 0.2);
}

/* Klick-Effekt */
.btn-write-review:active {
    transform: translateY(0);
}

/* Mobile Optimierung */
@media (max-width: 768px) {
    .write-review-container {
        margin-top: 25px;
        padding: 0 15px;
    }
    
    .btn-write-review {
        width: 100%; /* Mobil streckt sich der Button über die volle Breite */
        justify-content: center;
    }
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    /* Wir erlauben dem Container, die Buttons über die Karte zu legen */
    .reviews-slider-container {
        position: relative;
        gap: 0;
    }

    /* "Peek": zeigt einen Rand der nächsten Karte, damit klar wird, dass man wischen kann */
    .reviews-track {
        gap: 12px;
    }

    .review-card {
        min-width: 86%;
        padding: 35px 25px; /* Etwas weniger Innenabstand für mehr Platz */
    }
    
    .review-text {
        font-size: 1rem;
    }

    /* Pfeile ausblenden: auf dem Handy soll die Wisch-Geste allein führen (Bilder & Bewertungen) */
    .slider-btn {
        display: none !important;
    }
}
/* ==========================================================================
   MOBILE LEFT ALIGNMENT (LINKSBÜNDIGE TEXTE AUF HANDYS)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Alle Sektions-Überschriften linksbündig ausrichten */
    
    .praxis-text h2,
    .staerken-sektion h2,
   
    .faq-text h2,
    .kontakt-details h2,
    .download-header h2 {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 2. Alle beschreibenden Texte, Absätze und Einleitungen linksbündig */
   
    .ueber-uns-text p,
    .praxis-text p,
    .staerke-item p,
    .reviews-header p,
    .review-text,
    .faq-text p,
    .download-header p {
        text-align: left !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* 3. Den kleinen Zier-Trennstrich (.divider) bei den Bewertungen nach links schieben */
    

    /* 4. Die Bewertungs-Sterne in den Karten linksbündig ausrichten */
    .review-card .stars {
        text-align: left !important;
        justify-content: flex-start !important;
        display: flex !important;
    }

    /* 5. Autoren und Plattformen in den Bewertungskarten linksbündig */
    .review-author,
    .review-platform {
        text-align: left !important;
        display: block !important;
    }
}
/* ==========================================================================
   HERO ENTRY ANIMATION (FADE-IN-UP)
   ========================================================================== */

/* 1. Die Keyframes für die sanfte Bewegung nach oben und das Einblenden */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px); /* Startet 20px weiter unten */
    }
    to {
        opacity: 1;
        transform: translateY(0);    /* Endet an der Originalposition */
    }
}

/* 2. Standard-Zustand für die Hero-Inhalte vorbereiten (unsichtbar vor Start) */
.hero-content h1,
.hero-content p,
.hero-buttons,
.telefon-status-container {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* 3. "Staggering" (gestaffeltes Timing) für einen flüssigen Nacheinander-Effekt */
.hero-content h1 {
    animation-delay: 0.2s; /* Die Überschrift startet zuerst */
}

.hero-content p {
    animation-delay: 0.4s; /* Der Untertitel folgt kurz danach */
}

.hero-buttons {
    animation-delay: 0.6s; /* Die Buttons blenden als drittes ein */
}

.telefon-status-container {
    animation-delay: 0.8s; /* Der Telefon-Status schließt die Animation ab */
}