/* ==========================================================================
   Gut Rechetsberg v328 — Tablet-Layout, Hoch- und Querformat (701–1180px)

   Ersetzt ipad-portrait-v327.css. Zwei Gründe für die Neufassung:

   a) Die v327-Regeln lagen hinter body[data-page="home"]. Dieses Attribut
      wurde von site-quality.js auf "index" überschrieben, die Regeln waren
      daher wirkungslos.

   b) Das zweispaltige v327-Raster passte rechnerisch nicht: bei 768px war
      Spalte 1 rund 380px breit, das Labyrinth aber auf min(67vw,640px)=514px
      gesetzt; die Textspalte endete inklusive margin-left bei 769,9px. Das
      Labyrinth wurde links beschnitten, der Text lief rechts aus dem Bild.

   Hochformat wird deshalb konsequent einspaltig komponiert — Labyrinth oben,
   Text darunter. Die Regeln laufen über reine Media Queries, damit Android-
   Tablets im Hochformat exakt dieselbe Ansicht erhalten wie iPads.
   ========================================================================== */

@media (orientation:portrait) and (min-width:701px) and (max-width:1180px){

  /* ---------- Startseite: Labyrinth ---------- */
  body[data-page="home"] .home-park-maze,
  body[data-page="index"] .home-park-maze,
  body[data-page="home"] section.home-park-maze,
  body[data-page="index"] section.home-park-maze{
    box-sizing:border-box!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
    grid-template-columns:none!important;
    grid-template-rows:none!important;
    column-gap:0!important;
    row-gap:0!important;
    gap:clamp(30px,4.4vw,48px)!important;
    width:100%!important;
    max-width:100%!important;
    padding:clamp(34px,4.6vw,60px) clamp(32px,5vw,66px) clamp(52px,6.4vw,80px)!important;
    overflow:hidden!important;
  }

  body[data-page="home"] .home-park-maze>.park-maze,
  body[data-page="index"] .home-park-maze>.park-maze{
    flex:0 0 auto!important;
    position:relative!important;
    grid-column:auto!important;
    grid-row:auto!important;
    align-self:center!important;
    justify-self:center!important;
    /* Bewusst auf die verfügbare Innenbreite begrenzt, damit nichts mehr
       durch overflow:hidden abgeschnitten wird. */
    width:min(76vw,600px)!important;
    max-width:100%!important;
    margin:0 auto!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    -webkit-transform:none!important;
  }

  body[data-page="home"] .home-park-maze>.home-park-maze__copy,
  body[data-page="index"] .home-park-maze>.home-park-maze__copy{
    box-sizing:border-box!important;
    flex:0 0 auto!important;
    grid-column:auto!important;
    grid-row:auto!important;
    align-self:center!important;
    justify-self:center!important;
    width:100%!important;
    max-width:min(100%,620px)!important;
    margin:0 auto!important;
    padding:0!important;
    text-align:left!important;
  }

  body[data-page="home"] .home-park-maze__copy h2,
  body[data-page="index"] .home-park-maze__copy h2{
    max-width:14ch!important;
    margin-bottom:22px!important;
    font-size:clamp(46px,6.4vw,66px)!important;
    line-height:1.02!important;
  }
  body[data-page="home"] .home-park-maze__copy p,
  body[data-page="index"] .home-park-maze__copy p{
    max-width:100%!important;
    margin-bottom:28px!important;
    font-size:17px!important;
    line-height:1.72!important;
  }
  body[data-page="home"] .home-park-maze__eyebrow,
  body[data-page="index"] .home-park-maze__eyebrow{
    margin-bottom:20px!important;
  }

  /* Der geschwungene Herkunftsschriftzug sitzt wieder auf der Mittelachse
     des Labyrinths. v327 hatte ihn um -46,2% verschoben, um die seitliche
     Verschiebung des Rasters auszugleichen. */
  body[data-page="home"] .park-maze__arc-note,
  body[data-page="index"] .park-maze__arc-note{
    position:absolute!important;
    inset:-3.5%!important;
    left:-3.5%!important;
    right:auto!important;
    width:107%!important;
    height:107%!important;
    margin:0!important;
    transform:none!important;
    -webkit-transform:none!important;
  }

  /* ---------- Bildausschnitte im Hochformat ----------
     Die Desktop-Kompositionen sind auf breite Rahmen gerechnet. In einer
     schmalen Hochformatspalte werden daraus hohe, schmale Beschnitte, bei
     denen das Motiv seitlich herausfällt. Die folgenden Seitenverhältnisse
     geben den Fotos wieder eine ruhige, redaktionelle Form.
     Bisher lagen diese Korrekturen hinter html.is-ipad-v324 und wirkten damit
     nur auf iPads; jetzt gelten sie für jedes Tablet im Hochformat. */
  .hero,
  .story-section,
  .story-visual,
  .forest-image,
  .park-maze,
  .accom-photo-frame,
  .ksa-media,
  .apt-media,
  .glh-media,
  .lh2-media{
    contain:none!important;
  }

  body[data-page="kleines-apartment-ii"] .ksa-sleep-head{
    grid-template-columns:1fr!important;
    gap:24px!important;
    margin-bottom:38px!important;
  }
  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;
  }
  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;
  }
  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;
  }
  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;
  }
  body[data-page="kleines-apartment-ii"] .ksa-bedroom-wide img,
  body[data-page="kleines-apartment-ii"] .ksa-bedroom-detail img,
  body[data-page="kleines-apartment-ii"] .ksa-bedroom-panorama img{
    position:absolute!important;inset:0!important;
    width:100%!important;height:100%!important;object-fit:cover!important;
  }
  body[data-page="kleines-apartment-ii"] .ksa-bedroom-wide img{object-position:center 52%!important}
  body[data-page="kleines-apartment-ii"] .ksa-bedroom-detail img{object-position:center 49%!important}
  body[data-page="kleines-apartment-ii"] .ksa-bedroom-panorama img{object-position:center center!important}

  body[data-page="grosses-apartment-i"] .apt-lounge-detail,
  body[data-page="grosses-apartment-i"] .lounge-card:nth-child(3){
    aspect-ratio:16/8!important;
  }
  body[data-page="small-house-ii"] .lh2-wide,
  body[data-page="small-house-ii"] .lh2-living-main,
  body[data-page="small-house-ii"] .lh2-bath-main{
    aspect-ratio:16/9!important;
  }

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


