/* Zahnarztpraxis Seever – Mobile Optimierung
   Nach css/style.css und den weiteren Theme-Stylesheets einbinden. */
@media (max-width: 767.98px) {
  html { overflow-x: hidden; }
  body { overflow-x: hidden; font-size: 15px; line-height: 1.65; }
  .page-content { overflow: hidden; }
  .page-content .section { margin-top: 0; }
  .page-content .section:not(:first-child) { padding-top: 38px; padding-bottom: 38px; }
  .page-content .container, .page-content .container-fluid { padding-left: 22px; padding-right: 22px; }
  .page-content .row { margin-left: -10px; margin-right: -10px; }
  .page-content .row > [class*="col-"] { padding-left: 10px; padding-right: 10px; }

  .page-content h1, .page-content .h1, .page-content h2, .page-content .h2 { font-size: clamp(25px, 7vw, 32px); line-height: 1.18; letter-spacing: -.025em; }
  .page-content h3 { font-size: 21px; line-height: 1.3; }
  .page-content p { font-size: 15px; line-height: 1.72; margin-bottom: 15px; }
  .page-content .title-wrap-alt, .page-content .title-wrap, .page-content .h-sub-lined,
  .page-content .white-col-inside, .page-content .banner-contact-us,
  .page-content .banner-call { text-align: center; }
  .page-content .h-sub-lined { margin-bottom: 12px; }
  .page-content .title-wrap-alt { margin-bottom: 18px; }
  .page-content .title-wrap-alt h2 { margin-bottom: 12px; }
  .page-content .btn-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }

  /* Startseite: Begrüßung und Download-Karte */
  .section-top-padding { padding-top: 35px !important; }
  .section-top-padding .col-md-6:first-child { text-align: center; }
  .section-top-padding .signature { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 22px auto 16px; }
  .section-top-padding .signature-img img { max-width: 115px; height: auto; }
  .section-top-padding .img-with-bg { margin-top: 26px; }
  .section-top-padding .img-with-bg > img:not(.img-bg) { display: block; width: 100%; height: auto; object-fit: contain; }
  .section-top-padding .img-with-bg .img-bg { display: none; }
  .section-top-padding .over-image-card { position: relative !important; inset: auto !important; transform: none !important; width: 100%; max-width: none; margin: 0 auto; padding: 20px 18px; text-align: center; }
  .section-top-padding .over-image-card-icon { margin: 0 auto 10px; }
  .section-top-padding .over-image-card h4 { font-size: 17px; }
  .section-top-padding .over-image-card p { margin-bottom: 13px; }

  /* Leistungs-Slider: Bilder proportional und mit ruhigerem Rand */
  .bg-dotted .container-fluid { padding-left: 18px; padding-right: 18px; }
  .bg-dotted .double-title { margin-bottom: 24px; }
  .bg-dotted img { max-width: 100%; height: auto; }
  .bg-dotted .slick-slide img { width: 100%; height: auto; object-fit: contain; }

  /* Fortbildung: Text mittig, Bild und Hinweis ohne Überlagerung */
  .white-col-wrap .white-col { padding-top: 36px; padding-bottom: 24px; }
  .white-col-wrap .white-col-inside { padding: 0 22px; }
  .image-right-fullheight-col { padding: 0 !important; }
  .image-right-fullheight { height: auto !important; min-height: 0 !important; }
  .image-right-fullheight img { display: block; width: 100%; height: auto !important; max-height: none !important; object-fit: contain; }
  .image-right-fullheight-col .over-image-card { position: relative !important; inset: auto !important; transform: none !important; width: 100%; margin: 0; padding: 19px 22px; text-align: center; }
  .image-right-fullheight-col .over-image-card h4 { font-size: 16px; line-height: 1.45; }
  .image-right-fullheight .image-corner { display: none; }

  /* Team-Teaser: Text vor Bild, keine Bild-Verzerrung */
  #contactSection { padding-top: 38px !important; padding-bottom: 0 !important; }
  #contactSection .banner-contact-us { background-size: cover; background-position: center; }
  #contactSection .banner-contact-us .container { padding-left: 22px; padding-right: 22px; }
  #contactSection .banner-contact-us .pt-2 { padding-top: 0 !important; }
  #contactSection .banner-contact-us h2 { font-size: clamp(25px, 7vw, 32px); line-height: 1.2; }
  #contactSection .banner-contact-us h2 br { display: none; }
  #contactSection .banner-contact-us .shift-left { display: block; width: auto; max-width: 90%; max-height: 360px; height: auto; object-fit: contain; margin: 22px auto 0; transform: none !important; }
  #contactSection .banner-contact-us .col-sm-6 { justify-content: center; }

  /* Engagement */
  .section.bg-grey .row.align-items-center > [class*="col-"] { text-align: center !important; }
  .section.bg-grey .row.align-items-center img { display: block; width: 100%; height: auto; object-fit: contain; margin: 0 auto 22px; }
  .section.bg-grey .row.align-items-center .title-wrap-alt { margin-top: 8px; }

  /* Kontakt-Teaser */
  .banner-call { padding: 0; }
  .banner-call .row > [class*="col-"] { padding-left: 0; padding-right: 0; }
  .banner-call .px-15 { padding: 0 20px !important; }
  .banner-call .banner-call-text { margin-top: 20px; }
  .banner-call .banner-call-phone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
  .banner-call img.shift-right-2 { display: block; width: 100%; height: auto !important; max-height: none; object-fit: contain; transform: none !important; margin: 24px auto 0; }

  /* Allgemein: keine gestreckten redaktionellen Bilder */
  .page-content img { max-width: 100%; }
  .page-content .breadcrumbs { text-align: center; }
}

