/* ==========================================================================
   Gut Rechetsberg v330 — Darstellungsgleichheit Apple ↔ Android
   Wird als letztes Stylesheet geladen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Hero-Überblendung Sommer ↔ Winter (Startseite, Mobil)

   Auf Mobilgeräten liegt das Sommerbild als CSS-Hintergrund auf .hero
   (background-size:cover, zentriert). Das Winterbild ist ein <img> darüber,
   das per heroWinterFade ein- und ausblendet.

   Android bekommt dafür transform:none und eine 7,6-Sekunden-Blende. iOS
   bekam über html.is-ios abweichend transform:scale(1.0225) und 9,6 Sekunden.
   Die Winterebene war dadurch 2,25 % grösser als der Sommerhintergrund — die
   beiden Bilder lagen also nie deckungsgleich übereinander, und die Blende
   lief in einem anderen Takt. Genau das sieht man als unsauberen Übergang.

   iOS übernimmt hier jetzt exakt die Android-Werte.
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  html.is-ios .hero-winter-bg,
  html.is-ios-v324 .hero-winter-bg{
    left:0!important; right:0!important; top:0!important; bottom:0!important;
    width:100%!important; height:100%!important;
    object-fit:cover!important;
    object-position:center center!important;
    transform:none!important;
    -webkit-transform:none!important;
    animation:heroWinterFade 7.6s ease-in-out infinite!important;
  }
  html.is-ios .hero-bg,
  html.is-ios-v324 .hero-bg{
    transform:none!important;
    -webkit-transform:none!important;
  }
}

/* --------------------------------------------------------------------------
   2. Textenthüllungen beim Scrollen

   Die Effekte setzen laufend CSS-Variablen wie --line-reveal und lesen sie in
   clip-path bzw. in einem Farbverlauf mit background-clip:text aus. Nicht
   registrierte Custom Properties sind für den Browser reine Zeichenketten;
   WebKit stösst bei ihrer Änderung nicht zuverlässig ein Neuzeichnen an, wenn
   sie in genau diesen beiden Eigenschaften stecken. Der Effekt bleibt dann
   auf seinem Anfangswert stehen — unter Chromium fällt das nicht auf.

   Mit @property ist der Typ bekannt und der Wert wird als animierbare Länge
   behandelt. Browser ohne @property ignorieren den Block; dort gilt weiter
   der bisherige Fallback var(--x, 0%).
   -------------------------------------------------------------------------- */
@property --line-reveal            { syntax:"<percentage>"; inherits:true; initial-value:0%; }
@property --story-line-reveal      { syntax:"<percentage>"; inherits:true; initial-value:0%; }
@property --intro-line-reveal      { syntax:"<percentage>"; inherits:true; initial-value:0%; }
@property --park-maze-title-reveal { syntax:"<percentage>"; inherits:true; initial-value:0%; }
@property --overview-title-reveal  { syntax:"<percentage>"; inherits:true; initial-value:0%; }
@property --accom-title-reveal     { syntax:"<percentage>"; inherits:true; initial-value:0%; }
@property --parkx-title-reveal     { syntax:"<percentage>"; inherits:true; initial-value:0%; }
@property --region-reveal          { syntax:"<percentage>"; inherits:true; initial-value:0%; }
@property --prx-reveal             { syntax:"<percentage>"; inherits:true; initial-value:0%; }
@property --reveal                 { syntax:"<percentage>"; inherits:true; initial-value:0%; }

/* WebKit zeichnet mit background-clip:text bzw. clip-path beschnittenen Text
   nicht mehr zuverlässig, sobald ein Vorfahre eine eigene Compositing-Ebene
   erzwingt. v312 setzt genau das auf .story-copy-inner. Die Gegenregel stand
   in apple-compat-v324.css und ist in v328 versehentlich mitentfernt worden. */
html.is-apple-v324 .story-copy-inner,
html.is-apple-v324 .forest-line-text,
html.is-apple-v324 .story-line-text,
html.is-apple-v324 .home-park-maze__title-reveal,
html.is-apple-v324 [class*="-title-reveal"],
html.is-apple-v324 [class*="-line-reveal"]{
  -webkit-backface-visibility:visible!important;
  backface-visibility:visible!important;
  -webkit-transform-style:flat!important;
  transform-style:flat!important;
}

/* --------------------------------------------------------------------------
   3. Bild-Einblendungen laufen auf Apple wieder als Animation

   apple-compat-v324 hat sämtliche Reveal-Container mit Bildinhalt sofort
   sichtbar geschaltet und dabei transition-property:none gesetzt. Auf Apple
   erschienen die Fotos der Unterkünfte dadurch übergangslos, während sie
   unter Android sanft einblenden. Das war eine Notlösung gegen leere
   Bildflächen in Safari; diese Aufgabe übernimmt jetzt der
   IntersectionObserver in apple-compat-v324.js.
   -------------------------------------------------------------------------- */
