/* Gut Rechetsberg v324 — Apple/WebKit compatibility.
   Goal: Safari/iOS must paint the same content as Chromium without keeping
   image layers hidden behind reveal/lazy-loading or over-promoting GPU layers. */
html.is-apple-v324 { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
html.is-apple-v324 body { min-width:0; }

/* v333: Die frueher hier erzwungene Sofortsichtbarkeit (opacity:1, visibility:
   visible) ist entfallen. Sie hat auf Apple-Geraeten verhindert, dass die
   Bilder der Unterkuenfte von unten einschweben, wie sie es unter Android tun
   - die Fotos standen bereits sichtbar da, bevor sie in den Blick kamen.
   Dass Safari kein leeres Bildfeld zeigt, sichert seit v329 der
   IntersectionObserver in apple-compat-v324.js zusammen mit dem Vorwaermen
   der Bilder und dem srcset-Rueckfall. */

/* Safari has historically been more fragile when large image textures combine
   backface hiding, contain:paint and nested transforms. Chromium keeps its old
   optimization; Apple gets the safer paint path. */
html.is-apple-v324 img,
html.is-apple-v324 picture,
html.is-apple-v324 video {
  -webkit-backface-visibility:visible !important;
  backface-visibility:visible !important;
}
html.is-apple-v324 .ksa-media,
html.is-apple-v324 .glh-media,
html.is-apple-v324 .lh2-media,
html.is-apple-v324 .apt-media,
html.is-apple-v324 .story-visual,
html.is-apple-v324 .forest-visual,
html.is-apple-v324 .parkx-section {
  will-change:auto !important;
}
html.is-apple-v324 .parkx-section {
  content-visibility:visible !important;
  contain-intrinsic-size:none !important;
}


/* Override the older v312 iOS compositor hints with enough specificity. */
html.is-apple-v324.is-ios-v324 .story-visual img.story-main-image {
  will-change:auto !important;
  -webkit-backface-visibility:visible !important;
  backface-visibility:visible !important;
}

/* iOS/iPadOS: avoid a paint-containing ancestor around the transformed maze.
   The rings themselves are updated through one traditional transform. */

/* iOS image sections: remove clipping/hidden-overflow from the page wrapper,
   while body still guards horizontal overflow through the existing mobile CSS. */
html.is-ios-v324 .accom-page { overflow:visible !important; }

/* Native Safari chrome changes viewport height while scrolling. */
@media (max-width:700px) {
  html.is-ios-v324 .mobile-panel {
    max-height:calc(var(--gr-visual-vh-v324, 100dvh) - var(--header-h,68px)) !important;
    padding-left:max(22px,env(safe-area-inset-left)) !important;
    padding-right:max(22px,env(safe-area-inset-right)) !important;
    padding-bottom:max(28px,env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling:touch;
  }

  /* Absolute-positioned accommodation photos need a definite paint box. */
  /* v333: opacity und transform sind hier entfallen, damit die drei
   Schlafzimmerbilder auf dem iPhone genauso von unten einschweben wie
   alle uebrigen. Dass sie zuverlaessig gezeichnet werden, sichert
   weiterhin hardenIphoneBedroom() in apple-compat-v324.js sowie die
   Regel fuer img[data-iphone-bedroom] weiter unten. */
html.is-ios-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-wide,
  html.is-ios-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-detail,
  html.is-ios-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-panorama {
    display:block !important;
    visibility:visible !important;
    isolation:isolate;
  }
  html.is-ios-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-wide img,
  html.is-ios-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-detail img,
  html.is-ios-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-panorama img {
    display:block !important;
    opacity:1 !important;
    visibility:visible !important;
    -webkit-transform:none !important;
    transform:none !important;
  }
}

@supports (height:100svh) {
  html.is-ios-v324 .parkx-hero { min-height:calc(100svh - var(--header-h,0px)) !important; }
}


/* v324 — iPhone Apartment II bedroom hardening.
   These three photos use baseline JPEG candidates and participate in normal
   layout on iPhone, avoiding Safari's absolute replaced-element paint edge case. */
@media (max-width:700px) {
  body[data-page="kleines-apartment-ii"] .ksa-sleep-stage {
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:start !important;
  }
  body[data-page="kleines-apartment-ii"] .ksa-bedroom-wide,
  body[data-page="kleines-apartment-ii"] .ksa-bedroom-detail,
  body[data-page="kleines-apartment-ii"] .ksa-bedroom-panorama {
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
    contain:none !important;
    transform:none !important;
    -webkit-transform:none !important;
  }
  body[data-page="kleines-apartment-ii"] .ksa-bedroom-wide,
  body[data-page="kleines-apartment-ii"] .ksa-bedroom-panorama {
    aspect-ratio:auto !important;
  }
  body[data-page="kleines-apartment-ii"] .ksa-bedroom-detail {
    aspect-ratio:auto !important;
  }
  body[data-page="kleines-apartment-ii"] img[data-iphone-bedroom] {
    position:relative !important;
    inset:auto !important;
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:1px !important;
    opacity:1 !important;
    visibility:visible !important;
    object-fit:cover !important;
    transform:none !important;
    -webkit-transform:none !important;
  }
  body[data-page="kleines-apartment-ii"] img[data-iphone-bedroom="wide"] {
    aspect-ratio:4 / 3 !important;
    object-position:center 52% !important;
  }
  body[data-page="kleines-apartment-ii"] img[data-iphone-bedroom="detail"] {
    aspect-ratio:4 / 3.5 !important;
    object-position:center 48% !important;
  }
  body[data-page="kleines-apartment-ii"] img[data-iphone-bedroom="panorama"] {
    aspect-ratio:4 / 3 !important;
    object-position:center center !important;
  }
}

/* v324 — iPad navigation: the logo is a real sixth grid item, exactly between
   "Preise" and "Region" rather than absolutely centered over a padded grid. */
@media (min-width:701px) {
  html.is-ipad-v324 .header-inner {
    display:grid !important;
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    align-items:center !important;
    height:var(--header-h) !important;
  }
  html.is-ipad-v324 .nav-left,
  html.is-ipad-v324 .nav-right { display:contents !important; }
  html.is-ipad-v324 .nav-accommodation,
  html.is-ipad-v324 .nav-link,
  html.is-ipad-v324 .sticky-mark { justify-self:center !important; }
  html.is-ipad-v324 .sticky-mark {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:68px !important;
    height:64px !important;
    margin:0 !important;
    transform:translateY(-4px) scale(.78) !important;
    -webkit-transform:translateY(-4px) scale(.78) !important;
    transform-origin:center !important;
  }
  html.is-ipad-v324 .site-header.scrolled .sticky-mark,
  html.is-ipad-v324 .site-header.menu-open .sticky-mark {
    transform:none !important;
    -webkit-transform:none !important;
  }
  html.is-ipad-v324 .sticky-mark img {
    height:50px !important;
    width:auto !important;
    max-width:none !important;
  }
}
@media (min-width:701px) and (max-width:820px) {
  html.is-ipad-v324 .header-inner { padding:0 194px 0 12px !important; }
  html.is-ipad-v324 .utility { width:188px !important; }
  html.is-ipad-v324 .nav-link { font-size:10.25px !important; letter-spacing:.025em !important; }
  html.is-ipad-v324 .sticky-mark { width:58px !important; }
  html.is-ipad-v324 .sticky-mark img { height:44px !important; }
}
@media (min-width:821px) and (max-width:1180px) {
  html.is-ipad-v324 .header-inner { padding:0 218px 0 18px !important; }
  html.is-ipad-v324 .utility { width:212px !important; }
}
@media (min-width:1181px) {
  html.is-ipad-v324 .header-inner { padding:0 244px 0 28px !important; }
  html.is-ipad-v324 .utility { width:238px !important; padding-left:14px !important; padding-right:14px !important; }
}

/* iPad Safari portrait: remove paint containment that can retain stale crops
   after rotation, and reduce the overly tall desktop crops at tablet width. */
@media (min-width:701px) and (max-width:1024px) and (orientation:portrait) {

  html.is-ipad-v324 .forest-grid,
  html.is-ipad-v324 .forest-copy,
  html.is-ipad-v324 .forest-image { min-height:540px !important; }
  html.is-ipad-v324 .story-section,
  html.is-ipad-v324 .story-region .story-visual { min-height:520px !important; }

  /* Apartment II's asymmetric bedroom pair is too narrow/tall on 768–834px.
     Give each photograph its natural editorial width in portrait. */
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-sleep-stage {
    grid-template-columns:1fr !important;
  }
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-wide,
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-detail {
    min-height:0 !important;
    aspect-ratio:16 / 10 !important;
  }
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-detail img {
    object-position:center 46% !important;
  }
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-panorama {
    aspect-ratio:16 / 9 !important;
  }

  /* Keep wide editorial images from becoming unusually tall narrow crops. */
  html.is-ipad-v324 body[data-page="grosses-apartment-i"] .apt-lounge-detail,
  html.is-ipad-v324 body[data-page="grosses-apartment-i"] .lounge-card:nth-child(3) {
    aspect-ratio:16 / 8 !important;
  }
  html.is-ipad-v324 body[data-page="small-house-ii"] .lh2-wide,
  html.is-ipad-v324 body[data-page="small-house-ii"] .lh2-living-main,
  html.is-ipad-v324 body[data-page="small-house-ii"] .lh2-bath-main {
    aspect-ratio:16 / 9 !important;
  }
}


/* ==========================================================================
   v324 — iPad portrait final layout
   Portrait is intentionally composed as a tablet layout, not a compressed
   desktop row. Landscape remains governed by the existing v324 tablet rules.
   ========================================================================== */
@media (min-width:701px) and (max-width:1024px) and (orientation:portrait) {
  /* --- Header / navigation ------------------------------------------------ */
  html.is-ipad-v324 .site-header {
    height:96px !important;
  }
  html.is-ipad-v324 .header-inner {
    box-sizing:border-box !important;
    height:64px !important;
    width:100% !important;
    padding:0 8px !important;
    display:grid !important;
    /* Seven optical cells keep the logo on the true viewport centre.
       DOM items occupy cells 1–6; cell 7 is the intentional counterweight. */
    grid-template-columns:repeat(7,minmax(0,1fr)) !important;
    grid-template-rows:64px !important;
    column-gap:0 !important;
    align-items:center !important;
  }
  html.is-ipad-v324 .header-inner .nav-left,
  html.is-ipad-v324 .header-inner .nav-right {
    display:contents !important;
  }
  html.is-ipad-v324 .header-inner .nav-accommodation,
  html.is-ipad-v324 .header-inner .nav-link,
  html.is-ipad-v324 .header-inner .sticky-mark {
    min-width:0 !important;
    max-width:100% !important;
    justify-self:center !important;
  }
  html.is-ipad-v324 .header-inner .nav-link {
    display:block !important;
    padding:0 3px !important;
    font-size:clamp(10px,1.36vw,11.5px) !important;
    line-height:1.15 !important;
    letter-spacing:.025em !important;
    white-space:nowrap !important;
    text-align:center !important;
  }
  html.is-ipad-v324 .header-inner .sticky-mark {
    position:relative !important;
    left:auto !important;
    top:auto !important;
    width:56px !important;
    height:58px !important;
    margin:0 !important;
    opacity:1 !important;
    pointer-events:auto !important;
    transform:none !important;
    -webkit-transform:none !important;
    transition:opacity .25s ease !important;
  }
  html.is-ipad-v324 .site-header.scrolled .sticky-mark,
  html.is-ipad-v324 .site-header.menu-open .sticky-mark {
    opacity:1 !important;
    transform:none !important;
    -webkit-transform:none !important;
  }
  html.is-ipad-v324 .header-inner .sticky-mark img {
    display:block !important;
    width:auto !important;
    height:44px !important;
    max-width:none !important;
    margin:auto !important;
  }

  /* Quick-access controls get their own compact second row. This preserves all
     functions without stealing width from the centred main navigation row. */
  html.is-ipad-v324 .utility {
    box-sizing:border-box !important;
    position:absolute !important;
    top:64px !important;
    left:0 !important;
    right:0 !important;
    width:100% !important;
    max-width:none !important;
    height:32px !important;
    min-height:32px !important;
    padding:0 10px !important;
    gap:12px !important;
    justify-content:center !important;
    transform:none !important;
    -webkit-transform:none !important;
    background:rgba(46,56,67,.14) !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.11) !important;
    border-radius:0 !important;
    -webkit-backdrop-filter:none !important;backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  html.is-ipad-v324 .utility-link,
  html.is-ipad-v324 .utility-link:nth-child(1),
  html.is-ipad-v324 .utility-link:nth-child(2),
  html.is-ipad-v324 .utility-link:nth-child(3),
  html.is-ipad-v324 .utility-link:nth-child(4) {
    display:inline-grid !important;
    width:27px !important;
    min-width:27px !important;
    height:30px !important;
    place-items:center !important;
  }
  html.is-ipad-v324 .utility-link svg {
    width:17px !important;
    height:17px !important;
  }
  html.is-ipad-v324 .language { margin-left:1px !important; }
  html.is-ipad-v324 .language-button {
    min-width:49px !important;
    width:49px !important;
    height:30px !important;
    padding:0 6px !important;
    font-size:11px !important;
  }

  /* --- Apartment II / bedroom gallery ----------------------------------- */
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-sleep-head {
    grid-template-columns:1fr !important;
    gap:24px !important;
    margin-bottom:38px !important;
  }
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-sleep-head .ksa-copy {
    max-width:60ch !important;
  }
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-sleep-stage {
    display:grid !important;
    grid-template-columns:minmax(0,2fr) minmax(0,1fr) !important;
    gap:16px !important;
    align-items:start !important;
  }
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-wide {
    grid-column:1 !important;
    grid-row:1 !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:4 / 3 !important;
    border-radius:26px !important;
  }
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-detail {
    grid-column:2 !important;
    grid-row:1 !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:2 / 3 !important;
    border-radius:26px !important;
  }
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-panorama {
    grid-column:1 / -1 !important;
    grid-row:2 !important;
    min-height:0 !important;
    height:auto !important;
    aspect-ratio:2 / 1 !important;
    border-radius:26px !important;
  }
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-wide img,
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-detail img,
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-panorama img {
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-wide img { object-position:center 52% !important; }
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-detail img { object-position:center 49% !important; }
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-bedroom-panorama img { object-position:center center !important; }
  html.is-ipad-v324 body[data-page="kleines-apartment-ii"] .ksa-sleep-caption {
    left:16px !important;
    right:16px !important;
    bottom:15px !important;
    padding:12px 14px !important;
    border-radius:14px !important;
    font-size:10px !important;
    line-height:1.5 !important;
  }

  /* --- Homepage labyrinth ------------------------------------------------ */
}