/* ==========================================================================
   Querformat 701–1180px

   Auch hier lief das Labyrinth über seine Rasterspalte hinaus: bei 1024px
   ergab minmax(520px,1.28fr) eine 609px breite Spalte, während .park-maze auf
   min(70vw,760px) = 717px stand. Die überstehenden 108px verschwanden im
   overflow:hidden des Abschnitts. Das Labyrinth folgt jetzt der Spaltenbreite.
   ========================================================================== */
@media (orientation:landscape) and (min-width:701px) and (max-width:1180px){
  body[data-page="home"] .home-park-maze,
  body[data-page="index"] .home-park-maze{
    grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr)!important;
    align-items:center!important;
    gap:clamp(28px,4vw,52px)!important;
    padding:clamp(30px,4vw,54px) clamp(26px,3.6vw,48px) clamp(44px,5vw,66px)!important;
    overflow:hidden!important;
  }
  body[data-page="home"] .home-park-maze>.park-maze,
  body[data-page="index"] .home-park-maze>.park-maze{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    left:auto!important;
    right:auto!important;
    transform:none!important;
    -webkit-transform:none!important;
  }
  body[data-page="home"] .home-park-maze__copy,
  body[data-page="index"] .home-park-maze__copy{
    max-width:100%!important;
    margin:0!important;
  }
  body[data-page="home"] .home-park-maze__copy h2,
  body[data-page="index"] .home-park-maze__copy h2{
    max-width:12ch!important;
    font-size:clamp(38px,4.6vw,56px)!important;
    line-height:1.03!important;
  }
  body[data-page="home"] .home-park-maze__copy p,
  body[data-page="index"] .home-park-maze__copy p{
    max-width:100%!important;
    font-size:16px!important;
  }
}


/* ==========================================================================
   Übertitel des Labyrinths

   index.html setzt `html.is-ipad-v316 .park-maze{contain:layout paint}`.
   Paint-Containment beschneidet auf die Padding-Box — der geschwungene
   Herkunftsschriftzug liegt aber mit inset:-3.5% bewusst ausserhalb und
   wurde dadurch oben abgeschnitten. Die bisherige Gegenregel stand in
   apple-compat-v324.css und ist mit den überholten Labyrinth-Regeln
   entfallen. Sie ist hier mit ausreichender Spezifität wieder da — und
   gilt jetzt für jedes Tablet, nicht nur für iPads.
   ========================================================================== */
@media (min-width:701px) and (max-width:1366px){
  html body .home-park-maze .park-maze{
    contain:none!important;
    overflow:visible!important;
  }
  html body .home-park-maze .park-maze .park-maze__arc-note{
    overflow:visible!important;
    z-index:24!important;
  }
}