html.is-apple-v324 figure.ksa-reveal,
html.is-apple-v324 .ksa-media.ksa-reveal,
html.is-apple-v324 figure.glh-reveal,
html.is-apple-v324 .glh-media.glh-reveal,
html.is-apple-v324 .lh2-media.glh-reveal,
html.is-apple-v324 figure.reveal,
html.is-apple-v324 .apt-media.reveal,
html.is-apple-v324 .lounge-card.reveal,
html.is-apple-v324 .dining-detail.reveal,
html.is-apple-v324 .dining-context.reveal,
html.is-apple-v324 figure.prx-enter,
html.is-apple-v324 .prx-image-shell.prx-enter{
  transition-property:opacity,transform!important;
}

/* --------------------------------------------------------------------------
   4. Die vier Unterkunftsbilder auf der Preisseite

   Auf Mobilgeraeten ist .prx-rate-image ein Rasterelement mit min-height:0
   und aspect-ratio:4/3. Rasterelemente stehen standardmaessig auf
   align-self:stretch, ihre Hoehe kommt also aus der Zeilenhoehe. Die
   Zeilenhoehe ergibt sich aus dem Inhalt - und der Inhalt ist ein Bild mit
   height:100%, dessen Prozentangabe eine definite Elternhoehe braucht.
   Chromium loest diese Schleife ueber das aspect-ratio auf, WebKit nicht:
   dort bleibt die Hoehe bei 0 und man sieht nur den grauen Platzhalter
   background:#ddd der Kachel.

   Deshalb traegt auf Mobilgeraeten jetzt das BILD selbst das
   Seitenverhaeltnis und steht normal im Fluss. Damit hat es aus sich heraus
   eine definite Hoehe, die Kachel waechst mit, und keine Prozentangabe muss
   mehr ueber einen Inline-Kasten hinweg aufgeloest werden. Das Ergebnis ist
   in beiden Browsern dasselbe 4:3-Bild wie in der Android-Ansicht.
   -------------------------------------------------------------------------- */
@media (max-width:700px){
  .prx-rate-image{
    display:block!important;
    position:relative!important;
    overflow:hidden!important;
    min-height:0!important;
    aspect-ratio:auto!important;
    align-self:start!important;
  }
  .prx-rate-image>picture{
    display:block!important;
    position:static!important;
    width:100%!important;
    height:auto!important;
  }
  .prx-rate-image>picture>img,
  .prx-rate-image>img{
    position:static!important;
    inset:auto!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:4/3!important;
    max-width:none!important;
    object-fit:cover!important;
    opacity:1!important;
    visibility:visible!important;
  }
}

/* Ab Tablet fuellt das Bild die Kachel, deren Hoehe dort ueber min-height
   bzw. die Zeilenhoehe der Karte definit ist. */
@media (min-width:701px){
  .prx-rate-image{
    display:block!important;
    position:relative!important;
    overflow:hidden!important;
  }
  .prx-rate-image>picture{
    display:block!important;
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
  }
  .prx-rate-image>picture>img,
  .prx-rate-image>img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    object-fit:cover!important;
    opacity:1!important;
    visibility:visible!important;
  }
}

/* --------------------------------------------------------------------------
   5. Kontrast auf den Preiskarten

   Die Karten stehen auf #eee8e1 bzw. #e8e3db, nicht auf Weiss. Gegen diesen
   Hintergrund gemessen lagen die Zeilen "APARTMENT", "145 m2 - 2-5 Personen"
   und die Kurzaufenthalts-Angaben unter dem AA-Schwellenwert von 4,5:1
   (4,39 bzw. 3,78). Mein erster Durchgang hatte gegen Weiss gemessen und sie
   deshalb uebersehen.
   -------------------------------------------------------------------------- */
.prx-rate-meta{ color:#67635f!important; }
.prx-rate-type,
.prx-short span,
.prx-short small{ color:#68635d!important; }

/* --------------------------------------------------------------------------
   6. Typisierte Custom Properties fuer die Parallaxe

   --prx-x/--prx-y/--prx-scale stecken in einer transform-Funktion. Als
   untypisierte Zeichenketten muss WebKit sie in jedem Frame neu parsen und
   kann den Wert nicht auf dem Compositor fortschreiben.
   -------------------------------------------------------------------------- */
@property --prx-x     { syntax:"<length>"; inherits:false; initial-value:0px; }
@property --prx-y     { syntax:"<length>"; inherits:false; initial-value:0px; }

/* --------------------------------------------------------------------------
   7. Der Bildschwenk im Preise-Cover steht jetzt in cover-motion-v334.css.

   Die hier zuvor stehende v333-Regel hat die Animation vom <picture> auf das
   <img> verlegt, aber weiterhin transform animiert. Auf dem <img> liegt
   jedoch transform:...!important aus `.prx-image-shell img`, und !important
   schlaegt CSS-Animationen - die Regel konnte also gar nicht wirken. Die
   neue Fassung bewegt ueber `translate` und wird dadurch nicht blockiert.
   -------------------------------------------------------------------------- */