/* Schriftdefinitionen */
@font-face {
  font-family: 'Raleway';
  src: url('../../fonts/Raleway-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Raleway';
  src: url('../../fonts/Raleway-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Raleway';
  src: url('../../fonts/Raleway-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}

/* Basis-Stile für mobile Variante */
:root{
  --prxsSchulteGelb: #ffcc00;
  --prxsSchulteBlau: #004b7c;
  --yellow: var(--prxsSchulteGelb);
  --blue: var(--prxsSchulteBlau);
  --prxsSchulteRadius: 0;
}
html {
  scroll-padding-top: 130px; /* Offset fuer Sticky-Header auf Mobile */
  min-width: 350px;
}
body {
  font-family: 'Raleway', 'Raleway Light', -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight: 300;
  min-width: 350px;
  hyphens: auto;
  -webkit-hyphenate-limit-before: 3;
  -webkit-hyphenate-limit-after: 3;
  -ms-hyphenate-limit-chars: 3 3 3;
  hyphenate-limit-chars: 3 3 3;
}
@media (min-width: 350px){
  body{ overflow-x: hidden; }
}
/* Haupt-Header ueberschreiben: weisser Hintergrund */
.site-title p{ background: var(--prxsSchulteGelb); color: var(--prxsSchulteBlau); display: inline-block; padding: .15rem .5rem; margin-top: .25rem; border-radius: 0; }

/* Header mit Abstand oberhalb des Logos */
#siteHeader{
  background: #ffffff;
  /* Logo-Groessenvariablen (hoehenbasiert) */
  --logo-height: 120px;
  --logo-height-shrink: 90px;
  --logo-current-height: var(--logo-height);
  --header-extra: 2rem; /* zusaetzlicher Platz zur Logohoehe fuer min-height */
  padding-top: 0.75rem;
  padding-bottom: 0.5rem;
  transition: padding .25s ease, min-height .25s ease, background-color .25s ease;
  transform-origin: top center;
  min-height: calc(var(--logo-current-height) + var(--header-extra));
}
h1,h2,h3,h4,h5,h6 { font-family: 'Raleway', 'Raleway Regular', -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-weight: 400; }
img { max-width:100%; height:auto; }

/* Kleine Anpassungen für Buttons/Abstände */
.btn { border-radius: 0; }
.container { padding-left: 0.75rem; padding-right: 0.75rem; }

@media (min-width: 768px) {
  .container { max-width: 720px; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  /* md: Header volle Breite */
  #siteHeader .container {
    width: 100vw;
    max-width: 100vw;
  }
}


/* Sticky-Header + Shrink beim Scrollen (minimal) */
.sticky-header{
  position: sticky;
  top: 0;
  z-index: 1020;
  /* Logo-Groessenvariablen sind auf #siteHeader; min-height folgt dem Logo */
  padding: 1.25rem 0;
}

.logo-wrap{
  position: absolute;
  left: 50%;
  top: var(--logo-top, 1rem);
  transform: translateX(-50%);
  z-index: 1030;
}
.logo-wrap img{
  height: var(--logo-current-height);
  width: auto;
  max-width: 100%;
  display: block;
  transition: height .25s ease;
  object-fit: contain;
}

/* FAQ-Seite: Logo linksbuendig */
.logo-wrap-faq{
  position: relative;
  left: auto;
  top: auto;
  transform: none;
  z-index: 1030;
}
.logo-wrap-faq img{
  height: 120px;
  width: auto;
  max-width: none;
  display: block;
  transition: height .25s ease;
  object-fit: contain;
}
.img-lg{
  height: var(--logo-current-height);
  width: auto;
  max-width: none;
  display: block;
  transition: height .25s ease;
  object-fit: contain;
}

/* Unterseiten: kleinerer Header auf Mobile */
body:not(.homepage) #siteHeader{
  --logo-height: 120px;
  --header-extra: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Desktop (lg): Logo linksbuendig */
.logo-wrap-lg{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1030;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

/* Desktop-Navigation: ueber dem Logo */
#siteHeader nav.d-flex{
  z-index: 1035;
}

/* Container-Padding fuer Desktop (lg) */
@media (min-width: 992px){
  html {
    scroll-padding-top: 100px; /* kleinerer Offset fuer lg-Header */
  }
  
  .container{
    max-width: 1200px;
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* lg-Variante: nur kleine Header/Logohoehe verwenden (35% groesser) */
  #siteHeader{
    --logo-height: 150px; /* gewuenschte Desktop-Logohoehe */
    --logo-current-height: var(--logo-height);
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
    min-height: calc(var(--logo-height) + 0.1rem);
    /* Desktop-Header: Breite an Carousel-Bild anpassen */
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
  }

  /* Desktop-Header-Flex: alle Elemente an der unteren Grundlinie ausrichten */
  #siteHeader .d-lg-flex {
    align-items: flex-end !important;
  }

  /* Carousel nach unten, wenn Dropdown offen ist */
  body.dropdown-open main.container > section:first-child{
    margin-top: 3rem;
  }

  /* Navigation: Abstand zum Button gleich wie zwischen Menüeinträgen */
  #siteHeader nav.d-flex{
    right: calc(260px + 1rem) !important;
  }
}

/* Kleinere Abstände bei schmalen Desktop-Breiten, damit Navigation nicht ueberlappt */
@media (min-width: 992px) and (max-width: 1050px){
  #siteHeader nav.d-flex{
    gap: 0.5rem !important;
    right: calc(260px + 0.5rem) !important;
  }
}

