/* Final local responsive/accessibility overrides */
*, *::before, *::after { box-sizing: border-box; }
html, body { width: 100%; max-width: 100%; overflow-x: hidden; }
body { margin: 0; }
main, header, footer, section, article, aside, nav, div { min-width: 0; }
img { max-width: 100%; height: auto; }
p, h1, h2, h3, h4, h5, h6, a, span, li, td, th, address { overflow-wrap: anywhere; }
button, input, textarea, select { max-width: 100%; font: inherit; }
button { cursor: pointer; }
.contact-text-static, .noninteractive-social { cursor: default; }
.noninteractive-social { display: inline-flex; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: fixed; left: 12px; top: 12px; z-index: 10000; transform: translateY(-160%); background: var(--color-on-surface, #fff); color: var(--color-surface, #111); padding: 10px 14px; border-radius: 6px; }
.skip-link:focus { transform: translateY(0); }
.form-status { margin-top: 8px; font-size: .875rem; color: inherit; }
.hotel-context-section { padding: var(--spacing-3xl, 64px) var(--spacing-xl, 24px); background: var(--color-surface-elevated, #1b1917); }
.hotel-context-container { width: min(100%, var(--content-max-width, 1200px)); margin: 0 auto; text-align: left; }
.hotel-context-container .section-title { margin-bottom: var(--spacing-lg, 24px); }
.hotel-context-container .section-content { max-width: 980px; }
.spa-pricing__table-wrapper { overflow-x: visible; }
.spa-pricing__table { min-width: 0; width: 100%; table-layout: fixed; }
.spa-pricing__table th, .spa-pricing__table td { white-space: normal; overflow-wrap: anywhere; }
.private-suites__rail { max-width: 100%; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.navigation-overlay { max-width: 100vw; }
.footer-container, .navigation-inner { width: min(100%, var(--content-max-width, 1200px)); }

@media (max-width: 768px) {
  :root { --mobile-gutter: 16px; }
  h1, .hero-title, .about-hero-title, .hero-accommodation__title, .hero-spa-intro__title, .hero-gastronomie-title, .ent-hero-title { font-size: clamp(2rem, 9vw, 3rem) !important; line-height: 1.08 !important; }
  h2, .section-title { font-size: clamp(1.55rem, 6.5vw, 2.25rem) !important; line-height: 1.16 !important; }
  h3 { font-size: clamp(1.15rem, 4.8vw, 1.5rem) !important; }
  .navigation-inner, .footer-container,
  .brand-overview-container, .experiences-container, .highlights-container,
  .gallery-container, .testimonials-container, .location-container, .contact-container,
  .showcase-rooms__container, .details-accordion__container, .rooms-gallery__container,
  .services-vip__container, .pricing-overview__container, .testimonials-rooms__container,
  .contact-conditions__container, .luxury-spa-about__container, .spa-services__container,
  .private-suites__container, .spa-gallery__container, .spa-pricing__container,
  .spa-testimonials__container, .spa-contact__container, .ent-container,
  .restaurant-konzepte-container, .signature-gerichte-container, .private-dining-container,
  .kulinarik-galerie-container, .team-philosophie-container, .gastronomie-testimonials-container,
  .kulinarik-kontakt-container, .philosophy-container, .values-container,
  .team-container, .vision-container, .stats-container, .gallery-container, .contact-container,
  .hotel-context-container { width: 100% !important; max-width: 100% !important; padding-left: var(--mobile-gutter) !important; padding-right: var(--mobile-gutter) !important; }
  .footer-grid, .values-layout, .team-grid, .stats-layout, .gallery-grid, .contact-layout,
  .showcase-rooms__grid, .rooms-gallery__grid, .spa-services__grid, .spa-gallery__grid,
  .spa-testimonials__grid, .ent-grid-wrapper, .ent-services-grid, .ent-gallery-wrapper,
  .ent-testimonials-wrapper, .restaurant-konzepte-grid, .signature-gerichte-grid,
  .kulinarik-galerie-grid, .testimonials-grid, .experiences-grid, .highlights-grid,
  .home-gallery-grid, .home-testimonials-grid, .home-contact-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .services-vip__split, .contact-conditions__split, .luxury-spa-about__grid, .spa-contact__grid,
  .ent-vip-showcase, .ent-pane-layout, .ent-lounge-body, .team-philosophie-container,
  .kulinarik-kontakt-container, .brand-grid, .steps-layout, .details-accordion__grid { flex-direction: column !important; }
  .private-suites__card { flex: 0 0 min(300px, calc(100vw - 32px)) !important; max-width: calc(100vw - 32px); }
  .hero-text-block, .ent-hero-card, .about-hero-overlay, .hero-accommodation__content { padding: clamp(16px, 5vw, 28px) !important; }
  .spa-pricing__table { font-size: .84rem; }
  .spa-pricing__table th, .spa-pricing__table td { padding: 8px 5px !important; }
  .footer-newsletter-form, .newsletter-form { width: 100%; max-width: 100%; }
  .footer-newsletter-input, .newsletter-input, .footer-newsletter-btn, .newsletter-form .btn { width: 100%; min-width: 0; }
  .navigation-mobile-list a { width: 100%; }
  .hotel-context-section { padding: 42px 0; }
}

@media (max-width: 480px) {
  :root { --mobile-gutter: 14px; }
  .navigation-logo-text { font-size: clamp(.8rem, 4vw, 1rem) !important; }
  .footer-grid { gap: 28px !important; }
  .hero-section, .hero-accommodation, .hero-spa-intro, .hero-gastronomie, .ent-hero-overlay, .about-hero { min-height: auto; }
}

@media (max-width: 360px) {
  :root { --mobile-gutter: 12px; }
  h1, .hero-title, .about-hero-title, .hero-accommodation__title, .hero-spa-intro__title, .hero-gastronomie-title, .ent-hero-title { font-size: clamp(1.8rem, 9vw, 2.35rem) !important; }
  .spa-pricing__table { font-size: .76rem; }
}


/* Contrast corrections: keep the existing button backgrounds, use readable text. */
.btn-accent, .footer-newsletter-btn { color: #111111 !important; }
.btn-secondary { color: #111111 !important; }

@media (max-width: 768px) {
  .btn { white-space: normal !important; max-width: 100%; text-align: center; }
  .ent-lounge-info a, .ent-lounge-info .btn { width: 100%; max-width: 100%; }
  .private-suites__rail { flex-direction: column !important; overflow-x: visible !important; gap: var(--spacing-lg) !important; padding-left: var(--mobile-gutter) !important; padding-right: var(--mobile-gutter) !important; }
  .private-suites__card { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; }
}