/* Shared responsive overrides for all pages.
   Loaded LAST so mobile rules win over page + content-width styles.
   Pattern: fluid content (width 100% / height auto); cover media fills with object-fit: cover. */

/* Hero: weiße Unterlinie unter H1 entfernen (alle Viewports) */
.hero-text h1::after,
.hero-content h1::after,
.hero-content > h1::after {
  display: none !important;
  content: none !important;
}

/* ---- Tablet / below desktop column ---- */
@media (max-width: 1200px) {
  body {
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  html {
    overflow-x: hidden !important;
  }

  .container,
  .contact-shell,
  .services-shell,
  .practice-life-shell,
  .content-wrapper,
  .loc-shell,
  .gs-intro-inner,
  .gs-chapter-inner,
  .gs-notes-inner,
  .gs-faq-inner,
  .gs-cta-inner,
  .amd-intro-inner,
  .amd-chapter-inner,
  .rle-intro-inner,
  .rle-chapter-inner,
  .overview-lead-inner,
  .overview-group-inner,
  .diag-chapter-visual,
  .diag-chapter-title,
  .diag-chapter-body,
  .laser-treatments-header,
  .laser-panels,
  .laser-story-grid,
  .tab-container,
  .katarakt-cta-strip-content,
  .description-content,
  .op-focus-header,
  .op-hero-section,
  .rle-intro-content,
  .team-members-header,
  .team-members-grid,
  .impressum-content,
  .content,
  .request-layout,
  .doctors-intro,
  .welcome-section > .container,
  .practice-story-section > .container,
  .services-section .services-shell,
  .services-bridge-section > .container,
  .memberships-section > .container,
  .reviews-section > .container,
  .news-section > .container,
  .contact > .container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  img,
  video {
    max-width: 100%;
  }

  picture {
    display: block;
    max-width: 100%;
  }
}

/* ---- Compact header / hamburger: Logo + Telefon bleiben sichtbar ---- */
@media (max-width: 1280px) {
  :root {
    --header-height: 78px;
  }

  /* --- Header / hamburger nav --- */
  .header {
    overflow: visible !important;
    padding: 14px 0 !important;
  }

  .header .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .header-content {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 16px !important;
    min-height: 50px !important;
  }

  .header .header-content > a:first-of-type {
    flex: 1 1 auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    height: 50px !important;
    order: 1 !important;
  }

  .header-logo {
    height: 50px !important;
    max-height: 50px !important;
    width: auto !important;
    max-width: min(168px, 40vw) !important;
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
  }

  .contact-info {
    display: flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    order: 2 !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 54px !important;
    min-width: 0 !important;
  }

  .contact-info .phone-number {
    display: inline-flex !important;
  }

  .phone-number {
    font-size: 1.08rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    color: #ffffff !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    min-width: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.55) !important;
    border-radius: 9px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-sizing: border-box !important;
    -webkit-tap-highlight-color: transparent;
  }

  .phone-number::before {
    width: 16px !important;
    height: 16px !important;
    margin-right: 7px !important;
  }

  a.phone-number:hover,
  a.phone-number:focus-visible {
    color: #ffffff !important;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
  }

  .header-appointment {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    padding: 0 12px !important;
    font-size: 0.84rem !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #0a1f35 !important;
    border: 1px solid #ffffff !important;
    text-decoration: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
  }

  .header-appointment:hover,
  .header-appointment:focus-visible {
    background: #ffffff !important;
    color: #0a1f35 !important;
    text-decoration: none !important;
    transform: none !important;
  }

  .header-nav {
    display: flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: flex-end !important;
    order: 3 !important;
    position: static !important;
    min-width: 0 !important;
    gap: 0 !important;
    margin-left: 0 !important;
  }

  .header .nav-toggle,
  .nav-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1001 !important;
    border: none !important;
    background: #ffffff !important;
    color: #1a1a1a !important;
    border-radius: 9px !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    cursor: pointer !important;
    flex: 0 0 auto !important;
    font-size: 0 !important;
    line-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
  }

  .nav-toggle-bars {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 18px !important;
    height: 14px !important;
    pointer-events: none !important;
  }

  .nav-toggle-bars > span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: #1a1a1a !important;
    border-radius: 1px !important;
  }

  .header-nav .nav-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 8px 14px 16px !important;
    list-style: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    background: #0a1f35 !important;
    border-top: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.28) !important;
    z-index: 1002 !important;
    box-sizing: border-box !important;
  }

  .header-nav.nav-open .nav-menu {
    display: flex !important;
  }

  .header-nav .nav-item {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  }

  .header-nav .nav-item:last-child {
    border-bottom: none;
  }

  .header-nav .nav-link {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    padding: 14px 4px !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  .header-nav .nav-item:has(.dropdown-menu) > .nav-link::after {
    content: "+";
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1;
    margin-left: 12px;
    flex-shrink: 0;
    opacity: 0.85;
    transition: transform 0.2s ease;
  }

  .header-nav .nav-item.submenu-open > .nav-link::after {
    content: "−";
  }

  .header-nav .dropdown-menu {
    display: none !important;
    position: static !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 !important;
    list-style: none !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
  }

  .header-nav .nav-item.submenu-open > .dropdown-menu {
    display: block !important;
  }

  .header-nav .dropdown-menu > li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .header-nav .dropdown-item {
    display: block !important;
    width: 100% !important;
    padding: 12px 16px !important;
    color: #1a4a7a !important;
    background: transparent !important;
    text-decoration: none !important;
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    border-bottom: 1px solid rgba(26, 74, 122, 0.1) !important;
    box-sizing: border-box !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .header-nav .dropdown-menu > li:last-child .dropdown-item {
    border-bottom: none !important;
  }

  .header-nav .dropdown-item:hover,
  .header-nav .dropdown-item:focus-visible {
    background: #ffffff !important;
    color: #0a1f35 !important;
  }

  .header-nav .nav-item:hover .dropdown-menu {
    display: none !important;
  }

  .header-nav .nav-item.submenu-open:hover .dropdown-menu {
    display: block !important;
  }

}

/* ---- Phone / small tablet ---- */
@media (max-width: 768px) {
  body {
    min-width: 0 !important;
    overflow-x: hidden !important;
    /* Match fixed header: 14px + 50px content + 14px */
    padding-top: 78px !important;
  }

  /* Hero pages: image extends under transparent header */
  body:has(.hero) {
    padding-top: 0 !important;
  }

  html {
    overflow-x: hidden !important;
  }

  /* Force every common content shell fluid */
  .container,
  .contact-shell,
  .services-shell,
  .practice-life-shell,
  .content-wrapper,
  .loc-shell,
  .gs-intro-inner,
  .gs-chapter-inner,
  .gs-notes-inner,
  .gs-faq-inner,
  .gs-cta-inner,
  .amd-intro-inner,
  .amd-chapter-inner,
  .rle-intro-inner,
  .rle-chapter-inner,
  .overview-lead-inner,
  .overview-group-inner,
  .diag-chapter-visual,
  .diag-chapter-title,
  .diag-chapter-body,
  .laser-treatments-header,
  .laser-panels,
  .laser-story-grid,
  .tab-container,
  .katarakt-cta-strip-content,
  .description-content,
  .op-focus-header,
  .op-hero-section,
  .rle-intro-content,
  .rle-tabs .tab-buttons,
  .rle-tabs .tab-content,
  .team-members-header,
  .team-members-grid,
  .services-note > *,
  .amd-stat-full > *,
  .impressum-content,
  .content,
  .tab-panel,
  .request-layout,
  .doctors-intro,
  .team-grid,
  .news-grid,
  .welcome-section > .container,
  .practice-story-section > .container,
  .services-section .services-shell,
  .services-bridge-section > .container,
  .memberships-section > .container,
  .reviews-section > .container,
  .news-section > .container,
  .contact > .container {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box !important;
  }

  .container,
  .contact-shell,
  .services-shell,
  .content-wrapper,
  .loc-shell {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* --- Media --- */
  img,
  video {
    max-width: 100%;
  }

  .content img,
  .article-content img,
  .main-content img,
  .diag-chapter img,
  .gs-chapter img,
  .laser-panel img,
  .overview-card img,
  .team-member-card img,
  .doctor-card img,
  .katarakt-section img,
  .feature-block img,
  .img-fluid {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
  }

  .service-card-image,
  .news-card-image,
  .feature-image,
  .diag-hero-image,
  .media-cover {
    overflow: hidden;
  }

  .service-card-image picture,
  .news-card-image picture,
  .feature-image picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  .service-card-image img,
  .news-card-image img,
  .feature-image img,
  .hero-bg,
  .media-cover img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
  }

  .practice-life-media,
  .practice-life-media picture,
  .practice-life-media img {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
  }

  .practice-life-media picture,
  .practice-life-media img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .hero .video-wrapper,
  .hero .video-container,
  .hero .video-section {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    background: #ffffff !important;
  }

  .hero .video-player,
  .hero video.video-player {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    transform: translate(-50%, -50%) !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #ffffff !important;
  }

  .hero:has(video),
  .hero:has(.video-player) {
    height: auto !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
    background: #ffffff !important;
  }

  /* Background-image heroes only */
  .hero:not(:has(video)):not(:has(.video-player)):not(:has(.hero-media)) {
    height: auto !important;
    min-height: 220px !important;
    margin-top: 0 !important;
    aspect-ratio: 16 / 10 !important;
    max-height: none !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    background-size: cover !important;
    background-position: center center !important;
    background-attachment: scroll !important;
  }

  /*
   * Image hero (mobile): show the full landscape media at natural
   * width/aspect (no 55vh cover crop), then stack copy underneath.
   * Shade overlays only the media row (same header darkening as desktop).
   */
  .hero:has(.hero-media) {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: auto !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #0a1f35 !important;
  }

  .hero:has(.hero-media) .hero-media {
    grid-row: 1 !important;
    grid-column: 1 !important;
    position: relative !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    line-height: 0 !important;
    z-index: 0 !important;
  }

  .hero:has(.hero-media) .hero-media img,
  .hero > picture.hero-media img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  /*
   * Mobile: dunkler Verlauf bis zur halben Bildhöhe.
   */
  .hero-shade {
    background: linear-gradient(
      to bottom,
      rgba(10, 31, 53, 0.82) 0%,
      rgba(10, 31, 53, 0.52) 22%,
      rgba(10, 31, 53, 0.22) 40%,
      rgba(10, 31, 53, 0) 50%
    ) !important;
  }

  .hero-shade::after {
    display: none !important;
  }

  .hero:has(.hero-media) .hero-shade {
    display: block !important;
    grid-row: 1 / 2 !important;
    grid-column: 1 / 2 !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* Gleitschirm nur über dem Headerbild, nicht über dem Textblock */
  .hero:has(.hero-media) .hero-paraglider {
    grid-row: 1 / 2 !important;
    grid-column: 1 / 2 !important;
    position: absolute !important;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    overflow: hidden !important;
    z-index: 2 !important;
  }

  .hero:has(.hero-media) .hero-content {
    grid-row: 2 !important;
    grid-column: 1 !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    margin: 0 !important;
    padding: 28px 16px 32px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    background: #0a1f35 !important;
    box-sizing: border-box !important;
    z-index: 2 !important;
    flex: 0 0 auto !important;
  }

  .hero:has(.hero-media) .hero-content h1,
  .hero:has(.hero-media) .hero-content p,
  .hero:has(.hero-media) .hero-text {
    text-align: center !important;
  }

  .hero:has(.hero-media) .hero-actions {
    justify-content: center !important;
    flex-wrap: wrap !important;
  }

  .hero:has(.hero-media) .hero-lead,
  .hero:has(.hero-media) .hero-text p,
  .hero:has(.hero-media) .hero-content p {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero:not(:has(video)):not(:has(.video-player)):not(:has(.hero-media)) .hero-content {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
  }

  .hero:not(:has(video)):not(:has(.video-player))::before {
    display: none !important;
  }

  .header-logo,
  .membership-logo-item img,
  .footer img,
  .logo img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .membership-logo-item img {
    max-height: 110px !important;
  }

  .welcome-image,
  .practice-story-media,
  .profile-image {
    position: relative !important;
    min-height: 0 !important;
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
  }

  .welcome-image picture,
  .practice-story-media picture,
  .profile-image picture {
    display: block !important;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
  }

  .welcome-image img,
  .practice-story-media img,
  .profile-image img {
    display: block !important;
    position: static !important;
    inset: auto !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    object-fit: contain !important;
    transform: none !important;
  }

  .service-card-image,
  .news-card-image {
    height: auto !important;
    aspect-ratio: 16 / 10;
    overflow: hidden !important;
  }

  .service-card-image img,
  .news-card-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .practice-life-shell {
    grid-template-columns: 1fr !important;
  }

  iframe,
  .map-container,
  .map-container iframe {
    max-width: 100% !important;
  }

  /* --- Stack multi-column layouts --- */
  .welcome-content,
  .welcome-layout,
  .welcome-simple,
  .practice-story-layout,
  .practice-story-grid,
  .practice-story-content,
  .practice-life-shell,
  .services-grid,
  .news-grid,
  .reviews-grid,
  .team-grid,
  .team-members-grid,
  .doctors-grid,
  .overview-catalog,
  .overview-group-grid,
  .schwerpunkte-grid,
  .why-op-grid,
  .why-op-layout,
  .diag-chapters,
  .diag-chapter-body,
  .laser-treatments,
  .laser-panels,
  .laser-story-grid,
  .laser-panel,
  .gs-chapter-inner,
  .gs-intro-inner,
  .amd-chapter-inner,
  .amd-intro-inner,
  .rle-chapter-inner,
  .rle-intro-inner,
  .rle-tabs .tab-buttons,
  .feature-block,
  .feature-row,
  .request-layout,
  .contact-content,
  .membership-logos,
  .memberships-grid,
  .tab-buttons,
  .comparison-grid,
  .symptoms-grid,
  .katarakt-grid,
  .op-focus-grid,
  .buttons-container,
  .footer-content {
    display: grid !important;
    grid-template-columns: 1fr !important;
    flex-direction: column !important;
  }

  .services-grid,
  .news-grid,
  .reviews-grid,
  .team-grid,
  .team-members-grid,
  .doctors-grid,
  .overview-catalog,
  .schwerpunkte-grid,
  .why-op-grid,
  .diag-chapters,
  .laser-treatments,
  .laser-panels,
  .membership-logos,
  .memberships-grid,
  .contact-content {
    gap: 18px !important;
  }

  /* Two-up grids that should still stack on phones */
  .gs-chapter-grid,
  .amd-stat-grid,
  .amd-chapter-grid,
  .rle-chapter-grid,
  .diag-chapter,
  .laser-panel-inner,
  .feature-block,
  .welcome-content,
  .practice-story-grid,
  .op-hero-grid,
  .tab-content-grid {
    grid-template-columns: 1fr !important;
  }

  /* Side gaps for text blocks */
  .welcome-content,
  .welcome-text,
  .practice-story-copy,
  .practice-life-copy,
  .services-header,
  .services-bridge,
  .news-header,
  .memberships-header,
  .reviews-header,
  .laser-treatments-header,
  .laser-story-copy,
  .laser-panel-body,
  .diag-chapter-body,
  .diag-chapter-copy,
  .feature-copy,
  .article-content,
  .main-content,
  .content,
  .section-intro,
  .gs-chapter-inner,
  .gs-intro-inner,
  .gs-cta-inner,
  .gs-notes-inner,
  .gs-faq-inner,
  .katarakt-faq-header,
  .amd-stat-header,
  .amd-stat-shell,
  .hero:not(:has(video)):not(:has(.video-player)) .hero-content,
  .hero:has(.hero-media) .hero-content {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .gs-chapter-inner,
  .gs-intro-inner,
  .gs-cta-inner,
  .gs-notes-inner,
  .gs-faq-inner,
  .diag-chapter-body,
  .amd-intro-inner,
  .amd-chapter-inner,
  .rle-intro-inner,
  .rle-chapter-inner {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .gs-chapter,
  .gs-intro,
  .gs-notes,
  .gs-faq,
  .gs-cta,
  .amd-intro,
  .amd-chapter,
  .rle-intro,
  .rle-chapter {
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .gs-chapter .gs-chapter-inner,
  .gs-intro .gs-intro-inner,
  .gs-notes .gs-notes-inner,
  .gs-faq .gs-faq-inner,
  .gs-cta .gs-cta-inner,
  .amd-intro .amd-intro-inner,
  .amd-chapter .amd-chapter-inner,
  .rle-intro .rle-intro-inner,
  .rle-chapter .rle-chapter-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .laser-treatments-header,
  .reviews-header,
  .news-header,
  .memberships-header,
  .services-header {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Typography scale for phones */
  h1,
  .hero-content h1,
  .hero-text h1,
  .section-title,
  .welcome-main-banner {
    font-size: clamp(1.45rem, 6.2vw, 1.85rem) !important;
    line-height: 1.25 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }

  h2 {
    font-size: clamp(1.3rem, 5.4vw, 1.65rem) !important;
    line-height: 1.3 !important;
  }

  h3 {
    font-size: clamp(1.15rem, 4.8vw, 1.35rem) !important;
  }

  p,
  li,
  .services-lead,
  .hero-lead {
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
  }

  /* Buttons / CTAs */
  .hero-actions a,
  .cta-button,
  .btn,
  .button,
  .katarakt-cta-strip a,
  .services-bridge a {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Tables: allow horizontal scroll instead of page overflow */
  table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Forms */
  input,
  textarea,
  select,
  button {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Tab buttons: wrap / scroll */
  .tab-buttons,
  .rle-tabs .tab-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .tab-buttons button,
  .tab-button {
    flex: 1 1 auto !important;
    min-width: min(100%, 140px) !important;
  }

  /* Section spacing */
  .welcome-section,
  .services-section,
  .memberships-section,
  .reviews-section,
  .news-section,
  .contact {
    padding-top: clamp(40px, 10vw, 70px) !important;
    padding-bottom: clamp(40px, 10vw, 70px) !important;
  }

  /* Edge-to-edge story sections: spacing via margin only (avoid padding+margin stack) */
  .practice-story-section,
  .practice-life-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: clamp(40px, 10vw, 70px) !important;
    margin-bottom: clamp(40px, 10vw, 70px) !important;
  }

  /* Cards full width */
  .service-card,
  .news-card,
  .review-card,
  .doctor-card,
  .team-member-card,
  .overview-card,
  .laser-panel,
  .request-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Cookie consent dialog uses shared.css; do not force old bottom-bar layout */
}

/* Extra-narrow phones */
@media (max-width: 480px) {
  body {
    /* Match fixed header: 12px + 46px content + 12px */
    padding-top: 70px !important;
  }

  body:has(.hero) {
    padding-top: 0 !important;
  }

  .header {
    padding: 12px 0 !important;
  }

  .header .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .header-content {
    min-height: 46px !important;
    column-gap: 10px !important;
  }

  .header .header-content > a:first-of-type {
    height: 46px !important;
  }

  .contact-info {
    height: auto !important;
    min-height: 46px !important;
  }

  .header-logo {
    height: 46px !important;
    max-height: 46px !important;
    max-width: min(140px, 36vw) !important;
  }

  .header-appointment {
    height: 36px !important;
    padding: 0 10px !important;
    font-size: 0.78rem !important;
  }

  .phone-number {
    font-size: 0.95rem !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 10px !important;
  }

  .phone-number::before {
    width: 14px !important;
    height: 14px !important;
    margin-right: 5px !important;
  }

  .header .nav-toggle,
  .nav-toggle {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    border-radius: 9px !important;
  }

  .hero:has(video),
  .hero:has(.video-player) {
    aspect-ratio: 16 / 9 !important;
    max-height: none !important;
    margin-top: 0 !important;
  }

  .hero:not(:has(video)):not(:has(.video-player)) {
    margin-top: 0 !important;
    aspect-ratio: auto !important;
    max-height: none !important;
  }

  .hero-content {
    padding: 20px 14px !important;
  }

  .hero-content h1,
  .hero-text h1 {
    font-size: clamp(1.35rem, 6.5vw, 1.7rem) !important;
    margin-bottom: 8px !important;
  }

  .hero-content p,
  .hero-text p {
    font-size: 0.84rem !important;
    margin-bottom: 10px !important;
  }

  .container,
  .contact-shell,
  .services-shell,
  .content-wrapper {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (max-width: 768px) and (hover: none) {
  .header-nav .nav-item.submenu-open > .dropdown-menu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

@media (min-width: 769px) {
  .nav-toggle {
    display: none !important;
  }
}