/* Shrink-Verhalten: nur Mobile/Tablet */
@media (max-width: 991.98px){
  .sticky-header.shrink .logo-wrap img{
    height: var(--logo-height-shrink);
  }
  #siteHeader.sticky-header.shrink{
    --logo-current-height: var(--logo-height-shrink);
    min-height: calc(var(--logo-current-height) + var(--header-extra));
    padding-top: 1rem;
    padding-bottom: .5rem;
    --logo-top: .5rem; /* Logo im Shrink etwas nach oben */
  }
}


/* Dropdown/Menue rechts halten, vertikal zentrieren */
.dropdown{
  position: absolute;
  right: 2rem;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1100;
  background: transparent;
}
.dropdown.ms-2 {
  background: transparent;
}

/* Hamburger-Icon im Dropdown-Button (nur mobiles Menü, nicht Desktop-Termin-Button) */
.dropdown:not(.desktop-appointments-dropdown) .btn { border-radius: 0; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; box-shadow: none; padding: 0; }
.dropdown:not(.desktop-appointments-dropdown) .btn::after { display: none; }
.dropdown:not(.desktop-appointments-dropdown) .btn:focus,
.dropdown:not(.desktop-appointments-dropdown) .btn:active,
.dropdown:not(.desktop-appointments-dropdown) .btn:focus-visible,
.dropdown:not(.desktop-appointments-dropdown) .btn.show {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  -webkit-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
}
/* Desktop-Termin-Dropdown: Bootstrap-Caret ausblenden, Hintergrund/Schrift im aktiven Zustand beibehalten */
.desktop-appointments-dropdown .btn::after { display: none; }
.desktop-appointments-dropdown .btn.show,
.desktop-appointments-dropdown .btn:focus,
.desktop-appointments-dropdown .btn:active {
  background: var(--prxsSchulteBlau) !important;
  color: white !important;
}
.menu-icon-img{ width: 50px; height: 35px; display: block; }
.menu-icon-img-x{ width: 44px; height: 44px; display: block; }
.menu-icon-open{ display: inline-flex; align-items: center; justify-content: center; }
.menu-icon-close{ display: none; align-items: center; justify-content: center; }
.dropdown .btn[aria-expanded="true"] .menu-icon-open{ display: none; }
.dropdown .btn[aria-expanded="true"] .menu-icon-close{ display: inline-flex; }

/* Shrink-Status: Header und Logo schrumpfen gemeinsam */

.sticky-header.shrink .logo-wrap img{
  height: var(--logo-height-shrink);
}
.sticky-header.shrink .dropdown .btn{
  transform: none;
}

/* Header-Container beim Scrollen mit Logo schrumpfen */
#siteHeader.sticky-header.shrink{
  --logo-current-height: var(--logo-height-shrink);
  min-height: calc(var(--logo-current-height) + var(--header-extra));
  padding-top: 1rem;
  padding-bottom: .5rem;
  --logo-top: .5rem; /* Logo im Shrink etwas nach oben */
}

/* Dropdown-Button auf kleinen Screens gut lesbar */
/* bereits oben gestylt */

/* Carousel unter dem ueberlagerten Titel halten */
#homepageCarousel{
  position: relative;
  z-index: 1;
}

#homepageCarousel .carousel-item img{
  height: 640px;
  object-fit: cover;
}

/* .slideShow-text in den unteren Bereich der Carousel-Bilder legen */
.slideShow-text{
  position: absolute;
  right: 0;
  bottom: 1.5em; /* weiter nach unten verschoben */
  z-index: 1030;
  background: transparent;
  color: var(--prxsSchulteBlau);
  padding: 0.25rem 0.5rem;
  border-radius: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: calc(100% - 1rem);
}

