/* SpaCulture GmbH – gemeinsame Styles */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: #141618; color: #ECEAE6; font-family: 'Public Sans', 'Helvetica Neue', Arial, sans-serif; }
main { display: block; }
section.frame { display: block; overflow: hidden; scroll-margin-top: 0; }
section.frame .dc-host { display: flex; justify-content: center; }
section.frame .dc-host > * { flex-shrink: 0; }
img, video { max-width: 100%; }
:focus-visible { outline: 3px solid #E8762C; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ---------- mobile Kopfzeile ---------- */
.mbar, .mnav { display: none; }
.mbar {
  position: sticky; top: 0; z-index: 50; height: 64px; padding: 0 16px;
  align-items: center; justify-content: space-between;
  background: rgba(20, 22, 24, 0.96); border-bottom: 1px solid #2E3338;
  backdrop-filter: blur(6px);
}
.mbar-logo img { height: 44px; width: auto; display: block; }
.mbar-toggle {
  min-height: 44px; padding: 0 18px; border: 1px solid #4A5056; border-radius: 2px;
  background: transparent; color: #ECEAE6; font: 600 15px/1 'Public Sans', Arial, sans-serif; cursor: pointer;
}
.mbar-toggle[aria-expanded="true"] { background: #E8762C; border-color: #E8762C; color: #17191B; }
.mnav {
  position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 49; overflow-y: auto;
  background: #141618; padding: 12px 16px 32px; flex-direction: column;
}
.mnav a {
  display: block; padding: 16px 4px; border-bottom: 1px solid #2E3338; color: #ECEAE6;
  font: 600 20px/1.2 'Archivo', 'Helvetica Neue', Arial, sans-serif; text-decoration: none;
}
.mnav a[aria-current="page"] { color: #E8762C; }
.mnav .mnav-cta {
  margin-top: 20px; border: 0; text-align: center; background: #E8762C; color: #17191B; border-radius: 2px; font-size: 17px;
}
body.menu-open { overflow: hidden; }

/* ---------- Handy (unter 900 px): Inhalte untereinander ---------- */
@media (max-width: 899px) {
  .mbar { display: flex; }
  .mnav:not([hidden]) { display: flex; }

  .frame .dc-host > * {
    width: 100% !important; height: auto !important; min-height: 0 !important; max-width: 100% !important;
    box-sizing: border-box !important; padding: 48px 16px !important; zoom: 1 !important;
  }
  .frame header { display: none !important; }
  .frame nav.sub {
    position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important;
    height: auto !important; min-height: 48px; margin: -48px -16px 28px !important; padding: 0 16px !important;
    flex-wrap: nowrap !important; overflow-x: auto; white-space: nowrap; gap: 20px !important;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
  }
  .frame nav.sub a, .frame nav.sub span { flex-shrink: 0; }
  .frame nav.sub [style*="margin-left: auto"] { margin-left: 0 !important; }

  .frame [style*="grid-template-columns"] { grid-template-columns: minmax(0, 1fr) !important; }
  .frame [style*="grid-column"] { grid-column: auto !important; }
  .frame [style*="grid-row"] { grid-row: auto !important; }
  .frame [style*="grid-template-rows"] { grid-template-rows: none !important; }
  .frame [style*="display: flex"] { flex-wrap: wrap !important; }
  .frame [style*="white-space: nowrap"] { white-space: normal !important; }

  .frame [style*="position: absolute"]:not([aria-hidden]):not([aria-hidden] *):not(img):not(video) {
    position: relative !important; inset: auto !important; left: auto !important; right: auto !important;
    top: auto !important; bottom: auto !important; transform: none !important;
    width: auto !important; max-width: 100% !important; margin-bottom: 24px;
  }
  .frame [style*="width: 1"][style*="px"]:not(img):not(svg):not(span),
  .frame [style*="width: 2"][style*="px"]:not(img):not(svg):not(span),
  .frame [style*="width: 3"][style*="px"]:not(img):not(svg):not(span),
  .frame [style*="width: 4"][style*="px"]:not(img):not(svg):not(span),
  .frame [style*="width: 5"][style*="px"]:not(img):not(svg):not(span),
  .frame [style*="width: 6"][style*="px"]:not(img):not(svg):not(span),
  .frame [style*="width: 7"][style*="px"]:not(img):not(svg):not(span) { max-width: 100% !important; }
  .frame [style*="height: 5"][style*="px"]:not(img):not(video):not([style*="height: 50px"]):not([style*="height: 51px"]):not([style*="height: 52px"]):not([style*="height: 53px"]):not([style*="height: 54px"]):not([style*="height: 55px"]):not([style*="height: 56px"]):not([style*="height: 57px"]):not([style*="height: 58px"]):not([style*="height: 59px"]),
  .frame [style*="height: 6"][style*="px"]:not(img):not(video):not([style*="height: 60px"]):not([style*="height: 61px"]):not([style*="height: 62px"]):not([style*="height: 63px"]):not([style*="height: 64px"]):not([style*="height: 65px"]):not([style*="height: 66px"]):not([style*="height: 67px"]):not([style*="height: 68px"]):not([style*="height: 69px"]),
  .frame [style*="height: 7"][style*="px"]:not(img):not(video):not([style*="height: 70px"]):not([style*="height: 71px"]):not([style*="height: 72px"]):not([style*="height: 73px"]):not([style*="height: 74px"]):not([style*="height: 75px"]):not([style*="height: 76px"]):not([style*="height: 77px"]):not([style*="height: 78px"]):not([style*="height: 79px"]) { height: auto !important; min-height: 280px; }
  .frame img[style*="width: 3"], .frame img[style*="width: 4"] { width: 100% !important; height: auto !important; }

  /* Schriftgrössen */
  .frame [style*="font-size: 120px"], .frame [style*="font-size: 112px"], .frame [style*="font-size: 104px"],
  .frame [style*="font-size: 96px"], .frame [style*="font-size: 92px"], .frame [style*="font-size: 88px"], .frame [style*="font-size: 84px"] { font-size: 44px !important; line-height: 1 !important; }
  .frame [style*="font-size: 80px"], .frame [style*="font-size: 76px"], .frame [style*="font-size: 72px"], .frame [style*="font-size: 68px"] { font-size: 40px !important; line-height: 1.02 !important; }
  .frame [style*="font-size: 64px"], .frame [style*="font-size: 60px"], .frame [style*="font-size: 56px"] { font-size: 34px !important; line-height: 1.05 !important; }
  .frame [style*="font-size: 52px"], .frame [style*="font-size: 48px"], .frame [style*="font-size: 44px"] { font-size: 30px !important; }
  .frame [style*="font-size: 40px"], .frame [style*="font-size: 38px"], .frame [style*="font-size: 36px"] { font-size: 26px !important; }
  .frame h1, .frame h2 { overflow-wrap: anywhere; hyphens: auto; }

  /* verschachtelte grosse Innenabstände reduzieren */
  .frame .dc-host > * [style*="padding: 72px 80px 40px"], .frame .dc-host > * [style*="padding: 112px 80px 88px"],
  .frame .dc-host > * [style*="padding: 64px 80px 96px"], .frame .dc-host > * [style*="padding: 104px 80px"],
  .frame .dc-host > * [style*="padding: 96px 80px"], .frame .dc-host > * [style*="padding: 112px 80px"] {
    padding: 32px 0 !important;
  }
  .frame .dc-host > * [style*="padding: 48px"], .frame .dc-host > * [style*="padding: 36px 48px"],
  .frame .dc-host > * [style*="padding: 44px"], .frame .dc-host > * [style*="padding: 40px"] { padding: 24px !important; }
  /* Hintergrundbilder abdunkeln, damit Text lesbar bleibt */
  .frame .dc-host > * > img[style*="position: absolute"], .frame .dc-host > * > video[style*="position: absolute"] { filter: brightness(0.42); }

  /* dekorative Dashboards im Hero auf dem Handy ausblenden */
  #gewerblich-hero [aria-hidden][style*="right: 80px"],
  #privat-kundendienst [aria-hidden][style*="right: 80px"] { display: none !important; }
  /* Projektablauf: Phasen als 3er-Raster statt Zeitstrahl */
  #gewerblich-ablauf [style*="height: 4px"] { display: none !important; }
  #gewerblich-ablauf [role="tablist"] { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; margin-top: 0 !important; row-gap: 18px; }
  #gewerblich-ablauf [role="tablist"] button { padding: 0 !important; height: auto !important; }
  /* Ion-Spa-Visual: genug Höhe für Video und Kennzahl */
  #gewerblich-ionspa video { min-height: 260px; }
  .frame span[style*="right: 16px"][style*="top: 36px"] { position: absolute !important; right: 12px !important; top: 12px !important; left: auto !important; margin: 0 !important; z-index: 2; }

  /* eigenständige Seiten (Kontakt, Impressum …) */
  body.standalone header.top { display: none; }
}

/* ---------- Sprachwahl ---------- */
.langbar { background: #23272B; border-bottom: 2px solid #E8762C; position: relative; z-index: 60; }
.langbar-in {
  max-width: 1440px; margin: 0 auto; padding: 8px 40px; min-height: 52px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: flex-end; gap: 18px;
}
.langbar-label {
  display: inline-flex; align-items: center; gap: 9px; color: #ECEAE6;
  font: 600 14px/1 'Public Sans', 'Helvetica Neue', Arial, sans-serif;
}
.langbar-globe { color: #E8762C; flex-shrink: 0; }
.langbar-list { display: flex; flex-wrap: wrap; gap: 8px; }
.langbar a {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px;
  border: 1px solid #5A6066; border-radius: 999px; color: #ECEAE6; text-decoration: none;
  font: 500 14px/1 'Public Sans', 'Helvetica Neue', Arial, sans-serif; transition: border-color .15s, background .15s;
}
.langbar a b { font: 600 12px/1 'JetBrains Mono', ui-monospace, Menlo, monospace; letter-spacing: .06em; color: #E8762C; }
.langbar a:hover { border-color: #E8762C; background: rgba(232, 118, 44, .10); }
.langbar a[aria-current] { background: #E8762C; border-color: #E8762C; color: #17191B; font-weight: 600; }
.langbar a[aria-current] b { color: #17191B; }
.legal-note {
  margin: 0; padding: 12px 24px; background: #2A2016; color: #F3C9A8; border-bottom: 1px solid #4A3420;
  font: 500 14px/1.45 'Public Sans', 'Helvetica Neue', Arial, sans-serif; text-align: center;
}
@media (max-width: 899px) {
  .langbar-in { padding: 8px 12px; justify-content: center; gap: 10px; min-height: 0; }
  .langbar-label span, .langbar-label { font-size: 0; gap: 0; }
  .langbar-label svg { width: 22px; height: 22px; }
  .langbar-list { gap: 6px; flex-wrap: nowrap; }
  .langbar a { padding: 0 11px; min-height: 36px; }
  .langbar a span { display: none; }
  .langbar a b { font-size: 13px; }
}