/* ══════════════════════════════════════════════════════════════════════
   FKK MONTE CARLO — mc-mobile.css
   ZULETZT einbinden, nach allen anderen Stylesheets.

   Mobilgeräte rendern anders als ein Rechner: backdrop-filter, filter
   und clip-path erzeugen jeweils eigene Ebenen, die bei jedem Scrollbild
   neu zusammengesetzt werden. Auf der Seite liegen 63 backdrop-filter,
   132 filter und 47 Dauerläufer-Animationen — zusammen reicht das, um
   ein iPhone 15 unter 30 Bilder je Sekunde zu drücken.

   Diese Datei nimmt gezielt zurück, was am teuersten ist, und lässt
   stehen, was die Gestaltung trägt.
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════════════
   1 · Das Einblenden — Ursache der halben Karten
   
   .rv animierte gleichzeitig opacity UND transform. Die Karten tragen
   zusätzlich clip-path. Diese Kombination ist auf iOS fehlerhaft: Der
   Browser schneidet nach dem alten Kasten zu, während das Element noch
   verschoben wird — man sieht eine halbe Karte.
   
   Auf Touch-Geräten läuft nur noch opacity. Kein transform, kein
   Neuberechnen des Zuschnitts, keine Artefakte.
   ══════════════════════════════════════════════════════════════════════ */
@media (hover:none), (max-width:900px){
  .rv{
    transform:none !important;
    transition:opacity .5s ease !important;
    transition-delay:0s !important;
  }
  .rv.in{ transform:none !important; }

  /* Elemente mit Zuschnitt blenden gar nicht ein — sie sind sofort da.
     Ein Fade auf einem clip-path-Element kostet zwei Ebenen. */
  .bevel.rv, .gal figure.rv, .spot.rv, .tarif.rv, .service.rv{
    opacity:1 !important;
    transition:none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   2 · backdrop-filter — der größte Posten
   
   Jedes Vorkommen zwingt den Browser, den Hintergrund zu kopieren, zu
   filtern und neu zu zeichnen. Bei fixierten Elementen geschieht das
   bei JEDEM Scrollbild.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* Kopfleiste: undurchsichtig statt durchscheinend */
  .rail.pinned{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(6,6,10,.96);
  }

  /* Schubfach */
  .drawer{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(6,6,10,.99);
  }

  /* Overlays */
  .ov{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:rgba(6,6,10,.96);
  }
  .submenu::before, .language-menu, .cookie .bevel__in{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .language-menu{ background:rgba(8,8,13,.99); }

  /* Faktenleiste im Hero */
  .facts{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

  /* Startknopf des Videos */
  .filmbox__play::before{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }

  /* Chat-Knopf */
  .chat-gate{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
}

/* Der Portalbogen im Hero ist das Kernstück der Gestaltung — er bleibt.
   Auf sehr schmalen Geräten weicht er einem Verlauf, der dasselbe Bild
   erzeugt, ohne den Hintergrund zu filtern. */
@media (max-width:560px){
  .portal{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    background:radial-gradient(ellipse 62% 78% at 50% 74%,
               rgba(255,248,230,.16), rgba(255,240,210,.06) 46%, transparent 72%);
  }
}


/* ══════════════════════════════════════════════════════════════════════
   3 · Dauerläufer anhalten
   
   Filmkorn, Sheen und Lichtstaub laufen ununterbrochen — auch wenn man
   nur scrollt. Das Filmkorn deckt dabei den ganzen Bildschirm ab.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width:900px){

  /* Filmkorn: Textur bleibt, Bewegung entfällt */
  body::after{ animation:none !important; }

  /* Lichtstaub im Hero */
  .motes{ display:none !important; }

  /* Kronleuchter-Bloom atmet nicht mehr */
  .bloom{ animation:none !important; opacity:.85; }

  /* Ken-Burns auf dem Video: der Zoom über 42 s zwingt den Browser,
     jedes Bild neu zu skalieren */
  .hero__media video, .hero__media img{
    animation:none !important;
    transform:scale(1.04);
  }

  /* Der Goldverlauf über der Schrift läuft nur noch auf großen Titeln,
     nicht auf jedem kleinen Element */
  .mark__a, .foot__mark, .spot__price, .cta__tel{
    animation:none !important;
    background-position:38% 0 !important;
  }

  /* Wandernde Kante an den Karten: nur noch bei echtem Zeigergerät */
  .bevel::before{ display:none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   4 · Bildfilter
   
   grayscale() auf einem Bild erzeugt eine eigene Ebene. Bei zwanzig
   Galeriebildern sind das zwanzig Ebenen, die beim Scrollen mitlaufen.
   ══════════════════════════════════════════════════════════════════════ */
@media (hover:none), (max-width:900px){
  .gal .ph, .spot__ph, .evt__ph, .today__img .bevel__in{
    filter:none !important;
    transform:none !important;
    transition:none !important;
  }
  .invite__bg{ filter:brightness(.42) !important; transform:none !important; }
  .mapbox iframe{ filter:none !important; }
  .pagehead__bg{ transform:none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   5 · Ruhiges Scrollen
   ══════════════════════════════════════════════════════════════════════ */

/* Trägheitsscrollen auf iOS */
html{ -webkit-overflow-scrolling:touch; }

/* Sprungmarken landen unter der Kopfleiste statt dahinter */
:target, [id]{ scroll-margin-top:calc(var(--rail-h, 84px) + 1rem); }

/* Fixierte Ebenen bekommen einen eigenen Zeichenbereich — verhindert,
   dass beim Scrollen die halbe Seite neu gezeichnet wird */
@media (max-width:900px){
  .rail, .frame, body::before, body::after{ contain:layout paint; }

  /* Der Browser weiß dadurch im Voraus, was sich bewegt */
  .hero{ contain:layout paint; }
}

/* Bilder brauchen ihren Platz, bevor sie geladen sind — sonst springt
   der Inhalt beim Nachladen */
img[loading="lazy"]{ background:var(--onyx-2); }


/* ══════════════════════════════════════════════════════════════════════
   6 · Sehr schwache Geräte
   Setzt das Skript, wenn wenig Arbeitsspeicher oder Kerne vorliegen.
   ══════════════════════════════════════════════════════════════════════ */
html.mc-sparsam .rv{ opacity:1 !important; transition:none !important; }
html.mc-sparsam .sheen{
  animation:none !important;
  background-position:38% 0 !important;
}
html.mc-sparsam body::after{ display:none !important; }
html.mc-sparsam .fluted{ display:none !important; }
html.mc-sparsam .dot{ animation:none !important; }
html.mc-sparsam .portal__line, html.mc-sparsam .portal__line2{ box-shadow:none !important; }
html.mc-sparsam .hero__media video{ display:none !important; }
html.mc-sparsam .hero__media{
  background:var(--onyx) center/cover no-repeat;
}


/* ══════════════════════════════════════════════════════════════════════
   7 · Wer Bewegung abbestellt hat, bekommt keine
   ══════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto !important; }
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .rv{ opacity:1 !important; transform:none !important; }
}