.slideShow-text h2{
  background: rgba(220, 220, 220, 0.85);
  padding: 0.5rem 0.5rem;
  display: block;
  border-radius: 0;
  align-self: stretch;
}

.slideShow-text p{
  display: block;
}

/* Desktop: hellgrauer Hintergrund fuer slideShow-text */
@media (min-width: 992px){
  .slideShow-text{
    background: transparent; /* only h2 gets the gray background */
    padding: 1rem 11.5rem;
    right: 3rem;
    align-items: flex-end;
  }
  .slideShow-text h2{
    text-align: right;
  }
  .slideShow-text p{
    text-align: right;
  }
}

.sticky-header.shrink .slideShow-text{
  bottom: 1.25em;
}

@media (max-width: 767.98px){
  .slideShow-text{ 
    bottom: 1em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-left: 0;
  }
  .slideShow-text h2{
    font-size: 1rem;
    line-height: 1.2;
    white-space: nowrap;
    text-align: right;
    align-self: flex-end;
  }
  .slideShow-text p{
    font-size: 0.7rem;
    white-space: nowrap;
    width: 100px;
    text-align: right;
    align-self: flex-end;
  }
  .sticky-header.shrink .slideShow-text{ bottom: 0.75em; }
}

/* Absatz in slideShow-text mit dem gewuenschten Gelb hervorheben */
.slideShow-text p{
  background: var(--prxsSchulteGelb);
  color: var(--prxsSchulteBlau);
  display: block;
  padding: 0.65rem 0.5rem;
  margin-top: .25rem;
  border-radius: 0;
  line-height: 1.2;
}

/* CTA-Buttons rechts auf dem Slideshow-Overlay - mobile optimiert */
.carousel-overlay-actions{
  position: absolute;
  right: 0.5rem;
  top: 0.5rem;
  z-index: 1040;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  align-items: flex-end;
}

/* Carousel-Buttons nur auf sm/md */
@media (min-width: 992px){
  .carousel-overlay-actions{
    display: none;
  }
}

@media (max-width: 991.98px){
  .carousel-overlay-actions .btn{
    width: 100px !important;
    font-size: 0.75rem !important;
    padding: 0.1rem !important;
    gap: 0.2rem !important;
  }

  .carousel-overlay-actions .btn span{
    font-size: 0.6rem !important;
  }

  .carousel-overlay-actions .btn div{
    gap: 0.2rem !important;
  }
}

/* Dropdown action buttons auf lg: Carousel-Button-Styling */
@media (min-width: 992px){
  .dropdown-menu{
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  .dropdown-menu .dropdown-item{
    padding: 0.425rem 0.5rem !important;
    font-family: 'Merriweather', serif !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }
  .dropdown-menu .dropdown-item img{
    width: 22px !important;
    height: 22px !important;
  }
  /* termed-Icon höher */
  .dropdown-menu .dropdown-item img[src*="termed"]{
    height: 30px !important;
    width: auto !important;
  }
  /* Termin buchen: weniger Innenabstand oben/unten */
  .desktop-appointments-dropdown .dropdown-menu > li:first-child > .dropdown-item{
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
  }
  .desktop-appointments-dropdown .dropdown-menu > li:first-child > .dropdown-item > div{
    margin-top: 0 !important;
  }
  .desktop-appointments-dropdown .dropdown-menu > li:first-child > .dropdown-item img{
    margin-top: 0 !important;
  }
  .desktop-appointments-dropdown .dropdown-menu > li:first-child > .dropdown-item > div{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    /* Impfen-Icon kleiner */
  .dropdown-menu .dropdown-item img[src*="Impfen"]{
    width: 18px !important;
    height: 18px !important;
  }
  .dropdown-menu .dropdown-item span{
    font-size: 0.6rem !important;
    font-weight: 500 !important;
  }
  .desktop-appointments-dropdown .dropdown-menu > li:nth-child(2) > .dropdown-item{
    align-items: flex-start !important;
    text-align: left !important;
  }
  .desktop-appointments-dropdown .dropdown-menu > li:nth-child(2) > .dropdown-item > span{
    align-self: flex-start !important;
    text-align: left !important;
    display: block !important;
  }
  /* Inner flex container für Icon + Text nebeneinander */
  .dropdown-menu .dropdown-item > .d-flex{
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.25rem !important;
  }

  /* Impftermin und Rezepte: Icon links, Text rechts */
  .desktop-appointments-dropdown .dropdown-menu > li:nth-child(3) > .dropdown-item,
  .desktop-appointments-dropdown .dropdown-menu > li:nth-child(4) > .dropdown-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 0.5rem !important;
  }

  /* Dropdown-Breite an Termin-Button auf Desktop anpassen */
  .desktop-appointments-dropdown .dropdown-menu{
    min-width: 100%;
    width: 100%;
  }
  .desktop-appointments-dropdown .dropdown-toggle{
    width: 100%;
    padding-top: 0.3rem !important;
    padding-bottom: 0.3rem !important;
    line-height: 1.15;
    transform: translateY(-0.8rem);
    font-family: 'Merriweather', serif;
  }
}

/* Abstand unter dem Carousel reduzieren */
body.homepage main.container > section:first-child{ margin-bottom: 0.5rem !important; }

/* Carousel: volle Viewport-Breite auf sm */
@media (max-width: 767.98px){
  body.homepage main.container > section:first-child{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
  }
  body.homepage main.container > section:first-child #homepageCarousel{
    width: 100%;
  }

  /* Sprechzeiten: volle Viewport-Breite auf sm */
  body.homepage #sprechzeiten{
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }

  /* Termin CTA Band: volle Viewport-Breite auf sm */
  body.homepage #termin-cta{
    width: 100vw;
    margin-left: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
  }
}

