/* Enforce max 1200px content column site-wide (fluid on smaller viewports).
   Full-width exceptions: .header, .hero, .footer only. */

:root {
    --content-width: 1200px;
}

/* Neutralize full-viewport breakouts used by older section styles */
.tab-section,
.katarakt-section,
.katarakt-intro,
.katarakt-cta-strip,
.description-section,
.description-section--intro,
.services-note,
.op-focus-section,
.team-members-section,
.laser-panels,
.amd-stat-full,
.memberships-section,
.practice-life-section,
.practice-story-section,
.gs-intro,
.gs-chapter,
.vs-intro,
.vs-facts,
.vs-topics,
.vs-chapter,
.vs-intervals,
.vs-steps,
.vs-note,
.overview-lead,
.overview-group,
.main-content,
.page,
.buttons-container,
.comparison-section,
.symptoms-section,
.rle-faq-section,
.rle-intro-section,
.rle-tabs,
.welcome-section,
.services-section,
.services-bridge-section,
.reviews-section,
.news-section,
.contact,
.amd-intro,
.amd-chapter,
.rle-intro,
.rle-chapter {
    width: 100% !important;
    max-width: none;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    position: relative !important;
}

/* Primary content shells — fluid width, capped at content column */
.container,
.contact-shell,
.services-shell,
.practice-life-shell,
.content-wrapper,
.loc-shell,
.gs-intro-inner,
.gs-chapter-inner,
.gs-intro-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,
.vs-intro-inner,
.vs-facts-inner,
.vs-topics-inner,
.vs-chapter-inner,
.vs-intervals-inner,
.vs-steps-inner,
.vs-note-inner,
.laser-treatments-header,
.laser-panels,
.laser-story-grid,
.tab-container,
.katarakt-cta-strip-content,
.description-content,
.amd-stat-full > *,
.op-focus-header,
.op-focus-section > .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 > *,
.impressum-content,
.content,
.tab-panel,
.doctors-intro,
.team-grid,
.news-grid,
.request-layout,
.main-content > .container,
.page > .container,
.welcome-section > .container,
.practice-story-section > .container,
.services-bridge-section > .container,
.memberships-section > .container,
.reviews-section > .container,
.news-section > .container,
.contact > .container {
    width: 100% !important;
    max-width: var(--content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    box-sizing: border-box;
}

.container,
.contact-shell,
.services-shell,
.content-wrapper,
.loc-shell,
.tab-container,
.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,
.vs-intro-inner,
.vs-facts-inner,
.vs-topics-inner,
.vs-chapter-inner,
.vs-intervals-inner,
.vs-steps-inner,
.vs-note-inner,
.laser-treatments-header,
.katarakt-cta-strip-content,
.description-content,
.rle-intro-content,
.team-members-header,
.team-members-grid,
.impressum-content,
.content {
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.op-hero-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Nested content inside an already-constrained .container must not re-apply column width */
.container .gs-intro-inner,
.container .gs-chapter-inner,
.container .gs-notes-inner,
.container .gs-faq-inner,
.container .gs-cta-inner,
.container .amd-intro-inner,
.container .amd-chapter-inner,
.container .rle-intro-inner,
.container .rle-chapter-inner,
.container .overview-lead-inner,
.container .overview-group-inner,
.container .tab-container,
.container .tab-panel,
.container .impressum-content,
.container .content,
.container .request-layout,
.container .doctors-intro,
.container .news-grid,
.container .team-grid,
.container .description-content,
.container .contact-shell,
.content-wrapper .op-focus-header,
.content-wrapper .op-focus-section,
.content-wrapper .schwerpunkte-grid,
.content-wrapper .why-op-layout,
.content-wrapper .why-op-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Keep header + footer + hero full width */
.header,
.hero,
.hero-benefits,
.footer {
    width: 100% !important;
    max-width: none !important;
    left: auto !important;
    right: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.header .container,
.footer .container {
    width: 100% !important;
    max-width: none !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.hero {
    margin-top: 0 !important;
    height: calc(55vh + var(--header-height)) !important;
    min-height: calc(55vh + var(--header-height)) !important;
}

.hero-media {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
}

.hero-media img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
}

/* Hero text aligns to content column; top padding clears transparent header */
.hero-content {
    padding-top: var(--header-height) !important;
    padding-left: max(20px, calc((100% - var(--content-width)) / 2)) !important;
    padding-right: max(20px, calc((100% - var(--content-width)) / 2)) !important;
    box-sizing: border-box !important;
}

/* Icon-Leiste unter dem Headerbild = Header-Höhe, hell auf allen Seiten */
.hero-benefits {
    height: var(--header-height) !important;
    min-height: var(--header-height) !important;
    max-height: var(--header-height) !important;
    margin-top: 16px !important;
    padding: 0 !important;
    color: #0a1f35 !important;
    background: #f4f8fb !important;
    border-top: 1px solid rgba(10, 31, 53, 0.08) !important;
    border-bottom: 1px solid rgba(10, 31, 53, 0.1) !important;
    box-shadow: 0 8px 22px rgba(10, 31, 53, 0.06) !important;
}

.hero-benefits-item span {
    color: #0a1f35 !important;
    font-family: var(--font-sans) !important;
    font-size: 1.12rem !important;
    font-weight: 500 !important;
    letter-spacing: 0.01em !important;
}

.hero-benefits-icon {
    color: #0a1f35 !important;
    width: 52px !important;
    height: 44px !important;
}

@media (max-width: 1280px) {
    .hero-benefits-item span {
        font-size: 1.02rem !important;
    }
}

@media (max-width: 768px) {
    .hero-benefits {
        height: auto !important;
        min-height: var(--header-height) !important;
        max-height: none !important;
        padding: 12px 0 !important;
    }

    .hero-benefits-icon {
        width: 46px !important;
        height: 38px !important;
    }
}

/* Site-wide header: transparent over hero, solid navy when scrolled / without hero */
.header {
    background: transparent !important;
    box-shadow: none !important;
    transition: background-color 0.28s ease, box-shadow 0.28s ease;
}

.header.is-solid,
.header.scrolled,
.header:has(.nav-open),
body:not(:has(.hero)) .header {
    background: #0a1f35 !important;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22) !important;
}

/* Headerbild: dunkler Verlauf bis zur halben Bildhöhe */
.hero-shade {
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    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;
}

/* Below content width: ensure nothing stays locked to a fixed desktop column */
@media (max-width: 1200px) {
    body {
        min-width: 0 !important;
    }

    .container,
    .contact-shell,
    .services-shell,
    .practice-life-shell,
    .content-wrapper,
    .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,
    .vs-intro-inner,
    .vs-facts-inner,
    .vs-topics-inner,
    .vs-chapter-inner,
    .vs-intervals-inner,
    .vs-steps-inner,
    .vs-note-inner,
    .laser-treatments-header,
    .laser-panels,
    .laser-story-grid,
    .tab-container,
    .katarakt-cta-strip-content,
    .description-content,
    .amd-stat-full > *,
    .op-focus-header,
    .op-focus-section > .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 > *,
    .impressum-content,
    .content,
    .tab-panel,
    .doctors-intro,
    .team-grid,
    .news-grid,
    .request-layout,
    .welcome-section > .container,
    .practice-story-section > .container,
    .services-bridge-section > .container,
    .memberships-section > .container,
    .reviews-section > .container,
    .news-section > .container,
    .contact > .container {
        width: 100% !important;
        max-width: 100% !important;
    }
}