@media (max-width: 420px) {
  .page-content .container { padding-left: 19px; padding-right: 19px; }
  .page-content .section:not(:first-child) { padding-top: 32px; padding-bottom: 32px; }
  .page-content h1, .page-content .h1, .page-content h2, .page-content .h2 { font-size: 26px; }
  .page-content .white-col-wrap .white-col-inside { padding-left: 19px; padding-right: 19px; }
}

/* Ergänzungen 28.10.2026: einheitliche mobile Ausrichtung */
@media (max-width: 767.98px) {
  /* Fließtext auf Praxis-, Leistungs- und Kontaktseiten */
  .page-content .section.page-content-first p,
  .page-content .section.page-content-first .col-lg-6,
  .page-content .section.page-content-first .col-md-6,
  .page-content .section .max-670,
  .page-content .section .max-670 p,
  .page-content .section .title-wrap-alt ~ p,
  .page-content .section .row.align-items-center p,
  .seever-contact,
  .seever-contact p { text-align: center !important; }
  .page-content .section .max-670 { padding: 0 22px !important; }
  .page-content .section .max-670 .row.pl-15 { margin: 0 !important; padding: 0 !important; justify-content: center; }
  .page-content .section .max-670 .row.pl-15 > p { width: 100%; }
  .page-content .section .h-decor { margin-left: auto !important; margin-right: auto !important; }
  .page-content .section.page-content-first .col-lg-6 > img { display: block; height: auto; object-fit: cover; margin: 0 auto 24px; }

  /* Team: statt eines mobilen Sliders feste, gleichmäßige Kacheln */
  .page-content .js-icn-carousel.icn-carousel { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 !important; padding: 8px 0 26px !important; text-align: center !important; }
  .page-content .js-icn-carousel.icn-carousel > .col-md,
  .page-content .js-icn-carousel.icn-carousel .slick-slide:not(.slick-cloned) { width: auto !important; max-width: none !important; padding: 0 !important; float: none !important; }
  .page-content .js-icn-carousel.icn-carousel .slick-list { overflow: visible !important; grid-column: 1 / -1; }
  .page-content .js-icn-carousel.icn-carousel .slick-track { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; width: 100% !important; transform: none !important; }
  .page-content .js-icn-carousel.icn-carousel .slick-cloned, .page-content .js-icn-carousel.icn-carousel .slick-dots, .page-content .js-icn-carousel.icn-carousel .slick-arrow { display: none !important; }
  .page-content .js-icn-carousel.icn-carousel .icn-text { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 132px; margin: 0; padding: 18px 12px; border: 1px solid #e8ebdf; background: #fff; box-shadow: 0 4px 16px rgba(30,45,10,.04); text-align: center !important; }
  .page-content .js-icn-carousel.icn-carousel .icn-text > div { width: 100%; }
  .page-content .js-icn-carousel.icn-carousel .icn-text-title { margin: 0 0 7px; font-size: 15px; line-height: 1.35; text-align: center !important; }
  .page-content .js-icn-carousel.icn-carousel .icn-text p { margin: 0; font-size: 13px; line-height: 1.5; text-align: center !important; }
  .page-content .js-icn-carousel.icn-carousel .icn-text-simple { margin-bottom: 13px; }
  .page-content .js-icn-carousel.icn-carousel .icn-text-simple img { display: block; max-width: 100%; width: 100%; height: auto; max-height: 280px; object-fit: contain; margin: 0 auto; }
  /* Erste Team-Reihe mit Zahnarzt über beide Spalten */
  .page-content .js-icn-carousel.icn-carousel:has(.icn-text-simple) { grid-template-columns: 1fr; max-width: 340px; margin: 0 auto !important; }
  .page-content .js-icn-carousel.icn-carousel:has(.icn-text-simple) .slick-track { grid-template-columns: 1fr; }

  /* Kontakt: Karten, Öffnungszeiten, Infoboxen und Texte mittig */
  .seever-contact .seever-contact-card { text-align: center !important; padding: 24px 18px; }
  .seever-contact .seever-contact-card > i { display: block; margin: 0 auto 14px; }
  .seever-contact .seever-contact-card h2 { font-size: 22px; }
  .seever-contact .seever-contact-hours { width: 100%; }
  .seever-contact .seever-contact-hours th, .seever-contact .seever-contact-hours td { text-align: center !important; vertical-align: middle; }
  .seever-contact .seever-contact-map-note { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center !important; padding: 22px 16px; }
  .seever-contact .seever-contact-map-note > i { margin: 0 auto; }
  .seever-contact .seever-contact-map-note div { text-align: center !important; }
  .seever-contact .seever-contact-privacy { margin-top: 20px; }

  /* Footer: Logo mittig und kleinere, gleichmäßige Abstände */
  .footer .footer-col1, .footer .footer-col1 .row, .footer .footer-col1 .col-md { text-align: center !important; }
  .footer .footer-logo { width: min(230px, 70%) !important; margin: 18px auto 28px !important; text-align: center !important; }
  .footer .footer-logo img { display: block; max-width: 100%; width: 100%; height: auto; margin: 0 auto; }
  .footer .footer-col1 .footer-social { justify-content: center; text-align: center; }
  .footer .footer-col1 .footer-social a { display: inline-flex; }
  .footer .footer-bottom { text-align: center; }
}
@media (max-width: 359.98px) {
  .page-content .js-icn-carousel.icn-carousel .slick-track,
  .page-content .js-icn-carousel.icn-carousel { grid-template-columns: 1fr; }
}

/* Startseite: Slider ohne Text; Headerlogo mobil sichtbar und zentriert */
@media (max-width: 767.98px) {
  #mainSlider .slide-content { display: none !important; }

  .header .header-content .container > .row {
    position: relative;
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Die Bootstrap-Logo-Spalte darf nicht ausgeblendet oder zusammengedrückt werden. */
  .header .header-content .col-lg-auto.col-lg-2 {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    flex: 0 0 auto !important;
    width: min(220px, 58vw) !important;
    max-width: min(220px, 58vw) !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    z-index: 2;
  }
  .header .header-content a.header-logo {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 auto !important;
  }
  .header .header-content a.header-logo img {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 68px;
    object-fit: contain;
  }
  .header .header-content .navbar-toggler {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    margin: 0;
  }
  .header .header-content .header-nav-wrap { position: static; }
  .header .header-content .navbar-collapse {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 5;
    background: #fff;
  }
}

/* Fix: aufgeklapptes Mobilmenü liegt vor Header und Seiteninhalt */
@media (max-width: 767.98px) {
  .header { position: relative; z-index: 1000; overflow: visible !important; }
  .header .header-content,
  .header .header-content .container,
  .header .header-content .row,
  .header .header-nav-wrap,
  .header .header-nav,
  .header .header-nav .navbar { overflow: visible !important; }
  .header .header-content { z-index: 1001; }
  .header .header-nav .navbar { position: static !important; }
  .header .header-content .navbar-collapse {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-height: calc(100dvh - 110px);
    overflow-y: auto !important;
    background: #fff !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.15);
    z-index: 1002 !important;
  }
  .header .header-content .navbar-collapse:not(.show) { display: none; }
  .header .header-content .navbar-collapse.show { display: block; }
}


/* =====================================================
   Feinschliff Mobilnavigation und Team-Kacheln
   ===================================================== */
@media (max-width: 767.98px) {
  /* Menü: Abstand zum Rand und ruhige, gut lesbare Zeilen */
  .header .header-content .navbar-collapse {
    box-sizing: border-box;
    padding: 12px 24px 20px !important;
    border-top: 1px solid #e8eddf;
    box-shadow: 0 14px 28px rgba(0, 0, 0, .10) !important;
  }
  .header .header-content .navbar-collapse .navbar-nav {
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
  }
  .header .header-content .navbar-collapse .nav-item {
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: 1px solid #edf0e7;
  }
  .header .header-content .navbar-collapse .nav-item:last-child {
    border-bottom: 0;
  }
  .header .header-content .navbar-collapse .nav-link {
    display: flex !important;
    align-items: center;
    min-height: 52px;
    margin: 0 !important;
    padding: 12px 10px !important;
    font-size: 15px !important;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: .01em;
    text-align: left;
  }
  .header .header-content .navbar-collapse .dropdown-menu {
    margin: 0 !important;
    padding: 6px 0 10px 12px !important;
    border: 0;
    box-shadow: none;
  }
  .header .header-content .navbar-collapse .dropdown-item {
    padding: 10px 12px !important;
    font-size: 14px;
    white-space: normal;
  }

  /* Praxis & Team: alle Textkacheln gleich hoch und Inhalt exakt mittig */
  .page-content .js-icn-carousel.icn-carousel:not(:has(.icn-text-simple)) .slick-track {
    align-items: stretch !important;
    grid-auto-rows: 1fr;
    gap: 14px;
  }
  .page-content .js-icn-carousel.icn-carousel:not(:has(.icn-text-simple)) > .col-md,
  .page-content .js-icn-carousel.icn-carousel:not(:has(.icn-text-simple)) .slick-slide:not(.slick-cloned) {
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
    min-width: 0;
    margin: 0 !important;
  }
  .page-content .js-icn-carousel.icn-carousel:not(:has(.icn-text-simple)) .icn-text {
    display: flex !important;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100% !important;
    min-height: 180px;
    box-sizing: border-box;
    padding: 20px 14px !important;
    margin: 0 !important;
    text-align: center !important;
  }
  .page-content .js-icn-carousel.icn-carousel:not(:has(.icn-text-simple)) .icn-text > div,
  .page-content .js-icn-carousel.icn-carousel:not(:has(.icn-text-simple)) .icn-text-title,
  .page-content .js-icn-carousel.icn-carousel:not(:has(.icn-text-simple)) .icn-text p {
    width: 100%;
    text-align: center !important;
  }
  .page-content .js-icn-carousel.icn-carousel:not(:has(.icn-text-simple)) .icn-text-title {
    margin: 0 0 8px !important;
  }
  .page-content .js-icn-carousel.icn-carousel:not(:has(.icn-text-simple)) .icn-text p {
    margin: 0 !important;
  }
}
@media (max-width: 359.98px) {
  .header .header-content .navbar-collapse { padding: 10px 18px 18px !important; }
}