/* Intro-Text unter dem Carousel */
.intro-text{ margin: 1.5rem 6em; text-align: justify; color: var(--prxsSchulteBlau); }
.intro-text p{ margin: 0; line-height: 1.5; }

@media (max-width: 767.98px){
  .intro-text{ margin: 1rem 1.5rem; font-size: 0.9rem; }
}

/* Aktionsboxen unter dem Intro */
.action-boxes{ margin: .75rem 6em; display:block; font-family: 'Merriweather', serif; }
.action{ display:flex; align-items:center; gap:.75rem; text-align:left; padding:.75rem; border-radius:0; font-weight:600; text-decoration:none; color: inherit; }
.action:focus-visible{ outline: 2px solid currentColor; outline-offset: 2px; }
.action-appointment{ background:var(--prxsSchulteGelb); color:var(--prxsSchulteBlau); }
.action-prescription{ background:var(--prxsSchulteBlau); color:#ffffff; }
.action .call-number{ font-weight: 700; white-space: nowrap; }

.action-icon{ width: 28px; height: 28px; flex: 0 0 auto; }

@media (max-width: 767.98px){
  .action-boxes{ margin: .5rem .75rem; }
}

/* Leistungen-Section: weisser Hintergrund, zentrierter Inhalt, Icon-Placeholder */
.leistungen-section{ background: #ffffff; padding: 2.5rem 1rem; }
.leistungen-section .icon-placeholder{ width:72px; height:72px; margin: 0 auto .5rem; border-radius:0; border:none; background:#fff; box-shadow: none; display: block; object-fit: contain; }
.leistungen-section .icon-placeholder img{ width:72px; height:72px; display:block; margin: 0 auto; }
.leistungen-title{ color:var(--prxsSchulteBlau); font-size:2.25rem; font-weight:600; margin: .5rem 0; text-transform:none; }
.leistungen-sub{ color:var(--prxsSchulteBlau); font-size:1.25rem; font-weight:500; margin-bottom:1rem; }
h3.leistungen-title{ font-size:1.75rem; }
.leistungen-content{ max-width:720px; margin:0 auto; color:var(--prxsSchulteBlau); text-align:left; }
.leistungen-content p{ margin-bottom:1rem; line-height:1.6; }
.lehrpraxis-content{ color:var(--prxsSchulteBlau); text-align:left; }
.lehrpraxis-content p{ margin-bottom:1rem; line-height:1.6; }

/* FAQ-CTA-Bereich */
.faq-cta{ background:#ffffff; padding:2.5rem 1rem; }
.faq-cta-inner{ max-width:720px; margin:0 auto; text-align:center; color:var(--prxsSchulteBlau); }
.faq-cta-icon{ width:48px; height:48px; margin:0 auto .5rem; display:block; object-fit:contain; }
.faq-cta-title{ color:var(--prxsSchulteBlau); font-size:1.5rem; font-weight:700; margin:.5rem 0; text-transform:none; }
h3.faq-cta-title{ font-size:1.25rem; }
.faq-cta-text{ margin:0 0 1rem; font-size:1.05rem; line-height:1.5; }
.faq-cta-button{
  background: var(--prxsSchulteBlau);
  color: #ffffff;
  font-weight: 700;
  padding: .5rem 1.25rem;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 1100px;
  margin: 1.5rem auto 0 auto;
}

.service-card {
  padding: 1rem;
  border-radius: 0;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-height: 220px;
  align-items: center;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.service-card h4 {
  margin: 0;
  font-size: 0.85rem;
  word-wrap: break-word;
  hyphens: auto;
}

.service-card p {
  margin: 0.25rem 0 0.75rem 0;
  color: rgba(255,255,255,0.95);
  flex: 1 1 auto;
  font-size: 0.75rem;
  line-height: 1.4;
  word-wrap: break-word;
  hyphens: auto;
}

.service-card .service-icon {
  width: 56px;
  height: 56px;
  border-radius: 0;
  background: transparent;
  border: none;
  object-fit: contain;
}

.service-card.yellow .service-icon {
  background: var(--prxsSchulteGelb);
  padding: 0.5rem;
  box-sizing: border-box;
}

.service-card.blue { background: var(--blue); }
.service-card.yellow { background: var(--yellow); color: var(--prxsSchulteBlau); }

.service-card.yellow h4 { color: var(--prxsSchulteBlau); }
.service-card.yellow p { color: var(--prxsSchulteBlau); }

.service-card.yellow .service-icon {   background: var(--prxsSchulteGelb);
 border-color: rgba(0,75,124,0.2); }

.service-card a.btn {
  align-self: start;
  padding: 0.35rem 0.6rem;
  font-size: 0.85rem;
  background: #ffffff;
  color: var(--prxsSchulteBlau);
  border-radius: 0;
  text-decoration: none;
  font-weight: 700;
}

/* Team-Section-Stile */
.team-section{ background:#ffffff; padding:2.5rem 1rem; }
.team-icon{ width:72px; height:72px; margin:0 auto .5rem; display:block; object-fit: contain; }
.team-title{ color:var(--prxsSchulteBlau); font-size:2.25rem; font-weight:600; margin:.5rem 0 1.5rem; }
h3.team-title{ font-size:1.75rem; }
.team-list{ display:flex; flex-direction:column; gap:2rem; max-width:1100px; margin:0 auto; }
.team-item{ display:grid; grid-template-columns: 1fr 1fr; align-items:center; gap:1.25rem; }
.team-item.reverse .team-photo{ order:2; }
.team-item.reverse .team-info{ order:1; }
.team-item.reverse .team-info{ text-align: right; }

/* Desktop (lg): 3-Spalten-Grid, Foto ueber Text */
@media (min-width: 992px){
  .team-list{ 
    display: grid; 
    grid-template-columns: repeat(6, 1fr); 
    gap: 2rem; 
  }
  .team-item{ 
    display: flex; 
    flex-direction: column; 
    align-items: center;
    gap: 1rem;
    grid-column: span 2;
  }
  .team-item.reverse .team-photo{ order: unset; }
  .team-item.reverse .team-info{ order: unset; }
  .team-photo{ 
    width: 100%; 
    order: unset;
  }
  .team-info{
    text-align: center;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1 1 auto;
  }
  .team-info .btn{ margin-top: auto; }
  .team-item.reverse .team-info{ text-align: center; }
  /* Letzte 2 Items zentrieren: jeweils eine halbe Spalte Abstand */
  .team-list .team-item:nth-child(7) {
    grid-column: 2 / 4;
  }
  .team-list .team-item:nth-child(8) {
    grid-column: 4 / 6;
  }
}
.team-photo{ justify-self:center; width:100%; display:flex; justify-content:center; }
.team-photo img{ width:100%; height:auto; }
.team-photo.modal-trigger{ cursor: pointer; }
.team-img{ margin:1em auto; width:100%; max-width:360px; display:block; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 50% / 50%; box-shadow:0 3px 10px rgba(0,0,0,0.08); }
.team-info h3{ color:var(--prxsSchulteBlau); font-size:1.5rem; font-weight:700; margin:0 0 .25rem; text-transform:none; }
.team-info p{ color:var(--prxsSchulteBlau); margin:0 0 .25rem; }
.team-info .btn{ margin-top:.5rem; border-radius: 0; }

/* Team Header Bild: volle Breite nur auf Mobile */
.team-header-image{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: 0;
  margin-bottom: 2rem;
  padding: 0;
}
.team-header-image img{
  width: 100%;
  height: auto;
  display: block;
}

/* Mobile-first: Desktop/groessere Screens bekommen breitere Layouts */
@media (min-width: 769px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .overlay-btn{ font-size: 0.9rem; padding: .5rem .75rem; gap: .5rem; }
  .overlay-btn .overlay-icon{ width: 24px; height: 24px; }
  .overlay-btn .badge{ font-size: 0.75rem; }
  .carousel-overlay-actions{ right: 1rem; top: 1rem; gap: .75rem; }
  .service-card h4 { font-size: 1.1rem; }
  .service-card p { font-size: 0.95rem; }
}

/* sm: eine Karte pro Zeile und Farben alternierend ohne Icon/Background zu trennen */
@media (max-width: 767.98px){
  .services-grid{ grid-template-columns: 1fr; }
  .services-grid .service-card:nth-child(1){ order: 1; }
  .services-grid .service-card:nth-child(2){ order: 2; }
  .services-grid .service-card:nth-child(4){ order: 3; }
  .services-grid .service-card:nth-child(3){ order: 4; }
  .services-grid .service-card:nth-child(5){ order: 5; }
  .services-grid .service-card:nth-child(6){ order: 6; }
  .service-card h4 { font-size: 1rem; }
  .service-card p { font-size: 0.9rem; }
}

/* lg-Variante: 3 Spalten fuer Leistungen */
@media (min-width: 992px) {
  .services-grid { 
    display: grid;
    grid-template-columns: repeat(3, 1fr); 
  }
  /* Explizite Positionierung für alle Karten */
  .services-grid .service-card:nth-child(1) { grid-row: 1; grid-column: 1; }
  .services-grid .service-card:nth-child(2) { grid-row: 1; grid-column: 2; }
  .services-grid .service-card:nth-child(3) { grid-row: 2; grid-column: 1; } /* Reisemedizin nach unten */
  .services-grid .service-card:nth-child(4) { grid-row: 1; grid-column: 3; } /* Pflegeheim nach oben */
  .services-grid .service-card:nth-child(5) { grid-row: 2; grid-column: 2; }
  .services-grid .service-card:nth-child(6) { grid-row: 2; grid-column: 3; }
}

/* CTA-Band zwischen Team und Leistungen */
#termin-cta .cta-info-band{
  background: var(--prxsSchulteBlau);
  color: #fff;
  padding: 2rem 1rem;
  border-radius: 0;
  text-align: center;
  font-family: 'Merriweather', serif;
}
#termin-cta .cta-info-band p{ max-width: 900px; margin: 0 auto 1rem; font-size: 1.1rem; line-height: 1.5; font-family: 'Raleway', sans-serif; }
#termin-cta .cta-button{
  background: var(--prxsSchulteGelb);
  color: var(--prxsSchulteBlau);
  font-weight: 700;
  padding: .6rem 1.25rem;
  border-radius: 0;
}

/* lg: CTA neben Sprechzeiten; Intro-Aktionsboxen ausblenden */
@media (min-width: 992px){
  /* die 2 Intro-Aktionsboxen auf Desktop ausblenden */
  .action-boxes{ display: none; }
}
/* Modal-Stile fuer Detail-Popup */
.detail-modal .modal-header {
  background-color: var(--prxsSchulteBlau);
  color: white;
}

.detail-modal .modal-body {
  color: var(--prxsSchulteBlau);
}

.detail-modal .modal-body h5 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.detail-modal .modal-body ul {
  margin-left: 1.5rem;
}

.detail-modal .modal-body li {
  margin-bottom: 0.25rem;
}

/* Aktuelles-Popup-Stile */
#modal-aktuelles .modal-content{
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#modal-aktuelles .modal-dialog{
  max-width: 520px;
}

#modal-aktuelles .modal-header{
  padding: 0.4rem 0.75rem;
}

#modal-aktuelles .modal-title{
  font-size: 0.95rem;
}

#modal-aktuelles .modal-body{
  padding: 0.85rem 0.9rem;
}

