* { margin: 0px; padding: 0px; box-sizing: border-box; }
html, body { overflow-x: hidden; width: 100%; }
body { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: rgb(51, 51, 51); background-color: rgb(255, 255, 255); font-size: 18px; -webkit-font-smoothing: antialiased; }
@media (max-width: 768px) {body { font-size: 20px; line-height: 1.8; }}
.container { max-width: 1200px; margin: 0px auto; padding: 0px 1.5rem; }
.besenreiser-section { padding: 5rem 0px; }
.bg-light { background: linear-gradient(rgb(227, 233, 241) 0%, rgb(255, 255, 255) 100%); }
.section-title-center { font-size: 2.75rem; font-weight: 800; color: rgb(26, 26, 26); text-align: center; margin-bottom: 2.5rem; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
@media (min-width: 769px) {.section-title-center { font-size: 3rem; }}
@media (max-width: 768px) {.section-title-center { font-size: 2.25rem; line-height: 1.3; }}
.intro-text { font-size: 1.125rem; color: rgb(102, 102, 102); text-align: center; max-width: 800px; margin: 0px auto 4.5rem; line-height: 1.6; }
.image-text-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; margin-top: 3rem; }
.image-text-layout.reverse { direction: rtl; }
.image-text-layout.reverse > * { direction: ltr; }
.image-wrapper { border-radius: 24px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 12px; }
.content-image { width: 100%; height: 400px; object-fit: cover; display: block; transition: transform 0.3s; }
.content-image:hover { transform: scale(1.05); }
.definition-box { background: rgb(246, 248, 251); padding: 2rem 2.5rem; border-radius: 20px; border-left: 4px solid rgb(75, 104, 138); margin-bottom: 2rem; }
.text-large { font-size: 1.125rem; color: rgb(55, 65, 81); line-height: 1.9; }
.info-card-purple { background: white; padding: 2rem; border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 12px; border: 2px solid rgb(229, 231, 235); display: flex; gap: 1.5rem; align-items: flex-start; }
.icon-circle { width: 80px; height: 80px; background: white; border: 2px solid rgb(75, 104, 138); border-radius: 16px; display: flex; align-items: center; justify-content: center; color: rgb(75, 104, 138); flex-shrink: 0; }
.info-card-purple h3 { font-size: 1.5rem; font-weight: 700; color: rgb(26, 26, 26); margin-bottom: 1rem; }
.info-card-purple p { color: rgb(75, 85, 99); font-size: 1.0625rem; line-height: 1.8; }
.location-cards { display: flex; flex-direction: column; gap: 1.5rem; }
.location-card { background: white; padding: 1.75rem 2rem; border-radius: 16px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 12px; border: 2px solid rgb(229, 231, 235); display: flex; gap: 1.5rem; align-items: center; transition: 0.3s; }
.location-card:hover { transform: translateX(8px); border-color: rgb(75, 104, 138); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 20px; }
.location-icon { width: 60px; height: 60px; background: white; border: 2px solid rgb(75, 104, 138); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: rgb(75, 104, 138); flex-shrink: 0; }
.location-card h3 { font-size: 1.375rem; font-weight: 700; color: rgb(26, 26, 26); margin-bottom: 0.5rem; }
.location-card p { color: rgb(107, 114, 128); font-size: 1.0625rem; line-height: 1.7; }
.highlight-notice { background: rgb(246, 248, 251); padding: 1.75rem 2rem; border-radius: 16px; border-left: 4px solid rgb(75, 104, 138); margin-top: 2rem; }
.highlight-notice p { color: rgb(55, 65, 81); font-size: 1.0625rem; line-height: 1.8; }
.banner-image-wrapper { margin: 3rem 0px; border-radius: 24px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 12px; }
.banner-image { width: 100%; height: 400px; object-fit: cover; display: block; }
.risk-factors-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; }
.risk-card { background: white; padding: 2rem; border-radius: 20px; text-align: center; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 12px; border: 2px solid rgb(229, 231, 235); transition: 0.3s; }
.risk-card:hover { transform: translateY(-8px); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 20px; border-color: rgb(75, 104, 138); }
.risk-icon { width: 90px; height: 90px; margin: 0px auto 1.5rem; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: white; border: 2px solid rgb(75, 104, 138); color: rgb(75, 104, 138); }
.risk-card h3 { font-size: 1.375rem; font-weight: 700; color: rgb(26, 26, 26); margin-bottom: 0.75rem; }
.risk-card p { color: rgb(107, 114, 128); font-size: 1.0625rem; line-height: 1.7; }
.diagnostic-highlight { background: white; padding: 2.5rem 3rem; border-radius: 24px; border: 2px solid rgb(229, 231, 235); box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 12px; display: flex; gap: 2.5rem; align-items: center; margin-bottom: 3rem; }
.diagnostic-icon { width: 120px; height: 120px; background: white; border: 2px solid rgb(75, 104, 138); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: rgb(75, 104, 138); flex-shrink: 0; }
.diagnostic-content h3 { font-size: 1.875rem; font-weight: 700; color: rgb(26, 26, 26); margin-bottom: 1rem; }
.diagnostic-content p { color: rgb(75, 85, 99); font-size: 1.125rem; line-height: 1.8; }
.treatment-main { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; margin-top: 3rem; }
.treatment-image-large { border-radius: 24px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 12px; position: sticky; top: 2rem; }
.large-treatment-img { width: 100%; height: 500px; object-fit: cover; display: block; }
.treatment-content-box { background: white; padding: 2.5rem; border-radius: 24px; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 12px; border: 2px solid rgb(229, 231, 235); }
.treatment-badge { display: inline-block; background: white; color: rgb(75, 104, 138); border: 2px solid rgb(75, 104, 138); padding: 0.75rem 1.5rem; border-radius: 25px; font-size: 0.9375rem; font-weight: 600; margin-bottom: 1.5rem; letter-spacing: 0.5px; }
.treatment-content-box h3 { font-size: 2rem; font-weight: 700; color: rgb(26, 26, 26); margin-bottom: 1.25rem; }
.treatment-intro { font-size: 1.125rem; color: rgb(55, 65, 81); line-height: 1.9; margin-bottom: 1.5rem; }
.treatment-process { background: rgb(246, 248, 251); padding: 1.75rem 2rem; border-radius: 16px; border-left: 4px solid rgb(75, 104, 138); }
.treatment-process p { color: rgb(55, 65, 81); font-size: 1.0625rem; line-height: 1.8; }
.methods-comparison { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.5rem; margin: 3rem 0px; }
.method-card { background: white; border-radius: 24px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 12px; border: 2px solid rgb(229, 231, 235); transition: 0.3s; }
.method-card:hover { transform: translateY(-8px); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 20px; }
.method-card.featured { border: 2px solid rgb(75, 104, 138); box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 20px; }
.method-header { padding: 2.5rem 2rem; text-align: center; color: white; }
.method-header.liquid { background: white; color: rgb(75, 104, 138); border-bottom: 2px solid rgb(229, 231, 235); }
.method-header.foam { background: white; color: rgb(75, 104, 138); border-bottom: 2px solid rgb(229, 231, 235); }
.method-header svg { margin-bottom: 1rem; }
.method-header h3 { font-size: 1.75rem; font-weight: 700; }
.method-body { padding: 2rem; }
.method-description { font-size: 1.125rem; color: rgb(51, 51, 51); font-weight: 600; margin-bottom: 1.5rem; text-align: center; }
.method-features { list-style: none; padding: 0px; }
.method-features li { padding-left: 2rem; margin-bottom: 1rem; position: relative; color: rgb(75, 85, 99); font-size: 1.0625rem; line-height: 1.7; }
.method-features li::before { content: "✓"; position: absolute; left: 0px; color: rgb(75, 104, 138); font-weight: 700; font-size: 1.25rem; }
.treatment-advantages { margin-top: 3rem; background: rgb(246, 248, 251); padding: 3rem; border-radius: 24px; }
.advantages-title { font-size: 2rem; font-weight: 700; color: rgb(26, 26, 26); text-align: center; margin-bottom: 2rem; }
.advantages-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.advantage-item { display: flex; gap: 1rem; align-items: flex-start; background: white; padding: 1.5rem; border-radius: 12px; border: 2px solid rgb(229, 231, 235); }
.check-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: white; color: rgb(75, 104, 138); border: 2px solid rgb(75, 104, 138); border-radius: 50%; font-weight: 700; font-size: 1.125rem; flex-shrink: 0; }
.advantage-item p { color: rgb(55, 65, 81); font-size: 1.0625rem; line-height: 1.7; }
.cost-notice { background: linear-gradient(135deg, rgb(254, 243, 199), rgb(253, 230, 138)); padding: 1.75rem 2rem; border-radius: 16px; border-left: 5px solid rgb(245, 158, 11); display: flex; gap: 1.25rem; align-items: flex-start; }
.cost-notice svg { color: rgb(245, 158, 11); flex-shrink: 0; margin-top: 0.25rem; }
.cost-notice p { color: rgb(120, 53, 15); font-size: 1.0625rem; line-height: 1.8; }
@media (max-width: 968px) {body { font-size: 17px; }
.section-title-center { font-size: 1.875rem; }
.image-text-layout, .image-text-layout.reverse { grid-template-columns: 1fr; direction: ltr; }
.risk-factors-grid { grid-template-columns: repeat(2, 1fr); }
.treatment-main { grid-template-columns: 1fr; }
.treatment-image-large { position: static; }
.methods-comparison { grid-template-columns: 1fr; }
.advantages-grid { grid-template-columns: 1fr; }}
@media (max-width: 640px) {body { font-size: 16px; }
.section-title-center { font-size: 1.75rem; }
.risk-factors-grid { grid-template-columns: 1fr; }
.content-image, .banner-image, .large-treatment-img, .clinic-image { height: 300px; }
.diagnostic-highlight { flex-direction: column; text-align: center; }}
.theme-subnav { position: sticky; top: var(--header-h, 80px); z-index: 999; background: rgb(246, 248, 251); border-bottom: 1px solid rgb(229, 231, 235); box-shadow: rgba(0, 0, 0, 0.05) 0px 2px 8px; }
@media (max-width: 768px) {.theme-subnav { top: var(--header-h, 96px); }}
.subnav-tabs { display: flex; gap: 0px; overflow-x: auto; scrollbar-width: thin; }
.subnav-tab { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1.5rem; color: rgb(51, 51, 51); text-decoration: none; font-size: 16px; font-weight: 500; border-bottom: 3px solid rgb(229, 231, 235); white-space: nowrap; transition: 0.3s; }
.subnav-tab svg { flex-shrink: 0; stroke: rgb(51, 51, 51); transition: stroke 0.3s; }
.subnav-tab:hover { color: rgb(75, 104, 138); border-bottom-color: rgb(75, 104, 138); }
.subnav-tab:hover svg { stroke: rgb(75, 104, 138); }
.subnav-tab:focus { outline: rgb(75, 104, 138) solid 2px; outline-offset: -2px; }
.subnav-tab.active { color: rgb(75, 104, 138); background: rgb(227, 233, 241); border-bottom-color: rgb(75, 104, 138); }
.subnav-tab.active svg { stroke: rgb(75, 104, 138); }
@media (max-width: 768px) {.theme-subnav { top: var(--header-h, 96px); }
.subnav-tab { padding: 1rem 1.25rem; font-size: 17px; }
.subnav-tab svg { width: 20px; height: 20px; }
.subnav-tab span { font-size: 17px; }}