/* ==========================================================================
   Instanzspezifische Theme-Erweiterungen

   Diese Datei bleibt im Basis-CMS bewusst neutral und wird von Updates weder
   exportiert noch überschrieben. Markenbezogene Sonderregeln können in der
   jeweiligen Website-Instanz ergänzt werden.
   ========================================================================== */

/* SELF Wohnen / Schlafen: preserve the cutout's visual size on tablets and phones.
   Keep the desktop composition and shared CMS styles untouched. */
@media (max-width: 1100px) {
  body:is([data-page="wohnen"], [data-page="schlafen"]) .self-category-stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    min-height: var(--self-category-height-mobile, 640px);
  }

  body:is([data-page="wohnen"], [data-page="schlafen"]) .self-category-stage-section .self-category-headline-wrap {
    position: relative;
    top: auto;
    width: 100%;
    padding-top: 0;
  }

  body:is([data-page="wohnen"], [data-page="schlafen"]) .self-category-headline {
    font-size: clamp(32px, 6.8vw, 64px);
  }

  body:is([data-page="wohnen"], [data-page="schlafen"]) .self-category-cutout {
    position: relative;
    left: 50%;
    bottom: auto;
    width: 100vw;
    height: 600px;
    overflow: hidden;
  }

  body:is([data-page="wohnen"], [data-page="schlafen"]) .self-category-cutout img {
    position: absolute;
    left: 50%;
    width: auto;
    max-width: none;
    height: 100%;
    transform: translateX(-50%);
    object-fit: contain;
    object-position: center bottom;
  }

  body:is([data-page="wohnen"], [data-page="schlafen"]) .self-category-copy {
    position: relative;
    inset: auto;
    width: min(310px, 100%);
  }
}

@media (max-width: 760px) {
  body:is([data-page="wohnen"], [data-page="schlafen"]) .self-category-cutout {
    height: 520px;
  }
}