#modal-aktuelles .modal-header{
  background: #ffffff;
  color: var(--prxsSchulteBlau);
  border-bottom: 3px solid var(--prxsSchulteGelb);
}

#modal-aktuelles .modal-body{
  color: var(--prxsSchulteBlau);
}

#modal-aktuelles .modal-footer{
  border-top: 1px solid rgba(0, 75, 124, 0.15);
}

@media (max-width: 575.98px){
  #modal-aktuelles .modal-dialog{
    max-width: 92%;
    margin: 0.75rem auto;
  }
}

@media (max-width: 991.98px){
  .leistungen-title{ font-size:1.6rem; }
  .leistungen-sub{ font-size:1rem; }
  #homepageCarousel{
    max-height: 640px;
    overflow: hidden;
  }
  #homepageCarousel .carousel-item img{
    height: auto;
    width: 100%;
    object-fit: unset;
    object-position: center top;
  }
}

/* Scroll-Anker für Sprechzeiten (weil display:contents die Box entfernt) */
#sprechzeiten-anchor{ scroll-margin-top: 8rem; }

/* Sprechzeiten: zentrierte Section mit gelber Box und linksbuendigem Inhalt */
#sprechzeiten{ max-width: 720px; margin: 0 auto; padding: 1.5rem 1rem; }
#sprechzeiten .icon-placeholder{ width: auto; height:72px; margin: 0 auto .5rem; border-radius:0; border:none; background:transparent; box-shadow: none; }
#sprechzeiten .sprechzeiten-box{
  background: var(--prxsSchulteGelb);
  color: var(--prxsSchulteBlau);
  padding: 1.5rem 2rem;
  border-radius: 0;
  text-align: left;
}

