/* ==================================================
   STUDIO NOX — RESPONSIVE + MOBILE FINAL PATCH
   Browsergrößen, Tablet und Handy sauber skalieren
   ================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  width: 100%;
  min-width: 320px;
  overflow-x: hidden;
}

body {
  width: 100%;
  min-width: 320px;
  overflow-x: hidden !important;
}

/* Grundcontainer nie breiter als Browser */
main,
section,
header,
footer,
nav,
.nox-page,
.nox-shell,
.nox-container,
.nox-content,
.nox-grid,
.nox-card,
.glass-card,
.nox-panel {
  max-width: 100%;
}

/* Bilder responsiv */
img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* Große Layouts elastischer machen */
.nox-container,
.nox-section,
.nox-wrapper {
  width: min(1180px, calc(100vw - 32px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Grids automatisch umbrechen */
.nox-grid,
.girls-grid,
.damen-grid,
.ladies-grid,
.nox-ladies-grid,
.service-grid,
.price-grid,
.nox-price-grid,
.nox-price-grid-v2,
.extra-grid,
.nox-extra-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)) !important;
  gap: clamp(14px, 2vw, 24px) !important;
}

/* Buttons dürfen nicht ausbrechen */
a,
button,
.nox-btn,
.btn,
.cta,
.nox-actions a,
.nox-actions button {
  max-width: 100%;
  white-space: normal;
  word-break: normal;
}

/* Preise immer zusammenhalten */
.nox-price-nowrap,
.price,
.price-value,
.nox-price,
.nox-duration-price strong,
.price-card strong,
.nox-price-card strong {
  white-space: nowrap !important;
}

/* Damenkarten */
.nox-lady-card,
.nox-lady-v2-card,
.lady-card,
.girl-card {
  width: 100% !important;
  overflow: hidden !important;
  border-radius: 28px !important;
}

.nox-lady-card img,
.nox-lady-v2-card img,
.lady-card img,
.girl-card img {
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
}

/* Desktop: Profile bleiben im sichtbaren Bereich */
.nox-profile-explosion {
  overflow: hidden !important;
}

.nox-profile-stage {
  width: 100vw !important;
  height: 100vh !important;
  overflow: auto !important;
}

/* Profil-Fragmente nicht abschneiden */
.nox-fragment {
  max-width: calc(100vw - 32px) !important;
}

/* Tablet */
@media (max-width: 1024px) {
  .nox-container,
  .nox-section,
  .nox-wrapper {
    width: min(960px, calc(100vw - 28px)) !important;
  }

  h1,
  .hero-title,
  .nox-title {
    font-size: clamp(2.1rem, 7vw, 4.8rem) !important;
    line-height: 1.05 !important;
  }

  h2 {
    font-size: clamp(1.6rem, 5vw, 3rem) !important;
  }

  .nox-profile-stage {
    padding: 76px 18px 28px !important;
  }
}

/* Handy */
@media (max-width: 760px) {
  body {
    font-size: 15px;
  }

  .nox-container,
  .nox-section,
  .nox-wrapper {
    width: calc(100vw - 24px) !important;
  }

  header,
  nav,
  .nox-nav,
  .site-nav {
    max-width: 100vw !important;
    overflow-x: auto !important;
  }

  .nox-grid,
  .girls-grid,
  .damen-grid,
  .ladies-grid,
  .nox-ladies-grid,
  .service-grid,
  .price-grid,
  .nox-price-grid,
  .nox-price-grid-v2,
  .extra-grid,
  .nox-extra-grid {
    grid-template-columns: 1fr !important;
  }

  .hero,
  .nox-hero,
  .start-hero {
    min-height: auto !important;
    padding: 88px 14px 42px !important;
  }

  h1,
  .hero-title,
  .nox-title {
    font-size: clamp(2rem, 12vw, 3.8rem) !important;
    line-height: .98 !important;
    letter-spacing: .05em !important;
  }

  h2 {
    font-size: clamp(1.45rem, 8vw, 2.5rem) !important;
  }

  p {
    max-width: 100%;
  }

  .nox-actions,
  .actions,
  .cta-row,
  .button-row {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .nox-actions a,
  .nox-actions button,
  .btn,
  .nox-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Damenprofil mobil: Fullscreen, aber sauber scrollbar */
  .nox-profile-explosion {
    position: fixed !important;
    inset: 0 !important;
    overflow: hidden !important;
  }

  .nox-profile-stage {
    width: 100vw !important;
    height: 100dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 72px 12px 24px !important;
    display: grid !important;
    gap: 14px !important;
  }

  .nox-profile-close {
    top: 12px !important;
    right: 12px !important;
    width: 44px !important;
    height: 44px !important;
    z-index: 999999 !important;
  }

  .nox-fragment,
  .nox-frag-portrait,
  .nox-frag-profile,
  .nox-frag-availability,
  .nox-frag-prices,
  .nox-frag-extras-wide,
  .nox-frag-actions {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    transform: none !important;
  }

  .nox-frag-portrait {
    min-height: 340px !important;
  }

  .nox-frag-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .nox-frag-actions a {
    min-width: 0 !important;
    width: 100% !important;
  }

  .nox-profile-extra-list,
  .nox-mini-price-grid,
  .nox-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .nox-profile-extra-list span,
  .nox-mini-price-grid span,
  .nox-tags span {
    max-width: 100%;
    white-space: nowrap;
  }
}

/* Sehr kleine Handys */
@media (max-width: 390px) {
  .nox-container,
  .nox-section,
  .nox-wrapper {
    width: calc(100vw - 18px) !important;
  }

  h1,
  .hero-title,
  .nox-title {
    font-size: clamp(1.8rem, 13vw, 3rem) !important;
  }

  .nox-profile-stage {
    padding-left: 9px !important;
    padding-right: 9px !important;
  }

  .nox-fragment {
    padding: 14px !important;
    border-radius: 20px !important;
  }
}