/* Intro-Absatz-Styling in der gelben Box */
#sprechzeiten .sprechzeiten-box p{
  margin: 0 0 1.25rem 0;
  font-size: 1.05rem;
  line-height: 1.4;
  padding-left: 0.5rem;
}

/* Liste: linksbuendiger Block, Label-Spalte fix, Zeiten folgen */
#sprechzeiten .sprechzeiten-box ul{
  margin: 0;
  padding: 0 0 0 2rem;
}
#sprechzeiten .sprechzeiten-box li{
  list-style: none;
  display: flex;
  align-items: baseline;
  font-size: 1.375rem;
  padding: .25rem 0;
}
#sprechzeiten .sprechzeiten-box li .label{
  text-transform: lowercase;
  min-width: 15ch;
  flex-shrink: 0;
}
#sprechzeiten .sprechzeiten-box li .time{
  text-align: left;
}
#sprechzeiten .sprechzeiten-box li::marker{ display:none; }

/* kleinere Screens: Groessen reduzieren und Liste volle Breite */
@media (max-width: 767.98px){
  #sprechzeiten .sprechzeiten-box{ padding: 1rem 0.75rem; }
  #sprechzeiten .sprechzeiten-box p{ font-size: 1rem; padding-left: 0.75rem; }
  #sprechzeiten .sprechzeiten-box ul{ padding-left: 2.25rem; }
  #sprechzeiten .sprechzeiten-box li{ font-size: 1.05rem; }
}

/* Anfahrt-Section-Stile */
.anfahrt-section {
  max-width: 960px;
  margin: 0 auto 2rem;
  padding: 1.5rem 0;
}
.anfahrt-section::before{
  content: "";
  display: block;
  height: 5px;
  background: var(--prxsSchulteGelb);
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 1.5rem;
}

.anfahrt-section .section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  justify-content: center;
}

.anfahrt-section .section-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.anfahrt-section .section-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--prxsSchulteBlau);
  margin: 0;
  text-align: center;
}
.anfahrt-section h3.section-title{ font-size: 1.25rem; }

.anfahrt-intro {
  text-align: center;
  color: var(--prxsSchulteBlau);
  margin-bottom: 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}

.anfahrt-link {
  color: var(--prxsSchulteBlau);
  text-decoration: underline;
  font-weight: 600;
}

.anfahrt-link:hover {
  color: var(--prxsSchulteGelb);
}

.anfahrt-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

.anfahrt-text {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: #333;
}

.anfahrt-text p {
  margin: 0;
}

.anfahrt-map {
  width: 100%;
  border-radius: 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* md: Nebeneinander-Layout */
@media (min-width: 769px) and (max-width: 991.98px) {
  .anfahrt-section .section-header {
    margin-bottom: 2rem;
  }

  .anfahrt-content {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: stretch;
  }

  .anfahrt-text {
    font-size: 0.95rem;
  }

  .anfahrt-text .accordion-body {
    padding-bottom: 3rem; /* +2 Zeilen */
  }

  .anfahrt-map {
    height: 100%;
  }

  .anfahrt-map iframe {
    height: 100%;
    min-height: 300px;
  }
}

/* lg: Desktop-Layout */
@media (min-width: 992px) {
  .anfahrt-section .section-header {
    margin-bottom: 2rem;
  }

  .anfahrt-content {
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: stretch;
  }

  .anfahrt-text {
    font-size: 0.95rem;
  }

  .anfahrt-text .accordion-body {
    padding-bottom: 4.5rem; /* +3 Zeilen */
  }

  .anfahrt-map {
    height: 100%;
  }

  .anfahrt-map iframe {
    height: 100%;
    min-height: 350px;
  }
}

/* Footer-Stile passend zum Screenshot */
.site-footer{
  background: var(--prxsSchulteBlau);
  color: #fff;
  padding: 2rem 1rem;
}
.site-footer .footer-content{ text-align:center; }
.site-footer .footer-line{ margin: .25rem 0; font-weight: 600; }
.site-footer .footer-whatsapp{ display:flex; align-items:center; justify-content:center; gap:.5rem; margin:.5rem 0 1rem; }
.site-footer .whatsapp-icon{ width:28px; height:28px; }
.site-footer .footer-links{ margin: .5rem 0 0; }
.site-footer .footer-link{ color:#fff; text-decoration:none; }
.site-footer .footer-link:hover{ text-decoration:underline; }
.site-footer .sep{ margin: 0 .35rem; color: rgba(255,255,255,0.75); }

/* Index-spezifische Styles - mit Zwei-Spalten-Grid-Layout */
/* lg: CTA next to Sprechzeiten; hide intro action boxes */
@media (min-width: 992px){
  /* hide the 2 intro action boxes on desktop */
  body.homepage .action-boxes{ display: none; }

  /* Hauptinhalt als Zwei-Spalten-Grid mit dichter Fuellung - NUR FÜR HOMEPAGE */
  body.homepage main.container{
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
    row-gap: 2.5rem;
    align-items: stretch;
    grid-auto-flow: row dense;
  }

  /* Standard: Sections gehen ueber volle Breite */
  body.homepage main.container > section{ grid-column: 1 / -1; }

  /* Scroll-Anker: volle Breite, keine Höhe, kein Gap */
  body.homepage #sprechzeiten-anchor{ grid-column: 1 / -1; height: 0; margin: 0 0 -2.5rem 0; padding: 0; line-height: 0; font-size: 0; }

  /* Sprechzeiten-Section splitten: Ueberschrift (volle Breite) + Box (links) */
  body.homepage #sprechzeiten{ 
    display: contents;
    width: auto;
    max-width: 720px;
    margin-left: 0;
    margin-right: auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  body.homepage #sprechzeiten .text-center{ grid-column: 1 / -1; margin-bottom: 0; }
  body.homepage #sprechzeiten .sprechzeiten-box{ grid-column: 1 / 2; width: 100%; display: flex; flex-direction: column; margin-bottom: 0 !important; }

  /* CTA-Band in die Luecke rechts von Sprechzeiten schieben */
  body.homepage #termin-cta{ grid-column: 2 / 3; align-self: stretch; margin-bottom: 0 !important; padding: 0; }
  body.homepage #termin-cta .cta-info-band{ height: 100%; display: flex; flex-direction: column; justify-content: center; }
}

/* ========== FAQ-spezifische Styles ========== */
/* FAQ-Section */
#faq .faq-title {
  font-size: 1.3rem;
  font-family: 'Raleway', sans-serif;
  margin: 0;
}
#faq .faq-subtitle {
  font-size: 1rem;
  font-family: 'Raleway', sans-serif;
  margin: 0;
}

.faq-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 0.5rem 0.5rem;
  width: 110px;
  font-size: 0.8rem;
  border-radius: 0;
  margin-bottom: 0.5rem;
}
.faq-action-label {
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 0.1rem;
}
.faq-action-icon {
  width: 22px;
  height: 22px;
  margin-bottom: 0.1rem;
}
.faq-action-sub {
  font-size: 0.7rem;
  font-weight: 400;
}

@media (max-width: 767.98px) {
  #faq .faq-title { font-size: 1.05rem; }
  #faq .faq-subtitle { font-size: 0.85rem; }
  .faq-action-btn { width: 90px; font-size: 0.7rem; padding: 0.35rem 0.25rem; }
  .faq-action-label { font-size: 0.75rem; }
  .faq-action-icon { width: 18px; height: 118px; }
  .faq-action-sub { font-size: 0.6rem; }
}

/* Zusätzliche Verkleinerung für sehr schmale Displays unter 420px */
@media (max-width: 420px) {
  .faq-title { font-size: 1.65rem; }
  .faq-subtitle { font-size: 1.4rem; }
}

#faq{ padding: 2rem 0; }
.faq-section .text-center{ margin-bottom: 2rem; }
.faq-icon-placeholder{ width: 72px; height: 72px; margin: 0 auto 1rem; display: flex; align-items: center; justify-content: center; }
.faq-icon-placeholder img { width: 72px; height: 72px; object-fit: contain; }